@tapcart/mobile-components 0.16.0 → 0.16.1

package/dist/components/hooks/use-nosto-recommendation.d.ts

@@ -7,6 +7,9 @@ export declare enum NostoRecommendationsType {
     BEST_SELLERS = "BEST_SELLERS",
     VIEWED_CATEGORY = "VIEWED_CATEGORY"
 }
+export declare const NOSTO_CID_COOKIE_NAME = "2c.cId";
+export declare const readCookie: (name: string) => string | null;
+export type NostoPersonalization = "session" | "cookie" | "none";
 export declare function useNostoRecommendations(integrations: Integrations, baseURL: string, slotId?: string, country?: string, recommendationsType?: NostoRecommendationsType | "", productIds?: string[], skip?: boolean, mockFallback?: boolean, mockFallbackAppId?: string, session?: {
     sessionId: string;
     lastSessionEventTimestamp: number;
@@ -15,5 +18,6 @@ export declare function useNostoRecommendations(integrations: Integrations, base
     isLoading: boolean;
     error: any;
     isEmpty: boolean;
+    personalization: NostoPersonalization;
 };
 //# sourceMappingURL=use-nosto-recommendation.d.ts.map

package/dist/components/hooks/use-nosto-recommendation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-nosto-recommendation.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-nosto-recommendation.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAe/C,oBAAY,wBAAwB;IAClC,eAAe,oBAAoB;IACnC,eAAe,oBAAoB;IACnC,qBAAqB,0BAA0B;IAC/C,WAAW,gBAAgB;IAC3B,YAAY,iBAAiB;IAC7B,eAAe,oBAAoB;CACpC;AAwTD,wBAAgB,uBAAuB,CACrC,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,MAAM,EACf,MAAM,SAAK,EACX,OAAO,SAAO,EACd,mBAAmB,CAAC,EAAE,wBAAwB,GAAG,EAAE,EACnD,UAAU,CAAC,EAAE,MAAM,EAAE,EACrB,IAAI,CAAC,EAAE,OAAO,EACd,YAAY,CAAC,EAAE,OAAO,EACtB,iBAAiB,CAAC,EAAE,MAAM,EAC1B,OAAO,CAAC,EAAE;IACR,SAAS,EAAE,MAAM,CAAA;IACjB,yBAAyB,EAAE,MAAM,CAAA;CAClC;;;;;EAwDF"}
+{"version":3,"file":"use-nosto-recommendation.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-nosto-recommendation.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAc/C,oBAAY,wBAAwB;IAClC,eAAe,oBAAoB;IACnC,eAAe,oBAAoB;IACnC,qBAAqB,0BAA0B;IAC/C,WAAW,gBAAgB;IAC3B,YAAY,iBAAiB;IAC7B,eAAe,oBAAoB;CACpC;AA6CD,eAAO,MAAM,qBAAqB,WAAW,CAAA;AAM7C,eAAO,MAAM,UAAU,SAAU,MAAM,KAAG,MAAM,GAAG,IAgBlD,CAAA;AAiBD,MAAM,MAAM,oBAAoB,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAA;AAsVhE,wBAAgB,uBAAuB,CACrC,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,MAAM,EACf,MAAM,SAAK,EACX,OAAO,SAAO,EACd,mBAAmB,CAAC,EAAE,wBAAwB,GAAG,EAAE,EACnD,UAAU,CAAC,EAAE,MAAM,EAAE,EACrB,IAAI,CAAC,EAAE,OAAO,EACd,YAAY,CAAC,EAAE,OAAO,EACtB,iBAAiB,CAAC,EAAE,MAAM,EAC1B,OAAO,CAAC,EAAE;IACR,SAAS,EAAE,MAAM,CAAA;IACjB,yBAAyB,EAAE,MAAM,CAAA;CAClC;;;;;;EAyDF"}

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

@@ -10,7 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { useState, useEffect, useMemo } from "react";
 import { useProducts } from "./use-products";
-import { bestSellersRecommendationsQuery, categoryPageRecommendationsQuery, getFrontPageRecommendationsQuery, getProductPageRecommendationsQuery, getRelatedProductsRecommendationsQuery, newSessionQuery, } from "./use-nosto-recommendation.queries";
+import { bestSellersRecommendationsQuery, categoryPageRecommendationsQuery, getFrontPageRecommendationsQuery, getProductPageRecommendationsQuery, getRelatedProductsRecommendationsQuery, } from "./use-nosto-recommendation.queries";
 export var NostoRecommendationsType;
 (function (NostoRecommendationsType) {
     NostoRecommendationsType["BOUGHT_TOGETHER"] = "BOUGHT_TOGETHER";
@@ -40,35 +40,75 @@ const fetchNosto = (nostoKey, graphqlBody, mode) => __awaiter(void 0, void 0, vo
 const getProductIdsFromPageResponse = (pageResponse) => {
     return ((pageResponse === null || pageResponse === void 0 ? void 0 : pageResponse.flatMap((page) => page.primary).filter((item) => item && item.productId).map((item) => item.productId)) || []);
 };
-const resolveSessionId = (nostoKey, optionalSessionId) => __awaiter(void 0, void 0, void 0, function* () {
+// The Nosto ev1 customer id cookie, minted by the WebView Nosto JS SDK.
+// Exported as the single source of truth so app-side consumers read the exact
+// same cookie with the exact same parsing semantics (TICKET-5763).
+export const NOSTO_CID_COOKIE_NAME = "2c.cId";
+// SSR-safe cookie reader. Returns null when `document` is unavailable, the
+// cookie is absent, or its value is malformed (decodeURIComponent throws) —
+// never the raw value, so a corrupt cookie routes into the designed no-cID
+// fallbacks instead of minting a bogus server-side identity.
+export const readCookie = (name) => {
+    if (typeof document === "undefined") {
+        return null;
+    }
+    const escapedName = name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    const match = document.cookie.match(new RegExp(`(?:^|; )${escapedName}=([^;]*)`));
+    if (!match) {
+        return null;
+    }
+    try {
+        return decodeURIComponent(match[1]);
+    }
+    catch (_a) {
+        return null;
+    }
+};
+// Reads the Nosto ev1 customer id (2c.cId) minted by the WebView Nosto JS SDK.
+const readCidCookie = () => readCookie(NOSTO_CID_COOKIE_NAME);
+// Single source of truth for the Nosto session/customer id: the passed-in
+// session (from native storage), else the ev1 `2c.cId` cookie, else null.
+// Never mints a new session — that would split customer identity (TICKET-5763).
+const resolveSessionId = (optionalSessionId) => {
+    return optionalSessionId || readCidCookie() || null;
+};
+const resolvePersonalization = (optionalSessionId) => {
     if (optionalSessionId) {
-        return optionalSessionId;
+        return "session";
     }
-    else {
-        const sessionData = yield fetchNosto(nostoKey, newSessionQuery);
-        return sessionData.data.newSession;
+    if (readCidCookie()) {
+        return "cookie";
     }
-});
+    return "none";
+};
 const fetchFrontPageRecommendations = (nostoKey, slotId, optionalSessionId) => __awaiter(void 0, void 0, void 0, function* () {
     var _a, _b, _c;
-    // Fetch sessionId
-    const sessionId = yield resolveSessionId(nostoKey, optionalSessionId);
+    const sessionId = resolveSessionId(optionalSessionId);
+    // No cID available yet: skip the session-based query so the caller's
+    // non-personalized fallback (bestSellers) engages.
+    if (!sessionId) {
+        return [];
+    }
     // Main recommendation query
     const body = getFrontPageRecommendationsQuery(sessionId, slotId);
     const response = yield fetchNosto(nostoKey, body, "cors");
     return getProductIdsFromPageResponse((_c = (_b = (_a = response.data) === null || _a === void 0 ? void 0 : _a.updateSession) === null || _b === void 0 ? void 0 : _b.pages) === null || _c === void 0 ? void 0 : _c.forFrontPage);
 });
-const fetchProductPageRecommendations = (nostoKey, productId, slotId, optionalSessionId) => __awaiter(void 0, void 0, void 0, function* () {
+const fetchProductPageRecommendations = (nostoKey, productId, slotId, resolvedSessionId) => __awaiter(void 0, void 0, void 0, function* () {
     var _d, _e, _f;
-    const sessionId = yield resolveSessionId(nostoKey, optionalSessionId);
-    const body = getProductPageRecommendationsQuery(sessionId, productId, slotId);
+    if (!resolvedSessionId) {
+        return [];
+    }
+    const body = getProductPageRecommendationsQuery(resolvedSessionId, productId, slotId);
     const response = yield fetchNosto(nostoKey, body, "cors");
     return getProductIdsFromPageResponse((_f = (_e = (_d = response.data) === null || _d === void 0 ? void 0 : _d.updateSession) === null || _e === void 0 ? void 0 : _e.pages) === null || _f === void 0 ? void 0 : _f.forProductPage);
 });
-const fetchCategoryPageRecommendations = (nostoKey, sourceCollectionTitle, optionalSessionId) => __awaiter(void 0, void 0, void 0, function* () {
+const fetchCategoryPageRecommendations = (nostoKey, sourceCollectionTitle, resolvedSessionId) => __awaiter(void 0, void 0, void 0, function* () {
     var _g, _h, _j;
-    const sessionId = yield resolveSessionId(nostoKey, optionalSessionId);
-    const body = categoryPageRecommendationsQuery(sessionId, sourceCollectionTitle);
+    if (!resolvedSessionId) {
+        return [];
+    }
+    const body = categoryPageRecommendationsQuery(resolvedSessionId, sourceCollectionTitle);
     const response = yield fetchNosto(nostoKey, body, "cors");
     return getProductIdsFromPageResponse((_j = (_h = (_g = response.data) === null || _g === void 0 ? void 0 : _g.updateSession) === null || _h === void 0 ? void 0 : _h.pages) === null || _j === void 0 ? void 0 : _j.forCategoryPage);
 });
@@ -86,10 +126,15 @@ const fetchRelatedProductsRecommendations = (nostoKey, recommendationsType, prod
     const recommendedProductIds = ((_s = (_r = (_q = (_p = response === null || response === void 0 ? void 0 : response.data) === null || _p === void 0 ? void 0 : _p.recos) === null || _q === void 0 ? void 0 : _q.related) === null || _r === void 0 ? void 0 : _r.primary) === null || _s === void 0 ? void 0 : _s.map((item) => item.productId)) || [];
     return recommendedProductIds;
 });
-const fetchPDPFallbackRecommendations = (nostoKey, productId, recommendationsType = NostoRecommendationsType.BOUGHT_TOGETHER, sessionId) => __awaiter(void 0, void 0, void 0, function* () {
+const fetchPDPFallbackRecommendations = (nostoKey, productId, recommendationsType = NostoRecommendationsType.BOUGHT_TOGETHER, resolvedSessionId) => __awaiter(void 0, void 0, void 0, function* () {
     switch (recommendationsType) {
         case NostoRecommendationsType.VIEWED_CATEGORY:
-            return fetchCategoryPageRecommendations(nostoKey, productId, sessionId);
+            // Category recos require a session; without a cID serve bestSellers
+            // rather than returning nothing.
+            if (!resolvedSessionId) {
+                return fetchBestSellersRecommendations(nostoKey);
+            }
+            return fetchCategoryPageRecommendations(nostoKey, productId, resolvedSessionId);
         case NostoRecommendationsType.BEST_SELLERS:
             return fetchBestSellersRecommendations(nostoKey);
         default:
@@ -115,20 +160,24 @@ const fetchHomeRecommendations = (nostoKey, slotId, sessionId) => __awaiter(void
     return productIdRecommendations;
 });
 const fetchPDPRecommendations = (nostoKey, productId, slotId, recommendationsType = NostoRecommendationsType.BOUGHT_TOGETHER, sessionId) => __awaiter(void 0, void 0, void 0, function* () {
+    // Resolve the session/cID once for the whole PDP fetch and thread it through
+    // both helpers, so a single cookie parse serves the product-page query and
+    // its category/bestSellers fallback.
+    const resolvedSessionId = resolveSessionId(sessionId);
     let productIdRecommendations = [];
     if (slotId) {
         try {
-            productIdRecommendations = yield fetchProductPageRecommendations(nostoKey, productId, slotId, sessionId);
+            productIdRecommendations = yield fetchProductPageRecommendations(nostoKey, productId, slotId, resolvedSessionId);
             if (productIdRecommendations.length === 0) {
-                productIdRecommendations = yield fetchPDPFallbackRecommendations(nostoKey, productId, recommendationsType, sessionId);
+                productIdRecommendations = yield fetchPDPFallbackRecommendations(nostoKey, productId, recommendationsType, resolvedSessionId);
             }
         }
         catch (error) {
-            productIdRecommendations = yield fetchPDPFallbackRecommendations(nostoKey, productId, recommendationsType, sessionId);
+            productIdRecommendations = yield fetchPDPFallbackRecommendations(nostoKey, productId, recommendationsType, resolvedSessionId);
         }
     }
     else {
-        productIdRecommendations = yield fetchPDPFallbackRecommendations(nostoKey, productId, recommendationsType, sessionId);
+        productIdRecommendations = yield fetchPDPFallbackRecommendations(nostoKey, productId, recommendationsType, resolvedSessionId);
     }
     return productIdRecommendations;
 });
@@ -148,7 +197,38 @@ function useNostoRecommendationsProductIds(nostoKey, slotId = "", recommendation
     const [recommendedProductIds, setRecommendedProductIds] = useState([]);
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState(null);
+    const [personalization, setPersonalization] = useState("none");
+    // When there's no native session, identity comes from the ev1 `2c.cId`
+    // cookie — but the WebView Nosto SDK mints it asynchronously (the SSR
+    // initializer explicitly polls for it). Track it in state and bounded-poll
+    // for a late cookie so a carousel mounted before the cookie exists upgrades
+    // from the bestSellers fallback to personalized results once it appears,
+    // instead of settling on `personalization: "none"` for the mount's lifetime.
+    // This value is purely a re-render trigger: personalization and the fetch
+    // helpers each re-read the cookie themselves, preserving source labeling.
+    const [cookieCid, setCookieCid] = useState(() => readCidCookie());
+    useEffect(() => {
+        // A native session is authoritative and a cookie already present needs no
+        // watching; only poll while we have no identity yet.
+        if (sessionId || cookieCid)
+            return;
+        // Mirror the SSR initializer's window: 250ms cadence, 60s hard stop.
+        let elapsed = 0;
+        const interval = setInterval(() => {
+            elapsed += 250;
+            const cId = readCidCookie();
+            if (cId) {
+                setCookieCid(cId);
+                clearInterval(interval);
+            }
+            else if (elapsed >= 60000) {
+                clearInterval(interval);
+            }
+        }, 250);
+        return () => clearInterval(interval);
+    }, [sessionId, cookieCid]);
     useEffect(() => {
+        setPersonalization(resolvePersonalization(sessionId));
         function fetchNostoData() {
             return __awaiter(this, void 0, void 0, function* () {
                 try {
@@ -170,11 +250,23 @@ function useNostoRecommendationsProductIds(nostoKey, slotId = "", recommendation
             });
         }
         fetchNostoData();
-    }, [nostoKey, slotId, recommendationsType, productIds, skip, sessionId]);
+        // `cookieCid` is a late-cookie refetch trigger; `sessionId` still drives
+        // personalization + resolution so the identity source stays correctly
+        // labeled (a cookie-sourced id must not read as "session").
+    }, [
+        nostoKey,
+        slotId,
+        recommendationsType,
+        productIds,
+        skip,
+        sessionId,
+        cookieCid,
+    ]);
     return {
         recommendedProductIds,
         isLoading,
         error,
+        personalization,
     };
 }
 export function useNostoRecommendations(integrations, baseURL, slotId = "", country = "US", recommendationsType, productIds, skip, mockFallback, mockFallbackAppId, session) {
@@ -189,7 +281,7 @@ export function useNostoRecommendations(integrations, baseURL, slotId = "", coun
             Date.now() - NOSTO_SESSION_EXPIRATION_TIME) {
         sessionId = session.sessionId;
     }
-    const { recommendedProductIds, isLoading, error } = useNostoRecommendationsProductIds(nostoKey, slotId, recommendationsType, productIds, skip, sessionId);
+    const { recommendedProductIds, isLoading, error, personalization } = useNostoRecommendationsProductIds(nostoKey, slotId, recommendationsType, productIds, skip, sessionId);
     const shouldMock = useMemo(() => recommendedProductIds.length === 0 && !isLoading && mockFallback, [recommendedProductIds, isLoading, mockFallback]);
     const appId = shouldMock ? mockFallbackAppId : undefined;
     const { products, error: productsError, isLoading: productsLoading, } = useProducts({
@@ -207,5 +299,6 @@ export function useNostoRecommendations(integrations, baseURL, slotId = "", coun
         isLoading: isLoading || productsLoading,
         error: error || productsError,
         isEmpty: products.length === 0,
+        personalization,
     };
 }

package/dist/components/hooks/use-nosto-recommendation.queries.d.ts

@@ -43,6 +43,5 @@ export declare const getProductPageRecommendationsQuery: (sessionId: string, pro
 export declare const categoryPageRecommendationsQuery: (sessionId: string, sourceCollectionTitle: string) => string;
 export declare const bestSellersRecommendationsQuery: string;
 export declare const getRelatedProductsRecommendationsQuery: (recommendationsType: NostoRecommendationsType, productIds: string[]) => string;
-export declare const newSessionQuery: string;
 export {};
 //# sourceMappingURL=use-nosto-recommendation.queries.d.ts.map

package/dist/components/hooks/use-nosto-recommendation.queries.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-nosto-recommendation.queries.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-nosto-recommendation.queries.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAA;AAErE,KAAK,iBAAiB,CAAC,CAAC,SAAS,MAAM,IAAI;IACzC,IAAI,CAAC,EAAE;QACL,aAAa,CAAC,EAAE;YACd,KAAK,CAAC,EAAE;iBACL,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC;oBACd,OAAO,EAAE,KAAK,CAAC;wBAAE,SAAS,EAAE,MAAM,CAAA;qBAAE,CAAC,CAAA;iBACtC,CAAC;aACH,CAAA;SACF,CAAA;KACF,CAAA;CACF,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG,iBAAiB,CAAC,cAAc,CAAC,CAAA;AACtE,MAAM,MAAM,wBAAwB,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,CAAA;AAC1E,MAAM,MAAM,yBAAyB,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,CAAA;AAE5E,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,CAAC,EAAE;QACL,KAAK,CAAC,EAAE;YACN,OAAO,CAAC,EAAE;gBACR,OAAO,EAAE,KAAK,CAAC;oBAAE,IAAI,EAAE,MAAM,CAAC;oBAAC,SAAS,EAAE,MAAM,CAAA;iBAAE,CAAC,CAAA;aACpD,CAAA;SACF,CAAA;KACF,CAAA;CACF,CAAA;AACD,MAAM,MAAM,4BAA4B,GAAG;IACzC,IAAI,CAAC,EAAE;QACL,KAAK,CAAC,EAAE;YACN,OAAO,CAAC,EAAE;gBACR,OAAO,EAAE,KAAK,CAAC;oBAAE,SAAS,EAAE,MAAM,CAAA;iBAAE,CAAC,CAAA;aACtC,CAAA;SACF,CAAA;KACF,CAAA;CACF,CAAA;AAED,eAAO,MAAM,gCAAgC,cAChC,MAAM,WACR,MAAM,WAkCb,CAAA;AAEJ,eAAO,MAAM,kCAAkC,cAClC,MAAM,aACN,MAAM,WACR,MAAM,WAsCb,CAAA;AAEJ,eAAO,MAAM,gCAAgC,cAChC,MAAM,yBACM,MAAM,WAsC3B,CAAA;AAEJ,eAAO,MAAM,+BAA+B,QAe1C,CAAA;AAEF,eAAO,MAAM,sCAAsC,wBAC5B,wBAAwB,cACjC,MAAM,EAAE,WAsBlB,CAAA;AAEJ,eAAO,MAAM,eAAe,QAE1B,CAAA"}
+{"version":3,"file":"use-nosto-recommendation.queries.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-nosto-recommendation.queries.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAA;AAErE,KAAK,iBAAiB,CAAC,CAAC,SAAS,MAAM,IAAI;IACzC,IAAI,CAAC,EAAE;QACL,aAAa,CAAC,EAAE;YACd,KAAK,CAAC,EAAE;iBACL,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC;oBACd,OAAO,EAAE,KAAK,CAAC;wBAAE,SAAS,EAAE,MAAM,CAAA;qBAAE,CAAC,CAAA;iBACtC,CAAC;aACH,CAAA;SACF,CAAA;KACF,CAAA;CACF,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG,iBAAiB,CAAC,cAAc,CAAC,CAAA;AACtE,MAAM,MAAM,wBAAwB,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,CAAA;AAC1E,MAAM,MAAM,yBAAyB,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,CAAA;AAE5E,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,CAAC,EAAE;QACL,KAAK,CAAC,EAAE;YACN,OAAO,CAAC,EAAE;gBACR,OAAO,EAAE,KAAK,CAAC;oBAAE,IAAI,EAAE,MAAM,CAAC;oBAAC,SAAS,EAAE,MAAM,CAAA;iBAAE,CAAC,CAAA;aACpD,CAAA;SACF,CAAA;KACF,CAAA;CACF,CAAA;AACD,MAAM,MAAM,4BAA4B,GAAG;IACzC,IAAI,CAAC,EAAE;QACL,KAAK,CAAC,EAAE;YACN,OAAO,CAAC,EAAE;gBACR,OAAO,EAAE,KAAK,CAAC;oBAAE,SAAS,EAAE,MAAM,CAAA;iBAAE,CAAC,CAAA;aACtC,CAAA;SACF,CAAA;KACF,CAAA;CACF,CAAA;AAED,eAAO,MAAM,gCAAgC,cAChC,MAAM,WACR,MAAM,WAkCb,CAAA;AAEJ,eAAO,MAAM,kCAAkC,cAClC,MAAM,aACN,MAAM,WACR,MAAM,WAsCb,CAAA;AAEJ,eAAO,MAAM,gCAAgC,cAChC,MAAM,yBACM,MAAM,WAsC3B,CAAA;AAEJ,eAAO,MAAM,+BAA+B,QAe1C,CAAA;AAEF,eAAO,MAAM,sCAAsC,wBAC5B,wBAAwB,cACjC,MAAM,EAAE,WAsBlB,CAAA"}

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

@@ -138,6 +138,3 @@ export const getRelatedProductsRecommendationsQuery = (recommendationsType, prod
         productIds: productIds,
     },
 });
-export const newSessionQuery = JSON.stringify({
-    query: `mutation { newSession }`,
-});

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":""}

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

@@ -0,0 +1,129 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { SWRConfig } from "swr";
+import ProductsLocalStorage from "../libs/cache/ProductsLocalStorage";
+import { useProducts } from "./use-products";
+const productId = "gid://shopify/Product/1";
+const hydratedSellingPlanGroups = {
+    edges: [
+        {
+            node: {
+                id: "group-1",
+                sellingPlans: {
+                    edges: [
+                        {
+                            node: {
+                                id: "plan-1",
+                                priceAdjustments: [
+                                    { adjustmentValue: { adjustmentPercentage: 10 } },
+                                ],
+                            },
+                        },
+                    ],
+                },
+            },
+        },
+    ],
+};
+const wrapper = ({ children }) => (_jsx(SWRConfig, Object.assign({ value: {
+        provider: () => new Map(),
+        dedupingInterval: 0,
+    } }, { children: children })));
+describe("useProducts", () => {
+    let originalFetch;
+    beforeEach(() => {
+        originalFetch = global.fetch;
+        localStorage.clear();
+        jest.restoreAllMocks();
+    });
+    afterEach(() => {
+        global.fetch = originalFetch;
+    });
+    it("renders the merged cached product when a fetch returns partial selling plans", () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        const cache = new ProductsLocalStorage();
+        cache.setCacheItem({
+            id: productId,
+            handle: "subscription-product",
+            title: "Cached product",
+            sellingPlanGroups: hydratedSellingPlanGroups,
+        });
+        const fetchMock = jest.fn().mockResolvedValue({
+            json: jest.fn().mockResolvedValue([
+                {
+                    id: productId,
+                    handle: "subscription-product",
+                    title: "Network product",
+                    sellingPlanGroups: {
+                        edges: [
+                            {
+                                node: {
+                                    id: "group-1",
+                                    sellingPlans: {
+                                        edges: [{ node: { id: "plan-1" } }],
+                                    },
+                                },
+                            },
+                        ],
+                    },
+                },
+            ]),
+        });
+        global.fetch = fetchMock;
+        const { result } = renderHook(() => useProducts({
+            baseURL: "https://example.test",
+            productIds: [productId],
+        }), { wrapper });
+        yield waitFor(() => expect(fetchMock).toHaveBeenCalled());
+        yield waitFor(() => { var _a; return expect((_a = result.current.products[0]) === null || _a === void 0 ? void 0 : _a.title).toBe("Network product"); });
+        expect((_a = result.current.products[0]) === null || _a === void 0 ? void 0 : _a.sellingPlanGroups).toEqual(hydratedSellingPlanGroups);
+    }));
+    it("clears the previous product while a new product identity resolves", () => __awaiter(void 0, void 0, void 0, function* () {
+        let resolveProductB = () => { };
+        const productBResponse = new Promise((resolve) => {
+            resolveProductB = resolve;
+        });
+        const fetcher = jest
+            .fn()
+            .mockResolvedValueOnce([
+            {
+                id: "gid://shopify/Product/A",
+                handle: "product-a",
+                title: "Product A",
+            },
+        ])
+            .mockReturnValueOnce(productBResponse);
+        const { result, rerender } = renderHook(({ productId }) => useProducts({
+            baseURL: "https://example.test",
+            productIds: [productId],
+            fetcher,
+        }), {
+            initialProps: { productId: "gid://shopify/Product/A" },
+            wrapper,
+        });
+        yield waitFor(() => { var _a; return expect((_a = result.current.products[0]) === null || _a === void 0 ? void 0 : _a.title).toBe("Product A"); });
+        rerender({ productId: "gid://shopify/Product/B" });
+        expect(result.current.products).toEqual([]);
+        expect(result.current.isLoading).toBe(true);
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            resolveProductB([
+                {
+                    id: "gid://shopify/Product/B",
+                    handle: "product-b",
+                    title: "Product B",
+                },
+            ]);
+            yield productBResponse;
+        }));
+        yield waitFor(() => { var _a; return expect((_a = result.current.products[0]) === null || _a === void 0 ? void 0 : _a.title).toBe("Product B"); });
+    }));
+});

package/dist/components/libs/cache/ProductsLocalStorage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProductsLocalStorage.d.ts","sourceRoot":"","sources":["../../../../components/libs/cache/ProductsLocalStorage.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAG7C,KAAK,aAAa,GAAG;IACnB,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,EAAE,MAAM,CAAA;IACd,EAAE,EAAE,MAAM,CAAA;IACV,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CACnB,CAAA;AAED,MAAM,CAAC,OAAO,OAAO,oBAAqB,SAAQ,cAAc;IAC9D,OAAO,EAAE,MAAM,CAA2B;IAC1C,WAAW,EAAE,MAAM,CAAe;IAElC,aAAa,CAAC,EAAE,EAAE,MAAM;IAIxB,iBAAiB,CAAC,MAAM,EAAE,MAAM;;IAShC,QAAQ,IAAI,aAAa,EAAE;IAiB3B,YAAY,CAAC,EACX,EAAE,EACF,MAAM,GACP,EAAE;QACD,EAAE,CAAC,EAAE,MAAM,CAAA;QACX,MAAM,CAAC,EAAE,MAAM,CAAA;KAChB,GAAG,MAAM,GAAG,IAAI;IAgBjB,aAAa,CAAC,QAAQ,EAAE;QACtB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;QACrB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;KAC1B,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE;IAYrB,YAAY,CACV,OAAO,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,EACvC,KAAK,CAAC,EAAE,aAAa,EAAE,EACvB,YAAY,GAAE,OAAc;gBAFT,MAAM;YAAM,MAAM;;IAiEvC,aAAa,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,EAAE;;;;IASrD,eAAe,CAAC,WAAW,GAAE,MAAU;IAWvC,UAAU;IAQV,eAAe,CAAC,CAAC,EAAE,GAAG;CASvB"}
+{"version":3,"file":"ProductsLocalStorage.d.ts","sourceRoot":"","sources":["../../../../components/libs/cache/ProductsLocalStorage.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,kBAAkB,CAAA;AA0B7C,KAAK,aAAa,GAAG;IACnB,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,EAAE,MAAM,CAAA;IACd,EAAE,EAAE,MAAM,CAAA;IACV,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CACnB,CAAA;AAID,MAAM,CAAC,OAAO,OAAO,oBAAqB,SAAQ,cAAc;IAC9D,OAAO,EAAE,MAAM,CAA2B;IAC1C,WAAW,EAAE,MAAM,CAAe;IAElC,aAAa,CAAC,EAAE,EAAE,MAAM;IAIxB,iBAAiB,CAAC,MAAM,EAAE,MAAM;;IAShC,QAAQ,IAAI,aAAa,EAAE;IAiB3B,YAAY,CAAC,EACX,EAAE,EACF,MAAM,GACP,EAAE;QACD,EAAE,CAAC,EAAE,MAAM,CAAA;QACX,MAAM,CAAC,EAAE,MAAM,CAAA;KAChB,GAAG,MAAM,GAAG,IAAI;IAgBjB,aAAa,CAAC,QAAQ,EAAE;QACtB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;QACrB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;KAC1B,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE;IAYrB,YAAY,CACV,OAAO,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,EACvC,KAAK,CAAC,EAAE,aAAa,EAAE,EACvB,YAAY,GAAE,OAAc;gBAFT,MAAM;YAAM,MAAM;;IA6EvC,aAAa,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,EAAE;;;;IASrD,eAAe,CAAC,WAAW,GAAE,MAAU;IAWvC,UAAU;IAQV,eAAe,CAAC,CAAC,EAAE,GAAG;CASvB"}

package/dist/components/libs/cache/ProductsLocalStorage.js

@@ -1,5 +1,26 @@
 import AppStudioCache from "./AppStudioCache";
 import { getProductGidsFromIds } from "../../../lib/utils";
+// Normalizes a Shopify connection ({ edges: [...] }) or a plain array into an array.
+const normalizeConnection = (value) => Array.isArray(value) ? value : Array.isArray(value === null || value === void 0 ? void 0 : value.edges) ? value.edges : [];
+const isConnection = (value) => Array.isArray(value) || Array.isArray(value === null || value === void 0 ? void 0 : value.edges);
+// Empty connections are authoritative. Non-empty connections are complete only
+// when every nested plan includes the priceAdjustments field requested by PDPs.
+const hasCompleteSellingPlanData = (groups) => {
+    if (!isConnection(groups))
+        return false;
+    return normalizeConnection(groups).every((group) => {
+        var _a;
+        const groupNode = (_a = group === null || group === void 0 ? void 0 : group.node) !== null && _a !== void 0 ? _a : group;
+        if (!isConnection(groupNode === null || groupNode === void 0 ? void 0 : groupNode.sellingPlans))
+            return false;
+        return normalizeConnection(groupNode.sellingPlans).every((plan) => {
+            var _a;
+            const planNode = (_a = plan === null || plan === void 0 ? void 0 : plan.node) !== null && _a !== void 0 ? _a : plan;
+            return Array.isArray(planNode === null || planNode === void 0 ? void 0 : planNode.priceAdjustments);
+        });
+    });
+};
+const FRESH_MS = 60 * 1000;
 export default class ProductsLocalStorage extends AppStudioCache {
     getIdCacheKey(id) {
         return `${this.cachePrefix}-data-${id}`;
@@ -68,6 +89,17 @@ export default class ProductsLocalStorage extends AppStudioCache {
         if (cachedProduct) {
             // merge products, keeping populated arrays from cached product
             productToCache = Object.entries(product).reduce((merged, [key, value]) => {
+                var _a;
+                // Keep the more-complete cached sellingPlanGroups when the incoming
+                // payload is partial/unhydrated (missing nested priceAdjustments),
+                // e.g. from PLP or carousel fetches. Prevents a shallow payload from
+                // poisoning a fully hydrated PDP record.
+                if (key === "sellingPlanGroups" &&
+                    hasCompleteSellingPlanData(cachedProduct[key]) &&
+                    !hasCompleteSellingPlanData(value) &&
+                    Date.now() - ((_a = cachedProduct.ct) !== null && _a !== void 0 ? _a : 0) < FRESH_MS) {
+                    return Object.assign(Object.assign({}, merged), { [key]: cachedProduct[key] });
+                }
                 // Keep non-empty arrays from cached product if current product has empty array
                 if (Array.isArray(value) &&
                     value.length === 0 &&

package/dist/components/libs/cache/ProductsLocalStorage.test.d.ts

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

package/dist/components/libs/cache/ProductsLocalStorage.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductsLocalStorage.test.d.ts","sourceRoot":"","sources":["../../../../components/libs/cache/ProductsLocalStorage.test.ts"],"names":[],"mappings":""}

package/dist/components/libs/cache/ProductsLocalStorage.test.js

@@ -0,0 +1,110 @@
+import ProductsLocalStorage from "./ProductsLocalStorage";
+const productId = "gid://shopify/Product/1";
+const sellingPlanGroups = (price) => ({
+    edges: [
+        {
+            node: {
+                id: "group-1",
+                sellingPlans: {
+                    edges: [
+                        {
+                            node: {
+                                id: "plan-1",
+                                priceAdjustments: [{ adjustmentValue: { price } }],
+                            },
+                        },
+                    ],
+                },
+            },
+        },
+    ],
+});
+const product = (groups) => ({
+    id: productId,
+    handle: "subscription-product",
+    sellingPlanGroups: groups,
+});
+describe("ProductsLocalStorage selling plan merges", () => {
+    let storage;
+    beforeEach(() => {
+        localStorage.clear();
+        storage = new ProductsLocalStorage();
+    });
+    it("keeps hydrated selling plans when an incoming payload is partial", () => {
+        storage.setCacheItem(product(sellingPlanGroups("10.00")));
+        const merged = storage.setCacheItem(product({
+            edges: [
+                {
+                    node: {
+                        id: "group-1",
+                        sellingPlans: {
+                            edges: [{ node: { id: "plan-1" } }],
+                        },
+                    },
+                },
+            ],
+        }));
+        expect(merged.sellingPlanGroups.edges[0].node.sellingPlans.edges[0].node
+            .priceAdjustments).toEqual([{ adjustmentValue: { price: "10.00" } }]);
+    });
+    it("keeps hydrated selling plans when only some incoming plans are hydrated", () => {
+        storage.setCacheItem(product(sellingPlanGroups("10.00")));
+        const merged = storage.setCacheItem(product({
+            edges: [
+                {
+                    node: {
+                        id: "group-1",
+                        sellingPlans: {
+                            edges: [
+                                {
+                                    node: {
+                                        id: "plan-1",
+                                        priceAdjustments: [
+                                            { adjustmentValue: { price: "12.00" } },
+                                        ],
+                                    },
+                                },
+                                { node: { id: "plan-2" } },
+                            ],
+                        },
+                    },
+                },
+            ],
+        }));
+        expect(merged.sellingPlanGroups.edges[0].node.sellingPlans.edges).toHaveLength(1);
+        expect(merged.sellingPlanGroups.edges[0].node.sellingPlans.edges[0].node
+            .priceAdjustments).toEqual([{ adjustmentValue: { price: "10.00" } }]);
+    });
+    it("accepts an authoritative empty selling plan list", () => {
+        storage.setCacheItem(product(sellingPlanGroups("10.00")));
+        const merged = storage.setCacheItem(product({ edges: [] }));
+        expect(merged.sellingPlanGroups).toEqual({ edges: [] });
+    });
+    it("replaces cached selling plans with a complete incoming payload", () => {
+        storage.setCacheItem(product(sellingPlanGroups("10.00")));
+        const merged = storage.setCacheItem(product(sellingPlanGroups("12.00")));
+        expect(merged.sellingPlanGroups.edges[0].node.sellingPlans.edges[0].node
+            .priceAdjustments).toEqual([{ adjustmentValue: { price: "12.00" } }]);
+    });
+    it("lets a partial payload win once the cached entry is stale", () => {
+        const nowSpy = jest.spyOn(Date, "now");
+        nowSpy.mockReturnValue(1000000);
+        storage.setCacheItem(product(sellingPlanGroups("10.00")));
+        nowSpy.mockReturnValue(1000000 + 61 * 1000);
+        const merged = storage.setCacheItem(product({
+            edges: [
+                {
+                    node: {
+                        id: "group-1",
+                        sellingPlans: {
+                            edges: [{ node: { id: "plan-1" } }],
+                        },
+                    },
+                },
+            ],
+        }));
+        expect(merged.sellingPlanGroups.edges[0].node.sellingPlans.edges[0].node
+            .priceAdjustments).toBeUndefined();
+        nowSpy.mockRestore();
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tapcart/mobile-components",
-  "version": "0.16.0",
+  "version": "0.16.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "style": "dist/styles.css",