Add Update cart

Author: imranhsayed

src/components/cart/cart-item.js

@@ -8,11 +8,12 @@ const CartItem = ( {
 	                   products,
 	                   updateCartProcessing,
 	                   handleRemoveProductClick,
+	                   setCart
                    } ) => {
 
 	const [productCount, setProductCount] = useState( item.quantity );
+	const [loading, setLoading] = useState( false );
 	const productImg = item?.data?.images?.[0];
-	console.log( 'item', item );
 
 	/*
 	 * When user changes the qty from product input update the cart in localStorage
@@ -56,7 +57,7 @@ const CartItem = ( {
 				// 		}
 				// 	},
 				// } );
-				updateCart(item?.id, newQty);
+				updateCart(item?.key, newQty, setCart, setLoading);
 			}
 
 		}
@@ -88,6 +89,7 @@ const CartItem = ( {
 							{/*<span className="cart-product-price">{ ( 'string' !== typeof item?.data?.price ) ? item?.data?.price.toFixed( 2 ) : item?.data?.price }</span>*/}
 							<span className="cart-total-price">{item?.currency}{item?.line_subtotal}</span>
 						</div>
+						{loading ? <span>Updating...</span> : null}
 						{/*Qty*/}
 						<div style={{ display: 'flex', alignItems: 'center' }}>
 							<button className="decrement-btn text-24px" onClick={( event ) => handleQtyChange( event, item?.cartKey, 'decrement' )} >-</button>

src/components/cart/cart-items-container.js

@@ -62,6 +62,7 @@ const CartItemsContainer = () => {
 								item={ item }
 								updateCartProcessing={ isUpdateCartProcessing }
 								products={ cartItems }
+								setCart={setCart}
 								handleRemoveProductClick={ handleRemoveProductClick }
 							/>
 						) ) }
@@ -72,7 +73,7 @@ const CartItemsContainer = () => {
 						<h2>Cart Total</h2>
 						<div className="flex grid grid-cols-3 bg-gray-100 mb-4">
 							<p className="col-span-2 p-2 mb-0">Total</p>
-							<p className="col-span-1 p-2 mb-0">{ totalPrice }</p>
+							<p className="col-span-1 p-2 mb-0">{cartItems?.[0]?.currency ?? ''}{ totalPrice }</p>
 						</div>
 
 						<div className="flex justify-between">

src/utils/cart/index.js

@@ -41,15 +41,19 @@ export const addToCart = ( productId, qty = 1, setCart, setIsAddedToCart, setLoa
 
 /**
  * View Cart Request Handler
+ *
+ * @param {Function} setCart Set Cart Function.
+ * @param {Function} setLoading Set Loading Function.
  */
-export const viewCart = ( setCart ) => {
+export const viewCart = ( setCart, setLoading = () => {} ) => {
 
 	const addOrViewCartConfig = getApiCartConfig();
 
 	axios.get( CART_ENDPOINT, addOrViewCartConfig )
 		.then( ( res ) => {
 			const formattedCartData = getFormattedCartData( res?.data ?? [] )
 			setCart( formattedCartData );
+			setLoading(false);
 		} )
 		.catch( err => {
 			console.log( 'err', err );
@@ -59,17 +63,20 @@ export const viewCart = ( setCart ) => {
 /**
  * Update Cart Request Handler
  */
-export const updateCart = ( productId, qty = 1, setCart, ) => {
+export const updateCart = ( cartKey, qty = 1, setCart, setLoading ) => {
 
 	const addOrViewCartConfig = getApiCartConfig();
 
-	axios.put( CART_ENDPOINT, {
+	setLoading(true);
+	
+	axios.put( `${CART_ENDPOINT}${cartKey}`, {
 		// product_id: productId,
 		quantity: qty,
 	}, addOrViewCartConfig )
 		.then( ( res ) => {
-			const formattedCartData = getFormattedCartData( res?.data ?? [] )
-			setCart( formattedCartData );
+			// const formattedCartData = getFormattedCartData( res?.data ?? [] );
+			// setCart( formattedCartData );
+			viewCart( setCart, setLoading );
 		} )
 		.catch( err => {
 			console.log( 'err', err );
@@ -78,6 +85,9 @@ export const updateCart = ( productId, qty = 1, setCart, ) => {
 
 /**
  * Clear Cart Request Handler
+ *
+ * @param {Function} setCart Set Cart
+ * @param {Function} setClearCartProcessing Set Clear Cart Processing.
  */
 export const clearCart = ( setCart, setClearCartProcessing ) => {