refactor: resolve payment iossue

components/header/Navbar.jsx

@@ -3,6 +3,7 @@
 import React, { useContext, useState, useEffect } from "react";
 import Link from "next/link";
 import { Menu, ShoppingBag, UserRound } from "lucide-react";
+import authAxios, { backendUrl } from "@/utils/axios";
 import { IoMdClose } from "react-icons/io";
 import Image from "next/image";
 import SearchComponent from "../search/searchComponent";
@@ -16,6 +17,7 @@ const Navbar = () => {
   const [isScrolled, setIsScrolled] = useState(false);
   const { category } = useContext(ProductContext);
   const { token } = useContext(MainContext);
+  const [cartItemCount, setCartItemCount] = useState(0);
   const { selectedCurrency, setSelectedCurrency, SUPPORTED_CURRENCIES } =
     useCurrency();
 
@@ -30,6 +32,49 @@ const Navbar = () => {
     return () => window.removeEventListener("scroll", handleScroll);
   }, []);
 
+  const getCart = async () => {
+    try {
+      const response = await authAxios.get("/orders/cart/");
+      const cartData = response.data;
+      console.log(cartData)
+      console.log(cartData.length)
+      
+      // Calculate total items in cart
+      if (cartData && cartData.length > 0 && cartData[0].items) {
+        const totalItems = cartData[0].items.reduce((sum, item) => sum + item.quantity, 0);
+        setCartItemCount(totalItems);
+      } else {
+        setCartItemCount(0);
+      }
+    } catch (error) {
+      console.error("Error fetching cart:", error);
+      setCartItemCount(0);
+    }
+  };
+
+  // Fetch cart data when component mounts and when token changes
+  useEffect(() => {
+    if (token) {
+      getCart();
+    } else {
+      setCartItemCount(0);
+    }
+  }, [token]);
+
+  // Set up an interval to periodically check for cart updates
+  useEffect(() => {
+    if (token) {
+      // Initial fetch
+      getCart();
+      
+      // Set up interval to check for updates every 3 seconds
+      const intervalId = setInterval(getCart, 3000);
+      
+      // Clean up interval on component unmount
+      return () => clearInterval(intervalId);
+    }
+  }, [token]);
+
   const categoryItems = category
     ? category.map((category) => ({
         label: category.category_name,
@@ -70,8 +115,11 @@ const Navbar = () => {
 
           <div className="flex items-center space-x-4">
             <SearchComponent isScrolled={isScrolled} />
-            <Link href="/pages/shopping-cart">
+            <Link href="/pages/shopping-cart" className="relative">
               <ShoppingBag size={20} className="cursor-pointer" />
+                <span className="absolute -top-2 -right-2 bg-red font-bold text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
+                  {cartItemCount}
+                </span>
             </Link>
             <div className="cursor-pointer">
               {token ? (