@tapcart/mobile-components 0.7.51 → 0.7.53

package/dist/components/ThemeProvider.d.ts

@@ -0,0 +1,3 @@
+import { ThemeProviderProps } from "next-themes/dist/types";
+export declare function ThemeProvider({ children, ...props }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ThemeProvider.d.ts.map

package/dist/components/ThemeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../components/ThemeProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAE3D,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAEvE"}

package/dist/components/ThemeProvider.js

@@ -0,0 +1,18 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+export function ThemeProvider(_a) {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return _jsx(NextThemesProvider, Object.assign({}, props, { children: children }));
+}

package/dist/components/ThemeToggle.d.ts

@@ -0,0 +1,2 @@
+export declare function ThemeToggle(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ThemeToggle.d.ts.map

package/dist/components/ThemeToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeToggle.d.ts","sourceRoot":"","sources":["../../components/ThemeToggle.tsx"],"names":[],"mappings":"AAOA,wBAAgB,WAAW,4CAc1B"}

package/dist/components/ThemeToggle.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from "next-themes";
+import { Button } from "../components/ui/button";
+export function ThemeToggle() {
+    const { setTheme, theme } = useTheme();
+    return (_jsxs(Button, Object.assign({ variant: "ghost", size: "sm", onClick: () => setTheme(theme === "light" ? "dark" : "light") }, { children: [_jsx("div", { className: "rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" }), _jsx("div", { className: "absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" }), _jsx("span", Object.assign({ className: "sr-only" }, { children: "Toggle theme" }))] })));
+}

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;CACf,UACO,YAAY;;;CAyJrB,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;AAgBzB,eAAO,MAAM,4BAA4B,WAC/B;IACN,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf,UACO,YAAY;;;CA6KrB,CAAA"}

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

@@ -16,11 +16,11 @@ import { useCollection } from "./use-collection";
 import { useSearchParams } from "next/navigation";
 //@ts-expect-error
 import { useVariables } from "@tapcart/webbridge-react";
-import { gidFromId, countNumberOfTagsInState, getEnvState, shouldShowBlock, } from "../../lib/utils";
+import { gidFromId, countNumberOfTagsInState, getEnvState, shouldShowBlock, evaluateConditions, } from "../../lib/utils";
 export const useBlockConditionalRendering = (_props, _block) => {
-    var _a, _b, _c, _d, _e, _f;
-    const _g = ((_a = _block === null || _block === void 0 ? void 0 : _block.visibilityConditions) === null || _a === void 0 ? void 0 : _a.conditions) || {}, { enabled: isEnabled = false, exclude: isInverse = false } = _g, restOfProps = __rest(_g, ["enabled", "exclude"]);
-    let shouldShow = true;
+    var _a, _b, _c, _d, _e;
+    const _f = ((_a = _block === null || _block === void 0 ? void 0 : _block.visibilityConditions) === null || _a === void 0 ? void 0 : _a.conditions) || {}, { enabled: conditionalsV1IsEnabled = false, exclude: isInverse = false } = _f, restOfProps = __rest(_f, ["enabled", "exclude"]);
+    const { _version = 1, conditions, enabled: conditionalsV2IsEnabled = false, } = (_block === null || _block === void 0 ? void 0 : _block.visibilityConditions) || {};
     const blockState = restOfProps;
     const { appId = "", apiUrl = "" } = _props;
     const searchParams = useSearchParams();
@@ -29,7 +29,7 @@ export const useBlockConditionalRendering = (_props, _block) => {
     const customerVariables = variables === null || variables === void 0 ? void 0 : variables.customer;
     // locale is provided in this form en_US
     const [language, country] = ((_b = deviceVariables === null || deviceVariables === void 0 ? void 0 : deviceVariables.locale) === null || _b === void 0 ? void 0 : _b.split("_")) || [];
-    const productId = (_c = searchParams.get("productId")) !== null && _c !== void 0 ? _c : undefined;
+    const productId = (_c = searchParams === null || searchParams === void 0 ? void 0 : searchParams.get("productId")) !== null && _c !== void 0 ? _c : undefined;
     const location = {
         country: country || "US",
         language: language || "en",
@@ -45,7 +45,7 @@ export const useBlockConditionalRendering = (_props, _block) => {
         };
     }), [blockProductMetafields]);
     // Fetch product if productId is present
-    const { products, error: useProductsError, isLoading: useProductsLoading, } = useProducts(productId !== undefined && isEnabled
+    const { products, error: useProductsError, isLoading: isProductsLoading, } = useProducts(productId !== undefined && conditionalsV1IsEnabled
         ? {
             productIds: [gidFromId(productId)],
             baseURL: apiUrl,
@@ -68,9 +68,9 @@ export const useBlockConditionalRendering = (_props, _block) => {
             .map((m) => `${m.namespace}.${m.key}`)
             .join(",")
         : undefined, [collectionMetafieldsQuery]);
-    const collectionId = (_d = searchParams.get("collectionId")) !== null && _d !== void 0 ? _d : undefined;
-    const collectionHandle = (_e = searchParams.get("collectionHandle")) !== null && _e !== void 0 ? _e : undefined;
-    const { specificCollection = {}, error: useCollectionError, loading: useCollectionLoading, } = useCollection({
+    const collectionId = (_d = searchParams === null || searchParams === void 0 ? void 0 : searchParams.get("collectionId")) !== null && _d !== void 0 ? _d : undefined;
+    const collectionHandle = (_e = searchParams === null || searchParams === void 0 ? void 0 : searchParams.get("collectionHandle")) !== null && _e !== void 0 ? _e : undefined;
+    const { specificCollection = {}, error: useCollectionError, loading: isCollectionLoading, } = useCollection({
         appId,
         apiUrl,
         collectionId,
@@ -78,42 +78,50 @@ export const useBlockConditionalRendering = (_props, _block) => {
         language: location === null || location === void 0 ? void 0 : location.language,
         metafields: memoizedMetafields,
     });
+    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);
     }
+    let shouldShow = true;
+    const blockConditionalsIsEnabled = conditionalsV1IsEnabled || conditionalsV2IsEnabled;
+    const blockHasTags = countNumberOfTagsInState(blockState) > 0;
+    const product = products.length === 1 ? products[0] : undefined;
+    const envState = getEnvState({
+        location,
+        product,
+        collection: specificCollection,
+        customer: customerVariables,
+    });
+    const evaluateV1Conditions = () => {
+        if (!blockHasTags) {
+            // No tags configured - default to showing
+            return true;
+        }
+        //@ts-expect-error: envState typing mismatch
+        const shouldShowPreInverse = shouldShowBlock(envState, blockState);
+        // TODO: Remove when inverse is available for all blocks
+        return isInverse ? !shouldShowPreInverse : shouldShowPreInverse;
+    };
+    const evaluateV2Conditions = () => {
+        return evaluateConditions(conditions, envState);
+    };
     try {
-        // if block has tags
-        if (((_f = _block.visibilityConditions) === null || _f === void 0 ? void 0 : _f.conditions) !== undefined && isEnabled) {
-            const blockHasTags = countNumberOfTagsInState(blockState) > 0;
-            if (blockHasTags) {
-                const product = products.length === 1 ? products[0] : undefined;
-                const envState = getEnvState({
-                    location,
-                    product,
-                    collection: specificCollection,
-                    customer: customerVariables,
-                });
-                //@ts-expect-errors
-                const shouldShowPreInverse = shouldShowBlock(envState, blockState);
-                // TODO: Currently negation of properties is not available but is required for migration of certain merchants
-                // This code is to be removed and updated when inverse feature is available for all blocks
-                // If exclude tag is applied then block should show inversely
-                if (isInverse) {
-                    shouldShow = !shouldShowPreInverse;
-                }
-                else {
-                    shouldShow = shouldShowPreInverse;
-                }
+        if (blockConditionalsIsEnabled) {
+            switch (_version) {
+                case 2:
+                    shouldShow = evaluateV2Conditions();
+                    break;
+                case 1:
+                default:
+                    // Handles v1 and any unexpected versions
+                    shouldShow = evaluateV1Conditions();
+                    break;
             }
         }
-        // if conditionals is disabled, show the block.
-        if (!isEnabled) {
-            return { shouldShow: true, isLoading: false };
-        }
-        return { shouldShow, isLoading: useProductsLoading || useCollectionLoading };
     }
     catch (e) {
-        console.error("conditionals error: ", e);
-        return { shouldShow: true, isLoading: false };
+        console.error("Error evaluating block visibility conditions:", e);
+        shouldShow = true; // Fail-safe to show block
     }
+    return { shouldShow, isLoading };
 };

package/dist/components/hooks/use-block-conditionals.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=use-block-conditionals.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-block-conditionals.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-block-conditionals.ts"],"names":[],"mappings":""}

package/dist/components/hooks/use-block-conditionals.js

@@ -0,0 +1,2 @@
+"use client";
+export {};

package/dist/components/hooks/use-nosto-recommendation.test.js

@@ -7,7 +7,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react";
+import { act } from "react-dom/test-utils";
 import { NostoRecommendationsType, useNostoRecommendations, } from "./use-nosto-recommendation";
 import { useProducts } from "./use-products";
 jest.mock("./use-products", () => ({
@@ -111,8 +112,14 @@ describe("useNostoRecommendations", () => {
     });
     it("should return front page recommendations if productIds is empty and slotId is provided", () => __awaiter(void 0, void 0, void 0, function* () {
         const slotId = "mockSlotId";
-        const { result, waitFor } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, slotId, undefined, undefined, undefined));
-        yield waitFor(() => result.current.isLoading === false);
+        const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, slotId, undefined, undefined, undefined));
+        // Initial state check
+        expect(result.current.isLoading).toBe(true);
+        // Wait for all promises with act
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            yield new Promise((resolve) => setTimeout(resolve, 0));
+        }));
+        // Check final state
         expect(result.current.isLoading).toBe(false);
         expect(result.current.error).toBe(null);
         expect(useProducts).toHaveBeenCalledWith({
@@ -127,8 +134,15 @@ describe("useNostoRecommendations", () => {
     }));
     it("should return best sellers recommendations if productIds is empty and slotId is not provided", () => __awaiter(void 0, void 0, void 0, function* () {
         const slotId = "";
-        const { result, waitFor } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, slotId, undefined, undefined));
-        yield waitFor(() => result.current.isLoading === false);
+        const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, slotId, undefined, undefined));
+        // Initial state check
+        expect(result.current.isLoading).toBe(true);
+        // Wait for all promises with act
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            yield new Promise((resolve) => setTimeout(resolve, 0));
+        }));
+        // Check final state
+        expect(result.current.isLoading).toBe(false);
         expect(result.current.error).toBe(null);
         expect(useProducts).toHaveBeenCalledWith({
             productIds: ["best-seller-1"],
@@ -143,8 +157,15 @@ describe("useNostoRecommendations", () => {
     it("should return best sellers recommendations if productIds is not empty, Best Sellers is the recommendation type and slotId is not provided", () => __awaiter(void 0, void 0, void 0, function* () {
         const slotId = "";
         const productIds = ["mockProductId"];
-        const { result, waitFor } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, slotId, NostoRecommendationsType.BEST_SELLERS, productIds));
-        yield waitFor(() => result.current.isLoading === false);
+        const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, slotId, NostoRecommendationsType.BEST_SELLERS, productIds));
+        // Initial state check
+        expect(result.current.isLoading).toBe(true);
+        // Wait for all promises with act
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            yield new Promise((resolve) => setTimeout(resolve, 0));
+        }));
+        // Check final state
+        expect(result.current.isLoading).toBe(false);
         expect(result.current.error).toBe(null);
         expect(useProducts).toHaveBeenCalledWith({
             productIds: ["best-seller-1"],
@@ -158,8 +179,15 @@ describe("useNostoRecommendations", () => {
     }));
     it("should return default front page recommendations if slotId is provided but layoutType is not", () => __awaiter(void 0, void 0, void 0, function* () {
         const slotId = "mockSlotId";
-        const { result, waitFor } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, slotId));
-        yield waitFor(() => result.current.isLoading === false);
+        const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, slotId));
+        // Initial state check
+        expect(result.current.isLoading).toBe(true);
+        // Wait for all promises with act
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            yield new Promise((resolve) => setTimeout(resolve, 0));
+        }));
+        // Check final state
+        expect(result.current.isLoading).toBe(false);
         expect(result.current.error).toBe(null);
         expect(useProducts).toHaveBeenCalledWith({
             productIds: ["front-page-id-1"],
@@ -172,8 +200,15 @@ describe("useNostoRecommendations", () => {
         });
     }));
     it("should return the correct recommendations for best sellers", () => __awaiter(void 0, void 0, void 0, function* () {
-        const { result, waitFor } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, "", NostoRecommendationsType.BEST_SELLERS, undefined, undefined));
-        yield waitFor(() => result.current.isLoading === false);
+        const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, "", NostoRecommendationsType.BEST_SELLERS, undefined, undefined));
+        // Initial state check
+        expect(result.current.isLoading).toBe(true);
+        // Wait for all promises with act
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            yield new Promise((resolve) => setTimeout(resolve, 0));
+        }));
+        // Check final state
+        expect(result.current.isLoading).toBe(false);
         expect(result.current.error).toBe(null);
         expect(useProducts).toHaveBeenCalledWith({
             productIds: ["best-seller-1"],
@@ -187,8 +222,15 @@ describe("useNostoRecommendations", () => {
     }));
     it("should return the related recommendations when only productIds and a recommendation type are provided on a non-home layout", () => __awaiter(void 0, void 0, void 0, function* () {
         const productIds = ["mockProductId"];
-        const { result, waitFor } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, "", NostoRecommendationsType.VIEWED_TOGETHER, productIds, undefined));
-        yield waitFor(() => result.current.isLoading === false);
+        const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, "", NostoRecommendationsType.VIEWED_TOGETHER, productIds, undefined));
+        // Initial state check
+        expect(result.current.isLoading).toBe(true);
+        // Wait for all promises with act
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            yield new Promise((resolve) => setTimeout(resolve, 0));
+        }));
+        // Check final state
+        expect(result.current.isLoading).toBe(false);
         expect(result.current.error).toBe(null);
         expect(useProducts).toHaveBeenCalledWith({
             productIds: ["related-1"],
@@ -203,8 +245,15 @@ describe("useNostoRecommendations", () => {
     it("should return the correct recommendations when productIds and slotIds are provided", () => __awaiter(void 0, void 0, void 0, function* () {
         const slotId = "mockSlotId";
         const productIds = ["mockProductId"];
-        const { result, waitFor } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, slotId, NostoRecommendationsType.VIEWED_TOGETHER, productIds, undefined));
-        yield waitFor(() => result.current.isLoading === false);
+        const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, slotId, NostoRecommendationsType.VIEWED_TOGETHER, productIds, undefined));
+        // Initial state check
+        expect(result.current.isLoading).toBe(true);
+        // Wait for all promises with act
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            yield new Promise((resolve) => setTimeout(resolve, 0));
+        }));
+        // Check final state
+        expect(result.current.isLoading).toBe(false);
         expect(result.current.error).toBe(null);
         expect(useProducts).toHaveBeenCalledWith({
             productIds: ["product-page-id-1"],
@@ -218,8 +267,15 @@ describe("useNostoRecommendations", () => {
     }));
     it("should return the related products fallback recommendations when productIds are provided and no slotId and a type other than viewed_category and best_sellers is provided", () => __awaiter(void 0, void 0, void 0, function* () {
         const productIds = ["mockProductId"];
-        const { result, waitFor } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, "", NostoRecommendationsType.VIEWED_TOGETHER, productIds, undefined));
-        yield waitFor(() => result.current.isLoading === false);
+        const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, "", NostoRecommendationsType.VIEWED_TOGETHER, productIds, undefined));
+        // Initial state check
+        expect(result.current.isLoading).toBe(true);
+        // Wait for all promises with act
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            yield new Promise((resolve) => setTimeout(resolve, 0));
+        }));
+        // Check final state
+        expect(result.current.isLoading).toBe(false);
         expect(result.current.error).toBe(null);
         expect(useProducts).toHaveBeenCalledWith({
             productIds: ["related-1"],
@@ -233,8 +289,15 @@ describe("useNostoRecommendations", () => {
     }));
     it("should return the category fallback recommendations when no slotId, productIds are provided and a recommendation type of viewed_category is provided", () => __awaiter(void 0, void 0, void 0, function* () {
         const productIds = ["mockProductId"];
-        const { result, waitFor } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, "", NostoRecommendationsType.VIEWED_CATEGORY, productIds, undefined));
-        yield waitFor(() => result.current.isLoading === false);
+        const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, "", NostoRecommendationsType.VIEWED_CATEGORY, productIds, undefined));
+        // Initial state check
+        expect(result.current.isLoading).toBe(true);
+        // Wait for all promises with act
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            yield new Promise((resolve) => setTimeout(resolve, 0));
+        }));
+        // Check final state
+        expect(result.current.isLoading).toBe(false);
         expect(result.current.error).toBe(null);
         expect(useProducts).toHaveBeenCalledWith({
             productIds: ["category-page-id-1"],
@@ -248,7 +311,15 @@ describe("useNostoRecommendations", () => {
     }));
     it("should handle loading state", () => __awaiter(void 0, void 0, void 0, function* () {
         const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, ""));
+        // Check initial loading state
         expect(result.current.isLoading).toBe(true);
+        // Wait for all state updates to complete
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            yield new Promise((resolve) => setTimeout(resolve, 0));
+        }));
+        // Verify loading has finished
+        expect(result.current.isLoading).toBe(false);
+        expect(result.current.error).toBe(null);
     }));
     it("should handle error state", () => __awaiter(void 0, void 0, void 0, function* () {
         const mockError = () => "Failed to fetch products";
@@ -257,14 +328,29 @@ describe("useNostoRecommendations", () => {
             isLoading: false,
             error: mockError,
         });
-        const { result, waitForNextUpdate } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL));
-        yield waitForNextUpdate();
+        const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL));
+        // Initial state check
+        expect(result.current.isLoading).toBe(true);
+        // Wait for all promises and state updates to resolve
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            yield new Promise((resolve) => setTimeout(resolve, 0));
+        }));
+        // Verify final error state
+        expect(result.current.isLoading).toBe(false);
         expect(result.current.error).toBe(mockError);
+        expect(result.current.recommendations).toEqual([]);
     }));
     it("should default to best sellers if productIds are empty but a recommendation type other than Best Sellers is used", () => __awaiter(void 0, void 0, void 0, function* () {
         const productIds = [];
-        const { result, waitFor } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, "", NostoRecommendationsType.VIEWED_TOGETHER, productIds, undefined));
-        yield waitFor(() => result.current.isLoading === false);
+        const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, "", NostoRecommendationsType.VIEWED_TOGETHER, productIds, undefined));
+        // Initial state check
+        expect(result.current.isLoading).toBe(true);
+        // Wait for all promises with act
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            yield new Promise((resolve) => setTimeout(resolve, 0));
+        }));
+        // Check final state
+        expect(result.current.isLoading).toBe(false);
         expect(result.current.error).toBe(null);
         expect(useProducts).toHaveBeenCalledWith({
             productIds: ["best-seller-1"],
@@ -277,8 +363,15 @@ describe("useNostoRecommendations", () => {
         });
     }));
     it("should return an empty array if skip is true", () => __awaiter(void 0, void 0, void 0, function* () {
-        const { result, waitFor } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, "", NostoRecommendationsType.BEST_SELLERS, undefined, true));
-        yield waitFor(() => result.current.isLoading === false);
+        const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, "", NostoRecommendationsType.BEST_SELLERS, undefined, true));
+        // Initial state check
+        expect(result.current.isLoading).toBe(true);
+        // Wait for all promises with act
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            yield new Promise((resolve) => setTimeout(resolve, 0));
+        }));
+        // Check final state
+        expect(result.current.isLoading).toBe(false);
         expect(useProducts).toHaveBeenCalledWith({
             productIds: [],
             baseURL: mockBaseURL,

package/dist/components/ui/input.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const inputVariants: (props?: ({
+    error?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange">, VariantProps<typeof inputVariants> {
+    id: string;
+    label?: string;
+    icon?: string;
+    asChild?: boolean;
+    value: string;
+    placeholder: string;
+    onChange: (_: string) => void;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export { Input };
+//# sourceMappingURL=input.d.ts.map

package/dist/components/ui/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../components/ui/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,aAAa;;mFAalB,CAAA;AAED,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,EACnE,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAC9B;AAED,QAAA,MAAM,KAAK,qFAkDV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/ui/input.js

@@ -0,0 +1,35 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+import { Icon } from "./icon";
+const inputVariants = cva("flex h-14 w-full rounded border border-coreColors-dividingLines bg-coreColors-inputBackground px-4 pt-5 pb-2 placeholder-shown:p-4 text-textColors-primaryColor text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-textColors-secondaryColor focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50 focus:border-coreColors-brandColorPrimary peer data-[icon=true]:pr-10", {
+    variants: {
+        error: {
+            true: "border-stateColors-error text-stateColors-error placeholder:text-stateColors-error focus:border-stateColors-error [&+label]:text-stateColors-error",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        error: false,
+    },
+});
+const Input = React.forwardRef((_a, ref) => {
+    var { className, error = false, id, type, label, icon, asChild, value, placeholder, onChange } = _a, props = __rest(_a, ["className", "error", "id", "type", "label", "icon", "asChild", "value", "placeholder", "onChange"]);
+    const Comp = asChild ? Slot : "div";
+    return (_jsxs(Comp, Object.assign({ className: "relative group" }, { children: [_jsx("input", Object.assign({ placeholder: placeholder, value: value, onChange: (e) => onChange(e.target.value), id: id, type: type, className: cn(inputVariants({ error }), className), "data-icon": !!icon, ref: ref }, props)), label ? (_jsx("label", Object.assign({ htmlFor: id, className: "absolute text-[10px] text-textColors-secondaryColor group-active:text-coreColors-brandColorPrimary top-2 z-10 h-4 origin-[0] start-4 opacity-100 peer-placeholder-shown:opacity-0" }, { children: label }))) : null, icon ? (_jsx(Icon, { name: icon, "data-error": error, size: "sm", className: "absolute w-5 aspect-square fill-current text-textColors-secondaryColor top-[18px] z-10 origin-[0] end-4 peer-pr-8 icon data-[error=true]:text-stateColors-error" })) : null] })));
+});
+Input.displayName = "Input";
+export { Input };

package/dist/components/ui/product-grid.d.ts

@@ -0,0 +1,15 @@
+type Product = any;
+interface PageData {
+    products: Product[];
+    cursorBlob?: string;
+    filtersData: any;
+}
+interface ProductGridItemsProps {
+    initialData: PageData;
+    loadMoreProducts: (params: any) => Promise<PageData>;
+    queryVariables: Record<string, any>;
+    config: Record<string, any>;
+}
+declare function ProductGrid({ loadMoreProducts, initialData, queryVariables, config, }: ProductGridItemsProps): import("react/jsx-runtime").JSX.Element;
+export { ProductGrid };
+//# sourceMappingURL=product-grid.d.ts.map

package/dist/components/ui/product-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-grid.d.ts","sourceRoot":"","sources":["../../../components/ui/product-grid.tsx"],"names":[],"mappings":"AAkBA,KAAK,OAAO,GAAG,GAAG,CAAA;AAClB,UAAU,QAAQ;IAChB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,GAAG,CAAA;CACjB;AAED,UAAU,qBAAqB;IAC7B,WAAW,EAAE,QAAQ,CAAA;IACrB,gBAAgB,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAA;IACpD,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACnC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAC5B;AAED,iBAAS,WAAW,CAAC,EACnB,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,MAAM,GACP,EAAE,qBAAqB,2CAmCvB;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/ui/product-grid.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useInfiniteScroll } from "../hooks/use-infinite-scroll";
+import { ProductCard } from "./product-card";
+const Loader = () => (_jsx("div", Object.assign({ className: "grid-cols-2 lg:grid-cols-3" }, { children: Array(4)
+        .fill(0)
+        .map((_, index) => (_jsx("div", { className: "aspect-[2/3] animate-pulse bg-neutral-100 dark:bg-neutral-900" }, index))) })));
+function ProductGrid({ loadMoreProducts, initialData, queryVariables, config, }) {
+    const { data, error, isLoadingInitialData, isLoadingMore, isEmpty, isReachingEnd, ref, products, } = useInfiniteScroll({
+        initialData,
+        loadMoreProducts,
+        queryVariables,
+    });
+    if (error)
+        return _jsx("div", { children: "Failed to load data" });
+    if (isLoadingInitialData)
+        return _jsx(Loader, {});
+    return (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: "grid-cols-2 lg:grid-cols-3" }, { children: products.map((product, i) => (_jsx(ProductCard, { 
+                    // @ts-expect-error
+                    product: product, config: config, isLoading: false }, product.handle))) })), isLoadingMore ? _jsx(Loader, {}) : _jsx("div", { ref: ref })] }));
+}
+export { ProductGrid };

package/dist/components/ui/selectors.d.ts

@@ -26,6 +26,7 @@ declare const Selectors: React.ForwardRefExoticComponent<Omit<React.DetailedHTML
 type SelectorContainerProps = {
     children: React.ReactElement<SelectorsProps>[] | React.ReactElement<SelectorsProps>;
     containerRef: React.RefObject<HTMLDivElement>;
+    height?: string;
     className?: string;
 };
 declare const SelectorContainer: React.FC<SelectorContainerProps>;

package/dist/components/ui/selectors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selectors.d.ts","sourceRoot":"","sources":["../../../components/ui/selectors.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,iBAAiB;;;mFAiBtB,CAAA;AACD,KAAK,cAAc,GAAG,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,GAC5D,YAAY,CAAC,OAAO,iBAAiB,CAAC,GAAG;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS,CAAA;CAClE,CAAA;AAEH,QAAA,MAAM,SAAS;;;;;;;;;eAHA,MAAM,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS;2CA2CpE,CAAA;AACD,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,EACJ,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,EAAE,GACpC,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAA;IACtC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AACD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA6CvD,CAAA;AAID,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAA"}
+{"version":3,"file":"selectors.d.ts","sourceRoot":"","sources":["../../../components/ui/selectors.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,iBAAiB;;;mFAiBtB,CAAA;AACD,KAAK,cAAc,GAAG,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,GAC5D,YAAY,CAAC,OAAO,iBAAiB,CAAC,GAAG;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS,CAAA;CAClE,CAAA;AAEH,QAAA,MAAM,SAAS;;;;;;;;;eAHA,MAAM,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS;2CA2CpE,CAAA;AACD,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,EACJ,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,EAAE,GACpC,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAA;IACtC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AACD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA8CvD,CAAA;AAID,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/components/ui/selectors.js

@@ -38,7 +38,7 @@ const Selectors = React.forwardRef((_a, ref) => {
             disabled,
         }), "group", className), ref: ref }, props, { children: children ? (children) : (_jsx(Text, Object.assign({ type: "body-primary", color: "text-textColors-primaryColor" }, { children: label }))) })));
 });
-const SelectorContainer = ({ children, containerRef, className, }) => {
+const SelectorContainer = ({ children, containerRef, className, height = "42px", }) => {
     const [showFadeLeft, setShowFadeLeft] = React.useState(false);
     const [showFadeRight, setShowFadeRight] = React.useState(false);
     const checkOverflow = () => {
@@ -55,7 +55,7 @@ const SelectorContainer = ({ children, containerRef, className, }) => {
     React.useEffect(() => {
         checkOverflow();
     }, [children]);
-    return (_jsx("div", Object.assign({ className: "relative no-scrollbar" }, { children: _jsxs("div", Object.assign({ className: cn("flex gap-2 px-1 h-[42px] items-center overflow-x-auto overflow-y-hidden no-scrollbar", className), onScroll: checkOverflow, ref: containerRef }, { children: [children, showFadeLeft && (_jsx("div", { className: "absolute top-0 left-0 w-8 h-full pointer-events-none" })), showFadeRight && (_jsx("div", { className: "absolute top-0 right-0 w-8 h-full pointer-events-none " }))] })) })));
+    return (_jsx("div", Object.assign({ className: "relative no-scrollbar" }, { children: _jsxs("div", Object.assign({ className: cn(`flex gap-2 px-1 h-[${height}] items-center overflow-x-auto overflow-y-hidden no-scrollbar`, className), onScroll: checkOverflow, ref: containerRef }, { children: [children, showFadeLeft && (_jsx("div", { className: "absolute top-0 left-0 w-8 h-full pointer-events-none bg-fade-left" })), showFadeRight && (_jsx("div", { className: "absolute top-0 right-0 w-8 h-full pointer-events-none bg-fade-right" }))] })) })));
 };
 Selectors.displayName = "Selectors";
 export { SelectorContainer, Selectors, selectorsVariants };

package/dist/components/ui/text.d.ts

@@ -1,12 +1,20 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
+type Injections = Record<string, {
+    payload: string;
+    currencyMetadata?: {
+        currency: string;
+        locale: string;
+    };
+}>;
 declare const textVariants: (props?: ({
     type?: "h1" | "h2" | "label" | "body-primary" | "body-secondary" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export interface TextProps extends React.HTMLAttributes<HTMLParagraphElement>, VariantProps<typeof textVariants> {
     fontColor?: string | null;
+    injections?: Injections;
     children?: React.ReactNode;
 }
-declare function Text({ className, type, fontColor, children, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
+declare function Text({ className, type, fontColor, injections, children, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
 export { Text, textVariants };
 //# sourceMappingURL=text.d.ts.map

package/dist/components/ui/text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../components/ui/text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAOjE,QAAA,MAAM,YAAY;;mFAgBhB,CAAA;AAEF,MAAM,WAAW,SACf,SAAQ,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,EAChD,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAiB1E;AAED,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../components/ui/text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAQjE,KAAK,UAAU,GAAG,MAAM,CACtB,MAAM,EACN;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,gBAAgB,CAAC,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAA;CAAE,CAC7E,CAAA;AAmDD,QAAA,MAAM,YAAY;;mFAgBhB,CAAA;AAEF,MAAM,WAAW,SACf,SAAQ,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,EAChD,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,IAAI,EACJ,SAAS,EACT,UAAU,EACV,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,SAAS,2CAoBX;AAED,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,CAAA"}