hey-pharmacist-ecommerce 1.1.20 → 1.1.23

package/src/providers/CartProvider.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
+import React, { createContext, useContext, useState, useEffect, useCallback, useRef } from 'react';
 import { useAuth } from './AuthProvider';
-import { CartResponseDto } from '@/lib/Apis/models';
+import { CartResponseDto, CartItemPopulated } from '@/lib/Apis/models';
 import { CartApi } from '@/lib/Apis';
 import { getApiConfiguration } from '@/lib/api-adapter';
 import { useNotification } from './NotificationProvider';
@@ -37,6 +37,13 @@ export function CartProvider({ children }: CartProviderProps) {
   const { isAuthenticated } = useAuth();
   const notification = useNotification();
 
+  // Ref to always have the latest cart state in async functions without stale closures
+  const cartRef = useRef<CartResponseDto | null>(cart);
+
+  useEffect(() => {
+    cartRef.current = cart;
+  }, [cart]);
+
   const refreshCart = useCallback(async () => {
     if (!isAuthenticated) {
       setCart(null);
@@ -45,7 +52,9 @@ export function CartProvider({ children }: CartProviderProps) {
 
     try {
       const response = await new CartApi(getApiConfiguration()).getUserCart();
-      setCart(response.data);
+      if (response.data) {
+        setCart(response.data);
+      }
     } catch (error) {
       console.error('Failed to fetch cart:', error);
     }
@@ -55,125 +64,186 @@ export function CartProvider({ children }: CartProviderProps) {
     refreshCart();
   }, [refreshCart]);
 
-  const addToCart = async (productId: string, quantity: number = 1, variantId?: string) => {
+  const addToCart = useCallback(async (productId: string, quantity: number = 1, variantId?: string) => {
+    if (!isAuthenticated) return;
     setIsLoading(true);
     try {
-      // Get current cart items
-      const currentItems = cart?.cartBody?.items || [];
+      const currentCart = cartRef.current;
+      const currentItems = currentCart?.cartBody?.items || [];
       const targetVariantId = variantId || productId;
-      
-      // Check if item already exists in cart
-      const existingItemIndex = currentItems.findIndex(
-        (item: any) => item.productVariantId === targetVariantId
-      );
-      
-      // Build the items array
-      const items = [...currentItems];
-      
-      if (existingItemIndex >= 0) {
-        // Update quantity if item exists
-        items[existingItemIndex] = {
-          ...items[existingItemIndex],
-          quantity: (items[existingItemIndex].quantity || 0) + quantity
+
+      let itemsFound = false;
+      const simplifiedItems = currentItems.map((item: CartItemPopulated) => {
+        let q = Number(item.quantity) || 0;
+        if (String(item.productVariantId) === String(targetVariantId)) {
+          itemsFound = true;
+          q += Number(quantity);
+        }
+        return {
+          _id: item._id,
+          productVariantId: item.productVariantId,
+          quantity: q
         };
-      } else {
-        // Add new item
-        (items as any).push({
+      });
+
+      if (!itemsFound) {
+        simplifiedItems.push({
           productVariantId: targetVariantId,
-          quantity,
-        });
+          quantity: Number(quantity)
+        } as any);
+      }
+
+      const payload = {
+        _id: currentCart?.cartBody?._id,
+        items: simplifiedItems
+      };
+
+      const response = await new CartApi(getApiConfiguration()).handleUserCart(payload as any);
+      if (response.data) {
+        setCart(response.data);
+        notification.success('Added to cart', 'The item was added to your cart.');
       }
-      
-      const response = await new CartApi(getApiConfiguration()).handleUserCart({ items });
-      setCart(response.data);
-      notification.success(
-        'Added to cart',
-        'The item was added to your cart.'
-      );
     } catch (error: any) {
-      notification.error(
-        'Could not add to cart',
-        error.response?.data?.message || 'Something went wrong while adding this item to your cart.'
-      );
-      throw error;
+      console.error('Add to cart error:', error);
+      notification.error('Could not add to cart', error.response?.data?.message || 'Something went wrong.');
     } finally {
       setIsLoading(false);
     }
-  };
+  }, [isAuthenticated, notification]);
 
-  const updateQuantity = async (productId: string, quantity: number) => {
+  const updateQuantity = useCallback(async (productId: string, quantity: number) => {
+    const currentCart = cartRef.current;
+    if (!currentCart) return;
     setIsLoading(true);
-    try {
-      // Get current cart items
-      const currentItems = cart?.cartBody?.items || [];
-      
-      // Build the items array with updated quantity
-      const items = currentItems.map((item: any) => {
-        if (item.productVariantId === productId) {
-          return {
-            ...item,
-            quantity
-          };
+
+    const targetQ = Number(quantity);
+    const oldCart = currentCart;
+
+    // Optimistic UI Update
+    setCart(prev => {
+      if (!prev) return null;
+      const newItems = prev.cartBody.items.map(item => {
+        if (String(item.productVariantId) === String(productId)) {
+          return { ...item, quantity: targetQ };
         }
         return item;
       });
-      
-      const response = await new CartApi(getApiConfiguration()).handleUserCart({ items });
-      setCart(response.data);
+      const newSubtotal = newItems.reduce((acc, item) => acc + (item.productVariantData.finalPrice || 0) * item.quantity, 0);
+      return {
+        ...prev,
+        subTotal: newSubtotal,
+        total: newSubtotal + (prev.shipping || 0) + (prev.tax || 0),
+        cartBody: { ...prev.cartBody, items: newItems }
+      };
+    });
+
+    try {
+      const simplifiedItems = oldCart.cartBody.items.map(item => ({
+        _id: item._id,
+        productVariantId: item.productVariantId,
+        quantity: String(item.productVariantId) === String(productId) ? targetQ : item.quantity
+      }));
+
+      const payload = {
+        _id: oldCart.cartBody._id,
+        items: simplifiedItems
+      };
+      console.log("payload", payload);
+      const response = await new CartApi(getApiConfiguration()).handleUserCart(payload as any);
+
+      if (response.data) {
+        setCart(response.data);
+      } else {
+        await refreshCart();
+      }
     } catch (error: any) {
-      notification.error(
-        'Could not update cart',
-        error.response?.data?.message || 'There was a problem updating the item quantity. Please try again.'
-      );
-      throw error;
+      console.error('Update quantity error:', error);
+      setCart(oldCart); // Rollback
+      notification.error('Could not update cart', error.response?.data?.message || 'Failed to update quantity.');
     } finally {
       setIsLoading(false);
     }
-  };
+  }, [notification, refreshCart]);
 
-  const removeFromCart = async (productId: string) => {
+  const removeFromCart = useCallback(async (productId: string) => {
+    const currentCart = cartRef.current;
+    if (!currentCart) return;
     setIsLoading(true);
+    const oldCart = currentCart;
+
+    // Optimistic Update
+    setCart(prev => {
+      if (!prev) return null;
+      const newItems = prev.cartBody.items.filter(item => String(item.productVariantId) !== String(productId));
+      const newSubtotal = newItems.reduce((acc, item) => acc + (item.productVariantData.finalPrice || 0) * item.quantity, 0);
+      return {
+        ...prev,
+        subTotal: newSubtotal,
+        total: newSubtotal + (prev.shipping || 0) + (prev.tax || 0),
+        cartBody: { ...prev.cartBody, items: newItems }
+      };
+    });
+
     try {
-      // Get current cart items and filter out the item to remove
-      const currentItems = cart?.cartBody?.items || [];
-      const items = currentItems.filter((item: any) => item.productVariantId !== productId);
-      
-      const response = await new CartApi(getApiConfiguration()).handleUserCart({ items });
-      setCart(response.data);
+      console.log('Removing item with productVariantId:', productId);
+      const itemsToKeep = currentCart.cartBody.items.filter(item => String(item.productVariantId) !== String(productId));
+      console.log('Items to keep count:', itemsToKeep.length);
+
+      const simplifiedItems = itemsToKeep.map(item => ({
+        _id: item._id,
+        productVariantId: item.productVariantId,
+        quantity: item.quantity
+      }));
+
+      if (simplifiedItems.length === 0) {
+        console.log('Cart will be empty, calling clearCart');
+        await new CartApi(getApiConfiguration()).clearCart();
+        setCart(null);
+      } else {
+        const payload = {
+          _id: currentCart.cartBody._id,
+          items: simplifiedItems
+        };
+        console.log("Remove from cart payload:", JSON.stringify(payload, null, 2));
+        const response = await new CartApi(getApiConfiguration()).handleUserCart(payload as any);
+        console.log("Remove from cart response:", response.status, response.data);
+        if (response.data) {
+          setCart(response.data);
+        }
+      }
     } catch (error: any) {
-      notification.error(
-        'Could not remove item',
-        error.response?.data?.message || 'There was a problem removing this item from your cart.'
-      );
-      throw error;
+      console.error('Remove from cart error:', error);
+      if (error.response) {
+        console.error('Error response data:', error.response.data);
+      }
+      setCart(oldCart); // Rollback
+      notification.error('Could not remove item', error.response?.data?.message || 'Failed to remove item.');
     } finally {
       setIsLoading(false);
     }
-  };
+  }, [notification]);
 
-  const clearCart = async () => {
+  const clearCart = useCallback(async () => {
     setIsLoading(true);
     try {
-      const response = await new CartApi(getApiConfiguration()).clearCart();
+      await new CartApi(getApiConfiguration()).clearCart();
       setCart(null);
     } catch (error: any) {
-      notification.error(
-        'Could not clear cart',
-        error.response?.data?.message || 'We could not clear your cart. Please try again.'
-      );
-      throw error;
+      console.error('Clear cart error:', error);
+      notification.error('Could not clear cart', error.response?.data?.message || 'Failed to clear cart.');
     } finally {
       setIsLoading(false);
     }
-  };
-  const value: CartContextValue = {
+  }, [notification]);
+
+  const value = {
     cart,
     isLoading,
     addToCart,
     updateQuantity,
     removeFromCart,
     clearCart,
-    refreshCart,
+    refreshCart
   };
 
   return <CartContext.Provider value={value}>{children}</CartContext.Provider>;

package/src/providers/EcommerceProvider.tsx

@@ -20,9 +20,9 @@ interface EcommerceProviderProps {
 }
 
 export function EcommerceProvider({ config, children, withToaster = true, basePath = '' }: EcommerceProviderProps) {
-  useEffect(() => {
-    // Initialize API adapter with store configuration
-    // This sets up the real backend APIs with proper authentication and store ID
+  // Initialize API adapter with store configuration synchronously
+  // This ensures setting up the real backend APIs before children render and fire their effects
+  React.useMemo(() => {
     initializeApiAdapter(config);
   }, [config]);
 
@@ -31,19 +31,19 @@ export function EcommerceProvider({ config, children, withToaster = true, basePa
   );
   return (
     <QueryClientProvider client={client}>
-    <ThemeProvider config={config}>
-      <BasePathProvider basePath={basePath}>
-        <AuthProvider>
-          <NotificationProvider>
-            <CartProvider>
-              <WishlistProvider>
-                {children}
-              </WishlistProvider>
-            </CartProvider>
-          </NotificationProvider>
-        </AuthProvider>
-      </BasePathProvider>
-    </ThemeProvider>
+      <ThemeProvider config={config}>
+        <BasePathProvider basePath={basePath}>
+          <AuthProvider>
+            <NotificationProvider>
+              <CartProvider>
+                <WishlistProvider>
+                  {children}
+                </WishlistProvider>
+              </CartProvider>
+            </NotificationProvider>
+          </AuthProvider>
+        </BasePathProvider>
+      </ThemeProvider>
     </QueryClientProvider>
   );
 }

package/src/screens/CartScreen.tsx

@@ -176,7 +176,7 @@ export function CartScreen() {
                   <button
                     type="submit"
                     onClick={handleSubmit}
-                    className="w-full rounded-full border-2 border-primary-500 bg-primary-500 hover:bg-primary-600 text-white px-4 py-3 text-sm font-medium transition-colors flex items-center justify-center gap-2"
+                    className="w-full rounded-full border-2 border-[#E67E50] bg-[#E67E50] hover:bg-[#E67E50]/80 text-white px-4 py-3 text-sm font-medium transition-colors flex items-center justify-center gap-2"
                   >
                     Proceed to Checkout
                     <ArrowRight className="h-5 w-5" />

package/src/screens/CheckoutScreen.tsx

@@ -15,6 +15,7 @@ import {
   ShieldCheck,
   Truck,
   Check,
+  AlertCircle,
 } from 'lucide-react';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
@@ -423,7 +424,15 @@ export function CheckoutScreen() {
         router.push(buildPath(`/orders/${response.data?.id}`));
       }
     } catch (err: any) {
-      const msg = err?.message || (err?.response?.data?.message) || 'Failed to place order';
+      console.error('Checkout error:', err);
+      let msg = err?.response?.data?.message || err?.message || 'Failed to place order';
+
+      if (msg.toLowerCase().includes('insufficient balance')) {
+        msg = 'Insufficient balance in your account to complete this order.';
+      } else if (msg.toLowerCase().includes('browser was not found')) {
+        msg = 'A temporary server error occurred while processing your invoice. Please contact support.';
+      }
+
       setError(msg);
       notification.error(
         'Could not place order',
@@ -447,7 +456,6 @@ export function CheckoutScreen() {
 
 
       <form onSubmit={handleSubmit(onSubmit)}>
-        {error && <div className="mb-4 text-red-600 font-semibold">{error}</div>}
         <div className="pt-12 container mx-auto grid gap-10 px-4 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
           <motion.div
             initial={{ opacity: 0, y: 24 }}
@@ -980,14 +988,21 @@ export function CheckoutScreen() {
               </section>
 
               {/* Checkout Button */}
-              <Button
+              {error && (
+                <div className="mt-4 p-4 rounded-xl bg-red-50 border border-red-200 text-red-600 text-sm font-medium animate-in fade-in slide-in-from-top-1 duration-200">
+                  <div className="flex items-start gap-2">
+                    <AlertCircle className="h-4 w-4 shrink-0 mt-0.5" />
+                    <span>{error}</span>
+                  </div>
+                </div>
+              )}
+              <button
                 type="submit"
-                isLoading={isSubmitting}
-                className="font-['Poppins',sans-serif] font-medium text-[14px] px-6 py-2 rounded-full bg-[#E67E50] text-white hover:bg-[#d66f45] hover:shadow-lg transition-all duration-300 mt-4 w-full"
+                className="font-['Poppins',sans-serif] font-medium text-[14px] px-6 py-3 rounded-full text-white hover:bg-[#d66f45] hover:shadow-lg transition-all duration-300 mt-4 w-full bg-[#E67E50] hover:bg-[#2B4B7C] flex items-center justify-center gap-2"
               >
                 <CreditCard className="h-5 w-5" />
                 {isSubmitting ? 'Placing order...' : 'Place Secure Order'}
-              </Button>
+              </button>
 
               <p className="mt-4 flex items-center justify-center gap-2 text-xs text-slate-500">
                 <Lock className="h-4 w-4" />