Display error messages

src/APIErrorNotification.scss

@@ -0,0 +1,40 @@
+@import './theme/common';
+
+.notification {
+  height: 0;
+
+  &__body {
+    max-width: 800px;
+    position: relative;
+    margin-right: auto;
+    margin-left: auto;
+    justify-content: center;
+    border: 1px solid $mainErrorColor;
+    border-radius: 4px;
+    color: $mainErrorColor;
+    background-color: $mainBackgroundColor;
+    padding: 5px 10px;
+    z-index: 1001;
+  }
+
+  &__erroricon {
+   fill:  $mainErrorColor;
+   display: inline-block;
+  }
+
+  &__details {
+    display: inline-block;
+    padding: 2px 10px 0;
+  }
+
+  &__closebtn {
+    position: absolute;
+    top: 5px;
+    right: 10px;
+    fill:  $mainErrorColor;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}

src/APIErrorNotification.tsx

@@ -0,0 +1,43 @@
+import React, { useContext } from "react";
+import { APIErrorContext } from './APIErrorProvider';
+import {ReactComponent as CloseIcon} from "./images/icons/ic_close.svg";
+import {ReactComponent as ErrorIcon} from "./images/icons/error-icon.svg";
+
+import './APIErrorNotification.scss';
+
+interface IErrorMessage {
+  message: string,
+  status: number,
+  source: string,
+  title: string,
+  detail: string,
+  request_id?: string,
+}
+
+export const APIErrorNotification = () => {
+  const { error, removeError } = useContext(APIErrorContext);
+
+  const handleCloseModal = () => {
+    removeError()
+  };
+
+  return (
+    <div className="notification">
+      {!!error && error.length > 0 && error.map((el: IErrorMessage) => (
+        <div className="notification__body" key={`${el.detail}_${Math.random().toString(36)}`}>
+          <ErrorIcon className="notification__erroricon" />
+          <div className="notification__details">
+            {error && error[0] && error[0].detail && el.detail}
+          </div>
+          <button
+            className="notification__closebtn"
+            type="button"
+            aria-label="close"
+            onClick={handleCloseModal}>
+          <CloseIcon />
+          </button >
+        </div>
+        ))}
+    </div>
+  )
+};

src/APIErrorProvider.tsx

@@ -0,0 +1,40 @@
+import React, { useState, useCallback } from 'react';
+
+interface IErrorMessage {
+  message: string,
+  status: number,
+  source: string,
+  title: string,
+  detail: string,
+  request_id?: string,
+}
+
+interface IErrorParams {
+  error: IErrorMessage[] | null,
+  addError: (message: IErrorMessage[]) => void,
+  removeError: () => void,
+}
+
+export const APIErrorContext = React.createContext<IErrorParams>({
+  error: null,
+  addError: () => {},
+  removeError: () => {}
+});
+
+export const APIErrorProvider = ({ children }: any) => {
+  const [error, setError] = useState<IErrorMessage[] | null>(null);
+  const removeError = () => setError([]);
+  const addError = (message: IErrorMessage[]) => setError(message);
+
+  const contextValue = {
+    error,
+    addError: useCallback((message) => addError(message), []),
+    removeError: useCallback(() => removeError(), [])
+  };
+
+  return (
+    <APIErrorContext.Provider value={contextValue}>
+      {children}
+    </APIErrorContext.Provider>
+  );
+};

src/Address.tsx

@@ -1,10 +1,11 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import * as moltin from '@moltin/sdk';
 import { useAddressData } from './app-state';
 import { deleteAddress } from './service';
 import { useTranslation } from './app-state';
 import { AddressForm } from './AddressForm';
 import { DeleteAddressDialog } from './DeleteAddressDialog';
+import { APIErrorContext } from "./APIErrorProvider";
 
 import './Address.scss';
 
@@ -16,6 +17,7 @@ export const Address: React.FC = () => {
   const [selectedDeleteAddress, setSelectedDeleteAddress] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const { addressData, updateAddresses } = useAddressData();
+  const { addError } = useContext(APIErrorContext);
 
   const handleDelete = (addressId: string) => {
     setIsDeleteModalOpen(true);
@@ -39,6 +41,7 @@ export const Address: React.FC = () => {
         setIsDeleteModalOpen(false);
       })
       .catch(error => {
+        addError(error.errors);
         setIsLoading(false);
         setIsDeleteModalOpen(false);
         console.error(error);

src/App.tsx

@@ -8,6 +8,8 @@ import { AppStateProvider } from './app-state';
 import { AppHeader } from './AppHeader';
 import { AppFooter } from './AppFooter';
 import { CompareOverlay } from './CompareOverlay';
+import { APIErrorProvider } from './APIErrorProvider';
+import { APIErrorNotification } from './APIErrorNotification';
 import './App.scss';
 
 const App: React.FC = () => {
@@ -18,31 +20,34 @@ const App: React.FC = () => {
 
   return (
     <Router>
-      <AppStateProvider>
-        <InstantSearch searchClient={searchClient} indexName={config.algoliaIndexName}>
-          <Configure hitsPerPage={8}/>
-          <div className="app">
-          <header className="app__header">
-            <AppHeader />
-          </header>
-          <main className="app__main">
-            <Switch>
-              {routes.map(route => (
-                <Route key={route.path} {...route} />
-              ))}
-            </Switch>
-          </main>
-          <footer id="app-footer" role="contentinfo" aria-label="app-footer">
-            <div className="app__footer">
-              <AppFooter />
-            </div>
-          </footer>
-          <aside className="app__compareoverlay">
-            <CompareOverlay />
-          </aside>
-        </div>
-        </InstantSearch>
-      </AppStateProvider>
+      <APIErrorProvider>
+        <AppStateProvider>
+          <InstantSearch searchClient={searchClient} indexName={config.algoliaIndexName}>
+            <Configure hitsPerPage={8}/>
+            <div className="app">
+            <header className="app__header">
+              <AppHeader />
+              <APIErrorNotification />
+            </header>
+            <main className="app__main">
+              <Switch>
+                {routes.map(route => (
+                  <Route key={route.path} {...route} />
+                ))}
+              </Switch>
+            </main>
+            <footer id="app-footer" role="contentinfo" aria-label="app-footer">
+              <div className="app__footer">
+                <AppFooter />
+              </div>
+            </footer>
+            <aside className="app__compareoverlay">
+              <CompareOverlay />
+            </aside>
+          </div>
+          </InstantSearch>
+        </AppStateProvider>
+      </APIErrorProvider>
     </Router>
   );
 };

src/CartItemList.tsx

@@ -1,8 +1,9 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { useCartData, useTranslation } from './app-state';
 import { removeCartItem, updateCartItem } from './service';
 import { ImageContainer } from "./ImageContainer";
 import { Promotion } from "./Promotion";
+import { APIErrorContext } from "./APIErrorProvider";
 
 import './CartItemList.scss';
 
@@ -16,6 +17,7 @@ export const CartItemList: React.FC<CartItemListParams> = (props) => {
   const { items, handlePage, promotionItems } = props;
   const { t } = useTranslation();
   const { count, totalPrice, updateCartItems } = useCartData();
+  const { addError } = useContext(APIErrorContext);
 
   const isLoading = false;
   const imgSize = 73;
@@ -35,6 +37,7 @@ export const CartItemList: React.FC<CartItemListParams> = (props) => {
         setRemovingItem(-1);
       })
       .catch(error => {
+        addError(error.errors);
         console.error(error);
       })
   };

src/CartModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import useOnclickOutside from 'react-cool-onclickoutside';
 import { Elements, StripeProvider } from 'react-stripe-elements';
 import { useCartData, useCustomerData, useOrdersData, useTranslation } from './app-state';
@@ -10,6 +10,7 @@ import Checkout from "./Checkout";
 import { CartItemList } from './CartItemList';
 import { ReactComponent as CloseIcon } from './images/icons/ic_close.svg';
 import { ReactComponent as BackArrovIcon } from './images/icons/arrow_back-black-24dp.svg';
+import { APIErrorContext } from "./APIErrorProvider";
 
 import './CartModal.scss';
 
@@ -50,6 +51,7 @@ export const CartModal: React.FC<CartModalParams> = (props) => {
   const { isLoggedIn } = useCustomerData();
   const { updatePurchaseHistory } = useOrdersData();
   const { t } = useTranslation();
+  const { addError } = useContext(APIErrorContext);
 
   const [route, setRoute] = useState<string>('itemList');
   const [isSameAddress, setIsSameAddress] = useState(true);
@@ -79,6 +81,7 @@ export const CartModal: React.FC<CartModalParams> = (props) => {
       setRoute('completed');
       setIsSameAddress(true);
     } catch (err) {
+      addError(err.errors);
       console.error(err)
     }
   };

src/Product.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
 import { useParams } from 'react-router-dom';
 import { useResolve, useProductImages } from './hooks';
 import { addToCart, loadProductBySlug } from './service';
@@ -8,6 +8,7 @@ import { useTranslation, useCurrency, useCartData } from './app-state';
 import { isProductAvailable } from './helper';
 import { Availability } from './Availability';
 import { VariationsSelector } from './VariationsSelector';
+import { APIErrorContext } from './APIErrorProvider';
 
 import './Product.scss';
 
@@ -22,16 +23,23 @@ export const Product: React.FC = () => {
   const { selectedLanguage } = useTranslation();
   const { selectedCurrency } = useCurrency();
   const { updateCartItems } = useCartData();
+  const { addError } = useContext(APIErrorContext);
 
   const [product] = useResolve(
-    async () => loadProductBySlug(productSlug, selectedLanguage, selectedCurrency),
-    [productSlug, selectedLanguage, selectedCurrency]
+    async () => {
+      try {
+        return loadProductBySlug(productSlug, selectedLanguage, selectedCurrency)
+      } catch (error) {
+        addError(error.errors);
+      }
+    },
+    [productSlug, selectedLanguage, selectedCurrency, addError]
   );
   const [productId, setProductId] = useState('');
 
   useEffect(() => {
     product && setProductId(product.id);
-  }, [product])
+  }, [product]);
 
   const productImageHrefs = useProductImages(product);
   const [currentImageIndex, setCurrentImageIndex] = useState(0);
@@ -46,9 +54,12 @@ export const Product: React.FC = () => {
   const handleAddToCart = () => {
     const mcart = localStorage.getItem('mcart') || '';
     addToCart(mcart, productId)
-      .then(() => {
-        updateCartItems()
+    .then(() => {
+      updateCartItems()
     })
+    .catch ((err) => {
+      addError(err.errors);
+    });
   };
 
   const handleNextImageClicked = () => {

src/ProductMainImage.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import * as moltin from '@moltin/sdk';
 import { loadImageHref } from './service';
 import { useResolve } from './hooks';
 import { ImageContainer } from './ImageContainer';
+import { APIErrorContext } from './APIErrorProvider';
 
 interface ProductMainImageProps {
   product: moltin.Product;
@@ -11,7 +12,19 @@ interface ProductMainImageProps {
 
 export const ProductMainImage: React.FC<ProductMainImageProps> = (props) => {
   const productMainImageId = props.product?.relationships?.main_image?.data?.id;
-  const [productImageUrl] = useResolve(() => productMainImageId ? loadImageHref(productMainImageId) : undefined, [productMainImageId]);
+  const { addError } = useContext(APIErrorContext);
+  const [productImageUrl] = useResolve(
+    async () => {
+      try {
+        if (productMainImageId) {
+          return loadImageHref(productMainImageId)
+        }
+      } catch (error) {
+        addError(error.errors);
+      }
+    },
+    [productMainImageId, addError]
+  );
   const productBackground = props.product?.background_color ?? '';
 
   return (

src/Profile.tsx

@@ -1,8 +1,8 @@
-
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { useFormik } from 'formik';
 import { updateCustomer } from './service';
 import { useCustomerData, useTranslation } from './app-state';
+import { APIErrorContext } from './APIErrorProvider';
 
 import './Profile.scss';
 
@@ -17,6 +17,7 @@ export const Profile: React.FC = (props) => {
 
   const [isEditMode, setIsEditMode] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
+  const { addError } = useContext(APIErrorContext);
 
   const initialValues:FormValues = {
     email: customerEmail,
@@ -52,6 +53,7 @@ export const Profile: React.FC = (props) => {
           setIsEditMode(false);
         })
         .catch(error => {
+          addError(error.errors);
           console.error(error);
         });
     },