From f282b00a2a4b8762a50eebf68d6230ac8369bf3b Mon Sep 17 00:00:00 2001 From: w3bdesign <45217974+w3bdesign@users.noreply.github.com> Date: Sun, 15 Sep 2024 03:59:49 +0200 Subject: [PATCH 01/17] Update CartContents.component.tsx --- .../Cart/CartContents.component.tsx | 190 +++++++----------- 1 file changed, 76 insertions(+), 114 deletions(-) diff --git a/src/components/Cart/CartContents.component.tsx b/src/components/Cart/CartContents.component.tsx index 7f6e913b3..8df175175 100644 --- a/src/components/Cart/CartContents.component.tsx +++ b/src/components/Cart/CartContents.component.tsx @@ -1,19 +1,14 @@ -/*eslint complexity: ["error", 20]*/ -// Imports import { useContext, useEffect } from 'react'; import { useMutation, useQuery } from '@apollo/client'; import Link from 'next/link'; +import Image from 'next/image'; import { useRouter } from 'next/router'; import { v4 as uuidv4 } from 'uuid'; -// State import { CartContext } from '@/stores/CartProvider'; - -// Components import Button from '@/components/UI/Button.component'; import LoadingSpinner from '../LoadingSpinner/LoadingSpinner.component'; -// Utils import { getFormattedCart, getUpdatedItems, @@ -21,66 +16,40 @@ import { IProductRootObject, } from '@/utils/functions/functions'; -// GraphQL import { GET_CART } from '@/utils/gql/GQL_QUERIES'; import { UPDATE_CART } from '@/utils/gql/GQL_MUTATIONS'; -/** - * Renders cart contents. - * @function CartContents - * @returns {JSX.Element} - Rendered component - */ const CartContents = () => { const router = useRouter(); - const { setCart } = useContext(CartContext); - const isCheckoutPage = router.pathname === '/kasse'; - // Get cart data query const { data, refetch } = useQuery(GET_CART, { notifyOnNetworkStatusChange: true, onCompleted: () => { - // Update cart in the localStorage. const updatedCart = getFormattedCart(data); - if (!updatedCart && !data.cart.contents.nodes.length) { - // Clear the localStorage if we have no remote cart - localStorage.removeItem('woocommerce-cart'); setCart(null); return; } - localStorage.setItem('woocommerce-cart', JSON.stringify(updatedCart)); - - // Update cart data in React Context. setCart(updatedCart); }, }); - // Update Cart Mutation. - const [updateCart, { loading: updateCartProcessing }] = useMutation( - UPDATE_CART, - { - onCompleted: () => { + const [updateCart, { loading: updateCartProcessing }] = useMutation(UPDATE_CART, { + onCompleted: () => { + refetch(); + setTimeout(() => { refetch(); - setTimeout(() => { - refetch(); - }, 3000); - }, + }, 3000); }, - ); + }); - const handleRemoveProductClick = ( - cartKey: string, - products: IProductRootObject[], - ) => { + const handleRemoveProductClick = (cartKey: string, products: IProductRootObject[]) => { if (products.length) { - // By passing the newQty to 0 in updateCart Mutation, it will remove the item. - const newQty = 0; - const updatedItems = getUpdatedItems(products, newQty, cartKey); - + const updatedItems = getUpdatedItems(products, 0, cartKey); updateCart({ variables: { input: { @@ -90,9 +59,7 @@ const CartContents = () => { }, }); } - refetch(); - setTimeout(() => { refetch(); }, 3000); @@ -102,50 +69,31 @@ const CartContents = () => { refetch(); }, [refetch]); + const cartTotal = data?.cart?.total || '0'; + return ( -
-
- {data?.cart?.contents?.nodes.length ? ( - data.cart.contents.nodes.map((item: IProductRootObject) => ( -
-
- - Slett:
- - - - -
-
- - Navn:
- - - {item.product.node.name} - -
-
- - Antall:
- - +
+

Handlekurv

+ {data?.cart?.contents?.nodes.length ? ( + <> +
+ {data.cart.contents.nodes.map((item: IProductRootObject) => ( +
+
+ {item.product.node.name} +
+
+

{item.product.node.name}

+

{item.product.node.price}

+
+
{ updateCartProcessing, ); }} + className="w-16 px-2 py-1 text-center border border-gray-300 rounded mr-2" /> - -
-
- - Total:
- - - {item.subtotal} - + +
+
+

{item.subtotal}

+
+ ))} +
+
+
+ Subtotal: + {cartTotal}
- )) - ) : ( -

- Ingen produkter i handlekurven -

- )} - {updateCartProcessing && ( -
-
- Oppdaterer antall, vennligst vent ... - -
+ {!isCheckoutPage && ( + + + + )}
- )} - {!isCheckoutPage && data?.cart?.contents?.nodes.length ? ( -
- - - + + ) : ( +
+

Ingen produkter i handlekurven

+ + + +
+ )} + {updateCartProcessing && ( +
+
+

Oppdaterer handlekurv...

+
- ) : null} -
-
+ + )} + ); }; From e522a2ccf75dc89dfef8cbab2a23847a3bd2729a Mon Sep 17 00:00:00 2001 From: w3bdesign <45217974+w3bdesign@users.noreply.github.com> Date: Sun, 15 Sep 2024 04:05:13 +0200 Subject: [PATCH 02/17] Update CartContents.component.tsx --- src/components/Cart/CartContents.component.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/Cart/CartContents.component.tsx b/src/components/Cart/CartContents.component.tsx index 8df175175..56798d1e5 100644 --- a/src/components/Cart/CartContents.component.tsx +++ b/src/components/Cart/CartContents.component.tsx @@ -108,13 +108,13 @@ const CartContents = () => { }} className="w-16 px-2 py-1 text-center border border-gray-300 rounded mr-2" /> - +

{item.subtotal}

@@ -129,7 +129,7 @@ const CartContents = () => {
{!isCheckoutPage && ( - @@ -140,7 +140,7 @@ const CartContents = () => {

Ingen produkter i handlekurven

- From 8225738b0c46f0b5a5798448ab59895a50eac3ea Mon Sep 17 00:00:00 2001 From: w3bdesign <45217974+w3bdesign@users.noreply.github.com> Date: Sun, 15 Sep 2024 04:09:17 +0200 Subject: [PATCH 03/17] Update CartContents.component.tsx --- src/components/Cart/CartContents.component.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/Cart/CartContents.component.tsx b/src/components/Cart/CartContents.component.tsx index 56798d1e5..e64bc965a 100644 --- a/src/components/Cart/CartContents.component.tsx +++ b/src/components/Cart/CartContents.component.tsx @@ -90,7 +90,14 @@ const CartContents = () => {

{item.product.node.name}

-

{item.product.node.price}

+ {/* Display the price if available, otherwise show a placeholder */} +

+ {item.product.node.priceHtml ? ( + + ) : ( + 'Price not available' + )} +

Date: Sun, 15 Sep 2024 04:10:33 +0200 Subject: [PATCH 04/17] Update CartContents.component.tsx --- src/components/Cart/CartContents.component.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/Cart/CartContents.component.tsx b/src/components/Cart/CartContents.component.tsx index e64bc965a..949731034 100644 --- a/src/components/Cart/CartContents.component.tsx +++ b/src/components/Cart/CartContents.component.tsx @@ -48,7 +48,7 @@ const CartContents = () => { }); const handleRemoveProductClick = (cartKey: string, products: IProductRootObject[]) => { - if (products.length) { + if (products?.length) { const updatedItems = getUpdatedItems(products, 0, cartKey); updateCart({ variables: { @@ -71,10 +71,15 @@ const CartContents = () => { const cartTotal = data?.cart?.total || '0'; + const getUnitPrice = (subtotal: string, quantity: number) => { + const numericSubtotal = parseFloat(subtotal.replace(/[^0-9.-]+/g,"")); + return isNaN(numericSubtotal) ? 'N/A' : (numericSubtotal / quantity).toFixed(2); + }; + return (

Handlekurv

- {data?.cart?.contents?.nodes.length ? ( + {data?.cart?.contents?.nodes?.length ? ( <>
{data.cart.contents.nodes.map((item: IProductRootObject) => ( @@ -90,13 +95,8 @@ const CartContents = () => {

{item.product.node.name}

- {/* Display the price if available, otherwise show a placeholder */}

- {item.product.node.priceHtml ? ( - - ) : ( - 'Price not available' - )} + Enhetspris: kr {getUnitPrice(item.subtotal, item.quantity)}

From 8f5f2a98e3b5a9e5564ff1b76c11daad6f984da3 Mon Sep 17 00:00:00 2001 From: w3bdesign <45217974+w3bdesign@users.noreply.github.com> Date: Sun, 15 Sep 2024 04:16:47 +0200 Subject: [PATCH 05/17] Update CartContents.component.tsx --- .../Cart/CartContents.component.tsx | 59 ++++++++++++------- 1 file changed, 38 insertions(+), 21 deletions(-) diff --git a/src/components/Cart/CartContents.component.tsx b/src/components/Cart/CartContents.component.tsx index 949731034..92edc42fd 100644 --- a/src/components/Cart/CartContents.component.tsx +++ b/src/components/Cart/CartContents.component.tsx @@ -38,16 +38,22 @@ const CartContents = () => { }, }); - const [updateCart, { loading: updateCartProcessing }] = useMutation(UPDATE_CART, { - onCompleted: () => { - refetch(); - setTimeout(() => { + const [updateCart, { loading: updateCartProcessing }] = useMutation( + UPDATE_CART, + { + onCompleted: () => { refetch(); - }, 3000); + setTimeout(() => { + refetch(); + }, 3000); + }, }, - }); + ); - const handleRemoveProductClick = (cartKey: string, products: IProductRootObject[]) => { + const handleRemoveProductClick = ( + cartKey: string, + products: IProductRootObject[], + ) => { if (products?.length) { const updatedItems = getUpdatedItems(products, 0, cartKey); updateCart({ @@ -72,21 +78,27 @@ const CartContents = () => { const cartTotal = data?.cart?.total || '0'; const getUnitPrice = (subtotal: string, quantity: number) => { - const numericSubtotal = parseFloat(subtotal.replace(/[^0-9.-]+/g,"")); - return isNaN(numericSubtotal) ? 'N/A' : (numericSubtotal / quantity).toFixed(2); + const numericSubtotal = parseFloat(subtotal.replace(/[^0-9.-]+/g, '')); + return isNaN(numericSubtotal) + ? 'N/A' + : (numericSubtotal / quantity).toFixed(2); }; return (
-

Handlekurv

{data?.cart?.contents?.nodes?.length ? ( <>
{data.cart.contents.nodes.map((item: IProductRootObject) => ( -
+
{item.product.node.name} { />
-

{item.product.node.name}

+

+ {item.product.node.name} +

Enhetspris: kr {getUnitPrice(item.subtotal, item.quantity)}

@@ -116,7 +130,12 @@ const CartContents = () => { className="w-16 px-2 py-1 text-center border border-gray-300 rounded mr-2" />
{!isCheckoutPage && ( - + )}
) : (
-

Ingen produkter i handlekurven

+

+ Ingen produkter i handlekurven +

- +
)} From 5869a67a695636b0d83024fe150397a6d2b7ef9a Mon Sep 17 00:00:00 2001 From: w3bdesign <45217974+w3bdesign@users.noreply.github.com> Date: Sun, 15 Sep 2024 04:19:09 +0200 Subject: [PATCH 06/17] Update CartContents.component.tsx --- src/components/Cart/CartContents.component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Cart/CartContents.component.tsx b/src/components/Cart/CartContents.component.tsx index 92edc42fd..87378fe81 100644 --- a/src/components/Cart/CartContents.component.tsx +++ b/src/components/Cart/CartContents.component.tsx @@ -149,7 +149,7 @@ const CartContents = () => { ))}
-
+
Subtotal: {cartTotal}
From e94d8a8b4556c67e06a04a6b4c6dfba88f9c4c3d Mon Sep 17 00:00:00 2001 From: w3bdesign <45217974+w3bdesign@users.noreply.github.com> Date: Sun, 15 Sep 2024 04:25:49 +0200 Subject: [PATCH 07/17] Update SingleProduct.component.tsx --- src/components/Product/SingleProduct.component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Product/SingleProduct.component.tsx b/src/components/Product/SingleProduct.component.tsx index c67151bbb..234222f1c 100644 --- a/src/components/Product/SingleProduct.component.tsx +++ b/src/components/Product/SingleProduct.component.tsx @@ -115,7 +115,7 @@ const SingleProduct = ({ product }: IProductRootObject) => {