From fe0a48720c6d20d40e6c06cbf9acc86e77fc24be Mon Sep 17 00:00:00 2001
From: Kristina <7614497+khjrtbrg@users.noreply.github.com>
Date: Thu, 23 Jan 2025 10:45:42 +0100
Subject: [PATCH] [web] add annual-prices-monthly-rates experiment (#22956)

* [web] add annual-prices-monthly-rates experiment
* [web] add annualMonthly to plans.mjs and update settings.overrides.saas.js
* [web] display monthly rates on individual plans on desktop
* [web] display monthly rates on individual plans on mobile
* [web] add monthly rates split test to view event segmentation

GitOrigin-RevId: 4ddbdc2fc6a9ec5a868643d3fc0e3f78ef27772d
---
 .../app/plans/plans-new-design.less           |  5 +++++
 services/web/locales/en.json                  |  2 ++
 services/web/scripts/plan-prices/README.md    |  2 +-
 services/web/scripts/plan-prices/plans.mjs    | 22 ++++++++++++++-----
 4 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/services/web/frontend/stylesheets/app/plans/plans-new-design.less b/services/web/frontend/stylesheets/app/plans/plans-new-design.less
index d5c3f16bb8..77a277b8e4 100644
--- a/services/web/frontend/stylesheets/app/plans/plans-new-design.less
+++ b/services/web/frontend/stylesheets/app/plans/plans-new-design.less
@@ -417,6 +417,7 @@
     .plans-new-table-header-price-unit {
       font-size: var(--font-size-02);
       line-height: var(--line-height-02);
+      text-align: center;
     }
 
     .plans-new-table-cta {
@@ -809,6 +810,10 @@
       .plans-card-price-container-mobile {
         display: flex;
         align-items: baseline;
+
+        .light-gray-text:has(.billed-annually-disclaimer) {
+          align-self: center;
+        }
       }
 
       .group-plans-card-price-container-mobile {
diff --git a/services/web/locales/en.json b/services/web/locales/en.json
index 67f96e3a51..e7e6f6de88 100644
--- a/services/web/locales/en.json
+++ b/services/web/locales/en.json
@@ -213,6 +213,7 @@
   "beta_program_opt_out_action": "Opt-Out of Beta Program",
   "better_bibliographies": "Better bibliographies",
   "bibliographies": "Bibliographies",
+  "billed_annually": "billed annually",
   "billed_yearly": "billed yearly",
   "billing_period_sentence_case": "Billing period",
   "binary_history_error": "Preview not available for this file type",
@@ -1504,6 +1505,7 @@
   "pending_addon_cancellation": "Your subscription will change to remove the <strong>__addOnName__</strong> add-on at the end of the current billing period.",
   "pending_invite": "Pending invite",
   "per_month": "per month",
+  "per_month_billed_annually": "per month, billed annually",
   "per_user": "per user",
   "per_user_per_year": "per user / per year",
   "per_user_year": "per user / year",
diff --git a/services/web/scripts/plan-prices/README.md b/services/web/scripts/plan-prices/README.md
index d26b288108..e64e1d9162 100644
--- a/services/web/scripts/plan-prices/README.md
+++ b/services/web/scripts/plan-prices/README.md
@@ -6,7 +6,7 @@ The scripts will put the output results into the `output` folder.
 
 ### Create localized and group plan pricing
 
-_Command_ `node plans.mjs -f fileName -o outputdir` - generates three json files:
+_Command_ `node plans.mjs -f fileName -o outputdir` - generates two json files:
 
 - `localizedPlanPricing.json` for `/services/web/config/settings.overrides.saas.js`
 - `groups.json` for `/services/web/app/templates/plans/groups.json`
diff --git a/services/web/scripts/plan-prices/plans.mjs b/services/web/scripts/plan-prices/plans.mjs
index 0ef6450370..c89fd3110b 100644
--- a/services/web/scripts/plan-prices/plans.mjs
+++ b/services/web/scripts/plan-prices/plans.mjs
@@ -1,5 +1,5 @@
 // Creates data for localizedPlanPricing object in settings.overrides.saas.js
-// and plans object in main/plans.js
+// and group plans object in app/templates/plans/groups.json
 
 // https://github.com/import-js/eslint-plugin-import/issues/1810
 // eslint-disable-next-line import/no-unresolved
@@ -64,10 +64,13 @@ const currencies = [
   'USD',
 ]
 
+function roundUpToNearest5Cents(number) {
+  return Math.ceil(number * 20) / 20
+}
+
 function generatePlans(workSheetJSON) {
   // localizedPlanPricing object for settings.overrides.saas.js
   const localizedPlanPricing = {}
-  // plans object for main/plans.js
 
   for (const currency of currencies) {
     localizedPlanPricing[currency] = {
@@ -102,17 +105,26 @@ function generatePlans(workSheetJSON) {
       const monthly = Number(monthlyPlan[currency])
       const monthlyTimesTwelve = Number(monthlyPlan[currency] * 12)
       const annual = Number(annualPlan[currency])
+      const annualDividedByTwelve = Number(
+        roundUpToNearest5Cents(annualPlan[currency] / 12)
+      )
 
       localizedPlanPricing[currency] = {
         ...localizedPlanPricing[currency],
-        [outputKey]: { monthly, monthlyTimesTwelve, annual },
+        [outputKey]: {
+          monthly,
+          monthlyTimesTwelve,
+          annual,
+          annualDividedByTwelve,
+        },
       }
     }
   }
-  return { localizedPlanPricing }
+  return localizedPlanPricing
 }
 
 function generateGroupPlans(workSheetJSON) {
+  // group plans object for app/templates/plans/groups.json
   const groupPlans = workSheetJSON.filter(data =>
     data.plan_code.startsWith('group')
   )
@@ -174,7 +186,7 @@ function writeFile(outputFile, data) {
   fs.writeFileSync(outputFile, data)
 }
 
-const { localizedPlanPricing } = generatePlans(input)
+const localizedPlanPricing = generatePlans(input)
 const groupPlans = generateGroupPlans(input)
 
 if (argv.output) {