@tapcart/mobile-components 0.17.2 → 0.18.1

package/dist/components/hooks/swr-retry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"swr-retry.d.ts","sourceRoot":"","sources":["../../../components/hooks/swr-retry.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAA;AAE3C,eAAO,MAAM,WAAW,IAAI,CAAA;AAC5B,eAAO,MAAM,gBAAgB,MAAM,CAAA;AACnC,eAAO,MAAM,kBAAkB,OAAO,CAAA;AAOtC,eAAO,MAAM,YAAY,QAAS,OAAO,KAAG,OAG3C,CAAA;AAED,eAAO,MAAM,kBAAkB,QAAS,OAAO,KAAG,OAA6B,CAAA;AAiC/E,KAAK,YAAY,GAAG,WAAW,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC,CAAA;AACjE,KAAK,SAAS,GAAG,WAAW,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAA;AAE3D,MAAM,MAAM,cAAc,GAAG;IAC3B,eAAe,EAAE,MAAM,CAAA;IACvB,kBAAkB,EAAE,gBAAgB,CAAC,oBAAoB,CAAC,CAAA;IAC1D,YAAY,EAAE,YAAY,CAAA;IAC1B,SAAS,EAAE,SAAS,CAAA;IACpB,UAAU,EAAE,OAAO,CAAA;CACpB,CAAA;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,iBAAiB,QAAO,cAkCpC,CAAA"}
+{"version":3,"file":"swr-retry.d.ts","sourceRoot":"","sources":["../../../components/hooks/swr-retry.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAA;AAE3C,eAAO,MAAM,WAAW,IAAI,CAAA;AAC5B,eAAO,MAAM,gBAAgB,MAAM,CAAA;AACnC,eAAO,MAAM,kBAAkB,OAAO,CAAA;AAOtC,eAAO,MAAM,YAAY,QAAS,OAAO,KAAG,OAG3C,CAAA;AAmDD,eAAO,MAAM,kBAAkB,QAAS,OAAO,KAAG,OACE,CAAA;AAiCpD,KAAK,YAAY,GAAG,WAAW,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC,CAAA;AACjE,KAAK,SAAS,GAAG,WAAW,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAA;AAE3D,MAAM,MAAM,cAAc,GAAG;IAC3B,eAAe,EAAE,MAAM,CAAA;IACvB,kBAAkB,EAAE,gBAAgB,CAAC,oBAAoB,CAAC,CAAA;IAC1D,YAAY,EAAE,YAAY,CAAA;IAC1B,SAAS,EAAE,SAAS,CAAA;IACpB,UAAU,EAAE,OAAO,CAAA;CACpB,CAAA;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,iBAAiB,QAAO,cAkCpC,CAAA"}

package/dist/components/hooks/swr-retry.js

@@ -8,7 +8,53 @@ export const isAbortError = (err) => {
         return false;
     return err.name === "AbortError";
 };
-export const shouldRetryOnError = (err) => !isAbortError(err);
+/**
+ * The 4xx statuses that mean "later", not "never" — the request may well succeed
+ * unchanged, so retrying is not wasted.
+ *
+ * 425 Too Early is deliberately absent: it only arises from TLS 1.3 early data,
+ * which we never send, so treating it as retryable would describe a state this
+ * client cannot reach.
+ */
+const RETRYABLE_CLIENT_STATUSES = new Set([
+    // The server gave up waiting for the request, rather than refusing what it
+    // received. Nothing about the request is wrong, so a retry is the correct
+    // response — note `getRetryAfterMs` still only honors `Retry-After` on 429,
+    // so a 408 takes the normal backoff.
+    408,
+    429,
+]);
+/**
+ * A 4xx outside RETRYABLE_CLIENT_STATUSES is deterministic: the request itself
+ * is what the upstream refused, so every retry earns the identical rejection.
+ *
+ * WHY THIS MATTERS: retrying spends the upstream's quota for no chance of
+ * success. Google Retail calls are billed and quota'd against the *merchant's*
+ * GCP project, and on 2026-08-14 one store's filter — referencing a catalog
+ * attribute that was never marked indexable — was retried 4x per page view
+ * until it exhausted that quota. Google then 429'd every search for that store,
+ * including the ones that would have succeeded. A permanent rejection has to
+ * cost one call, not four.
+ *
+ * This predicate is shared across consumers (the cluster feed included), which
+ * is why the retryable set is defined by HTTP semantics rather than by what any
+ * one upstream happens to emit. The google-retail proxy collapses every upstream
+ * 4xx to 400 or 429 (see tapcart-microservices integrations/app/googleRetail/
+ * errors.js), so 408 reaches this predicate only from the other consumers.
+ *
+ * Errors carrying no `status` keep the previous behaviour (retry unless
+ * aborted), so integrations that do not populate it are unaffected.
+ */
+const isPermanentClientError = (err) => {
+    if (!err || typeof err !== "object")
+        return false;
+    const { status } = err;
+    return (typeof status === "number" &&
+        status >= 400 &&
+        status < 500 &&
+        !RETRYABLE_CLIENT_STATUSES.has(status));
+};
+export const shouldRetryOnError = (err) => !isAbortError(err) && !isPermanentClientError(err);
 const parseRetryAfter = (value) => {
     if (value === null || value === undefined)
         return null;

package/dist/components/hooks/swr-retry.test.js

@@ -31,6 +31,85 @@ describe("swr-retry helpers", () => {
             expect(shouldRetryOnError(new Error("boom"))).toBe(true);
             expect(shouldRetryOnError({ status: 500 })).toBe(true);
         });
+        // A 4xx is deterministic — retrying it burns the upstream's quota for no
+        // chance of success. This is the guard that stopped one bad Google Retail
+        // filter costing 4 API calls per page view.
+        it("returns false for a 4xx, which cannot succeed on retry", () => {
+            expect(shouldRetryOnError({ status: 400 })).toBe(false);
+            expect(shouldRetryOnError({ status: 403 })).toBe(false);
+            expect(shouldRetryOnError({ status: 404 })).toBe(false);
+            expect(shouldRetryOnError({ status: 499 })).toBe(false);
+        });
+        // 429 is the 4xx that means "later", not "never".
+        it("returns true for 429 so Retry-After is honored", () => {
+            expect(shouldRetryOnError({ status: 429 })).toBe(true);
+        });
+        /**
+         * 408 is the other one: the server gave up waiting for the request rather
+         * than refusing what it received, so the same request may well succeed. The
+         * google-retail proxy collapses upstream 408s to 400 before they get here,
+         * so this matters for the cluster feed and any future consumer — which is
+         * the reason the retryable set is defined by HTTP semantics and not by what
+         * one upstream emits.
+         */
+        it("returns true for 408, which is transient rather than deterministic", () => {
+            expect(shouldRetryOnError({ status: 408 })).toBe(true);
+            const clusterFeed408 = Object.assign(new Error("Cluster feed HTTP 408"), {
+                reason: "cluster-feed-http",
+                status: 408,
+                retryAfter: null,
+            });
+            expect(shouldRetryOnError(clusterFeed408)).toBe(true);
+        });
+        // 425 Too Early is retryable in the abstract but unreachable here — we send
+        // no TLS early data — so it stays in the permanent set deliberately.
+        it("returns false for 425, which this client cannot receive", () => {
+            expect(shouldRetryOnError({ status: 425 })).toBe(false);
+        });
+        it("returns true for 5xx and for statuses below 400", () => {
+            expect(shouldRetryOnError({ status: 500 })).toBe(true);
+            expect(shouldRetryOnError({ status: 503 })).toBe(true);
+            expect(shouldRetryOnError({ status: 399 })).toBe(true);
+        });
+        // Integrations that never set `status` must behave exactly as before.
+        it("retries when status is absent or not a number", () => {
+            expect(shouldRetryOnError(new Error("network down"))).toBe(true);
+            expect(shouldRetryOnError({ status: undefined })).toBe(true);
+            expect(shouldRetryOnError({ status: "400" })).toBe(true);
+            expect(shouldRetryOnError({})).toBe(true);
+        });
+        // An abort still wins even if a status rode along.
+        it("returns false for an AbortError carrying a retryable status", () => {
+            const err = Object.assign(new Error("aborted"), {
+                name: "AbortError",
+                status: 500,
+            });
+            expect(shouldRetryOnError(err)).toBe(false);
+        });
+        it("does not throw on null / undefined / primitives", () => {
+            expect(shouldRetryOnError(null)).toBe(true);
+            expect(shouldRetryOnError(undefined)).toBe(true);
+            expect(shouldRetryOnError(404)).toBe(true);
+        });
+        /**
+         * This hook is shared. Both known callers — use-infinite-scroll (the
+         * search-client path) and usePersonalizedClusterFeed — throw errors that
+         * carry `status`, so both stop retrying 4xx. That is deliberate: a 4xx is
+         * deterministic whichever API produced it, and the cluster feed already
+         * attached `status`/`retryAfter` (see use-personalized-cluster-feed-core.ts
+         * :258) purely so this layer could act on them.
+         */
+        it("applies to the cluster-feed error shape too, not just search", () => {
+            const clusterFeed4xx = Object.assign(new Error("Cluster feed HTTP 404"), {
+                reason: "cluster-feed-http",
+                status: 404,
+                retryAfter: null,
+            });
+            expect(shouldRetryOnError(clusterFeed4xx)).toBe(false);
+            // A network failure there has no status, so it still retries.
+            const clusterFeedNetwork = Object.assign(new Error("Cluster feed request failed"), { reason: "cluster-feed-network" });
+            expect(shouldRetryOnError(clusterFeedNetwork)).toBe(true);
+        });
     });
 });
 describe("useSwrRetryConfig", () => {

package/dist/components/hooks/use-infinite-scroll-sort-key.test.d.ts

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

package/dist/components/hooks/use-infinite-scroll-sort-key.test.d.ts.map

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

package/dist/components/hooks/use-infinite-scroll-sort-key.test.js

@@ -0,0 +1,68 @@
+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 { createElement } from "react";
+import { renderHook, waitFor } from "@testing-library/react";
+import { SWRConfig } from "swr";
+import useSWRInfinite from "swr/infinite";
+// Mirrors the client contract: getKey exposes only the shopper-chosen sort,
+// and the provider default arrives while the page-1 response is handled.
+const makeClient = (hydrateInto) => ({
+    userSort: "",
+    displaySort: "",
+    getKey(pageIndex, previousPageData) {
+        if (previousPageData && !previousPageData.hasMore)
+            return null;
+        return {
+            page: pageIndex + 1,
+            sort: this.userSort,
+            collectionId: "12345",
+        };
+    },
+    onResponse() {
+        if (!this.userSort)
+            this[hydrateInto] = "creation_date";
+    },
+});
+// SWR's cache is global, so each test needs its own provider or the second
+// render would read the first one's page-1 entry and never fetch.
+const wrapper = ({ children }) => createElement(SWRConfig, { value: { provider: () => new Map() } }, children);
+const renderPages = (client, fetcher) => renderHook(() => useSWRInfinite((i, prev) => client.getKey(i, prev), fetcher, {
+    revalidateFirstPage: false,
+    revalidateOnFocus: false,
+    revalidateOnMount: true,
+    dedupingInterval: 0,
+}), { wrapper });
+const makeFetcher = (client) => jest.fn((key) => __awaiter(void 0, void 0, void 0, function* () {
+    client.onResponse();
+    return { products: [{ id: `p${key.page}` }], hasMore: false };
+}));
+describe("useSWRInfinite key stability across page-1 sort hydration", () => {
+    it("refetches page 1 when the response hydrates a key-visible field", () => __awaiter(void 0, void 0, void 0, function* () {
+        const client = makeClient("userSort");
+        const fetcher = makeFetcher(client);
+        const { result } = renderPages(client, fetcher);
+        yield waitFor(() => expect(result.current.data).toBeDefined());
+        yield waitFor(() => expect(fetcher).toHaveBeenCalledTimes(2));
+        // Proves the harness detects the regression: the key moved, so SWR issued
+        // a second page-1 request, this time carrying the hydrated sort.
+        expect(fetcher.mock.calls[0][0].sort).toBe("");
+        expect(fetcher.mock.calls[1][0].sort).toBe("creation_date");
+    }));
+    it("fetches page 1 once when the response hydrates a display-only field", () => __awaiter(void 0, void 0, void 0, function* () {
+        const client = makeClient("displaySort");
+        const fetcher = makeFetcher(client);
+        const { result } = renderPages(client, fetcher);
+        yield waitFor(() => expect(result.current.data).toBeDefined());
+        expect(fetcher).toHaveBeenCalledTimes(1);
+        expect(fetcher.mock.calls[0][0].sort).toBe("");
+        // The default is still available to label the sort drawer.
+        expect(client.displaySort).toBe("creation_date");
+    }));
+});

package/dist/components/hooks/use-recommendations.d.ts

@@ -5,6 +5,13 @@ interface UseRecommendationProps {
     customSearchConfig?: Record<string, any>;
     queryVariables: Record<string, any>;
     apiURL: string;
+    /**
+     * Opt out of fetching entirely. Rules of Hooks force callers to invoke this
+     * hook unconditionally, and an empty query otherwise counts as "fetch
+     * trending", so a caller that only sometimes wants recommendations has no
+     * other way to stay quiet. Defaults to true to preserve existing behavior.
+     */
+    enabled?: boolean;
 }
 interface UseRecommendationReturn {
     products: Product[];
@@ -14,6 +21,6 @@ interface UseRecommendationReturn {
     isLoading: boolean;
     error: any;
 }
-declare const useRecommendations: ({ searchClient, query, customSearchConfig, queryVariables, apiURL, }: UseRecommendationProps) => UseRecommendationReturn;
+declare const useRecommendations: ({ searchClient, query, customSearchConfig, queryVariables, apiURL, enabled, }: UseRecommendationProps) => UseRecommendationReturn;
 export { useRecommendations };
 //# sourceMappingURL=use-recommendations.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"use-recommendations.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-recommendations.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAOxE,UAAU,sBAAsB;IAE9B,YAAY,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAA;IACxC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAGxC,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACnC,MAAM,EAAE,MAAM,CAAA;CACf;AAUD,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,WAAW,EAAE,UAAU,EAAE,CAAA;IACzB,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,MAAM,EAAE,GAAG,EAAE,CAAA;IACb,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,GAAG,CAAA;CACX;AAmBD,QAAA,MAAM,kBAAkB,yEASrB,sBAAsB,KAAG,uBA6H3B,CAAA;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAA"}
+{"version":3,"file":"use-recommendations.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-recommendations.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAOxE,UAAU,sBAAsB;IAE9B,YAAY,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAA;IACxC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAGxC,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACnC,MAAM,EAAE,MAAM,CAAA;IAEd;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAUD,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,WAAW,EAAE,UAAU,EAAE,CAAA;IACzB,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,MAAM,EAAE,GAAG,EAAE,CAAA;IACb,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,GAAG,CAAA;CACX;AAmBD,QAAA,MAAM,kBAAkB,kFAWrB,sBAAsB,KAAG,uBA8H3B,CAAA;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAA"}

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

@@ -27,7 +27,7 @@ const useRecommendations = ({
 // Search client props
 searchClient, query = "", customSearchConfig, 
 // API props (backwards compatibility)
-queryVariables, apiURL, }) => {
+queryVariables, apiURL, enabled = true, }) => {
     // When searchClient is provided, use search client approach
     const usingSearchClient = Boolean(searchClient);
     const searchParams = useSearchParams();
@@ -39,9 +39,10 @@ queryVariables, apiURL, }) => {
     // - query is empty → show trending searches
     // - query meets minimum length (≥3 chars)
     // - searchClient has a customSearchConfig (e.g., filter-only queries on PDP)
-    const shouldFetch = !recommendation.trim().length ||
-        recommendation.length >= MIN_QUERY_LENGTH ||
-        (usingSearchClient && Boolean(customSearchConfig));
+    const shouldFetch = enabled &&
+        (!recommendation.trim().length ||
+            recommendation.length >= MIN_QUERY_LENGTH ||
+            (usingSearchClient && Boolean(customSearchConfig)));
     const [cachedRecommendation, setCachedRecommendations] = React.useState(recommendationsLocalStorage.getCacheItem({
         id: `${recommendation}-${queryVariables === null || queryVariables === void 0 ? void 0 : queryVariables.language}`,
     }));

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

@@ -82,4 +82,25 @@ describe("useRecommendations", () => {
         // Empty query now triggers a trending fetch regardless of searchClient
         expect(result.current.isLoading).toBe(true);
     });
+    describe("enabled", () => {
+        it("should not fetch when enabled is false", () => {
+            const { result } = renderHook(() => useRecommendations(Object.assign({ searchClient: mockSearchClient, query: "", enabled: false }, defaultProps)));
+            expect(result.current.products).toEqual([]);
+            expect(result.current.isLoading).toBe(false);
+        });
+        it("should not fetch the legacy API path when enabled is false", () => {
+            // Collection-mode carousels land here: no searchClient and an empty
+            // query, which would otherwise POST to /{appId}/api/v1/recommendations.
+            const { result } = renderHook(() => useRecommendations(Object.assign({ query: "", enabled: false }, defaultProps)));
+            expect(result.current.isLoading).toBe(false);
+        });
+        it("should fetch when enabled is omitted, preserving existing behavior", () => {
+            const { result } = renderHook(() => useRecommendations(Object.assign({ searchClient: mockSearchClient, query: "" }, defaultProps)));
+            expect(result.current.isLoading).toBe(true);
+        });
+        it("should fetch when enabled is explicitly true", () => {
+            const { result } = renderHook(() => useRecommendations(Object.assign({ searchClient: mockSearchClient, query: "abc", enabled: true }, defaultProps)));
+            expect(result.current.isLoading).toBe(true);
+        });
+    });
 });

package/dist/components/hooks/use-sort-filter.js

@@ -88,7 +88,7 @@ const useSortFilter = ({ initialData, queryVariables, dynamicKey, searchClient,
                     relatedCategories: [],
                 },
                 sortOptions: [],
-                dynamicFiltersEnabled: false,
+                dynamicFiltersEnabled: searchClient.isDynamicFiltersEnabled(),
                 integrations: [],
             },
             data: [],

package/dist/styles.css

@@ -1124,6 +1124,9 @@ video {
 .hidden {
   display: none;
 }
+.aspect-\[2\/3\] {
+  aspect-ratio: 2/3;
+}
 .aspect-\[327\/280\] {
   aspect-ratio: 327/280;
 }
@@ -1845,6 +1848,9 @@ video {
 .items-baseline {
   align-items: baseline;
 }
+.items-stretch {
+  align-items: stretch;
+}
 .justify-start {
   justify-content: flex-start;
 }
@@ -2238,6 +2244,9 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(253 255 218 / var(--tw-bg-opacity, 1));
 }
+.bg-\[var\(--element-divider-color\2c var\(--coreColors-dividingLines\)\)\] {
+  background-color: var(--element-divider-color,var(--coreColors-dividingLines));
+}
 .bg-\[var\(--stateColors-skeleton\)\] {
   background-color: var(--stateColors-skeleton);
 }
@@ -3107,6 +3116,9 @@ video {
   --tw-grayscale: grayscale(100%);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.\!filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
+}
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tapcart/mobile-components",
-  "version": "0.17.2",
+  "version": "0.18.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "style": "dist/styles.css",
@@ -80,8 +80,8 @@
     "clsx": "^1.2.1",
     "dayjs": "^1.11.13",
     "dompurify": "^3.2.2",
-    "embla-carousel-autoplay": "8.5.2",
-    "embla-carousel-fade": "8.5.2",
+    "embla-carousel-autoplay": "8.6.0",
+    "embla-carousel-fade": "8.6.0",
     "embla-carousel-react": "^8.3.0",
     "input-otp": "^1.4.2",
     "lucide-react": "^0.488.0",