@tapcart/mobile-components 0.7.27 → 0.7.29

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

@@ -0,0 +1,248 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { renderHook } from "@testing-library/react-hooks";
+import { NostoRecommendationsType, useNostoRecommendations, } from "./use-nosto-recommendation";
+import { useProducts } from "./use-products";
+jest.mock("./use-products", () => ({
+    useProducts: jest.fn(),
+}));
+// Mock fetch for GraphQL queries
+global.fetch = jest.fn((url, options) => {
+    const body = JSON.parse(options === null || options === void 0 ? void 0 : options.body);
+    if (body.query.includes("newSession")) {
+        return Promise.resolve({
+            json: () => Promise.resolve({ data: { newSession: "mockSessionId" } }),
+        });
+    }
+    if (body.query.includes("GetFrontPageRecommendations")) {
+        return Promise.resolve({
+            json: () => Promise.resolve({
+                data: {
+                    updateSession: {
+                        pages: {
+                            forFrontPage: [{ primary: [{ productId: "front-page-id-1" }] }],
+                        },
+                    },
+                },
+            }),
+        });
+    }
+    if (body.query.includes("GetBestSellersRecommendations")) {
+        return Promise.resolve({
+            json: () => Promise.resolve({
+                data: {
+                    recos: {
+                        toplist: {
+                            primary: [{ name: "Product 1", productId: "best-seller-1" }],
+                        },
+                    },
+                },
+            }),
+        });
+    }
+    if (body.query.includes("GetRelatedProductsRecommendations")) {
+        return Promise.resolve({
+            json: () => Promise.resolve({
+                data: {
+                    recos: {
+                        related: {
+                            primary: [{ productId: "related-1" }],
+                        },
+                    },
+                },
+            }),
+        });
+    }
+    if (body.query.includes("GetProductPageRecommendations")) {
+        return Promise.resolve({
+            json: () => Promise.resolve({
+                data: {
+                    updateSession: {
+                        pages: {
+                            forProductPage: [
+                                { primary: [{ productId: "product-page-id-1" }] },
+                            ],
+                        },
+                    },
+                },
+            }),
+        });
+    }
+    if (body.query.includes("CategoryPageRecommendations")) {
+        return Promise.resolve({
+            json: () => Promise.resolve({
+                data: {
+                    updateSession: {
+                        pages: {
+                            forCategoryPage: [
+                                { primary: [{ productId: "category-page-id-1" }] },
+                            ],
+                        },
+                    },
+                },
+            }),
+        });
+    }
+    return Promise.reject(new Error("Unknown query"));
+});
+describe("useNostoRecommendations", () => {
+    const mockIntegrations = [
+        {
+            name: "nosto",
+            key: "mockNostoKey",
+            enabled: true,
+        },
+    ];
+    const mockBaseURL = "http://mockbaseurl.com";
+    beforeEach(() => {
+        jest.clearAllMocks();
+        useProducts.mockReturnValue({
+            products: [{ id: "1", name: "Product 1" }],
+            isLoading: false,
+            error: null,
+        });
+    });
+    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);
+        expect(result.current.isLoading).toBe(false);
+        expect(result.current.error).toBe(null);
+        expect(useProducts).toHaveBeenCalledWith({
+            productIds: ["front-page-id-1"],
+            baseURL: mockBaseURL,
+            productHandles: [],
+        });
+    }));
+    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);
+        expect(result.current.error).toBe(null);
+        expect(useProducts).toHaveBeenCalledWith({
+            productIds: ["best-seller-1"],
+            baseURL: mockBaseURL,
+            productHandles: [],
+        });
+    }));
+    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);
+        expect(result.current.error).toBe(null);
+        expect(useProducts).toHaveBeenCalledWith({
+            productIds: ["best-seller-1"],
+            baseURL: mockBaseURL,
+            productHandles: [],
+        });
+    }));
+    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);
+        expect(result.current.error).toBe(null);
+        expect(useProducts).toHaveBeenCalledWith({
+            productIds: ["front-page-id-1"],
+            baseURL: mockBaseURL,
+            productHandles: [],
+        });
+    }));
+    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);
+        expect(result.current.error).toBe(null);
+        expect(useProducts).toHaveBeenCalledWith({
+            productIds: ["best-seller-1"],
+            baseURL: mockBaseURL,
+            productHandles: [],
+        });
+    }));
+    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);
+        expect(result.current.error).toBe(null);
+        expect(useProducts).toHaveBeenCalledWith({
+            productIds: ["related-1"],
+            baseURL: mockBaseURL,
+            productHandles: [],
+        });
+    }));
+    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);
+        expect(result.current.error).toBe(null);
+        expect(useProducts).toHaveBeenCalledWith({
+            productIds: ["product-page-id-1"],
+            baseURL: mockBaseURL,
+            productHandles: [],
+        });
+    }));
+    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);
+        expect(result.current.error).toBe(null);
+        expect(useProducts).toHaveBeenCalledWith({
+            productIds: ["related-1"],
+            baseURL: mockBaseURL,
+            productHandles: [],
+        });
+    }));
+    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);
+        expect(result.current.error).toBe(null);
+        expect(useProducts).toHaveBeenCalledWith({
+            productIds: ["category-page-id-1"],
+            baseURL: mockBaseURL,
+            productHandles: [],
+        });
+    }));
+    it("should handle loading state", () => __awaiter(void 0, void 0, void 0, function* () {
+        const { result } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL, ""));
+        expect(result.current.isLoading).toBe(true);
+    }));
+    it("should handle error state", () => __awaiter(void 0, void 0, void 0, function* () {
+        const mockError = () => "Failed to fetch products";
+        useProducts.mockReturnValue({
+            products: [],
+            isLoading: false,
+            error: mockError,
+        });
+        const { result, waitForNextUpdate } = renderHook(() => useNostoRecommendations(mockIntegrations, mockBaseURL));
+        yield waitForNextUpdate();
+        expect(result.current.error).toBe(mockError);
+    }));
+    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);
+        expect(result.current.error).toBe(null);
+        expect(useProducts).toHaveBeenCalledWith({
+            productIds: ["best-seller-1"],
+            baseURL: mockBaseURL,
+            productHandles: [],
+        });
+    }));
+    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);
+        expect(useProducts).toHaveBeenCalledWith({
+            productIds: [],
+            baseURL: mockBaseURL,
+            productHandles: [],
+        });
+    }));
+});

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;AAKtD,UAAU,sBAAsB;IAC9B,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACnC,MAAM,EAAE,MAAM,CAAA;CACf;AAED,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;AAOD,QAAA,MAAM,kBAAkB,+BAGrB,sBAAsB,KAAG,uBAiC3B,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,MAAM,kBAAkB,CAAA;AAKtD,UAAU,sBAAsB;IAC9B,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACnC,MAAM,EAAE,MAAM,CAAA;CACf;AAED,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;AAOD,QAAA,MAAM,kBAAkB,+BAGrB,sBAAsB,KAAG,uBAgC3B,CAAA;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAA"}

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

@@ -8,7 +8,6 @@ const constructURL = (apiURL) => {
 const useRecommendations = ({ queryVariables, apiURL }) => {
     const searchParams = useSearchParams();
     const recommendation = (searchParams === null || searchParams === void 0 ? void 0 : searchParams.get('recommendation')) || "*";
-    const isBestSeller = recommendation === "*";
     const fetcher = (body) => fetch(constructURL(apiURL), {
         method: "POST",
         body: JSON.stringify(body),
@@ -24,7 +23,7 @@ const useRecommendations = ({ queryVariables, apiURL }) => {
     return {
         products: data === null || data === void 0 ? void 0 : data.products,
         collections: data === null || data === void 0 ? void 0 : data.collections,
-        searches: isBestSeller ? [] : data === null || data === void 0 ? void 0 : data.searches,
+        searches: data === null || data === void 0 ? void 0 : data.searches,
         isLoading: isLoading,
         error: error
     };

package/dist/components/ui/apple-pay-button.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="applepayjs" />
+import * as React from "react";
+export type ApplePayButtonType = 'plain' | 'add-money' | 'book' | 'buy' | 'check-out' | 'continue' | 'contribute' | 'donate' | 'order' | 'pay' | 'reload' | 'rent' | 'set-up' | 'subscribe' | 'support' | 'tip' | 'top-up';
+export type ApplePayButtonStyle = 'black' | 'white' | 'white-outline';
+export interface ApplePayButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    displayName: string;
+    amount: number;
+    startSessionURL: string;
+    appId: string;
+    domainName: string;
+    countryCode?: string;
+    currencyCode?: string;
+    merchantCapabilities?: ApplePayJS.ApplePayMerchantCapability[];
+    supportedNetworks?: string[];
+    buttonType?: ApplePayButtonType;
+    buttonStyle?: ApplePayButtonStyle;
+    onPaymentAuthorized?: (paymentData: ApplePayJS.ApplePayPayment) => void;
+}
+declare const ApplePayButton: {
+    ({ displayName, amount, startSessionURL, appId, domainName, countryCode, currencyCode, merchantCapabilities, supportedNetworks, buttonType, buttonStyle, onPaymentAuthorized, }: ApplePayButtonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { ApplePayButton };
+//# sourceMappingURL=apple-pay-button.d.ts.map

package/dist/components/ui/apple-pay-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"apple-pay-button.d.ts","sourceRoot":"","sources":["../../../components/ui/apple-pay-button.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,WAAW,GAAG,MAAM,GAAG,KAAK,GAAG,WAAW,GAAG,UAAU,GAAG,YAAY,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,WAAW,GAAG,SAAS,GAAG,KAAK,GAAG,QAAQ,CAAC;AAE3N,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,OAAO,GAAG,eAAe,CAAA;AAErE,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,UAAU,CAAC,0BAA0B,EAAE,CAAC;IAC/D,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,UAAU,CAAC,eAAe,KAAK,IAAI,CAAC;CACzE;AAED,QAAA,MAAM,cAAc;qLAcf,mBAAmB;;CA2IvB,CAAA;AAID,OAAO,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/ui/apple-pay-button.js

@@ -0,0 +1,121 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import ApplePayButtonComponent from 'apple-pay-button';
+const ApplePayButton = ({ displayName, amount, startSessionURL, appId, domainName, countryCode = 'US', currencyCode = 'USD', merchantCapabilities = ["supports3DS"], supportedNetworks = ["visa", "masterCard", "amex", "discover"], buttonType = 'plain', buttonStyle = 'white-outline', onPaymentAuthorized, }) => {
+    const [paymentDataResult, setPaymentDataResult] = React.useState("");
+    const onClick = () => {
+        const applePayRequest = {
+            countryCode,
+            currencyCode,
+            merchantCapabilities,
+            supportedNetworks,
+            total: {
+                label: displayName,
+                type: "final",
+                amount: amount.toString(),
+            }
+        };
+        const session = new ApplePaySession(3, applePayRequest);
+        handleEventsForApplePay(session);
+        session.begin();
+    };
+    const defaultFetcher = (url, body) => fetch(url, {
+        method: body ? "POST" : "GET",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: body ? JSON.stringify(body) : undefined,
+    }).then((res) => res.json());
+    const validateMerchant = (validationURL, appId, domainName, displayName) => __awaiter(void 0, void 0, void 0, function* () {
+        let url = startSessionURL;
+        let body = {
+            validationURL,
+            appId,
+            domainName,
+            displayName
+        };
+        console.log("request body", body);
+        const response = yield defaultFetcher(url, body);
+        return response.data;
+    });
+    const handleEventsForApplePay = (session) => {
+        session.onvalidatemerchant = (event) => __awaiter(void 0, void 0, void 0, function* () {
+            const response = yield validateMerchant(event.validationURL, appId, domainName, displayName);
+            if (response) {
+                session.completeMerchantValidation(response);
+            }
+            else {
+                console.error("Error during validating merchant");
+            }
+        });
+        session.onpaymentmethodselected = (event) => {
+            const update = {
+                newTotal: {
+                    label: displayName,
+                    type: "final",
+                    amount: amount.toString(),
+                }
+            };
+            session.completePaymentMethodSelection(update);
+        };
+        session.onshippingmethodselected = (event) => {
+            const update = {
+                newTotal: {
+                    label: displayName,
+                    type: "final",
+                    amount: amount.toString(),
+                }
+            };
+            session.completeShippingMethodSelection(update);
+        };
+        session.onshippingcontactselected = (event) => {
+            const update = {
+                newTotal: {
+                    label: displayName,
+                    type: "final",
+                    amount: amount.toString(),
+                }
+            };
+            session.completeShippingContactSelection(update);
+        };
+        session.onpaymentauthorized = (event) => __awaiter(void 0, void 0, void 0, function* () {
+            const paymentData = event.payment;
+            if (onPaymentAuthorized) { // Call the callback if provided
+                onPaymentAuthorized(paymentData);
+            }
+            if (paymentData.token) {
+                const paymentDataJson = JSON.stringify(paymentData.token, null, 2);
+                console.log("paymentData", paymentDataJson);
+                setPaymentDataResult(paymentDataJson);
+                const result = {
+                    status: ApplePaySession.STATUS_SUCCESS,
+                };
+                session.completePayment(result);
+            }
+            else {
+                const result = {
+                    status: ApplePaySession.STATUS_FAILURE,
+                };
+                session.completePayment(result);
+            }
+        });
+        session.oncancel = (event) => {
+            console.log("Session Cancelled.");
+        };
+    };
+    return (_jsxs("div", { children: [_jsx("div", Object.assign({ className: "flex flex-row justify-center items-center pt-40" }, { children: _jsx(ApplePayButtonComponent, { onClick: onClick, style: {
+                        height: "48px",
+                        borderRadius: '4px',
+                    }, type: buttonType, buttonStyle: buttonStyle }) })), _jsx("div", Object.assign({ className: "w-100 overflow-auto" }, { children: _jsx("pre", Object.assign({ className: "whitespace-pre-wrap break-words" }, { children: paymentDataResult })) }))] }));
+};
+ApplePayButton.displayName = "ApplePayButton";
+export { ApplePayButton };

package/dist/components/ui/drawer.js

@@ -25,7 +25,7 @@ const DrawerPortal = ({ children, containerRef }) => {
     }
     // If no ref is passed, attempt to look for the dashboard specific block container.
     // This will only be valid within the CMS Dashboard.
-    const dashboardContainer = document.querySelector("#_tcDashboard-BlockPhonePreview");
+    const dashboardContainer = typeof document !== "undefined" && document.querySelector("#_tcDashboard-BlockPhonePreview");
     if (dashboardContainer) {
         return ReactDOM.createPortal(children, dashboardContainer);
     }

package/dist/components/ui/price.js

@@ -7,7 +7,7 @@ function Price({ price, priceHigh, priceRanges = false, isSale = false, compareA
     const ProductPrice = () => {
         const priceStyles = (!isSale || !compareAtPrice) ? standardStyles : saleStyles;
         const colorClass = isSale ? 'text-textColors-salePriceText' : 'text-textColors-priceText';
-        return (_jsx(Text, Object.assign({ className: `${colorClass} flex-shrink-0`, style: { fontSize: `${fontSize}px` } }, { children: _jsxs("span", Object.assign({ className: "flex-grow min-w-[fit-content]" }, { children: [_jsx(Money, { price: price, currency: currency, locale: locale, styles: priceStyles, hideZeroCents: hideZeroCents }), priceRanges && priceHigh !== undefined && _jsx(Spacer, {}), priceRanges && priceHigh !== undefined && (_jsx(Money, { price: priceHigh, currency: currency, locale: locale, styles: priceStyles, hideZeroCents: hideZeroCents }))] })) })));
+        return (_jsx(Text, Object.assign({ className: `${colorClass} flex-shrink-0 w-full`, style: { fontSize: `${fontSize}px` } }, { children: _jsxs("span", Object.assign({ className: "flex-grow min-w-[fit-content] break-all" }, { children: [_jsx(Money, { price: price, currency: currency, locale: locale, styles: priceStyles, hideZeroCents: hideZeroCents }), priceRanges && priceHigh !== undefined && _jsx(Spacer, {}), priceRanges && priceHigh !== undefined && (_jsx(Money, { price: priceHigh, currency: currency, locale: locale, styles: priceStyles, hideZeroCents: hideZeroCents }))] })) })));
     };
     const StrikeThroughPrice = () => {
         if (!isSale || !compareAtPrice)

package/dist/styles.css

@@ -1002,9 +1002,6 @@ video {
 .min-h-\[24px\] {
   min-height: 24px;
 }
-.min-h-\[315px\] {
-  min-height: 315px;
-}
 .w-0 {
   width: 0px;
 }
@@ -1372,6 +1369,9 @@ video {
 .break-words {
   overflow-wrap: break-word;
 }
+.break-all {
+  word-break: break-all;
+}
 .rounded {
   border-radius: 0.25rem;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tapcart/mobile-components",
-  "version": "0.7.27",
+  "version": "0.7.29",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "style": "dist/styles.css",
@@ -39,12 +39,14 @@
     "eslint": "^7.32.0",
     "eslint-config-custom": "workspace:*",
     "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "postcss": "^8.4.24",
     "tailwindcss": "^3.3.2",
     "ts-jest": "^29.2.5",
     "tsc-alias": "^1.8.10",
     "tsconfig": "workspace:*",
-    "typescript": "^4.5.2"
+    "typescript": "^4.5.2",
+    "@testing-library/react-hooks": "^8.0.1"
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.1.2",

package/dist/components/contexts/translationContext.d.ts

@@ -1,9 +0,0 @@
-import React from "react";
-type TranslationMap = Record<string, string>;
-export declare const TranslationProvider: ({ translations, children, }: {
-    translations: TranslationMap;
-    children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const useTranslation: () => TranslationMap;
-export {};
-//# sourceMappingURL=translationContext.d.ts.map

package/dist/components/contexts/translationContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"translationContext.d.ts","sourceRoot":"","sources":["../../../components/contexts/translationContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAA;AAExD,KAAK,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAI5C,eAAO,MAAM,mBAAmB;kBAIhB,cAAc;cAClB,MAAM,SAAS;6CAK1B,CAAA;AAED,eAAO,MAAM,cAAc,sBAAuC,CAAA"}

package/dist/components/contexts/translationContext.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext } from "react";
-const TranslationContext = createContext({});
-export const TranslationProvider = ({ translations, children, }) => (_jsx(TranslationContext.Provider, Object.assign({ value: translations }, { children: children })));
-export const useTranslation = () => useContext(TranslationContext);

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

@@ -1,23 +0,0 @@
-type OpenProductFn = (arg: {
-    productId: string;
-}) => void;
-type OpenCollectionFn = (arg: {
-    collectionId: string;
-}) => void;
-type OpenScreenFn = (arg: {
-    destination: {
-        type: "internal" | "web";
-        url: string;
-    };
-}) => void;
-type DestinationType = "product" | "collection" | "url" | "app-screen";
-interface UseDestinationProps {
-    openProduct: OpenProductFn;
-    openCollection: OpenCollectionFn;
-    openScreen: OpenScreenFn;
-    type: DestinationType;
-    location: string;
-}
-export declare const useDestination: ({ openProduct, openCollection, openScreen, type, location, }: UseDestinationProps) => (() => void);
-export {};
-//# sourceMappingURL=use-destination.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"use-destination.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-destination.ts"],"names":[],"mappings":"AAEA,KAAK,aAAa,GAAG,CAAC,GAAG,EAAE;IAAE,SAAS,EAAE,MAAM,CAAA;CAAE,KAAK,IAAI,CAAA;AACzD,KAAK,gBAAgB,GAAG,CAAC,GAAG,EAAE;IAAE,YAAY,EAAE,MAAM,CAAA;CAAE,KAAK,IAAI,CAAA;AAC/D,KAAK,YAAY,GAAG,CAAC,GAAG,EAAE;IACxB,WAAW,EAAE;QAAE,IAAI,EAAE,UAAU,GAAG,KAAK,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;CACvD,KAAK,IAAI,CAAA;AAEV,KAAK,eAAe,GAAG,SAAS,GAAG,YAAY,GAAG,KAAK,GAAG,YAAY,CAAA;AAEtE,UAAU,mBAAmB;IAC3B,WAAW,EAAE,aAAa,CAAA;IAC1B,cAAc,EAAE,gBAAgB,CAAA;IAChC,UAAU,EAAE,YAAY,CAAA;IACxB,IAAI,EAAE,eAAe,CAAA;IACrB,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,eAAO,MAAM,cAAc,iEAMxB,mBAAmB,KAAG,CAAC,MAAM,IAAI,CAYnC,CAAA"}

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

@@ -1,13 +0,0 @@
-"use client";
-export const useDestination = ({ openProduct, openCollection, openScreen, type, location, }) => {
-    switch (type) {
-        case "product":
-            return () => openProduct({ productId: location });
-        case "collection":
-            return () => openCollection({ collectionId: location });
-        case "url":
-            return () => openScreen({ destination: { type: "web", url: location } });
-        case "app-screen":
-            return () => openScreen({ destination: { type: "internal", url: location } });
-    }
-};

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

@@ -1,8 +0,0 @@
-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/ui/use-tap.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-tap.d.ts","sourceRoot":"","sources":["../../../components/ui/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"}