@tapcart/mobile-components 0.7.57 → 0.7.58

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,10 @@
1
+ type Customer = {
2
+ isAuthenticated: boolean;
3
+ };
4
+ type UseCustomerProps = {};
5
+ type UseCustomerReturn = {
6
+ customer: Customer;
7
+ };
8
+ export declare const useCustomer: (props: UseCustomerProps | null) => UseCustomerReturn;
9
+ export {};
10
+ //# sourceMappingURL=use-customer.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,24 @@
1
+ "use client";
2
+ import { useState, useEffect } from "react";
3
+ // @ts-ignore -- webbridge-react is not typed (yet)
4
+ import { useActions } from "@tapcart/webbridge-react";
5
+ export const useCustomer = (props) => {
6
+ const [isAuthenticated, setIsAuthenticated] = useState(false);
7
+ const [customer, setCustomer] = useState({});
8
+ const actions = useActions();
9
+ // verify customer
10
+ useEffect(() => {
11
+ try {
12
+ // webbridge method to get customerIdentity
13
+ actions.getCustomerIdentity(null, {
14
+ onSuccess: (user) => setIsAuthenticated(!!(user === null || user === void 0 ? void 0 : user.email)),
15
+ });
16
+ }
17
+ catch (e) {
18
+ console.log("unable to get customer identity ", e);
19
+ }
20
+ }, [actions]);
21
+ return {
22
+ customer: Object.assign({ isAuthenticated }, customer),
23
+ };
24
+ };
@@ -17,12 +17,40 @@ export declare const useMockCart: ({ apiUrl, appId, enabled, limit, }: UseMockCa
17
17
  cart: {
18
18
  subtotal: number;
19
19
  items: {
20
- discounts: Record<string, string | number>[];
20
+ discounts: {
21
+ amount: number;
22
+ code: string;
23
+ type: string;
24
+ }[];
21
25
  productId: string;
22
26
  quantity: number;
23
27
  variantId: string;
24
28
  productDetails: Product;
25
- variantDetails: import("app-studio-types").ProductVariant;
29
+ variantDetails: {
30
+ compareAtPrice: {
31
+ amount: string;
32
+ currencyCode: string;
33
+ };
34
+ id: string;
35
+ title: string;
36
+ availableForSale: boolean;
37
+ selectedOptions: {
38
+ name: string;
39
+ value: string;
40
+ optionValue: import("app-studio-types").ProductOptionValue;
41
+ }[];
42
+ price: import("app-studio-types").Money;
43
+ available: boolean;
44
+ image?: import("app-studio-types").Image | undefined;
45
+ createdAt: string;
46
+ displayName: string;
47
+ inventoryPolicy: "continue" | "deny";
48
+ inventoryQuantity: number;
49
+ legacyResourceId: string;
50
+ metafield?: import("app-studio-types").Metafield | undefined;
51
+ position: number;
52
+ product: Product;
53
+ };
26
54
  cost: {
27
55
  totalAmount: {
28
56
  amount: string;
@@ -47,6 +75,13 @@ export declare const useMockCart: ({ apiUrl, appId, enabled, limit, }: UseMockCa
47
75
  };
48
76
  } | undefined;
49
77
  }[];
78
+ discountAllocations: {
79
+ targetType: string;
80
+ discountedAmount: {
81
+ amount: string;
82
+ };
83
+ code: string;
84
+ }[];
50
85
  attributes: {
51
86
  key: string;
52
87
  value: string;
@@ -55,6 +90,13 @@ export declare const useMockCart: ({ apiUrl, appId, enabled, limit, }: UseMockCa
55
90
  discounts: string[];
56
91
  id: string;
57
92
  note: string;
93
+ appliedGiftCards: {
94
+ id: string;
95
+ lastCharacters: string;
96
+ amountUsed: {
97
+ amount: string;
98
+ };
99
+ }[];
58
100
  };
59
101
  };
60
102
  export {};
@@ -1 +1 @@
1
- {"version":3,"file":"use-mock-cart.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-mock-cart.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAqF1C,KAAK,iBAAiB,GAAG;IACvB,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,WAAW,uCAKrB,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BnB,CAAA"}
1
+ {"version":3,"file":"use-mock-cart.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-mock-cart.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAyH1C,KAAK,iBAAiB,GAAG;IACvB,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,WAAW,uCAKrB,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BnB,CAAA"}
@@ -4,20 +4,45 @@ import { useProducts } from "./use-products";
4
4
  const cartMock = {
5
5
  attributes: [{ key: "tapcart_id", value: "123" }],
6
6
  currency: "USD",
7
- discounts: ["10_OFF_ORDER"],
7
+ discounts: ["10_OFF_ORDER", "10_OFF_PRODUCT"],
8
8
  id: "456?key=789",
9
9
  items: [],
10
10
  note: "this is a mock cart",
11
11
  subtotal: 0,
12
+ discountAllocations: [
13
+ {
14
+ targetType: "SHIPPING_LINE",
15
+ discountedAmount: { amount: "10.00" },
16
+ code: "FREE_SHIPPING",
17
+ },
18
+ ],
19
+ appliedGiftCards: [
20
+ {
21
+ id: "gid://shopify/GiftCard/1",
22
+ lastCharacters: "1234",
23
+ amountUsed: { amount: "10.00" },
24
+ },
25
+ ],
12
26
  };
13
27
  const transformCart = ({ products, cartOrigin = cartMock, }) => {
14
28
  let subtotal = cartOrigin.subtotal;
15
29
  const items = products.map((product, i) => {
16
- const variant = product.variants[0];
30
+ const variant = Object.assign(Object.assign({}, product.variants[0]), { compareAtPrice: {
31
+ amount: (parseInt(product.variants[0].price.amount) * 1.2).toString(),
32
+ currencyCode: "USD",
33
+ } });
17
34
  const price = parseInt(variant.price.amount);
18
35
  const productId = getIdFromGid(product.id);
19
36
  const variantId = getIdFromGid(variant.id);
20
- const discounts = [];
37
+ const discounts = i === 0
38
+ ? [
39
+ {
40
+ amount: price / 10,
41
+ code: "10_OFF_PRODUCT",
42
+ type: "code",
43
+ },
44
+ ]
45
+ : [];
21
46
  const cost = {
22
47
  totalAmount: {
23
48
  amount: price.toString(),
@@ -25,16 +50,11 @@ const transformCart = ({ products, cartOrigin = cartMock, }) => {
25
50
  },
26
51
  };
27
52
  subtotal += price;
28
- let sellingPlanAllocation;
29
- if (i === 0) {
30
- const discount = price / 10;
31
- subtotal -= discount;
32
- discounts.push({
33
- amount: parseInt(variant.price.amount) / 10,
34
- code: "10_OFF_PRODUCT",
35
- type: "code",
36
- });
37
- sellingPlanAllocation = {
53
+ if (discounts.length) {
54
+ subtotal -= discounts[0].amount;
55
+ }
56
+ const sellingPlanAllocation = i === 0
57
+ ? {
38
58
  priceAdjustments: {
39
59
  perDeliveryPrice: {
40
60
  amount: price,
@@ -50,8 +70,8 @@ const transformCart = ({ products, cartOrigin = cartMock, }) => {
50
70
  name: "Delivery every 30 Days",
51
71
  recurringDeliveries: true,
52
72
  },
53
- };
54
- }
73
+ }
74
+ : undefined;
55
75
  return {
56
76
  discounts,
57
77
  productId,
@@ -63,8 +83,16 @@ const transformCart = ({ products, cartOrigin = cartMock, }) => {
63
83
  sellingPlanAllocation,
64
84
  };
65
85
  });
86
+ const orderLevelDiscount = {
87
+ targetType: "LINE_ITEM",
88
+ discountedAmount: { amount: (subtotal / 10).toString() },
89
+ code: "10_OFF_ORDER",
90
+ };
66
91
  return Object.assign(Object.assign({}, cartOrigin), { subtotal,
67
- items });
92
+ items, discountAllocations: [
93
+ ...cartOrigin.discountAllocations,
94
+ orderLevelDiscount,
95
+ ] });
68
96
  };
69
97
  export const useMockCart = ({ apiUrl, appId, enabled = true, limit = 1, }) => {
70
98
  const { products, error: productsError, isLoading: productsLoading, } = useProducts({
@@ -0,0 +1,8 @@
1
+ import React from "react";
2
+ declare const useTap: (tapThreshold?: number) => {
3
+ onTap: (handler: (event: any) => void) => (event: any) => void;
4
+ isPressed: boolean;
5
+ ref: React.MutableRefObject<null>;
6
+ };
7
+ export { useTap };
8
+ //# sourceMappingURL=use-tap.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,100 @@
1
+ "use client";
2
+ import { useState, useEffect, useCallback, useRef } from "react";
3
+ // Shared manager for all instances of the hook
4
+ const tapManager = (() => {
5
+ const elements = new Map();
6
+ let isListening = false;
7
+ const startListening = () => {
8
+ if (isListening)
9
+ return;
10
+ const handleTouchStart = (e) => {
11
+ const touch = e.touches[0];
12
+ elements.forEach((data, el) => {
13
+ if (el.contains(touch.target)) {
14
+ data.touchStarted = true;
15
+ data.touchMoved = false;
16
+ data.startPosition = { x: touch.clientX, y: touch.clientY };
17
+ // Don't set isPressed here, wait to determine if it's a tap or drag
18
+ }
19
+ });
20
+ };
21
+ const handleTouchMove = (e) => {
22
+ const touch = e.touches[0];
23
+ elements.forEach((data, el) => {
24
+ if (data.touchStarted) {
25
+ const deltaX = Math.abs(touch.clientX - data.startPosition.x);
26
+ const deltaY = Math.abs(touch.clientY - data.startPosition.y);
27
+ if (deltaX > data.tapThreshold || deltaY > data.tapThreshold) {
28
+ data.touchMoved = true;
29
+ data.setIsPressed(false);
30
+ }
31
+ }
32
+ });
33
+ };
34
+ const handleTouchEnd = () => {
35
+ elements.forEach((data) => {
36
+ if (data.touchStarted) {
37
+ data.touchStarted = false;
38
+ if (!data.touchMoved) {
39
+ // It's a tap, set isPressed briefly
40
+ data.setIsPressed(true);
41
+ setTimeout(() => data.setIsPressed(false), 100);
42
+ }
43
+ }
44
+ });
45
+ };
46
+ document.addEventListener("touchstart", (e) => handleTouchStart(e), { passive: true });
47
+ document.addEventListener("touchmove", (e) => handleTouchMove(e), { passive: true });
48
+ document.addEventListener("touchend", () => handleTouchEnd(), {
49
+ passive: true,
50
+ });
51
+ isListening = true;
52
+ };
53
+ return {
54
+ register: (el, data) => {
55
+ elements.set(el, data);
56
+ startListening();
57
+ },
58
+ unregister: (el) => {
59
+ elements.delete(el);
60
+ },
61
+ elements,
62
+ };
63
+ })();
64
+ const useTap = (tapThreshold = 10) => {
65
+ const [isPressed, setIsPressed] = useState(false);
66
+ const elementRef = useRef(null);
67
+ useEffect(() => {
68
+ const element = elementRef.current;
69
+ if (!element)
70
+ return;
71
+ const data = {
72
+ touchStarted: false,
73
+ touchMoved: false,
74
+ startPosition: { x: 0, y: 0 },
75
+ setIsPressed,
76
+ tapThreshold,
77
+ };
78
+ tapManager.register(element, data);
79
+ return () => {
80
+ tapManager.unregister(element);
81
+ };
82
+ }, [tapThreshold]);
83
+ const onTap = useCallback((handler) => {
84
+ return (event) => {
85
+ const data = tapManager.elements.get(elementRef.current);
86
+ if (!data)
87
+ return;
88
+ if (event.type === "touchend" && !data.touchMoved) {
89
+ handler(event);
90
+ }
91
+ else if (event.type === "click" && !data.touchStarted) {
92
+ handler(event);
93
+ setIsPressed(true);
94
+ setTimeout(() => setIsPressed(false), 100);
95
+ }
96
+ };
97
+ }, []);
98
+ return { onTap, isPressed, ref: elementRef };
99
+ };
100
+ export { useTap };
@@ -8,6 +8,7 @@ export interface ApplePayButtonProps extends React.ButtonHTMLAttributes<HTMLButt
8
8
  requiredBillingContactFields?: ApplePayJS.ApplePayContactField[];
9
9
  requiredShippingContactFields?: ApplePayJS.ApplePayContactField[];
10
10
  startSessionURL: string;
11
+ startSessionCacheBypass: boolean;
11
12
  appId: string;
12
13
  domainName: string;
13
14
  countryCode?: string;
@@ -18,11 +19,11 @@ export interface ApplePayButtonProps extends React.ButtonHTMLAttributes<HTMLButt
18
19
  buttonStyle?: ApplePayButtonStyle;
19
20
  onPaymentAuthorized?: (paymentData: ApplePayJS.ApplePayPayment) => Promise<void>;
20
21
  onShippingContactSelected?: (shippingContact: ApplePayJS.ApplePayPaymentContact) => Promise<ApplePayJS.ApplePayShippingMethodUpdate>;
21
- onShippingMethodSelected?: (shippingMethod: ApplePayJS.ApplePayShippingMethod) => ApplePayJS.ApplePayShippingMethodUpdate;
22
- onPaymentCancelled?: () => void;
22
+ onShippingMethodSelected?: (shippingMethod: ApplePayJS.ApplePayShippingMethod) => Promise<ApplePayJS.ApplePayShippingMethodUpdate>;
23
+ onPaymentCancelled?: (event?: ApplePayJS.Event) => void;
23
24
  }
24
25
  declare const ApplePayButton: {
25
- ({ displayName, amount, requiredBillingContactFields, requiredShippingContactFields, startSessionURL, appId, domainName, countryCode, currencyCode, merchantCapabilities, supportedNetworks, buttonType, buttonStyle, onPaymentAuthorized, onShippingContactSelected, onShippingMethodSelected, onPaymentCancelled, }: ApplePayButtonProps): import("react/jsx-runtime").JSX.Element;
26
+ ({ displayName, amount, requiredBillingContactFields, requiredShippingContactFields, startSessionURL, startSessionCacheBypass, appId, domainName, countryCode, currencyCode, merchantCapabilities, supportedNetworks, buttonType, buttonStyle, onPaymentAuthorized, onShippingContactSelected, onShippingMethodSelected, onPaymentCancelled, }: ApplePayButtonProps): import("react/jsx-runtime").JSX.Element;
26
27
  displayName: string;
27
28
  };
28
29
  export { ApplePayButton };
@@ -1 +1 @@
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,GAC1B,OAAO,GACP,WAAW,GACX,MAAM,GACN,KAAK,GACL,WAAW,GACX,UAAU,GACV,YAAY,GACZ,QAAQ,GACR,OAAO,GACP,KAAK,GACL,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,WAAW,GACX,SAAS,GACT,KAAK,GACL,QAAQ,CAAA;AAEZ,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,CAAA;IACnB,MAAM,EAAE,MAAM,CAAA;IACd,4BAA4B,CAAC,EAAE,UAAU,CAAC,oBAAoB,EAAE,CAAA;IAChE,6BAA6B,CAAC,EAAE,UAAU,CAAC,oBAAoB,EAAE,CAAA;IACjE,eAAe,EAAE,MAAM,CAAA;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,oBAAoB,CAAC,EAAE,UAAU,CAAC,0BAA0B,EAAE,CAAA;IAC9D,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC5B,UAAU,CAAC,EAAE,kBAAkB,CAAA;IAC/B,WAAW,CAAC,EAAE,mBAAmB,CAAA;IACjC,mBAAmB,CAAC,EAAE,CACpB,WAAW,EAAE,UAAU,CAAC,eAAe,KACpC,OAAO,CAAC,IAAI,CAAC,CAAA;IAClB,yBAAyB,CAAC,EAAE,CAC1B,eAAe,EAAE,UAAU,CAAC,sBAAsB,KAC/C,OAAO,CAAC,UAAU,CAAC,4BAA4B,CAAC,CAAA;IACrD,wBAAwB,CAAC,EAAE,CACzB,cAAc,EAAE,UAAU,CAAC,sBAAsB,KAC9C,UAAU,CAAC,4BAA4B,CAAA;IAC5C,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAA;CAChC;AAED,QAAA,MAAM,cAAc;2TAkBjB,mBAAmB;;CAyLrB,CAAA;AAID,OAAO,EAAE,cAAc,EAAE,CAAA"}
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,GAC1B,OAAO,GACP,WAAW,GACX,MAAM,GACN,KAAK,GACL,WAAW,GACX,UAAU,GACV,YAAY,GACZ,QAAQ,GACR,OAAO,GACP,KAAK,GACL,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,WAAW,GACX,SAAS,GACT,KAAK,GACL,QAAQ,CAAA;AAEZ,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,CAAA;IACnB,MAAM,EAAE,MAAM,CAAA;IACd,4BAA4B,CAAC,EAAE,UAAU,CAAC,oBAAoB,EAAE,CAAA;IAChE,6BAA6B,CAAC,EAAE,UAAU,CAAC,oBAAoB,EAAE,CAAA;IACjE,eAAe,EAAE,MAAM,CAAA;IACvB,uBAAuB,EAAE,OAAO,CAAA;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,oBAAoB,CAAC,EAAE,UAAU,CAAC,0BAA0B,EAAE,CAAA;IAC9D,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC5B,UAAU,CAAC,EAAE,kBAAkB,CAAA;IAC/B,WAAW,CAAC,EAAE,mBAAmB,CAAA;IACjC,mBAAmB,CAAC,EAAE,CACpB,WAAW,EAAE,UAAU,CAAC,eAAe,KACpC,OAAO,CAAC,IAAI,CAAC,CAAA;IAClB,yBAAyB,CAAC,EAAE,CAC1B,eAAe,EAAE,UAAU,CAAC,sBAAsB,KAC/C,OAAO,CAAC,UAAU,CAAC,4BAA4B,CAAC,CAAA;IACrD,wBAAwB,CAAC,EAAE,CACzB,cAAc,EAAE,UAAU,CAAC,sBAAsB,KAC9C,OAAO,CAAC,UAAU,CAAC,4BAA4B,CAAC,CAAA;IACrD,kBAAkB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,KAAK,KAAK,IAAI,CAAA;CACxD;AAED,QAAA,MAAM,cAAc;oVAmBjB,mBAAmB;;CA4KrB,CAAA;AAID,OAAO,EAAE,cAAc,EAAE,CAAA"}
@@ -8,11 +8,9 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
8
8
  step((generator = generator.apply(thisArg, _arguments || [])).next());
9
9
  });
10
10
  };
11
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
12
- import * as React from "react";
11
+ import { jsx as _jsx } from "react/jsx-runtime";
13
12
  import ApplePayButtonComponent from "apple-pay-button";
14
- const ApplePayButton = ({ displayName, amount, requiredBillingContactFields = ["name", "postalAddress", "phone", "email"], requiredShippingContactFields = ["name", "postalAddress", "phone", "email"], startSessionURL, appId, domainName, countryCode = "US", currencyCode = "USD", merchantCapabilities = ["supports3DS"], supportedNetworks = ["visa", "masterCard", "amex", "discover"], buttonType = "plain", buttonStyle = "white-outline", onPaymentAuthorized, onShippingContactSelected, onShippingMethodSelected, onPaymentCancelled, }) => {
15
- const [paymentDataResult, setPaymentDataResult] = React.useState("");
13
+ const ApplePayButton = ({ displayName, amount, requiredBillingContactFields = ["name", "postalAddress", "phone", "email"], requiredShippingContactFields = ["name", "postalAddress", "phone", "email"], startSessionURL, startSessionCacheBypass = false, appId, domainName, countryCode = "US", currencyCode = "USD", merchantCapabilities = ["supports3DS"], supportedNetworks = ["visa", "masterCard", "amex", "discover"], buttonType = "plain", buttonStyle = "white-outline", onPaymentAuthorized, onShippingContactSelected, onShippingMethodSelected, onPaymentCancelled, }) => {
16
14
  const onClick = () => {
17
15
  const applePayRequest = {
18
16
  countryCode,
@@ -45,6 +43,7 @@ const ApplePayButton = ({ displayName, amount, requiredBillingContactFields = ["
45
43
  appId,
46
44
  domainName,
47
45
  displayName,
46
+ bypassCache: startSessionCacheBypass,
48
47
  };
49
48
  console.log("request body", body);
50
49
  const response = yield defaultFetcher(url, body);
@@ -70,7 +69,7 @@ const ApplePayButton = ({ displayName, amount, requiredBillingContactFields = ["
70
69
  };
71
70
  session.completePaymentMethodSelection(update);
72
71
  };
73
- session.onshippingmethodselected = (event) => {
72
+ session.onshippingmethodselected = (event) => __awaiter(void 0, void 0, void 0, function* () {
74
73
  const shippingMethod = event.shippingMethod;
75
74
  let update = {
76
75
  newTotal: {
@@ -80,10 +79,10 @@ const ApplePayButton = ({ displayName, amount, requiredBillingContactFields = ["
80
79
  },
81
80
  };
82
81
  if (onShippingMethodSelected) {
83
- update = onShippingMethodSelected(shippingMethod);
82
+ update = yield onShippingMethodSelected(shippingMethod);
84
83
  }
85
84
  session.completeShippingMethodSelection(update);
86
- };
85
+ });
87
86
  session.onshippingcontactselected = (event) => __awaiter(void 0, void 0, void 0, function* () {
88
87
  const shippingContact = event.shippingContact;
89
88
  let update = {
@@ -105,9 +104,6 @@ const ApplePayButton = ({ displayName, amount, requiredBillingContactFields = ["
105
104
  yield onPaymentAuthorized(paymentData);
106
105
  }
107
106
  if (paymentData.token) {
108
- const paymentDataJson = JSON.stringify(paymentData.token, null, 2);
109
- console.log("paymentData", paymentDataJson);
110
- setPaymentDataResult(paymentDataJson);
111
107
  const result = {
112
108
  status: ApplePaySession.STATUS_SUCCESS,
113
109
  };
@@ -130,15 +126,15 @@ const ApplePayButton = ({ displayName, amount, requiredBillingContactFields = ["
130
126
  });
131
127
  session.oncancel = (event) => {
132
128
  if (onPaymentCancelled) {
133
- onPaymentCancelled();
129
+ onPaymentCancelled(event);
134
130
  }
135
- console.log("Session Cancelled.");
131
+ console.log("Session Cancelled.", event);
136
132
  };
137
133
  };
138
- return (_jsxs("div", { children: [_jsx("div", Object.assign({ className: "flex flex-row justify-center items-center pt-40" }, { children: _jsx(ApplePayButtonComponent, { onClick: onClick, style: {
139
- height: "48px",
140
- borderRadius: "4px",
141
- }, 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 })) }))] }));
134
+ return (_jsx(ApplePayButtonComponent, { onClick: onClick, style: {
135
+ height: "48px",
136
+ borderRadius: "4px",
137
+ }, type: buttonType, buttonStyle: buttonStyle }));
142
138
  };
143
139
  ApplePayButton.displayName = "ApplePayButton";
144
140
  export { ApplePayButton };
@@ -1 +1 @@
1
- {"version":3,"file":"selectors.d.ts","sourceRoot":"","sources":["../../../components/ui/selectors.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,iBAAiB;;;mFAiBtB,CAAA;AACD,KAAK,cAAc,GAAG,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,GAC5D,YAAY,CAAC,OAAO,iBAAiB,CAAC,GAAG;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS,CAAA;CAClE,CAAA;AAEH,QAAA,MAAM,SAAS;;;;;;;;;eAHA,MAAM,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS;2CA2CpE,CAAA;AACD,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,EACJ,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,EAAE,GACpC,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAA;IACtC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AACD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA8CvD,CAAA;AAID,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAA"}
1
+ {"version":3,"file":"selectors.d.ts","sourceRoot":"","sources":["../../../components/ui/selectors.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,iBAAiB;;;mFAiBtB,CAAA;AACD,KAAK,cAAc,GAAG,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,GAC5D,YAAY,CAAC,OAAO,iBAAiB,CAAC,GAAG;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS,CAAA;CAClE,CAAA;AAEH,QAAA,MAAM,SAAS;;;;;;;;;eAHA,MAAM,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS;2CA2CpE,CAAA;AACD,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,EACJ,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,EAAE,GACpC,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAA;IACtC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AACD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA+CvD,CAAA;AAID,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAA"}
@@ -55,7 +55,7 @@ const SelectorContainer = ({ children, containerRef, className, height = "42px",
55
55
  React.useEffect(() => {
56
56
  checkOverflow();
57
57
  }, [children]);
58
- return (_jsx("div", Object.assign({ className: "relative no-scrollbar" }, { children: _jsxs("div", Object.assign({ className: cn(`flex gap-2 px-1 h-[${height}] items-center overflow-x-auto overflow-y-hidden no-scrollbar`, className), onScroll: checkOverflow, ref: containerRef }, { children: [children, showFadeLeft && (_jsx("div", { className: "absolute top-0 left-0 w-8 h-full pointer-events-none bg-fade-left" })), showFadeRight && (_jsx("div", { className: "absolute top-0 right-0 w-8 h-full pointer-events-none bg-fade-right" }))] })) })));
58
+ return (_jsx("div", Object.assign({ className: "relative no-scrollbar" }, { children: _jsxs("div", Object.assign({ className: cn(`flex gap-2 px-1 items-center overflow-x-auto overflow-y-hidden no-scrollbar`, className), onScroll: checkOverflow, style: { height: height }, ref: containerRef }, { children: [children, showFadeLeft && (_jsx("div", { className: "absolute top-0 left-0 w-8 h-full pointer-events-none bg-fade-left" })), showFadeRight && (_jsx("div", { className: "absolute top-0 right-0 w-8 h-full pointer-events-none bg-fade-right" }))] })) })));
59
59
  };
60
60
  Selectors.displayName = "Selectors";
61
61
  export { SelectorContainer, Selectors, selectorsVariants };
@@ -34,8 +34,7 @@ function injectString(template, injections) {
34
34
  // Add the injection
35
35
  if (injection) {
36
36
  if (injection.currencyMetadata) {
37
- parts.push(_jsx(Money, { price: Number(injection.payload), currency: "USD" // These could be made configurable if needed
38
- , locale: "en-US" }, `price-${index}`));
37
+ parts.push(_jsx(Money, { price: Number(injection.payload), currency: injection.currencyMetadata.currency || "USD", locale: injection.currencyMetadata.locale || "en-US" }, `price-${index}`));
39
38
  }
40
39
  else {
41
40
  parts.push(injection.payload);
package/dist/styles.css CHANGED
@@ -769,9 +769,6 @@ video {
769
769
  .top-\[50\%\] {
770
770
  top: 50%;
771
771
  }
772
- .-z-10 {
773
- z-index: -10;
774
- }
775
772
  .z-0 {
776
773
  z-index: 0;
777
774
  }
@@ -1390,9 +1387,6 @@ video {
1390
1387
  .self-center {
1391
1388
  align-self: center;
1392
1389
  }
1393
- .overflow-auto {
1394
- overflow: auto;
1395
- }
1396
1390
  .overflow-hidden {
1397
1391
  overflow: hidden;
1398
1392
  }
@@ -1419,9 +1413,6 @@ video {
1419
1413
  .whitespace-nowrap {
1420
1414
  white-space: nowrap;
1421
1415
  }
1422
- .whitespace-pre-wrap {
1423
- white-space: pre-wrap;
1424
- }
1425
1416
  .text-wrap {
1426
1417
  text-wrap: wrap;
1427
1418
  }
@@ -1645,9 +1636,6 @@ video {
1645
1636
  .bg-contain {
1646
1637
  background-size: contain;
1647
1638
  }
1648
- .bg-center {
1649
- background-position: center;
1650
- }
1651
1639
  .fill-current {
1652
1640
  fill: currentColor;
1653
1641
  }
@@ -1763,9 +1751,6 @@ video {
1763
1751
  .pl-8 {
1764
1752
  padding-left: 2rem;
1765
1753
  }
1766
- .pr-0 {
1767
- padding-right: 0px;
1768
- }
1769
1754
  .pr-1 {
1770
1755
  padding-right: 0.25rem;
1771
1756
  }
@@ -1787,9 +1772,6 @@ video {
1787
1772
  .pt-4 {
1788
1773
  padding-top: 1rem;
1789
1774
  }
1790
- .pt-40 {
1791
- padding-top: 10rem;
1792
- }
1793
1775
  .pt-5 {
1794
1776
  padding-top: 1.25rem;
1795
1777
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tapcart/mobile-components",
3
- "version": "0.7.57",
3
+ "version": "0.7.58",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "style": "dist/styles.css",