@tapcart/mobile-components 0.7.37 → 0.7.39

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

@@ -0,0 +1,10 @@
+type Customer = {
+    isAuthenticated: boolean;
+};
+type UseCustomerProps = {};
+type UseCustomerReturn = {
+    customer: Customer;
+};
+export declare const useCustomer: (props: UseCustomerProps | null) => UseCustomerReturn;
+export {};
+//# sourceMappingURL=use-customer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-customer.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-customer.ts"],"names":[],"mappings":"AAWA,KAAK,QAAQ,GAAG;IACd,eAAe,EAAE,OAAO,CAAA;CACzB,CAAA;AAGD,KAAK,gBAAgB,GAAG,EAAE,CAAA;AAE1B,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,QAAQ,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,WAAW,UACf,gBAAgB,GAAG,IAAI,KAC7B,iBAuBF,CAAA"}

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

@@ -0,0 +1,24 @@
+"use client";
+import { useState, useEffect } from "react";
+// @ts-ignore -- webbridge-react is not typed (yet)
+import { useActions } from "@tapcart/webbridge-react";
+export const useCustomer = (props) => {
+    const [isAuthenticated, setIsAuthenticated] = useState(false);
+    const [customer, setCustomer] = useState({});
+    const actions = useActions();
+    // verify customer
+    useEffect(() => {
+        try {
+            // webbridge method to get customerIdentity
+            actions.getCustomerIdentity(null, {
+                onSuccess: (user) => setIsAuthenticated(!!(user === null || user === void 0 ? void 0 : user.email)),
+            });
+        }
+        catch (e) {
+            console.log("unable to get customer identity ", e);
+        }
+    }, [actions]);
+    return {
+        customer: Object.assign({ isAuthenticated }, customer),
+    };
+};

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/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":";AAEA,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,122 @@
+"use client";
+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/icon.d.ts

@@ -12,8 +12,9 @@ export interface IconProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "c
     fillColor?: string | null;
     secondaryFillColor?: string;
     strokeColor?: string | null;
+    strokeWidth?: number | null;
     fillPercentage?: number | null;
 }
-declare function Icon({ className, name, size, color, url, fillColor, secondaryFillColor, strokeColor, fillPercentage, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+declare function Icon({ className, name, size, color, url, fillColor, secondaryFillColor, strokeColor, strokeWidth, fillPercentage, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
 export { Icon, iconVariants, IconPencilMinus };
 //# sourceMappingURL=icon.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../components/ui/icon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAEL,eAAe,EAuChB,MAAM,qBAAqB,CAAA;AAI5B,QAAA,MAAM,YAAY;;;mFAgBjB,CAAA;AA2DD,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC/B;AAyFD,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,IAAI,EACJ,IAAW,EACX,KAAK,EACL,GAAG,EACH,SAAS,EACT,kBAAkB,EAClB,WAAW,EACX,cAAc,EACd,GAAG,KAAK,EACT,EAAE,SAAS,2CAmBX;AAED,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../components/ui/icon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAEL,eAAe,EAuChB,MAAM,qBAAqB,CAAA;AAI5B,QAAA,MAAM,YAAY;;;mFAgBjB,CAAA;AA2DD,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC/B;AA0HD,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,IAAI,EACJ,IAAW,EACX,KAAK,EACL,GAAG,EACH,SAAS,EACT,kBAAkB,EAClB,WAAW,EACX,WAAW,EACX,cAAc,EACd,GAAG,KAAK,EACT,EAAE,SAAS,2CAoBX;AAED,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/ui/icon.js

@@ -87,7 +87,7 @@ const TablerIcon = ({ name, size }) => {
     const IconComponent = icons[name];
     return IconComponent ? (_jsx(IconComponent, { size: sizeMapping[size], strokeWidth: strokeWidthMapping[size] })) : null;
 };
-const CustomIcon = ({ url, size, color, strokeColor, fillColor, fillPercentage, secondaryFillColor }) => {
+const CustomIcon = ({ url, size, color, strokeColor, strokeWidth, fillColor, fillPercentage, secondaryFillColor, }) => {
     return (_jsx(ReactSVG, { src: url, beforeInjection: (svg) => {
             svg.setAttribute("style", `width: ${sizeMapping[size]}px; height: ${sizeMapping[size]}px`);
             const paths = svg.querySelectorAll("path");
@@ -99,7 +99,9 @@ const CustomIcon = ({ url, size, color, strokeColor, fillColor, fillPercentage,
                     path.setAttribute("stroke", color);
                 }
                 else {
-                    if (fillColor && path.hasAttribute("fill") && fillPercentage === 1) {
+                    if (fillColor &&
+                        path.hasAttribute("fill") &&
+                        fillPercentage === 1) {
                         path.setAttribute("fill", fillColor);
                     }
                     if (strokeColor) {
@@ -109,6 +111,9 @@ const CustomIcon = ({ url, size, color, strokeColor, fillColor, fillPercentage,
                 if (path.hasAttribute("stroke")) {
                     path.setAttribute("stroke-width", strokeWidthMapping[size].toString());
                 }
+                if (strokeWidth != null && path.hasAttribute("stroke")) {
+                    path.setAttribute("stroke-width", strokeWidth.toString());
+                }
                 // Create a gradient fill based on the fillPercentage
                 if (fillPercentage && fillPercentage > 0 && fillPercentage < 1) {
                     const percentage = Math.min(Math.max(fillPercentage, 0), 1);
@@ -134,7 +139,7 @@ const CustomIcon = ({ url, size, color, strokeColor, fillColor, fillPercentage,
         } }));
 };
 function Icon(_a) {
-    var { className, name, size = "md", color, url, fillColor, secondaryFillColor, strokeColor, fillPercentage } = _a, props = __rest(_a, ["className", "name", "size", "color", "url", "fillColor", "secondaryFillColor", "strokeColor", "fillPercentage"]);
-    return (_jsxs("div", Object.assign({ className: cn(iconVariants({ size, color }), className) }, props, { children: [url ? (_jsx(CustomIcon, { url: url, size: size, color: color, fillColor: fillColor, secondaryFillColor: secondaryFillColor, strokeColor: strokeColor, fillPercentage: fillPercentage || (color || fillColor ? 1 : 0) })) : (_jsx(TablerIcon, { name: name, size: size })), props.children] })));
+    var { className, name, size = "md", color, url, fillColor, secondaryFillColor, strokeColor, strokeWidth, fillPercentage } = _a, props = __rest(_a, ["className", "name", "size", "color", "url", "fillColor", "secondaryFillColor", "strokeColor", "strokeWidth", "fillPercentage"]);
+    return (_jsxs("div", Object.assign({ className: cn(iconVariants({ size, color }), className) }, props, { children: [url ? (_jsx(CustomIcon, { url: url, size: size, color: color, fillColor: fillColor, secondaryFillColor: secondaryFillColor, strokeColor: strokeColor, strokeWidth: strokeWidth, fillPercentage: fillPercentage || (color || fillColor ? 1 : 0) })) : (_jsx(TablerIcon, { name: name, size: size })), props.children] })));
 }
 export { Icon, iconVariants, IconPencilMinus };

package/dist/components/ui/quantity-picker.d.ts

@@ -1,8 +1,10 @@
 import * as React from "react";
 export interface QuantityPickerProps extends React.HTMLAttributes<HTMLDivElement> {
-    decreaseIcon: string;
-    increaseIcon: string;
-    deleteIcon: string;
+    decreaseIconUrl: string;
+    increaseIconUrl: string;
+    deleteIconUrl: string;
+    isDeleteOnly: boolean;
+    iconColor: string;
     onDecreaseClick: React.ReactEventHandler;
     onIncreaseClick: React.ReactEventHandler;
     value: number;

package/dist/components/ui/quantity-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"quantity-picker.d.ts","sourceRoot":"","sources":["../../../components/ui/quantity-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,YAAY,EAAE,MAAM,CAAA;IACpB,YAAY,EAAE,MAAM,CAAA;IACpB,UAAU,EAAE,MAAM,CAAA;IAClB,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACxC,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACxC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAgBD,QAAA,MAAM,cAAc,4FAyCnB,CAAA;AAID,OAAO,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"quantity-picker.d.ts","sourceRoot":"","sources":["../../../components/ui/quantity-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,eAAe,EAAE,MAAM,CAAA;IACvB,eAAe,EAAE,MAAM,CAAA;IACvB,aAAa,EAAE,MAAM,CAAA;IACrB,YAAY,EAAE,OAAO,CAAA;IACrB,SAAS,EAAE,MAAM,CAAA;IACjB,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACxC,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACxC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAiBD,QAAA,MAAM,cAAc,4FAwDnB,CAAA;AAID,OAAO,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/ui/quantity-picker.js

@@ -10,14 +10,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils";
 import { Icon } from "./icon";
-const IconButton = ({ icon, handler, className }) => (_jsx("button", Object.assign({ onClick: handler, className: cn("flex items-center justify-center h-7 w-7 bg-stateColors-skeleton outline outline-1 outline-stateColors-skeleton", className) }, { children: _jsx(Icon, { name: icon, size: "sm", color: "coreColors-secondaryIcon" }) })));
+const IconButton = ({ iconUrl, iconColor, handler, className }) => (_jsx("button", Object.assign({ onClick: handler, className: cn("flex items-center justify-center h-7 w-7 bg-stateColors-skeleton outline outline-1 outline-stateColors-skeleton", className) }, { children: _jsx(Icon, { url: iconUrl, size: "sm", strokeColor: iconColor, strokeWidth: 4 }) })));
 const QuantityPicker = React.forwardRef((_a, ref) => {
-    var { className, decreaseIcon, increaseIcon, deleteIcon, onDecreaseClick, onIncreaseClick, value, setValue } = _a, props = __rest(_a, ["className", "decreaseIcon", "increaseIcon", "deleteIcon", "onDecreaseClick", "onIncreaseClick", "value", "setValue"]);
-    return (_jsxs("div", Object.assign({ className: cn("flex", className), ref: ref }, props, { children: [_jsx(IconButton, { handler: onDecreaseClick, icon: value === 1 ? deleteIcon : decreaseIcon, className: "rounded-tl rounded-bl" }), _jsx("div", Object.assign({ className: "w-8 h-7 py-1 flex justify-center bg-coreColors-inputBackground outline outline-1 outline-coreColors-dividingLines text-[14px] font-sfpro-roboto leading-[160%] font-normal text-textColors-primaryColor" }, { children: _jsx("input", { type: "tel", pattern: "[0-9]*", value: value, onBlur: (e) => (e.target.value = value.toString()), onFocus: (e) => (e.target.value = ""), onChange: (e) => setValue(parseInt(e.target.value) || 0), className: "w-8 focus-visible:outline-none text-center" }) })), _jsx(IconButton, { handler: onIncreaseClick, icon: increaseIcon, className: "rounded-tr rounded-br" })] })));
+    var { className, decreaseIconUrl, increaseIconUrl, deleteIconUrl, isDeleteOnly = false, iconColor, onDecreaseClick, onIncreaseClick, value, setValue } = _a, props = __rest(_a, ["className", "decreaseIconUrl", "increaseIconUrl", "deleteIconUrl", "isDeleteOnly", "iconColor", "onDecreaseClick", "onIncreaseClick", "value", "setValue"]);
+    return (_jsx("div", Object.assign({ className: cn("flex", className), ref: ref }, props, { children: isDeleteOnly ? (_jsx(IconButton, { handler: onDecreaseClick, iconUrl: deleteIconUrl, iconColor: iconColor, className: "rounded" })) : (_jsxs(_Fragment, { children: [_jsx(IconButton, { handler: onDecreaseClick, iconUrl: value === 1 ? deleteIconUrl : decreaseIconUrl, iconColor: iconColor, className: "rounded-tl rounded-bl" }), _jsx("div", Object.assign({ className: "w-8 h-7 py-1 flex justify-center bg-coreColors-inputBackground outline outline-1 outline-stateColors-skeleton text-[14px] font-sfpro-roboto leading-[160%] font-normal text-textColors-primaryColor" }, { children: _jsx("input", { type: "tel", pattern: "[0-9]*", value: value, onBlur: (e) => (e.target.value = value.toString()), onFocus: (e) => (e.target.value = ""), onChange: (e) => setValue(parseInt(e.target.value) || 0), className: "w-8 focus-visible:outline-none text-center bg-coreColors-inputBackground text-textColors-primaryColor" }) })), _jsx(IconButton, { handler: onIncreaseClick, iconUrl: increaseIconUrl, iconColor: iconColor, className: "rounded-tr rounded-br" })] })) })));
 });
 QuantityPicker.displayName = "QuantityPicker";
 export { QuantityPicker };

package/dist/lib/utils.d.ts

@@ -202,4 +202,5 @@ export declare const createCollectionImageMap: (collections: {
     image?: string;
 }[]) => Record<string, string>;
 export declare const isFavoriteIntegrationEnabled: (integrations: Integrations) => boolean;
+export declare const pluralize: (word: string, count?: number, inclusive?: boolean) => string;
 //# sourceMappingURL=utils.d.ts.map

package/dist/lib/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../lib/utils.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../lib/utils.ts"],"names":[],"mappings":"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"}

package/dist/lib/utils.js

@@ -2,6 +2,7 @@ import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
+import Pluralize from "pluralize";
 export function cn(...inputs) {
     return twMerge(clsx(inputs));
 }
@@ -240,4 +241,7 @@ export const createCollectionImageMap = (collections) => {
 export const isFavoriteIntegrationEnabled = (integrations) => {
     return integrations.some(integration => (integration.name === "tapcart-wishlist" || integration.name === "swym") && integration.enabled);
 };
+export const pluralize = (word, count, inclusive) => {
+    return Pluralize(word, count, inclusive);
+};
 // #endregion =-=-=-= END BLOCK UTILS =-=-=-=

package/dist/styles.css

@@ -755,6 +755,9 @@ video {
 .top-\[50\%\] {
   top: 50%;
 }
+.z-0 {
+  z-index: 0;
+}
 .z-10 {
   z-index: 10;
 }
@@ -840,6 +843,9 @@ video {
 .ml-2 {
   margin-left: 0.5rem;
 }
+.ml-4 {
+  margin-left: 1rem;
+}
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -1017,6 +1023,9 @@ video {
 .w-1\/2 {
   width: 50%;
 }
+.w-1\/3 {
+  width: 33.333333%;
+}
 .w-10 {
   width: 2.5rem;
 }
@@ -1035,6 +1044,9 @@ video {
 .w-2\.5 {
   width: 0.625rem;
 }
+.w-2\/3 {
+  width: 66.666667%;
+}
 .w-4 {
   width: 1rem;
 }
@@ -1266,6 +1278,9 @@ video {
 .items-center {
   align-items: center;
 }
+.items-stretch {
+  align-items: stretch;
+}
 .justify-start {
   justify-content: flex-start;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tapcart/mobile-components",
-  "version": "0.7.37",
+  "version": "0.7.39",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "style": "dist/styles.css",
@@ -77,6 +77,7 @@
     "next": "^14.2.5",
     "next-themes": "^0.2.1",
     "postcss-cli": "^11.0.0",
+    "pluralize": "^8.0.0",
     "react-intersection-observer": "^9.10.2",
     "react-svg": "^16.1.34",
     "swr": "^2.2.5",
@@ -84,4 +85,4 @@
     "tailwindcss-animate": "^1.0.6",
     "vaul": "0.9.1"
   }
-}
+}

package/dist/components/hooks/use-debug-dependencies.d.ts

@@ -1,10 +0,0 @@
-/**
- * Custom hook to debug dependency changes.
- *
- * Usage:
- * useDebugDependencies([dependencyA, dependencyB]);
- *
- * @param {Array} deps - Array of dependencies to monitor for changes.
- */
-export declare function useDebugDependencies(deps: any[]): void;
-//# sourceMappingURL=use-debug-dependencies.d.ts.map

package/dist/components/hooks/use-debug-dependencies.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-debug-dependencies.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-debug-dependencies.ts"],"names":[],"mappings":"AAGA;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,GAAG,EAAE,QAU/C"}

package/dist/components/hooks/use-debug-dependencies.js

@@ -1,18 +0,0 @@
-"use client";
-import { useRef, useEffect } from "react";
-/**
- * Custom hook to debug dependency changes.
- *
- * Usage:
- * useDebugDependencies([dependencyA, dependencyB]);
- *
- * @param {Array} deps - Array of dependencies to monitor for changes.
- */
-export function useDebugDependencies(deps) {
-    const prevDeps = useRef(deps);
-    useEffect(() => {
-        const changedDeps = deps.map((dep, i) => dep !== prevDeps.current[i] ? dep : null);
-        console.log("Changed dependencies:", changedDeps);
-        prevDeps.current = deps;
-    }, [deps]);
-}

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

@@ -1,13 +0,0 @@
-import { PhoenixLayout } from "lib/tapcart/types";
-type UseLayoutProps = {
-    appId: string;
-    layoutId: string;
-};
-type UseLayoutReturn = {
-    layout: PhoenixLayout | null;
-    error: any;
-    isLoading: boolean;
-};
-export declare function useLayout({ appId, layoutId, }: UseLayoutProps): UseLayoutReturn;
-export {};
-//# sourceMappingURL=use-layout.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"use-layout.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-layout.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAGjD,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,KAAK,eAAe,GAAG;IACrB,MAAM,EAAE,aAAa,GAAG,IAAI,CAAA;IAC5B,KAAK,EAAE,GAAG,CAAA;IACV,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,GACT,EAAE,cAAc,GAAG,eAAe,CAYlC"}

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

@@ -1,23 +0,0 @@
-"use client";
-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 useSWR from "swr";
-import { fetchLayoutById } from "apps/tapcart-ssr-app/lib/tapcart/index";
-export function useLayout({ appId, layoutId, }) {
-    const fetcher = (appId, layoutId) => __awaiter(this, void 0, void 0, function* () {
-        return fetchLayoutById(appId, layoutId);
-    });
-    const { data, error } = useSWR([appId, layoutId], fetcher);
-    return {
-        layout: data || null,
-        error,
-        isLoading: !data && !error,
-    };
-}