Merge pull request #19725 from overleaf/jel-interstitial-page-light-touch

[web] Interstitial payment page for light touch redesign

GitOrigin-RevId: ff83df760dd552d001ad8815f0a34cae5e13e6ff

services/web/app/views/_mixins/links.pug

@@ -116,3 +116,8 @@ mixin linkTweet(linkText, linkClass, tweetText, track)
 mixin linkUniversities(linkText, linkClass)
 	a(href=(settings.siteUrl ? settings.siteUrl : '') + "/for/universities" class=linkClass ? linkClass : '')
 		| #{linkText ? linkText : 'universities'}
+
+mixin linkWithArrow({text, href, eventTracking, eventSegmentation})
+	a.link-with-arrow(href=href event-tracking=eventTracking event-segmentation=eventSegmentation)
+		| #{text}
+		i.material-symbols(aria-hidden="true") arrow_right_alt

services/web/app/views/subscriptions/interstitial-payment-light-design.pug

@@ -1,16 +1,71 @@
 extends ../layout-marketing
 
-include ./plans/_mixins
+include ./plans/light-redesign/_mixins
+include ../_mixins/eyebrow
+include ../_mixins/links
 	
-//- TODO: uncomment this
-//- block entrypointVar
-//- 	- entrypoint = 'pages/user/subscription/plans-v2/plans-v2-main'
+block entrypointVar
+	- entrypoint = 'pages/user/subscription/plans-v2/plans-v2-main'
 
 block vars
 	- var suppressFooter = true
 	- var suppressNavbarRight = true
 	- var suppressCookieBanner = true
 
+block append meta
+	meta(name="ol-recommendedCurrency" content=recommendedCurrency)
+	meta(name="ol-itm_content" content=itm_content)
+
 block content
-	main.website-redesign.content#main-content
-		p interstitial payment light design
+	main.website-redesign#main-content
+		.plans-page.plans-page-interstitial
+			.container
+				if showInrGeoBanner
+					div.notification.notification-type-success.text-center
+						div.notification-content !{translate("inr_discount_offer_plans_page_banner", {flag: '🇮🇳'})}
+				if showBrlGeoBanner
+					div.notification.notification-type-success.text-center
+						div.notification-content !{translate("brl_discount_offer_plans_page_banner", {flag: '🇧🇷'})}
+				if showLATAMBanner
+					div.notification.notification-type-success.text-center
+						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.text-center
+						h1
+							+eyebrow(translate('plans_and_pricing_lowercase'))
+							| #{translate('choose_your_plan')}
+
+				+monthly_annual_switch("monthly", "paywall-plans-page-toggle", '{}')
+
+				.plans-table-sticky-header-container
+					+plans_table_sticky_header(true, interstitialPaymentConfig)
+
+				.row.plans-table-container(data-ol-plans-v2-period='monthly')
+					.col-sm-12
+						.row
+							table.card.plans-table.plans-table-individual
+								+plans_table('monthly', interstitialPaymentConfig)
+
+				.row.plans-table-container(hidden data-ol-plans-v2-period='annual')
+					.col-sm-12
+						.row
+							table.card.plans-table.plans-table-individual
+								+plans_table('annual', interstitialPaymentConfig)
+
+				if (showCurrencyAndPaymentMethods)
+					+currency_and_payment_methods()
+
+				//- sticky header on mobile will be "hidden" (by removing its sticky position) if it reaches this div
+				.invisible(aria-hidden="true" data-ol-plans-v2-table-sticky-header-stop)
+
+			if (showSkipLink)
+				.row.row-spaced-small.text-center
+					+linkWithArrow({
+						text: translate("continue_with_free_plan"),
+						href: skipLinkTarget,
+						eventTracking: 'skip-button-click',
+						eventSegmentation: {location: 'interstitial-page'}
+					})
+
+	!= moduleIncludes("contactModalGeneral-marketing", locals)

services/web/app/views/subscriptions/plans/light-redesign/_mixins.pug

@@ -326,7 +326,7 @@ mixin table_cell(feature, plan)
 
 //- table header and control mixins
 
-mixin plans_v2_table_sticky_header(withSwitch, config)
+mixin plans_table_sticky_header(withSwitch, config)
 	- var tableHeadKeys = Object.keys(config.tableHead)
 	.row.plans-table-sticky-header.sticky(
 		data-ol-plans-v2-table-sticky-header
@@ -358,17 +358,17 @@ mixin table_sticky_header_all(plansConfig)
 	.row.plans-table-sticky-header-container(
 		data-ol-plans-v2-view='individual'
 	)
-		+plans_v2_table_sticky_header(true, plansConfig.individual)
+		+plans_table_sticky_header(true, plansConfig.individual)
 	.row.plans-table-sticky-header-container(
 		hidden
 		data-ol-plans-v2-view='group'
 	)
-		+plans_v2_table_sticky_header(false, plansConfig.group)
+		+plans_table_sticky_header(false, plansConfig.group)
 	.row.plans-table-sticky-header-container(
 		hidden
 		data-ol-plans-v2-view='student'
 	)
-		+plans_v2_table_sticky_header(true, plansConfig.student)
+		+plans_table_sticky_header(true, plansConfig.student)
 
 mixin monthly_annual_switch(initialState, eventTracking, eventSegmentation)
 	- var monthlyAnnualToggleChecked = initialState === 'monthly'

services/web/frontend/stylesheets/app/plans/plans-light-touch-redesign.less

@@ -834,6 +834,13 @@
       // The forced width below (plans-table-cols-n) is to ensure the table columns have an equal width
       // because on mobile, the first column (empty cell on first `tr` and feature name on the rest of `tr`) will be shown as its own row
       // and the rest of the `tr` will incorporate a full width of the viewport
+      tr.plans-table-cols-4:not(.plans-table-divider) {
+        td,
+        th:not(:first-of-type) {
+          width: 25%;
+        }
+      }
+
       tr.plans-table-cols-3:not(.plans-table-divider) {
         td,
         th:not(:first-of-type) {
@@ -1203,3 +1210,23 @@
     }
   }
 }
+
+.plans-page-interstitial {
+  padding-bottom: var(--spacing-09);
+  h1 {
+    margin-bottom: var(--spacing-13);
+  }
+  .monthly-annual-switch {
+    margin-top: 0;
+  }
+
+  .plans-table-btn-buy-container-mobile {
+    @media (max-width: @screen-xs-max) {
+      .btn {
+        // interstitial page is a 4 column layout and CTA text cannot fit without adjustments
+        font-size: 11px;
+        text-wrap: auto;
+      }
+    }
+  }
+}