@tapcart/mobile-components 0.12.9 → 0.12.10

package/dist/components/hooks/use-block-conditional-rendering.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-block-conditional-rendering.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-block-conditional-rendering.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,YAAY,EAGb,MAAM,kBAAkB,CAAA;AAezB,eAAO,MAAM,4BAA4B,WAC/B;IACN,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,eAAe,EAAE,GAAG,CAAA;IACpB,iBAAiB,EAAE,GAAG,CAAA;CACvB,UACO,YAAY,6BACO,GAAG;;;CA4Q/B,CAAA"}
+{"version":3,"file":"use-block-conditional-rendering.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-block-conditional-rendering.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,YAAY,EAGb,MAAM,kBAAkB,CAAA;AAezB,eAAO,MAAM,4BAA4B,WAC/B;IACN,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,eAAe,EAAE,GAAG,CAAA;IACpB,iBAAiB,EAAE,GAAG,CAAA;CACvB,UACO,YAAY,6BACO,GAAG;;;CAiT/B,CAAA"}

package/dist/components/hooks/use-block-conditional-rendering.js

@@ -29,11 +29,7 @@ export const useBlockConditionalRendering = (_props, _block, mobileComponentOver
     const { id: deviceId = "" } = deviceVariables || {};
     const productId = (_f = searchParams === null || searchParams === void 0 ? void 0 : searchParams.get("productId")) !== null && _f !== void 0 ? _f : undefined;
     const productHandle = (_g = searchParams === null || searchParams === void 0 ? void 0 : searchParams.get("productHandle")) !== null && _g !== void 0 ? _g : undefined;
-    const location = {
-        country,
-        language,
-        deviceId,
-    };
+    const location = useMemo(() => ({ country, language, deviceId }), [country, language, deviceId]);
     const productMetafieldsQuery = useMemo(() => {
         var _a;
         if (!isConditionalsEnabled) {
@@ -67,7 +63,7 @@ export const useBlockConditionalRendering = (_props, _block, mobileComponentOver
     ]);
     const shouldFetchProduct = isConditionalsEnabled && (productId || productHandle);
     const useProducts = (mobileComponentOverrides === null || mobileComponentOverrides === void 0 ? void 0 : mobileComponentOverrides.useProducts) || mclUseProducts;
-    const useProductsArguments = (mobileComponentOverrides === null || mobileComponentOverrides === void 0 ? void 0 : mobileComponentOverrides.useProducts)
+    const useProductsArguments = useMemo(() => (mobileComponentOverrides === null || mobileComponentOverrides === void 0 ? void 0 : mobileComponentOverrides.useProducts)
         ? {
             productIds: productId ? [gidFromId(productId)] : [],
             productHandles: productHandle ? [productHandle] : [],
@@ -82,13 +78,20 @@ export const useBlockConditionalRendering = (_props, _block, mobileComponentOver
                 language,
                 country,
             },
-        };
-    const useProductsSkipArguments = (mobileComponentOverrides === null || mobileComponentOverrides === void 0 ? void 0 : mobileComponentOverrides.useProducts)
-        ? {
-            skip: true,
-        }
-        : null;
-    const { products, error: useProductsError, isLoading: isProductsLoading, } = useProducts(shouldFetchProduct ? useProductsArguments : useProductsSkipArguments);
+        }, [
+        mobileComponentOverrides === null || mobileComponentOverrides === void 0 ? void 0 : mobileComponentOverrides.useProducts,
+        productId,
+        productHandle,
+        apiUrl,
+        language,
+        country,
+        productMetafieldsQuery,
+    ]);
+    const useProductsSkipArguments = useMemo(() => (mobileComponentOverrides === null || mobileComponentOverrides === void 0 ? void 0 : mobileComponentOverrides.useProducts)
+        ? { skip: true }
+        : null, [mobileComponentOverrides === null || mobileComponentOverrides === void 0 ? void 0 : mobileComponentOverrides.useProducts]);
+    const useProductsInput = useMemo(() => shouldFetchProduct ? useProductsArguments : useProductsSkipArguments, [shouldFetchProduct, useProductsArguments, useProductsSkipArguments]);
+    const { products, error: useProductsError, isLoading: isProductsLoading, } = useProducts(useProductsInput);
     const blockCollectionMetafields = useMemo(() => {
         var _a;
         if (!isConditionalsEnabled) {
@@ -144,20 +147,30 @@ export const useBlockConditionalRendering = (_props, _block, mobileComponentOver
     const collectionHandle = (_j = searchParams === null || searchParams === void 0 ? void 0 : searchParams.get("collectionHandle")) !== null && _j !== void 0 ? _j : undefined;
     const shouldFetchCollection = isConditionalsEnabled && (collectionId || collectionHandle);
     const useCollection = (mobileComponentOverrides === null || mobileComponentOverrides === void 0 ? void 0 : mobileComponentOverrides.useCollection) || mclUseCollection;
-    const { specificCollection = {}, error: useCollectionError, loading: isCollectionLoading, } = useCollection({
+    const useCollectionArguments = useMemo(() => ({
         appId,
         apiUrl,
         collectionId: shouldFetchCollection ? collectionId : undefined,
         collectionHandle: shouldFetchCollection ? collectionHandle : undefined,
         language: location === null || location === void 0 ? void 0 : location.language,
         metafields: shouldFetchCollection ? memoizedMetafields : undefined,
-    });
+    }), [
+        appId,
+        apiUrl,
+        shouldFetchCollection,
+        collectionId,
+        collectionHandle,
+        location === null || location === void 0 ? void 0 : location.language,
+        memoizedMetafields,
+    ]);
+    const { specificCollection = {}, error: useCollectionError, loading: isCollectionLoading, } = useCollection(useCollectionArguments);
     const isLoading = isProductsLoading || isCollectionLoading;
     if (useProductsError || useCollectionError) {
         console.error("Unable to load products in conditional block rendering hook: ", useProductsError !== null && useProductsError !== void 0 ? useProductsError : useCollectionError);
     }
+    const disabledResult = useMemo(() => ({ shouldShow: true, isLoading: false }), []);
     if (!isConditionalsEnabled) {
-        return { shouldShow: true, isLoading: false };
+        return disabledResult;
     }
     let shouldShow = true;
     const blockHasTags = countNumberOfTagsInState(blockState) > 0;
@@ -200,5 +213,5 @@ export const useBlockConditionalRendering = (_props, _block, mobileComponentOver
         console.error("Error evaluating block visibility conditions:", e);
         shouldShow = true; // Fail-safe to show block
     }
-    return { shouldShow, isLoading };
+    return useMemo(() => ({ shouldShow, isLoading }), [shouldShow, isLoading]);
 };

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;AAE5D,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,uBAwR3B,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;AAE5D,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,uBAqS3B,CAAA;AAED,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,CAAA"}

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

@@ -49,7 +49,7 @@ initialData, queryVariables: queryVariableProps,
 // Common props
 direction = "vertical", productLimit = Infinity, threshold = 0.01, interval = 33, // ~2 frames
 customFetcher, customGetKey, shouldSkipFetch: shouldSkipFetchProp, }) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     const searchParams = useSearchParams();
     const productCount = useRef(0);
     const isFirstRender = useRef(true);
@@ -102,7 +102,7 @@ customFetcher, customGetKey, shouldSkipFetch: shouldSkipFetchProp, }) => {
         return Object.assign(Object.assign({}, queryVariables), { cursorBlob: previousPageData.pageData.cursorBlob });
     };
     const apiFetcher = (body) => __awaiter(void 0, void 0, void 0, function* () {
-        var _f, _g;
+        var _g, _h;
         if (!(initialData === null || initialData === void 0 ? void 0 : initialData.apiURL)) {
             throw new Error("initialData.apiURL is required for API mode");
         }
@@ -111,7 +111,7 @@ customFetcher, customGetKey, shouldSkipFetch: shouldSkipFetchProp, }) => {
             body: JSON.stringify(body),
         });
         const data = yield res.json();
-        productCount.current += (_g = (_f = data === null || data === void 0 ? void 0 : data.products) === null || _f === void 0 ? void 0 : _f.length) !== null && _g !== void 0 ? _g : 0;
+        productCount.current += (_h = (_g = data === null || data === void 0 ? void 0 : data.products) === null || _g === void 0 ? void 0 : _g.length) !== null && _h !== void 0 ? _h : 0;
         return data;
     });
     // Return null from getKey to conditionally skip fetching
@@ -134,20 +134,23 @@ customFetcher, customGetKey, shouldSkipFetch: shouldSkipFetchProp, }) => {
         };
     const fetcher = usingSearchClient
         ? (...args) => __awaiter(void 0, void 0, void 0, function* () {
-            var _h, _j;
+            var _j, _k;
             if (!searchClientFetcher)
                 return null;
             const result = yield searchClientFetcher(...args);
-            productCount.current += (_j = (_h = result === null || result === void 0 ? void 0 : result.products) === null || _h === void 0 ? void 0 : _h.length) !== null && _j !== void 0 ? _j : 0;
+            productCount.current += (_k = (_j = result === null || result === void 0 ? void 0 : result.products) === null || _j === void 0 ? void 0 : _j.length) !== null && _k !== void 0 ? _k : 0;
             return result;
         })
         : (...args) => __awaiter(void 0, void 0, void 0, function* () {
             const effectiveFetcher = customFetcher || apiFetcher;
             return effectiveFetcher(...args);
         });
+    // Check if caller provided pre-fetched products to display while SWR fetches
+    const hasInitialProducts = Boolean((_a = initialData === null || initialData === void 0 ? void 0 : initialData.products) === null || _a === void 0 ? void 0 : _a.length);
     const { data, error, size, setSize, isLoading, isValidating, mutate, } = useSWRInfinite(getKey, fetcher, {
         revalidateFirstPage: false,
         initialSize: 1,
+        keepPreviousData: true,
     });
     // Detect when params change and force cache invalidation
     useEffect(() => {
@@ -166,15 +169,19 @@ customFetcher, customGetKey, shouldSkipFetch: shouldSkipFetchProp, }) => {
             // Skip reset on first render, but force it for any subsequent transitions to valid params
             if (!isFirstRender.current && hasValidCurrentParams) {
                 productCount.current = 0;
-                mutate(undefined, { revalidate: true });
+                mutate();
             }
         }
         isFirstRender.current = false;
     }, [currentCollectionId, currentCollectionHandle, currentSearchQuery, mutate]);
-    const isLoadingInitialData = !data && !error;
+    // When we have pre-fetched products, don't report as "loading initial data"
+    // so the grid renders immediately with those products
+    const isLoadingInitialData = !data && !error && !hasInitialProducts;
     const isLoadingMore = isLoadingInitialData ||
         (size > 0 && data && typeof data[size - 1] === "undefined");
-    const isEmpty = ((_c = (_b = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.products) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0) === 0;
+    const isEmpty = data
+        ? ((_d = (_c = (_b = data === null || data === void 0 ? void 0 : data[0]) === null || _b === void 0 ? void 0 : _b.products) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) === 0
+        : !hasInitialProducts;
     let isEndPointer;
     if (!data) {
         isEndPointer = true;
@@ -183,7 +190,7 @@ customFetcher, customGetKey, shouldSkipFetch: shouldSkipFetchProp, }) => {
         isEndPointer = !(searchClient === null || searchClient === void 0 ? void 0 : searchClient.getHasMore());
     }
     else {
-        isEndPointer = !((_e = (_d = data[data.length - 1]) === null || _d === void 0 ? void 0 : _d.pageData) === null || _e === void 0 ? void 0 : _e.cursorBlob);
+        isEndPointer = !((_f = (_e = data[data.length - 1]) === null || _e === void 0 ? void 0 : _e.pageData) === null || _f === void 0 ? void 0 : _f.cursorBlob);
     }
     const isReachingEnd = isEmpty || isEndPointer;
     const isRefreshing = isValidating && data && data.length === size;
@@ -214,15 +221,20 @@ customFetcher, customGetKey, shouldSkipFetch: shouldSkipFetchProp, }) => {
             return;
         const unsubscribeAllChanges = searchClient.onSearchStateChange(() => {
             productCount.current = 0;
-            mutate(undefined, { revalidate: true });
+            mutate();
         });
         return unsubscribeAllChanges;
     }, [searchClient, mutate, usingSearchClient]);
     const products = useMemo(() => {
-        return data
-            ? data === null || data === void 0 ? void 0 : data.flatMap((page) => page === null || page === void 0 ? void 0 : page.products).slice(0, productLimit)
-            : [];
-    }, [data, productLimit]);
+        if (data) {
+            return data.flatMap((page) => page === null || page === void 0 ? void 0 : page.products).slice(0, productLimit);
+        }
+        // Use pre-fetched products while SWR fetches the real paginated data
+        if (hasInitialProducts) {
+            return initialData.products;
+        }
+        return [];
+    }, [data, productLimit, hasInitialProducts, initialData === null || initialData === void 0 ? void 0 : initialData.products]);
     // Collect all integration responses per page when using search client
     const integrationResponses = useMemo(() => {
         if (!usingSearchClient)

package/dist/components/hooks/use-product-options.d.ts

@@ -1,6 +1,12 @@
 import { ProductVariant } from "app-studio-types";
 type SelectedOptions = Record<string, string>;
-export declare function useProductOptions(variants: ProductVariant[] | undefined | null, selectedVariantId?: string | null): {
+type VariantConnection = {
+    edges: {
+        node: ProductVariant;
+    }[];
+};
+type VariantsInput = ProductVariant[] | VariantConnection | undefined | null;
+export declare function useProductOptions(variants: VariantsInput, selectedVariantId?: string | null): {
     selectedOptions: SelectedOptions;
     handleSelect: (optionName: string, optionValue: string) => void;
     selectedVariant: ProductVariant | undefined;

package/dist/components/hooks/use-product-options.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-product-options.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-product-options.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEjD,KAAK,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAE7C,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,cAAc,EAAE,GAAG,SAAS,GAAG,IAAI,EAC7C,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI;;+BA+DC,MAAM,eAAe,MAAM,KAAG,IAAI;;;;;;EA4CrE"}
+{"version":3,"file":"use-product-options.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-product-options.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEjD,KAAK,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAE7C,KAAK,iBAAiB,GAAG;IACvB,KAAK,EAAE;QAAE,IAAI,EAAE,cAAc,CAAA;KAAE,EAAE,CAAA;CAClC,CAAA;AAED,KAAK,aAAa,GAAG,cAAc,EAAE,GAAG,iBAAiB,GAAG,SAAS,GAAG,IAAI,CAAA;AAE5E,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,aAAa,EACvB,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI;;+BAwEC,MAAM,eAAe,MAAM,KAAG,IAAI;;;;;;EA4CrE"}

package/dist/components/hooks/use-product-options.js

@@ -1,7 +1,13 @@
 "use client";
 import { useState, useEffect, useMemo, useCallback } from "react";
 export function useProductOptions(variants, selectedVariantId) {
-    const safeVariants = useMemo(() => variants || [], [variants]);
+    const safeVariants = useMemo(() => {
+        var _a;
+        if (variants && "edges" in variants) {
+            return (((_a = variants.edges) === null || _a === void 0 ? void 0 : _a.map((e) => e === null || e === void 0 ? void 0 : e.node).filter((v) => Boolean(v))) || []);
+        }
+        return variants || [];
+    }, [variants]);
     const getCheapestProductFromVariants = useMemo(() => {
         return () => {
             if (!safeVariants.length)

package/package.json

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