@tapcart/mobile-components 0.8.65 → 0.8.67

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,EAAE,MAAM,EAAE,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,CAAA;IACjC,cAAc,EAAE,MAAM,EAAE,CAAA;IACxB,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;AAgCD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,GAAG,iBAAiB,CA8I7E"}
+{"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,EAAE,MAAM,EAAE,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,CAAA;IACjC,cAAc,EAAE,MAAM,EAAE,CAAA;IACxB,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;AAgCD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,GAAG,iBAAiB,CAuJ7E"}

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

@@ -39,6 +39,7 @@ export function useProducts(props) {
         productIds: props === null || props === void 0 ? void 0 : props.productIds,
         productHandles: props === null || props === void 0 ? void 0 : props.productHandles,
     }));
+    const [isProductResponseReady, setIsProductResponseReady] = React.useState((productResponse === null || productResponse === void 0 ? void 0 : productResponse.length) > 0);
     if (isUseProductsProps(props)) {
         let { baseURL, productIds, variantIds, productHandles, metafields, collection, queryVariables, } = props;
         if (shouldMockProducts) {
@@ -109,23 +110,29 @@ export function useProducts(props) {
         const cachedProduct = productsLocalStorage.setCacheItem(product);
         return cachedProduct;
     };
-    // set local state when when SWR data is updated
+    /**
+     * Sync local state with incoming swr response data.
+     * If the response contains a `products` envelope, it will be extracted.
+     */
     React.useEffect(() => {
-        if (!data)
+        if (isLoading) {
             return;
-        // Determine the products array from data
-        const productsArray = Array.isArray(data) ? data : data.products || [];
-        if (!(productsArray === null || productsArray === void 0 ? void 0 : productsArray.length))
-            return;
-        setProductResponse(productsArray);
-    }, [data]);
+        }
+        if (data) {
+            const productsArray = Array.isArray(data) ? data : data.products || [];
+            if (productsArray.length > 0) {
+                setProductResponse(productsArray);
+            }
+        }
+        setIsProductResponseReady(true);
+    }, [isLoading, data]);
     return {
         products: formatProductData({
             data: productResponse,
             onlyAvailableProducts: (props === null || props === void 0 ? void 0 : props.mock) && (props === null || props === void 0 ? void 0 : props.onlyAvailableProducts),
         }),
         error,
-        isLoading: !(productResponse === null || productResponse === void 0 ? void 0 : productResponse.length) && isLoading,
+        isLoading: !isProductResponseReady,
         isRefreshing: isLoading,
         cacheProduct,
     };

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

@@ -1,5 +1,7 @@
-import { Collection, Product } from "app-studio-types";
+import { Collection, Product, BaseSearchClient } from "app-studio-types";
 interface UseRecommendationProps {
+    searchClient?: BaseSearchClient<Product>;
+    query?: string;
     queryVariables: Record<string, any>;
     apiURL: string;
 }
@@ -10,6 +12,6 @@ interface UseRecommendationReturn {
     isLoading: boolean;
     error: any;
 }
-declare const useRecommendations: ({ queryVariables, apiURL, }: UseRecommendationProps) => UseRecommendationReturn;
+declare const useRecommendations: ({ searchClient, query, queryVariables, apiURL, }: 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,MAAM,kBAAkB,CAAA;AAOtD,UAAU,sBAAsB;IAC9B,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACnC,MAAM,EAAE,MAAM,CAAA;CACf;AASD,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,WAAW,EAAE,UAAU,EAAE,CAAA;IACzB,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,GAAG,CAAA;CACX;AAiBD,QAAA,MAAM,kBAAkB,gCAGrB,sBAAsB,KAAG,uBA6D3B,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;IAGd,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACnC,MAAM,EAAE,MAAM,CAAA;CACf;AASD,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,WAAW,EAAE,UAAU,EAAE,CAAA;IACzB,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,GAAG,CAAA;CACX;AAiBD,QAAA,MAAM,kBAAkB,qDAQrB,sBAAsB,KAAG,uBA6F3B,CAAA;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAA"}

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

@@ -22,13 +22,33 @@ const getCollections = (collections) => {
         : [];
 };
 const recommendationsLocalStorage = new RecommendationsLocalStorage();
-const useRecommendations = ({ queryVariables, apiURL, }) => {
+const useRecommendations = ({ 
+// Search client props
+searchClient, query = "", 
+// API props (backwards compatibility)
+queryVariables, apiURL, }) => {
+    // When searchClient is provided, use search client approach
+    const usingSearchClient = Boolean(searchClient);
     const searchParams = useSearchParams();
-    const recommendation = (searchParams === null || searchParams === void 0 ? void 0 : searchParams.get("recommendation")) || "";
+    const recommendation = usingSearchClient
+        ? query
+        : (searchParams === null || searchParams === void 0 ? void 0 : searchParams.get("recommendation")) || "";
     const [cachedRecommendation, setCachedRecommendations] = React.useState(recommendationsLocalStorage.getCacheItem({
         id: `${recommendation}-${queryVariables === null || queryVariables === void 0 ? void 0 : queryVariables.language}`,
     }));
-    const fetcher = (body) => fetch(constructURL(apiURL), {
+    // Search client fetcher
+    const searchClientFetcher = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (!searchClient)
+            return null;
+        // Call searchClient.getRecommendations (returns string[] directly)
+        const recommendations = yield searchClient.getRecommendations({
+            query: recommendation,
+        });
+        // Format as expected by the hook
+        return Object.assign(Object.assign({}, recommendations), { collections: [] });
+    });
+    // API fetcher (backwards compatibility)
+    const apiFetcher = (body) => fetch(constructURL(apiURL), {
         method: "POST",
         body: JSON.stringify(body),
     }).then((res) => __awaiter(void 0, void 0, void 0, function* () {
@@ -38,11 +58,20 @@ const useRecommendations = ({ queryVariables, apiURL, }) => {
         }
         return data;
     }));
-    const { data, error, isLoading } = useSWR({
-        appId: queryVariables.appId,
-        query: recommendation,
-        language: queryVariables.language,
-    }, fetcher, {
+    // Determine which approach to use
+    const swrKey = usingSearchClient
+        ? {
+            type: "searchClient",
+            query: recommendation,
+            language: queryVariables === null || queryVariables === void 0 ? void 0 : queryVariables.language,
+        }
+        : {
+            appId: queryVariables.appId,
+            query: recommendation,
+            language: queryVariables.language,
+        };
+    const fetcher = usingSearchClient ? searchClientFetcher : apiFetcher;
+    const { data, error, isLoading } = useSWR(swrKey, usingSearchClient ? fetcher : (body) => apiFetcher(body), {
         revalidateOnFocus: false,
         revalidateOnReconnect: false,
     });

package/dist/components/ui/progress-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.d.ts","sourceRoot":"","sources":["../../../components/ui/progress-bar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoD,MAAM,OAAO,CAAA;AACxE,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAGhD,UAAU,gBAAgB;IACxB,QAAQ,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,eAAe,CAAC,EAAE,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAA;IACpD;;;;;;;;OAQG;IACH,gBAAgB,CAAC,EAAE;QACjB,KAAK,EAAE,MAAM,CAAA;QACb,GAAG,EAAE,MAAM,CAAA;QAEX,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,SAAS,CAAC,EAAE;YACV,KAAK,CAAC,EAAE,MAAM,CAAA;YACd,QAAQ,CAAC,EAAE,MAAM,CAAA;YACjB,UAAU,CAAC,EAAE,MAAM,CAAA;SACpB,CAAA;QACD,WAAW,CAAC,EAAE;YACZ,eAAe,CAAC,EAAE,MAAM,CAAA;YACxB,IAAI,CAAC,EAAE,MAAM,CAAA;SACd,CAAA;QACD,cAAc,CAAC,EAAE,OAAO,CAAA;KACzB,CAAA;CACF;AAID,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAiO3C,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"progress-bar.d.ts","sourceRoot":"","sources":["../../../components/ui/progress-bar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoD,MAAM,OAAO,CAAA;AACxE,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAGhD,UAAU,gBAAgB;IACxB,QAAQ,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,eAAe,CAAC,EAAE,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAA;IACpD;;;;;;;;OAQG;IACH,gBAAgB,CAAC,EAAE;QACjB,KAAK,EAAE,MAAM,CAAA;QACb,GAAG,EAAE,MAAM,CAAA;QAEX,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,SAAS,CAAC,EAAE;YACV,KAAK,CAAC,EAAE,MAAM,CAAA;YACd,QAAQ,CAAC,EAAE,MAAM,CAAA;YACjB,UAAU,CAAC,EAAE,MAAM,CAAA;SACpB,CAAA;QACD,WAAW,CAAC,EAAE;YACZ,eAAe,CAAC,EAAE,MAAM,CAAA;YACxB,IAAI,CAAC,EAAE,MAAM,CAAA;SACd,CAAA;QACD,cAAc,CAAC,EAAE,OAAO,CAAA;KACzB,CAAA;CACF;AAID,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA8N3C,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/ui/progress-bar.js

@@ -125,9 +125,7 @@ const ProgressBar = ({ progress, borderStyle, emptyColor, corners, fillColor, an
                     left: `${position}%`,
                     top: "50%",
                     transform: "translateY(-50%)",
-                } }, { children: [_jsx("div", { className: "rounded-full bg-gray-300 transform -translate-x-1/2 opacity-50", style: Object.assign({ zIndex: 2, width: `${markerSize}px`, height: `${markerSize}px` }, milestoneMarkers === null || milestoneMarkers === void 0 ? void 0 : milestoneMarkers.markerStyle) }), _jsx("div", Object.assign({ className: "text-xs text-gray-500 transform -translate-x-1/2 transition-all opacity-50", style: Object.assign({ position: "absolute", top: `${height + 8}px`, whiteSpace: "nowrap", transform: isAnimating
-                                ? "scale(1.5) translateX(-40%)"
-                                : "translateX(-50%)", fontWeight: isAnimating ? "bold" : undefined, transition: "transform 0.3s ease, font-weight 0.3s ease" }, milestoneMarkers === null || milestoneMarkers === void 0 ? void 0 : milestoneMarkers.textStyle) }, { children: Math.round(value) }))] }), `milestone-${value}`));
+                } }, { children: [_jsx("div", { className: "rounded-full bg-gray-300 transform -translate-x-1/2 opacity-50", style: Object.assign({ zIndex: 2, width: `${markerSize}px`, height: `${markerSize}px` }, milestoneMarkers === null || milestoneMarkers === void 0 ? void 0 : milestoneMarkers.markerStyle) }), _jsx("div", Object.assign({ className: "text-xs text-gray-500 transform -translate-x-1/2 transition-all opacity-50", style: Object.assign({ position: "absolute", top: `${height + 8}px`, whiteSpace: "nowrap", transform: "translateX(-50%)", transition: "transform 0.3s ease, font-weight 0.3s ease" }, milestoneMarkers === null || milestoneMarkers === void 0 ? void 0 : milestoneMarkers.textStyle) }, { children: Math.round(value) }))] }), `milestone-${value}`));
         });
         return markers;
     }, [milestonePositions, milestoneMarkers, animatedMarkers, height]);

package/dist/styles.css

@@ -1045,12 +1045,18 @@ video {
 .h-\[130px\] {
   height: 130px;
 }
+.h-\[16px\] {
+  height: 16px;
+}
 .h-\[1px\] {
   height: 1px;
 }
 .h-\[22px\] {
   height: 22px;
 }
+.h-\[30px\] {
+  height: 30px;
+}
 .h-\[30vh\] {
   height: 30vh;
 }
@@ -1172,6 +1178,9 @@ video {
 .w-\[138px\] {
   width: 138px;
 }
+.w-\[16px\] {
+  width: 16px;
+}
 .w-\[1px\] {
   width: 1px;
 }
@@ -1468,6 +1477,9 @@ video {
 .gap-2\.5 {
   gap: 0.625rem;
 }
+.gap-3 {
+  gap: 0.75rem;
+}
 .gap-4 {
   gap: 1rem;
 }
@@ -2630,10 +2642,6 @@ body::-webkit-scrollbar {
   background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
 }
 
-.hover\:no-underline:hover {
-  text-decoration-line: none;
-}
-
 .hover\:opacity-90:hover {
   opacity: 0.9;
 }

package/package.json

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