diff --git a/next.config.js b/next.config.js index 4b8c4f6..a258552 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: [process.env.SITE_URL.replace(/^https?:\/\//,'')] // 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 (
-

Checkout Page.

+ + Checkout Page. +
diff --git a/pages/index.js b/pages/index.js index 1c1bc97..4b9cac1 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 (
-

Products

+ + Products + {products.length ? (
@@ -17,30 +22,29 @@ const NewProducts = ({ products }) => { undefined !== item && 'GroupProduct' !== item.__typename ? (
{/* @TODO need to get rid of using databseId here. */} - + - - {item.name} -
{item.name}
-

{item.price}

- + +
{item?.name}
+ {item?.price}
) : ( - '' + null ) )}
) : ( - '' + null )}
); 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 = () => {
{/* Title */} -

Login

+ Login {/* Error Message */} {'' !== errorMessage diff --git a/pages/my-account.js b/pages/my-account.js index a0fa891..c9e619d 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. * @@ -48,14 +48,16 @@ const MyAccount = () => {
- {userData.user.nicename ?
Howdy {userData.user.nicename}!
: ''} + {userData.user.nicename ?
Howdy {userData.user.nicename}!
: null}
Account Details
- {userData.user.email ?

Email: {userData.user.email}

: ''} + {userData.user.email ? + Email: {userData.user.email} : null + }
) : ( - '' + null )} ); diff --git a/pages/product/[slug].js b/pages/product/[slug].js index 9c812ae..ea40801 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,15 +19,18 @@ const Product = (props) => {
- {product?.name}
-

{product?.name}

+ + {product?.name} +

{product?.price} @@ -42,7 +47,7 @@ const Product = (props) => {

) : ( - '' + null )} ); 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 = () => {
{/* Title */} -

Register

+ Register {/* Error Message */} {'' !== errorMessage 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) => { ) : ( - '' + 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 ? ( ${totalPrice.toFixed(2)} ) : ( - '' + null )} {productsCount ? ( {productsCount} ) : ( - '' + null )}
diff --git a/src/components/cart/cart-page/CartBlocks.js b/src/components/cart/cart-page/CartBlocks.js index d2f0971..c26e6ba 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 = () => {
{cart ? (
-

Cart

+ Cart @@ -45,10 +46,10 @@ const CartBlocks = () => { - {cart.products.length && + {cart?.products.length && cart.products.map((item) => ( { {/*Cart Total*/}
-

Cart Totals

+ Cart Totals
@@ -89,7 +90,7 @@ const CartBlocks = () => { ) : ( - '' + null )} ); diff --git a/src/components/cart/cart-page/CartItem.js b/src/components/cart/cart-page/CartItem.js index 944d91e..b78bdae 100644 --- a/src/components/cart/cart-page/CartItem.js +++ b/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 ( - + - - + + {/* Qty Input */} - + ); }; 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? -

Additional Information

+ Additional Information {/* Order Notes */}
diff --git a/src/components/checkout/CheckoutCartItem.js b/src/components/checkout/CheckoutCartItem.js index eb8fed8..66f89a2 100644 --- a/src/components/checkout/CheckoutCartItem.js +++ b/src/components/checkout/CheckoutCartItem.js @@ -1,16 +1,18 @@ +import NextImage from '../image'; + const CheckoutCartItem = ({ item }) => { return ( -
+ - - + + ); }; 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 = () => {
{/*Billing Details*/}
-

Billing Details

+ Billing Details
{/* Order & Payments*/}
{/* Order*/} -

Your Order

+ Your Order {/*Payment*/} 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 }) => {
- {cart.products.length && + {cart?.products.length && cart.products.map((item) => ( - + ))} {/*Total*/}
Subtotal - ${cart.totalProductsPrice.toFixed(2)} + ${cart?.totalProductsPrice?.toFixed(2)}
Total - ${cart.totalProductsPrice.toFixed(2)} + ${cart?.totalProductsPrice?.toFixed(2)}
handleRemoveProductClick(event, item.databaseId)}> + onClick={(event) => handleRemoveProductClick(event, item?.databaseId)}> - {item?.image?.title} {item.name}${item.price.toFixed(2)}{item?.name}${item?.price?.toFixed(2)} @@ -60,7 +61,7 @@ const CartItem = ({ item, handleRemoveProductClick, setCart }) => { onChange={handleQtyChange} /> {item.totalPrice.toFixed(2)}{item?.totalPrice?.toFixed(2)}
- {item?.image?.title} {item.name}${item.totalPrice.toFixed(2)}{item?.name}${item?.totalPrice?.toFixed(2)}
Subtotal - ${cart.totalProductsPrice.toFixed(2)} + ${cart?.totalProductsPrice?.toFixed(2)}
Total - ${cart.totalProductsPrice.toFixed(2)} + ${cart?.totalProductsPrice?.toFixed(2)}
) : ( - '' + null )} ); 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 (
-

Shop by Category

+ Shop by Category
); 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 = () => { WP Decoupled {/* @TODO Need to add support for login and registration api for latest version of wp-graphql-woocommerce plugin */} - {/**/} +