From 44eed42e36d94651c463df8d3ce7fb32b8764654 Mon Sep 17 00:00:00 2001 From: Imran Date: Sat, 8 May 2021 22:27:34 +0530 Subject: [PATCH] Update add to cart --- src/components/cart/AddToCartButton.js | 186 +++++++++++------------- src/components/checkout/CheckoutForm.js | 2 +- src/components/checkout/OrderSuccess.js | 2 +- src/mutations/checkout.js | 3 +- src/utils/cart.js | 37 +++++ 5 files changed, 125 insertions(+), 105 deletions(-) create mode 100644 src/utils/cart.js diff --git a/src/components/cart/AddToCartButton.js b/src/components/cart/AddToCartButton.js index 38ba4dda..c101bfe3 100644 --- a/src/components/cart/AddToCartButton.js +++ b/src/components/cart/AddToCartButton.js @@ -1,119 +1,101 @@ -import { useState, useContext } from "react"; -import { useQuery, useMutation } from '@apollo/client'; -import { AppContext } from "../context/AppContext"; -import { getFormattedCart } from "../../functions"; +import {useState, useContext} from "react"; +import {useQuery, useMutation} from '@apollo/client'; import Link from "next/link"; -import { v4 } from 'uuid'; +import {v4} from 'uuid'; +import cx from 'classnames'; + +import {AppContext} from "../context/AppContext"; +import {getFormattedCart} from "../../functions"; import GET_CART from "../../queries/get-cart"; import ADD_TO_CART from "../../mutations/add-to-cart"; -const AddToCart = ( props ) => { - - const { product } = props; - - const productQryInput = { - clientMutationId: v4(), // Generate a unique id. - productId: product.productId, - }; +const AddToCart = (props) => { - const [ cart, setCart ] = useContext( AppContext ); - const [ showViewCart, setShowViewCart ] = useState( false ); - const [ requestError, setRequestError ] = useState( null ); + const {product} = props; - /** - * @TODO will update this in future, when required. - * Handles adding items to the cart. - * - * @return {void} - */ - // const handleAddToCartLocalStorage = () => { - // - // // If component is rendered client side. - // if ( process.browser ) { - // - // let existingCart = localStorage.getItem( 'woo-next-cart' ); - // - // // If cart has item(s) already, update existing or add new item. - // if ( existingCart ) { - // - // existingCart = JSON.parse( existingCart ); - // - // const qtyToBeAdded = 1; - // - // const updatedCart = updateCart( existingCart, product, qtyToBeAdded ); - // - // setCart( updatedCart ); - // - // } else { - // /** - // * If No Items in the cart, create an empty array and add one. - // * @type {Array} - // */ - // const newCart = addFirstProduct( product ); - // setCart( newCart ); - // } - // - // // Show View Cart Button - // setShowViewCart( true ) - // } - // }; + const productQryInput = { + clientMutationId: v4(), // Generate a unique id. + productId: product.productId, + }; - // Get Cart Data. - const { data, refetch } = useQuery( GET_CART, { - notifyOnNetworkStatusChange: true, - onCompleted: () => { + const [cart, setCart] = useContext(AppContext); + const [showViewCart, setShowViewCart] = useState(false); + const [requestError, setRequestError] = useState(null); - // Update cart in the localStorage. - const updatedCart = getFormattedCart( data ); - localStorage.setItem( 'woo-next-cart', JSON.stringify( updatedCart ) ); + // Get Cart Data. + const {data, refetch} = useQuery(GET_CART, { + notifyOnNetworkStatusChange: true, + onCompleted: () => { - // Update cart data in React Context. - setCart( updatedCart ); - } - } ); + // Update cart in the localStorage. + const updatedCart = getFormattedCart(data); + localStorage.setItem('woo-next-cart', JSON.stringify(updatedCart)); - // Add to Cart Mutation. - const [ addToCart, { data: addToCartRes, loading: addToCartLoading, error: addToCartError }] = useMutation( ADD_TO_CART, { - variables: { - input: productQryInput, - }, - onCompleted: async () => { - // On Success: - // 1. Make the GET_CART query to update the cart with new values in React context. - await refetch(); + // Update cart data in React Context. + setCart(updatedCart); + } + }); - // 2. Show View Cart Button - setShowViewCart( true ) - }, - onError: ( error ) => { - if ( error ) { - setRequestError( error?.graphQLErrors?.[ 0 ]?.message ?? ''); - } - } - } ); + // Add to Cart Mutation. + const [addToCart, { + data: addToCartRes, + loading: addToCartLoading, + error: addToCartError + }] = useMutation(ADD_TO_CART, { + variables: { + input: productQryInput, + }, + onCompleted: () => { + // On Success: + // 1. Make the GET_CART query to update the cart with new values in React context. + refetch(); - const handleAddToCartClick = () => { - // handleAddToCartLocalStorage(); - setRequestError( null ); - addToCart(); - }; + // 2. Show View Cart Button + setShowViewCart(true) + }, + onError: (error) => { + if (error) { + setRequestError(error?.graphQLErrors?.[0]?.message ?? ''); + } + } + }); - return ( -
- {/* Add To Cart Loading*/} - {addToCartLoading &&

Adding to Cart...

} + const handleAddToCartClick = async () => { + setRequestError(null); + await addToCart(); + }; - {/* Check if its an external product then put its external buy link */} - { "ExternalProduct" === product.__typename ? ( - Buy now - ) : - - } - { showViewCart ? ( - - ) : '' } -
- ); + return ( +
+ {/* Check if its an external product then put its external buy link */} + {"ExternalProduct" === product.__typename ? ( + + Buy now + + ) : + + } + {showViewCart ? ( + + + + ) : ''} +
+ ); }; export default AddToCart; diff --git a/src/components/checkout/CheckoutForm.js b/src/components/checkout/CheckoutForm.js index 6980016c..0d656811 100644 --- a/src/components/checkout/CheckoutForm.js +++ b/src/components/checkout/CheckoutForm.js @@ -258,7 +258,7 @@ const CheckoutForm = ({countriesData}) => { ) : ''} - {/* Show message if Order Sucess*/} + {/* Show message if Order Success*/} ); diff --git a/src/components/checkout/OrderSuccess.js b/src/components/checkout/OrderSuccess.js index 3f3424a4..fd2b605b 100644 --- a/src/components/checkout/OrderSuccess.js +++ b/src/components/checkout/OrderSuccess.js @@ -14,7 +14,7 @@ const OrderSuccess = ( props ) => {
{ 'success' === responseData.result ? (
-

Order no: { responseData.order.orderId }

+

Order no: { responseData.order.orderNumber }

Status : { responseData.order.status }

): ''} diff --git a/src/mutations/checkout.js b/src/mutations/checkout.js index 20b5ea9d..788afecf 100644 --- a/src/mutations/checkout.js +++ b/src/mutations/checkout.js @@ -7,12 +7,13 @@ mutation CHECKOUT_MUTATION( $input: CheckoutInput! ) { order { id orderKey + orderNumber + status refunds { nodes { amount } } - status } result redirect diff --git a/src/utils/cart.js b/src/utils/cart.js new file mode 100644 index 00000000..478d97f8 --- /dev/null +++ b/src/utils/cart.js @@ -0,0 +1,37 @@ +/** + * @TODO will update this in future, when required. + * Handles adding items to the cart. + * + * @return {void} + */ +// const handleAddToCartLocalStorage = () => { +// +// // If component is rendered client side. +// if ( process.browser ) { +// +// let existingCart = localStorage.getItem( 'woo-next-cart' ); +// +// // If cart has item(s) already, update existing or add new item. +// if ( existingCart ) { +// +// existingCart = JSON.parse( existingCart ); +// +// const qtyToBeAdded = 1; +// +// const updatedCart = updateCart( existingCart, product, qtyToBeAdded ); +// +// setCart( updatedCart ); +// +// } else { +// /** +// * If No Items in the cart, create an empty array and add one. +// * @type {Array} +// */ +// const newCart = addFirstProduct( product ); +// setCart( newCart ); +// } +// +// // Show View Cart Button +// setShowViewCart( true ) +// } +// };