Add Remove cart function

Author: imranhsayed

public/cart-spinner.gif

@@ -1,19 +1,34 @@
 import React, { useState } from 'react';
 import {isEmpty} from "lodash";
 import Image from '../image';
-import { updateCart } from '../../utils/cart';
+import { deleteCartItem, updateCart } from '../../utils/cart';
 
 const CartItem = ( {
 	                   item,
 	                   products,
-	                   updateCartProcessing,
-	                   handleRemoveProductClick,
 	                   setCart
                    } ) => {
 
 	const [productCount, setProductCount] = useState( item.quantity );
-	const [loading, setLoading] = useState( false );
-	const productImg = item?.data?.images?.[0];
+	const [updatingProduct, setUpdatingProduct] = useState( false );
+	const [removingProduct, setRemovingProduct] = useState( false );
+	const productImg = item?.data?.images?.[0] ?? '';
+	
+	/*
+	 * Handle remove product click.
+	 *
+	 * @param {Object} event event
+	 * @param {Integer} Product Id.
+	 *
+	 * @return {void}
+	 */
+	const handleRemoveProductClick = ( event, cartKey ) => {
+		event.stopPropagation();
+		
+		if ( !updatingProduct ) {
+			deleteCartItem( cartKey, setCart, setRemovingProduct );
+		}
+	};
 
 	/*
 	 * When user changes the qty from product input update the cart in localStorage
@@ -30,8 +45,8 @@ const CartItem = ( {
 			event.stopPropagation();
 			let newQty;
 
-			// If the previous update cart mutation request is still processing, then return.
-			if ( updateCartProcessing || ( 'decrement' === type && 1 === productCount ) ) {
+			// If the previous cart request is still updatingProduct, then return.
+			if ( updatingProduct || ( 'decrement' === type && 1 === productCount ) ) {
 				return;
 			}
 
@@ -46,18 +61,7 @@ const CartItem = ( {
 			setProductCount( newQty );
 
 			if ( products.length ) {
-				
-				// const updatedItems = getUpdatedItems( products, newQty, cartKey );
-				//
-				// updateCart( {
-				// 	variables: {
-				// 		input: {
-				// 			clientMutationId: v4(),
-				// 			items: updatedItems
-				// 		}
-				// 	},
-				// } );
-				updateCart(item?.key, newQty, setCart, setLoading);
+				updateCart(item?.key, newQty, setCart, setUpdatingProduct);
 			}
 
 		}
@@ -89,7 +93,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}
+						{ updatingProduct ? <img className="woo-next-cart-item-spinner" width="24" src="/cart-spinner.gif"  alt="spinner"/> : null }
 						{/*Qty*/}
 						<div style={{ display: 'flex', alignItems: 'center' }}>
 							<button className="decrement-btn text-24px" onClick={( event ) => handleQtyChange( event, item?.cartKey, 'decrement' )} >-</button>
@@ -98,13 +102,11 @@ const CartItem = ( {
 								min="1"
 								style={{ textAlign: 'center', width: '50px', paddingRight: '0' }}
 								data-cart-key={ item?.data?.cartKey }
-								className={ `woo-next-cart-qty-input ml-3 ${ updateCartProcessing ? 'disabled' : '' } ` }
+								className={ `woo-next-cart-qty-input ml-3 ${ updatingProduct ? 'disabled' : '' } ` }
 								value={ productCount }
 								onChange={ ( event ) => handleQtyChange( event, item?.cartKey, '' ) }
 							/>
 							<button className="increment-btn text-20px" onClick={( event ) => handleQtyChange( event, item?.cartKey, 'increment' )}>+</button>
-							{ updateCartProcessing ?
-								<img className="woo-next-cart-item-spinner" src={ cartSpinnerGif } alt="spinner"/> : '' }
 						</div>
 					</footer>
 				</div>

src/components/cart/cart-item.js

@@ -8,34 +8,7 @@ import { clearCart } from '../../utils/cart';
 const CartItemsContainer = () => {
 	const [ cart, setCart ] = useContext( AppContext );
 	const { cartItems, totalPrice, totalQty } = cart || {};
-	const [ isUpdateCartProcessing, setUpdateCartProcessing ] = useState( false );
 	const [ isClearCartProcessing, setClearCartProcessing ] = useState( false );
-	console.log( 'cartItems', cartItems );
-	/*
-	 * Handle remove product click.
-	 *
-	 * @param {Object} event event
-	 * @param {Integer} Product Id.
-	 *
-	 * @return {void}
-	 */
-	const handleRemoveProductClick = ( event, cartKey, products ) => {
-		event.stopPropagation();
-		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);
-			//
-			// updateCart({
-			// 	variables: {
-			// 		input: {
-			// 			clientMutationId: v4(),
-			// 			items: updatedItems,
-			// 		},
-			// 	},
-			// });
-		}
-	};
 
 	// Clear the entire cart.
 	const handleClearCart = ( event ) => {
@@ -60,10 +33,8 @@ const CartItemsContainer = () => {
 							<CartItem
 								key={ item.product_id }
 								item={ item }
-								updateCartProcessing={ isUpdateCartProcessing }
 								products={ cartItems }
 								setCart={setCart}
-								handleRemoveProductClick={ handleRemoveProductClick }
 							/>
 						) ) }
 					</div>

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

@@ -43,17 +43,17 @@ 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.
+ * @param {Function} setProcessing Set Processing Function.
  */
-export const viewCart = ( setCart, setLoading = () => {} ) => {
+export const viewCart = ( setCart, setProcessing = () => {} ) => {
 
 	const addOrViewCartConfig = getApiCartConfig();
 
 	axios.get( CART_ENDPOINT, addOrViewCartConfig )
 		.then( ( res ) => {
 			const formattedCartData = getFormattedCartData( res?.data ?? [] )
 			setCart( formattedCartData );
-			setLoading(false);
+			setProcessing(false);
 		} )
 		.catch( err => {
 			console.log( 'err', err );
@@ -63,20 +63,44 @@ export const viewCart = ( setCart, setLoading = () => {} ) => {
 /**
  * Update Cart Request Handler
  */
-export const updateCart = ( cartKey, qty = 1, setCart, setLoading ) => {
+export const updateCart = ( cartKey, qty = 1, setCart, setUpdatingProduct ) => {
 
 	const addOrViewCartConfig = getApiCartConfig();
 
-	setLoading(true);
+	setUpdatingProduct(true);
 
 	axios.put( `${CART_ENDPOINT}${cartKey}`, {
-		// product_id: productId,
 		quantity: qty,
 	}, addOrViewCartConfig )
 		.then( ( res ) => {
-			// const formattedCartData = getFormattedCartData( res?.data ?? [] );
-			// setCart( formattedCartData );
-			viewCart( setCart, setLoading );
+			viewCart( setCart, setUpdatingProduct );
+		} )
+		.catch( err => {
+			console.log( 'err', err );
+		} );
+};
+
+/**
+ * Delete a cart item Request handler.
+ *
+ * Deletes all products in the cart of a
+ * specific product id ( by its cart key )
+ * In a cart session, each product maintains
+ * its data( qty etc ) with a specific cart key
+ *
+ * @param {String} cartKey Cart Key.
+ * @param {Function} setCart SetCart Function.
+ * @param {Function} setRemovingProduct Set Removing Product Function.
+ */
+export const deleteCartItem = ( cartKey, setCart, setRemovingProduct ) => {
+	
+	const addOrViewCartConfig = getApiCartConfig();
+	
+	setRemovingProduct(true);
+	
+	axios.delete( `${CART_ENDPOINT}${cartKey}`, addOrViewCartConfig )
+		.then( ( res ) => {
+			viewCart( setCart, setRemovingProduct );
 		} )
 		.catch( err => {
 			console.log( 'err', err );