fix(payment): improve checkout price breakdown

jwplayer · Aug 4, 2021 · 7017341 · 7017341
1 parent 931e318
commit 7017341
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 28 deletions.
diff --git 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
@@ -63,6 +63,22 @@ const CheckoutForm: React.FC<Props> = ({
     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<Props> = ({
       <div className={styles.order}>
         <div className={styles.orderInfo}>
           <p className={styles.orderTitle}>{offer.period === 'month' ? t('checkout.monthly') : t('checkout.yearly')}</p>
-          {/*<p className={styles.orderBillingDate}>*/}
-          {/*  Billing date is on <time>05-12-2021</time>*/}
-          {/*</p>*/}
+          {order.discount.type === 'trial' ? <p className={styles.orderBillingDate}>{getFreeTrialText(offer)}</p> : null}
         </div>
         <div className={styles.orderPrice}>
-          <span>{formatPrice(order.priceBreakdown.offerPrice, order.currency, offer.customerCountry)}</span>
+          <span>{formatPrice(offer.customerPriceInclTax, order.currency, offer.customerCountry)}</span>
           <small>/{getOfferPeriod()}</small>
         </div>
       </div>
@@ -109,14 +123,6 @@ const CheckoutForm: React.FC<Props> = ({
       <div>
         <table className={styles.orderTotals}>
           <tbody>
-            <tr>
-              <td>{t('checkout.applicable_tax', { taxRate: Math.round(order.taxRate * 100) })}</td>
-              <td>{formatPrice(order.priceBreakdown.taxValue, order.currency, offer.customerCountry)}</td>
-            </tr>
-            <tr>
-              <td>{t('checkout.payment_method_fee')}</td>
-              <td>{formatPrice(order.priceBreakdown.paymentMethodFee, order.currency, offer.customerCountry)}</td>
-            </tr>
             {order.discount.applied && order.discount.type === 'coupon' ? (
               <tr>
                 <td className={styles.couponCell}>
@@ -131,15 +137,29 @@ const CheckoutForm: React.FC<Props> = ({
                     )
                   </small>
                 </td>
-                <td>{formatPrice(order.priceBreakdown.discountAmount, order.currency, offer.customerCountry)}</td>
+                <td>{formatPrice(-order.priceBreakdown.discountAmount * (1 + order.taxRate), order.currency, offer.customerCountry)}</td>
               </tr>
             ) : null}
+            {order.discount.applied && order.discount.type === 'trial' ? (
+              <tr>
+                <td className={styles.couponCell}>{t('checkout.free_trial_discount')}</td>
+                <td>{formatPrice(-offer.customerPriceInclTax, order.currency, offer.customerCountry)}</td>
+              </tr>
+            ) : null}
+            <tr>
+              <td>{t('checkout.payment_method_fee')}</td>
+              <td>{formatPrice(order.priceBreakdown.paymentMethodFee, order.currency, offer.customerCountry)}</td>
+            </tr>
           </tbody>
           <tfoot>
             <tr>
               <td>{t('checkout.total_price')}</td>
               <td>{formatPrice(order.totalPrice, order.currency, offer.customerCountry)}</td>
             </tr>
+            <tr>
+              <td>{t('checkout.applicable_tax', { taxRate: Math.round(order.taxRate * 100) })}</td>
+              <td>{formatPrice(order.priceBreakdown.taxValue, order.currency, offer.customerCountry)}</td>
+            </tr>
           </tfoot>
         </table>
       </div>

diff --git a/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap b/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap
@@ -44,7 +44,7 @@ exports[`<CheckoutForm> renders and matches snapshot 1`] = `
         class="orderPrice"
       >
         <span>
-          € 5,78
+          € 6,99
         </span>
         <small>
           /
@@ -68,14 +68,6 @@ exports[`<CheckoutForm> renders and matches snapshot 1`] = `
         class="orderTotals"
       >
         <tbody>
-          <tr>
-            <td>
-              checkout.applicable_tax
-            </td>
-            <td>
-              € 1,21
-            </td>
-          </tr>
           <tr>
             <td>
               checkout.payment_method_fee
@@ -94,6 +86,14 @@ exports[`<CheckoutForm> renders and matches snapshot 1`] = `
               € 6,99
             </td>
           </tr>
+          <tr>
+            <td>
+              checkout.applicable_tax
+            </td>
+            <td>
+              € 1,21
+            </td>
+          </tr>
         </tfoot>
       </table>
     </div>

diff --git 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
@@ -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": "",