Add delete option feature

Author: imranhsayed

src/components/cart/cart-item.js

@@ -45,8 +45,8 @@ const CartItem = ( {
 			event.stopPropagation();
 			let newQty;
 
-			// If the previous cart request is still updatingProduct, then return.
-			if ( updatingProduct || ( 'decrement' === type && 1 === productCount ) ) {
+			// If the previous cart request is still updatingProduct or removingProduct, then return.
+			if ( updatingProduct || removingProduct || ( 'decrement' === type && 1 === productCount ) ) {
 				return;
 			}
 
@@ -85,7 +85,7 @@ const CartItem = ( {
 					<div className="cart-product-title-wrap relative">
 						<h3 className="cart-product-title text-brand-orange">{ item?.data?.name }</h3>
 						{item?.data?.description ? <p>{item?.data?.description}</p> : ''}
-						<button className="cart-remove-item absolute right-0 top-0 px-4 py-2 flex items-center text-22px leading-22px bg-transparent border border-brand-bright-grey" onClick={ ( event ) => handleRemoveProductClick( event, item?.cartKey, products ) }>&times;</button>
+						<button className="cart-remove-item absolute right-0 top-0 px-4 py-2 flex items-center text-22px leading-22px bg-transparent border border-brand-bright-grey" onClick={ ( event ) => handleRemoveProductClick( event, item?.key ) }>&times;</button>
 					</div>
 
 					<footer className="cart-product-footer flex justify-between p-4 border-t border-brand-bright-grey">

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

@@ -43,7 +43,7 @@ const CartItemsContainer = () => {
 					<div className="woo-next-cart-total-container lg:col-span-1 p-5 pt-0">
 						<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-2 p-2 mb-0">Total({totalQty})</p>
 							<p className="col-span-1 p-2 mb-0">{cartItems?.[0]?.currency ?? ''}{ totalPrice }</p>
 						</div>
 

src/utils/cart/index.js

@@ -57,6 +57,7 @@ export const viewCart = ( setCart, setProcessing = () => {} ) => {
 		} )
 		.catch( err => {
 			console.log( 'err', err );
+			setProcessing(false);
 		} );
 };
 
@@ -77,6 +78,7 @@ export const updateCart = ( cartKey, qty = 1, setCart, setUpdatingProduct ) => {
 		} )
 		.catch( err => {
 			console.log( 'err', err );
+			setUpdatingProduct(false);
 		} );
 };
 
@@ -104,6 +106,7 @@ export const deleteCartItem = ( cartKey, setCart, setRemovingProduct ) => {
 		} )
 		.catch( err => {
 			console.log( 'err', err );
+			setRemovingProduct(false);
 		} );
 };
 
@@ -121,9 +124,7 @@ export const clearCart = ( setCart, setClearCartProcessing ) => {
 
 	axios.delete( CART_ENDPOINT, addOrViewCartConfig )
 		.then( ( res ) => {
-			const formattedCartData = getFormattedCartData( res?.data ?? [] )
-			setCart( formattedCartData );
-			setClearCartProcessing(false);
+			viewCart( setCart, setClearCartProcessing )
 		} )
 		.catch( err => {
 			console.log( 'err', err );