@tapcart/mobile-components 0.7.28 → 0.7.29

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":";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/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

@@ -1369,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.28",
+  "version": "0.7.29",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "style": "dist/styles.css",

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 const 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":"AAEA;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB,SAAU,GAAG,EAAE,SAU/C,CAAA"}

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

@@ -1,17 +0,0 @@
-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 const 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,
-    };
-}