@eetech-commerce/cart-react 0.6.4 → 0.7.0

package/README.md

@@ -67,8 +67,8 @@ function Shop() {
 | `tenantSlug` | `string` | Yes | - | Your tenant identifier |
 | `cartApiUrl` | `string` | Yes | - | Base URL of the cart API |
 | `storageAdapter` | `StorageAdapter` | No | `localStorage` | Custom storage implementation |
-| `autoInitialize` | `boolean` | No | `true` | Auto-create cart on mount |
 | `queryClient` | `QueryClient` | No | - | Custom TanStack Query client instance |
+| `getAuthToken` | `() => Promise<string \| null>` | No | - | Async function returning the current auth token (enables authenticated carts) |
 
 ## Hooks Reference
 
@@ -82,7 +82,7 @@ function Shop() {
 | `useUpdateItemQty()` | Update item quantity |
 | `useRemoveItem()` | Remove an item from cart |
 | `useClearCart()` | Clear all items from cart |
-| `useInitializeCart()` | Manually initialize cart (for `autoInitialize={false}`) |
+| `useResetCart()` | Reset cart (clears session, creates fresh cart) |
 
 ### Checkout Hooks
 
@@ -167,46 +167,25 @@ function App() {
 }
 ```
 
-## Manual Cart Initialization
+## Resetting the Cart
 
-By default, `CartProvider` automatically creates a cart on mount. If you need more control over when the cart is created, set `autoInitialize={false}`:
+After a successful payment or when you need a fresh cart, use `useResetCart()`:
 
 ```tsx
-import {
-  CartProvider,
-  useInitializeCart,
-  useCartContext,
-} from '@eetech-commerce/cart-react';
+import { useResetCart } from '@eetech-commerce/cart-react';
 
-function App() {
-  return (
-    <CartProvider
-      tenantSlug="my-store"
-      cartApiUrl="https://cart.api.com"
-      autoInitialize={false}
-    >
-      <CartInitializer />
-      <Shop />
-    </CartProvider>
-  );
-}
-
-function CartInitializer() {
-  const { isInitializing } = useInitializeCart();
-  const { cartSessionId } = useCartContext();
+function PaymentSuccessPage() {
+  const { resetCart } = useResetCart();
 
-  if (isInitializing) {
-    return <div>Initializing cart...</div>;
-  }
+  useEffect(() => {
+    resetCart();
+  }, [resetCart]);
 
-  return null;
+  return <div>Payment successful!</div>;
 }
 ```
 
-This is useful when you want to:
-- Delay cart creation until user interaction
-- Initialize the cart conditionally based on route or user state
-- Handle initialization loading states explicitly
+`resetCart()` clears the current session, invalidates all cached queries, and creates a new cart.
 
 ## Using with Existing QueryClient
 

package/dist/index.d.ts

@@ -20,7 +20,8 @@ interface CartContextValue {
     cartSessionId: string | null;
     setCartSessionId: (id: string | null) => void;
     isInitializing: boolean;
-    setIsInitializing: (value: boolean) => void;
+    resetCart: () => Promise<void>;
+    getAuthToken?: () => Promise<string | null>;
 }
 declare function useCartContext(): CartContextValue;
 
@@ -261,6 +262,10 @@ type CartResponseDto = {
      * Public cart session identifier (nanoid)
      */
     sessionId: string;
+    /**
+     * Authenticated user ID (null for anonymous carts)
+     */
+    userId?: string | null;
     /**
      * Three-letter currency code (ISO 4217)
      */
@@ -912,8 +917,8 @@ declare function useClearCart(): {
     isPending: boolean;
     error: Error | null;
 };
-declare function useInitializeCart(): {
-    isInitializing: boolean;
+declare function useResetCart(): {
+    resetCart: () => Promise<void>;
 };
 
 declare function useVerifyCart(): {
@@ -1317,10 +1322,10 @@ interface CartProviderProps {
     tenantSlug: string;
     cartApiUrl: string;
     storageAdapter?: StorageAdapter;
-    autoInitialize?: boolean;
     /** Optional external QueryClient. If provided, CartProvider will not create its own. */
     queryClient?: QueryClient;
+    getAuthToken?: () => Promise<string | null>;
 }
-declare function CartProvider({ children, tenantSlug, cartApiUrl, storageAdapter, autoInitialize, queryClient, }: CartProviderProps): react_jsx_runtime.JSX.Element;
+declare function CartProvider({ children, tenantSlug, cartApiUrl, storageAdapter, queryClient, getAuthToken, }: CartProviderProps): react_jsx_runtime.JSX.Element;
 
-export { type CartContextValue, CartProvider, type CartProviderProps, type CartResponseDto, type CreateCheckoutDto, type CreateEmbeddedPaymentSessionDto, type CreatePaymentIntentDto, type EmbeddedPaymentSessionResponseDto, type LineItemResponseDto, type LoadStripeFn, type MutationCallbacks, type PaymentIntentResponseDto, type ShippingOptionDto, type ShippingRegionDto, type ShippingRegionsResponseDto, type ShippingSelectionDto, type StorageAdapter, type UpdateCheckoutDto, type VerificationResultDto, cartKeys, localStorageAdapter, paymentKeys, shippingKeys, useAddToCart, useCart, useCartContext, useClearCart, useCreateCart, useCreateCheckoutSession, useCreateEmbeddedCheckoutSession, useCreatePaymentIntent, useInitializeCart, usePaymentSession, useRemoveItem, useShippingOptions, useShippingRegions, useStripePromise, useUpdateCheckoutSession, useUpdateItemQty, useUpdateShippingSelections, useVerifyCart };
+export { type CartContextValue, CartProvider, type CartProviderProps, type CartResponseDto, type CreateCheckoutDto, type CreateEmbeddedPaymentSessionDto, type CreatePaymentIntentDto, type EmbeddedPaymentSessionResponseDto, type LineItemResponseDto, type LoadStripeFn, type MutationCallbacks, type PaymentIntentResponseDto, type ShippingOptionDto, type ShippingRegionDto, type ShippingRegionsResponseDto, type ShippingSelectionDto, type StorageAdapter, type UpdateCheckoutDto, type VerificationResultDto, cartKeys, localStorageAdapter, paymentKeys, shippingKeys, useAddToCart, useCart, useCartContext, useClearCart, useCreateCart, useCreateCheckoutSession, useCreateEmbeddedCheckoutSession, useCreatePaymentIntent, usePaymentSession, useRemoveItem, useResetCart, useShippingOptions, useShippingRegions, useStripePromise, useUpdateCheckoutSession, useUpdateItemQty, useUpdateShippingSelections, useVerifyCart };

package/dist/index.js

@@ -27,7 +27,7 @@ function useCartContext() {
 
 // src/hooks/cart.ts
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback } from "react";
 
 // src/generated/@tanstack/react-query.gen.ts
 import { queryOptions } from "@tanstack/react-query";
@@ -861,6 +861,12 @@ var client = createClient(createConfig());
 // src/generated/sdk.gen.ts
 var cartControllerCreateCartV1 = (options) => {
   return (options.client ?? client).post({
+    security: [
+      {
+        scheme: "bearer",
+        type: "http"
+      }
+    ],
     url: "/v1/t/{tenantSlug}/carts",
     ...options,
     headers: {
@@ -869,20 +875,50 @@ var cartControllerCreateCartV1 = (options) => {
     }
   });
 };
+var cartControllerGetActiveCartV1 = (options) => {
+  return (options.client ?? client).get({
+    security: [
+      {
+        scheme: "bearer",
+        type: "http"
+      }
+    ],
+    url: "/v1/t/{tenantSlug}/carts/me",
+    ...options
+  });
+};
 var cartControllerGetCartV1 = (options) => {
   return (options.client ?? client).get({
+    security: [
+      {
+        scheme: "bearer",
+        type: "http"
+      }
+    ],
     url: "/v1/t/{tenantSlug}/carts/{cartSessionId}",
     ...options
   });
 };
 var cartControllerClearCartV1 = (options) => {
   return (options.client ?? client).delete({
+    security: [
+      {
+        scheme: "bearer",
+        type: "http"
+      }
+    ],
     url: "/v1/t/{tenantSlug}/carts/{cartSessionId}/items",
     ...options
   });
 };
 var cartControllerAddItemV1 = (options) => {
   return (options.client ?? client).post({
+    security: [
+      {
+        scheme: "bearer",
+        type: "http"
+      }
+    ],
     url: "/v1/t/{tenantSlug}/carts/{cartSessionId}/items",
     ...options,
     headers: {
@@ -893,12 +929,24 @@ var cartControllerAddItemV1 = (options) => {
 };
 var cartControllerRemoveItemV1 = (options) => {
   return (options.client ?? client).delete({
+    security: [
+      {
+        scheme: "bearer",
+        type: "http"
+      }
+    ],
     url: "/v1/t/{tenantSlug}/carts/{cartSessionId}/items/{offerId}",
     ...options
   });
 };
 var cartControllerUpdateItemV1 = (options) => {
   return (options.client ?? client).patch({
+    security: [
+      {
+        scheme: "bearer",
+        type: "http"
+      }
+    ],
     url: "/v1/t/{tenantSlug}/carts/{cartSessionId}/items/{offerId}",
     ...options,
     headers: {
@@ -909,6 +957,12 @@ var cartControllerUpdateItemV1 = (options) => {
 };
 var checkoutControllerVerifyCartV1 = (options) => {
   return (options.client ?? client).post({
+    security: [
+      {
+        scheme: "bearer",
+        type: "http"
+      }
+    ],
     url: "/v1/t/{tenantSlug}/checkout/verify",
     ...options,
     headers: {
@@ -919,12 +973,24 @@ var checkoutControllerVerifyCartV1 = (options) => {
 };
 var checkoutControllerGetShippingRegionsV1 = (options) => {
   return (options.client ?? client).get({
+    security: [
+      {
+        scheme: "bearer",
+        type: "http"
+      }
+    ],
     url: "/v1/t/{tenantSlug}/checkout/shipping-regions",
     ...options
   });
 };
 var checkoutControllerUpdateCheckoutSessionV1 = (options) => {
   return (options.client ?? client).patch({
+    security: [
+      {
+        scheme: "bearer",
+        type: "http"
+      }
+    ],
     url: "/v1/t/{tenantSlug}/checkout/{cartSessionId}",
     ...options,
     headers: {
@@ -935,6 +1001,12 @@ var checkoutControllerUpdateCheckoutSessionV1 = (options) => {
 };
 var checkoutControllerCreateCheckoutSessionV1 = (options) => {
   return (options.client ?? client).post({
+    security: [
+      {
+        scheme: "bearer",
+        type: "http"
+      }
+    ],
     url: "/v1/t/{tenantSlug}/checkout/{cartSessionId}",
     ...options,
     headers: {
@@ -945,12 +1017,24 @@ var checkoutControllerCreateCheckoutSessionV1 = (options) => {
 };
 var checkoutControllerGetShippingOptionsV1 = (options) => {
   return (options.client ?? client).get({
+    security: [
+      {
+        scheme: "bearer",
+        type: "http"
+      }
+    ],
     url: "/v1/t/{tenantSlug}/checkout/{cartSessionId}/shipping-options",
     ...options
   });
 };
 var checkoutControllerUpdateShippingSelectionsV1 = (options) => {
   return (options.client ?? client).patch({
+    security: [
+      {
+        scheme: "bearer",
+        type: "http"
+      }
+    ],
     url: "/v1/t/{tenantSlug}/checkout/{cartSessionId}/shipping-selections",
     ...options,
     headers: {
@@ -967,6 +1051,12 @@ var tenantPublicControllerGetPublicKeyV1 = (options) => {
 };
 var paymentControllerCreateEmbeddedPaymentSessionV1 = (options) => {
   return (options.client ?? client).post({
+    security: [
+      {
+        scheme: "bearer",
+        type: "http"
+      }
+    ],
     url: "/v1/t/{tenantSlug}/payments/sessions/embedded",
     ...options,
     headers: {
@@ -977,6 +1067,12 @@ var paymentControllerCreateEmbeddedPaymentSessionV1 = (options) => {
 };
 var paymentControllerCreatePaymentIntentV1 = (options) => {
   return (options.client ?? client).post({
+    security: [
+      {
+        scheme: "bearer",
+        type: "http"
+      }
+    ],
     url: "/v1/t/{tenantSlug}/payments/intents",
     ...options,
     headers: {
@@ -987,6 +1083,12 @@ var paymentControllerCreatePaymentIntentV1 = (options) => {
 };
 var paymentControllerGetPaymentSessionV1 = (options) => {
   return (options.client ?? client).get({
+    security: [
+      {
+        scheme: "bearer",
+        type: "http"
+      }
+    ],
     url: "/v1/t/{tenantSlug}/payments/sessions/{id}",
     ...options
   });
@@ -1399,79 +1501,9 @@ function useClearCart() {
     error: mutation.error
   };
 }
-function useInitializeCart() {
-  const { tenantSlug, cartApiUrl, cartSessionId, setCartSessionId, setIsInitializing } = useCartContext();
-  const queryClient = useQueryClient();
-  const creatingCartRef = useRef(false);
-  const cartQuery = useQuery({
-    ...cartControllerGetCartV1Options({
-      path: {
-        tenantSlug,
-        cartSessionId
-      },
-      baseUrl: cartApiUrl
-    }),
-    enabled: !!cartSessionId,
-    retry: false
-  });
-  const createCartMutation = useMutation({
-    ...cartControllerCreateCartV1Mutation(),
-    onMutate: () => {
-      creatingCartRef.current = true;
-    },
-    onSuccess: (data) => {
-      setCartSessionId(data.sessionId);
-      queryClient.invalidateQueries({ queryKey: cartKeys.all() });
-      creatingCartRef.current = false;
-    },
-    onError: () => {
-      creatingCartRef.current = false;
-    }
-  });
-  useEffect(() => {
-    if (creatingCartRef.current) return;
-    if (cartSessionId) {
-      if (cartQuery.isError) {
-        setCartSessionId(null);
-        createCartMutation.mutate({
-          path: { tenantSlug },
-          body: { currency: "USD", metadata: {} },
-          baseUrl: cartApiUrl
-        });
-        return;
-      }
-      if (cartQuery.data?.completedAt) {
-        setCartSessionId(null);
-        createCartMutation.mutate({
-          path: { tenantSlug },
-          body: { currency: "USD", metadata: {} },
-          baseUrl: cartApiUrl
-        });
-        return;
-      }
-      if (cartQuery.data) {
-        setIsInitializing(false);
-      }
-      return;
-    }
-    createCartMutation.mutate({
-      path: { tenantSlug },
-      body: { currency: "USD", metadata: {} },
-      baseUrl: cartApiUrl
-    });
-  }, [
-    tenantSlug,
-    cartApiUrl,
-    cartSessionId,
-    cartQuery.isError,
-    cartQuery.data?.completedAt,
-    cartQuery.data,
-    setCartSessionId,
-    setIsInitializing,
-    createCartMutation
-  ]);
-  const isInitializing = cartQuery.isLoading || createCartMutation.isPending || !cartSessionId && !createCartMutation.isSuccess;
-  return { isInitializing };
+function useResetCart() {
+  const { resetCart } = useCartContext();
+  return { resetCart };
 }
 
 // src/hooks/checkout.ts
@@ -1706,21 +1738,32 @@ function usePaymentSession(sessionId) {
 }
 
 // src/providers/CartProvider.tsx
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { useCallback as useCallback4, useEffect as useEffect2, useMemo as useMemo2, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { QueryClient, QueryClientProvider, useQueryClient as useQueryClient3 } from "@tanstack/react-query";
+import { useCallback as useCallback4, useEffect, useMemo as useMemo2, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
 var STORAGE_KEY = "cartSessionId";
 function CartProviderInner({
   children,
   tenantSlug,
   cartApiUrl,
   storage,
-  autoInitialize
+  getAuthToken: getAuthToken2
 }) {
   const [cartSessionId, setCartSessionIdState] = useState(
     () => storage.get(STORAGE_KEY)
   );
-  const [isInitializing, setIsInitializing] = useState(autoInitialize ?? true);
+  const [isInitializing, setIsInitializing] = useState(true);
+  const queryClient = useQueryClient3();
+  const seedCartCache = useCallback4(
+    (cartData) => {
+      const queryKey = cartControllerGetCartV1QueryKey({
+        baseUrl: cartApiUrl,
+        path: { tenantSlug, cartSessionId: cartData.sessionId }
+      });
+      queryClient.setQueryData(queryKey, cartData);
+    },
+    [cartApiUrl, tenantSlug, queryClient]
+  );
   const setCartSessionId = useCallback4(
     (id) => {
       setCartSessionIdState(id);
@@ -1732,6 +1775,114 @@ function CartProviderInner({
     },
     [storage]
   );
+  const [accessToken, setAccessToken] = useState(null);
+  const authSettledRef = useRef(false);
+  const prevAuthenticatedRef = useRef(false);
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      const token = getAuthToken2 ? await getAuthToken2() : null;
+      if (cancelled) return;
+      setAccessToken(token);
+      if (!authSettledRef.current) {
+        authSettledRef.current = true;
+        prevAuthenticatedRef.current = !!token;
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  });
+  const isAuthenticated = !!accessToken;
+  const cancelInitRef = useRef(null);
+  const resetInProgressRef = useRef(false);
+  const initializeCart = useCallback4(
+    async ({ forceCreate = false } = {}) => {
+      cancelInitRef.current?.();
+      let cancelled = false;
+      cancelInitRef.current = () => {
+        cancelled = true;
+      };
+      setIsInitializing(true);
+      const token = getAuthToken2 ? await getAuthToken2() : null;
+      if (cancelled) return;
+      if (!forceCreate) {
+        if (token) {
+          try {
+            const res = await cartControllerGetActiveCartV1({ path: { tenantSlug } });
+            if (!cancelled && res.data) {
+              seedCartCache(res.data);
+              setCartSessionId(res.data.sessionId);
+              setIsInitializing(false);
+              return;
+            }
+          } catch {
+          }
+        } else {
+          const storedId = storage.get(STORAGE_KEY);
+          if (storedId) {
+            try {
+              const res = await cartControllerGetCartV1({
+                path: { tenantSlug, cartSessionId: storedId }
+              });
+              if (!cancelled && res.data && !res.data.completedAt) {
+                seedCartCache(res.data);
+                setCartSessionId(storedId);
+                setIsInitializing(false);
+                return;
+              }
+            } catch {
+            }
+            if (!cancelled) storage.remove(STORAGE_KEY);
+          }
+        }
+      }
+      if (cancelled) return;
+      try {
+        const res = await cartControllerCreateCartV1({
+          path: { tenantSlug },
+          body: { currency: "USD", metadata: {} }
+        });
+        if (!cancelled && res.data) {
+          seedCartCache(res.data);
+          setCartSessionId(res.data.sessionId);
+        }
+      } catch {
+      }
+      if (!cancelled) setIsInitializing(false);
+    },
+    [getAuthToken2, tenantSlug, storage, setCartSessionId, seedCartCache]
+  );
+  const mountedRef = useRef(false);
+  useEffect(() => {
+    if (mountedRef.current) return;
+    mountedRef.current = true;
+    if (resetInProgressRef.current) return;
+    initializeCart();
+  }, [initializeCart]);
+  const clearCartState = useCallback4(() => {
+    setCartSessionIdState(null);
+    storage.remove(STORAGE_KEY);
+    queryClient.removeQueries({ queryKey: cartKeys.all() });
+    queryClient.removeQueries({ queryKey: shippingKeys.all() });
+    queryClient.removeQueries({ queryKey: paymentKeys.all() });
+  }, [storage, queryClient]);
+  useEffect(() => {
+    if (!authSettledRef.current) return;
+    if (prevAuthenticatedRef.current === isAuthenticated) return;
+    prevAuthenticatedRef.current = isAuthenticated;
+    clearCartState();
+    initializeCart();
+  }, [isAuthenticated, clearCartState, initializeCart]);
+  const resetCart = useCallback4(async () => {
+    resetInProgressRef.current = true;
+    clearCartState();
+    try {
+      await initializeCart({ forceCreate: true });
+    } finally {
+      resetInProgressRef.current = false;
+    }
+  }, [clearCartState, initializeCart]);
   const contextValue = useMemo2(
     () => ({
       tenantSlug,
@@ -1740,22 +1891,21 @@ function CartProviderInner({
       cartSessionId,
       setCartSessionId,
       isInitializing,
-      setIsInitializing
+      resetCart,
+      getAuthToken: getAuthToken2
     }),
-    [tenantSlug, cartApiUrl, storage, cartSessionId, setCartSessionId, isInitializing]
+    [
+      tenantSlug,
+      cartApiUrl,
+      storage,
+      cartSessionId,
+      setCartSessionId,
+      isInitializing,
+      resetCart,
+      getAuthToken2
+    ]
   );
-  return /* @__PURE__ */ jsxs(CartContext.Provider, { value: contextValue, children: [
-    autoInitialize !== false && /* @__PURE__ */ jsx(AutoInitializer, {}),
-    children
-  ] });
-}
-function AutoInitializer() {
-  const { isInitializing } = useInitializeCart();
-  const { setIsInitializing } = useCartContext();
-  useEffect2(() => {
-    setIsInitializing(isInitializing);
-  }, [isInitializing, setIsInitializing]);
-  return null;
+  return /* @__PURE__ */ jsx(CartContext.Provider, { value: contextValue, children });
 }
 var internalQueryClient = null;
 function getOrCreateQueryClient() {
@@ -1774,13 +1924,19 @@ function CartProvider({
   tenantSlug,
   cartApiUrl,
   storageAdapter,
-  autoInitialize = true,
-  queryClient
+  queryClient,
+  getAuthToken: getAuthToken2
 }) {
   const storage = storageAdapter ?? localStorageAdapter;
-  useEffect2(() => {
-    client.setConfig({ baseUrl: cartApiUrl });
-  }, [cartApiUrl]);
+  useMemo2(() => {
+    client.setConfig({
+      baseUrl: cartApiUrl,
+      auth: getAuthToken2 ? async () => {
+        const token = await getAuthToken2();
+        return token ?? void 0;
+      } : void 0
+    });
+  }, [cartApiUrl, getAuthToken2]);
   const [effectiveQueryClient] = useState(() => queryClient ?? getOrCreateQueryClient());
   const inner = /* @__PURE__ */ jsx(
     CartProviderInner,
@@ -1788,7 +1944,7 @@ function CartProvider({
       tenantSlug,
       cartApiUrl,
       storage,
-      autoInitialize,
+      getAuthToken: getAuthToken2,
       children
     }
   );
@@ -1811,9 +1967,9 @@ export {
   useCreateCheckoutSession,
   useCreateEmbeddedCheckoutSession,
   useCreatePaymentIntent,
-  useInitializeCart,
   usePaymentSession,
   useRemoveItem,
+  useResetCart,
   useShippingOptions,
   useShippingRegions,
   useStripePromise,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eetech-commerce/cart-react",
-  "version": "0.6.4",
+  "version": "0.7.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -42,12 +42,12 @@
     "@hey-api/openapi-ts": "0.87.5",
     "@stripe/stripe-js": ">=2.0.0",
     "@testing-library/react": "^16.0.0",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "jsdom": "^25.0.0",
     "msw": "^2.0.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "tsup": "^8.0.0",
     "typescript": "^5.0.0",
     "vitest": "^2.0.0"