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
overleaf/services/web/app/views/subscriptions/plans/_mixins.pug
Antoine Clausse b2ef7a935f [web] Use localized number formatting for currencies (#17622) 
* Add a unit test on `SubscriptionFormatters.formatPrice`

* Add JSDoc to `formatPrice`

Also: Name the functions before exporting:
This fixes my IDE (WebStorm) navigation

* Make `'USD'` the default param instead of reassigning

* Create `formatCurrency` function

* Use `formatCurrency` in SubscriptionFormatters

* Use an `isNoCentsCurrency` logic for `CLP` `JPY` `KRW` `VND`

And remove custom `CLP` logic and locale

* Add `locale` param to `formatPrice`

* Generate `groups.json` and `localizedPlanPricing.json`

```
bin/exec web node ./scripts/recurly/recurly_prices.js --download -o prices.json
bin/exec web node ./scripts/plan-prices/plans.js -f ../../prices.json -o dir
```

* Update scripts/plan-prices/plans.js to generate numbers instead of localized amounts

* Generate `groups.json` and `localizedPlanPricing.json`

```
bin/exec web node ./scripts/recurly/recurly_prices.js --download -o prices.json
bin/exec web node ./scripts/plan-prices/plans.js -f ../../prices.json -o dir
```

* Remove generation of `plans.json`

As /services/web/frontend/js/main/plans.js was removed in https://github.com/overleaf/internal/pull/12593

* Sort currencies in alphabetical order in scripts/plan-prices/plans.js

* Generate `groups.json` and `localizedPlanPricing.json`

```
bin/exec web node ./scripts/recurly/recurly_prices.js --download -o prices.json
bin/exec web node ./scripts/plan-prices/plans.js -f ../../prices.json -o dir
```

* Use `formatCurrency` in price-summary.tsx

* Use `formatCurrency` in Subscription Pug files

* Fix unit tests SubscriptionHelperTests.js

* Remove unused `currencySymbol`

* Change to `formatCurrency` in other React components

* Add `CurrencyCode` JSDoc types

* Duplicate `formatCurrency` into services/web/app/src/util

* Wrap tests in a top-level describe block

* Use `narrowSymbol`

* Fix tests with `narrowSymbol` expects

* Revert deletion of old `formatPrice` in SubscriptionFormatters.js

* Rename `formatCurrency` -> `formatCurrencyLocalized`

* Revert deletion of `CurrencySymbol`

* Add split-test in SubscriptionController.js

* Add split-test in SubscriptionViewModelBuilder.js

* Add split-test in plans

* Add split-test in subscription-dashboard-context.tsx

* Add split-test in 4 more components

* Update tests

* Show currency and payment methods in interstitial page

* Fix `–` being printed. Use `–` instead

* Fix test with NOK

* Storybook: Fix missing `SplitTestProvider`

* Storybook: Revert "Remove unused `currencySymbol`"

This reverts commit e55387d4753f97bbf8e39e0fdc3ad17312122aaa.

* Replace `getSplitTestVariant` by `useSplitTestContext`

* Use parameterize currencyFormat in `generateInitialLocalizedGroupPrice`

* Fixup import paths of `formatCurrencyLocalized`

* Replace `% 1 === 0` by `Number.isInteger`

* Add comment explaining that any combinations of languages/currencies could happen

* Fixup after rebase: import `useSplitTestContext`

* Revert "Remove SplitTestProvider from subscription root"

This reverts commit be9f378fda715b86589ab0759737581c72321d87.

* Revert "Remove split test provider from some tests"

This reverts commit 985522932b550cfd38fa6a4f4c3d2ebaee6ff7df.

GitOrigin-RevId: 59a83cbbe0f7cc7e45f189c654e23fcf9bfa37af
2024-04-19 08:03:54 +00:00

642 lines
26 KiB
Text
Raw Blame History

mixin features_premium
li  
li
strong #{translate('all_premium_features')}
li #{translate('sync_dropbox_github')}
li #{translate('full_doc_history')}
li #{translate('track_changes')}
li + #{translate('more').toLowerCase()}
mixin gen_localized_price_for_plan_view(plan, view)
span #{formatCurrency(settings.localizedPlanPricing[recommendedCurrency][plan][view], recommendedCurrency, language, true)}
mixin currency_and_payment_methods()
.row.row-spaced-large.text-centered
.col-xs-12
p.text-centered
strong #{translate("all_prices_displayed_are_in_currency", { recommendedCurrency })}
|  
span #{translate("subject_to_additional_vat")}
i.fa.fa-cc-mastercard.fa-2x(aria-hidden="true")  
span.sr-only #{translate('payment_method_accepted', { paymentMethod: 'Mastercard' })}
i.fa.fa-cc-visa.fa-2x(aria-hidden="true")  
span.sr-only #{translate('payment_method_accepted', { paymentMethod: 'Visa' })}
i.fa.fa-cc-amex.fa-2x(aria-hidden="true")  
span.sr-only #{translate('payment_method_accepted', { paymentMethod: 'Amex' })}
i.fa.fa-cc-paypal.fa-2x(aria-hidden="true")  
span.sr-only #{translate('payment_method_accepted', { paymentMethod: 'Paypal' })}
mixin plans_v2_table(period, config)
- var baseColspan = config.baseColspan || 1
- var maxColumn = config.maxColumn || 4
- var tableHeadKeys = Object.keys(config.tableHead)
tr(class=`plans-v2-table-cols-${tableHeadKeys.length}`)
th(colspan=baseColspan)
- for (var i = 0; i < maxColumn; i++)
- var tableHeadKey = tableHeadKeys[i]
- var tableHeadOptions = Object.values(config.tableHead)[i] || {}
- var colspan = tableHeadOptions.colspan || baseColspan
- var highlighted = i === config.highlightedColumn.index
- var eventTrackingKey = config.eventTrackingKey
- var additionalEventSegmentation = config.additionalEventSegmentation || {}
-
if (highlighted) {
var thClass = 'plans-v2-table-green-highlighted'
} else if (i === config.highlightedColumn.index - 1) {
var thClass = 'plans-v2-table-cell-before-green-highlighted-column'
} else {
var thClass = ''
}
thClass += ' plans-v2-table-column-header'
if (colspan > 1) {
var scopeValue = 'colgroup'
}
else {
var scopeValue = 'col'
}
case tableHeadKey
when 'individual_free'
- var ariaLabel = translate("free")
when 'individual_collaborator'
- var ariaLabel = translate("standard")
when 'individual_professional'
- var ariaLabel = translate("professional")
when 'group_collaborator'
- var ariaLabel = translate("group_standard")
when 'group_professional'
- var ariaLabel = translate("group_professional")
when 'group_organization'
- var ariaLabel = translate("organization")
when 'student_free'
- var ariaLabel = translate("free")
when 'student_student'
- var ariaLabel = translate("student")
when 'student_university'
- var ariaLabel = translate("university")
default
- var ariaLabel = undefined
th(
aria-label=ariaLabel
class=thClass
colspan=colspan
scope=scopeValue
)
.plans-v2-table-th
if (highlighted)
p.plans-v2-table-green-highlighted-text #{translate(config.highlightedColumn.text[period]).toUpperCase()}
case tableHeadKey
when 'individual_free'
+table_head_individual_free(highlighted, period)
when 'individual_collaborator'
+table_head_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period)
when 'individual_professional'
+table_head_individual_professional(highlighted, eventTrackingKey, additionalEventSegmentation, period)
when 'group_collaborator'
+table_head_group_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation)
when 'group_professional'
+table_head_group_professional(highlighted, eventTrackingKey, additionalEventSegmentation)
when 'group_organization'
+table_head_group_organization(highlighted, eventTrackingKey, additionalEventSegmentation)
when 'student_free'
+table_head_student_free(highlighted, period)
when 'student_student'
+table_head_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period, tableHeadOptions.showExtraContent)
when 'student_university'
+table_head_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period)
for featuresPerSection in config.features
- var dividerColspan = Object.values(config.tableHead).reduce((prev, curr) => (prev) + (curr.colspan || 1), baseColspan)
if featuresPerSection.divider
tr.plans-v2-table-divider
td(
colspan=dividerColspan
class=((config.highlightedColumn.index === Object.keys(config.tableHead).length - 1) ? 'plans-v2-table-divider-highlighted' : '')
)
div
b.plans-v2-table-divider-label #{translate(featuresPerSection.dividerLabel)}
//- will only appear on screen width >= 768px (using CSS)
i.fa.fa-question-circle.plans-v2-table-divider-question-icon(
data-toggle="tooltip"
title=translate(featuresPerSection.dividerInfo),
data-placement="top"
)
//- will only appear on screen width < 768px (using CSS)
span.plans-v2-table-divider-learn-more-container
span (
span.plans-v2-table-divider-learn-more-text(
data-toggle="tooltip"
title=translate(featuresPerSection.dividerInfo),
data-placement="top"
) #{translate("learn_more_lowercase")}
span )
span.sr-only #{translate(featuresPerSection.dividerInfo)}
for feature, featureIndex in featuresPerSection.items
tr(
class=(featureIndex === (featuresPerSection.items.length - 1) ? `plans-v2-table-row-last-row-per-section plans-v2-table-cols-${tableHeadKeys.length}` : `plans-v2-table-cols-${tableHeadKeys.length}`)
)
th(
class="plans-v2-table-row-header"
event-tracking="plans-page-table"
event-tracking-trigger="hover"
event-tracking-ga="subscription-funnel"
event-tracking-label=`${feature.feature}`
colspan=baseColspan
scope="row"
)
.plans-v2-table-feature-name
if feature.info
span #{translate(feature.feature)}
//- will only appear on screen width >= 768px (using CSS)
i.fa.fa-question-circle.plans-v2-table-feature-name-question-icon(
data-toggle="tooltip"
title=translate(feature.info),
data-placement="right"
)
//- will only appear on screen width < 768px (using CSS)
span.plans-v2-table-feature-name-learn-more-container
span (
span.plans-v2-table-feature-name-learn-more-text(
data-toggle="tooltip"
title=translate(feature.info),
data-placement="top"
) #{translate("learn_more_lowercase")}
span )
span.sr-only #{translate(feature.info)}
else
| #{translate(feature.feature)}
for plan, planIndex in Object.keys(feature.plans)
- var tableHeadOptions = Object.values(config.tableHead)[planIndex] || {}
- var colspan = tableHeadOptions.colspan || baseColspan
-
if (planIndex === config.highlightedColumn.index) {
var tdClass = 'plans-v2-table-green-highlighted'
} else if (planIndex === config.highlightedColumn.index - 1) {
var tdClass = 'plans-v2-table-cell-before-green-highlighted-column'
} else {
var tdClass = ''
}
td(
class=tdClass
colspan=colspan
)
+table_cell(feature, plan)
mixin table_individual(period)
table.card.plans-v2-table.plans-v2-table-individual
+plans_v2_table(period, plansConfig.individual)
mixin table_group
table.card.plans-v2-table.plans-v2-table-group
+plans_v2_table('annual', plansConfig.group)
mixin table_student(period)
table.card.plans-v2-table.plans-v2-table-student
+plans_v2_table(period, plansConfig.student)
mixin table_head_individual_free(highlighted, period)
.plans-v2-table-th-content
p.plans-v2-table-th-content-title #{translate("free")}
+table_head_price('free', period)
.plans-v2-table-btn-buy-container-mobile
+btn_buy_individual_free(highlighted)
ul.plans-v2-table-th-content-benefit
li #{translate("one_collaborator")}
.plans-v2-table-btn-buy-container-desktop
+btn_buy_individual_free(highlighted)
mixin table_head_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period)
.plans-v2-table-th-content
p.plans-v2-table-th-content-title #{translate("standard")}
+table_head_price('collaborator', period)
.plans-v2-table-btn-buy-container-mobile
+btn_buy_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period)
ul.plans-v2-table-th-content-benefit
li !{translate("x_collaborators_per_project", {collaboratorsCount: '10'})}
li #{translate("all_premium_features")}
.plans-v2-table-btn-buy-container-desktop
+btn_buy_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period)
mixin table_head_individual_professional(highlighted, eventTrackingKey, additionalEventSegmentation, period)
.plans-v2-table-th-content
p.plans-v2-table-th-content-title #{translate("professional")}
+table_head_price('professional', period)
.plans-v2-table-btn-buy-container-mobile
+btn_buy_individual_professional(highlighted, eventTrackingKey, additionalEventSegmentation, period)
ul.plans-v2-table-th-content-benefit
li !{translate("unlimited_collabs_rt",{},["b"])}
li #{translate("all_premium_features")}
.plans-v2-table-btn-buy-container-desktop
+btn_buy_individual_professional(highlighted, eventTrackingKey, additionalEventSegmentation, period)
mixin table_head_group_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation)
.plans-v2-table-th-content
p.plans-v2-table-th-content-title #{translate("group_standard")}
.plans-v2-table-price-container
strike.plans-v2-table-price-before-discount
+gen_localized_price_for_plan_view('collaborator', 'annual')
p.plans-v2-table-price
span(data-ol-plans-v2-group-price-per-user='collaborator') #{initialLocalizedGroupPrice.pricePerUser.collaborator}
p.plans-v2-table-price-period-label
| #{translate('per_user_year')}
.plans-v2-table-btn-buy-container-mobile
+btn_buy_group_collaborator(highlighted, eventTrackingKey)
+additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_collaborator')
ul.plans-v2-table-th-content-benefit
li #{translate("up_to")} !{translate("x_collaborators_per_project", {collaboratorsCount: '10'})}
li
+table_head_group_total_per_year('collaborator')
.plans-v2-table-btn-buy-container-desktop
+btn_buy_group_collaborator(highlighted, eventTrackingKey)
+additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_collaborator')
mixin table_head_group_professional(highlighted, eventTrackingKey, additionalEventSegmentation)
.plans-v2-table-th-content
p.plans-v2-table-th-content-title #{translate("group_professional")}
.plans-v2-table-price-container
strike.plans-v2-table-price-before-discount
+gen_localized_price_for_plan_view('professional', 'annual')
p.plans-v2-table-price
span(data-ol-plans-v2-group-price-per-user='professional') #{initialLocalizedGroupPrice.pricePerUser.professional}
p.plans-v2-table-price-period-label
| #{translate('per_user_year')}
.plans-v2-table-btn-buy-container-mobile
+btn_buy_group_professional(highlighted, eventTrackingKey)
+additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_professional')
ul.plans-v2-table-th-content-benefit
li #{translate("unlimited_collaborators_in_each_project")}
li
+table_head_group_total_per_year('professional')
.plans-v2-table-btn-buy-container-desktop
+btn_buy_group_professional(highlighted, eventTrackingKey)
+additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_professional')
mixin table_head_group_total_per_year(groupPlan)
- var initialLicenseSize = '2'
span.plans-v2-group-total-price(data-ol-plans-v2-group-total-price=groupPlan) #{initialLocalizedGroupPrice.price[groupPlan]}
| &nbsp;
for licenseSize in groupPlanModalOptions.sizes
span(
hidden=(licenseSize !== initialLicenseSize)
data-ol-plans-v2-table-th-group-license-size=licenseSize
) !{translate("total_per_year_for_x_users", {licenseSize})}
mixin table_head_group_organization(highlighted, eventTrackingKey, additionalEventSegmentation)
- var segmentation = JSON.stringify(Object.assign({}, {button: 'group_organization-link', location: 'table-header-list', period: 'annual'}, additionalEventSegmentation))
.plans-v2-table-th-content
p.plans-v2-table-th-content-title #{translate("organization")}
.plans-v2-table-comments-icon
i.fa.fa-comments-o
.plans-v2-table-btn-buy-container-mobile
+btn_buy_group_organization(highlighted, eventTrackingKey)
small.plans-v2-table-th-content-additional-link.invisible(aria-hidden="true")
ul.plans-v2-table-th-content-benefit
li #{translate("best_choices_companies_universities_non_profits")}
li #{translate("for_groups_or_site_wide")}
li
a(
target="_blank"
href="/for/contact-sales"
event-tracking="plans-page-click"
event-tracking-mb="true"
event-tracking-trigger="click"
event-segmentation=segmentation
) #{translate("also_available_as_on_premises")}
.plans-v2-table-btn-buy-container-desktop
+btn_buy_group_organization(highlighted, eventTrackingKey)
small.plans-v2-table-th-content-additional-link.invisible(aria-hidden="true")
mixin table_head_student_free(highlighted, period)
div.plans-v2-table-th-content
p.plans-v2-table-th-content-title #{translate("free")}
+table_head_price('free', period)
.plans-v2-table-btn-buy-container-mobile
+btn_buy_student_free(highlighted)
ul.plans-v2-table-th-content-benefit
li #{translate("one_collaborator")}
.plans-v2-table-btn-buy-container-desktop
+btn_buy_student_free(highlighted)
mixin table_head_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period, showExtraContent)
div.plans-v2-table-th-content
p.plans-v2-table-th-content-title #{translate("student")}
+table_head_price('student', period)
.plans-v2-table-btn-buy-container-mobile
+btn_buy_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period)
ul.plans-v2-table-th-content-benefit
li !{translate("x_collaborators_per_project", {collaboratorsCount: '6'})}
li #{translate("all_premium_features")}
if showExtraContent
li
b !{translate("for_students_only")}
.plans-v2-table-btn-buy-container-desktop
+btn_buy_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period)
mixin table_head_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period)
div.plans-v2-table-th-content
p.plans-v2-table-th-content-title #{translate("university")}
div.plans-v2-table-comments-icon
i.fa.fa-comments-o
.plans-v2-table-btn-buy-container-mobile
+btn_buy_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period)
p.plans-v2-table-th-content-benefit !{translate("all_our_group_plans_offer_educational_discount", {}, [{name: 'b'}, {name: 'b'}])}
.plans-v2-table-btn-buy-container-desktop
+btn_buy_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period)
mixin table_head_price(plan, period)
div.plans-v2-table-price-container
if plan !== 'free' && period === 'annual'
strike.plans-v2-table-price-before-discount
+gen_localized_price_for_plan_view(plan, 'monthlyTimesTwelve')
p.plans-v2-table-price
+gen_localized_price_for_plan_view(plan, period)
p.plans-v2-table-price-period-label
if period == 'annual'
| #{translate("per_year")}
else
| #{translate("per_month")}
mixin table_cell(feature, plan)
- var planValue = feature.plans[plan]
- var featureName = feature.feature
.plans-v2-table-cell
.plans-v2-table-cell-content(
data-ol-plans-v2-table-cell-plan=plan
data-ol-plans-v2-table-cell-feature=featureName
)
if (feature.value === 'str')
| !{translate(planValue, {}, ['strong'])}
else if (feature.value === 'bool')
if (planValue)
i.fa.fa-check(aria-hidden="true")
span.sr-only #{translate("feature_included")}
else
span(aria-hidden="true") -
span.sr-only #{translate("feature_not_included")}
mixin group_plans_license_picker()
form.plans-v2-license-picker-form(data-ol-plans-v2-license-picker-form)
.plans-v2-license-picker-select-container
span #{translate("number_of_users_with_colon")}
select.plans-v2-license-picker-select(
name="plans-v2-license-picker-select"
id="plans-v2-license-picker-select"
autocomplete="off"
data-ol-plans-v2-license-picker-select
event-tracking="plans-page-group-size"
event-tracking-mb="true"
event-tracking-trigger="click"
event-tracking-element="select"
)
option(value="2") 2
option(value="3") 3
option(value="4") 4
option(value="5") 5
option(value="10") 10
option(value="20") 20
option(value="50") 50
.plans-v2-license-picker-educational-discount
label.plans-v2-license-picker-educational-discount-label(data-ol-plans-v2-license-picker-educational-discount-label)
input.plans-v2-license-picker-educational-discount-checkbox(
type="checkbox"
id="license-picker-educational-discount"
autocomplete="off"
data-ol-plans-v2-license-picker-educational-discount-input
event-tracking="plans-page-edu-discount"
event-tracking-mb="true"
event-tracking-trigger="click"
event-tracking-element="checkbox"
)
span #{translate("apply_educational_discount")}
//- will only appear on screen width >= 768px (using CSS)
i.fa.fa-question-circle.plans-v2-license-picker-educational-discount-question-icon(
data-toggle="tooltip"
title=translate("apply_educational_discount_info"),
data-placement="bottom"
)
//- will only appear on screen width < 768px (using CSS)
span.plans-v2-license-picker-educational-discount-learn-more-container
span (
span.plans-v2-license-picker-educational-discount-learn-more-text(
data-toggle="tooltip"
title=translate("apply_educational_discount_info"),
data-placement="bottom"
) #{translate("learn_more_lowercase")}
span )
span.sr-only #{translate("apply_educational_discount_info")}
mixin btn_buy_individual(highlighted, eventTrackingKey, subscriptionPlan, period)
a.btn.plans-v2-table-btn-buy(
data-ol-start-new-subscription=subscriptionPlan
data-ol-event-tracking-key=eventTrackingKey
data-ol-item-view=period
class=(highlighted ? 'btn-primary' : 'btn-default')
)
if (period === 'monthly')
span #{translate("try_for_free")}
else
span #{translate("buy_now_no_exclamation_mark")}
mixin btn_buy_individual_free()
if (!getSessionUser())
a.btn.plans-v2-table-btn-buy(
href="/register"
class=(highlighted ? 'btn-primary' : 'btn-default')
)
span #{translate("try_for_free")}
else
a.btn.plans-v2-table-btn-buy.invisible(
aria-hidden="true"
class=(highlighted ? 'btn-primary' : 'btn-default')
)
mixin btn_buy_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period)
+btn_buy_individual(highlighted, eventTrackingKey, 'collaborator', period)
if (period === 'monthly')
+additional_link_buy(eventTrackingKey, additionalEventSegmentation, 'collaborator', period)
mixin btn_buy_individual_professional(highlighted, eventTrackingKey, additionalEventSegmentation, period)
+btn_buy_individual(highlighted, eventTrackingKey, 'professional', period)
if (period === 'monthly')
+additional_link_buy(eventTrackingKey, additionalEventSegmentation, 'professional', period)
mixin btn_buy_group_collaborator(highlighted, eventTrackingKey)
a.btn.plans-v2-table-btn-buy(
data-ol-start-new-subscription='group_collaborator'
data-ol-event-tracking-key=eventTrackingKey
data-ol-item-view='annual'
data-ol-has-custom-href
data-ol-location='table-header'
class=(highlighted ? 'btn-primary' : 'btn-default')
)
span.hidden-desktop #{translate("customize")}
span.hidden-mobile #{translate("customize_your_plan")}
mixin btn_buy_group_professional(highlighted, eventTrackingKey)
a.btn.plans-v2-table-btn-buy(
data-ol-start-new-subscription='group_professional'
data-ol-event-tracking-key=eventTrackingKey
data-ol-item-view='annual'
data-ol-has-custom-href
data-ol-location='table-header'
class=(highlighted ? 'btn-primary' : 'btn-default')
)
span.hidden-desktop #{translate("customize")}
span.hidden-mobile #{translate("customize_your_plan")}
mixin btn_buy_group_organization(highlighted, eventTrackingKey)
a.btn.plans-v2-table-btn-buy(
data-ol-start-new-subscription='group_organization'
data-ol-event-tracking-key=eventTrackingKey
data-ol-item-view='annual'
data-ol-has-custom-href
data-ol-location='table-header'
href='/for/contact-sales'
target='_blank'
class=(highlighted ? 'btn-primary' : 'btn-default')
)
span #{translate("contact_us_lowercase")}
mixin btn_buy_student_free(highlighted)
if (!getSessionUser())
a.btn.plans-v2-table-btn-buy(
href="/register"
class=(highlighted ? 'btn-primary' : 'btn-default')
)
span #{translate("try_for_free")}
mixin btn_buy_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period)
a.btn.plans-v2-table-btn-buy(
data-ol-start-new-subscription='student'
data-ol-event-tracking-key=eventTrackingKey
data-ol-item-view=period
data-ol-location='card'
class=(highlighted ? 'btn-primary' : 'btn-default')
)
if (period === 'monthly')
span #{translate("try_for_free")}
else
span #{translate("buy_now_no_exclamation_mark")}
if (period === 'monthly')
+additional_link_buy(eventTrackingKey, additionalEventSegmentation, 'student', period)
mixin btn_buy_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period)
- var segmentation = JSON.stringify(Object.assign({}, {button: 'student-university', location: 'table-header-list', period}, additionalEventSegmentation))
a.btn.plans-v2-table-btn-buy(
href="/for/contact-sales"
target="_blank"
event-tracking=eventTrackingKey
event-tracking-mb="true"
event-tracking-trigger="click"
event-segmentation=segmentation
class=(highlighted ? 'btn-primary' : 'btn-default')
)
span #{translate("contact_us_lowercase")}
mixin additional_link_group(eventTrackingKey, additionalEventSegmentation, plan)
- var buttonSegmentation = plan + '-link'
- var segmentation = JSON.stringify(Object.assign({}, {button: buttonSegmentation, location: 'table-header'}, additionalEventSegmentation))
small.plans-v2-table-th-content-additional-link
| #{translate("or")}
a(
href="/for/contact-sales"
target="_blank"
event-tracking=eventTrackingKey
event-tracking-mb="true"
event-tracking-trigger="click"
event-segmentation=segmentation
) #{translate("contact_us_lowercase")}
mixin additional_link_buy(eventTrackingKey, additionalEventSegmentation, plan, period)
- var buttonSegmentation = plan + '-link'
- var segmentation = JSON.stringify(Object.assign({}, {button: buttonSegmentation, location: 'table-header', period}, additionalEventSegmentation))
- var itmCampaign = itm_campaign ? { itm_campaign } : {itm_campaign: 'plans'}
- var itmReferrer = itm_referrer ? { itm_referrer } : {}
- var qs = new URLSearchParams({planCode: plan, currency: recommendedCurrency, itm_content: 'card', ...itmCampaign, ...itmReferrer})
small.plans-v2-table-th-content-additional-link
| #{translate("or")}
a(
href=`/user/subscription/new?${qs.toString()}`
event-tracking=eventTrackingKey
event-tracking-mb="true"
event-tracking-trigger="click"
event-segmentation=segmentation
) #{translate("buy_now_no_exclamation_mark")}
mixin plans_v2_table_sticky_header(withSwitch, config)
- var tableHeadKeys = Object.keys(config.tableHead)
.row.plans-v2-table-sticky-header.sticky(
data-ol-plans-v2-table-sticky-header
class=(withSwitch ? 'plans-v2-table-sticky-header-with-switch' : 'plans-v2-table-sticky-header-without-switch')
)
- for (var i = 0; i < tableHeadKeys.length; i++)
- var tableHeadKey = tableHeadKeys[i]
- var translateKey = tableHeadKey.split('_')[1]
-
if (config.highlightedColumn.index === i) {
var elClass = 'plans-v2-table-sticky-header-item-green-highlighted'
} else {
var elClass = ''
}
.plans-v2-table-sticky-header-item(
class=elClass
)
case tableHeadKey
when 'individual_collaborator'
span #{translate('standard')}
when 'group_professional'
span #{translate(tableHeadKey)}
when 'group_collaborator'
span #{translate('group_standard')}
default
span #{translate(translateKey)}
mixin table_sticky_header_all(plansConfig)
.row.plans-v2-table-sticky-header-container(
data-ol-plans-v2-view='individual'
)
+plans_v2_table_sticky_header(true, plansConfig.individual)
.row.plans-v2-table-sticky-header-container(
hidden
data-ol-plans-v2-view='group'
)
+plans_v2_table_sticky_header(false, plansConfig.group)
.row.plans-v2-table-sticky-header-container(
hidden
data-ol-plans-v2-view='student'
)
+plans_v2_table_sticky_header(true, plansConfig.student)
mixin monthly_annual_switch(initialState, eventTracking, eventSegmentation)
- var monthlyAnnualToggleChecked = initialState === 'monthly'
.row
.col-md-4.col-md-offset-4.text-centered.plans-v2-m-a-switch-container(data-ol-plans-v2-m-a-switch-container)
.plans-v2-m-a-switch-annual-text-container
span.underline(data-ol-plans-v2-m-a-switch-text='annual') #{translate("annual")}
.tooltip.in.left.plans-v2-m-a-tooltip(
role="tooltip"
data-ol-plans-v2-m-a-tooltip
class=monthlyAnnualToggleChecked ? 'plans-v2-m-a-tooltip-monthly-selected' : ''
)
.tooltip-arrow
.tooltip-inner
span(hidden=!monthlyAnnualToggleChecked data-ol-tooltip-period='monthly') #{translate("save_20_percent_by_paying_annually")}
span(hidden=monthlyAnnualToggleChecked data-ol-tooltip-period='annual') #{translate("saving_20_percent")}
label.plans-v2-m-a-switch(data-ol-plans-v2-m-a-switch)
input(
type="checkbox"
checked=monthlyAnnualToggleChecked
role="switch"
aria-label=translate("select_monthly_plans")
autocomplete="off"
event-tracking=eventTracking
event-tracking-mb="true"
event-tracking-trigger="click"
event-tracking-element="checkbox"
event-segmentation=eventSegmentation
)
span
span(data-ol-plans-v2-m-a-switch-text='monthly') #{translate("monthly")}
Reference in a new issue View git blame Copy permalink