@tapcart/mobile-components 0.7.42 → 0.7.43
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-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 +24 -0
- package/dist/components/ui/apple-pay-button.d.ts.map +1 -0
- package/dist/components/ui/apple-pay-button.js +122 -0
- package/dist/components/ui/quantity-picker.d.ts +3 -0
- package/dist/components/ui/quantity-picker.d.ts.map +1 -1
- package/dist/components/ui/quantity-picker.js +6 -3
- package/dist/styles.css +0 -3
- package/package.json +1 -1
- package/dist/components/hooks/use-debug-dependencies.d.ts +0 -10
- package/dist/components/hooks/use-debug-dependencies.d.ts.map +0 -1
- package/dist/components/hooks/use-debug-dependencies.js +0 -18
- package/dist/components/hooks/use-layout.d.ts +0 -13
- package/dist/components/hooks/use-layout.d.ts.map +0 -1
- package/dist/components/hooks/use-layout.js +0 -23
|
@@ -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
|
+
};
|
|
@@ -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 };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/// <reference types="applepayjs" />
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
export type ApplePayButtonType = 'plain' | 'add-money' | 'book' | 'buy' | 'check-out' | 'continue' | 'contribute' | 'donate' | 'order' | 'pay' | 'reload' | 'rent' | 'set-up' | 'subscribe' | 'support' | 'tip' | 'top-up';
|
|
4
|
+
export type ApplePayButtonStyle = 'black' | 'white' | 'white-outline';
|
|
5
|
+
export interface ApplePayButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
6
|
+
displayName: string;
|
|
7
|
+
amount: number;
|
|
8
|
+
startSessionURL: string;
|
|
9
|
+
appId: string;
|
|
10
|
+
domainName: string;
|
|
11
|
+
countryCode?: string;
|
|
12
|
+
currencyCode?: string;
|
|
13
|
+
merchantCapabilities?: ApplePayJS.ApplePayMerchantCapability[];
|
|
14
|
+
supportedNetworks?: string[];
|
|
15
|
+
buttonType?: ApplePayButtonType;
|
|
16
|
+
buttonStyle?: ApplePayButtonStyle;
|
|
17
|
+
onPaymentAuthorized?: (paymentData: ApplePayJS.ApplePayPayment) => void;
|
|
18
|
+
}
|
|
19
|
+
declare const ApplePayButton: {
|
|
20
|
+
({ displayName, amount, startSessionURL, appId, domainName, countryCode, currencyCode, merchantCapabilities, supportedNetworks, buttonType, buttonStyle, onPaymentAuthorized, }: ApplePayButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
displayName: string;
|
|
22
|
+
};
|
|
23
|
+
export { ApplePayButton };
|
|
24
|
+
//# sourceMappingURL=apple-pay-button.d.ts.map
|
|
@@ -0,0 +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,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"}
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
3
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
4
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
5
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
6
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
7
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
8
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
9
|
+
});
|
|
10
|
+
};
|
|
11
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
12
|
+
import * as React from "react";
|
|
13
|
+
import ApplePayButtonComponent from 'apple-pay-button';
|
|
14
|
+
const ApplePayButton = ({ displayName, amount, startSessionURL, appId, domainName, countryCode = 'US', currencyCode = 'USD', merchantCapabilities = ["supports3DS"], supportedNetworks = ["visa", "masterCard", "amex", "discover"], buttonType = 'plain', buttonStyle = 'white-outline', onPaymentAuthorized, }) => {
|
|
15
|
+
const [paymentDataResult, setPaymentDataResult] = React.useState("");
|
|
16
|
+
const onClick = () => {
|
|
17
|
+
const applePayRequest = {
|
|
18
|
+
countryCode,
|
|
19
|
+
currencyCode,
|
|
20
|
+
merchantCapabilities,
|
|
21
|
+
supportedNetworks,
|
|
22
|
+
total: {
|
|
23
|
+
label: displayName,
|
|
24
|
+
type: "final",
|
|
25
|
+
amount: amount.toString(),
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
const session = new ApplePaySession(3, applePayRequest);
|
|
29
|
+
handleEventsForApplePay(session);
|
|
30
|
+
session.begin();
|
|
31
|
+
};
|
|
32
|
+
const defaultFetcher = (url, body) => fetch(url, {
|
|
33
|
+
method: body ? "POST" : "GET",
|
|
34
|
+
headers: {
|
|
35
|
+
"Content-Type": "application/json",
|
|
36
|
+
},
|
|
37
|
+
body: body ? JSON.stringify(body) : undefined,
|
|
38
|
+
}).then((res) => res.json());
|
|
39
|
+
const validateMerchant = (validationURL, appId, domainName, displayName) => __awaiter(void 0, void 0, void 0, function* () {
|
|
40
|
+
let url = startSessionURL;
|
|
41
|
+
let body = {
|
|
42
|
+
validationURL,
|
|
43
|
+
appId,
|
|
44
|
+
domainName,
|
|
45
|
+
displayName
|
|
46
|
+
};
|
|
47
|
+
console.log("request body", body);
|
|
48
|
+
const response = yield defaultFetcher(url, body);
|
|
49
|
+
return response.data;
|
|
50
|
+
});
|
|
51
|
+
const handleEventsForApplePay = (session) => {
|
|
52
|
+
session.onvalidatemerchant = (event) => __awaiter(void 0, void 0, void 0, function* () {
|
|
53
|
+
const response = yield validateMerchant(event.validationURL, appId, domainName, displayName);
|
|
54
|
+
if (response) {
|
|
55
|
+
session.completeMerchantValidation(response);
|
|
56
|
+
}
|
|
57
|
+
else {
|
|
58
|
+
console.error("Error during validating merchant");
|
|
59
|
+
}
|
|
60
|
+
});
|
|
61
|
+
session.onpaymentmethodselected = (event) => {
|
|
62
|
+
const update = {
|
|
63
|
+
newTotal: {
|
|
64
|
+
label: displayName,
|
|
65
|
+
type: "final",
|
|
66
|
+
amount: amount.toString(),
|
|
67
|
+
}
|
|
68
|
+
};
|
|
69
|
+
session.completePaymentMethodSelection(update);
|
|
70
|
+
};
|
|
71
|
+
session.onshippingmethodselected = (event) => {
|
|
72
|
+
const update = {
|
|
73
|
+
newTotal: {
|
|
74
|
+
label: displayName,
|
|
75
|
+
type: "final",
|
|
76
|
+
amount: amount.toString(),
|
|
77
|
+
}
|
|
78
|
+
};
|
|
79
|
+
session.completeShippingMethodSelection(update);
|
|
80
|
+
};
|
|
81
|
+
session.onshippingcontactselected = (event) => {
|
|
82
|
+
const update = {
|
|
83
|
+
newTotal: {
|
|
84
|
+
label: displayName,
|
|
85
|
+
type: "final",
|
|
86
|
+
amount: amount.toString(),
|
|
87
|
+
}
|
|
88
|
+
};
|
|
89
|
+
session.completeShippingContactSelection(update);
|
|
90
|
+
};
|
|
91
|
+
session.onpaymentauthorized = (event) => __awaiter(void 0, void 0, void 0, function* () {
|
|
92
|
+
const paymentData = event.payment;
|
|
93
|
+
if (onPaymentAuthorized) { // Call the callback if provided
|
|
94
|
+
onPaymentAuthorized(paymentData);
|
|
95
|
+
}
|
|
96
|
+
if (paymentData.token) {
|
|
97
|
+
const paymentDataJson = JSON.stringify(paymentData.token, null, 2);
|
|
98
|
+
console.log("paymentData", paymentDataJson);
|
|
99
|
+
setPaymentDataResult(paymentDataJson);
|
|
100
|
+
const result = {
|
|
101
|
+
status: ApplePaySession.STATUS_SUCCESS,
|
|
102
|
+
};
|
|
103
|
+
session.completePayment(result);
|
|
104
|
+
}
|
|
105
|
+
else {
|
|
106
|
+
const result = {
|
|
107
|
+
status: ApplePaySession.STATUS_FAILURE,
|
|
108
|
+
};
|
|
109
|
+
session.completePayment(result);
|
|
110
|
+
}
|
|
111
|
+
});
|
|
112
|
+
session.oncancel = (event) => {
|
|
113
|
+
console.log("Session Cancelled.");
|
|
114
|
+
};
|
|
115
|
+
};
|
|
116
|
+
return (_jsxs("div", { children: [_jsx("div", Object.assign({ className: "flex flex-row justify-center items-center pt-40" }, { children: _jsx(ApplePayButtonComponent, { onClick: onClick, style: {
|
|
117
|
+
height: "48px",
|
|
118
|
+
borderRadius: '4px',
|
|
119
|
+
}, 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 })) }))] }));
|
|
120
|
+
};
|
|
121
|
+
ApplePayButton.displayName = "ApplePayButton";
|
|
122
|
+
export { ApplePayButton };
|
|
@@ -10,6 +10,9 @@ export interface QuantityPickerProps extends React.HTMLAttributes<HTMLDivElement
|
|
|
10
10
|
value: number;
|
|
11
11
|
setValue: (_: number) => void;
|
|
12
12
|
className?: string;
|
|
13
|
+
inputStyle?: React.CSSProperties;
|
|
14
|
+
buttonStyle?: React.CSSProperties;
|
|
15
|
+
buttonCornerRadius?: number;
|
|
13
16
|
}
|
|
14
17
|
declare const QuantityPicker: React.ForwardRefExoticComponent<QuantityPickerProps & React.RefAttributes<HTMLDivElement>>;
|
|
15
18
|
export { QuantityPicker };
|
|
@@ -1 +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;
|
|
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"}
|
|
@@ -14,10 +14,13 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
|
|
|
14
14
|
import * as React from "react";
|
|
15
15
|
import { cn } from "../../lib/utils";
|
|
16
16
|
import { Icon } from "./icon";
|
|
17
|
-
const IconButton = ({ iconUrl, iconColor, handler, className }) => (_jsx("button", Object.assign({ onClick: handler, className: cn("flex items-center justify-center h-7 w-7 bg-stateColors-skeleton
|
|
17
|
+
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 }) })));
|
|
18
18
|
const QuantityPicker = React.forwardRef((_a, ref) => {
|
|
19
|
-
var { className, decreaseIconUrl, increaseIconUrl, deleteIconUrl, isDeleteOnly = false, iconColor, onDecreaseClick, onIncreaseClick, value, setValue } = _a, props = __rest(_a, ["className", "decreaseIconUrl", "increaseIconUrl", "deleteIconUrl", "isDeleteOnly", "iconColor", "onDecreaseClick", "onIncreaseClick", "value", "setValue"]);
|
|
20
|
-
|
|
19
|
+
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"]);
|
|
20
|
+
const leftButtonStyle = Object.assign(Object.assign({}, buttonStyle), { borderTopLeftRadius: buttonCornerRadius ? `${buttonCornerRadius}px` : undefined, borderBottomLeftRadius: buttonCornerRadius ? `${buttonCornerRadius}px` : undefined });
|
|
21
|
+
const rightButtonStyle = Object.assign(Object.assign({}, buttonStyle), { borderTopRightRadius: buttonCornerRadius ? `${buttonCornerRadius}px` : undefined, borderBottomRightRadius: buttonCornerRadius ? `${buttonCornerRadius}px` : undefined });
|
|
22
|
+
const singleButtonStyle = Object.assign(Object.assign({}, buttonStyle), { borderRadius: buttonCornerRadius ? `${buttonCornerRadius}px` : undefined });
|
|
23
|
+
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 })] })) })));
|
|
21
24
|
});
|
|
22
25
|
QuantityPicker.displayName = "QuantityPicker";
|
|
23
26
|
export { QuantityPicker };
|
package/dist/styles.css
CHANGED
|
@@ -2077,9 +2077,6 @@ video {
|
|
|
2077
2077
|
.outline-stateColors-error {
|
|
2078
2078
|
outline-color: var(--stateColors-error);
|
|
2079
2079
|
}
|
|
2080
|
-
.outline-stateColors-skeleton {
|
|
2081
|
-
outline-color: var(--stateColors-skeleton);
|
|
2082
|
-
}
|
|
2083
2080
|
.outline-transparent {
|
|
2084
2081
|
outline-color: transparent;
|
|
2085
2082
|
}
|
package/package.json
CHANGED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Custom hook to debug dependency changes.
|
|
3
|
-
*
|
|
4
|
-
* Usage:
|
|
5
|
-
* useDebugDependencies([dependencyA, dependencyB]);
|
|
6
|
-
*
|
|
7
|
-
* @param {Array} deps - Array of dependencies to monitor for changes.
|
|
8
|
-
*/
|
|
9
|
-
export declare function useDebugDependencies(deps: any[]): void;
|
|
10
|
-
//# sourceMappingURL=use-debug-dependencies.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"use-debug-dependencies.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-debug-dependencies.ts"],"names":[],"mappings":"AAGA;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,GAAG,EAAE,QAU/C"}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { useRef, useEffect } from "react";
|
|
3
|
-
/**
|
|
4
|
-
* Custom hook to debug dependency changes.
|
|
5
|
-
*
|
|
6
|
-
* Usage:
|
|
7
|
-
* useDebugDependencies([dependencyA, dependencyB]);
|
|
8
|
-
*
|
|
9
|
-
* @param {Array} deps - Array of dependencies to monitor for changes.
|
|
10
|
-
*/
|
|
11
|
-
export function useDebugDependencies(deps) {
|
|
12
|
-
const prevDeps = useRef(deps);
|
|
13
|
-
useEffect(() => {
|
|
14
|
-
const changedDeps = deps.map((dep, i) => dep !== prevDeps.current[i] ? dep : null);
|
|
15
|
-
console.log("Changed dependencies:", changedDeps);
|
|
16
|
-
prevDeps.current = deps;
|
|
17
|
-
}, [deps]);
|
|
18
|
-
}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { PhoenixLayout } from "lib/tapcart/types";
|
|
2
|
-
type UseLayoutProps = {
|
|
3
|
-
appId: string;
|
|
4
|
-
layoutId: string;
|
|
5
|
-
};
|
|
6
|
-
type UseLayoutReturn = {
|
|
7
|
-
layout: PhoenixLayout | null;
|
|
8
|
-
error: any;
|
|
9
|
-
isLoading: boolean;
|
|
10
|
-
};
|
|
11
|
-
export declare function useLayout({ appId, layoutId, }: UseLayoutProps): UseLayoutReturn;
|
|
12
|
-
export {};
|
|
13
|
-
//# sourceMappingURL=use-layout.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"use-layout.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-layout.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAGjD,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,KAAK,eAAe,GAAG;IACrB,MAAM,EAAE,aAAa,GAAG,IAAI,CAAA;IAC5B,KAAK,EAAE,GAAG,CAAA;IACV,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,GACT,EAAE,cAAc,GAAG,eAAe,CAYlC"}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
3
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
4
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
5
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
6
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
7
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
8
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
9
|
-
});
|
|
10
|
-
};
|
|
11
|
-
import useSWR from "swr";
|
|
12
|
-
import { fetchLayoutById } from "apps/tapcart-ssr-app/lib/tapcart/index";
|
|
13
|
-
export function useLayout({ appId, layoutId, }) {
|
|
14
|
-
const fetcher = (appId, layoutId) => __awaiter(this, void 0, void 0, function* () {
|
|
15
|
-
return fetchLayoutById(appId, layoutId);
|
|
16
|
-
});
|
|
17
|
-
const { data, error } = useSWR([appId, layoutId], fetcher);
|
|
18
|
-
return {
|
|
19
|
-
layout: data || null,
|
|
20
|
-
error,
|
|
21
|
-
isLoading: !data && !error,
|
|
22
|
-
};
|
|
23
|
-
}
|