From c4c36c9cea0340328d5a5c8f92bbe51873a4766d Mon Sep 17 00:00:00 2001 From: Jessica Lawshe <5312836+lawshe@users.noreply.github.com> Date: Mon, 12 Aug 2024 08:41:26 -0500 Subject: [PATCH] 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 | 5 ++ .../interstitial-payment-light-design.pug | 67 +++++++++++++++++-- .../plans/light-redesign/_mixins.pug | 8 +-- .../app/plans/plans-light-touch-redesign.less | 27 ++++++++ 4 files changed, 97 insertions(+), 10 deletions(-) diff --git a/services/web/app/views/_mixins/links.pug b/services/web/app/views/_mixins/links.pug index 740bda5d7a..7d60898a78 100644 --- a/services/web/app/views/_mixins/links.pug +++ b/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 diff --git a/services/web/app/views/subscriptions/interstitial-payment-light-design.pug b/services/web/app/views/subscriptions/interstitial-payment-light-design.pug index 6c4b24faaf..74e4fab949 100644 --- a/services/web/app/views/subscriptions/interstitial-payment-light-design.pug +++ b/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) diff --git a/services/web/app/views/subscriptions/plans/light-redesign/_mixins.pug b/services/web/app/views/subscriptions/plans/light-redesign/_mixins.pug index 1aebd2642c..b2855bdf0a 100644 --- a/services/web/app/views/subscriptions/plans/light-redesign/_mixins.pug +++ b/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' diff --git a/services/web/frontend/stylesheets/app/plans/plans-light-touch-redesign.less b/services/web/frontend/stylesheets/app/plans/plans-light-touch-redesign.less index 9022d007dc..00fe54fcba 100644 --- a/services/web/frontend/stylesheets/app/plans/plans-light-touch-redesign.less +++ b/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; + } + } + } +}