Rewrite sanitize function for more sophisticated error handling

Author: Artem

demo/peacock/package.json

@@ -5,6 +5,7 @@
   "main": "index.js",
   "scripts": {
     "lint": "eslint --ext .js --ext .jsx .",
+    "fix-lint": "eslint --ext .js --ext .jsx . --fix",
     "flow": "flow check",
     "dev": "gulp dev --optimize_for_size --stack_size=4096",
     "test": "node_modules/mocha/bin/mocha",

demo/peacock/src/components/cart/cart.jsx

@@ -11,6 +11,7 @@ import * as tracking from 'lib/analytics';
 import localized from 'lib/i18n';
 import { emailIsSet } from 'paragons/auth';
 import sanitizeAll from 'sanitizers';
+import sanitizeLineItems from 'sanitizers/line-items';
 
 // actions
 import * as actions from 'modules/cart';
@@ -49,7 +50,7 @@ type Props = {
   applePayAvailable: boolean,
   checkApplePay: () => void,
   location: Object,
-  beginApplePay: (paymentRequest: Object, lineItems: Object) => Promise<*>,
+  beginApplePay: (paymentRequest: Object) => Promise<*>,
 };
 
 type State = {
@@ -146,29 +147,9 @@ class Cart extends Component {
 
   @autobind
   sanitize(err) {
-    if (/Following SKUs are out/.test(err)) {
-      const skus = err.split('.')[0].split(':')[1].split(',');
+    const sanitizedLineItems = sanitizeLineItems(err, this.props.skus);
 
-      const products = _.reduce(skus, (acc, outOfStock) => {
-        const sku = _.find(this.props.skus, { sku: outOfStock.trim() });
-        if (sku) {
-          return [
-            ...acc,
-            sku.name,
-          ];
-        }
-
-        return acc;
-      }, []);
-
-      return (
-        <span>
-          Products <strong>{products.join(', ')}</strong> are out of stock. Please remove them to complete the checkout.
-        </span>
-      );
-    }
-
-    return sanitizeAll(err);
+    return sanitizedLineItems ? sanitizedLineItems : sanitizeAll(err);
   }
 
   get errorsLine() {
@@ -196,7 +177,7 @@ class Cart extends Component {
 
   @autobind
   beginApplePay() {
-    const { total, taxes, adjustments } = this.props.totals;
+    const { total } = this.props.totals;
     const amount = (parseFloat(total) / 100).toFixed(2);
     const paymentRequest = {
       countryCode: 'US',
@@ -216,12 +197,7 @@ class Cart extends Component {
       ],
     };
 
-    const lineItems = {
-      taxes,
-      promotion: adjustments,
-    };
-
-    this.props.beginApplePay(paymentRequest, lineItems).then(() => {
+    this.props.beginApplePay(paymentRequest).then(() => {
       this.setState({ errors: null });
       browserHistory.push('/checkout/done');
     })

demo/peacock/src/modules/checkout.js

@@ -122,10 +122,10 @@ export const checkApplePay = _checkApplePay.perform;
 
 const _beginApplePay = createAsyncActions(
   'beginApplePay',
-  function(paymentRequest, lineItems) {
+  function(paymentRequest) {
     const { dispatch } = this;
 
-    return foxApi.applePay.beginApplePay(paymentRequest, lineItems)
+    return foxApi.applePay.beginApplePay(paymentRequest)
       .then((res) => {
         tracking.purchase({
           ...res,

demo/peacock/src/pages/checkout/checkout.jsx

@@ -10,6 +10,7 @@ import { browserHistory } from 'lib/history';
 import * as tracking from 'lib/analytics';
 import { emailIsSet, isGuest } from 'paragons/auth';
 import classNames from 'classnames';
+import sanitizeLineItems from 'sanitizers/line-items';
 
 // actions
 import * as actions from 'modules/checkout';
@@ -117,26 +118,9 @@ class Checkout extends Component {
 
   @autobind
   sanitizeError(error) {
-    if (/Following SKUs are out/.test(error)) {
-      const skus = error.split('.')[0].split(':')[1].split(',');
-
-      const products = _.reduce(skus, (acc, outOfStock) => {
-        const sku = _.find(this.props.cart.skus, { sku: outOfStock.trim() });
-        if (sku) {
-          return [
-            ...acc,
-            sku.name,
-          ];
-        }
-
-        return acc;
-      }, []);
-
-      return (
-        <span>
-          Products <strong>{products.join(', ')}</strong> are out of stock. Please remove them to complete the checkout.
-        </span>
-      );
+    const sanitizedLineItems = sanitizeLineItems(error, this.props.cart.skus);
+    if (sanitizedLineItems) {
+      return sanitizedLineItems;
     } else if (/is blacklisted/.test(error)) {
       return 'Your account has been blocked from making purchases on this site';
     }

demo/peacock/src/sanitizers/line-items.js

@@ -0,0 +1,34 @@
+/* @flow */
+import React from 'react';
+import _ from 'lodash';
+
+export default function sanitizeLineItems(error: string, lineItems: Array<mixed>) {
+  if (/Following SKUs are out/.test(error)) {
+    const skus = error.split('.')[0].split(':')[1].split(',');
+
+    const products = _.reduce(skus, (acc, outOfStock) => {
+      const sku = _.find(lineItems, { sku: outOfStock.trim() });
+      if (sku) {
+        return [
+          ...acc,
+          sku.name,
+        ];
+      }
+
+      return acc;
+    }, []);
+
+    const singleProduct = products.length === 1;
+    const title = singleProduct ? 'Product' : 'Products';
+    const verb = singleProduct ? 'is' : 'are';
+    const pronoun = singleProduct ? 'it' : 'them';
+    return (
+      <span>
+        {title} <strong>{products.join(', ')}</strong> {verb} out of stock.
+        Please remove {pronoun} to complete the checkout.
+      </span>
+    );
+  }
+
+  return null;
+}