Merge pull request #389 from reactioncommerce/refactor-kieckhafer-cop…

…yUpdateOnSurcharge chore: update copy and monetary display on surcharge in CartSummary
reactioncommerce · Jan 23, 2019 · 20523b2 · 20523b2
2 parents 68e8402 + dfcb738
commit 20523b2
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 20 deletions.
diff --git a/package/src/components/CartSummary/v1/CartSummary.js b/package/src/components/CartSummary/v1/CartSummary.js
@@ -48,10 +48,6 @@ const Discount = styled.span`
   ${addTypographyStyles("CartSummaryDiscount", "bodyTextBold")}
 `;
 
-const Surcharge = styled.span`
-  ${addTypographyStyles("CartSummarySurcharge", "bodyText")}
-`;
-
 const Total = styled.span`
   ${addTypographyStyles("CartSummaryTotal", "bodyTextBold")}
 `;
@@ -131,19 +127,6 @@ class CartSummary extends Component {
     );
   }
 
-  renderSurcharge() {
-    const { displaySurcharge, isDense } = this.props;
-
-    return (
-      <tr>
-        <Td isDense={isDense}>Surcharge applied</Td>
-        <TdValue isDense={isDense}>
-          <Surcharge>{displaySurcharge}</Surcharge>
-        </TdValue>
-      </tr>
-    );
-  }
-
   render() {
     const {
       className,
@@ -157,11 +140,11 @@ class CartSummary extends Component {
       isFreeShipping
     } = this.props;
 
-    const shipping = isFreeShipping ? "FREE" : displayShipping;
+    const shipping = (isFreeShipping ? "FREE" : displayShipping) || "-";
     const tax = displayTax || "-";
     const header = !isDense && this.renderHeader();
     const discount = displayDiscount && this.renderDiscount();
-    const surcharge = displaySurcharge && this.renderSurcharge();
+    const surcharge = displaySurcharge || "-";
 
     return (
       <Table className={className} isDense={isDense}>
@@ -176,7 +159,10 @@ class CartSummary extends Component {
             <TdValue isDense={isDense}>{shipping}</TdValue>
           </tr>
           {discount}
-          {surcharge}
+          <tr>
+            <Td isDense={isDense}>Surcharge</Td>
+            <TdValue isDense={isDense}>{surcharge}</TdValue>
+          </tr>
           <tr>
             <Td isDense={isDense}>Tax</Td>
             <TdValue isDense={isDense}>{tax}</TdValue>

diff --git a/package/src/components/CartSummary/v1/__snapshots__/CartSummary.test.js.snap b/package/src/components/CartSummary/v1/__snapshots__/CartSummary.test.js.snap
@@ -181,6 +181,18 @@ exports[`Displays a summary of the current items in the cart 1`] = `
         3-5 Days
       </td>
     </tr>
+    <tr>
+      <td
+        className="c4"
+      >
+        Surcharge
+      </td>
+      <td
+        className="c5 c4"
+      >
+        -
+      </td>
+    </tr>
     <tr>
       <td
         className="c4"
@@ -394,6 +406,18 @@ exports[`Displays a summary with FREE shipping 1`] = `
         FREE
       </td>
     </tr>
+    <tr>
+      <td
+        className="c4"
+      >
+        Surcharge
+      </td>
+      <td
+        className="c5 c4"
+      >
+        -
+      </td>
+    </tr>
     <tr>
       <td
         className="c4"
@@ -638,6 +662,18 @@ exports[`Displays a summary with applied discount 1`] = `
         </span>
       </td>
     </tr>
+    <tr>
+      <td
+        className="c4"
+      >
+        Surcharge
+      </td>
+      <td
+        className="c5 c4"
+      >
+        -
+      </td>
+    </tr>
     <tr>
       <td
         className="c4"
@@ -851,6 +887,18 @@ exports[`Displays a summary with calculated taxes 1`] = `
         3-5 Days
       </td>
     </tr>
+    <tr>
+      <td
+        className="c4"
+      >
+        Surcharge
+      </td>
+      <td
+        className="c5 c4"
+      >
+        -
+      </td>
+    </tr>
     <tr>
       <td
         className="c4"