Feat/create typography components + nextjs image component

next.config.js

@@ -21,7 +21,10 @@ module.exports = withOffline(
             generateSw: false,
             globPatterns: ['static/**/*'],
             globDirectory: '.',
-            target: 'serverless'
+            target: 'serverless',
+            images: {
+                domains: [process.env.SITE_URL.replace(/^https?:\/\//,'')] // whatever port your backend runs on
+            }
         })
     )
 );

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>

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">
@@ -17,30 +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>
-                                            <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="240"
+                                                height="240"
+                                            />
+                                            <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>
     );

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

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.
  *
@@ -48,14 +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 ? <p>Email: {userData.user.email}</p> : ''}
+                            {userData.user.email ?
+                                <Paragraph>Email: {userData.user.email}</Paragraph> : null
+                            }
                         </div>
                     </div>
                 </div>
             ) : (
-                ''
+                null
             )}
         </Layout>
     );

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,15 +19,18 @@ 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}
                                 alt={product?.name}
+                                width="240"
+                                height="240"
                             />
                         </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}
@@ -42,7 +47,7 @@ const Product = (props) => {
                     </div>
                 </div>
             ) : (
-                ''
+                null
             )}
         </Layout>
     );

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

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
             )}
         </>
     );

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>

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">
@@ -45,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}
@@ -60,19 +61,19 @@ 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">
                                         <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>
@@ -89,7 +90,7 @@ const CartBlocks = () => {
                     </div>
                 </div>
             ) : (
-                ''
+                null
             )}
         </div>
     );

src/components/cart/cart-page/CartItem.js

@@ -1,8 +1,9 @@
 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);
+    const [productCount, setProductCount] = useState(item?.qty ?? 0);
 
     /*
      * When user changes the qty from product input update the cart in localStorage
@@ -31,24 +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">
-                <img
+                <NextImage
+                    src={item?.image?.sourceUrl}
+                    alt={item?.image?.title}
                     width="64"
-                    src={item.image.sourceUrl}
-                    srcSet={item.image.srcSet}
-                    alt={item.image.title}
+                    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">
@@ -60,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>
     );
 };

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>

src/components/checkout/CheckoutCartItem.js

@@ -1,16 +1,18 @@
+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">
-                <img
+                <NextImage
+                    src={item?.image?.sourceUrl}
+                    alt={item?.image?.title}
                     width="64"
-                    src={item.image.sourceUrl}
-                    srcSet={item.image.srcSet}
-                    alt={item.image.title}
+                    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>
     );
 };