fix(cart): ensure cart sync occurs only when local storage contains i…

…tems

src/components/Shopping/AddToCartButton.tsx

@@ -11,8 +11,8 @@ interface AddToCartButtonProps {
   loading?: boolean
 }
 
-const ButtonText = styled.span<{ loading: boolean }>`
-  opacity: ${({ loading }) => (loading ? 0 : 1)};
+const ButtonText = styled.span<{ $loading: boolean }>`
+  opacity: ${({ $loading }) => ($loading ? 0 : 1)};
   transition: opacity 0.24s ease-in-out;
 `
 
@@ -47,7 +47,7 @@ const AddToCartButton: React.FC<AddToCartButtonProps> = ({
       disabled={loading || internalLoading}
       aria-label={`Add ${productName} to cart`}
     >
-      <ButtonText loading={loading || internalLoading}>Add to cart</ButtonText>
+      <ButtonText $loading={loading || internalLoading}>Add to cart</ButtonText>
       {(loading || internalLoading) && <LoaderSpin isLoading={true} />}
     </Button>
   )

src/context/CartContext.tsx

@@ -294,13 +294,14 @@ export const CartProvider: React.FC<{ children: ReactNode }> = ({
   }
 
   const syncLocalCartWithServer = useCallback(async () => {
-    if (userAttributes && !isSyncing) {
+    const localCart = JSON.parse(
+      localStorage.getItem('cart') || '[]'
+    ) as CartItem[]
+
+    // Only proceed with syncing if the local cart has items
+    if (userAttributes && !isSyncing && localCart.length > 0) {
       setIsSyncing(true)
       try {
-        const localCart = JSON.parse(
-          localStorage.getItem('cart') || '[]'
-        ) as CartItem[]
-
         const token = await getToken()
         if (!token) {
           throw new Error(INVALID_JWT_TOKEN_ERROR)
@@ -325,6 +326,21 @@ export const CartProvider: React.FC<{ children: ReactNode }> = ({
     }
   }, [userAttributes, isSyncing, fetchCart, getToken])
 
+  useEffect(() => {
+    const localCart = JSON.parse(
+      localStorage.getItem('cart') || '[]'
+    ) as CartItem[]
+
+    // Fetch the cart on component mount
+    void fetchCart()
+
+    // Sync local cart with server only if there are items
+    if (localCart.length > 0 && !hasSyncedCart.current) {
+      void syncLocalCartWithServer()
+      hasSyncedCart.current = true
+    }
+  }, [userAttributes, fetchCart, syncLocalCartWithServer])
+
   const clearCart = async () => {
     setLoadingSummary(true)
     try {