[web] show monthly rates on group plans (#23019)

GitOrigin-RevId: e500869be9def2c150b4773f2f18883021ab356b

services/web/app/src/Features/Subscription/SubscriptionHelper.js

@@ -9,14 +9,38 @@ function shouldPlanChangeAtTermEnd(oldPlan, newPlan) {
   return oldPlan.price_in_cents > newPlan.price_in_cents
 }
 
+/**
+ * This is duplicated in:
+ *   - services/web/scripts/plan-prices/plans.mjs
+ *   - services/web/modules/subscriptions/frontend/js/pages/plans-new-design/group-member-picker/group-plan-pricing.js
+ * @param {number} number
+ * @returns {number}
+ */
+function roundUpToNearest5Cents(number) {
+  return Math.ceil(number * 20) / 20
+}
+
 /**
  * @import { CurrencyCode } from '../../../../types/subscription/currency'
  */
 
+/**
+ * @typedef {Object} PlanToPrice
+ * @property {string} collaborator
+ * @property {string} professional
+ */
+
+/**
+ * @typedef {Object} LocalizedGroupPrice
+ * @property {PlanToPrice} price
+ * @property {PlanToPrice} pricePerUser
+ * @property {PlanToPrice} pricePerUserPerMonth
+ */
+
 /**
  * @param {CurrencyCode} recommendedCurrency
  * @param {string} locale
- * @returns {{ price: { collaborator: string, professional: string }, pricePerUser: { collaborator: string, professional: string } }} - localized group price
+ * @returns {LocalizedGroupPrice}
  */
 function generateInitialLocalizedGroupPrice(recommendedCurrency, locale) {
   const INITIAL_LICENSE_SIZE = 2
@@ -27,11 +51,17 @@ function generateInitialLocalizedGroupPrice(recommendedCurrency, locale) {
       INITIAL_LICENSE_SIZE
     ].price_in_cents / 100
   const collaboratorPricePerUser = collaboratorPrice / INITIAL_LICENSE_SIZE
+  const collaboratorPricePerUserPerMonth = roundUpToNearest5Cents(
+    collaboratorPrice / INITIAL_LICENSE_SIZE / 12
+  )
   const professionalPrice =
     GroupPlansData.enterprise.professional[recommendedCurrency][
       INITIAL_LICENSE_SIZE
     ].price_in_cents / 100
   const professionalPricePerUser = professionalPrice / INITIAL_LICENSE_SIZE
+  const professionalPricePerUserPerMonth = roundUpToNearest5Cents(
+    professionalPrice / INITIAL_LICENSE_SIZE / 12
+  )
 
   /**
    * @param {number} price
@@ -49,6 +79,10 @@ function generateInitialLocalizedGroupPrice(recommendedCurrency, locale) {
       collaborator: formatPrice(collaboratorPricePerUser),
       professional: formatPrice(professionalPricePerUser),
     },
+    pricePerUserPerMonth: {
+      collaborator: formatPrice(collaboratorPricePerUserPerMonth),
+      professional: formatPrice(professionalPricePerUserPerMonth),
+    },
   }
 }