@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.
- package/dist/components/hooks/use-customer.d.ts +10 -0
- package/dist/components/hooks/use-customer.d.ts.map +1 -0
- package/dist/components/hooks/use-customer.js +24 -0
- package/dist/components/hooks/use-mock-cart.d.ts +44 -2
- package/dist/components/hooks/use-mock-cart.d.ts.map +1 -1
- package/dist/components/hooks/use-mock-cart.js +44 -16
- package/dist/components/hooks/use-tap.d.ts +8 -0
- package/dist/components/hooks/use-tap.d.ts.map +1 -0
- package/dist/components/hooks/use-tap.js +100 -0
- package/dist/components/ui/apple-pay-button.d.ts +4 -3
- package/dist/components/ui/apple-pay-button.d.ts.map +1 -1
- package/dist/components/ui/apple-pay-button.js +12 -16
- package/dist/components/ui/selectors.d.ts.map +1 -1
- package/dist/components/ui/selectors.js +1 -1
- package/dist/components/ui/text.js +1 -2
- package/dist/styles.css +0 -18
- package/package.json +1 -1
|
@@ -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:
|
|
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:
|
|
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;
|
|
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
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
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;
|
|
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
|
|
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 (
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
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,
|
|
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
|
|
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"
|
|
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
|
}
|