Sanitize the out of stock error for checkout as well

Author: Artem

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

@@ -160,7 +160,11 @@ class Cart extends Component {
         return acc;
       }, []);
 
-      return `Products ${products.join(', ')} are out of stock. Please remove them to complete the checkout.`;
+      return (
+        <span>
+          Products <strong>{products.join(', ')}</strong> are out of stock. Please remove them to complete the checkout.
+        </span>
+      );
     }
 
     return sanitizeAll(err);

demo/peacock/src/pages/checkout/checkout.css

@@ -81,6 +81,10 @@
   .place-order-button {
     border-radius: 0;
   }
+
+  .error-alerts {
+    margin-left: 15px;
+  }
 }
 
 @media (--large) {

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

@@ -118,8 +118,26 @@ class Checkout extends Component {
 
   @autobind
   sanitizeError(error) {
-    if (error && error.startsWith('Not enough onHand units')) {
-      return 'Unable to checkout — item is out of stock';
+    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>
+      );
     } else if (/is blacklisted/.test(error)) {
       return 'Your account has been blocked from making purchases on this site';
     }
@@ -293,6 +311,7 @@ class Checkout extends Component {
           <ErrorAlerts
             sanitizeError={this.sanitizeError}
             error={props.checkoutState.err}
+            styleName="error-alerts"
           />
           {this.content}
         </div>