Merge pull request #18720 from overleaf/jel-begin-light-touch-plans

[web] Begin light touch redesign of plans page

GitOrigin-RevId: dda5ab1c0817371400f30f2e4d230f5c3a5728f4

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

@@ -147,8 +147,36 @@ async function plansPageLightDesign(req, res) {
     return res.redirect(302, '/user/subscription/plans')
   }
 
+  const { currency } = await _getRecommendedCurrency(req, res)
+
+  const language = req.i18n.language || 'en'
+  const currentView = 'annual'
+  const plans = SubscriptionViewModelBuilder.buildPlansList()
+  const groupPlanModalDefaults = _getGroupPlanModalDefaults(req, currency)
+  const formatCurrency = SubscriptionHelper.formatCurrencyDefault
+
+  // TODO: add page view analytics?
   res.render('subscriptions/plans-light-design', {
     title: 'plans_and_pricing',
+    currentView,
+    plans,
+    itm_content: req.query?.itm_content,
+    itm_referrer: req.query?.itm_referrer,
+    itm_campaign: 'plans',
+    language,
+    formatCurrency,
+    recommendedCurrency: currency,
+    planFeatures,
+    plansConfig,
+    groupPlans: GroupPlansData,
+    groupPlanModalOptions,
+    groupPlanModalDefaults,
+    initialLocalizedGroupPrice:
+      SubscriptionHelper.generateInitialLocalizedGroupPrice(
+        currency ?? 'USD',
+        language,
+        formatCurrency
+      ),
   })
 }
 

services/web/app/views/subscriptions/plans-light-design.pug

@@ -1,13 +1,58 @@
 extends ../layout-website-redesign
 
 block vars
-	- var suppressRelAlternateLinks = true
-	- metadata.canonicalURL = (settings.siteUrl ? settings.siteUrl : '') + '/user/subscription/plans'
+	- entrypoint = 'pages/user/subscription/plans-v2/plans-v2-main'
 
-//- TODO: uncomment after bringing all of the elements from the old plans page
-//- block entrypointVar
-//- 	- entrypoint = 'pages/user/subscription/plans-v2/plans-v2-main'
+block append meta
+	meta(name="ol-recommendedCurrency" content=recommendedCurrency)
+	meta(name="ol-groupPlans" data-type="json" content=groupPlans)
+	meta(name="ol-currencySymbols" data-type="json" content=groupPlanModalOptions.currencySymbols)
+	meta(name="ol-itm_content" content=itm_content)
+	meta(name="ol-currentView" content=currentView)
 
 block content
-	main.content.website-redesign#main-content
-		p plans page light-design variant
+	main.website-redesign#main-content
+		.plans
+			.container
+				//- if showInrGeoBanner
+				//- 	div.notification.notification-type-success.text-centered
+				//- 		div.notification-content !{translate("inr_discount_offer_plans_page_banner", {flag: '🇮🇳'})}
+				//- if showBrlGeoBanner
+				//- 	div.notification.notification-type-success.text-centered
+				//- 		div.notification-content !{translate("brl_discount_offer_plans_page_banner", {flag: '🇧🇷'})}
+				//- if showLATAMBanner
+				//- 	div.notification.notification-type-success.text-centered
+				//- 		div.notification-content !{translate("latam_discount_offer_plans_page_banner", {flag: latamCountryBannerDetails.latamCountryFlag, country: latamCountryBannerDetails.country, currency: latamCountryBannerDetails.currency, discount: latamCountryBannerDetails.discount })}
+
+				.row
+					.col-md-12
+						h1.text-centered
+							span.mono-text
+								span.aria-hidden {
+								span #{translate('plans_and_pricing_lowercase')}
+								span.aria-hidden }
+							| #{translate('choose_your_plan')}
+
+				include ./plans/_cards_controls_tables
+					
+				+currency_and_payment_methods()
+
+				include ./plans/_university_info
+
+				include ./plans/_quotes
+
+				include ./plans/_faq
+
+				.row.row-spaced-large
+					.col-md-12
+						.plans-header.text-centered
+							hr
+							h2 #{translate('still_have_questions')}
+							button.btn.plans-v2-btn-header.text-capitalize(
+								data-ol-open-contact-form-modal="general"
+							) #{translate('contact_us')}
+
+				.row.row-spaced-large
+
+	include ./plans/_group_plan_modal
+	!= moduleIncludes("contactModalGeneral-marketing", locals)

services/web/frontend/stylesheets/app/plans/plans-v2.less

@@ -747,7 +747,7 @@ span.plans-v2-license-picker-educational-discount-learn-more-container {
 
   @media (min-width: @screen-sm-min) {
     // highlight rows on hover
-    tr:not(.plans-v2-table-divider):hover {
+    tr:not(.plans-v2-table-divider):not(:first-child):hover {
       background-color: @table-hover-bg;
 
       .plans-v2-table-feature-name,
@@ -1288,3 +1288,22 @@ p.plans-v2-table-green-highlighted-text {
     padding: @padding-lg;
   }
 }
+
+.website-redesign {
+  .plans {
+    padding-top: calc(var(--spacing-16) + var(--header-height));
+
+    h1 {
+      margin-top: 0;
+      margin-bottom: var(--spacing-08);
+    }
+    .plans-v2-top-switch {
+      margin-top: var(--spacing-09);
+    }
+
+    .plans-v2-table,
+    .plans-v2-table-column-header {
+      background-color: transparent; // remove colors set by default variant
+    }
+  }
+}

services/web/frontend/stylesheets/variables/all.less

@@ -117,6 +117,24 @@
 @border-color-base: @neutral-60;
 @border-color-disabled: @color-disabled;
 
+@spacing-00: 0px;
+@spacing-01: 2px;
+@spacing-02: 4px;
+@spacing-03: 6px;
+@spacing-04: 8px;
+@spacing-05: 12px;
+@spacing-06: 16px;
+@spacing-07: 20px;
+@spacing-08: 24px;
+@spacing-09: 32px;
+@spacing-10: 40px;
+@spacing-11: 48px;
+@spacing-12: 56px;
+@spacing-13: 64px;
+@spacing-14: 72px;
+@spacing-15: 80px;
+@spacing-16: 96px;
+
 //** Horizontal line color.
 @hr-border: @neutral-20;
 

services/web/frontend/stylesheets/variables/css-variables.less

@@ -91,4 +91,26 @@
   --sapphire-blue: @sapphire-blue;
   --sapphire-blue-dark: @sapphire-blue-dark;
   --vivid-tangerine: @vivid-tangerine;
+
+  // spacing
+  --spacing-00: @spacing-00;
+  --spacing-01: @spacing-01;
+  --spacing-02: @spacing-02;
+  --spacing-03: @spacing-03;
+  --spacing-04: @spacing-04;
+  --spacing-05: @spacing-05;
+  --spacing-06: @spacing-06;
+  --spacing-07: @spacing-07;
+  --spacing-08: @spacing-08;
+  --spacing-09: @spacing-09;
+  --spacing-10: @spacing-10;
+  --spacing-11: @spacing-11;
+  --spacing-12: @spacing-12;
+  --spacing-13: @spacing-13;
+  --spacing-14: @spacing-14;
+  --spacing-15: @spacing-15;
+  --spacing-16: @spacing-16;
+
+  // layout
+  --header-height: @header-height;
 }

services/web/locales/en.json

@@ -1338,6 +1338,7 @@
   "planned_maintenance": "Planned Maintenance",
   "plans_amper_pricing": "Plans & Pricing",
   "plans_and_pricing": "Plans and Pricing",
+  "plans_and_pricing_lowercase": "plans and pricing",
   "please_ask_the_project_owner_to_upgrade_to_track_changes": "Please ask the project owner to upgrade to use track changes",
   "please_change_primary_to_remove": "Please change your primary email in order to remove",
   "please_check_your_inbox": "Please check your inbox",