From 092e49d6ec46c56aac3167177c02050da3d3d5fd Mon Sep 17 00:00:00 2001 From: Jessica Lawshe <5312836+lawshe@users.noreply.github.com> Date: Mon, 17 Jun 2024 09:19:13 -0500 Subject: [PATCH] Merge pull request #18905 from overleaf/jel-plans-faq [web] Add new plans FAQ to light touch redesign variant GitOrigin-RevId: a4140a09c94e0374792acb789b4f36ad104841f2 --- .../subscriptions/plans-light-design.pug | 2 +- .../views/subscriptions/plans/_faq_new.pug | 60 ++++++ .../subscriptions/plans/_plans_faq_tabs.pug | 141 +++++++++++++++ .../app/plans/plans-new-design.less | 171 +++++++++--------- 4 files changed, 289 insertions(+), 85 deletions(-) create mode 100644 services/web/app/views/subscriptions/plans/_faq_new.pug create mode 100644 services/web/app/views/subscriptions/plans/_plans_faq_tabs.pug diff --git a/services/web/app/views/subscriptions/plans-light-design.pug b/services/web/app/views/subscriptions/plans-light-design.pug index 17e8ac878f..df8dc4218f 100644 --- a/services/web/app/views/subscriptions/plans-light-design.pug +++ b/services/web/app/views/subscriptions/plans-light-design.pug @@ -49,7 +49,7 @@ block content include ./plans/_university_info - include ./plans/_faq + include ./plans/_faq_new .row.row-spaced-large .col-md-12 diff --git a/services/web/app/views/subscriptions/plans/_faq_new.pug b/services/web/app/views/subscriptions/plans/_faq_new.pug new file mode 100644 index 0000000000..91318defe7 --- /dev/null +++ b/services/web/app/views/subscriptions/plans/_faq_new.pug @@ -0,0 +1,60 @@ +include ./_plans_faq_tabs +include ../../_mixins/eyebrow + +- var managingYourSubscription = 'managingYourSubscription' +- var overleafIndividualPlans = 'overleafIndividualPlans' +- var overleafGroupPlans = 'overleafGroupPlans' +.plans-faq + .row.row-spaced-extra-large + .col-md-12.faq-heading-container + h2.faq-heading + +eyebrow(translate("frequently_asked_questions")) + | #{translate("your_questions_answered")} + .row.plans-faq-header-section + .col-xs-12.website-redesign-ol-tabs + ul.nav.nav-tabs + li.active(role="presentation") + a( + role="tab" + data-toggle="tab" + href='#' + managingYourSubscription + aria-controls=managingYourSubscription + ) + | #{translate('managing_your_subscription')} + li(role="presentation") + a( + role="tab" + data-toggle="tab" + href='#' + overleafIndividualPlans + aria-controls=overleafIndividualPlans + ) + | #{translate('overleaf_individual_plans')} + li(role="presentation") + a( + role="tab" + data-toggle="tab" + href='#' + overleafGroupPlans + aria-controls=overleafGroupPlans + ) + | #{translate('overleaf_group_plans')} + .row.plans-faq-questions-section + .col-xs-12.faq-questions-container + .tab-content + .tab-pane.active( + role="tabpanel" + id=managingYourSubscription + data-ol-faq-tab-content=managingYourSubscription + ) + +managingYourSubscription() + .tab-pane( + role="tabpanel" + id=overleafIndividualPlans + data-ol-faq-tab-content=overleafIndividualPlans + ) + +overleafIndividualPlans() + .tab-pane( + role="tabpanel" + id=overleafGroupPlans + data-ol-faq-tab-content=overleafGroupPlans + ) + +overleafGroupPlans() diff --git a/services/web/app/views/subscriptions/plans/_plans_faq_tabs.pug b/services/web/app/views/subscriptions/plans/_plans_faq_tabs.pug new file mode 100644 index 0000000000..3352829061 --- /dev/null +++ b/services/web/app/views/subscriptions/plans/_plans_faq_tabs.pug @@ -0,0 +1,141 @@ +mixin managingYourSubscription() + .accordions-container + .custom-accordion-item + button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-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 + .collapse(id="managingYourSubscriptionQ1") + .custom-accordion-body + span Yes, you can do this at any time by going to + 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") + | 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 + .collapse(id="managingYourSubscriptionQ2") + .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") + | Can I pay by invoice or purchase order? + span.custom-accordion-icon + i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down + .collapse(id="managingYourSubscriptionQ3") + .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. + + + + + +mixin overleafIndividualPlans() + .accordions-container + .custom-accordion-item + button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-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 + .collapse(id="overleafIndividualPlansQ1") + .custom-accordion-body + span You get full access to your chosen plan during your 7-day free trial, and there’s no obligation to continue beyond the trial. Your card will be charged at the end of your trial unless you cancel before then. To cancel, go to + strong Account>Subscription + 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") + | 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 + .collapse(id="overleafIndividualPlansQ2") + .custom-accordion-body + | 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") + | 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 + .collapse(id="overleafIndividualPlansQ3") + .custom-accordion-body + span No. Only the subscriber’s account will be upgraded. An individual Standard subscription allows you to invite 10 people per project to edit the project with you. Your collaborators can access features such as the full document history and extended compile time, but + 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") + | 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 + .collapse(id="overleafIndividualPlansQ4") + .custom-accordion-body + span If you have an Overleaf subscription, then your project collaborators will have access to features like real-time track changes and document history, but + 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") + | 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 + .collapse(id="overleafIndividualPlansQ5") + .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") + | Who is eligible for the Student plan? + span.custom-accordion-icon + i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down + .collapse(id="overleafIndividualPlansQ6") + .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") + | 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 + .collapse(id="overleafIndividualPlansQ7") + .custom-accordion-body + | No. Individual plans can’t be transferred. + + + + + +mixin overleafGroupPlans() + .accordions-container + .custom-accordion-item + button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-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 + .collapse(id="overleafGroupPlansQ1") + .custom-accordion-body + 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") + | Is an Overleaf Group plan more cost effective? + span.custom-accordion-icon + i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down + .collapse(id="overleafGroupPlansQ2") + .custom-accordion-body + | Our Group subscriptions allow you to purchase access to our premium features for multiple people. They’re easy to manage, help save on paperwork, and reduce the cost of purchasing multiple subscriptions separately. + .custom-accordion-item + button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-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 + .collapse(id="overleafGroupPlansQ3") + .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") + | Can I add more users to my group subscription at a later date? + span.custom-accordion-icon + i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down + .collapse(id="overleafGroupPlansQ4") + .custom-accordion-body + | Yes. To add more users to your subscription you’ll need to + a.inline-green-link(href="/contact") contact us. + diff --git a/services/web/frontend/stylesheets/app/plans/plans-new-design.less b/services/web/frontend/stylesheets/app/plans/plans-new-design.less index 0fad2ee7fd..b15e09a807 100644 --- a/services/web/frontend/stylesheets/app/plans/plans-new-design.less +++ b/services/web/frontend/stylesheets/app/plans/plans-new-design.less @@ -400,6 +400,93 @@ } } + // ------------------------------------------------------------------ + // ------------------------------------------------------------------ + // These comments will be deleted before merging this PR + // Below is the styling for plans cards on mobile screen + + .mobile-plans-card-container { + width: 100%; + + .mt-spacing-06 { + margin-top: @spacing-06; + } + + .highlighted-plans-card { + border: 2px solid @green-50 !important; + } + + .mobile-plans-card { + padding: @spacing-09; + border: 2px solid @neutral-20; + width: 100%; // might need max-width + border-radius: 8px; + display: flex; + flex-direction: column; + + .plans-name { + color: @neutral-90; + font-size: @font-size-05; // 20px + font-weight: 600; + line-height: @line-height-04; + } + + .old-price { + padding: @spacing-04 0 0 0; + color: @neutral-40; + font-size: @font-size-04; // 18px + font-weight: 600; + line-height: @line-height-05; + margin-bottom: -@spacing-04; + } + + .price-container { + display: flex; + align-items: baseline; + .price { + color: @neutral-90; + font-size: @font-size-08; // 36px + font-weight: 600; + line-height: @line-height-07; + margin-right: @spacing-03; + } + } + + .light-gray-text { + color: @neutral-70; + font-size: @font-size-02; // 14px + line-height: @line-height-02; + } + + .description { + .green-round-background { + width: 20px; + height: 20px; + } + + .bullets { + list-style-type: none; + padding-left: 0; + margin-bottom: unset; + li { + display: flex; + margin-top: @spacing-05; + } + } + + .cta-buy-now { + width: 100%; + margin-top: @spacing-08; + line-height: @line-height-03; + } + } + } + } + // ------------------------------------------------------------------ + // ------------------------------------------------------------------ +} + +.plans-faq { .faq-heading-container { text-align: center; @@ -501,88 +588,4 @@ } } } - // ------------------------------------------------------------------ - // ------------------------------------------------------------------ - // These comments will be deleted before merging this PR - // Below is the styling for plans cards on mobile screen - - .mobile-plans-card-container { - width: 100%; - - .mt-spacing-06 { - margin-top: @spacing-06; - } - - .highlighted-plans-card { - border: 2px solid @green-50 !important; - } - - .mobile-plans-card { - padding: @spacing-09; - border: 2px solid @neutral-20; - width: 100%; // might need max-width - border-radius: 8px; - display: flex; - flex-direction: column; - - .plans-name { - color: @neutral-90; - font-size: @font-size-05; // 20px - font-weight: 600; - line-height: @line-height-04; - } - - .old-price { - padding: @spacing-04 0 0 0; - color: @neutral-40; - font-size: @font-size-04; // 18px - font-weight: 600; - line-height: @line-height-05; - margin-bottom: -@spacing-04; - } - - .price-container { - display: flex; - align-items: baseline; - .price { - color: @neutral-90; - font-size: @font-size-08; // 36px - font-weight: 600; - line-height: @line-height-07; - margin-right: @spacing-03; - } - } - - .light-gray-text { - color: @neutral-70; - font-size: @font-size-02; // 14px - line-height: @line-height-02; - } - - .description { - .green-round-background { - width: 20px; - height: 20px; - } - - .bullets { - list-style-type: none; - padding-left: 0; - margin-bottom: unset; - li { - display: flex; - margin-top: @spacing-05; - } - } - - .cta-buy-now { - width: 100%; - margin-top: @spacing-08; - line-height: @line-height-03; - } - } - } - } - // ------------------------------------------------------------------ - // ------------------------------------------------------------------ }