diff --git a/src/components/CheckoutForm/CheckoutForm.module.scss b/src/components/CheckoutForm/CheckoutForm.module.scss index b72199e44..04c0d304f 100644 --- a/src/components/CheckoutForm/CheckoutForm.module.scss +++ b/src/components/CheckoutForm/CheckoutForm.module.scss @@ -111,10 +111,18 @@ } tfoot { - td { - padding-top: 8px; - font-weight: var(--body-font-weight-bold); - font-size: 24px; + tr:first-child { + td { + padding-top: 8px; + font-weight: var(--body-font-weight-bold); + font-size: 24px; + } + } + + tr:last-child { + td { + font-size: 14px; + } } } } diff --git a/src/components/CheckoutForm/CheckoutForm.tsx b/src/components/CheckoutForm/CheckoutForm.tsx index ae5f4290f..b6e521580 100644 --- a/src/components/CheckoutForm/CheckoutForm.tsx +++ b/src/components/CheckoutForm/CheckoutForm.tsx @@ -63,6 +63,22 @@ const CheckoutForm: React.FC = ({ return offer ? t(`periods.${offer.period}`) : ''; }; + const getFreeTrialText = (offer: Offer) => { + if (offer.freeDays > 0) { + return t('checkout.days_trial', { count: offer.freeDays }); + } else if (offer.freePeriods) { + // t('periods.day') + // t('periods.week') + // t('periods.month') + // t('periods.year') + const period = t(`periods.${offer.period}`, { count: offer.freePeriods }); + + return t('checkout.periods_trial', { count: offer.freePeriods, period }); + } + + return null; + }; + const cardPaymentMethod = paymentMethods?.find((method) => method.methodName === 'card'); const paypalPaymentMethod = paymentMethods?.find((method) => method.methodName === 'paypal'); @@ -73,12 +89,10 @@ const CheckoutForm: React.FC = ({

{offer.period === 'month' ? t('checkout.monthly') : t('checkout.yearly')}

- {/*

*/} - {/* Billing date is on */} - {/*

*/} + {order.discount.type === 'trial' ?

{getFreeTrialText(offer)}

: null}
- {formatPrice(order.priceBreakdown.offerPrice, order.currency, offer.customerCountry)} + {formatPrice(offer.customerPriceInclTax, order.currency, offer.customerCountry)} /{getOfferPeriod()}
@@ -109,14 +123,6 @@ const CheckoutForm: React.FC = ({
- - - - - - - - {order.discount.applied && order.discount.type === 'coupon' ? ( - + ) : null} + {order.discount.applied && order.discount.type === 'trial' ? ( + + + + + ) : null} + + + + + + + +
{t('checkout.applicable_tax', { taxRate: Math.round(order.taxRate * 100) })}{formatPrice(order.priceBreakdown.taxValue, order.currency, offer.customerCountry)}
{t('checkout.payment_method_fee')}{formatPrice(order.priceBreakdown.paymentMethodFee, order.currency, offer.customerCountry)}
@@ -131,15 +137,29 @@ const CheckoutForm: React.FC = ({ ) {formatPrice(order.priceBreakdown.discountAmount, order.currency, offer.customerCountry)}{formatPrice(-order.priceBreakdown.discountAmount * (1 + order.taxRate), order.currency, offer.customerCountry)}
{t('checkout.free_trial_discount')}{formatPrice(-offer.customerPriceInclTax, order.currency, offer.customerCountry)}
{t('checkout.payment_method_fee')}{formatPrice(order.priceBreakdown.paymentMethodFee, order.currency, offer.customerCountry)}
{t('checkout.total_price')} {formatPrice(order.totalPrice, order.currency, offer.customerCountry)}
{t('checkout.applicable_tax', { taxRate: Math.round(order.taxRate * 100) })}{formatPrice(order.priceBreakdown.taxValue, order.currency, offer.customerCountry)}
diff --git a/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap b/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap index fe2d0d8aa..5d149974c 100644 --- a/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap +++ b/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap @@ -44,7 +44,7 @@ exports[` renders and matches snapshot 1`] = ` class="orderPrice" > - € 5,78 + € 6,99 / @@ -68,14 +68,6 @@ exports[` renders and matches snapshot 1`] = ` class="orderTotals" > - - - checkout.applicable_tax - - - € 1,21 - - checkout.payment_method_fee @@ -94,6 +86,14 @@ exports[` renders and matches snapshot 1`] = ` € 6,99 + + + checkout.applicable_tax + + + € 1,21 + + diff --git a/src/i18n/locales/en_US/account.json b/src/i18n/locales/en_US/account.json index 05fa538af..c304d2fce 100644 --- a/src/i18n/locales/en_US/account.json +++ b/src/i18n/locales/en_US/account.json @@ -14,8 +14,11 @@ "coupon_discount": "Coupon discount", "coupon_not_valid": "Coupon is not valid, please try again", "credit_card": "Credit Card", + "days_trial": "You will be charged tomorrow.", + "days_trial_plural": "You will be charged after {{count}} days.", "discount_period": "For the first {{period}}", - "discount_period_plural": "For {{count}} {{period}}", + "discount_period_plural": "For the first {{count}} {{period}}", + "free_trial_discount": "Free trial", "monthly": "Monthly subscription", "no_payment_needed": "No payment needed", "payment_cancelled": "Payment cancelled", @@ -25,6 +28,8 @@ "payment_method_fee": "Payment method fee", "paypal": "PayPal", "paypal_instructions": "Clicking 'continue' will bring you to the PayPal site.", + "periods_trial": "You will be charged after one {{period}}.", + "periods_trial_plural": "You will be charged after {{count}} {{period}}.", "redeem_coupon": "Redeem coupon", "start_watching": "Start watching ({{countdown}})", "total_price": "Total", @@ -39,7 +44,7 @@ "first_days_free": "First day free", "first_days_free_plural": "First {{count}} days free", "first_periods_free": "First {{period}} free", - "first_periods_free_plural": "First {{count}} {{period}} days free", + "first_periods_free_plural": "First {{count}} {{period}} free", "watch_on_all_devices": "Watch on all devices" }, "continue": "Continue", diff --git a/src/i18n/locales/nl_NL/account.json b/src/i18n/locales/nl_NL/account.json index 2bf628e80..b11e8eaa1 100644 --- a/src/i18n/locales/nl_NL/account.json +++ b/src/i18n/locales/nl_NL/account.json @@ -14,8 +14,11 @@ "coupon_discount": "", "coupon_not_valid": "", "credit_card": "", + "days_trial": "", + "days_trial_plural": "", "discount_period": "", "discount_period_plural": "", + "free_trial_discount": "", "monthly": "", "no_payment_needed": "", "payment_cancelled": "", @@ -25,6 +28,8 @@ "payment_method_fee": "", "paypal": "", "paypal_instructions": "", + "periods_trial": "", + "periods_trial_plural": "", "redeem_coupon": "", "start_watching": "", "total_price": "",