From d35e11eaefe6779cb96edae996cce35ae8ce8199 Mon Sep 17 00:00:00 2001 From: M Fahru Date: Tue, 11 Jun 2024 06:39:56 -0700 Subject: [PATCH] Merge pull request #18720 from overleaf/jel-begin-light-touch-plans [web] Begin light touch redesign of plans page GitOrigin-RevId: dda5ab1c0817371400f30f2e4d230f5c3a5728f4 --- .../Subscription/SubscriptionController.js | 28 +++++++++ .../subscriptions/plans-light-design.pug | 59 ++++++++++++++++--- .../stylesheets/app/plans/plans-v2.less | 21 ++++++- .../frontend/stylesheets/variables/all.less | 18 ++++++ .../stylesheets/variables/css-variables.less | 22 +++++++ services/web/locales/en.json | 1 + 6 files changed, 141 insertions(+), 8 deletions(-) diff --git a/services/web/app/src/Features/Subscription/SubscriptionController.js b/services/web/app/src/Features/Subscription/SubscriptionController.js index 0a7f701d57..136c8e1047 100644 --- a/services/web/app/src/Features/Subscription/SubscriptionController.js +++ b/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 + ), }) } diff --git a/services/web/app/views/subscriptions/plans-light-design.pug b/services/web/app/views/subscriptions/plans-light-design.pug index c939291588..2dd6c507c8 100644 --- a/services/web/app/views/subscriptions/plans-light-design.pug +++ b/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) diff --git a/services/web/frontend/stylesheets/app/plans/plans-v2.less b/services/web/frontend/stylesheets/app/plans/plans-v2.less index da9dc26d56..d3e2ebe80c 100644 --- a/services/web/frontend/stylesheets/app/plans/plans-v2.less +++ b/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 + } + } +} diff --git a/services/web/frontend/stylesheets/variables/all.less b/services/web/frontend/stylesheets/variables/all.less index f8b25b8714..fcb28326c1 100644 --- a/services/web/frontend/stylesheets/variables/all.less +++ b/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; diff --git a/services/web/frontend/stylesheets/variables/css-variables.less b/services/web/frontend/stylesheets/variables/css-variables.less index 0095ca7600..1d4e7118ef 100644 --- a/services/web/frontend/stylesheets/variables/css-variables.less +++ b/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; } diff --git a/services/web/locales/en.json b/services/web/locales/en.json index 28166fe21e..4afd82f221 100644 --- a/services/web/locales/en.json +++ b/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",