agw/overleaf-cep
1
0
Fork 0
mirror of https://github.com/yu-i-i/overleaf-cep.git synced 2026-06-08 08:39:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #24659 from overleaf/mf-init-plans-page-bs5

Browse Source 
[web] Migrate plans page and interstitial payment page to bootstrap 5 with feature flag

GitOrigin-RevId: 4491b2205a19b943e8d8bf13f699f92278f5e183
This commit is contained in:
M Fahru
2025-04-16 07:12:18 -07:00
committed by Copybot
parent dfc00ed8c1
commit 04d36122bd
11 changed files with 1502 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/web/app/views/_mixins/quote.pug
+6 -3
View File
@@ -32,7 +32,8 @@ mixin collinsQuote1
-var quotePerson = 'Christopher Collins'
-var quotePersonPosition = 'Associate Professor and Lab Director, Ontario Tech University'
-var quotePersonImg = buildImgPath("advocates/collins.jpg")
+quoteLargeTextCentered(quote, quotePerson, quotePersonPosition, null, null, quotePersonImg, quotePerson)
.card-body
+quoteLargeTextCentered(quote, quotePerson, quotePersonPosition, null, null, quotePersonImg, quotePerson)
mixin collinsQuote2
.card.card-dark-green-bg
@@ -40,7 +41,8 @@ mixin collinsQuote2
-var quotePerson = 'Christopher Collins'
-var quotePersonPosition = 'Associate Professor and Lab Director, Ontario Tech University'
-var quotePersonImg = buildImgPath("advocates/collins.jpg")
+quoteLargeTextCentered(quote, quotePerson, quotePersonPosition, null, null, quotePersonImg, quotePerson)
.card-body
+quoteLargeTextCentered(quote, quotePerson, quotePersonPosition, null, null, quotePersonImg, quotePerson)
mixin bennettQuote1
.card.card-dark-green-bg
@@ -48,4 +50,5 @@ mixin bennettQuote1
-var quotePerson = 'Andrew Bennett'
-var quotePersonPosition = 'Software Architect, Symplectic'
-var quotePersonImg = buildImgPath("advocates/bennett.jpg")
+quoteLargeTextCentered(quote, quotePerson, quotePersonPosition, null, null, quotePersonImg, quotePerson)
.card-body
+quoteLargeTextCentered(quote, quotePerson, quotePersonPosition, null, null, quotePersonImg, quotePerson)
services/web/app/views/layout/navbar-marketing.pug
+3 -1
View File
@@ -1,4 +1,6 @@
nav.navbar.navbar-default.navbar-main
nav.navbar.navbar-default.navbar-main(class={
'website-redesign-navbar': isWebsiteRedesign
})
.container-fluid
.navbar-header
if (typeof(suppressNavbarRight) == "undefined")
services/web/app/views/subscriptions/plans/_faq_new.pug
+28 -7
View File
@@ -13,21 +13,40 @@ include ../../_mixins/eyebrow
.row
.col-xs-12
.ol-tabs-scrollable
div(
class={
'plans-faq-tabs': bootstrapVersion === 5,
'ol-tabs': bootstrapVersion === 5,
'ol-tabs-scrollable': bootstrapVersion === 3
}
)
.nav-tabs-container
ul.nav.nav-tabs(role="tablist")
li.active(role="presentation")
//- In the bs5 version of plans page, the `active` class need to be added to the `a` tag instead of the parent `li` tag
//- If the `plans-page-bs5` split test has been completed, remove the `active` class from the `li` tag since we're not using it anymore
//- If the `plans-page-bs5` split test has been completed, remove the `data-toggle` because it is not needed anymore (bs5 uses `data-bs-toggle`)
li(
role="presentation"
class={
active: bootstrapVersion === 3
}
)
a(
role="tab"
data-toggle="tab"
data-bs-toggle="tab"
href='#' + managingYourSubscription
aria-controls=managingYourSubscription
class={
active: bootstrapVersion === 5
}
)
| #{translate('managing_your_subscription')}
li(role="presentation")
a(
role="tab"
data-toggle="tab"
data-bs-toggle="tab"
href='#' + overleafIndividualPlans
aria-controls=overleafIndividualPlans
)
@@ -36,6 +55,7 @@ include ../../_mixins/eyebrow
a(
role="tab"
data-toggle="tab"
data-bs-toggle="tab"
href='#' + overleafGroupPlans
aria-controls=overleafGroupPlans
)
@@ -58,8 +78,9 @@ include ../../_mixins/eyebrow
)
+overleafGroupPlans()
.row.plans-faq-support
span #{translate('still_have_questions')}
button(data-ol-open-contact-form-modal="general")
span(style="margin-right: 4px") #{translate('contact_support')}
i.icon-md.material-symbols.material-symbols-rounded.material-symbols-arrow-right(aria-hidden="true") arrow_right_alt
.row
.col-xs-12.plans-faq-support
span #{translate('still_have_questions')}
button(data-ol-open-contact-form-modal="general")
span(style="margin-right: 4px") #{translate('contact_support')}
i.icon-md.material-symbols.material-symbols-rounded.material-symbols-arrow-right(aria-hidden="true") arrow_right_alt
services/web/app/views/subscriptions/plans/_plans_faq_tabs.pug
+146 -16
View File
@@ -1,7 +1,17 @@
//- If the `plans-page-bs5` split test has been completed, remove the `data-toggle` and `data-target` because it is not needed anymore (bs5 uses `data-bs-toggle` and `data-bs-target`)
mixin managingYourSubscription()
.ol-accordions-container
.custom-accordion-item
button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#managingYourSubscriptionQ1" aria-expanded="false" aria-controls="managingYourSubscriptionQ1")
button.custom-accordion-header.collapsed(
type="button"
data-toggle="collapse"
data-target="#managingYourSubscriptionQ1"
data-bs-toggle="collapse"
data-bs-target="#managingYourSubscriptionQ1"
aria-expanded="false"
aria-controls="managingYourSubscriptionQ1"
)
| Can I change plans or cancel later?
span.custom-accordion-icon
i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
@@ -11,7 +21,15 @@ mixin managingYourSubscription()
strong Account > Subscription
span when logged in to Overleaf. You can change plans, switch between monthly and annual billing options, or cancel to downgrade to the free plan. When canceling, your subscription will continue until the end of the billing period.
.custom-accordion-item
button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#managingYourSubscriptionQ2" aria-expanded="false" aria-controls="managingYourSubscriptionQ2")
button.custom-accordion-header.collapsed(
type="button"
data-toggle="collapse"
data-target="#managingYourSubscriptionQ2"
data-bs-toggle="collapse"
data-bs-target="#managingYourSubscriptionQ2"
aria-expanded="false"
aria-controls="managingYourSubscriptionQ2"
)
| If I change or cancel my Overleaf plan, will I lose my projects?
span.custom-accordion-icon
i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
@@ -19,7 +37,15 @@ mixin managingYourSubscription()
.custom-accordion-body
| No. Changing or canceling your plan won’t affect your projects, the only change will be to the features available to you. You can see which features are available only on paid plans in the comparison table.
.custom-accordion-item
button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#managingYourSubscriptionQ3" aria-expanded="false" aria-controls="managingYourSubscriptionQ3")
button.custom-accordion-header.collapsed(
type="button"
data-toggle="collapse"
data-target="#managingYourSubscriptionQ3"
data-bs-toggle="collapse"
data-bs-target="#managingYourSubscriptionQ3"
aria-expanded="false"
aria-controls="managingYourSubscriptionQ3"
)
| Can I pay by invoice or purchase order?
span.custom-accordion-icon
i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
@@ -27,7 +53,15 @@ mixin managingYourSubscription()
.custom-accordion-body
| This is possible when you’re purchasing a group subscription for five or more people, or a site license. For individual subscriptions, we can only accept payment online via credit card, debit card, or PayPal.
.custom-accordion-item
button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#managingYourSubscriptionQ4" aria-expanded="false" aria-controls="managingYourSubscriptionQ4")
button.custom-accordion-header.collapsed(
type="button"
data-toggle="collapse"
data-target="#managingYourSubscriptionQ4"
data-bs-toggle="collapse"
data-bs-target="#managingYourSubscriptionQ4"
aria-expanded="false"
aria-controls="managingYourSubscriptionQ4"
)
| How do I view/update the credit card being charged for my subscription?
span.custom-accordion-icon
i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
@@ -51,7 +85,15 @@ mixin managingYourSubscription()
mixin overleafIndividualPlans()
.ol-accordions-container
.custom-accordion-item
button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafIndividualPlansQ1" aria-expanded="false" aria-controls="overleafIndividualPlansQ1")
button.custom-accordion-header.collapsed(
type="button"
data-toggle="collapse"
data-target="#overleafIndividualPlansQ1"
data-bs-toggle="collapse"
data-bs-target="#overleafIndividualPlansQ1"
aria-expanded="false"
aria-controls="overleafIndividualPlansQ1"
)
| How does the free trial work?
span.custom-accordion-icon
i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
@@ -71,7 +113,15 @@ mixin overleafIndividualPlans()
span when logged in to Overleaf (the trial will continue for the full 7 days).
.custom-accordion-item
button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafIndividualPlansQ2" aria-expanded="false" aria-controls="overleafIndividualPlansQ2")
button.custom-accordion-header.collapsed(
type="button"
data-toggle="collapse"
data-target="#overleafIndividualPlansQ2"
data-bs-toggle="collapse"
data-bs-target="#overleafIndividualPlansQ2"
aria-expanded="false"
aria-controls="overleafIndividualPlansQ2"
)
| What’s a collaborator on an Overleaf individual subscription?
span.custom-accordion-icon
i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
@@ -80,7 +130,15 @@ mixin overleafIndividualPlans()
| A collaborator is someone you invite to work with you on a project. So, for example, on our Standard plan you can have up to 10 people collaborating with you on any given project.
.custom-accordion-item
button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafIndividualPlansQ3" aria-expanded="false" aria-controls="overleafIndividualPlansQ3")
button.custom-accordion-header.collapsed(
type="button"
data-toggle="collapse"
data-target="#overleafIndividualPlansQ3"
data-bs-toggle="collapse"
data-bs-target="#overleafIndividualPlansQ3"
aria-expanded="false"
aria-controls="overleafIndividualPlansQ3"
)
| The individual Standard plan has 10 project collaborators, does it mean that 10 people will be upgraded?
span.custom-accordion-icon
i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
@@ -90,7 +148,15 @@ mixin overleafIndividualPlans()
strong only
span for the project(s) they’re working on with you. If your collaborators want access to those features on their own projects, they will need to purchase their own subscription. (If you work with the same people regularly, you might find a group subscription more cost effective.)
.custom-accordion-item
button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafIndividualPlansQ4" aria-expanded="false" aria-controls="overleafIndividualPlansQ4")
button.custom-accordion-header.collapsed(
type="button"
data-toggle="collapse"
data-target="#overleafIndividualPlansQ4"
data-bs-toggle="collapse"
data-bs-target="#overleafIndividualPlansQ4"
aria-expanded="false"
aria-controls="overleafIndividualPlansQ4"
)
| Do collaborators also have access to the editing and collaboration features I’ve paid for?
span.custom-accordion-icon
i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
@@ -100,7 +166,15 @@ mixin overleafIndividualPlans()
strong only
span for the project(s) they’re working on with you. If your collaborators want access to those features on their own projects, they will need to purchase their own subscription. (If you work with the same people regularly, you might find a group subscription more cost effective.)
.custom-accordion-item
button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafIndividualPlansQ5" aria-expanded="false" aria-controls="overleafIndividualPlansQ5")
button.custom-accordion-header.collapsed(
type="button"
data-toggle="collapse"
data-target="#overleafIndividualPlansQ5"
data-bs-toggle="collapse"
data-bs-target="#overleafIndividualPlansQ5"
aria-expanded="false"
aria-controls="overleafIndividualPlansQ5"
)
| Can I purchase an individual plan on behalf of someone else?
span.custom-accordion-icon
i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
@@ -108,7 +182,15 @@ mixin overleafIndividualPlans()
.custom-accordion-body
| Individual subscriptions must be purchased by the account that will be the end user. If you want to purchase a plan for someone else, you’ll need to provide them with relevant payment details to enable them to make the purchase.
.custom-accordion-item
button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafIndividualPlansQ6" aria-expanded="false" aria-controls="overleafIndividualPlansQ6")
button.custom-accordion-header.collapsed(
type="button"
data-toggle="collapse"
data-target="#overleafIndividualPlansQ6"
data-bs-toggle="collapse"
data-bs-target="#overleafIndividualPlansQ6"
aria-expanded="false"
aria-controls="overleafIndividualPlansQ6"
)
| Who is eligible for the Student plan?
span.custom-accordion-icon
i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
@@ -116,7 +198,15 @@ mixin overleafIndividualPlans()
.custom-accordion-body
| As the name suggests, the Student plan is only for students at educational institutions. This includes graduate students.
.custom-accordion-item
button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafIndividualPlansQ7" aria-expanded="false" aria-controls="overleafIndividualPlansQ7")
button.custom-accordion-header.collapsed(
type="button"
data-toggle="collapse"
data-target="#overleafIndividualPlansQ7"
data-bs-toggle="collapse"
data-bs-target="#overleafIndividualPlansQ7"
aria-expanded="false"
aria-controls="overleafIndividualPlansQ7"
)
| Can I transfer an individual subscription to someone else?
span.custom-accordion-icon
i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
@@ -131,7 +221,15 @@ mixin overleafIndividualPlans()
mixin overleafGroupPlans()
.ol-accordions-container
.custom-accordion-item
button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafGroupPlansQ1" aria-expanded="false" aria-controls="overleafGroupPlansQ1")
button.custom-accordion-header.collapsed(
type="button"
data-toggle="collapse"
data-target="#overleafGroupPlansQ1"
data-bs-toggle="collapse"
data-bs-target="#overleafGroupPlansQ1"
aria-expanded="false"
aria-controls="overleafGroupPlansQ1"
)
| What’s the difference between users and collaborators on an Overleaf group subscription?
span.custom-accordion-icon
i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
@@ -140,7 +238,15 @@ mixin overleafGroupPlans()
div On any of our group plans, the number of users refers to the number of people you can invite to join your group. All of these people will have access to the plan’s paid-for features across all their projects, such as real-time track changes and document history.
div.mt-2 Collaborators are people that your group users may invite to work with them on their projects. So, for example, if you have the Group Standard plan, the users in your group can invite up to 10 people to work with them on a project. And if you have the Group Professional plan, your users can invite as many people to work with them as they want.
.custom-accordion-item
button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafGroupPlansQ2" aria-expanded="false" aria-controls="overleafGroupPlansQ2")
button.custom-accordion-header.collapsed(
type="button"
data-toggle="collapse"
data-target="#overleafGroupPlansQ2"
data-bs-toggle="collapse"
data-bs-target="#overleafGroupPlansQ2"
aria-expanded="false"
aria-controls="overleafGroupPlansQ2"
)
| What is the benefit of purchasing an Overleaf Group plan?
span.custom-accordion-icon
i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
@@ -158,7 +264,15 @@ mixin overleafGroupPlans()
span Sales team
| .
.custom-accordion-item
button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafGroupPlansQ3" aria-expanded="false" aria-controls="overleafGroupPlansQ3")
button.custom-accordion-header.collapsed(
type="button"
data-toggle="collapse"
data-target="#overleafGroupPlansQ3"
data-bs-toggle="collapse"
data-bs-target="#overleafGroupPlansQ3"
aria-expanded="false"
aria-controls="overleafGroupPlansQ3"
)
| Who is eligible for the educational discount?
span.custom-accordion-icon
i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
@@ -166,7 +280,15 @@ mixin overleafGroupPlans()
.custom-accordion-body
| The educational discount for group subscriptions is for students or faculty who are using Overleaf primarily for teaching.
.custom-accordion-item
button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafGroupPlansQ4" aria-expanded="false" aria-controls="overleafGroupPlansQ4")
button.custom-accordion-header.collapsed(
type="button"
data-toggle="collapse"
data-target="#overleafGroupPlansQ4"
data-bs-toggle="collapse"
data-bs-target="#overleafGroupPlansQ4"
aria-expanded="false"
aria-controls="overleafGroupPlansQ4"
)
| How do I add more licenses to my group subscription, and what will it cost?
span.custom-accordion-icon
i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
@@ -207,7 +329,15 @@ mixin overleafGroupPlans()
span contact the Sales team
| .
.custom-accordion-item
button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafGroupPlansQ5" aria-expanded="false" aria-controls="overleafGroupPlansQ5")
button.custom-accordion-header.collapsed(
type="button"
data-toggle="collapse"
data-target="#overleafGroupPlansQ5"
data-bs-toggle="collapse"
data-bs-target="#overleafGroupPlansQ5"
aria-expanded="false"
aria-controls="overleafGroupPlansQ5"
)
| How do I upgrade my plan from Group Standard to Group Professional?
span.custom-accordion-icon
i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
services/web/frontend/js/features/utils/bootstrap-5.ts
+5
View File
@@ -0,0 +1,5 @@
import getMeta from '@/utils/meta'
// The reason this is a function is to ensure that the meta tag is read before
// any isBootstrap5 check is performed
export const isBootstrap5 = () => getMeta('ol-bootstrapVersion') === 5
services/web/frontend/stylesheets/app/plans.less
+1
View File
@@ -1154,6 +1154,7 @@
.plans-faq-support {
margin-top: var(--spacing-06);
margin-bottom: var(--spacing-06);
display: flex;
flex-direction: column;
align-items: center;
services/web/frontend/stylesheets/bootstrap-5/components/accordion.scss
+50
View File
@@ -0,0 +1,50 @@
.ol-accordions-container :last-child {
border: 0 !important;
}
.ol-accordions-container {
.custom-accordion-item {
width: 100%;
padding-top: var(--spacing-08);
padding-bottom: var(--spacing-09);
border-bottom: 1px solid var(--border-divider);
.custom-accordion-header {
text-align: left;
width: 100%;
font-size: var(--font-size-04);
font-weight: 600;
line-height: var(--line-height-03);
color: var(--content-primary);
background-color: unset;
border: unset;
display: flex;
justify-content: space-between;
padding: unset;
.custom-accordion-icon {
display: flex;
align-items: center;
transition: transform 0.35s ease;
margin-left: var(--spacing-08);
}
&:not(.collapsed) {
.custom-accordion-icon {
transform: rotate(180deg);
transition: transform 0.35s ease;
}
}
}
.custom-accordion-body {
@include body-base;
background-color: unset;
text-align: left;
padding: unset;
padding-right: 2rem;
margin-top: var(--spacing-04);
}
}
}
services/web/frontend/stylesheets/bootstrap-5/components/all.scss
+1
View File
@@ -1,3 +1,4 @@
@import 'accordion';
@import 'button';
@import 'button-group';
@import 'dropdown-menu';
services/web/frontend/stylesheets/bootstrap-5/components/tabs.scss
+7 -7
View File
@@ -15,7 +15,7 @@
gap: var(--spacing-04);
margin: 0 auto;
padding: 0;
border-bottom: var(--border-width-base) solid var(--neutral-20);
border-bottom: var(--border-width-base) solid var(--border-divider);
text-align: center;
border-top: 2px solid transparent; // so that top focus border is visible
min-width: max-content; // This is for horizontal scrolling
@@ -33,7 +33,7 @@
button {
border: 0;
border-radius: 0;
color: var(--neutral-70);
color: var(--content-secondary);
margin-right: unset;
padding: var(--spacing-04);
line-height: var(--line-height-03);
@@ -51,7 +51,7 @@
}
&:hover {
background-color: var(--neutral-10);
background-color: var(--bg-light-secondary);
text-decoration: none;
}
@@ -63,10 +63,10 @@
li > a.active,
li > button.active {
background-color: transparent !important;
border: 0 !important;
border-bottom: 3px solid var(--green-50) !important;
color: var(--neutral-90) !important;
background-color: transparent;
border: 0;
border-bottom: 3px solid var(--green-50);
color: var(--content-primary);
}
&.align-left {
services/web/frontend/stylesheets/bootstrap-5/pages/all.scss
+1
View File
@@ -44,6 +44,7 @@
@import 'login-register';
@import 'login';
@import 'register';
@import 'plans';
@import 'onboarding-confirm-email';
@import 'secondary-confirm-email';
@import 'onboarding';
services/web/frontend/stylesheets/bootstrap-5/pages/plans.scss
+1254
View File
File diff suppressed because it is too large Load Diff