Cart

Author: w3bdesign

src/components/Cart/CartContents.component.tsx

@@ -18,21 +18,28 @@ import { UPDATE_CART } from '@/utils/gql/GQL_MUTATIONS';
 
 const CartContents = () => {
   const router = useRouter();
-  const { cart, setCart } = useCartStore();
+  const { cart, setCart, syncError, setSyncError } = useCartStore();
   const isCheckoutPage = router.pathname === '/kasse';
 
   useQuery(GET_CART, {
     notifyOnNetworkStatusChange: true,
     onCompleted: (data) => {
       // Only update if there's a significant difference to avoid unnecessary re-renders
       const updatedCart = getFormattedCart(data) as RootObject | undefined;
+      if (!updatedCart && cart?.products?.length) {
+        console.error('Server cart is empty but local cart has items');
+        setSyncError(true);
+        return;
+      }
       if (!cart || cart.totalProductsCount !== updatedCart?.totalProductsCount) {
         setCart(updatedCart || null);
       }
     },
     onError: (error) => {
       console.error('Error fetching cart:', error);
-      // On error, we'll show the cached cart data instead of setting to null
+      if (cart?.products?.length) {
+        setSyncError(true);
+      }
     },
     fetchPolicy: 'cache-and-network',
   });
@@ -59,6 +66,12 @@ const CartContents = () => {
 
   return (
     <div className="container mx-auto px-4 py-8">
+      {syncError && cart?.products?.length && (
+        <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4">
+          <strong className="font-bold">Synkroniseringsfeil!</strong>
+          <span className="block sm:inline"> Kunne ikke synkronisere med server. Vennligst prøv igjen.</span>
+        </div>
+      )}
       {cart?.products?.length ? (
         <>
           <div className="bg-white rounded-lg p-6 mb-8 md:w-full">

src/components/Checkout/CheckoutForm.component.tsx

@@ -51,7 +51,7 @@ export interface ICheckoutData {
 }
 
 const CheckoutForm = () => {
-  const { cart, setCart } = useCartStore();
+  const { cart, setCart, syncError } = useCartStore();
   const [orderData, setOrderData] = useState<ICheckoutData | null>(null);
   const [requestError, setRequestError] = useState<ApolloError | null>(null);
   const [orderCompleted, setorderCompleted] = useState<boolean>(false);
@@ -107,7 +107,7 @@ const CheckoutForm = () => {
 
   return (
     <>
-      {(cart || orderCompleted) ? (
+      {(cart || orderCompleted) && !syncError ? (
         <div className="container mx-auto">
           {/*	Order*/}
           <CartContents />
@@ -129,9 +129,9 @@ const CheckoutForm = () => {
         </div>
       ) : (
         <>
-          {!cart && (
+          {(!cart || syncError) && (
             <h1 className="text-2xl m-12 mt-24 font-bold text-center">
-              Ingen produkter i handlekurven
+              {syncError ? 'Kan ikke fortsette - handlekurven er ikke synkronisert med serveren' : 'Ingen produkter i handlekurven'}
             </h1>
           )}
           {orderCompleted && (

src/stores/cart.ts

@@ -26,10 +26,12 @@ export interface RootObject {
 interface CartState {
   cart: RootObject | null;
   isLoading: boolean;
+  syncError: boolean;
   setCart: (cart: RootObject | null) => void;
   updateCart: (newCart: RootObject) => void;
   updateProductQuantity: (cartKey: string, newQty: number) => void;
   removeProduct: (cartKey: string) => void;
+  setSyncError: (error: boolean) => void;
 }
 
 type CartPersist = {
@@ -41,7 +43,9 @@ const useCartStore = create<CartState>()(
     (set) => ({
   cart: null,
   isLoading: false, // Start with false since we'll show persisted data immediately
-  setCart: (cart: RootObject | null) => set({ cart, isLoading: false }),
+  syncError: false,
+  setCart: (cart: RootObject | null) => set({ cart, isLoading: false, syncError: false }),
+  setSyncError: (error: boolean) => set({ syncError: error }),
   updateCart: (newCart: RootObject) => {
     set({ cart: newCart });
   },