@tapcart/mobile-components 0.7.43 → 0.7.44

package/README.md

@@ -3,20 +3,25 @@
 [@tapcart/mobile-components](https://www.npmjs.com/package/@tapcart/mobile-components)
 
 # @tapcart/mobile-components
+
 ### Build the next-gen shopper experience for Tapcart's core product, the mobile app.
 
-| Status | Owner | Help |
-| ------ | ----------- | ----------- |
+| Status | Owner                      | Help            |
+| ------ | -------------------------- | --------------- |
 | Active | @tapcart/mobile-components | dev@tapcart.com |
 
 # About this repo
+
 The tapcart/mobile-components repository is a component library made up of all the code components that drive our app experience.
 
 # Installation using NPM
+
 ### Install into your React.js project
+
 `npm install @tapcart/mobile-components`
 
 # Usage
+
 **Easy. Cake. Done.**
 
 ```
@@ -46,7 +51,7 @@ import {
 } from "@tapcart/mobile-components";
 
 <Video>
-  <source src="https://assets.tapcart.com/image-block/video/FhEjfK4zD2_6614803b487c620032dc21c4.mp4" /> 
+  <source src="https://assets.tapcart.com/image-block/video/FhEjfK4zD2_6614803b487c620032dc21c4.mp4" />
 </Video>
 
 <Separator />
@@ -217,6 +222,7 @@ import {
 ```
 
 # Licenses
+
 Copyright (c) 2017-present Tapcart Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
@@ -225,4 +231,4 @@ The above copyright notice and this permission notice shall be included in all c
 
 The rights granted above may only be exercised to develop and distribute applications that integrate or interoperate with Tapcart software or services, and in the case of external, stand-alone applications that do not embed directly inside Tapcart, the rights granted above may only be exercised to develop and distribute applications that are dissimilar and visually distinct from Tapcart products and services, as determined by Tapcart in its sole discretion.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/dist/components/ThemeProvider.d.ts

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

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

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

package/dist/components/ThemeProvider.js

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

package/dist/components/ThemeToggle.d.ts

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

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

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

package/dist/components/ThemeToggle.js

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

package/dist/components/hooks/use-block-conditional-rendering.d.ts

@@ -0,0 +1,9 @@
+import { PhoenixBlock } from "app-studio-types";
+export declare const useConditionals: (_props: {
+    appId: string;
+    apiUrl: string;
+}, _block: PhoenixBlock) => {
+    shouldShow: boolean;
+    isLoading: boolean;
+};
+//# sourceMappingURL=use-block-conditional-rendering.d.ts.map

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

@@ -0,0 +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,eAAe,WAClB;IACN,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf,UACO,YAAY;;;CAyJrB,CAAA"}

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

@@ -0,0 +1,119 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { useMemo } from "react";
+import { useProducts } from "./use-products";
+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";
+export const useConditionals = (_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;
+    const blockState = restOfProps;
+    const { appId = "", apiUrl = "" } = _props;
+    const searchParams = useSearchParams();
+    const variables = useVariables();
+    const deviceVariables = variables === null || variables === void 0 ? void 0 : variables.device;
+    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 location = {
+        country: country || "US",
+        language: language || "en",
+    };
+    let blockProductMetafields = useMemo(() => blockState && blockState.productMetafield
+        ? blockState.productMetafield
+        : [], [blockState]);
+    const productMetafieldsQuery = useMemo(() => blockProductMetafields.map((item) => {
+        // these are the fields used in the query.
+        return {
+            namespace: item.namespace,
+            key: item.key,
+        };
+    }), [blockProductMetafields]);
+    // Fetch product if productId is present
+    const { products, error: useProductsError, isLoading: useProductsLoading, } = useProducts(productId !== undefined && isEnabled
+        ? {
+            productIds: [gidFromId(productId)],
+            baseURL: apiUrl,
+            productHandles: [],
+            metafields: productMetafieldsQuery,
+        }
+        : null);
+    const blockCollectionMetafields = useMemo(() => blockState && blockState.collectionMetafield
+        ? blockState.collectionMetafield
+        : [], [blockState]);
+    const collectionMetafieldsQuery = useMemo(() => blockCollectionMetafields.map((item) => {
+        // these are the fields used in the query.
+        return {
+            namespace: item.namespace,
+            key: item.key,
+        };
+    }), [blockCollectionMetafields]);
+    const memoizedMetafields = useMemo(() => collectionMetafieldsQuery
+        ? collectionMetafieldsQuery
+            .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({
+        appId,
+        apiUrl,
+        collectionId,
+        collectionHandle,
+        language: location === null || location === void 0 ? void 0 : location.language,
+        metafields: memoizedMetafields,
+    });
+    if (useProductsError || useCollectionError) {
+        console.error("Unable to load products in conditional block rendering hook: ", useProductsError !== null && useProductsError !== void 0 ? useProductsError : useCollectionError);
+    }
+    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 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 };
+    }
+};

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

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

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

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

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

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

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

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

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

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

package/dist/components/ui/input.js

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

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

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

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

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

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

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

package/dist/components/ui/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,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;IAClB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAChC,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B;AAoBD,QAAA,MAAM,cAAc,4FA2EnB,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;IAClB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAChC,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B;AAoBD,QAAA,MAAM,cAAc,4FAmFnB,CAAA;AAID,OAAO,EAAE,cAAc,EAAE,CAAA"}

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

@@ -17,8 +17,16 @@ import { Icon } from "./icon";
 const IconButton = ({ iconUrl, iconColor, handler, className, style }) => (_jsx("button", Object.assign({ onClick: handler, className: cn("flex items-center justify-center h-7 w-7 bg-stateColors-skeleton border border-coreColors-dividingLines", className), style: style }, { children: _jsx(Icon, { url: iconUrl, size: "sm", strokeColor: iconColor, strokeWidth: 4 }) })));
 const QuantityPicker = React.forwardRef((_a, ref) => {
     var { className, decreaseIconUrl, increaseIconUrl, deleteIconUrl, isDeleteOnly = false, iconColor, onDecreaseClick, onIncreaseClick, value, setValue, inputStyle, buttonStyle, buttonCornerRadius = 4 } = _a, props = __rest(_a, ["className", "decreaseIconUrl", "increaseIconUrl", "deleteIconUrl", "isDeleteOnly", "iconColor", "onDecreaseClick", "onIncreaseClick", "value", "setValue", "inputStyle", "buttonStyle", "buttonCornerRadius"]);
-    const leftButtonStyle = Object.assign(Object.assign({}, buttonStyle), { borderTopLeftRadius: buttonCornerRadius ? `${buttonCornerRadius}px` : undefined, borderBottomLeftRadius: buttonCornerRadius ? `${buttonCornerRadius}px` : undefined });
-    const rightButtonStyle = Object.assign(Object.assign({}, buttonStyle), { borderTopRightRadius: buttonCornerRadius ? `${buttonCornerRadius}px` : undefined, borderBottomRightRadius: buttonCornerRadius ? `${buttonCornerRadius}px` : undefined });
+    const leftButtonStyle = Object.assign(Object.assign({}, buttonStyle), { borderTopLeftRadius: buttonCornerRadius
+            ? `${buttonCornerRadius}px`
+            : undefined, borderBottomLeftRadius: buttonCornerRadius
+            ? `${buttonCornerRadius}px`
+            : undefined });
+    const rightButtonStyle = Object.assign(Object.assign({}, buttonStyle), { borderTopRightRadius: buttonCornerRadius
+            ? `${buttonCornerRadius}px`
+            : undefined, borderBottomRightRadius: buttonCornerRadius
+            ? `${buttonCornerRadius}px`
+            : undefined });
     const singleButtonStyle = Object.assign(Object.assign({}, buttonStyle), { borderRadius: buttonCornerRadius ? `${buttonCornerRadius}px` : undefined });
     return (_jsx("div", Object.assign({ className: cn("flex", className), ref: ref }, props, { children: isDeleteOnly ? (_jsx(IconButton, { handler: onDecreaseClick, iconUrl: deleteIconUrl, iconColor: iconColor, style: singleButtonStyle })) : (_jsxs(_Fragment, { children: [_jsx(IconButton, { handler: onDecreaseClick, iconUrl: value === 1 ? deleteIconUrl : decreaseIconUrl, iconColor: iconColor, style: leftButtonStyle }), _jsx("input", { type: "text", 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 h-7 focus-visible:outline-none text-center bg-coreColors-inputBackground text-textColors-primaryColor border-t border-b border-coreColors-dividingLines", style: inputStyle }), _jsx(IconButton, { handler: onIncreaseClick, iconUrl: increaseIconUrl, iconColor: iconColor, style: rightButtonStyle })] })) })));
 });

package/dist/lib/utils.d.ts

@@ -1,4 +1,4 @@
-import { Integrations } from "app-studio-types";
+import { Integrations, ConditionalSelectorMetafield, ConditionalSelectorValues, Collection, UserSelectedTag, Product, Customer, ShopifyMetafield } from "app-studio-types";
 import { ClassValue } from "clsx";
 export type Color = {
     type: "custom" | "brand-kit";
@@ -211,4 +211,40 @@ export declare const getInputPlaceholderTextProps: (placeholderText: TextStyle)
     placeholderFont: string;
     placeholderFontWeight: string | number;
 };
+export declare function gidFromId(id: string): string;
+export declare const countNumberOfTagsInState: (state: ConditionalSelectorValues) => number;
+type Location = {
+    country: string;
+    language: string;
+};
+export declare const getEnvState: ({ location, product, collection, customer, }: {
+    location: Location;
+    product?: Product | undefined;
+    collection?: Collection | null | undefined;
+    customer?: Customer | undefined;
+}) => {
+    deviceLanguage: {
+        value: string;
+    }[];
+    deviceCountry: {
+        value: string;
+    }[];
+    collectionName: {
+        value: string | undefined;
+    }[];
+    collectionMetafield: any;
+    productTag: UserSelectedTag[];
+    productName: UserSelectedTag[];
+    productMetafield: import("app-studio-types").Metafield[];
+    customerAuthenticated: {
+        value: string;
+    }[];
+    customerTag: UserSelectedTag[];
+    customerMetafield: ShopifyMetafield[];
+};
+export declare const isUserSelectedTag: (obj: any) => obj is UserSelectedTag;
+export declare const isMetafield: (obj: any) => obj is ConditionalSelectorMetafield;
+export declare const isArrayOfUserSelectedTags: (arr: any[]) => arr is UserSelectedTag[];
+export declare const isArrayOfMetafields: (arr: any[]) => arr is ConditionalSelectorMetafield[];
+export declare const shouldShowBlock: (envState: ConditionalSelectorValues, blockState: ConditionalSelectorValues) => boolean;
 //# 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

@@ -282,3 +282,202 @@ export const getInputPlaceholderTextProps = (placeholderText) => {
     };
 };
 // #endregion =-=-=-= END BLOCK UTILS =-=-=-=
+// --- Start (Block conditional rendering util functions) ----
+export function gidFromId(id) {
+    if (id.startsWith("gid://shopify/Product/"))
+        return id;
+    return `gid://shopify/Product/${id}`;
+}
+export const countNumberOfTagsInState = (state) => {
+    let totalCount = 0;
+    Object.values(state).forEach((arr) => {
+        totalCount += arr.length;
+    });
+    return totalCount;
+};
+const getFormattedTags = (tags) => {
+    // If tags are undefined or empty, return an empty array
+    if (!tags || tags.length === 0) {
+        return [];
+    }
+    // Otherwise, map the tags to the desired format
+    return tags.map((tag) => ({ value: tag }));
+};
+const getLocaleNameFromCode = (deviceLocale) => {
+    let language = "English";
+    try {
+        const languageNames = new Intl.DisplayNames(["en"], { type: "language" });
+        const languageNamesInEnglish = languageNames.of(deviceLocale);
+        // if has found language
+        if (languageNamesInEnglish !== undefined &&
+            languageNamesInEnglish.length > 0) {
+            language = languageNamesInEnglish;
+        }
+        else {
+            // languageNames.of(xxxx) can also throw error if not found
+            throw new Error("Language not found");
+        }
+    }
+    catch (error) {
+        console.error(`Device locale not found: ${deviceLocale}, defaulting to English US`);
+        console.log(error);
+    }
+    return language;
+};
+const getRegion = (deviceCountry) => {
+    let country = "United States";
+    try {
+        const regionNames = new Intl.DisplayNames(["en"], { type: "region" });
+        const regionNamesInEnglish = regionNames.of(deviceCountry);
+        if (regionNamesInEnglish !== undefined && regionNamesInEnglish.length > 0) {
+            country = regionNamesInEnglish;
+        }
+        else {
+            // regionNames.of(xxxx) can also throw error if not found
+            throw new Error("Region not found");
+        }
+    }
+    catch (error) {
+        console.error(`Device country not found: ${deviceCountry}, defaulting to United States`);
+        console.error(error);
+    }
+    return country;
+};
+const getProductEnvTags = (product) => {
+    let productName = [];
+    let productTag = [];
+    if (product) {
+        const productNameEnvTag = {
+            value: product.title,
+        };
+        productName = [productNameEnvTag];
+        productTag = getFormattedTags(product.tags);
+    }
+    return {
+        productName,
+        productTag,
+    };
+};
+const getCustomerMetafield = (customer) => {
+    if (!customer) {
+        return [];
+    }
+    const reformattedArray = [];
+    //@ts-expect-error
+    const { metafields, id } = customer;
+    // Loop through each key (namespace) in the original object
+    for (const namespace in metafields) {
+        const innerObject = metafields[namespace];
+        // Check if innerObject is not undefined before calling Object.entries
+        if (innerObject) {
+            const entries = Object.entries(innerObject); // Extract key-value pairs from the inner object
+            // Iterate through all key-value pairs in the namespace
+            entries.forEach(([key, value]) => {
+                // Add the reformatted object to the result array
+                reformattedArray.push({
+                    namespace,
+                    key,
+                    //@ts-expect-error
+                    value,
+                    id,
+                });
+            });
+        }
+    }
+    return reformattedArray;
+};
+export const getEnvState = ({ location, product, collection, customer, }) => {
+    const collectionName = {
+        value: collection === null || collection === void 0 ? void 0 : collection.handle,
+    };
+    const deviceLanguageTags = {
+        value: getLocaleNameFromCode(location === null || location === void 0 ? void 0 : location.language),
+    };
+    const deviceCountryTags = {
+        value: getRegion(location === null || location === void 0 ? void 0 : location.country),
+    };
+    const { productTag, productName } = getProductEnvTags(product);
+    const unCleanedProductMetafields = product && !!product.metafields ? product.metafields : [];
+    // shopify sometimes returns [null]
+    const productMetafield = unCleanedProductMetafields.filter((item) => item !== null);
+    const unCleanedCollectionMetafields = 
+    //@ts-expect-error
+    collection && !!collection.metafields ? collection.metafields : [];
+    const collectionMetafield = unCleanedCollectionMetafields.filter(
+    //@ts-expect-error
+    (item) => item !== null);
+    const customerAuthenticated = {
+        value: !!(customer === null || customer === void 0 ? void 0 : customer.id) ? "Logged in" : "Logged out",
+    };
+    const customerTag = getFormattedTags(customer === null || customer === void 0 ? void 0 : customer.tags);
+    const customerMetafield = getCustomerMetafield(customer);
+    return {
+        deviceLanguage: [deviceLanguageTags],
+        deviceCountry: [deviceCountryTags],
+        collectionName: collectionName ? [collectionName] : [],
+        collectionMetafield,
+        productTag,
+        productName,
+        productMetafield,
+        customerAuthenticated: [customerAuthenticated],
+        customerTag,
+        customerMetafield,
+    };
+};
+export const isUserSelectedTag = (obj) => "value" in obj && typeof obj.value === "string" && obj.id === undefined;
+export const isMetafield = (obj) => "id" in obj && typeof obj.id === "string";
+export const isArrayOfUserSelectedTags = (arr) => {
+    return arr.every(isUserSelectedTag);
+};
+export const isArrayOfMetafields = (arr) => {
+    return arr.every(isMetafield);
+};
+const doTagsMatch = (blockTags, envTags) => {
+    return (blockTags.filter((blockTag) => envTags.some((envTag) => envTag.value === blockTag.value)).length > 0);
+};
+const matchingMetafields = (blockMetafields, envMetafields) => {
+    return (blockMetafields.filter((blockMetafield) => envMetafields.some((envMetafield) => envMetafield.key === blockMetafield.key &&
+        envMetafield.value === blockMetafield.value &&
+        envMetafield.namespace === blockMetafield.namespace)).length > 0);
+};
+export const shouldShowBlock = (envState, blockState) => {
+    const blockKeys = Object.keys(blockState);
+    let hasMatchingMetafields = false;
+    let hasMatchingTags = false;
+    // go through each key in blockState
+    for (let i = 0; i < blockKeys.length; i++) {
+        const blockKey = blockKeys[i];
+        // does env state have block state subcategory
+        if (blockKey !== undefined &&
+            //@ts-expect-error Todo: fix the typing for grabbing the block's conditional tag data
+            envState[blockKey] !== undefined &&
+            //@ts-expect-error
+            envState[blockKey].length > 0) {
+            //@ts-expect-error
+            const envTags = envState[blockKey];
+            //@ts-expect-error
+            const blockTags = blockState[blockKey];
+            // if array of tags
+            if (envTags &&
+                isArrayOfUserSelectedTags(envTags) &&
+                blockTags &&
+                isArrayOfUserSelectedTags(blockTags)) {
+                // check for match of tags
+                hasMatchingTags = doTagsMatch(blockTags, envTags);
+                // if one of the tags match, show it as it's currently OR.
+                if (hasMatchingTags) {
+                    break;
+                }
+            }
+            if (envTags &&
+                isArrayOfMetafields(envTags) &&
+                blockTags &&
+                isArrayOfMetafields(blockTags)) {
+                // check for a match of metafields
+                hasMatchingMetafields = matchingMetafields(blockTags, envTags);
+            }
+        }
+    }
+    return hasMatchingMetafields || hasMatchingTags;
+};
+// --- End (Block conditional rendering util functions) ----

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tapcart/mobile-components",
-  "version": "0.7.43",
+  "version": "0.7.44",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "style": "dist/styles.css",

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

@@ -1,10 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,24 +0,0 @@
-"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/ui/apple-pay-button.d.ts

@@ -1,24 +0,0 @@
-/// <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

@@ -1 +0,0 @@
-{"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

@@ -1,122 +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 { 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 };