Product Out of Stock Message

packages/venia-concept/src/RootComponents/Product/Product.js

@@ -3,6 +3,7 @@ import { string, func } from 'prop-types';
 
 import { connect, Query } from 'src/drivers';
 import { addItemToCart } from 'src/actions/cart';
+import ErrorView from 'src/components/ErrorView';
 import { loadingIndicator } from 'src/components/LoadingIndicator';
 import ProductFullDetail from 'src/components/ProductFullDetail';
 import getUrlKey from 'src/util/getUrlKey';
@@ -52,6 +53,10 @@ class Product extends Component {
 
                     const product = data.productDetail.items[0];
 
+                    if (!product) {
+                        return <ErrorView outOfStock={true} />;
+                    }
+
                     return (
                         <ProductFullDetail
                             product={this.mapProduct(product)}

packages/venia-concept/src/components/ErrorView/__tests__/__snapshots__/errorView.spec.js.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`it renders the correct tree when loading 1`] = `
+<h1>
+  <Classify(LoadingIndicator)>
+    <span>
+      Fetching Data...
+    </span>
+  </Classify(LoadingIndicator)>
+</h1>
+`;
+
+exports[`it renders the correct tree when out of stock 1`] = `
+<h1>
+  This Product is currently out of stock. Please try again later.
+</h1>
+`;
+
+exports[`it renders the correct tree when page not found 1`] = `
+<h1>
+  That page could not be found. Please try again.
+</h1>
+`;
+
+exports[`it renders the internal error tree otherwise 1`] = `
+<h1>
+  Something went wrong. Please try again.
+</h1>
+`;

packages/venia-concept/src/components/ErrorView/__tests__/errorView.spec.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import ShallowRenderer from 'react-test-renderer/shallow';
+
+import ErrorView from '../errorView';
+
+const renderer = new ShallowRenderer();
+
+test('it renders the correct tree when loading', () => {
+    const tree = renderer.render(<ErrorView loading={true} />);
+
+    expect(tree).toMatchSnapshot();
+});
+
+test('it renders the correct tree when page not found', () => {
+    const tree = renderer.render(<ErrorView notFound={true} />);
+
+    expect(tree).toMatchSnapshot();
+});
+
+test('it renders the correct tree when out of stock', () => {
+    const tree = renderer.render(<ErrorView outOfStock={true} />);
+
+    expect(tree).toMatchSnapshot();
+});
+
+test('it renders the internal error tree otherwise', () => {
+    const tree = renderer.render(<ErrorView />);
+
+    expect(tree).toMatchSnapshot();
+});

packages/venia-concept/src/components/ErrorView/errorView.js

@@ -5,15 +5,21 @@ import { loadingIndicator } from 'src/components/LoadingIndicator';
 const messages = new Map()
     .set('loading', loadingIndicator)
     .set('notFound', 'That page could not be found. Please try again.')
-    .set('internalError', 'Something went wrong. Please try again.');
+    .set('internalError', 'Something went wrong. Please try again.')
+    .set(
+        'outOfStock',
+        'This Product is currently out of stock. Please try again later.'
+    );
 
 class ErrorView extends Component {
     render() {
-        const { loading, notFound } = this.props;
+        const { loading, notFound, outOfStock } = this.props;
         const message = loading
             ? messages.get('loading')
             : notFound
             ? messages.get('notFound')
+            : outOfStock
+            ? messages.get('outOfStock')
             : messages.get('internalError');
 
         return <h1>{message}</h1>;