@superlogic/spree-pay 0.1.17 → 0.1.19
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/README.md +21 -9
- package/build/index.cjs +267 -142
- package/build/index.css +20 -4
- package/build/index.d.cts +4 -3
- package/build/index.d.ts +4 -3
- package/build/index.js +226 -102
- package/package.json +1 -1
package/build/index.cjs
CHANGED
|
@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
30
30
|
// src/index.ts
|
|
31
31
|
var index_exports = {};
|
|
32
32
|
__export(index_exports, {
|
|
33
|
+
PaymentType: () => PaymentType,
|
|
33
34
|
SpreePay: () => SpreePay,
|
|
34
35
|
SpreePayProvider: () => SpreePayProvider,
|
|
35
36
|
useCapture3DS: () => useCapture3DS,
|
|
@@ -38,9 +39,9 @@ __export(index_exports, {
|
|
|
38
39
|
module.exports = __toCommonJS(index_exports);
|
|
39
40
|
|
|
40
41
|
// src/SpreePay.tsx
|
|
41
|
-
var
|
|
42
|
+
var import_react17 = require("react");
|
|
42
43
|
var import_nice_modal_react7 = __toESM(require("@ebay/nice-modal-react"), 1);
|
|
43
|
-
var
|
|
44
|
+
var import_swr5 = require("swr");
|
|
44
45
|
|
|
45
46
|
// src/context/SpreePayActionsContext.tsx
|
|
46
47
|
var import_react = require("react");
|
|
@@ -57,6 +58,15 @@ var PaymentError = class extends Error {
|
|
|
57
58
|
}
|
|
58
59
|
};
|
|
59
60
|
|
|
61
|
+
// src/types/payments.ts
|
|
62
|
+
var PaymentType = /* @__PURE__ */ ((PaymentType2) => {
|
|
63
|
+
PaymentType2["CREDIT_CARD"] = "CREDIT_CARD";
|
|
64
|
+
PaymentType2["CRYPTO"] = "CRYPTO";
|
|
65
|
+
PaymentType2["SPLIT"] = "SPLIT";
|
|
66
|
+
PaymentType2["POINTS"] = "POINTS";
|
|
67
|
+
return PaymentType2;
|
|
68
|
+
})(PaymentType || {});
|
|
69
|
+
|
|
60
70
|
// src/context/SpreePayActionsContext.tsx
|
|
61
71
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
62
72
|
var SpreePayActionsContext = (0, import_react.createContext)(void 0);
|
|
@@ -130,15 +140,15 @@ var CONFIG = {
|
|
|
130
140
|
dev: {
|
|
131
141
|
bookit: {
|
|
132
142
|
slapiUrl: "https://slapi.dev.superlogic.com",
|
|
133
|
-
|
|
134
|
-
|
|
143
|
+
keycloakUrl: "https://auth.dev.join.bookit.com",
|
|
144
|
+
keycloakClientId: "oneof-next",
|
|
135
145
|
pointsConversionRatio: 100,
|
|
136
146
|
pointsTitle: "AIR SP"
|
|
137
147
|
},
|
|
138
148
|
moca: {
|
|
139
149
|
slapiUrl: "https://slapi.dev.air.shop",
|
|
140
|
-
|
|
141
|
-
|
|
150
|
+
keycloakUrl: "https://login.dev.air.shop",
|
|
151
|
+
keycloakClientId: "oneof-next",
|
|
142
152
|
pointsConversionRatio: 100,
|
|
143
153
|
pointsTitle: "AIR SP"
|
|
144
154
|
}
|
|
@@ -146,15 +156,15 @@ var CONFIG = {
|
|
|
146
156
|
stg: {
|
|
147
157
|
bookit: {
|
|
148
158
|
slapiUrl: "https://slapi.stg.superlogic.com",
|
|
149
|
-
|
|
150
|
-
|
|
159
|
+
keycloakUrl: "https://auth.stg.join.bookit.com",
|
|
160
|
+
keycloakClientId: "oneof-next",
|
|
151
161
|
pointsConversionRatio: 100,
|
|
152
162
|
pointsTitle: "AIR SP"
|
|
153
163
|
},
|
|
154
164
|
moca: {
|
|
155
165
|
slapiUrl: "https://slapi.stg.air.shop",
|
|
156
|
-
|
|
157
|
-
|
|
166
|
+
keycloakUrl: "https://login.stg.air.shop",
|
|
167
|
+
keycloakClientId: "oneof-next",
|
|
158
168
|
pointsConversionRatio: 100,
|
|
159
169
|
pointsTitle: "AIR SP"
|
|
160
170
|
}
|
|
@@ -162,15 +172,15 @@ var CONFIG = {
|
|
|
162
172
|
prod: {
|
|
163
173
|
bookit: {
|
|
164
174
|
slapiUrl: "https://slapi.superlogic.com",
|
|
165
|
-
|
|
166
|
-
|
|
175
|
+
keycloakUrl: "https://auth.join.bookit.com",
|
|
176
|
+
keycloakClientId: "oneof-next",
|
|
167
177
|
pointsConversionRatio: 100,
|
|
168
178
|
pointsTitle: "AIR SP"
|
|
169
179
|
},
|
|
170
180
|
moca: {
|
|
171
181
|
slapiUrl: "https://slapi.air.shop",
|
|
172
|
-
|
|
173
|
-
|
|
182
|
+
keycloakUrl: "https://login.air.shop",
|
|
183
|
+
keycloakClientId: "oneof-next",
|
|
174
184
|
pointsConversionRatio: 100,
|
|
175
185
|
pointsTitle: "AIR SP"
|
|
176
186
|
}
|
|
@@ -184,7 +194,9 @@ var StaticConfigProvider = ({ children, props }) => {
|
|
|
184
194
|
setAppProps(props);
|
|
185
195
|
}, [props]);
|
|
186
196
|
const staticConfig = (0, import_react2.useMemo)(() => {
|
|
187
|
-
|
|
197
|
+
const envConfig = CONFIG[env.environment];
|
|
198
|
+
const appKey = env.tenantId in envConfig ? env.tenantId : "moca";
|
|
199
|
+
return envConfig[appKey];
|
|
188
200
|
}, [env.environment, env.tenantId]);
|
|
189
201
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StaticConfigContext.Provider, { value: { staticConfig, appProps }, children });
|
|
190
202
|
};
|
|
@@ -639,7 +651,7 @@ var SlapiPaymentService = {
|
|
|
639
651
|
return slapiApi.post("/v1/payments/validate", { paymentId, type: "CREDIT_CARD" /* CREDIT_CARD */ }).then((data) => ({ data }));
|
|
640
652
|
},
|
|
641
653
|
validatePoints: ({ paymentId, txHash }) => {
|
|
642
|
-
return slapiApi.post("/v1/payments/validate", { txHash, paymentId, type: "
|
|
654
|
+
return slapiApi.post("/v1/payments/validate", { txHash, paymentId, type: "POINTS" /* POINTS */ }).then((data) => ({ data }));
|
|
643
655
|
},
|
|
644
656
|
getStatus: (paymentId) => {
|
|
645
657
|
return slapiApi.get(`/v1/payments/${paymentId}/status`);
|
|
@@ -2380,6 +2392,7 @@ var Points = () => {
|
|
|
2380
2392
|
const [usePoints, setUsePoints] = (0, import_react12.useState)(false);
|
|
2381
2393
|
const [selectedPointsType, setSelectedPointsType] = (0, import_react12.useState)(null);
|
|
2382
2394
|
const { setSelectedPaymentMethod, selectedPaymentMethod } = useSpreePaymentMethod();
|
|
2395
|
+
const { spreePayConfig } = useSpreePayConfig();
|
|
2383
2396
|
const handleTogglePoints = (enabled) => {
|
|
2384
2397
|
setUsePoints(enabled);
|
|
2385
2398
|
if (!enabled) {
|
|
@@ -2388,7 +2401,7 @@ var Points = () => {
|
|
|
2388
2401
|
}
|
|
2389
2402
|
};
|
|
2390
2403
|
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
|
|
2391
|
-
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PointsSwitch, { value: usePoints, onChange: handleTogglePoints }),
|
|
2404
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PointsSwitch, { disabled: !spreePayConfig?.creditCard.enabled, value: usePoints, onChange: handleTogglePoints }),
|
|
2392
2405
|
usePoints && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SplitBlock, { isSelected: selectedPointsType === "air", onSelect: setSelectedPointsType })
|
|
2393
2406
|
] });
|
|
2394
2407
|
};
|
|
@@ -2445,7 +2458,7 @@ var import_wagmi5 = require("wagmi");
|
|
|
2445
2458
|
var import_chains = require("wagmi/chains");
|
|
2446
2459
|
|
|
2447
2460
|
// src/components/CryptoTab/Crypto/Crypto.tsx
|
|
2448
|
-
var
|
|
2461
|
+
var import_react15 = require("react");
|
|
2449
2462
|
var import_wagmi4 = require("wagmi");
|
|
2450
2463
|
|
|
2451
2464
|
// ../../node_modules/@wagmi/core/dist/esm/utils/getAction.js
|
|
@@ -2768,20 +2781,90 @@ var Logos = () => {
|
|
|
2768
2781
|
var import_nice_modal_react5 = __toESM(require("@ebay/nice-modal-react"), 1);
|
|
2769
2782
|
|
|
2770
2783
|
// src/modals/CryptoSelectModal.tsx
|
|
2784
|
+
var import_react14 = require("react");
|
|
2771
2785
|
var import_nice_modal_react4 = __toESM(require("@ebay/nice-modal-react"), 1);
|
|
2772
2786
|
|
|
2773
|
-
// src/
|
|
2787
|
+
// ../ui/src/components/input.tsx
|
|
2788
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
2789
|
+
function Input2({ className, type, ...props }) {
|
|
2790
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
2791
|
+
"input",
|
|
2792
|
+
{
|
|
2793
|
+
type,
|
|
2794
|
+
"data-slot": "input",
|
|
2795
|
+
className: cn2(
|
|
2796
|
+
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
|
2797
|
+
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
|
2798
|
+
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
|
2799
|
+
className
|
|
2800
|
+
),
|
|
2801
|
+
...props
|
|
2802
|
+
}
|
|
2803
|
+
);
|
|
2804
|
+
}
|
|
2805
|
+
|
|
2806
|
+
// ../../node_modules/@radix-ui/react-separator/dist/index.mjs
|
|
2774
2807
|
var React13 = __toESM(require("react"), 1);
|
|
2808
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
2809
|
+
var NAME = "Separator";
|
|
2810
|
+
var DEFAULT_ORIENTATION = "horizontal";
|
|
2811
|
+
var ORIENTATIONS = ["horizontal", "vertical"];
|
|
2812
|
+
var Separator = React13.forwardRef((props, forwardedRef) => {
|
|
2813
|
+
const { decorative, orientation: orientationProp = DEFAULT_ORIENTATION, ...domProps } = props;
|
|
2814
|
+
const orientation = isValidOrientation(orientationProp) ? orientationProp : DEFAULT_ORIENTATION;
|
|
2815
|
+
const ariaOrientation = orientation === "vertical" ? orientation : void 0;
|
|
2816
|
+
const semanticProps = decorative ? { role: "none" } : { "aria-orientation": ariaOrientation, role: "separator" };
|
|
2817
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
2818
|
+
Primitive.div,
|
|
2819
|
+
{
|
|
2820
|
+
"data-orientation": orientation,
|
|
2821
|
+
...semanticProps,
|
|
2822
|
+
...domProps,
|
|
2823
|
+
ref: forwardedRef
|
|
2824
|
+
}
|
|
2825
|
+
);
|
|
2826
|
+
});
|
|
2827
|
+
Separator.displayName = NAME;
|
|
2828
|
+
function isValidOrientation(orientation) {
|
|
2829
|
+
return ORIENTATIONS.includes(orientation);
|
|
2830
|
+
}
|
|
2831
|
+
var Root6 = Separator;
|
|
2832
|
+
|
|
2833
|
+
// ../ui/src/components/separator.tsx
|
|
2834
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
2835
|
+
function Separator2({
|
|
2836
|
+
className,
|
|
2837
|
+
orientation = "horizontal",
|
|
2838
|
+
decorative = true,
|
|
2839
|
+
...props
|
|
2840
|
+
}) {
|
|
2841
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
2842
|
+
Root6,
|
|
2843
|
+
{
|
|
2844
|
+
"data-slot": "separator",
|
|
2845
|
+
decorative,
|
|
2846
|
+
orientation,
|
|
2847
|
+
className: cn2(
|
|
2848
|
+
"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
|
|
2849
|
+
className
|
|
2850
|
+
),
|
|
2851
|
+
...props
|
|
2852
|
+
}
|
|
2853
|
+
);
|
|
2854
|
+
}
|
|
2855
|
+
|
|
2856
|
+
// src/hooks/useBaseERC20Token.ts
|
|
2857
|
+
var React14 = __toESM(require("react"), 1);
|
|
2775
2858
|
var import_viem5 = require("viem");
|
|
2776
2859
|
var import_wagmi2 = require("wagmi");
|
|
2777
2860
|
function useBaseERC20Token() {
|
|
2778
2861
|
const { address } = (0, import_wagmi2.useAccount)();
|
|
2779
2862
|
const baseClient = (0, import_wagmi2.usePublicClient)({ chainId: BASE_CHAIN_ID });
|
|
2780
2863
|
const defaultClient = (0, import_wagmi2.usePublicClient)();
|
|
2781
|
-
const [rows, setRows] =
|
|
2782
|
-
const [isLoading, setLoading] =
|
|
2783
|
-
const [error, setError] =
|
|
2784
|
-
|
|
2864
|
+
const [rows, setRows] = React14.useState([]);
|
|
2865
|
+
const [isLoading, setLoading] = React14.useState(false);
|
|
2866
|
+
const [error, setError] = React14.useState(null);
|
|
2867
|
+
React14.useEffect(() => {
|
|
2785
2868
|
let cancelled = false;
|
|
2786
2869
|
async function run() {
|
|
2787
2870
|
const client = baseClient ?? defaultClient;
|
|
@@ -2854,44 +2937,64 @@ function useBaseNativeToken() {
|
|
|
2854
2937
|
};
|
|
2855
2938
|
}
|
|
2856
2939
|
|
|
2940
|
+
// src/hooks/useBaseTokens.ts
|
|
2941
|
+
var import_swr4 = __toESM(require("swr"), 1);
|
|
2942
|
+
var useBaseTokens = () => {
|
|
2943
|
+
const { data: resData, isLoading } = (0, import_swr4.default)(`/v1/base-transactions/tokens`);
|
|
2944
|
+
return { tokens: resData?.data ?? [], tokensIsLoading: isLoading };
|
|
2945
|
+
};
|
|
2946
|
+
|
|
2857
2947
|
// src/modals/CryptoSelectModal.tsx
|
|
2858
|
-
var
|
|
2948
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
2859
2949
|
var CryptoSelectModal = import_nice_modal_react4.default.create(() => {
|
|
2860
2950
|
const modal = (0, import_nice_modal_react4.useModal)();
|
|
2861
2951
|
const { isLoading, error, erc20Balances } = useBaseERC20Token();
|
|
2862
2952
|
const { isLoadingNative, nativeError, nativeBalance } = useBaseNativeToken();
|
|
2953
|
+
const { tokens, tokensIsLoading } = useBaseTokens();
|
|
2954
|
+
const [search, setSearch] = (0, import_react14.useState)("");
|
|
2955
|
+
const filteredCoins = (0, import_react14.useMemo)(() => {
|
|
2956
|
+
return tokens.filter(
|
|
2957
|
+
(coin) => coin.name.toLowerCase().includes(search.toLowerCase()) || coin.symbol.toLowerCase().includes(search.toLowerCase())
|
|
2958
|
+
);
|
|
2959
|
+
}, [tokens, search]);
|
|
2863
2960
|
const { setSelectedPaymentMethod } = useSpreePaymentMethod();
|
|
2864
2961
|
const handleSelect = (coin) => {
|
|
2865
2962
|
modal.remove();
|
|
2866
2963
|
setSelectedPaymentMethod({ type: "CRYPTO" /* CRYPTO */, method: coin });
|
|
2867
2964
|
};
|
|
2868
|
-
|
|
2869
|
-
|
|
2870
|
-
|
|
2871
|
-
|
|
2872
|
-
|
|
2873
|
-
|
|
2874
|
-
/* @__PURE__ */ (0,
|
|
2875
|
-
"path",
|
|
2876
|
-
{
|
|
2877
|
-
|
|
2878
|
-
|
|
2879
|
-
|
|
2880
|
-
|
|
2881
|
-
|
|
2882
|
-
|
|
2883
|
-
|
|
2884
|
-
|
|
2885
|
-
/* @__PURE__ */ (0,
|
|
2886
|
-
|
|
2887
|
-
|
|
2965
|
+
const userCoins = [nativeBalance, ...erc20Balances].filter(Boolean);
|
|
2966
|
+
const userCoinSymbols = userCoins.map((c) => c.symbol);
|
|
2967
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Dialog, { open: modal.visible, onOpenChange: modal.remove, children: [
|
|
2968
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DialogDescription, { className: "hidden", children: "Crypto Select Modal" }),
|
|
2969
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(DialogContent, { showCloseButton: false, className: "max-h-[90vh] gap-0 p-0", children: [
|
|
2970
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
|
|
2971
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
|
|
2972
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("button", { className: "rounded-md hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { stroke: "#000", d: "m15 6.5-6 6 6 6" }) }) }),
|
|
2973
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DialogTitle, { className: "text-primary text-2xl font-semibold", children: "Select a token" }),
|
|
2974
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("button", { className: "rounded-md p-1 hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "17", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
2975
|
+
"path",
|
|
2976
|
+
{
|
|
2977
|
+
fill: "#000",
|
|
2978
|
+
d: "M12.6 3.9c.2.2.2.52 0 .71L8.7 8.5l3.9 3.89a.5.5 0 1 1-.71.7L8 9.22 4.11 13.1a.5.5 0 1 1-.7-.71L7.28 8.5 3.4 4.61a.5.5 0 1 1 .71-.7L8 7.78l3.89-3.89c.2-.2.51-.2.7 0Z"
|
|
2979
|
+
}
|
|
2980
|
+
) }) })
|
|
2981
|
+
] }),
|
|
2982
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Input2, { onChange: (e) => setSearch(e.target.value), placeholder: "Search by token name", value: search })
|
|
2983
|
+
] }),
|
|
2984
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Separator2, { className: "hidden md:block" }),
|
|
2985
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
|
|
2986
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h3", { className: "text-primary text-xl font-semibold", children: "Tokens with wallet balance" }),
|
|
2987
|
+
(error || nativeError) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-center text-sm text-red-500", children: "Something wrong" }),
|
|
2988
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
|
|
2989
|
+
isLoadingNative && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
|
|
2990
|
+
nativeBalance && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
2888
2991
|
"button",
|
|
2889
2992
|
{
|
|
2890
2993
|
className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-black hover:bg-gray-100",
|
|
2891
2994
|
onClick: () => handleSelect(nativeBalance),
|
|
2892
2995
|
children: [
|
|
2893
|
-
/* @__PURE__ */ (0,
|
|
2894
|
-
nativeBalance.logoURI && /* @__PURE__ */ (0,
|
|
2996
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
2997
|
+
nativeBalance.logoURI && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
2895
2998
|
"img",
|
|
2896
2999
|
{
|
|
2897
3000
|
className: "h-8 w-8 shrink-0",
|
|
@@ -2899,36 +3002,57 @@ var CryptoSelectModal = import_nice_modal_react4.default.create(() => {
|
|
|
2899
3002
|
alt: `${nativeBalance.symbol} logo`
|
|
2900
3003
|
}
|
|
2901
3004
|
),
|
|
2902
|
-
/* @__PURE__ */ (0,
|
|
3005
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.symbol })
|
|
2903
3006
|
] }),
|
|
2904
|
-
/* @__PURE__ */ (0,
|
|
3007
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.formatted })
|
|
2905
3008
|
]
|
|
2906
3009
|
},
|
|
2907
3010
|
nativeBalance.symbol
|
|
2908
3011
|
),
|
|
2909
|
-
isLoading && /* @__PURE__ */ (0,
|
|
2910
|
-
/* @__PURE__ */ (0,
|
|
2911
|
-
/* @__PURE__ */ (0,
|
|
2912
|
-
/* @__PURE__ */ (0,
|
|
3012
|
+
isLoading && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
|
|
3013
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
|
|
3014
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
|
|
3015
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
|
|
2913
3016
|
] }),
|
|
2914
3017
|
erc20Balances.map((coin) => {
|
|
2915
3018
|
const Icon = getSymbolLogo(coin.symbol);
|
|
2916
|
-
return /* @__PURE__ */ (0,
|
|
3019
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
2917
3020
|
"button",
|
|
2918
3021
|
{
|
|
2919
3022
|
className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-black hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50",
|
|
2920
3023
|
onClick: () => handleSelect(coin),
|
|
2921
3024
|
children: [
|
|
2922
|
-
/* @__PURE__ */ (0,
|
|
3025
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
2923
3026
|
Boolean(Icon) && Icon,
|
|
2924
|
-
/* @__PURE__ */ (0,
|
|
3027
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm font-medium", children: coin.symbol })
|
|
2925
3028
|
] }),
|
|
2926
|
-
/* @__PURE__ */ (0,
|
|
3029
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm font-medium", children: coin.formatted })
|
|
2927
3030
|
]
|
|
2928
3031
|
},
|
|
2929
3032
|
coin.symbol
|
|
2930
3033
|
);
|
|
2931
3034
|
})
|
|
3035
|
+
] }),
|
|
3036
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h3", { className: "text-primary text-xl font-semibold", children: "All Tokens" }),
|
|
3037
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex max-h-[40vh] w-full flex-col gap-1 overflow-y-auto", children: [
|
|
3038
|
+
tokensIsLoading && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
|
|
3039
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
|
|
3040
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
|
|
3041
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
|
|
3042
|
+
] }),
|
|
3043
|
+
filteredCoins.map((token) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
3044
|
+
"button",
|
|
3045
|
+
{
|
|
3046
|
+
disabled: !userCoinSymbols.includes(token.symbol),
|
|
3047
|
+
onClick: () => handleSelect(userCoins.find((c) => c.symbol === token.symbol)),
|
|
3048
|
+
className: "flex min-h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-black hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50",
|
|
3049
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
3050
|
+
token.logoURI ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("img", { className: "h-8 w-8 shrink-0", src: token.logoURI, alt: `${token.name} logo` }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-8 w-8 shrink-0 rounded-full bg-gray-400" }),
|
|
3051
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm font-medium", children: token.symbol })
|
|
3052
|
+
] })
|
|
3053
|
+
},
|
|
3054
|
+
token.symbol
|
|
3055
|
+
))
|
|
2932
3056
|
] })
|
|
2933
3057
|
] })
|
|
2934
3058
|
] })
|
|
@@ -2937,51 +3061,51 @@ var CryptoSelectModal = import_nice_modal_react4.default.create(() => {
|
|
|
2937
3061
|
CryptoSelectModal.displayName = "CryptoSelectModal";
|
|
2938
3062
|
|
|
2939
3063
|
// src/components/CryptoTab/Crypto/SelectCoinButton.tsx
|
|
2940
|
-
var
|
|
3064
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
2941
3065
|
var SelectCoinButton = () => {
|
|
2942
3066
|
const openModal = () => {
|
|
2943
3067
|
import_nice_modal_react5.default.show(CryptoSelectModal);
|
|
2944
3068
|
};
|
|
2945
|
-
return /* @__PURE__ */ (0,
|
|
2946
|
-
/* @__PURE__ */ (0,
|
|
2947
|
-
/* @__PURE__ */ (0,
|
|
2948
|
-
/* @__PURE__ */ (0,
|
|
2949
|
-
/* @__PURE__ */ (0,
|
|
3069
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("button", { onClick: openModal, type: "button", className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
|
|
3070
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white" }) }),
|
|
3071
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex h-full w-full items-center justify-between px-3", children: [
|
|
3072
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "font-medium text-black/50", children: "Select a token" }) }),
|
|
3073
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { stroke: "#000", strokeLinecap: "round", d: "m6 12.43 4-4-4-4" }) })
|
|
2950
3074
|
] })
|
|
2951
3075
|
] });
|
|
2952
3076
|
};
|
|
2953
3077
|
|
|
2954
3078
|
// src/components/CryptoTab/Crypto/SelectedCoin.tsx
|
|
2955
|
-
var
|
|
3079
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
2956
3080
|
var SelectedCoin = (props) => {
|
|
2957
3081
|
const { coin, balance, logoURI } = props;
|
|
2958
3082
|
const Icon = getSymbolLogo(coin);
|
|
2959
|
-
return /* @__PURE__ */ (0,
|
|
2960
|
-
/* @__PURE__ */ (0,
|
|
2961
|
-
/* @__PURE__ */ (0,
|
|
2962
|
-
/* @__PURE__ */ (0,
|
|
3083
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
|
|
3084
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) }) }),
|
|
3085
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "border-primary flex h-full w-full items-center justify-between rounded-r-md border-1 !border-l-0 px-3", children: [
|
|
3086
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-1", children: [
|
|
2963
3087
|
Icon,
|
|
2964
|
-
!Icon && logoURI && /* @__PURE__ */ (0,
|
|
2965
|
-
/* @__PURE__ */ (0,
|
|
2966
|
-
/* @__PURE__ */ (0,
|
|
3088
|
+
!Icon && logoURI && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("img", { className: "mr-1 h-8 w-8 shrink-0", src: logoURI, alt: `${coin} logo` }),
|
|
3089
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "font-semibold text-black", children: coin }),
|
|
3090
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", { d: "M6 12.4341L10 8.43408L6 4.43408", stroke: "black", strokeLinecap: "round" }) })
|
|
2967
3091
|
] }),
|
|
2968
|
-
/* @__PURE__ */ (0,
|
|
3092
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("p", { className: "text-xs font-medium text-black/50", children: [
|
|
2969
3093
|
"Wallet balance ",
|
|
2970
|
-
/* @__PURE__ */ (0,
|
|
3094
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-black", children: balance })
|
|
2971
3095
|
] })
|
|
2972
3096
|
] })
|
|
2973
3097
|
] });
|
|
2974
3098
|
};
|
|
2975
3099
|
|
|
2976
3100
|
// src/components/CryptoTab/Crypto/Crypto.tsx
|
|
2977
|
-
var
|
|
3101
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
2978
3102
|
var Crypto = () => {
|
|
2979
3103
|
const { address } = (0, import_wagmi4.useAccount)();
|
|
2980
3104
|
const { selectedPaymentMethod } = useSpreePaymentMethod();
|
|
2981
3105
|
const { cryptoPayment } = useCryptoPayment();
|
|
2982
3106
|
const isWalletConnected = Boolean(address);
|
|
2983
3107
|
const { register } = useSpreePayRegister();
|
|
2984
|
-
const handlePay = (0,
|
|
3108
|
+
const handlePay = (0, import_react15.useCallback)(
|
|
2985
3109
|
async (data) => {
|
|
2986
3110
|
try {
|
|
2987
3111
|
const res = await cryptoPayment(data);
|
|
@@ -2995,17 +3119,17 @@ var Crypto = () => {
|
|
|
2995
3119
|
},
|
|
2996
3120
|
[cryptoPayment]
|
|
2997
3121
|
);
|
|
2998
|
-
(0,
|
|
3122
|
+
(0, import_react15.useEffect)(() => {
|
|
2999
3123
|
register(handlePay);
|
|
3000
3124
|
}, [register, handlePay]);
|
|
3001
|
-
return /* @__PURE__ */ (0,
|
|
3002
|
-
/* @__PURE__ */ (0,
|
|
3003
|
-
/* @__PURE__ */ (0,
|
|
3004
|
-
/* @__PURE__ */ (0,
|
|
3125
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col items-baseline gap-4", children: [
|
|
3126
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex w-full items-center justify-between gap-4", children: [
|
|
3127
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h3", { className: "text-primary text-xl leading-[1.7] font-semibold", children: "Pay with Crypto" }),
|
|
3128
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ConnectButton, {})
|
|
3005
3129
|
] }),
|
|
3006
|
-
!isWalletConnected && /* @__PURE__ */ (0,
|
|
3007
|
-
isWalletConnected && /* @__PURE__ */ (0,
|
|
3008
|
-
selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */ (0,
|
|
3130
|
+
!isWalletConnected && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Logos, {}),
|
|
3131
|
+
isWalletConnected && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
|
|
3132
|
+
selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3009
3133
|
SelectedCoin,
|
|
3010
3134
|
{
|
|
3011
3135
|
coin: selectedPaymentMethod.method.symbol,
|
|
@@ -3013,13 +3137,13 @@ var Crypto = () => {
|
|
|
3013
3137
|
logoURI: selectedPaymentMethod.method.logoURI
|
|
3014
3138
|
}
|
|
3015
3139
|
),
|
|
3016
|
-
/* @__PURE__ */ (0,
|
|
3140
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SelectCoinButton, {})
|
|
3017
3141
|
] })
|
|
3018
3142
|
] });
|
|
3019
3143
|
};
|
|
3020
3144
|
|
|
3021
3145
|
// src/components/CryptoTab/Crypto/CryptoWrapper.tsx
|
|
3022
|
-
var
|
|
3146
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
3023
3147
|
var queryClient = new import_react_query.QueryClient();
|
|
3024
3148
|
var connectors = (0, import_rainbowkit2.connectorsForWallets)(
|
|
3025
3149
|
[
|
|
@@ -3037,22 +3161,22 @@ var config = (0, import_wagmi5.createConfig)({
|
|
|
3037
3161
|
ssr: true
|
|
3038
3162
|
});
|
|
3039
3163
|
var CryptoWrapper = () => {
|
|
3040
|
-
return /* @__PURE__ */ (0,
|
|
3164
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_wagmi5.WagmiProvider, { config, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_rainbowkit2.RainbowKitProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_nice_modal_react6.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Crypto, {}) }) }) }) });
|
|
3041
3165
|
};
|
|
3042
3166
|
|
|
3043
3167
|
// src/components/CryptoTab/CryptoTab.tsx
|
|
3044
|
-
var
|
|
3168
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
3045
3169
|
var CryptoTab = () => {
|
|
3046
|
-
return /* @__PURE__ */ (0,
|
|
3047
|
-
/* @__PURE__ */ (0,
|
|
3048
|
-
/* @__PURE__ */ (0,
|
|
3170
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { children: [
|
|
3171
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-5", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CryptoWrapper, {}) }),
|
|
3172
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PointsSwitch, { disabled: true }) })
|
|
3049
3173
|
] });
|
|
3050
3174
|
};
|
|
3051
3175
|
|
|
3052
3176
|
// src/components/TabButtons.tsx
|
|
3053
|
-
var
|
|
3177
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
3054
3178
|
var TabButton = ({ isDisabled = true, isActive, children, onClick }) => {
|
|
3055
|
-
return /* @__PURE__ */ (0,
|
|
3179
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
3056
3180
|
"button",
|
|
3057
3181
|
{
|
|
3058
3182
|
disabled: isDisabled,
|
|
@@ -3075,50 +3199,50 @@ var TabButtons = (props) => {
|
|
|
3075
3199
|
onChange({ type, method: null });
|
|
3076
3200
|
}
|
|
3077
3201
|
};
|
|
3078
|
-
return /* @__PURE__ */ (0,
|
|
3079
|
-
/* @__PURE__ */ (0,
|
|
3202
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex gap-2", children: [
|
|
3203
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
3080
3204
|
TabButton,
|
|
3081
3205
|
{
|
|
3082
3206
|
isDisabled: !spreePayConfig?.creditCard.enabled,
|
|
3083
3207
|
onClick: handleChange("CREDIT_CARD" /* CREDIT_CARD */),
|
|
3084
3208
|
isActive: value === "CREDIT_CARD" /* CREDIT_CARD */,
|
|
3085
3209
|
children: [
|
|
3086
|
-
/* @__PURE__ */ (0,
|
|
3210
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
3087
3211
|
"path",
|
|
3088
3212
|
{
|
|
3089
3213
|
fill: "currentColor",
|
|
3090
3214
|
d: "M22 6v12c0 .55-.2 1.02-.59 1.41-.39.4-.86.59-1.41.59H4c-.55 0-1.02-.2-1.41-.59-.4-.39-.59-.86-.59-1.41V6c0-.55.2-1.02.59-1.41C2.98 4.19 3.45 4 4 4h16c.55 0 1.02.2 1.41.59.4.39.59.86.59 1.41ZM4 8h16V6H4v2Zm0 4v6h16v-6H4Z"
|
|
3091
3215
|
}
|
|
3092
3216
|
) }),
|
|
3093
|
-
/* @__PURE__ */ (0,
|
|
3217
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-sm font-medium", children: "Card" })
|
|
3094
3218
|
]
|
|
3095
3219
|
}
|
|
3096
3220
|
),
|
|
3097
|
-
/* @__PURE__ */ (0,
|
|
3221
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
3098
3222
|
TabButton,
|
|
3099
3223
|
{
|
|
3100
3224
|
isDisabled: !spreePayConfig?.creditCard.enabled,
|
|
3101
3225
|
onClick: handleChange("CRYPTO" /* CRYPTO */),
|
|
3102
3226
|
isActive: value === "CRYPTO" /* CRYPTO */,
|
|
3103
3227
|
children: [
|
|
3104
|
-
/* @__PURE__ */ (0,
|
|
3105
|
-
/* @__PURE__ */ (0,
|
|
3228
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("svg", { className: "my-1", xmlns: "http://www.w3.org/2000/svg", width: "30", height: "16", fill: "none", children: [
|
|
3229
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
3106
3230
|
"path",
|
|
3107
3231
|
{
|
|
3108
3232
|
fill: "currentColor",
|
|
3109
3233
|
d: "M14.5 0C19.2 0 23 3.58 23 8s-3.8 8-8.5 8a8.93 8.93 0 0 1-3.35-.65 8 8 0 0 0 2.24-1.44c.36.06.73.09 1.11.09 3.7 0 6.5-2.8 6.5-6s-2.8-6-6.5-6c-.38 0-.75.03-1.11.09A8 8 0 0 0 11.15.65 8.93 8.93 0 0 1 14.5 0Z"
|
|
3110
3234
|
}
|
|
3111
3235
|
),
|
|
3112
|
-
/* @__PURE__ */ (0,
|
|
3236
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
3113
3237
|
"path",
|
|
3114
3238
|
{
|
|
3115
3239
|
fill: "currentColor",
|
|
3116
3240
|
d: "M21.15 0c4.7 0 8.5 3.58 8.5 8s-3.8 8-8.5 8a8.93 8.93 0 0 1-3.35-.65 8 8 0 0 0 2.24-1.44c.36.06.73.09 1.1.09 3.71 0 6.5-2.8 6.5-6s-2.79-6-6.5-6c-.37 0-.74.03-1.1.09A8 8 0 0 0 17.8.65 8.93 8.93 0 0 1 21.15 0Z"
|
|
3117
3241
|
}
|
|
3118
3242
|
),
|
|
3119
|
-
/* @__PURE__ */ (0,
|
|
3243
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "2" })
|
|
3120
3244
|
] }),
|
|
3121
|
-
/* @__PURE__ */ (0,
|
|
3245
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-sm font-medium", children: "Crypto" })
|
|
3122
3246
|
]
|
|
3123
3247
|
}
|
|
3124
3248
|
)
|
|
@@ -3126,42 +3250,42 @@ var TabButtons = (props) => {
|
|
|
3126
3250
|
};
|
|
3127
3251
|
|
|
3128
3252
|
// src/components/Tabs.tsx
|
|
3129
|
-
var
|
|
3253
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
3130
3254
|
var Tabs = () => {
|
|
3131
3255
|
const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
|
|
3132
|
-
return /* @__PURE__ */ (0,
|
|
3133
|
-
/* @__PURE__ */ (0,
|
|
3134
|
-
/* @__PURE__ */ (0,
|
|
3135
|
-
/* @__PURE__ */ (0,
|
|
3256
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "mb-4 rounded-3xl border border-black/25 bg-white", children: [
|
|
3257
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex w-full flex-col gap-4 border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-6", children: [
|
|
3258
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h2", { className: "text-primary text-2xl font-semibold", children: "Choose a Payment Method" }),
|
|
3259
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
|
|
3136
3260
|
] }),
|
|
3137
|
-
selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ (0,
|
|
3138
|
-
selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ (0,
|
|
3261
|
+
selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CreditCardTab, {}),
|
|
3262
|
+
selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CryptoTab, {})
|
|
3139
3263
|
] });
|
|
3140
3264
|
};
|
|
3141
3265
|
|
|
3142
3266
|
// src/SpreePayContent.tsx
|
|
3143
|
-
var
|
|
3267
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
3144
3268
|
var SpreePayContent = ({ isLoggedIn }) => {
|
|
3145
|
-
return /* @__PURE__ */ (0,
|
|
3146
|
-
/* @__PURE__ */ (0,
|
|
3147
|
-
/* @__PURE__ */ (0,
|
|
3148
|
-
/* @__PURE__ */ (0,
|
|
3269
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "w-full", children: [
|
|
3270
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Tabs, {}),
|
|
3271
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(CheckoutButton, { isLoggedIn }),
|
|
3272
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SpreeLegal, {})
|
|
3149
3273
|
] });
|
|
3150
3274
|
};
|
|
3151
3275
|
|
|
3152
3276
|
// src/hooks/useKeycloakSSO.ts
|
|
3153
|
-
var
|
|
3277
|
+
var import_react16 = require("react");
|
|
3154
3278
|
var import_keycloak_js = __toESM(require("keycloak-js"), 1);
|
|
3155
3279
|
var refreshAheadSeconds = 60;
|
|
3156
3280
|
function useKeycloakSSO(config2) {
|
|
3157
3281
|
const { url, realm, clientId, ssoPageURI, enabled } = config2;
|
|
3158
|
-
const initRef = (0,
|
|
3159
|
-
const kcRef = (0,
|
|
3160
|
-
const refreshTimerRef = (0,
|
|
3161
|
-
const [error, setError] = (0,
|
|
3162
|
-
const [isChecking, setIsChecking] = (0,
|
|
3163
|
-
const [accessToken, setAccessToken] = (0,
|
|
3164
|
-
const scheduleRefresh = (0,
|
|
3282
|
+
const initRef = (0, import_react16.useRef)(false);
|
|
3283
|
+
const kcRef = (0, import_react16.useRef)(null);
|
|
3284
|
+
const refreshTimerRef = (0, import_react16.useRef)(null);
|
|
3285
|
+
const [error, setError] = (0, import_react16.useState)(null);
|
|
3286
|
+
const [isChecking, setIsChecking] = (0, import_react16.useState)(enabled);
|
|
3287
|
+
const [accessToken, setAccessToken] = (0, import_react16.useState)(null);
|
|
3288
|
+
const scheduleRefresh = (0, import_react16.useCallback)(() => {
|
|
3165
3289
|
const kc = kcRef.current;
|
|
3166
3290
|
if (!kc || !kc.tokenParsed || !kc.tokenParsed.exp) {
|
|
3167
3291
|
return;
|
|
@@ -3182,7 +3306,7 @@ function useKeycloakSSO(config2) {
|
|
|
3182
3306
|
});
|
|
3183
3307
|
}, delayMs);
|
|
3184
3308
|
}, []);
|
|
3185
|
-
(0,
|
|
3309
|
+
(0, import_react16.useEffect)(() => {
|
|
3186
3310
|
if (initRef.current || !enabled) return;
|
|
3187
3311
|
initRef.current = true;
|
|
3188
3312
|
setIsChecking(true);
|
|
@@ -3217,11 +3341,11 @@ function useKeycloakSSO(config2) {
|
|
|
3217
3341
|
}
|
|
3218
3342
|
|
|
3219
3343
|
// src/SpreePay.tsx
|
|
3220
|
-
var
|
|
3344
|
+
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
3221
3345
|
var SpreePayInner = () => {
|
|
3222
|
-
const rootRef = (0,
|
|
3223
|
-
const [portalEl, setPortalEl] = (0,
|
|
3224
|
-
(0,
|
|
3346
|
+
const rootRef = (0, import_react17.useRef)(null);
|
|
3347
|
+
const [portalEl, setPortalEl] = (0, import_react17.useState)(null);
|
|
3348
|
+
(0, import_react17.useLayoutEffect)(() => {
|
|
3225
3349
|
if (!rootRef.current) return;
|
|
3226
3350
|
const el = rootRef.current.querySelector(":scope > .sl-spreepay__portal");
|
|
3227
3351
|
setPortalEl(el ?? null);
|
|
@@ -3231,12 +3355,12 @@ var SpreePayInner = () => {
|
|
|
3231
3355
|
const tenantId = env?.tenantId || "bookit";
|
|
3232
3356
|
const { isChecking, accessToken } = useKeycloakSSO({
|
|
3233
3357
|
realm: tenantId,
|
|
3234
|
-
url: staticConfig.
|
|
3235
|
-
clientId: staticConfig.
|
|
3358
|
+
url: staticConfig.keycloakUrl,
|
|
3359
|
+
clientId: staticConfig.keycloakClientId,
|
|
3236
3360
|
ssoPageURI: env?.ssoPageURI,
|
|
3237
3361
|
enabled: !env?.accessToken
|
|
3238
3362
|
});
|
|
3239
|
-
const slapiFetcher = (0,
|
|
3363
|
+
const slapiFetcher = (0, import_react17.useMemo)(() => {
|
|
3240
3364
|
if (accessToken || env.accessToken) {
|
|
3241
3365
|
return registerApi({
|
|
3242
3366
|
accessToken: env.accessToken || accessToken,
|
|
@@ -3247,14 +3371,14 @@ var SpreePayInner = () => {
|
|
|
3247
3371
|
}, [env.accessToken, staticConfig, tenantId, accessToken]);
|
|
3248
3372
|
const getContent = () => {
|
|
3249
3373
|
if (isChecking) {
|
|
3250
|
-
return /* @__PURE__ */ (0,
|
|
3251
|
-
/* @__PURE__ */ (0,
|
|
3252
|
-
/* @__PURE__ */ (0,
|
|
3253
|
-
/* @__PURE__ */ (0,
|
|
3374
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex w-full flex-col", children: [
|
|
3375
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "bg-primary/8 mb-4 h-[315px] animate-pulse rounded-3xl" }),
|
|
3376
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "bg-primary/8 h-[135px] animate-pulse rounded-3xl" }),
|
|
3377
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SpreeLegal, {})
|
|
3254
3378
|
] });
|
|
3255
3379
|
}
|
|
3256
|
-
return /* @__PURE__ */ (0,
|
|
3257
|
-
|
|
3380
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
3381
|
+
import_swr5.SWRConfig,
|
|
3258
3382
|
{
|
|
3259
3383
|
value: {
|
|
3260
3384
|
fetcher: slapiFetcher,
|
|
@@ -3262,30 +3386,31 @@ var SpreePayInner = () => {
|
|
|
3262
3386
|
revalidateOnFocus: false,
|
|
3263
3387
|
revalidateIfStale: false
|
|
3264
3388
|
},
|
|
3265
|
-
children: /* @__PURE__ */ (0,
|
|
3389
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_nice_modal_react7.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SpreePayContent, { isLoggedIn: Boolean(accessToken || env.accessToken) }) }) })
|
|
3266
3390
|
}
|
|
3267
3391
|
);
|
|
3268
3392
|
};
|
|
3269
|
-
return /* @__PURE__ */ (0,
|
|
3270
|
-
/* @__PURE__ */ (0,
|
|
3393
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { ref: rootRef, className: cn("sl-spreepay", appProps.className), children: [
|
|
3394
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "sl-spreepay__portal" }),
|
|
3271
3395
|
getContent()
|
|
3272
3396
|
] });
|
|
3273
3397
|
};
|
|
3274
3398
|
var SpreePay = (props) => {
|
|
3275
|
-
return /* @__PURE__ */ (0,
|
|
3399
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(StaticConfigProvider, { props, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SpreePayInner, {}) });
|
|
3276
3400
|
};
|
|
3277
3401
|
|
|
3278
3402
|
// src/hooks/useCapture3DS.ts
|
|
3279
|
-
var
|
|
3403
|
+
var import_react18 = require("react");
|
|
3280
3404
|
var useCapture3DS = (searchParams) => {
|
|
3281
|
-
(0,
|
|
3282
|
-
if (window
|
|
3405
|
+
(0, import_react18.useEffect)(() => {
|
|
3406
|
+
if (typeof window !== "undefined" && window.parent && searchParams?.paymentIntent) {
|
|
3283
3407
|
window.parent.SP_EVENT_BUS?.emit("paymentIntent", { paymentIntent: searchParams.paymentIntent });
|
|
3284
3408
|
}
|
|
3285
3409
|
}, [searchParams]);
|
|
3286
3410
|
};
|
|
3287
3411
|
// Annotate the CommonJS export names for ESM import in node:
|
|
3288
3412
|
0 && (module.exports = {
|
|
3413
|
+
PaymentType,
|
|
3289
3414
|
SpreePay,
|
|
3290
3415
|
SpreePayProvider,
|
|
3291
3416
|
useCapture3DS,
|