github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
[web] Interstitial payment page for light touch redesign

GitOrigin-RevId: ff83df760dd552d001ad8815f0a34cae5e13e6ff
This commit is contained in:
Jessica Lawshe 2024-08-12 08:41:26 -05:00 committed by Copybot
parent 2304536844
commit c4c36c9cea
4 changed files with 97 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
services/web/app/views/_mixins/links.pug
View file

@ -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

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

@ -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)

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

@ -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'

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

@ -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;
}
}
}
}