add clear cart functionality

app/contexts/productContext.js

@@ -27,7 +27,7 @@ export const ProductContextProvider = ({ children }) => {
     fetchCategory();
   }, []);
 
-  const cartFn = async (variantId, designId, quantity) => {
+  const cartFn = async (variantId, designId, quantity, showToast = true) => {
 
     try{
       const response = await authAxios.post('/orders/cart/manage_item/',{
@@ -35,7 +35,9 @@ export const ProductContextProvider = ({ children }) => {
         design: designId,
         quantity: quantity
       })
-      toast.success('Modified Cart Successfully!')
+      if (showToast) {
+        toast.success('Modified Cart Successfully!')
+      }
       return response
     }
     catch(error){

components/shopping-cart/shoppingCart.jsx

@@ -1,3 +1,4 @@
+
 "use client";
 import React, { useContext, useEffect, useState } from "react";
 import { Trash2, Plus } from "lucide-react";
@@ -43,12 +44,12 @@ const ShoppingCart = () => {
   }, []);
 
 
-  const handleQuantityChange = async (variantId, designId, quantityChange) => {
-    const response = await cartFn(variantId, designId, quantityChange);
+  const handleQuantityChange = async (variantId, designId, quantityChange, showToast = true) => {
+    const response = await cartFn(variantId, designId, quantityChange, showToast);
     console.log(response)
     if (response?.status == 200 || response?.status == 204) {
       setCartItems((prev) => {
-        if (!prev) return prev;
+
 
         const updatedItems = prev[0].items.map((item) => {
           if (item.variant.id === variantId && item?.design?.id === designId) {
@@ -86,6 +87,15 @@ const ShoppingCart = () => {
     }
   };
 
+  const clearCart = async () => {
+    if (!cartItems || !cartItems[0]?.items?.length) return;
+
+    for (const item of cartItems[0].items) {
+      await handleQuantityChange(item.variant.id, item.design?.id, -item.quantity, false);
+    }
+    toast.success('Cart cleared successfully!');
+  };
+
   if (!cartItems) {
     return null;
   }
@@ -125,7 +135,7 @@ const ShoppingCart = () => {
         payerEmail: order.payer.email_address,
         orderId: order.id,
         cartId: cartItems[0].id,
-        address: order.address, 
+        address: order.address,
       };
 
       const apiResponse = await authAxios.post("/orders/payment/", paymentData);
@@ -138,14 +148,6 @@ const ShoppingCart = () => {
     }
   };
 
-  if (!cartItems) {
-    return null;
-  }
-
-  if (!cartItems[0]?.items?.length) {
-    return <EmptyCart />;
-  }
-
   return (
     <div className="w-full bg-white">
       <div className="w-full px-4 md:px-8 max-w-[1600px] mx-auto font-['Inter']">
@@ -232,8 +234,8 @@ const ShoppingCart = () => {
                       size={18}
                       onClick={() =>
                         handleQuantityChange(
-                          item.variant.id,
-                          item.design.id,
+                          item?.variant?.id,
+                          item?.design?.id,
                           -item.quantity
                         )
                       }
@@ -250,7 +252,10 @@ const ShoppingCart = () => {
           <button className="text-[#c19a5b] hover:text-[#ab885b] font-medium order-2 sm:order-1">
             <Link href="/">← CONTINUE SHOPPING</Link>
           </button>
-          <button className="text-[#c19a5b] hover:text-[#ab885b] sm:ml-auto font-medium order-1 sm:order-2">
+          <button
+            onClick={clearCart}
+            className="text-[#c19a5b] hover:text-[#ab885b] sm:ml-auto font-medium order-1 sm:order-2"
+          >
             CLEAR SHOPPING CART
           </button>
         </div>