Merge pull request #19638 from overleaf/jel-light-touch-payment-methods

[web] Update payment method section on the plans light touch redesign

GitOrigin-RevId: aa55b888b0d02e39cd907de4a675d61836d6aa01
This commit is contained in:
Jessica Lawshe 2024-07-31 09:46:52 -05:00 committed by Copybot
parent 6d806ff2a4
commit 580111b984
2 changed files with 29 additions and 13 deletions

View file

@ -15,20 +15,22 @@ 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
.row.plans-payment-methods.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' })}
p
| #{translate("all_prices_displayed_are_in_currency", { recommendedCurrency })}
| #{translate("subject_to_additional_vat")}
.plans-payment-methods-icons
img(src=buildImgPath('/other-brands/logo_mastercard.svg') aria-hidden="true")
span.sr-only #{translate('payment_method_accepted', { paymentMethod: 'Mastercard' })}
img(src=buildImgPath('/other-brands/logo_visa.svg') aria-hidden="true")
span.sr-only #{translate('payment_method_accepted', { paymentMethod: 'Visa' })}
img(src=buildImgPath('/other-brands/logo_amex.svg') aria-hidden="true")
span.sr-only #{translate('payment_method_accepted', { paymentMethod: 'Amex' })}
img(src=buildImgPath('/other-brands/logo_paypal.svg') aria-hidden="true")
span.sr-only #{translate('payment_method_accepted', { paymentMethod: 'Paypal' })}
mixin plans_table(period, config)
- var maxColumn = config.maxColumn || 4

View file

@ -1207,4 +1207,18 @@
.plans-page-quote-row {
margin: var(--spacing-13) 0;
}
.plans-payment-methods {
margin-top: var(--spacing-08);
margin-bottom: var(--spacing-09);
p {
margin-bottom: 0;
}
.plans-payment-methods-icons {
display: flex;
gap: var(--spacing-04);
justify-content: center;
margin-top: var(--spacing-05);
}
}
}