From 1bc8fd3e9fe3f3ae988222c13933fcc0e85da0fb Mon Sep 17 00:00:00 2001
From: bilal <bilal89dif@gmail.com>
Date: Mon, 18 Jan 2021 14:49:17 +0100
Subject: [PATCH 1/5] add images + typography components

---
 next.config.js                              |  5 +++-
 pages/checkout.js                           |  5 +++-
 pages/index.js                              | 26 ++++++++++--------
 pages/login.js                              |  3 ++-
 pages/my-account.js                         |  6 +++--
 pages/product/[slug].js                     |  8 ++++--
 pages/register.js                           |  3 ++-
 src/components/cart/cart-page/CartBlocks.js |  5 ++--
 src/components/cart/cart-page/CartItem.js   |  3 ++-
 src/components/checkout/Billing.js          |  3 ++-
 src/components/checkout/CheckoutCartItem.js |  4 ++-
 src/components/checkout/CheckoutForm.js     |  5 ++--
 src/components/home/Categories.js           | 22 +++++++++-------
 src/components/home/Hero.js                 |  5 ++--
 src/components/image/defaultImg.js          |  2 ++
 src/components/image/index.js               | 29 +++++++++++++++++++++
 src/components/typography/index.js          | 20 ++++++++++++++
 17 files changed, 116 insertions(+), 38 deletions(-)
 create mode 100644 src/components/image/defaultImg.js
 create mode 100644 src/components/image/index.js
 create mode 100644 src/components/typography/index.js

diff --git a/next.config.js b/next.config.js
index 4b8c4f6..b8db605 100644
--- a/next.config.js
+++ b/next.config.js
@@ -21,7 +21,10 @@ module.exports = withOffline(
             generateSw: false,
             globPatterns: ['static/**/*'],
             globDirectory: '.',
-            target: 'serverless'
+            target: 'serverless',
+            images: {
+                domains: ['mylab.local'] // whatever port your backend runs on
+            }
         })
     )
 );
diff --git a/pages/checkout.js b/pages/checkout.js
index aec6c36..922e635 100644
--- a/pages/checkout.js
+++ b/pages/checkout.js
@@ -1,11 +1,14 @@
 import Layout from '../src/components/layouts/Layout';
 import CheckoutForm from '../src/components/checkout/CheckoutForm';
+import { Heading } from '../src/components/typography';
 
 const Checkout = () => {
     return (
         <Layout>
             <div className="container">
-                <h1 className="mt-5 mb-4">Checkout Page.</h1>
+                <Heading className="mt-5 mb-4">
+                    Checkout Page.
+                </Heading>
                 <CheckoutForm />
             </div>
         </Layout>
diff --git a/pages/index.js b/pages/index.js
index 1c1bc97..a3a625d 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -3,12 +3,17 @@ import Link from 'next/link';
 import client from '../src/apollo/ApolloClient';
 import AddToCartButton from '../src/components/cart/AddToCartButton';
 import Hero from '../src/components/home/Hero';
+import NextImage from '../src/components/image';
+import { SubHeading, Paragraph } from '../src/components/typography';
+
 import { PRODUCTS_QUERY } from '../src/queries';
 
 const NewProducts = ({ products }) => {
     return (
         <div className="container mt-5">
-            <h2 className="text-center mb-5">Products</h2>
+            <SubHeading className="text-center mb-5">
+                Products
+            </SubHeading>
             {products.length ? (
                 <div className="mt-2">
                     <div className="products-wrapper row">
@@ -19,16 +24,15 @@ const NewProducts = ({ products }) => {
                                     {/* @TODO need to get rid of using databseId here. */}
                                     <Link href={`/product/${item.slug}`}>
                                         <a>
-                                            <span className="product-link">
-                                                <img
-                                                    className="product-image"
-                                                    src={item.image.sourceUrl}
-                                                    srcSet={item.image.srcSet}
-                                                    alt={item.name}
-                                                />
-                                                <h5 className="product-name">{item.name}</h5>
-                                                <p className="product-price">{item.price}</p>
-                                            </span>
+                                            <NextImage
+                                                className="product-image"
+                                                src={item.image.sourceUrl}
+                                                alt={item.name}
+                                                width="250"
+                                                height="150"
+                                            />
+                                            <h5 className="product-name">{item.name}</h5>
+                                            <Paragraph className="product-price">{item.price}</Paragraph>
                                         </a>
                                     </Link>
                                     <AddToCartButton product={item} />
diff --git a/pages/login.js b/pages/login.js
index 77fa25e..938f7d1 100644
--- a/pages/login.js
+++ b/pages/login.js
@@ -10,6 +10,7 @@ import isEmpty from '../src/validator/isEmpty';
 import Link from 'next/link';
 import validateAndSanitizeLoginForm from '../src/validator/login';
 import { LOGIN_USER } from '../src/queries';
+import { SubHeading } from '../src/components/typography';
 /**
  * Login functional component.
  *
@@ -158,7 +159,7 @@ const Login = () => {
         <Layout>
             <div className="wd-form container mt-5 pt-5">
                 {/* Title */}
-                <h2 className="mb-2">Login</h2>
+                <SubHeading className="mb-2">Login</SubHeading>
 
                 {/* Error Message */}
                 {'' !== errorMessage
diff --git a/pages/my-account.js b/pages/my-account.js
index a0fa891..42519fc 100644
--- a/pages/my-account.js
+++ b/pages/my-account.js
@@ -3,7 +3,7 @@ import { useState, useEffect } from 'react';
 import { isUserValidated } from '../src/utils/auth-functions';
 import isEmpty from '../src/validator/isEmpty';
 import Router from 'next/router';
-
+import { Paragraph } from '../src/components/typography';
 /**
  * MyAccount functional component.
  *
@@ -50,7 +50,9 @@ const MyAccount = () => {
                         <div id="dashboard">
                             {userData.user.nicename ? <h6>Howdy {userData.user.nicename}!</h6> : ''}
                             <h5 className="mt-3">Account Details</h5>
-                            {userData.user.email ? <p>Email: {userData.user.email}</p> : ''}
+                            {userData.user.email ?
+                                <Paragraph>Email: {userData.user.email}</Paragraph> : ''
+                            }
                         </div>
                     </div>
                 </div>
diff --git a/pages/product/[slug].js b/pages/product/[slug].js
index 9c812ae..1b550f1 100644
--- a/pages/product/[slug].js
+++ b/pages/product/[slug].js
@@ -1,10 +1,12 @@
 import Layout from '../../src/components/layouts/Layout';
 import AddToCartButton from '../../src/components/cart/AddToCartButton';
+import NextImage from '../../src/components/image';
 import client from '../../src/apollo/ApolloClient';
 import { 
     PRODUCT_QUERY,
     PRODUCT_SLUGS 
 } from '../../src/queries';
+import { Heading } from '../../src/components/typography';
 
 const Product = (props) => {
     const {
@@ -17,7 +19,7 @@ const Product = (props) => {
                 <div className="mx-auto mt-5">
                     <div className="row">
                         <div className="col-md-6">
-                            <img
+                            <NextImage
                                 className="product-image"
                                 src={product?.image?.sourceUrl}
                                 srcSet={product?.image?.srcSet}
@@ -25,7 +27,9 @@ const Product = (props) => {
                             />
                         </div>
                         <div className="col-md-6">
-                            <h1 className="product_title entry-title">{product?.name}</h1>
+                            <Heading className="product_title entry-title">
+                                {product?.name}
+                            </Heading>
                             <p className="price">
                                 <span className="woocommerce-Price-amount amount">
                                     {product?.price}
diff --git a/pages/register.js b/pages/register.js
index 69878d7..58d4ec9 100644
--- a/pages/register.js
+++ b/pages/register.js
@@ -10,6 +10,7 @@ import isEmpty from '../src/validator/isEmpty';
 import Link from 'next/link';
 import validateAndSanitizeRegisterForm from '../src/validator/register';
 import { REGISTER_USER } from '../src/queries';
+import { SubHeading } from '../src/components/typography';
 /**
  * Register Functional Component.
  *
@@ -165,7 +166,7 @@ const Register = () => {
         <Layout>
             <div className="wd-form container mt-5 pt-5">
                 {/* Title */}
-                <h2 className="mb-2">Register</h2>
+                <SubHeading className="mb-2">Register</SubHeading>
 
                 {/* Error Message */}
                 {'' !== errorMessage
diff --git a/src/components/cart/cart-page/CartBlocks.js b/src/components/cart/cart-page/CartBlocks.js
index d2f0971..47a233d 100644
--- a/src/components/cart/cart-page/CartBlocks.js
+++ b/src/components/cart/cart-page/CartBlocks.js
@@ -3,6 +3,7 @@ import { useContext } from 'react';
 import { AppContext } from '../../context/AppContext';
 import { removeItemFromCart } from '../../../utils/cart-functions';
 import CartItem from './CartItem';
+import { Heading, SubHeading } from '../../typography';
 
 const CartBlocks = () => {
     const [cart, setCart] = useContext(AppContext);
@@ -24,7 +25,7 @@ const CartBlocks = () => {
         <div>
             {cart ? (
                 <div className="wd-cart-wrapper container">
-                    <h1 className="wd-cart-heading mt-5">Cart</h1>
+                    <Heading className="wd-cart-heading mt-5">Cart</Heading>
                     <table className="table table-hover">
                         <thead>
                             <tr className="wd-cart-head-container">
@@ -60,7 +61,7 @@ const CartBlocks = () => {
                     {/*Cart Total*/}
                     <div className="row wd-cart-total-container">
                         <div className="col-6">
-                            <h2>Cart Totals</h2>
+                            <SubHeading>Cart Totals</SubHeading>
                             <table className="table table-hover">
                                 <tbody>
                                     <tr className="table-light">
diff --git a/src/components/cart/cart-page/CartItem.js b/src/components/cart/cart-page/CartItem.js
index 944d91e..4be9b5b 100644
--- a/src/components/cart/cart-page/CartItem.js
+++ b/src/components/cart/cart-page/CartItem.js
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { updateCart } from '../../../utils/cart-functions';
+import NextImage from '../../image';
 
 const CartItem = ({ item, handleRemoveProductClick, setCart }) => {
     const [productCount, setProductCount] = useState(item.qty);
@@ -40,7 +41,7 @@ const CartItem = ({ item, handleRemoveProductClick, setCart }) => {
                 </span>
             </th>
             <td className="wd-cart-element">
-                <img
+                <NextImage
                     width="64"
                     src={item.image.sourceUrl}
                     srcSet={item.image.srcSet}
diff --git a/src/components/checkout/Billing.js b/src/components/checkout/Billing.js
index 890e268..e41f0c4 100644
--- a/src/components/checkout/Billing.js
+++ b/src/components/checkout/Billing.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { SubHeading } from '../typography';
 import countryList from './country-list';
 import Error from './Error';
 
@@ -214,7 +215,7 @@ const Billing = ({ input, handleOnChange }) => {
                     Create an account?
                 </label>
             </div>
-            <h2 className="mt-4 mb-4">Additional Information</h2>
+            <SubHeading className="mt-4 mb-4">Additional Information</SubHeading>
             {/* Order Notes */}
             <div className="form-group">
                 <label htmlFor="order-notes">Order Notes</label>
diff --git a/src/components/checkout/CheckoutCartItem.js b/src/components/checkout/CheckoutCartItem.js
index eb8fed8..e2eb358 100644
--- a/src/components/checkout/CheckoutCartItem.js
+++ b/src/components/checkout/CheckoutCartItem.js
@@ -1,8 +1,10 @@
+import NextImage from '../image';
+
 const CheckoutCartItem = ({ item }) => {
     return (
         <tr className="wd-cart-item" key={item.databaseId}>
             <td className="wd-cart-element">
-                <img
+                <NextImage
                     width="64"
                     src={item.image.sourceUrl}
                     srcSet={item.image.srcSet}
diff --git a/src/components/checkout/CheckoutForm.js b/src/components/checkout/CheckoutForm.js
index 7ce8f9d..e593eaa 100644
--- a/src/components/checkout/CheckoutForm.js
+++ b/src/components/checkout/CheckoutForm.js
@@ -4,6 +4,7 @@ import YourOrder from './YourOrder';
 import PaymentModes from './PaymentModes';
 import { AppContext } from '../context/AppContext';
 import validateAndSanitizeCheckoutForm from '../../validator/checkout';
+import { SubHeading } from '../typography';
 
 const CheckoutForm = () => {
     const [cart] = useContext(AppContext);
@@ -67,13 +68,13 @@ const CheckoutForm = () => {
                     <div className="row">
                         {/*Billing Details*/}
                         <div className="col-lg-6 col-md-12">
-                            <h2 className="mb-4">Billing Details</h2>
+                            <SubHeading className="mb-4">Billing Details</SubHeading>
                             <Billing input={input} handleOnChange={handleOnChange} />
                         </div>
                         {/* Order & Payments*/}
                         <div className="col-lg-6 col-md-12">
                             {/*	Order*/}
-                            <h2 className="mb-4">Your Order</h2>
+                            <SubHeading className="mb-4">Your Order</SubHeading>
                             <YourOrder cart={cart} />
 
                             {/*Payment*/}
diff --git a/src/components/home/Categories.js b/src/components/home/Categories.js
index 991ae79..38afef8 100644
--- a/src/components/home/Categories.js
+++ b/src/components/home/Categories.js
@@ -1,15 +1,17 @@
 import Link from 'next/link';
+import NextImage from '../../src/components/image';
+import { SubHeading } from '../typography';
 
 const Categories = () => {
     return (
         <div className="container">
-            <h2 className="text-center mb-4">Shop by Category</h2>
+            <SubHeading className="text-center mb-4">Shop by Category</SubHeading>
             <div className="woocommerce">
                 <ul className="products row mx-auto">
                     <li className="product-category product first col-md-4">
                         <Link as={`/`} href={`/`}>
                             <a className="">
-                                <img
+                                <NextImage
                                     src="https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/accessories.jpg"
                                     alt="Accessories"
                                     width="324"
@@ -17,16 +19,16 @@ const Categories = () => {
                                     srcSet="https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/accessories.jpg 801w, https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/accessories-150x150.jpg 150w, https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/accessories-300x300.jpg 300w, https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/accessories-768x768.jpg 768w"
                                     sizes="(max-width: 324px) 100vw, 324px"
                                 />
-                                <h2 className="woocommerce-loop-category__title">
+                                <SubHeading className="woocommerce-loop-category__title">
                                     Accessories <mark className="count">(4)</mark>
-                                </h2>
+                                </SubHeading>
                             </a>
                         </Link>
                     </li>
                     <li className="product-category product col-md-4">
                         <Link as={`/`} href={`/`}>
                             <a className="">
-                                <img
+                                <NextImage
                                     src="https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/hoodies.jpg"
                                     alt="Hoodies"
                                     width="324"
@@ -34,16 +36,16 @@ const Categories = () => {
                                     srcSet="https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/hoodies.jpg 800w, https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/hoodies-150x150.jpg 150w, https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/hoodies-300x300.jpg 300w, https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/hoodies-768x768.jpg 768w"
                                     sizes="(max-width: 324px) 100vw, 324px"
                                 />
-                                <h2 className="woocommerce-loop-category__title">
+                                <SubHeading className="woocommerce-loop-category__title">
                                     Hoodies <mark className="count">(4)</mark>
-                                </h2>
+                                </SubHeading>
                             </a>
                         </Link>
                     </li>
                     <li className="product-category product last col-md-4">
                         <Link as={`/`} href={`/`}>
                             <a className="">
-                                <img
+                                <NextImage
                                     src="https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/tshirts.jpg"
                                     alt="Tshirts"
                                     width="324"
@@ -51,9 +53,9 @@ const Categories = () => {
                                     srcSet="https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/tshirts.jpg 801w, https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/tshirts-150x150.jpg 150w, https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/tshirts-300x300.jpg 300w, https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/tshirts-768x768.jpg 768w"
                                     sizes="(max-width: 324px) 100vw, 324px"
                                 />
-                                <h2 className="woocommerce-loop-category__title">
+                                <SubHeading className="woocommerce-loop-category__title">
                                     Tshirts <mark className="count">(4)</mark>
-                                </h2>
+                                </SubHeading>
                             </a>
                         </Link>
                     </li>
diff --git a/src/components/home/Hero.js b/src/components/home/Hero.js
index be91cf6..336f112 100644
--- a/src/components/home/Hero.js
+++ b/src/components/home/Hero.js
@@ -1,7 +1,8 @@
+import { Heading } from '../typography';
 const Hero = () => (
     <div className="wp-block-cover alignfull hero text-center mb-5">
         <div className="wp-block-cover__inner-container">
-            <h1>Welcome</h1>
+            <Heading>Welcome</Heading>
             <p className="has-text-color">Welcome to the WP Decoupled Demo page.</p>
             <p className="has-text-color">
                 This is a frontend for a WooCommerce Store created with Next.js and WPGraphQL.
@@ -10,4 +11,4 @@ const Hero = () => (
     </div>
 );
 
-export default Hero;
+export default Hero;
\ No newline at end of file
diff --git a/src/components/image/defaultImg.js b/src/components/image/defaultImg.js
new file mode 100644
index 0000000..3660288
--- /dev/null
+++ b/src/components/image/defaultImg.js
@@ -0,0 +1,2 @@
+export const defaultImg =
+  "default image link";
\ No newline at end of file
diff --git a/src/components/image/index.js b/src/components/image/index.js
new file mode 100644
index 0000000..1e62b65
--- /dev/null
+++ b/src/components/image/index.js
@@ -0,0 +1,29 @@
+import Image from 'next/image'
+import { defaultImg } from './defaultImg';
+
+const NextImage = (props) => {
+
+    const { 
+        className,
+        src,
+        srcSet,
+        alt,
+        width,
+        height,
+        sizes
+    } = props;
+    const imgSrc = typeof src === 'string' ? src || defaultImg : defaultImg;
+
+    return (
+        <Image 
+            className={className}
+            src={imgSrc}
+            alt={alt}
+            width={width}
+            height={height}
+            sizes={sizes} 
+        />
+    );
+}
+
+export default NextImage;
\ No newline at end of file
diff --git a/src/components/typography/index.js b/src/components/typography/index.js
new file mode 100644
index 0000000..c010008
--- /dev/null
+++ b/src/components/typography/index.js
@@ -0,0 +1,20 @@
+export const Heading = (props) => {
+    const { className, children } = props;
+    return (
+        <h1 className={className}>{children}</h1>
+    )
+}
+
+export const SubHeading = (props) => {
+    const { className, children } = props;
+    return (
+        <h2 className={className}>{children}</h2>
+    )
+}
+
+export const Paragraph = (props) => {
+    const { className, children } = props;
+    return (
+        <p className={className}>{children}</p>
+    )
+}
\ No newline at end of file

From 3640fac98261b1f1573822dfb5d2fec4720752b6 Mon Sep 17 00:00:00 2001
From: bilal <bilal89dif@gmail.com>
Date: Mon, 18 Jan 2021 16:20:34 +0100
Subject: [PATCH 2/5] add nextjs image domains

---
 next.config.js                              | 2 +-
 pages/index.js                              | 4 ++--
 pages/product/[slug].js                     | 2 ++
 src/components/cart/cart-page/CartItem.js   | 3 ++-
 src/components/checkout/CheckoutCartItem.js | 3 ++-
 5 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/next.config.js b/next.config.js
index b8db605..6f14b14 100644
--- a/next.config.js
+++ b/next.config.js
@@ -23,7 +23,7 @@ module.exports = withOffline(
             globDirectory: '.',
             target: 'serverless',
             images: {
-                domains: ['mylab.local'] // whatever port your backend runs on
+                domains: [process.env.SITE_DOMAIN] // whatever port your backend runs on
             }
         })
     )
diff --git a/pages/index.js b/pages/index.js
index a3a625d..524df95 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -28,8 +28,8 @@ const NewProducts = ({ products }) => {
                                                 className="product-image"
                                                 src={item.image.sourceUrl}
                                                 alt={item.name}
-                                                width="250"
-                                                height="150"
+                                                width="240"
+                                                height="240"
                                             />
                                             <h5 className="product-name">{item.name}</h5>
                                             <Paragraph className="product-price">{item.price}</Paragraph>
diff --git a/pages/product/[slug].js b/pages/product/[slug].js
index 1b550f1..997f7a3 100644
--- a/pages/product/[slug].js
+++ b/pages/product/[slug].js
@@ -24,6 +24,8 @@ const Product = (props) => {
                                 src={product?.image?.sourceUrl}
                                 srcSet={product?.image?.srcSet}
                                 alt={product?.name}
+                                width="240"
+                                height="240"
                             />
                         </div>
                         <div className="col-md-6">
diff --git a/src/components/cart/cart-page/CartItem.js b/src/components/cart/cart-page/CartItem.js
index 4be9b5b..259c67b 100644
--- a/src/components/cart/cart-page/CartItem.js
+++ b/src/components/cart/cart-page/CartItem.js
@@ -42,10 +42,11 @@ const CartItem = ({ item, handleRemoveProductClick, setCart }) => {
             </th>
             <td className="wd-cart-element">
                 <NextImage
-                    width="64"
                     src={item.image.sourceUrl}
                     srcSet={item.image.srcSet}
                     alt={item.image.title}
+                    width="64"
+                    height="64"
                 />
             </td>
             <td className="wd-cart-element">{item.name}</td>
diff --git a/src/components/checkout/CheckoutCartItem.js b/src/components/checkout/CheckoutCartItem.js
index e2eb358..9ca0667 100644
--- a/src/components/checkout/CheckoutCartItem.js
+++ b/src/components/checkout/CheckoutCartItem.js
@@ -5,10 +5,11 @@ const CheckoutCartItem = ({ item }) => {
         <tr className="wd-cart-item" key={item.databaseId}>
             <td className="wd-cart-element">
                 <NextImage
-                    width="64"
                     src={item.image.sourceUrl}
                     srcSet={item.image.srcSet}
                     alt={item.image.title}
+                    width="64"
+                    height="64"
                 />
             </td>
             <td className="wd-cart-element">{item.name}</td>

From eb31422c9c69fb880447d0e3bcfaee00f4fa9d26 Mon Sep 17 00:00:00 2001
From: bilal <bilal89dif@gmail.com>
Date: Tue, 19 Jan 2021 09:58:15 +0100
Subject: [PATCH 3/5] Add optional chaining + fix some syntax

---
 pages/index.js                              | 14 +++++++-------
 pages/my-account.js                         |  6 +++---
 pages/product/[slug].js                     |  3 +--
 src/components/cart/AddToCartButton.js      |  2 +-
 src/components/cart/CartIcon.js             |  8 ++++----
 src/components/cart/cart-page/CartBlocks.js | 10 +++++-----
 src/components/cart/cart-page/CartItem.js   | 17 ++++++++---------
 src/components/checkout/CheckoutCartItem.js | 11 +++++------
 src/components/checkout/YourOrder.js        | 10 +++++-----
 src/components/image/index.js               |  1 +
 src/components/layouts/Menu.js              |  2 +-
 src/components/layouts/Nav.js               |  2 +-
 src/components/typography/index.js          |  9 +++++++++
 13 files changed, 51 insertions(+), 44 deletions(-)

diff --git a/pages/index.js b/pages/index.js
index 524df95..4b9cac1 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -22,29 +22,29 @@ const NewProducts = ({ products }) => {
                             undefined !== item && 'GroupProduct' !== item.__typename ? (
                                 <div className="product-container col-md-3 mb-5" key={item.id}>
                                     {/* @TODO need to get rid of using databseId here. */}
-                                    <Link href={`/product/${item.slug}`}>
+                                    <Link href={`/product/${item?.slug}`}>
                                         <a>
                                             <NextImage
                                                 className="product-image"
-                                                src={item.image.sourceUrl}
-                                                alt={item.name}
+                                                src={item?.image?.sourceUrl}
+                                                alt={item?.name}
                                                 width="240"
                                                 height="240"
                                             />
-                                            <h5 className="product-name">{item.name}</h5>
-                                            <Paragraph className="product-price">{item.price}</Paragraph>
+                                            <h5 className="product-name">{item?.name}</h5>
+                                            <Paragraph className="product-price">{item?.price}</Paragraph>
                                         </a>
                                     </Link>
                                     <AddToCartButton product={item} />
                                 </div>
                             ) : (
-                                ''
+                                null
                             )
                         )}
                     </div>
                 </div>
             ) : (
-                ''
+                null
             )}
         </div>
     );
diff --git a/pages/my-account.js b/pages/my-account.js
index 42519fc..c9e619d 100644
--- a/pages/my-account.js
+++ b/pages/my-account.js
@@ -48,16 +48,16 @@ const MyAccount = () => {
 
                     <div className="wpd-my-account__main">
                         <div id="dashboard">
-                            {userData.user.nicename ? <h6>Howdy {userData.user.nicename}!</h6> : ''}
+                            {userData.user.nicename ? <h6>Howdy {userData.user.nicename}!</h6> : null}
                             <h5 className="mt-3">Account Details</h5>
                             {userData.user.email ?
-                                <Paragraph>Email: {userData.user.email}</Paragraph> : ''
+                                <Paragraph>Email: {userData.user.email}</Paragraph> : null
                             }
                         </div>
                     </div>
                 </div>
             ) : (
-                ''
+                null
             )}
         </Layout>
     );
diff --git a/pages/product/[slug].js b/pages/product/[slug].js
index 997f7a3..ea40801 100644
--- a/pages/product/[slug].js
+++ b/pages/product/[slug].js
@@ -22,7 +22,6 @@ const Product = (props) => {
                             <NextImage
                                 className="product-image"
                                 src={product?.image?.sourceUrl}
-                                srcSet={product?.image?.srcSet}
                                 alt={product?.name}
                                 width="240"
                                 height="240"
@@ -48,7 +47,7 @@ const Product = (props) => {
                     </div>
                 </div>
             ) : (
-                ''
+                null
             )}
         </Layout>
     );
diff --git a/src/components/cart/AddToCartButton.js b/src/components/cart/AddToCartButton.js
index a3279e4..c5006ea 100644
--- a/src/components/cart/AddToCartButton.js
+++ b/src/components/cart/AddToCartButton.js
@@ -51,7 +51,7 @@ const AddToCartButton = (props) => {
                     <button className="wd-view-cart-btn btn btn-secondary">View Cart</button>
                 </Link>
             ) : (
-                ''
+                null
             )}
         </>
     );
diff --git a/src/components/cart/CartIcon.js b/src/components/cart/CartIcon.js
index 0969d6d..891c538 100644
--- a/src/components/cart/CartIcon.js
+++ b/src/components/cart/CartIcon.js
@@ -4,8 +4,8 @@ import Link from 'next/link';
 
 const CartIcon = () => {
     const [cart] = useContext(AppContext);
-    const productsCount = null !== cart ? cart.totalProductsCount : '';
-    const totalPrice = null !== cart ? cart.totalProductsPrice : '';
+    const productsCount = cart?.totalProductsCount ?? 0;
+    const totalPrice = cart?.totalProductsPrice ?? 0;
 
     return (
         <>
@@ -15,14 +15,14 @@ const CartIcon = () => {
                         {totalPrice ? (
                             <span className="wp-cart-price mr-2">${totalPrice.toFixed(2)}</span>
                         ) : (
-                            ''
+                            null
                         )}
                         <span className="wd-cart-icon-container">
                             <i className="fas fa-shopping-cart wd-cart-icon" />
                             {productsCount ? (
                                 <span className="wp-cart-count">{productsCount}</span>
                             ) : (
-                                ''
+                                null
                             )}
                         </span>
                     </div>
diff --git a/src/components/cart/cart-page/CartBlocks.js b/src/components/cart/cart-page/CartBlocks.js
index 47a233d..c26e6ba 100644
--- a/src/components/cart/cart-page/CartBlocks.js
+++ b/src/components/cart/cart-page/CartBlocks.js
@@ -46,10 +46,10 @@ const CartBlocks = () => {
                             </tr>
                         </thead>
                         <tbody>
-                            {cart.products.length &&
+                            {cart?.products.length &&
                                 cart.products.map((item) => (
                                     <CartItem
-                                        key={item.databaseId}
+                                        key={item?.databaseId}
                                         item={item}
                                         handleRemoveProductClick={handleRemoveProductClick}
                                         setCart={setCart}
@@ -67,13 +67,13 @@ const CartBlocks = () => {
                                     <tr className="table-light">
                                         <td className="wd-cart-element-total">Subtotal</td>
                                         <td className="wd-cart-element-amt">
-                                            ${cart.totalProductsPrice.toFixed(2)}
+                                            ${cart?.totalProductsPrice?.toFixed(2)}
                                         </td>
                                     </tr>
                                     <tr className="table-light">
                                         <td className="wd-cart-element-total">Total</td>
                                         <td className="wd-cart-element-amt">
-                                            ${cart.totalProductsPrice.toFixed(2)}
+                                            ${cart?.totalProductsPrice?.toFixed(2)}
                                         </td>
                                     </tr>
                                 </tbody>
@@ -90,7 +90,7 @@ const CartBlocks = () => {
                     </div>
                 </div>
             ) : (
-                ''
+                null
             )}
         </div>
     );
diff --git a/src/components/cart/cart-page/CartItem.js b/src/components/cart/cart-page/CartItem.js
index 259c67b..b78bdae 100644
--- a/src/components/cart/cart-page/CartItem.js
+++ b/src/components/cart/cart-page/CartItem.js
@@ -3,7 +3,7 @@ import { updateCart } from '../../../utils/cart-functions';
 import NextImage from '../../image';
 
 const CartItem = ({ item, handleRemoveProductClick, setCart }) => {
-    const [productCount, setProductCount] = useState(item.qty);
+    const [productCount, setProductCount] = useState(item?.qty ?? 0);
 
     /*
      * When user changes the qty from product input update the cart in localStorage
@@ -32,25 +32,24 @@ const CartItem = ({ item, handleRemoveProductClick, setCart }) => {
     };
 
     return (
-        <tr className="wd-cart-item" key={item.databaseId}>
+        <tr className="wd-cart-item" key={item?.databaseId}>
             <th className="wd-cart-element wd-cart-el-close">
                 <span
                     className="wd-cart-close-icon"
-                    onClick={(event) => handleRemoveProductClick(event, item.databaseId)}>
+                    onClick={(event) => handleRemoveProductClick(event, item?.databaseId)}>
                     <i className="fas fa-times-circle" />
                 </span>
             </th>
             <td className="wd-cart-element">
                 <NextImage
-                    src={item.image.sourceUrl}
-                    srcSet={item.image.srcSet}
-                    alt={item.image.title}
+                    src={item?.image?.sourceUrl}
+                    alt={item?.image?.title}
                     width="64"
                     height="64"
                 />
             </td>
-            <td className="wd-cart-element">{item.name}</td>
-            <td className="wd-cart-element">${item.price.toFixed(2)}</td>
+            <td className="wd-cart-element">{item?.name}</td>
+            <td className="wd-cart-element">${item?.price?.toFixed(2)}</td>
 
             {/* Qty Input */}
             <td className="wd-cart-element">
@@ -62,7 +61,7 @@ const CartItem = ({ item, handleRemoveProductClick, setCart }) => {
                     onChange={handleQtyChange}
                 />
             </td>
-            <td className="wd-cart-element">{item.totalPrice.toFixed(2)}</td>
+            <td className="wd-cart-element">{item?.totalPrice?.toFixed(2)}</td>
         </tr>
     );
 };
diff --git a/src/components/checkout/CheckoutCartItem.js b/src/components/checkout/CheckoutCartItem.js
index 9ca0667..66f89a2 100644
--- a/src/components/checkout/CheckoutCartItem.js
+++ b/src/components/checkout/CheckoutCartItem.js
@@ -2,18 +2,17 @@ import NextImage from '../image';
 
 const CheckoutCartItem = ({ item }) => {
     return (
-        <tr className="wd-cart-item" key={item.databaseId}>
+        <tr className="wd-cart-item" key={item?.databaseId}>
             <td className="wd-cart-element">
                 <NextImage
-                    src={item.image.sourceUrl}
-                    srcSet={item.image.srcSet}
-                    alt={item.image.title}
+                    src={item?.image?.sourceUrl}
+                    alt={item?.image?.title}
                     width="64"
                     height="64"
                 />
             </td>
-            <td className="wd-cart-element">{item.name}</td>
-            <td className="wd-cart-element">${item.totalPrice.toFixed(2)}</td>
+            <td className="wd-cart-element">{item?.name}</td>
+            <td className="wd-cart-element">${item?.totalPrice?.toFixed(2)}</td>
         </tr>
     );
 };
diff --git a/src/components/checkout/YourOrder.js b/src/components/checkout/YourOrder.js
index 714784a..52a2bb0 100644
--- a/src/components/checkout/YourOrder.js
+++ b/src/components/checkout/YourOrder.js
@@ -20,30 +20,30 @@ const YourOrder = ({ cart }) => {
                             </tr>
                         </thead>
                         <tbody>
-                            {cart.products.length &&
+                            {cart?.products.length &&
                                 cart.products.map((item) => (
-                                    <CheckoutCartItem key={item.databaseId} item={item} />
+                                    <CheckoutCartItem key={item?.databaseId} item={item} />
                                 ))}
                             {/*Total*/}
                             <tr className="">
                                 <td className="" />
                                 <td className="wd-checkout-total">Subtotal</td>
                                 <td className="wd-checkout-total">
-                                    ${cart.totalProductsPrice.toFixed(2)}
+                                    ${cart?.totalProductsPrice?.toFixed(2)}
                                 </td>
                             </tr>
                             <tr className="">
                                 <td className="" />
                                 <td className="wd-checkout-total">Total</td>
                                 <td className="wd-checkout-total">
-                                    ${cart.totalProductsPrice.toFixed(2)}
+                                    ${cart?.totalProductsPrice?.toFixed(2)}
                                 </td>
                             </tr>
                         </tbody>
                     </table>
                 </Fragment>
             ) : (
-                ''
+                null
             )}
         </Fragment>
     );
diff --git a/src/components/image/index.js b/src/components/image/index.js
index 1e62b65..1c146a3 100644
--- a/src/components/image/index.js
+++ b/src/components/image/index.js
@@ -18,6 +18,7 @@ const NextImage = (props) => {
         <Image 
             className={className}
             src={imgSrc}
+            srcSet={srcSet}
             alt={alt}
             width={width}
             height={height}
diff --git a/src/components/layouts/Menu.js b/src/components/layouts/Menu.js
index f4e1166..880a0eb 100644
--- a/src/components/layouts/Menu.js
+++ b/src/components/layouts/Menu.js
@@ -42,7 +42,7 @@ const Menu = () => {
                     </a>
                 </li>
             ) : (
-                ''
+                null
             )}
         </ul>
     );
diff --git a/src/components/layouts/Nav.js b/src/components/layouts/Nav.js
index 77b6ddb..702e90b 100644
--- a/src/components/layouts/Nav.js
+++ b/src/components/layouts/Nav.js
@@ -9,7 +9,7 @@ const Nav = () => {
                 <a className="navbar-brand">WP Decoupled</a>
             </Link>
             {/* @TODO Need to add support for login and registration api for latest version of wp-graphql-woocommerce plugin */}
-            {/*<Menu/>*/}
+            <Menu/>
             <button
                 className="navbar-toggler"
                 type="button"
diff --git a/src/components/typography/index.js b/src/components/typography/index.js
index c010008..8ce2c3e 100644
--- a/src/components/typography/index.js
+++ b/src/components/typography/index.js
@@ -1,5 +1,8 @@
 export const Heading = (props) => {
     const { className, children } = props;
+
+    if (!children) return null;
+
     return (
         <h1 className={className}>{children}</h1>
     )
@@ -7,6 +10,9 @@ export const Heading = (props) => {
 
 export const SubHeading = (props) => {
     const { className, children } = props;
+
+    if (!children) return null;
+
     return (
         <h2 className={className}>{children}</h2>
     )
@@ -14,6 +20,9 @@ export const SubHeading = (props) => {
 
 export const Paragraph = (props) => {
     const { className, children } = props;
+
+    if (!children) return null;
+
     return (
         <p className={className}>{children}</p>
     )

From 1f8986d5874045951733ff12852cb970193cb3fd Mon Sep 17 00:00:00 2001
From: bilal <bilal89dif@gmail.com>
Date: Wed, 20 Jan 2021 09:15:17 +0100
Subject: [PATCH 4/5] Add Next image domains

---
 next.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/next.config.js b/next.config.js
index 6f14b14..6a31315 100644
--- a/next.config.js
+++ b/next.config.js
@@ -23,7 +23,7 @@ module.exports = withOffline(
             globDirectory: '.',
             target: 'serverless',
             images: {
-                domains: [process.env.SITE_DOMAIN] // whatever port your backend runs on
+                domains: [process.env.SITE_URL] // whatever port your backend runs on
             }
         })
     )

From 02f67291893d9c062dc46176652982494fab1748 Mon Sep 17 00:00:00 2001
From: bilal <bilal89dif@gmail.com>
Date: Wed, 20 Jan 2021 09:19:47 +0100
Subject: [PATCH 5/5] remove https from domains

---
 next.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/next.config.js b/next.config.js
index 6a31315..a258552 100644
--- a/next.config.js
+++ b/next.config.js
@@ -23,7 +23,7 @@ module.exports = withOffline(
             globDirectory: '.',
             target: 'serverless',
             images: {
-                domains: [process.env.SITE_URL] // whatever port your backend runs on
+                domains: [process.env.SITE_URL.replace(/^https?:\/\//,'')] // whatever port your backend runs on
             }
         })
     )