@tapcart/mobile-components 0.15.2 → 0.16.1

package/dist/components/hooks/use-nosto-recommendation.test.js

@@ -14,13 +14,13 @@ import { useProducts } from "./use-products";
 jest.mock("./use-products", () => ({
     useProducts: jest.fn(),
 }));
-// Mock fetch for GraphQL queries
+// Mock fetch for GraphQL queries. `newSession` is intentionally NOT handled:
+// after TICKET-5763 nothing may ever mint a session, so a newSession request
+// would be a bug — fail loudly if one is ever issued.
 global.fetch = jest.fn((url, options) => {
     const body = JSON.parse(options === null || options === void 0 ? void 0 : options.body);
     if (body.query.includes("newSession")) {
-        return Promise.resolve({
-            json: () => Promise.resolve({ data: { newSession: "mockSessionId" } }),
-        });
+        return Promise.reject(new Error("newSession must never be called (TICKET-5763)"));
     }
     if (body.query.includes("GetFrontPageRecommendations")) {
         return Promise.resolve({
@@ -93,6 +93,31 @@ global.fetch = jest.fn((url, options) => {
     }
     return Promise.reject(new Error("Unknown query"));
 });
+// Asserts the invariant that must hold for EVERY test: no request ever asks
+// Nosto to mint a new session.
+const expectNoNewSessionCall = () => {
+    const calls = global.fetch.mock.calls;
+    const mintedSession = calls.some(([, options]) => {
+        const raw = options === null || options === void 0 ? void 0 : options.body;
+        return typeof raw === "string" && raw.includes("newSession");
+    });
+    expect(mintedSession).toBe(false);
+};
+const setCidCookie = (value) => {
+    document.cookie = `2c.cId=${value}`;
+};
+const clearCookies = () => {
+    document.cookie = "2c.cId=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
+};
+const recentSession = (sessionId) => ({
+    sessionId,
+    lastSessionEventTimestamp: Date.now(),
+});
+const flush = () => __awaiter(void 0, void 0, void 0, function* () {
+    yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+        yield new Promise((resolve) => setTimeout(resolve, 0));
+    }));
+});
 describe("useNostoRecommendations", () => {
     const mockIntegrations = [
         {
@@ -104,233 +129,218 @@ describe("useNostoRecommendations", () => {
     const mockBaseURL = "http://mockbaseurl.com";
     beforeEach(() => {
         jest.clearAllMocks();
+        clearCookies();
         useProducts.mockReturnValue({
             products: [{ id: "1", name: "Product 1" }],
             isLoading: false,
             error: null,
         });
     });
-    it("should return front page recommendations if productIds is empty and slotId is provided", () => __awaiter(void 0, void 0, void 0, function* () {
-        const slotId = "mockSlotId";
-        const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, slotId, "US", undefined, undefined, undefined));
-        // Initial state check
+    afterEach(() => {
+        // Invariant across every path: never mint a Nosto session.
+        expectNoNewSessionCall();
+        clearCookies();
+    });
+    it("uses the passed-in session for front page recommendations", () => __awaiter(void 0, void 0, void 0, function* () {
+        const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, "mockSlotId", "US", undefined, undefined, undefined, undefined, undefined, recentSession("passed-session")));
         expect(result.current.isLoading).toBe(true);
-        // Wait for all promises with act
-        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
-            yield new Promise((resolve) => setTimeout(resolve, 0));
-        }));
-        // Check final state
+        yield flush();
         expect(result.current.isLoading).toBe(false);
         expect(result.current.error).toBe(null);
+        // Native session was used -> personalization surfaced as "session".
+        expect(result.current.personalization).toBe("session");
         expect(useProducts).toHaveBeenCalledWith({
             productIds: ["front-page-id-1"],
             baseURL: mockBaseURL,
             productHandles: [],
-            queryVariables: {
-                appId: undefined,
-                country: "US",
-            },
+            queryVariables: { appId: undefined, country: "US" },
             mock: false,
         });
     }));
-    it("should return best sellers recommendations if productIds is empty and slotId is not provided", () => __awaiter(void 0, void 0, void 0, function* () {
-        const slotId = "";
-        const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, slotId, "US", undefined, undefined));
-        // Initial state check
+    it("falls back to the 2c.cId cookie when no session is passed (front page)", () => __awaiter(void 0, void 0, void 0, function* () {
+        setCidCookie("cookie-cid");
+        const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, "mockSlotId", "US"));
         expect(result.current.isLoading).toBe(true);
-        // Wait for all promises with act
-        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
-            yield new Promise((resolve) => setTimeout(resolve, 0));
-        }));
-        // Check final state
+        yield flush();
         expect(result.current.isLoading).toBe(false);
-        expect(result.current.error).toBe(null);
+        // Cookie-derived session resolves, so the personalized front page query runs.
+        expect(result.current.personalization).toBe("cookie");
         expect(useProducts).toHaveBeenCalledWith({
-            productIds: ["best-seller-1"],
+            productIds: ["front-page-id-1"],
             baseURL: mockBaseURL,
             productHandles: [],
-            queryVariables: {
-                appId: undefined,
-                country: "US",
-            },
+            queryVariables: { appId: undefined, country: "US" },
             mock: false,
         });
     }));
-    it("should return best sellers recommendations if productIds is not empty, Best Sellers is the recommendation type and slotId is not provided", () => __awaiter(void 0, void 0, void 0, function* () {
-        const slotId = "";
-        const productIds = ["mockProductId"];
-        const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, slotId, "US", NostoRecommendationsType.BEST_SELLERS, productIds));
-        // Initial state check
+    it("falls back to bestSellers on the front page when there is no session and no cookie", () => __awaiter(void 0, void 0, void 0, function* () {
+        const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, "mockSlotId", "US"));
         expect(result.current.isLoading).toBe(true);
-        // Wait for all promises with act
-        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
-            yield new Promise((resolve) => setTimeout(resolve, 0));
-        }));
-        // Check final state
+        yield flush();
         expect(result.current.isLoading).toBe(false);
-        expect(result.current.error).toBe(null);
+        // No identity available -> personalization "none".
+        expect(result.current.personalization).toBe("none");
+        // No session-based query fired; bestSellers fallback engaged.
         expect(useProducts).toHaveBeenCalledWith({
             productIds: ["best-seller-1"],
             baseURL: mockBaseURL,
             productHandles: [],
-            queryVariables: {
-                appId: undefined,
-                country: "US",
-            },
+            queryVariables: { appId: undefined, country: "US" },
             mock: false,
         });
     }));
-    it("should return default front page recommendations if slotId is provided but layoutType is not", () => __awaiter(void 0, void 0, void 0, function* () {
-        const slotId = "mockSlotId";
-        const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, slotId, "US"));
-        // Initial state check
+    it("upgrades from bestSellers to personalized once a late 2c.cId cookie appears", () => __awaiter(void 0, void 0, void 0, function* () {
+        // The WebView Nosto SDK mints the cookie asynchronously, so a carousel can
+        // mount before it exists. The bounded poll must pick up the late cookie and
+        // re-resolve from the bestSellers fallback to the personalized front page.
+        jest.useFakeTimers();
+        try {
+            const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, "mockSlotId", "US"));
+            // No cookie at mount -> "none" + bestSellers fallback.
+            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+                yield jest.advanceTimersByTimeAsync(0);
+            }));
+            expect(result.current.personalization).toBe("none");
+            expect(useProducts).toHaveBeenLastCalledWith(expect.objectContaining({ productIds: ["best-seller-1"] }));
+            // Cookie minted after mount; the 250ms poll picks it up and refetches.
+            setCidCookie("late-cookie-cid");
+            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+                yield jest.advanceTimersByTimeAsync(250);
+            }));
+            expect(result.current.personalization).toBe("cookie");
+            expect(useProducts).toHaveBeenLastCalledWith(expect.objectContaining({ productIds: ["front-page-id-1"] }));
+        }
+        finally {
+            jest.useRealTimers();
+        }
+    }));
+    it("returns best sellers when productIds is empty and slotId is not provided", () => __awaiter(void 0, void 0, void 0, function* () {
+        const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, "", "US"));
         expect(result.current.isLoading).toBe(true);
-        // Wait for all promises with act
-        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
-            yield new Promise((resolve) => setTimeout(resolve, 0));
-        }));
-        // Check final state
+        yield flush();
         expect(result.current.isLoading).toBe(false);
         expect(result.current.error).toBe(null);
         expect(useProducts).toHaveBeenCalledWith({
-            productIds: ["front-page-id-1"],
+            productIds: ["best-seller-1"],
             baseURL: mockBaseURL,
             productHandles: [],
-            queryVariables: {
-                appId: undefined,
-                country: "US",
-            },
+            queryVariables: { appId: undefined, country: "US" },
             mock: false,
         });
     }));
-    it("should return the correct recommendations for best sellers", () => __awaiter(void 0, void 0, void 0, function* () {
-        const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, "", "US", NostoRecommendationsType.BEST_SELLERS, undefined, undefined));
-        // Initial state check
+    it("returns best sellers when BEST_SELLERS type and productIds are provided but no slotId", () => __awaiter(void 0, void 0, void 0, function* () {
+        // Stable reference so the hook's effect deps don't change across renders.
+        const productIds = ["mockProductId"];
+        const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, "", "US", NostoRecommendationsType.BEST_SELLERS, productIds));
         expect(result.current.isLoading).toBe(true);
-        // Wait for all promises with act
-        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
-            yield new Promise((resolve) => setTimeout(resolve, 0));
-        }));
-        // Check final state
+        yield flush();
         expect(result.current.isLoading).toBe(false);
-        expect(result.current.error).toBe(null);
         expect(useProducts).toHaveBeenCalledWith({
             productIds: ["best-seller-1"],
             baseURL: mockBaseURL,
             productHandles: [],
-            queryVariables: {
-                appId: undefined,
-                country: "US",
-            },
+            queryVariables: { appId: undefined, country: "US" },
             mock: false,
         });
     }));
-    it("should return the related recommendations when only productIds and a recommendation type are provided on a non-home layout", () => __awaiter(void 0, void 0, void 0, function* () {
+    it("returns product page recommendations when a session, productIds and slotId are provided", () => __awaiter(void 0, void 0, void 0, function* () {
         const productIds = ["mockProductId"];
-        const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, "", "US", NostoRecommendationsType.VIEWED_TOGETHER, productIds, undefined));
-        // Initial state check
+        const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, "mockSlotId", "US", NostoRecommendationsType.VIEWED_TOGETHER, productIds, undefined, undefined, undefined, recentSession("passed-session")));
         expect(result.current.isLoading).toBe(true);
-        // Wait for all promises with act
-        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
-            yield new Promise((resolve) => setTimeout(resolve, 0));
-        }));
-        // Check final state
+        yield flush();
+        expect(result.current.isLoading).toBe(false);
+        expect(useProducts).toHaveBeenCalledWith({
+            productIds: ["product-page-id-1"],
+            baseURL: mockBaseURL,
+            productHandles: [],
+            queryVariables: { appId: undefined, country: "US" },
+            mock: false,
+        });
+    }));
+    it("returns the related products PDP fallback (no slotId, non-category type)", () => __awaiter(void 0, void 0, void 0, function* () {
+        const productIds = ["mockProductId"];
+        const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, "", "US", NostoRecommendationsType.VIEWED_TOGETHER, productIds));
+        expect(result.current.isLoading).toBe(true);
+        yield flush();
         expect(result.current.isLoading).toBe(false);
-        expect(result.current.error).toBe(null);
         expect(useProducts).toHaveBeenCalledWith({
             productIds: ["related-1"],
             baseURL: mockBaseURL,
             productHandles: [],
-            queryVariables: {
-                appId: undefined,
-                country: "US",
-            },
+            queryVariables: { appId: undefined, country: "US" },
             mock: false,
         });
     }));
-    it("should return the correct recommendations when productIds and slotIds are provided", () => __awaiter(void 0, void 0, void 0, function* () {
-        const slotId = "mockSlotId";
+    it("returns the category PDP fallback when a session is available and type is VIEWED_CATEGORY", () => __awaiter(void 0, void 0, void 0, function* () {
         const productIds = ["mockProductId"];
-        const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, slotId, "US", NostoRecommendationsType.VIEWED_TOGETHER, productIds, undefined));
-        // Initial state check
+        const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, "", "US", NostoRecommendationsType.VIEWED_CATEGORY, productIds, undefined, undefined, undefined, recentSession("passed-session")));
         expect(result.current.isLoading).toBe(true);
-        // Wait for all promises with act
-        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
-            yield new Promise((resolve) => setTimeout(resolve, 0));
-        }));
-        // Check final state
+        yield flush();
         expect(result.current.isLoading).toBe(false);
-        expect(result.current.error).toBe(null);
         expect(useProducts).toHaveBeenCalledWith({
-            productIds: ["product-page-id-1"],
+            productIds: ["category-page-id-1"],
             baseURL: mockBaseURL,
             productHandles: [],
-            queryVariables: {
-                appId: undefined,
-                country: "US",
-            },
+            queryVariables: { appId: undefined, country: "US" },
             mock: false,
         });
     }));
-    it("should return the related products fallback recommendations when productIds are provided and no slotId and a type other than viewed_category and best_sellers is provided", () => __awaiter(void 0, void 0, void 0, function* () {
+    it("falls back to bestSellers for a VIEWED_CATEGORY PDP when there is no session", () => __awaiter(void 0, void 0, void 0, function* () {
         const productIds = ["mockProductId"];
-        const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, "", "US", NostoRecommendationsType.VIEWED_TOGETHER, productIds, undefined));
-        // Initial state check
+        const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, "", "US", NostoRecommendationsType.VIEWED_CATEGORY, productIds));
         expect(result.current.isLoading).toBe(true);
-        // Wait for all promises with act
-        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
-            yield new Promise((resolve) => setTimeout(resolve, 0));
-        }));
-        // Check final state
+        yield flush();
         expect(result.current.isLoading).toBe(false);
-        expect(result.current.error).toBe(null);
         expect(useProducts).toHaveBeenCalledWith({
-            productIds: ["related-1"],
+            productIds: ["best-seller-1"],
             baseURL: mockBaseURL,
             productHandles: [],
-            queryVariables: {
-                appId: undefined,
-                country: "US",
-            },
+            queryVariables: { appId: undefined, country: "US" },
             mock: false,
         });
     }));
-    it("should return the category fallback recommendations when no slotId, productIds are provided and a recommendation type of viewed_category is provided", () => __awaiter(void 0, void 0, void 0, function* () {
+    it("serves bestSellers (not an error) for a VIEWED_CATEGORY PDP when the cId cookie is malformed", () => __awaiter(void 0, void 0, void 0, function* () {
+        // A bad percent-encoding makes decodeURIComponent throw; the shared reader
+        // must return null (never the raw value) so this routes into the designed
+        // bestSellers fallback instead of escaping into the hook's error state.
+        document.cookie = "2c.cId=%";
         const productIds = ["mockProductId"];
-        const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, "", "US", NostoRecommendationsType.VIEWED_CATEGORY, productIds, undefined));
-        // Initial state check
+        const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, "", "US", NostoRecommendationsType.VIEWED_CATEGORY, productIds));
         expect(result.current.isLoading).toBe(true);
-        // Wait for all promises with act
-        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
-            yield new Promise((resolve) => setTimeout(resolve, 0));
-        }));
-        // Check final state
+        yield flush();
         expect(result.current.isLoading).toBe(false);
         expect(result.current.error).toBe(null);
+        expect(result.current.personalization).toBe("none");
         expect(useProducts).toHaveBeenCalledWith({
-            productIds: ["category-page-id-1"],
+            productIds: ["best-seller-1"],
             baseURL: mockBaseURL,
             productHandles: [],
-            queryVariables: {
-                appId: undefined,
-                country: "US",
-            },
+            queryVariables: { appId: undefined, country: "US" },
             mock: false,
         });
     }));
-    it("should handle loading state", () => __awaiter(void 0, void 0, void 0, function* () {
+    it("defaults to best sellers if productIds are empty but a non-BestSellers type is used", () => __awaiter(void 0, void 0, void 0, function* () {
+        const productIds = [];
+        const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, "", "US", NostoRecommendationsType.VIEWED_TOGETHER, productIds));
+        expect(result.current.isLoading).toBe(true);
+        yield flush();
+        expect(result.current.isLoading).toBe(false);
+        expect(useProducts).toHaveBeenCalledWith({
+            productIds: ["best-seller-1"],
+            baseURL: mockBaseURL,
+            productHandles: [],
+            queryVariables: { appId: undefined, country: "US" },
+            mock: false,
+        });
+    }));
+    it("handles loading state", () => __awaiter(void 0, void 0, void 0, function* () {
         const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, "", "US"));
-        // Check initial loading state
         expect(result.current.isLoading).toBe(true);
-        // Wait for all state updates to complete
-        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
-            yield new Promise((resolve) => setTimeout(resolve, 0));
-        }));
-        // Verify loading has finished
+        yield flush();
         expect(result.current.isLoading).toBe(false);
         expect(result.current.error).toBe(null);
     }));
-    it("should handle error state", () => __awaiter(void 0, void 0, void 0, function* () {
+    it("handles error state", () => __awaiter(void 0, void 0, void 0, function* () {
         const mockError = () => "Failed to fetch products";
         useProducts.mockReturnValue({
             products: [],
@@ -338,58 +348,45 @@ describe("useNostoRecommendations", () => {
             error: mockError,
         });
         const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL));
-        // Initial state check
         expect(result.current.isLoading).toBe(true);
-        // Wait for all promises and state updates to resolve
-        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
-            yield new Promise((resolve) => setTimeout(resolve, 0));
-        }));
-        // Verify final error state
+        yield flush();
         expect(result.current.isLoading).toBe(false);
         expect(result.current.error).toBe(mockError);
         expect(result.current.recommendations).toEqual([]);
     }));
-    it("should default to best sellers if productIds are empty but a recommendation type other than Best Sellers is used", () => __awaiter(void 0, void 0, void 0, function* () {
-        const productIds = [];
-        const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, "", "US", NostoRecommendationsType.VIEWED_TOGETHER, productIds, undefined));
-        // Initial state check
+    it("returns an empty array if skip is true", () => __awaiter(void 0, void 0, void 0, function* () {
+        const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, "", "US", NostoRecommendationsType.BEST_SELLERS, undefined, true));
         expect(result.current.isLoading).toBe(true);
-        // Wait for all promises with act
-        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
-            yield new Promise((resolve) => setTimeout(resolve, 0));
-        }));
-        // Check final state
+        yield flush();
         expect(result.current.isLoading).toBe(false);
-        expect(result.current.error).toBe(null);
         expect(useProducts).toHaveBeenCalledWith({
-            productIds: ["best-seller-1"],
+            productIds: [],
             baseURL: mockBaseURL,
             productHandles: [],
-            queryVariables: {
-                appId: undefined,
-                country: "US",
-            },
+            queryVariables: { appId: undefined, country: "US" },
             mock: false,
         });
+        // skip must short-circuit before any Nosto request and before any
+        // bestSellers fallback resolves — the empty-productIds call above always
+        // matches on first render, so these guard against a broken skip.
+        expect(global.fetch).not.toHaveBeenCalled();
+        expect(useProducts).not.toHaveBeenCalledWith(expect.objectContaining({ productIds: ["best-seller-1"] }));
     }));
-    it("should return an empty array if skip is true", () => __awaiter(void 0, void 0, void 0, function* () {
-        const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, "", "US", NostoRecommendationsType.BEST_SELLERS, undefined, true));
-        // Initial state check
+    it("ignores an expired session and falls back without minting a new one", () => __awaiter(void 0, void 0, void 0, function* () {
+        const staleSession = {
+            sessionId: "stale-session",
+            lastSessionEventTimestamp: Date.now() - 60 * 60 * 1000, // 1h ago
+        };
+        const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, "mockSlotId", "US", undefined, undefined, undefined, undefined, undefined, staleSession));
         expect(result.current.isLoading).toBe(true);
-        // Wait for all promises with act
-        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
-            yield new Promise((resolve) => setTimeout(resolve, 0));
-        }));
-        // Check final state
+        yield flush();
         expect(result.current.isLoading).toBe(false);
+        // Expired session is dropped by the hook -> null sessionId -> bestSellers.
         expect(useProducts).toHaveBeenCalledWith({
-            productIds: [],
+            productIds: ["best-seller-1"],
             baseURL: mockBaseURL,
             productHandles: [],
-            queryVariables: {
-                appId: undefined,
-                country: "US",
-            },
+            queryVariables: { appId: undefined, country: "US" },
             mock: false,
         });
     }));

package/dist/components/hooks/use-products.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-products.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-products.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAK1C,KAAK,GAAG,GAAG,MAAM,CAAA;AACjB,KAAK,cAAc,GAAG;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAA;AACxD,KAAK,gBAAgB,GAAG;IACtB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;IACzB,OAAO,EAAE,GAAG,CAAA;IACZ,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,KAAK,OAAO,CAAC,GAAG,CAAC,CAAA;IAC1E,UAAU,CAAC,EAAE,cAAc,EAAE,CAAA;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC,CAAA;AACD,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,KAAK,EAAE,GAAG,CAAA;IACV,SAAS,EAAE,OAAO,CAAA;IAClB,YAAY,EAAE,OAAO,CAAA;IACrB,YAAY,EAAE,CAAC,OAAO,EAAE,OAAO,KAC3B;QACE,EAAE,EAAE,MAAM,CAAA;QACV,MAAM,EAAE,MAAM,CAAA;KACf,GACD,SAAS,CAAA;CACd,CAAA;AAqDD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,GAAG,iBAAiB,CA0J7E"}
+{"version":3,"file":"use-products.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-products.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAK1C,KAAK,GAAG,GAAG,MAAM,CAAA;AACjB,KAAK,cAAc,GAAG;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAA;AACxD,KAAK,gBAAgB,GAAG;IACtB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;IACzB,OAAO,EAAE,GAAG,CAAA;IACZ,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,KAAK,OAAO,CAAC,GAAG,CAAC,CAAA;IAC1E,UAAU,CAAC,EAAE,cAAc,EAAE,CAAA;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC,CAAA;AACD,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,KAAK,EAAE,GAAG,CAAA;IACV,SAAS,EAAE,OAAO,CAAA;IAClB,YAAY,EAAE,OAAO,CAAA;IACrB,YAAY,EAAE,CAAC,OAAO,EAAE,OAAO,KAC3B;QACE,EAAE,EAAE,MAAM,CAAA;QACV,MAAM,EAAE,MAAM,CAAA;KACf,GACD,SAAS,CAAA;CACd,CAAA;AAqDD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,GAAG,iBAAiB,CAqL7E"}

package/dist/components/hooks/use-products.js

@@ -108,16 +108,36 @@ export function useProducts(props) {
         const productsArray = Array.isArray(data) ? data : data.products || [];
         const cachedProducts = productsArray
             .filter((product) => !!product)
-            .map((product) => {
-            productsLocalStorage.setCacheItem(product);
-            return product;
-        });
+            .map((product) => productsLocalStorage.setCacheItem(product) || product);
         // Return either just the products array or an object with spread contents and overridden products
         return Array.isArray(data)
             ? cachedProducts
             : Object.assign(Object.assign({}, data), { products: cachedProducts });
     }));
     const fetcher = (props === null || props === void 0 ? void 0 : props.fetcher) || defaultFetcher;
+    // Reset local product state when the requested product identity changes so
+    // stale or partial state from a previously viewed product cannot carry over.
+    const requestedProductKey = React.useMemo(() => {
+        var _a, _b, _c;
+        return JSON.stringify({
+            productIds: (_a = props === null || props === void 0 ? void 0 : props.productIds) !== null && _a !== void 0 ? _a : [],
+            productHandles: (_b = props === null || props === void 0 ? void 0 : props.productHandles) !== null && _b !== void 0 ? _b : [],
+            variantIds: (_c = props === null || props === void 0 ? void 0 : props.variantIds) !== null && _c !== void 0 ? _c : [],
+        });
+    }, [props === null || props === void 0 ? void 0 : props.productIds, props === null || props === void 0 ? void 0 : props.productHandles, props === null || props === void 0 ? void 0 : props.variantIds]);
+    const hasMountedRef = React.useRef(false);
+    React.useEffect(() => {
+        if (!hasMountedRef.current) {
+            hasMountedRef.current = true;
+            return;
+        }
+        setProductResponse(productsLocalStorage.getCacheItems({
+            productIds: props === null || props === void 0 ? void 0 : props.productIds,
+            productHandles: props === null || props === void 0 ? void 0 : props.productHandles,
+        }));
+        setIsProductResponseReady(false);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [requestedProductKey]);
     const { data, error, isLoading } = useSWR(url ? [url, body] : null, ([url, body]) => fetcher(url, body));
     const cacheProduct = (product) => {
         const cachedProduct = productsLocalStorage.setCacheItem(product);

package/dist/components/hooks/use-products.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=use-products.test.d.ts.map

package/dist/components/hooks/use-products.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-products.test.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-products.test.tsx"],"names":[],"mappings":""}