feat: added text overrides on CartSummary

Signed-off-by: Haris Spahija <haris.spahija@pon.com>
reactioncommerce · Nov 21, 2019 · 7c2c9f1 · 7c2c9f1
2 parents 162293c + 5cfa05c
commit 7c2c9f1
Show file tree

Hide file tree

Showing 6 changed files with 727 additions and 4,068 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -9,6 +9,8 @@ module.exports = function (api) {
         [
           "@babel/env",
           {
+            corejs: 3,
+            useBuiltIns: "entry",
             // https://babeljs.io/docs/en/babel-preset-env#targets
             targets: {
               node: "current",
@@ -37,6 +39,7 @@ module.exports = function (api) {
     [
       "@babel/env",
       {
+        corejs: 3,
         modules: esmodules ? false : "auto",
         // https://babeljs.io/docs/en/babel-preset-env#targets
         targets: {

diff --git a/package.json b/package.json
@@ -89,35 +89,37 @@
     "suiteName": "jest-tests"
   },
   "dependencies": {
-    "@babel/polyfill": "~7.2.5",
+    "@babel/runtime": "~7.5.5",
     "@reactioncommerce/components-context": "~1.2.0",
+    "core-js": "^3.2.1",
     "lodash": "~4.17.15",
     "prop-types": "~15.7.2",
     "react": "~16.9.0",
     "react-container-query": "~0.11.0",
     "react-dom": "~16.9.0",
     "react-stripe-elements": "~2.0.1",
     "reacto-form": "~1.4.0",
+    "regenerator-runtime": "^0.13.3",
     "styled-components": "~3.3.3"
   },
   "devDependencies": {
-    "@babel/cli": "~7.2.3",
-    "@babel/core": "~7.2.2",
-    "@babel/node": "~7.2.2",
-    "@babel/plugin-proposal-class-properties": "~7.3.0",
-    "@babel/plugin-proposal-decorators": "~7.3.0",
+    "@babel/cli": "~7.5.5",
+    "@babel/core": "~7.5.5",
+    "@babel/node": "~7.5.5",
+    "@babel/plugin-proposal-class-properties": "~7.5.5",
+    "@babel/plugin-proposal-decorators": "~7.4.4",
     "@babel/plugin-proposal-export-namespace-from": "~7.2.0",
     "@babel/plugin-proposal-function-sent": "~7.2.0",
     "@babel/plugin-proposal-json-strings": "~7.2.0",
     "@babel/plugin-proposal-numeric-separator": "~7.2.0",
     "@babel/plugin-proposal-throw-expressions": "~7.2.0",
     "@babel/plugin-syntax-dynamic-import": "~7.2.0",
     "@babel/plugin-syntax-import-meta": "~7.2.0",
-    "@babel/plugin-transform-runtime": "~7.2.0",
-    "@babel/preset-env": "~7.3.1",
+    "@babel/plugin-transform-runtime": "~7.5.5",
+    "@babel/preset-env": "~7.5.5",
     "@babel/preset-react": "~7.0.0",
-    "@commitlint/cli": "~7.0.0",
-    "@commitlint/config-conventional": "~7.0.1",
+    "@commitlint/cli": "~8.1.0",
+    "@commitlint/config-conventional": "~8.1.0",
     "@reactioncommerce/eslint-config": "~1.9.0",
     "adr": "~1.1.1",
     "autoprefixer": "~7.1.6",
@@ -149,7 +151,7 @@
     "file-loader": "~1.1.5",
     "fs-extra": "~5.0.0",
     "html-webpack-plugin": "~2.29.0",
-    "husky": "~1.0.0-rc.9",
+    "husky": "~3.0.4",
     "ignore-loader": "~0.1.2",
     "jest": "~24.1.0",
     "jest-junit": "~6.1.0",

diff --git a/package/package.json b/package/package.json
@@ -34,20 +34,20 @@
     "react-select": "~2.4.0"
   },
   "devDependencies": {
-    "@babel/cli": "~7.2.3",
-    "@babel/core": "~7.2.2",
-    "@babel/node": "~7.2.2",
-    "@babel/plugin-proposal-class-properties": "~7.3.0",
-    "@babel/plugin-proposal-decorators": "~7.3.0",
+    "@babel/cli": "~7.5.5",
+    "@babel/core": "~7.5.5",
+    "@babel/node": "~7.5.5",
+    "@babel/plugin-proposal-class-properties": "~7.5.5",
+    "@babel/plugin-proposal-decorators": "~7.4.4",
     "@babel/plugin-proposal-export-namespace-from": "~7.2.0",
     "@babel/plugin-proposal-function-sent": "~7.2.0",
     "@babel/plugin-proposal-json-strings": "~7.2.0",
     "@babel/plugin-proposal-numeric-separator": "~7.2.0",
     "@babel/plugin-proposal-throw-expressions": "~7.2.0",
     "@babel/plugin-syntax-dynamic-import": "~7.2.0",
     "@babel/plugin-syntax-import-meta": "~7.2.0",
-    "@babel/plugin-transform-runtime": "~7.2.0",
-    "@babel/preset-env": "~7.3.1",
+    "@babel/plugin-transform-runtime": "~7.5.5",
+    "@babel/preset-env": "~7.5.5",
     "@babel/preset-react": "~7.0.0",
     "@reactioncommerce/eslint-config": "~1.9.0",
     "autoprefixer": "~7.1.6",

diff --git a/package/src/components/CartSummary/v1/CartSummary.js b/package/src/components/CartSummary/v1/CartSummary.js
@@ -91,6 +91,10 @@ const Total = styled.span`
 
 class CartSummary extends Component {
   static propTypes = {
+    /**
+     * The text for the "Cart" title text.
+     */
+    cartTitleText: PropTypes.string,
     /**
      * You can provide a `className` prop that will be applied to the outermost DOM element
      * rendered by this component. We do not recommend using this for styling purposes, but
@@ -121,6 +125,10 @@ class CartSummary extends Component {
      * Total amount
      */
     displayTotal: PropTypes.string.isRequired,
+    /**
+     * The text for the "FREE" label text.
+     */
+    freeText: PropTypes.string,
     /**
      * Dense layout with a transparent background color
      */
@@ -129,21 +137,61 @@ class CartSummary extends Component {
      * If a product qualifies for free shipping, display "FREE" for shipping method
      */
     isFreeShipping: PropTypes.bool,
+    /**
+     * The text for the "Items" label text.
+     */
+    itemLabelText: PropTypes.string,
+    /**
+     * The text for the "items" header text.
+     */
+    itemsText: PropTypes.string,
     /**
      * Quantity of products in shopping cart
      */
-    itemsQuantity: PropTypes.number
+    itemsQuantity: PropTypes.number,
+    /**
+     * The text for the "Order total" label text.
+     */
+    orderTotalLabelText: PropTypes.string,
+    /**
+     * The text for the "Promo code applied" text.
+     */
+    promoCodeText: PropTypes.string,
+    /**
+     * The text for the "Shipping" label text.
+     */
+    shippingLabelText: PropTypes.string,
+    /**
+     * The text for the "Surcharges" label text.
+     */
+    surchargesLabelText: PropTypes.string,
+    /**
+     * The text for the "Tax" label text.
+     */
+    taxLabelText: PropTypes.string,
+  }
+
+  static defaultProps: {
+    cartTitleText: "Cart Summary",
+    freeText: "FREE",
+    itemLabelText: "Items",
+    itemsText: "items",
+    orderTotalLabelText: "Order total"
+    promoCodeText: "Promo code applied",
+    shippingLabelText: "Shipping",
+    surchargesLabelText: "Surcharges",
+    taxLabelText: "Tax",
   }
 
   renderHeader() {
-    const { itemsQuantity } = this.props;
-    const itemsLabel = itemsQuantity >= 0 ? `${itemsQuantity} items` : null;
+    const { cartTitleText, itemsQuantity, itemsText } = this.props;
+    const itemsLabel = itemsQuantity >= 0 ? `${itemsQuantity} ${itemsText}` : null;
 
     return (
       <thead>
         <tr>
           <Th>
-            <Title>Cart Summary</Title>
+            <Title>{cartTitleText}</Title>
           </Th>
           <Thr>{itemsLabel}</Thr>
         </tr>
@@ -152,11 +200,11 @@ class CartSummary extends Component {
   }
 
   renderDiscount() {
-    const { displayDiscount, isDense } = this.props;
+    const { displayDiscount, isDense, promoCodeText } = this.props;
 
     return (
       <tr>
-        <Td isDense={isDense}>Promo code applied:</Td>
+        <Td isDense={isDense}>{promoCodeText}:</Td>
         <TdValue isDense={isDense}>
           <Discount>{displayDiscount}</Discount>
         </TdValue>
@@ -174,11 +222,17 @@ class CartSummary extends Component {
       displayTax,
       displayTotal,
       isDense,
-      isFreeShipping
+      isFreeShipping,
+      freeText,
+      itemLabelText,
+      orderTotalLabelText,
+      shippingLabelText,
+      surchargesLabelText,
+      taxLabelText,
     } = this.props;
 
     // Use "-" to indicate we are still calculating this field.
-    const shipping = (isFreeShipping ? "FREE" : displayShipping) || "-";
+    const shipping = (isFreeShipping ? freeText : displayShipping) || "-";
     const tax = displayTax || "-";
     const header = !isDense && this.renderHeader();
     const discount = displayDiscount && this.renderDiscount();
@@ -189,24 +243,24 @@ class CartSummary extends Component {
         {header}
         <tbody>
           <tr>
-            <Td isDense={isDense}>Items:</Td>
+            <Td isDense={isDense}>{itemLabelText}:</Td>
             <TdValue isDense={isDense}>{displaySubtotal}</TdValue>
           </tr>
           <tr>
-            <Td isDense={isDense}>Shipping:</Td>
+            <Td isDense={isDense}>{shippingLabelText}:</Td>
             <TdValue isDense={isDense}>{shipping}</TdValue>
           </tr>
           {discount}
           <tr>
-            <Td isDense={isDense}>Surcharges:</Td>
+            <Td isDense={isDense}>{surchargesLabelText}:</Td>
             <TdValue isDense={isDense}>{surcharge}</TdValue>
           </tr>
           <tr>
-            <TdTax isDense={isDense}>Tax:</TdTax>
+            <TdTax isDense={isDense}>{taxLabelText}:</TdTax>
             <TdTaxValue isDense={isDense}>{tax}</TdTaxValue>
           </tr>
           <tr>
-            <TdTotal isDense={isDense} isBordered>Order total:</TdTotal>
+            <TdTotal isDense={isDense} isBordered>{orderTotalLabelText}:</TdTotal>
             <TdTotalValue isDense={isDense} isBordered>
               <Total>{displayTotal}</Total>
             </TdTotalValue>