feat: hide tax and payment provider fees when not applicable

chore: fix offer e2e test with a payment fee of zero fix: redeem coupons e2e test
jwplayer · May 30, 2023 · 790dba4 · 790dba4
1 parent 9745686
commit 790dba4
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 25 deletions.
diff --git a/src/components/CheckoutForm/CheckoutForm.module.scss b/src/components/CheckoutForm/CheckoutForm.module.scss
@@ -115,22 +115,21 @@
   }
 
   tfoot {
-    tr:first-child {
+    tr:first-of-type {
       td {
         padding-top: 8px;
         font-weight: var(--body-font-weight-bold);
         font-size: 24px;
       }
     }
 
-    tr:last-child {
+    tr:not(:first-of-type) {
       td {
         font-size: 14px;
       }
     }
   }
-}
-
+  }
 .divider {
   border: none;
   border-top: 1px solid rgba(variables.$white, 0.34);

diff --git a/src/components/CheckoutForm/CheckoutForm.tsx b/src/components/CheckoutForm/CheckoutForm.tsx
@@ -151,20 +151,24 @@ const CheckoutForm: React.FC<Props> = ({
                 <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>
+            {order.priceBreakdown.paymentMethodFee > 0 && (
+              <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>
+            {order.priceBreakdown.taxValue > 0 && (
+              <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
@@ -67,16 +67,7 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
       <table
         class="_orderTotals_abc9bc"
       >
-        <tbody>
-          <tr>
-            <td>
-              checkout.payment_method_fee
-            </td>
-            <td>
-              € 0,00
-            </td>
-          </tr>
-        </tbody>
+        <tbody />
         <tfoot>
           <tr>
             <td>

diff --git a/test-e2e/tests/payments/coupons_test.ts b/test-e2e/tests/payments/coupons_test.ts
@@ -66,7 +66,9 @@ function runTestSuite(props: ProviderProps, providerName: string) {
 
     I.see(formatPrice(-37.5, 'EUR', props.locale));
     I.see(formatPrice(12.5, 'EUR', props.locale));
-    I.see(formatPrice(props.applicableTax, 'EUR', props.locale));
+    if (props.applicableTax !== 0) {
+      I.see(formatPrice(props.applicableTax, 'EUR', props.locale));
+    }
 
     I.fillField('couponCode', 'test100');
     I.click('Apply');

diff --git a/test-e2e/tests/payments/subscription_test.ts b/test-e2e/tests/payments/subscription_test.ts
@@ -111,8 +111,8 @@ function runTestSuite(props: ProviderProps, providerName: string) {
 
     I.see('Redeem coupon');
     I.see(props.yearlyOffer.price);
-    I.see('Payment method fee');
-    I.see(props.yearlyOffer.paymentFee);
+    I.dontSee('Payment method fee');
+    I.dontSee(props.yearlyOffer.paymentFee);
     I.see('Total');
     if (props.applicableTax !== 0) {
       I.see('Applicable tax (21%)');