@payloadcms/plugin-ecommerce 3.67.0-internal.87c53da → 3.68.0-canary.0

package/dist/react/provider/index.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { deepMergeSimple } from 'payload/shared';
 import * as qs from 'qs-esm';
-import React, { createContext, use, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { createContext, use, useCallback, useEffect, useMemo, useRef, useState, useTransition } from 'react';
 const defaultContext = {
     addItem: async ()=>{},
     clearCart: async ()=>{},
@@ -28,6 +28,7 @@ const defaultContext = {
     decrementItem: async ()=>{},
     incrementItem: async ()=>{},
     initiatePayment: async ()=>{},
+    isLoading: false,
     paymentMethods: [],
     removeItem: async ()=>{},
     setCurrency: ()=>{},
@@ -54,6 +55,7 @@ export const EcommerceProvider = ({ addressesSlug = 'addresses', api, cartsSlug
     } : defaultLocalStorage;
     const { apiRoute = '/api', cartsFetchQuery = {}, serverURL = '' } = api || {};
     const baseAPIURL = `${serverURL}${apiRoute}`;
+    const [isLoading, startTransition] = useTransition();
     const [user, setUser] = useState(null);
     const [addresses, setAddresses] = useState();
     const hasRendered = useRef(false);
@@ -62,6 +64,10 @@ export const EcommerceProvider = ({ addressesSlug = 'addresses', api, cartsSlug
    * This is used to identify the cart in the database or local storage.
    * It can be null if no cart has been created yet.
    */ const [cartID, setCartID] = useState();
+    /**
+   * The secret for accessing guest carts without authentication.
+   * This is generated when a guest user creates a cart.
+   */ const [cartSecret, setCartSecret] = useState(undefined);
     const [cart, setCart] = useState();
     const [selectedCurrency, setSelectedCurrency] = useState(()=>currenciesConfig.supportedCurrencies.find((c)=>c.code === currenciesConfig.defaultCurrency));
     const [selectedPaymentMethod, setSelectedPaymentMethod] = useState(null);
@@ -110,16 +116,28 @@ export const EcommerceProvider = ({ addressesSlug = 'addresses', api, cartsSlug
         if (data.error) {
             throw new Error(`Cart creation error: ${data.error}`);
         }
+        // Store the secret for guest cart access
+        if (!user && data.doc?.secret) {
+            setCartSecret(data.doc.secret);
+        }
         return data.doc;
     }, [
         baseAPIURL,
         cartQuery,
         cartsSlug,
         selectedCurrency.code,
-        user?.id
+        user
     ]);
-    const getCart = useCallback(async (cartID)=>{
-        const query = qs.stringify(cartQuery);
+    const getCart = useCallback(async (cartID, options)=>{
+        const secret = options?.secret;
+        // Build query params with secret if provided
+        const queryParams = {
+            ...cartQuery,
+            ...secret ? {
+                secret
+            } : {}
+        };
+        const query = qs.stringify(queryParams);
         const response = await fetch(`${baseAPIURL}/${cartsSlug}/${cartID}?${query}`, {
             credentials: 'include',
             headers: {
@@ -142,7 +160,14 @@ export const EcommerceProvider = ({ addressesSlug = 'addresses', api, cartsSlug
         cartsSlug
     ]);
     const updateCart = useCallback(async (cartID, data)=>{
-        const query = qs.stringify(cartQuery);
+        // Build query params with secret if provided
+        const queryParams = {
+            ...cartQuery,
+            ...cartSecret ? {
+                secret: cartSecret
+            } : {}
+        };
+        const query = qs.stringify(queryParams);
         const response = await fetch(`${baseAPIURL}/${cartsSlug}/${cartID}?${query}`, {
             body: JSON.stringify(data),
             credentials: 'include',
@@ -160,10 +185,17 @@ export const EcommerceProvider = ({ addressesSlug = 'addresses', api, cartsSlug
     }, [
         baseAPIURL,
         cartQuery,
-        cartsSlug
+        cartsSlug,
+        cartSecret
     ]);
     const deleteCart = useCallback(async (cartID)=>{
-        const response = await fetch(`${baseAPIURL}/${cartsSlug}/${cartID}`, {
+        // Build query params with secret if provided
+        const queryParams = cartSecret ? {
+            secret: cartSecret
+        } : {};
+        const query = qs.stringify(queryParams);
+        const url = `${baseAPIURL}/${cartsSlug}/${cartID}${query ? `?${query}` : ''}`;
+        const response = await fetch(url, {
             credentials: 'include',
             headers: {
                 'Content-Type': 'application/json'
@@ -172,196 +204,255 @@ export const EcommerceProvider = ({ addressesSlug = 'addresses', api, cartsSlug
         });
         if (!response.ok) {
             const errorText = await response.text();
-            throw new Error(`Failed to update cart: ${errorText}`);
+            throw new Error(`Failed to delete cart: ${errorText}`);
         }
         setCart(undefined);
         setCartID(undefined);
+        setCartSecret(undefined);
     }, [
         baseAPIURL,
-        cartsSlug
+        cartsSlug,
+        cartSecret
     ]);
+    // Persist cart ID and secret to localStorage
     useEffect(()=>{
         if (hasRendered.current) {
-            if (syncLocalStorage && cartID) {
-                localStorage.setItem(localStorageConfig.key, cartID);
+            if (syncLocalStorage) {
+                if (cartID) {
+                    localStorage.setItem(localStorageConfig.key, cartID);
+                } else {
+                    localStorage.removeItem(localStorageConfig.key);
+                }
+                if (cartSecret) {
+                    localStorage.setItem(`${localStorageConfig.key}_secret`, cartSecret);
+                } else {
+                    localStorage.removeItem(`${localStorageConfig.key}_secret`);
+                }
             }
         }
     }, [
         cartID,
+        cartSecret,
         localStorageConfig.key,
         syncLocalStorage
     ]);
     const addItem = useCallback(async (item, quantity = 1)=>{
-        if (cartID) {
-            const existingCart = await getCart(cartID);
-            if (!existingCart) {
-                // console.error(`Cart with ID "${cartID}" not found`)
-                setCartID(undefined);
-                setCart(undefined);
-                return;
-            }
-            // Check if the item already exists in the cart
-            const existingItemIndex = existingCart.items?.findIndex((cartItem)=>{
-                const productID = typeof cartItem.product === 'object' ? cartItem.product.id : item.product;
-                const variantID = cartItem.variant && typeof cartItem.variant === 'object' ? cartItem.variant.id : item.variant;
-                return productID === item.product && (item.variant && variantID ? variantID === item.variant : true);
-            }) ?? -1;
-            let updatedItems = existingCart.items ? [
-                ...existingCart.items
-            ] : [];
-            if (existingItemIndex !== -1) {
-                // If the item exists, update its quantity
-                updatedItems[existingItemIndex].quantity = updatedItems[existingItemIndex].quantity + quantity;
-                // Update the cart with the new items
-                await updateCart(cartID, {
-                    items: updatedItems
-                });
-            } else {
-                // If the item does not exist, add it to the cart
-                updatedItems = [
-                    ...existingCart.items ?? [],
-                    {
-                        ...item,
-                        quantity
+        return new Promise((resolve)=>{
+            startTransition(async ()=>{
+                if (cartID) {
+                    const existingCart = await getCart(cartID, {
+                        secret: cartSecret
+                    });
+                    if (!existingCart) {
+                        // console.error(`Cart with ID "${cartID}" not found`)
+                        setCartID(undefined);
+                        setCart(undefined);
+                        return;
                     }
-                ];
-            }
-            // Update the cart with the new items
-            await updateCart(cartID, {
-                items: updatedItems
-            });
-        } else {
-            // If no cartID exists, create a new cart
-            const newCart = await createCart({
-                items: [
-                    {
-                        ...item,
-                        quantity
+                    // Check if the item already exists in the cart
+                    const existingItemIndex = existingCart.items?.findIndex((cartItem)=>{
+                        const productID = typeof cartItem.product === 'object' ? cartItem.product.id : item.product;
+                        const variantID = cartItem.variant && typeof cartItem.variant === 'object' ? cartItem.variant.id : item.variant;
+                        return productID === item.product && (item.variant && variantID ? variantID === item.variant : true);
+                    }) ?? -1;
+                    let updatedItems = existingCart.items ? [
+                        ...existingCart.items
+                    ] : [];
+                    if (existingItemIndex !== -1) {
+                        // If the item exists, update its quantity
+                        updatedItems[existingItemIndex].quantity = updatedItems[existingItemIndex].quantity + quantity;
+                        // Update the cart with the new items
+                        await updateCart(cartID, {
+                            items: updatedItems
+                        });
+                    } else {
+                        // If the item does not exist, add it to the cart
+                        updatedItems = [
+                            ...existingCart.items ?? [],
+                            {
+                                ...item,
+                                quantity
+                            }
+                        ];
                     }
-                ]
+                    // Update the cart with the new items
+                    await updateCart(cartID, {
+                        items: updatedItems
+                    });
+                } else {
+                    // If no cartID exists, create a new cart
+                    const newCart = await createCart({
+                        items: [
+                            {
+                                ...item,
+                                quantity
+                            }
+                        ]
+                    });
+                    setCartID(newCart.id);
+                    setCart(newCart);
+                }
+                resolve();
             });
-            setCartID(newCart.id);
-            setCart(newCart);
-        }
+        });
     }, [
         cartID,
+        cartSecret,
         createCart,
         getCart,
+        startTransition,
         updateCart
     ]);
     const removeItem = useCallback(async (targetID)=>{
-        if (!cartID) {
-            return;
-        }
-        const existingCart = await getCart(cartID);
-        if (!existingCart) {
-            // console.error(`Cart with ID "${cartID}" not found`)
-            setCartID(undefined);
-            setCart(undefined);
-            return;
-        }
-        // Check if the item already exists in the cart
-        const existingItemIndex = existingCart.items?.findIndex((cartItem)=>cartItem.id === targetID) ?? -1;
-        if (existingItemIndex !== -1) {
-            // If the item exists, remove it from the cart
-            const updatedItems = existingCart.items ? [
-                ...existingCart.items
-            ] : [];
-            updatedItems.splice(existingItemIndex, 1);
-            // Update the cart with the new items
-            await updateCart(cartID, {
-                items: updatedItems
+        return new Promise((resolve)=>{
+            startTransition(async ()=>{
+                if (!cartID) {
+                    resolve();
+                    return;
+                }
+                const existingCart = await getCart(cartID, {
+                    secret: cartSecret
+                });
+                if (!existingCart) {
+                    // console.error(`Cart with ID "${cartID}" not found`)
+                    setCartID(undefined);
+                    setCart(undefined);
+                    resolve();
+                    return;
+                }
+                // Check if the item already exists in the cart
+                const existingItemIndex = existingCart.items?.findIndex((cartItem)=>cartItem.id === targetID) ?? -1;
+                if (existingItemIndex !== -1) {
+                    // If the item exists, remove it from the cart
+                    const updatedItems = existingCart.items ? [
+                        ...existingCart.items
+                    ] : [];
+                    updatedItems.splice(existingItemIndex, 1);
+                    // Update the cart with the new items
+                    await updateCart(cartID, {
+                        items: updatedItems
+                    });
+                }
+                resolve();
             });
-        }
+        });
     }, [
         cartID,
+        cartSecret,
         getCart,
+        startTransition,
         updateCart
     ]);
     const incrementItem = useCallback(async (targetID)=>{
-        if (!cartID) {
-            return;
-        }
-        const existingCart = await getCart(cartID);
-        if (!existingCart) {
-            // console.error(`Cart with ID "${cartID}" not found`)
-            setCartID(undefined);
-            setCart(undefined);
-            return;
-        }
-        // Check if the item already exists in the cart
-        const existingItemIndex = existingCart.items?.findIndex((cartItem)=>cartItem.id === targetID) ?? -1;
-        let updatedItems = existingCart.items ? [
-            ...existingCart.items
-        ] : [];
-        if (existingItemIndex !== -1) {
-            // If the item exists, increment its quantity
-            updatedItems[existingItemIndex].quantity = updatedItems[existingItemIndex].quantity + 1 // Increment by 1
-            ;
-            // Update the cart with the new items
-            await updateCart(cartID, {
-                items: updatedItems
-            });
-        } else {
-            // If the item does not exist, add it to the cart with quantity 1
-            updatedItems = [
-                ...existingCart.items ?? [],
-                {
-                    product: targetID,
-                    quantity: 1
+        return new Promise((resolve)=>{
+            startTransition(async ()=>{
+                if (!cartID) {
+                    resolve();
+                    return;
                 }
-            ];
-            // Update the cart with the new items
-            await updateCart(cartID, {
-                items: updatedItems
+                const existingCart = await getCart(cartID, {
+                    secret: cartSecret
+                });
+                if (!existingCart) {
+                    // console.error(`Cart with ID "${cartID}" not found`)
+                    setCartID(undefined);
+                    setCart(undefined);
+                    resolve();
+                    return;
+                }
+                // Check if the item already exists in the cart
+                const existingItemIndex = existingCart.items?.findIndex((cartItem)=>cartItem.id === targetID) ?? -1;
+                let updatedItems = existingCart.items ? [
+                    ...existingCart.items
+                ] : [];
+                if (existingItemIndex !== -1) {
+                    // If the item exists, increment its quantity
+                    updatedItems[existingItemIndex].quantity = updatedItems[existingItemIndex].quantity + 1; // Increment by 1
+                    // Update the cart with the new items
+                    await updateCart(cartID, {
+                        items: updatedItems
+                    });
+                } else {
+                    // If the item does not exist, add it to the cart with quantity 1
+                    updatedItems = [
+                        ...existingCart.items ?? [],
+                        {
+                            product: targetID,
+                            quantity: 1
+                        }
+                    ];
+                    // Update the cart with the new items
+                    await updateCart(cartID, {
+                        items: updatedItems
+                    });
+                }
+                resolve();
             });
-        }
+        });
     }, [
         cartID,
+        cartSecret,
         getCart,
+        startTransition,
         updateCart
     ]);
     const decrementItem = useCallback(async (targetID)=>{
-        if (!cartID) {
-            return;
-        }
-        const existingCart = await getCart(cartID);
-        if (!existingCart) {
-            // console.error(`Cart with ID "${cartID}" not found`)
-            setCartID(undefined);
-            setCart(undefined);
-            return;
-        }
-        // Check if the item already exists in the cart
-        const existingItemIndex = existingCart.items?.findIndex((cartItem)=>cartItem.id === targetID) ?? -1;
-        const updatedItems = existingCart.items ? [
-            ...existingCart.items
-        ] : [];
-        if (existingItemIndex !== -1) {
-            // If the item exists, decrement its quantity
-            updatedItems[existingItemIndex].quantity = updatedItems[existingItemIndex].quantity - 1 // Decrement by 1
-            ;
-            // If the quantity reaches 0, remove the item from the cart
-            if (updatedItems[existingItemIndex].quantity <= 0) {
-                updatedItems.splice(existingItemIndex, 1);
-            }
-            // Update the cart with the new items
-            await updateCart(cartID, {
-                items: updatedItems
+        return new Promise((resolve)=>{
+            startTransition(async ()=>{
+                if (!cartID) {
+                    resolve();
+                    return;
+                }
+                const existingCart = await getCart(cartID, {
+                    secret: cartSecret
+                });
+                if (!existingCart) {
+                    // console.error(`Cart with ID "${cartID}" not found`)
+                    setCartID(undefined);
+                    setCart(undefined);
+                    resolve();
+                    return;
+                }
+                // Check if the item already exists in the cart
+                const existingItemIndex = existingCart.items?.findIndex((cartItem)=>cartItem.id === targetID) ?? -1;
+                const updatedItems = existingCart.items ? [
+                    ...existingCart.items
+                ] : [];
+                if (existingItemIndex !== -1) {
+                    // If the item exists, decrement its quantity
+                    updatedItems[existingItemIndex].quantity = updatedItems[existingItemIndex].quantity - 1; // Decrement by 1
+                    // If the quantity reaches 0, remove the item from the cart
+                    if (updatedItems[existingItemIndex].quantity <= 0) {
+                        updatedItems.splice(existingItemIndex, 1);
+                    }
+                    // Update the cart with the new items
+                    await updateCart(cartID, {
+                        items: updatedItems
+                    });
+                }
+                resolve();
             });
-        }
+        });
     }, [
         cartID,
+        cartSecret,
         getCart,
+        startTransition,
         updateCart
     ]);
     const clearCart = useCallback(async ()=>{
-        if (cartID) {
-            await deleteCart(cartID);
-        }
+        return new Promise((resolve)=>{
+            startTransition(async ()=>{
+                if (cartID) {
+                    await deleteCart(cartID);
+                }
+                resolve();
+            });
+        });
     }, [
         cartID,
-        deleteCart
+        deleteCart,
+        startTransition
     ]);
     const setCurrency = useCallback((currency)=>{
         if (selectedCurrency.code === currency) {
@@ -629,21 +720,29 @@ export const EcommerceProvider = ({ addressesSlug = 'addresses', api, cartsSlug
         getAddresses,
         debug
     ]);
-    // If localStorage is enabled, we can add logic to persist the cart state
+    // If localStorage is enabled, restore cart from storage
     useEffect(()=>{
         if (!hasRendered.current) {
             if (syncLocalStorage) {
-                const storedCart = localStorage.getItem(localStorageConfig.key);
-                if (storedCart) {
-                    getCart(storedCart).then((fetchedCart)=>{
+                const storedCartID = localStorage.getItem(localStorageConfig.key);
+                const storedSecret = localStorage.getItem(`${localStorageConfig.key}_secret`);
+                if (storedCartID) {
+                    getCart(storedCartID, {
+                        secret: storedSecret || undefined
+                    }).then((fetchedCart)=>{
                         setCart(fetchedCart);
-                        setCartID(storedCart);
+                        setCartID(storedCartID);
+                        if (storedSecret) {
+                            setCartSecret(storedSecret);
+                        }
                     }).catch((_)=>{
                         // console.error('Error fetching cart from localStorage:', error)
-                        // If there's an error fetching the cart, we can clear it from localStorage
+                        // If there's an error fetching the cart, clear it from localStorage
                         localStorage.removeItem(localStorageConfig.key);
+                        localStorage.removeItem(`${localStorageConfig.key}_secret`);
                         setCartID(undefined);
                         setCart(undefined);
+                        setCartSecret(undefined);
                     });
                 }
             }
@@ -702,6 +801,7 @@ export const EcommerceProvider = ({ addressesSlug = 'addresses', api, cartsSlug
             decrementItem,
             incrementItem,
             initiatePayment,
+            isLoading,
             paymentMethods,
             removeItem,
             selectedPaymentMethod,
@@ -749,7 +849,7 @@ export const useCurrency = ()=>{
     };
 };
 export function useCart() {
-    const { addItem, cart, clearCart, decrementItem, incrementItem, removeItem } = useEcommerce();
+    const { addItem, cart, clearCart, decrementItem, incrementItem, isLoading, removeItem } = useEcommerce();
     if (!addItem) {
         throw new Error('useCart must be used within an EcommerceProvider');
     }
@@ -759,29 +859,32 @@ export function useCart() {
         clearCart,
         decrementItem,
         incrementItem,
+        isLoading,
         removeItem
     };
 }
 export const usePayments = ()=>{
-    const { confirmOrder, initiatePayment, paymentMethods, selectedPaymentMethod } = useEcommerce();
+    const { confirmOrder, initiatePayment, isLoading, paymentMethods, selectedPaymentMethod } = useEcommerce();
     if (!initiatePayment) {
         throw new Error('usePayments must be used within an EcommerceProvider');
     }
     return {
         confirmOrder,
         initiatePayment,
+        isLoading,
         paymentMethods,
         selectedPaymentMethod
     };
 };
 export function useAddresses() {
-    const { addresses, createAddress, updateAddress } = useEcommerce();
+    const { addresses, createAddress, isLoading, updateAddress } = useEcommerce();
     if (!createAddress) {
         throw new Error('usePayments must be used within an EcommerceProvider');
     }
     return {
         addresses: addresses,
         createAddress,
+        isLoading,
         updateAddress
     };
 }