@tapcart/mobile-components 0.7.52 → 0.7.54

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-click-outside.d.ts

@@ -0,0 +1,6 @@
+import React from "react"
+export declare function useClickOutside(
+  ref: React.RefObject<HTMLElement>,
+  callback: () => void
+): void
+//# sourceMappingURL=use-click-outside.d.ts.map

package/dist/components/hooks/use-click-outside.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-click-outside.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-click-outside.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,wBAAgB,eAAe,CAAC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,QAAQ,EAAE,MAAM,IAAI,GAAE,IAAI,CAa5F"}

package/dist/components/hooks/use-click-outside.js

@@ -0,0 +1,15 @@
+"use client"
+import React from "react"
+export function useClickOutside(ref, callback) {
+  React.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        callback()
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside)
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside)
+    }
+  }, [ref, callback])
+}

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/hooks/use-outside-click.d.ts

@@ -0,0 +1,7 @@
+import React from "react"
+declare const useClickOutside: (
+  ref: React.RefObject<HTMLElement>,
+  callback: () => void
+) => void
+export default useClickOutside
+//# sourceMappingURL=use-outside-click.d.ts.map

package/dist/components/hooks/use-outside-click.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-outside-click.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-outside-click.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,QAAA,MAAM,eAAe,QAAS,MAAM,SAAS,CAAC,WAAW,CAAC,YAAY,MAAM,IAAI,SAa/E,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/hooks/use-outside-click.js

@@ -0,0 +1,16 @@
+"use client"
+import React from "react"
+const useClickOutside = (ref, callback) => {
+  React.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        callback()
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside)
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside)
+    }
+  }, [ref, callback])
+}
+export default useClickOutside

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

@@ -0,0 +1,8 @@
+import React from "react"
+declare const useTap: (tapThreshold?: number) => {
+  onTap: (handler: (event: any) => void) => (event: any) => void
+  isPressed: boolean
+  ref: React.MutableRefObject<null>
+}
+export { useTap }
+//# sourceMappingURL=use-tap.d.ts.map

package/dist/components/hooks/use-tap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-tap.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-tap.ts"],"names":[],"mappings":"AACA,OAAO,KAAmD,MAAM,OAAO,CAAA;AAuFvE,QAAA,MAAM,MAAM;6BAuBkC,GAAG,KAAK,IAAI,aACvC,GAAG;;;CAerB,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}

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

@@ -0,0 +1,100 @@
+"use client"
+import { useState, useEffect, useCallback, useRef } from "react"
+// Shared manager for all instances of the hook
+const tapManager = (() => {
+  const elements = new Map()
+  let isListening = false
+  const startListening = () => {
+    if (isListening) return
+    const handleTouchStart = (e) => {
+      const touch = e.touches[0]
+      elements.forEach((data, el) => {
+        if (el.contains(touch.target)) {
+          data.touchStarted = true
+          data.touchMoved = false
+          data.startPosition = { x: touch.clientX, y: touch.clientY }
+          // Don't set isPressed here, wait to determine if it's a tap or drag
+        }
+      })
+    }
+    const handleTouchMove = (e) => {
+      const touch = e.touches[0]
+      elements.forEach((data, el) => {
+        if (data.touchStarted) {
+          const deltaX = Math.abs(touch.clientX - data.startPosition.x)
+          const deltaY = Math.abs(touch.clientY - data.startPosition.y)
+          if (deltaX > data.tapThreshold || deltaY > data.tapThreshold) {
+            data.touchMoved = true
+            data.setIsPressed(false)
+          }
+        }
+      })
+    }
+    const handleTouchEnd = () => {
+      elements.forEach((data) => {
+        if (data.touchStarted) {
+          data.touchStarted = false
+          if (!data.touchMoved) {
+            // It's a tap, set isPressed briefly
+            data.setIsPressed(true)
+            setTimeout(() => data.setIsPressed(false), 100)
+          }
+        }
+      })
+    }
+    document.addEventListener("touchstart", (e) => handleTouchStart(e), {
+      passive: true,
+    })
+    document.addEventListener("touchmove", (e) => handleTouchMove(e), {
+      passive: true,
+    })
+    document.addEventListener("touchend", () => handleTouchEnd(), {
+      passive: true,
+    })
+    isListening = true
+  }
+  return {
+    register: (el, data) => {
+      elements.set(el, data)
+      startListening()
+    },
+    unregister: (el) => {
+      elements.delete(el)
+    },
+    elements,
+  }
+})()
+const useTap = (tapThreshold = 10) => {
+  const [isPressed, setIsPressed] = useState(false)
+  const elementRef = useRef(null)
+  useEffect(() => {
+    const element = elementRef.current
+    if (!element) return
+    const data = {
+      touchStarted: false,
+      touchMoved: false,
+      startPosition: { x: 0, y: 0 },
+      setIsPressed,
+      tapThreshold,
+    }
+    tapManager.register(element, data)
+    return () => {
+      tapManager.unregister(element)
+    }
+  }, [tapThreshold])
+  const onTap = useCallback((handler) => {
+    return (event) => {
+      const data = tapManager.elements.get(elementRef.current)
+      if (!data) return
+      if (event.type === "touchend" && !data.touchMoved) {
+        handler(event)
+      } else if (event.type === "click" && !data.touchStarted) {
+        handler(event)
+        setIsPressed(true)
+        setTimeout(() => setIsPressed(false), 100)
+      }
+    }
+  }, [])
+  return { onTap, isPressed, ref: elementRef }
+}
+export { useTap }

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"}

package/dist/components/ui/text.js

@@ -14,6 +14,41 @@ import * as React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 import { useTranslation, getTextTranslation, } from "../contexts/translation-context";
+import { Money } from "./money";
+function injectString(template, injections) {
+    if (injections === undefined)
+        return undefined;
+    if (!Object.entries(injections).length)
+        return undefined;
+    const parts = [];
+    let lastIndex = 0;
+    // Find all matches and their positions
+    const matches = Array.from(template.matchAll(/\{\{(.*?)\}\}/g));
+    matches.forEach((match, index) => {
+        const key = match[1];
+        const injection = injections[key];
+        // Add text before the match
+        if (match.index && match.index > lastIndex) {
+            parts.push(template.slice(lastIndex, match.index));
+        }
+        // Add the injection
+        if (injection) {
+            if (injection.currencyMetadata) {
+                parts.push(_jsx(Money, { price: Number(injection.payload), currency: "USD" // These could be made configurable if needed
+                    , locale: "en-US" }, `price-${index}`));
+            }
+            else {
+                parts.push(injection.payload);
+            }
+        }
+        lastIndex = (match.index || 0) + match[0].length;
+    });
+    // Add remaining text after last match
+    if (lastIndex < template.length) {
+        parts.push(template.slice(lastIndex));
+    }
+    return parts.length ? parts : undefined;
+}
 const textVariants = cva("", {
     variants: {
         type: {
@@ -29,7 +64,7 @@ const textVariants = cva("", {
     },
 });
 function Text(_a) {
-    var { className, type, fontColor, children } = _a, props = __rest(_a, ["className", "type", "fontColor", "children"]);
+    var { className, type, fontColor, injections, children } = _a, props = __rest(_a, ["className", "type", "fontColor", "injections", "children"]);
     const fontColorOverride = fontColor ? { color: fontColor } : {};
     const translations = useTranslation();
     const stringContents = React.Children.toArray(children).join("");
@@ -37,6 +72,8 @@ function Text(_a) {
         text: stringContents,
         translations,
     });
-    return (_jsx("p", Object.assign({ className: cn(textVariants({ type }), className), style: fontColorOverride }, props, { children: textContents ? textContents : children })));
+    const injectContents = injectString(stringContents, injections);
+    const content = injectContents || textContents || children;
+    return (_jsx("p", Object.assign({ className: cn(textVariants({ type }), className), style: fontColorOverride }, props, { children: content })));
 }
 export { Text, textVariants };

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

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+interface GridType {
+    className: any;
+    children: React.ReactNode;
+}
+declare const virtualGridVariants: (props?: ({
+    columns?: 1 | 2 | 3 | 4 | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface VirtualGridProps extends GridType, VariantProps<typeof virtualGridVariants> {
+}
+declare function VirtualGrid({ className, columns, children, ...props }: VirtualGridProps): import("react/jsx-runtime").JSX.Element;
+export { VirtualGrid, virtualGridVariants };
+//# sourceMappingURL=virtual-grid.d.ts.map