mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-21 20:47:08 -05:00
Merge pull request #18931 from overleaf/jel-new-files-for-light-touch
[web] New files for plans light touch redesign GitOrigin-RevId: beb517543c8341bbd8124fab87b532f62c5a0c11
This commit is contained in:
Jessica Lawshe
Copybot
parent
a7adfc12da
commit
1db5593c5a
5 changed files with 2013 additions and 1 deletions
|
|
@ -32,7 +32,7 @@ block content
|
||||||
+eyebrow(translate('plans_and_pricing_lowercase'))
|
+eyebrow(translate('plans_and_pricing_lowercase'))
|
||||||
| #{translate('choose_your_plan')}
|
| #{translate('choose_your_plan')}
|
||||||
|
|
||||||
include ./plans/_cards_controls_tables
|
include ./plans/light-redesign/_cards_controls_tables
|
||||||
|
|
||||||
+currency_and_payment_methods()
|
+currency_and_payment_methods()
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,74 @@
|
||||||
|
include ./_mixins
|
||||||
|
|
||||||
|
.row.plans-v2-top-switch
|
||||||
|
.col-xs-12
|
||||||
|
ul.nav.plans-v2-nav(role="tablist")
|
||||||
|
li.active.plans-v2-top-switch-individual(
|
||||||
|
data-ol-plans-v2-view-tab='individual'
|
||||||
|
event-tracking="plans-page-toggle-plan"
|
||||||
|
event-tracking-mb="true"
|
||||||
|
event-tracking-trigger="click"
|
||||||
|
event-segmentation='{"button": "individual"}'
|
||||||
|
role="presentation"
|
||||||
|
)
|
||||||
|
button.btn.btn-default-outline(role="tab" aria-controls="panel-individual" aria-selected="true") #{translate("indvidual_plans")}
|
||||||
|
li.plans-v2-top-switch-group(
|
||||||
|
data-ol-plans-v2-view-tab='group'
|
||||||
|
event-tracking="plans-page-toggle-plan"
|
||||||
|
event-tracking-mb="true"
|
||||||
|
event-tracking-trigger="click"
|
||||||
|
event-segmentation='{"button": "group"}'
|
||||||
|
role="presentation"
|
||||||
|
)
|
||||||
|
button.btn.btn-default-outline(
|
||||||
|
aria-controls="panel-group"
|
||||||
|
href="#"
|
||||||
|
role="tab"
|
||||||
|
aria-selected="false"
|
||||||
|
)
|
||||||
|
span #{translate("group_plans")}
|
||||||
|
span (#{translate("save_30_percent_or_more")})
|
||||||
|
li.plans-v2-top-switch-student(
|
||||||
|
data-ol-plans-v2-view-tab='student'
|
||||||
|
event-tracking="plans-page-toggle-plan"
|
||||||
|
event-tracking-mb="true"
|
||||||
|
event-tracking-trigger="click"
|
||||||
|
event-segmentation='{"button": "student"}'
|
||||||
|
role="presentation"
|
||||||
|
)
|
||||||
|
button.btn.btn-default-outline(
|
||||||
|
aria-controls="panel-student"
|
||||||
|
href="#"
|
||||||
|
role="tab"
|
||||||
|
aria-selected="false"
|
||||||
|
) #{translate("student_plans")}
|
||||||
|
|
||||||
|
+monthly_annual_switch("annual", "plans-page-toggle-period")
|
||||||
|
|
||||||
|
.row(hidden data-ol-plans-v2-license-picker-container)
|
||||||
|
.col-sm-12
|
||||||
|
+group_plans_license_picker()
|
||||||
|
|
||||||
|
+table_sticky_header_all(plansConfig)
|
||||||
|
|
||||||
|
.row.plans-v2-table-container(hidden data-ol-plans-v2-period='monthly')
|
||||||
|
.col-sm-12(data-ol-plans-v2-view='individual' role="tabpanel")
|
||||||
|
.row
|
||||||
|
+table_individual('monthly')
|
||||||
|
.col-sm-12(hidden data-ol-plans-v2-view='student' role="tabpanel")
|
||||||
|
.row
|
||||||
|
+table_student('monthly')
|
||||||
|
|
||||||
|
.row.plans-v2-table-container(data-ol-plans-v2-period='annual')
|
||||||
|
.col-sm-12(data-ol-plans-v2-view='individual' id="panel-individual" role="tabpanel")
|
||||||
|
.row
|
||||||
|
+table_individual('annual')
|
||||||
|
.col-sm-12(hidden data-ol-plans-v2-view='group' id="panel-group" role="tabpanel")
|
||||||
|
.row
|
||||||
|
+table_group('annual')
|
||||||
|
.col-sm-12(hidden data-ol-plans-v2-view='student' id="panel-student" role="tabpanel")
|
||||||
|
.row
|
||||||
|
+table_student('annual')
|
||||||
|
|
||||||
|
//- 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)
|
||||||
|
|
@ -0,0 +1,642 @@
|
||||||
|
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]}
|
||||||
|
|
|
||||||
|
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")}
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -106,6 +106,7 @@
|
||||||
@import 'app/editor.less';
|
@import 'app/editor.less';
|
||||||
@import 'app/homepage.less';
|
@import 'app/homepage.less';
|
||||||
@import 'app/plans/plans-v2.less';
|
@import 'app/plans/plans-v2.less';
|
||||||
|
@import 'app/plans/plans-light-touch-redesign.less';
|
||||||
@import 'app/plans/plans-new-design.less';
|
@import 'app/plans/plans-new-design.less';
|
||||||
@import 'app/recurly.less';
|
@import 'app/recurly.less';
|
||||||
@import 'app/bonus.less';
|
@import 'app/bonus.less';
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue