@tapcart/mobile-components 0.13.1 → 0.14.0

package/dist/components/hooks/__tests__/use-infinite-scroll-params.test.d.ts

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

package/dist/components/hooks/__tests__/use-infinite-scroll-params.test.d.ts.map

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

package/dist/components/hooks/__tests__/use-infinite-scroll-params.test.js

@@ -0,0 +1,35 @@
+import { formatSearchParamsAsNextQueryVariables, stripLayoutOnlyParams, LAYOUT_ONLY_QUERY_PARAMS, } from "../use-infinite-scroll";
+// In API mode the formatted searchParams object is what forks the product cache
+// key: it's hashed into the server Redis key (the by-page route does
+// md5(JSON.stringify(body))) and serialized into the client IDB key. The
+// layout-only `column` param must not survive into that object, or column=2 and
+// column=3 read independent, independently-aged snapshots of the same
+// collection (the Diamond Art Club bug).
+const format = (qs) => stripLayoutOnlyParams(formatSearchParamsAsNextQueryVariables(new URLSearchParams(qs)));
+describe("layout-only param stripping (column cache-key fork fix)", () => {
+    it("strips `column` but keeps the data-affecting params", () => {
+        const formatted = format("country=US&lang=EN&collectionId=463133769921&collectionHandle=diamond-painting-restocks&column=3");
+        expect(formatted).not.toHaveProperty("column");
+        expect(formatted).toEqual({
+            country: "US",
+            lang: "EN",
+            collectionId: "463133769921",
+            collectionHandle: "diamond-painting-restocks",
+        });
+    });
+    it("yields IDENTICAL cache-key input for column=2 vs column=3", () => {
+        const base = "country=US&lang=EN&collectionId=463133769921&collectionHandle=diamond-painting-restocks";
+        const col2 = format(`${base}&column=2`);
+        const col3 = format(`${base}&column=3`);
+        // Same serialization => one shared Redis + IDB entry across layout variants.
+        expect(JSON.stringify(col2)).toEqual(JSON.stringify(col3));
+    });
+    it("never strips real filter/sort params", () => {
+        const formatted = format("column=3&sort_by=best-selling&filter.p.tag=in-stock");
+        expect(formatted).toEqual({
+            sort_by: "best-selling",
+            "filter.p.tag": "in-stock",
+        });
+        expect(LAYOUT_ONLY_QUERY_PARAMS).toContain("column");
+    });
+});

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

@@ -35,6 +35,8 @@ interface UseInfiniteScrollReturn {
     isValidating: boolean;
 }
 export declare const formatSearchParamsAsNextQueryVariables: (searchParams: ReadonlyURLSearchParams) => {};
+export declare const LAYOUT_ONLY_QUERY_PARAMS: string[];
+export declare const stripLayoutOnlyParams: (params: Record<string, unknown>) => Record<string, unknown>;
 declare const constructURL: (apiURL: string) => string;
 declare const useInfiniteScroll: ({ searchClient, initialData, queryVariables: queryVariableProps, direction, productLimit, threshold, interval, customFetcher, customGetKey, shouldSkipFetch: shouldSkipFetchProp, }: UseInfiniteScrollProps) => UseInfiniteScrollReturn;
 export { useInfiniteScroll, constructURL };

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

@@ -1 +1 @@
-{"version":3,"file":"use-infinite-scroll.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-infinite-scroll.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,uBAAuB,EAAmB,MAAM,iBAAiB,CAAA;AAE1E,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAG5D,UAAU,QAAQ;IAChB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,GAAG,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,cAAc,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAA;CACxC;AAED,UAAU,sBAAsB;IAE9B,YAAY,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAGxC,WAAW,CAAC,EAAE,QAAQ,CAAA;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAGpC,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAA;IACrC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,OAAO,CAAC,GAAG,CAAC,CAAA;IAChD,YAAY,CAAC,EAAE,CACb,SAAS,EAAE,MAAM,EACjB,gBAAgB,EAAE,GAAG,GAAG,IAAI,EAC5B,GAAG,IAAI,EAAE,GAAG,EAAE,KACX,GAAG,CAAA;IACR,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B;AAED,UAAU,uBAAuB;IAC/B,IAAI,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAA;IAC5B,KAAK,EAAE,GAAG,CAAA;IACV,oBAAoB,EAAE,OAAO,CAAA;IAC7B,aAAa,EAAE,OAAO,GAAG,SAAS,CAAA;IAClC,OAAO,EAAE,OAAO,CAAA;IAChB,aAAa,EAAE,OAAO,CAAA;IACtB,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,KAAK,IAAI,CAAA;IAChD,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,oBAAoB,EAAE,GAAG,EAAE,CAAA;IAC3B,SAAS,EAAE,OAAO,CAAA;IAClB,YAAY,EAAE,OAAO,CAAA;CACtB;AAED,eAAO,MAAM,sCAAsC,iBACnC,uBAAuB,OAsBtC,CAAA;AAED,QAAA,MAAM,YAAY,WAAY,MAAM,WAGnC,CAAA;AAED,QAAA,MAAM,iBAAiB,wLAgBpB,sBAAsB,KAAG,uBAkU3B,CAAA;AAED,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"use-infinite-scroll.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-infinite-scroll.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,uBAAuB,EAAmB,MAAM,iBAAiB,CAAA;AAE1E,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAG5D,UAAU,QAAQ;IAChB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,GAAG,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,cAAc,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAA;CACxC;AAED,UAAU,sBAAsB;IAE9B,YAAY,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAGxC,WAAW,CAAC,EAAE,QAAQ,CAAA;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAGpC,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAA;IACrC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,OAAO,CAAC,GAAG,CAAC,CAAA;IAChD,YAAY,CAAC,EAAE,CACb,SAAS,EAAE,MAAM,EACjB,gBAAgB,EAAE,GAAG,GAAG,IAAI,EAC5B,GAAG,IAAI,EAAE,GAAG,EAAE,KACX,GAAG,CAAA;IACR,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B;AAED,UAAU,uBAAuB;IAC/B,IAAI,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAA;IAC5B,KAAK,EAAE,GAAG,CAAA;IACV,oBAAoB,EAAE,OAAO,CAAA;IAC7B,aAAa,EAAE,OAAO,GAAG,SAAS,CAAA;IAClC,OAAO,EAAE,OAAO,CAAA;IAChB,aAAa,EAAE,OAAO,CAAA;IACtB,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,KAAK,IAAI,CAAA;IAChD,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,oBAAoB,EAAE,GAAG,EAAE,CAAA;IAC3B,SAAS,EAAE,OAAO,CAAA;IAClB,YAAY,EAAE,OAAO,CAAA;CACtB;AAED,eAAO,MAAM,sCAAsC,iBACnC,uBAAuB,OAsBtC,CAAA;AAWD,eAAO,MAAM,wBAAwB,UAAa,CAAA;AAIlD,eAAO,MAAM,qBAAqB,WACxB,OAAO,MAAM,EAAE,OAAO,CAAC,KAC9B,OAAO,MAAM,EAAE,OAAO,CAMxB,CAAA;AAED,QAAA,MAAM,YAAY,WAAY,MAAM,WAGnC,CAAA;AAED,QAAA,MAAM,iBAAiB,wLAgBpB,sBAAsB,KAAG,uBAuU3B,CAAA;AAED,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,CAAA"}

package/dist/components/hooks/use-infinite-scroll.js

@@ -38,6 +38,25 @@ export const formatSearchParamsAsNextQueryVariables = (searchParams) => {
     });
     return formattedParams;
 };
+// URL params that only affect how the grid is laid out, never which products a
+// collection/search returns. They MUST NOT enter the product cache key: in API
+// mode this `searchParams` object is hashed into the server Redis key (the
+// by-page route does `md5(JSON.stringify(body))`) and serialized into the
+// client IDB cache key. Leaving `column` in meant column=2 and column=3 forked
+// into two independent cache entries, each holding a snapshot of the same
+// collection taken at a different time — so switching the column view could
+// surface different (and independently-aged) products. Stripping them collapses
+// every layout variant onto one shared cache entry.
+export const LAYOUT_ONLY_QUERY_PARAMS = ["column"];
+// Returns a copy of `params` with the layout-only keys removed (never mutates
+// the input).
+export const stripLayoutOnlyParams = (params) => {
+    const result = Object.assign({}, params);
+    for (const param of LAYOUT_ONLY_QUERY_PARAMS) {
+        delete result[param];
+    }
+    return result;
+};
 const constructURL = (apiURL) => {
     const url = new URL(apiURL);
     return url.toString();
@@ -90,7 +109,7 @@ customFetcher, customGetKey, shouldSkipFetch: shouldSkipFetchProp, }) => {
     const queryVariables = useMemo(() => {
         if (usingSearchClient)
             return null;
-        const formattedParams = formatSearchParamsAsNextQueryVariables(searchParams);
+        const formattedParams = stripLayoutOnlyParams(formatSearchParamsAsNextQueryVariables(searchParams));
         return Object.assign(Object.assign({}, queryVariableProps), { searchParams: formattedParams });
     }, [queryVariableProps, searchParams, usingSearchClient]);
     const apiGetKey = (pageIndex, previousPageData, queryVariables) => {

package/dist/styles.css

@@ -1496,9 +1496,6 @@ video {
 .max-w-\[480px\] {
   max-width: 480px;
 }
-.max-w-\[50\%\] {
-  max-width: 50%;
-}
 .max-w-\[5rem\] {
   max-width: 5rem;
 }
@@ -1520,6 +1517,9 @@ video {
 .flex-1 {
   flex: 1 1 0%;
 }
+.flex-\[0_0_138px\] {
+  flex: 0 0 138px;
+}
 .flex-\[0_0_226px\] {
   flex: 0 0 226px;
 }
@@ -1550,9 +1550,6 @@ video {
 .basis-\[300px\] {
   flex-basis: 300px;
 }
-.basis-\[88\%\] {
-  flex-basis: 88%;
-}
 .basis-full {
   flex-basis: 100%;
 }
@@ -1860,6 +1857,10 @@ video {
   -moz-column-gap: 0.5rem;
        column-gap: 0.5rem;
 }
+.gap-x-3 {
+  -moz-column-gap: 0.75rem;
+       column-gap: 0.75rem;
+}
 .gap-x-\[7px\] {
   -moz-column-gap: 7px;
        column-gap: 7px;
@@ -1867,6 +1868,9 @@ video {
 .gap-y-0 {
   row-gap: 0px;
 }
+.gap-y-1 {
+  row-gap: 0.25rem;
+}
 .gap-y-2 {
   row-gap: 0.5rem;
 }

package/package.json

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