@tapcart/mobile-components 0.17.2 → 0.18.0

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.0",
   "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",