From 790dba4f064c63fa74e394de0272c4a846b7028f Mon Sep 17 00:00:00 2001
From: Melissa 't Hart <melissa@videodock.com>
Date: Wed, 24 May 2023 18:18:21 +0200
Subject: [PATCH] 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
---
 .../CheckoutForm/CheckoutForm.module.scss     |  7 +++----
 src/components/CheckoutForm/CheckoutForm.tsx  | 20 +++++++++++--------
 .../__snapshots__/CheckoutForm.test.tsx.snap  | 11 +---------
 test-e2e/tests/payments/coupons_test.ts       |  4 +++-
 test-e2e/tests/payments/subscription_test.ts  |  4 ++--
 5 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/src/components/CheckoutForm/CheckoutForm.module.scss b/src/components/CheckoutForm/CheckoutForm.module.scss
index cf9d40383..12a478e1c 100644
--- a/src/components/CheckoutForm/CheckoutForm.module.scss
+++ b/src/components/CheckoutForm/CheckoutForm.module.scss
@@ -115,7 +115,7 @@
   }
 
   tfoot {
-    tr:first-child {
+    tr:first-of-type {
       td {
         padding-top: 8px;
         font-weight: var(--body-font-weight-bold);
@@ -123,14 +123,13 @@
       }
     }
 
-    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
index d16b2ba02..933f08e78 100644
--- 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
index 71de88d58..46f75eacd 100644
--- 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
index e1a63b9f0..babc4f67d 100644
--- 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
index f72f88e01..4bc8f3446 100644
--- 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%)');