@superlogic/spree-pay 0.1.34 → 0.1.35
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 +1 -1
- package/build/index.cjs +236 -180
- package/build/index.css +26 -2
- package/build/index.d.cts +5 -2
- package/build/index.d.ts +5 -2
- package/build/index.js +222 -166
- package/package.json +19 -19
package/build/index.cjs
CHANGED
|
@@ -44,7 +44,7 @@ var import_nice_modal_react7 = __toESM(require("@ebay/nice-modal-react"), 1);
|
|
|
44
44
|
var import_swr5 = require("swr");
|
|
45
45
|
|
|
46
46
|
// package.json
|
|
47
|
-
var version = "0.1.
|
|
47
|
+
var version = "0.1.35";
|
|
48
48
|
|
|
49
49
|
// src/context/SpreePayActionsContext.tsx
|
|
50
50
|
var import_react = require("react");
|
|
@@ -156,6 +156,11 @@ var CONFIG = {
|
|
|
156
156
|
slapiUrl: "https://slapi.dev.superlogic.com",
|
|
157
157
|
keycloakUrl: "https://sso.dev.tickets.qiibeefoundation.org",
|
|
158
158
|
keycloakClientId: "oneof-next"
|
|
159
|
+
},
|
|
160
|
+
umhp: {
|
|
161
|
+
slapiUrl: "https://slapi.dev.umusicpassport.com",
|
|
162
|
+
keycloakUrl: "https://auth.dev.umusicpassport.com",
|
|
163
|
+
keycloakClientId: "oneof-next"
|
|
159
164
|
}
|
|
160
165
|
},
|
|
161
166
|
stg: {
|
|
@@ -173,6 +178,11 @@ var CONFIG = {
|
|
|
173
178
|
slapiUrl: "https://slapi.stg.tickets.qiibeefoundation.org",
|
|
174
179
|
keycloakUrl: "https://sso.stg.tickets.qiibeefoundation.org",
|
|
175
180
|
keycloakClientId: "oneof-next"
|
|
181
|
+
},
|
|
182
|
+
umhp: {
|
|
183
|
+
slapiUrl: "https://slapi.stg.umusicpassport.com",
|
|
184
|
+
keycloakUrl: "https://auth.stg.umusicpassport.com",
|
|
185
|
+
keycloakClientId: "oneof-next"
|
|
176
186
|
}
|
|
177
187
|
},
|
|
178
188
|
prod: {
|
|
@@ -190,6 +200,11 @@ var CONFIG = {
|
|
|
190
200
|
slapiUrl: "https://slapi.tickets.qiibeefoundation.org",
|
|
191
201
|
keycloakUrl: "https://sso.tickets.qiibeefoundation.org",
|
|
192
202
|
keycloakClientId: "oneof-next"
|
|
203
|
+
},
|
|
204
|
+
umhp: {
|
|
205
|
+
slapiUrl: "https://slapi.umusicpassport.com",
|
|
206
|
+
keycloakUrl: "https://auth.umusicpassport.com",
|
|
207
|
+
keycloakClientId: "oneof-next"
|
|
193
208
|
}
|
|
194
209
|
}
|
|
195
210
|
};
|
|
@@ -1037,9 +1052,12 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
|
|
|
1037
1052
|
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
1038
1053
|
"div",
|
|
1039
1054
|
{
|
|
1040
|
-
className: cn(
|
|
1041
|
-
"border-
|
|
1042
|
-
|
|
1055
|
+
className: cn(
|
|
1056
|
+
"flex h-full w-full items-center justify-between rounded-r-sm border border-l-0! border-transparent px-3",
|
|
1057
|
+
{
|
|
1058
|
+
"border-primary": isSelected
|
|
1059
|
+
}
|
|
1060
|
+
),
|
|
1043
1061
|
children: [
|
|
1044
1062
|
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-sm font-medium text-black", children: card.schema }) }),
|
|
1045
1063
|
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
@@ -1439,7 +1457,7 @@ function clamp(value, [min, max]) {
|
|
|
1439
1457
|
return Math.min(max, Math.max(min, value));
|
|
1440
1458
|
}
|
|
1441
1459
|
|
|
1442
|
-
// ../../node_modules/@radix-ui/
|
|
1460
|
+
// ../../node_modules/@radix-ui/primitive/dist/index.mjs
|
|
1443
1461
|
var canUseDOM = !!(typeof window !== "undefined" && window.document && window.document.createElement);
|
|
1444
1462
|
function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
|
|
1445
1463
|
return function handleEvent(event) {
|
|
@@ -1622,7 +1640,6 @@ function useUncontrolledState({
|
|
|
1622
1640
|
function isFunction(value) {
|
|
1623
1641
|
return typeof value === "function";
|
|
1624
1642
|
}
|
|
1625
|
-
var SYNC_STATE = Symbol("RADIX:SYNC_STATE");
|
|
1626
1643
|
|
|
1627
1644
|
// ../../node_modules/@radix-ui/react-direction/dist/index.mjs
|
|
1628
1645
|
var React6 = __toESM(require("react"), 1);
|
|
@@ -1713,7 +1730,7 @@ var Primitive = NODES.reduce((primitive, node) => {
|
|
|
1713
1730
|
const { asChild, ...primitiveProps } = props;
|
|
1714
1731
|
const Comp = asChild ? Slot2 : node;
|
|
1715
1732
|
if (typeof window !== "undefined") {
|
|
1716
|
-
window[Symbol.for("radix-ui")] = true;
|
|
1733
|
+
window[/* @__PURE__ */ Symbol.for("radix-ui")] = true;
|
|
1717
1734
|
}
|
|
1718
1735
|
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Comp, { ...primitiveProps, ref: forwardedRef });
|
|
1719
1736
|
});
|
|
@@ -2490,6 +2507,7 @@ var SplitBlock = (props) => {
|
|
|
2490
2507
|
const [walletReady, setWalletReady] = (0, import_react11.useState)(false);
|
|
2491
2508
|
const { pointsConversionRatio, pointsTitle } = spreePayConfig || {};
|
|
2492
2509
|
const { env } = useSpreePayEnv();
|
|
2510
|
+
const prevPointsChainRef = (0, import_react11.useRef)(spreePayConfig?.pointsChain);
|
|
2493
2511
|
const initWallet = (0, import_react11.useCallback)(
|
|
2494
2512
|
async (pointsChain) => {
|
|
2495
2513
|
if (!pointsChain) return;
|
|
@@ -2511,11 +2529,17 @@ var SplitBlock = (props) => {
|
|
|
2511
2529
|
[onToggle, env.environment]
|
|
2512
2530
|
);
|
|
2513
2531
|
(0, import_react11.useEffect)(() => {
|
|
2514
|
-
if (env.useWeb3Points)
|
|
2515
|
-
|
|
2516
|
-
|
|
2517
|
-
|
|
2518
|
-
|
|
2532
|
+
if (!env.useWeb3Points) return;
|
|
2533
|
+
const pointsChainChanged = prevPointsChainRef.current !== spreePayConfig?.pointsChain;
|
|
2534
|
+
prevPointsChainRef.current = spreePayConfig?.pointsChain;
|
|
2535
|
+
const doInit = async () => {
|
|
2536
|
+
if (pointsChainChanged) {
|
|
2537
|
+
setAddress(null);
|
|
2538
|
+
setWalletReady(false);
|
|
2539
|
+
}
|
|
2540
|
+
await initWallet(spreePayConfig?.pointsChain);
|
|
2541
|
+
};
|
|
2542
|
+
doInit();
|
|
2519
2543
|
}, [spreePayConfig?.pointsChain, initWallet, env.useWeb3Points]);
|
|
2520
2544
|
const isPointsSelectorDisabled = env.useWeb3Points ? !walletReady : false;
|
|
2521
2545
|
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(PointsSelector, { isDisabled: isPointsSelectorDisabled, onSelect: () => onSelect("air"), isSelected, children: [
|
|
@@ -2624,7 +2648,7 @@ var CreditCardTab = () => {
|
|
|
2624
2648
|
register(handlePay);
|
|
2625
2649
|
}, [register, handlePay]);
|
|
2626
2650
|
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { children: [
|
|
2627
|
-
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "border-b
|
|
2651
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "border-b border-black/7 px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CreditCard, {}) }),
|
|
2628
2652
|
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex flex-col gap-6 px-5 pt-5 pb-5 md:px-7 md:pt-6 md:pb-7", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Points, {}) })
|
|
2629
2653
|
] });
|
|
2630
2654
|
};
|
|
@@ -2672,10 +2696,13 @@ async function waitForTransactionReceipt(config, parameters) {
|
|
|
2672
2696
|
const receipt = await action({ ...rest, timeout });
|
|
2673
2697
|
if (receipt.status === "reverted") {
|
|
2674
2698
|
const action_getTransaction = getAction(client, import_actions2.getTransaction, "getTransaction");
|
|
2675
|
-
const txn = await action_getTransaction({
|
|
2699
|
+
const { from: account, ...txn } = await action_getTransaction({
|
|
2700
|
+
hash: receipt.transactionHash
|
|
2701
|
+
});
|
|
2676
2702
|
const action_call = getAction(client, import_actions2.call, "call");
|
|
2677
2703
|
const code = await action_call({
|
|
2678
2704
|
...txn,
|
|
2705
|
+
account,
|
|
2679
2706
|
data: txn.input,
|
|
2680
2707
|
gasPrice: txn.type !== "eip1559" ? txn.gasPrice : void 0,
|
|
2681
2708
|
maxFeePerGas: txn.type === "eip1559" ? txn.maxFeePerGas : void 0,
|
|
@@ -2988,18 +3015,58 @@ function Input2({ className, type, ...props }) {
|
|
|
2988
3015
|
}
|
|
2989
3016
|
|
|
2990
3017
|
// ../../node_modules/@radix-ui/react-separator/dist/index.mjs
|
|
3018
|
+
var React14 = __toESM(require("react"), 1);
|
|
3019
|
+
|
|
3020
|
+
// ../../node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-primitive/dist/index.mjs
|
|
2991
3021
|
var React13 = __toESM(require("react"), 1);
|
|
3022
|
+
var ReactDOM2 = __toESM(require("react-dom"), 1);
|
|
3023
|
+
var import_react_slot5 = require("@radix-ui/react-slot");
|
|
2992
3024
|
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
3025
|
+
var NODES2 = [
|
|
3026
|
+
"a",
|
|
3027
|
+
"button",
|
|
3028
|
+
"div",
|
|
3029
|
+
"form",
|
|
3030
|
+
"h2",
|
|
3031
|
+
"h3",
|
|
3032
|
+
"img",
|
|
3033
|
+
"input",
|
|
3034
|
+
"label",
|
|
3035
|
+
"li",
|
|
3036
|
+
"nav",
|
|
3037
|
+
"ol",
|
|
3038
|
+
"p",
|
|
3039
|
+
"select",
|
|
3040
|
+
"span",
|
|
3041
|
+
"svg",
|
|
3042
|
+
"ul"
|
|
3043
|
+
];
|
|
3044
|
+
var Primitive2 = NODES2.reduce((primitive, node) => {
|
|
3045
|
+
const Slot2 = (0, import_react_slot5.createSlot)(`Primitive.${node}`);
|
|
3046
|
+
const Node2 = React13.forwardRef((props, forwardedRef) => {
|
|
3047
|
+
const { asChild, ...primitiveProps } = props;
|
|
3048
|
+
const Comp = asChild ? Slot2 : node;
|
|
3049
|
+
if (typeof window !== "undefined") {
|
|
3050
|
+
window[/* @__PURE__ */ Symbol.for("radix-ui")] = true;
|
|
3051
|
+
}
|
|
3052
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Comp, { ...primitiveProps, ref: forwardedRef });
|
|
3053
|
+
});
|
|
3054
|
+
Node2.displayName = `Primitive.${node}`;
|
|
3055
|
+
return { ...primitive, [node]: Node2 };
|
|
3056
|
+
}, {});
|
|
3057
|
+
|
|
3058
|
+
// ../../node_modules/@radix-ui/react-separator/dist/index.mjs
|
|
3059
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
2993
3060
|
var NAME = "Separator";
|
|
2994
3061
|
var DEFAULT_ORIENTATION = "horizontal";
|
|
2995
3062
|
var ORIENTATIONS = ["horizontal", "vertical"];
|
|
2996
|
-
var Separator =
|
|
3063
|
+
var Separator = React14.forwardRef((props, forwardedRef) => {
|
|
2997
3064
|
const { decorative, orientation: orientationProp = DEFAULT_ORIENTATION, ...domProps } = props;
|
|
2998
3065
|
const orientation = isValidOrientation(orientationProp) ? orientationProp : DEFAULT_ORIENTATION;
|
|
2999
3066
|
const ariaOrientation = orientation === "vertical" ? orientation : void 0;
|
|
3000
3067
|
const semanticProps = decorative ? { role: "none" } : { "aria-orientation": ariaOrientation, role: "separator" };
|
|
3001
|
-
return /* @__PURE__ */ (0,
|
|
3002
|
-
|
|
3068
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
3069
|
+
Primitive2.div,
|
|
3003
3070
|
{
|
|
3004
3071
|
"data-orientation": orientation,
|
|
3005
3072
|
...semanticProps,
|
|
@@ -3015,14 +3082,14 @@ function isValidOrientation(orientation) {
|
|
|
3015
3082
|
var Root6 = Separator;
|
|
3016
3083
|
|
|
3017
3084
|
// ../ui/src/components/separator.tsx
|
|
3018
|
-
var
|
|
3085
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
3019
3086
|
function Separator2({
|
|
3020
3087
|
className,
|
|
3021
3088
|
orientation = "horizontal",
|
|
3022
3089
|
decorative = true,
|
|
3023
3090
|
...props
|
|
3024
3091
|
}) {
|
|
3025
|
-
return /* @__PURE__ */ (0,
|
|
3092
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
3026
3093
|
Root6,
|
|
3027
3094
|
{
|
|
3028
3095
|
"data-slot": "separator",
|
|
@@ -3038,17 +3105,17 @@ function Separator2({
|
|
|
3038
3105
|
}
|
|
3039
3106
|
|
|
3040
3107
|
// src/hooks/useBaseERC20Token.ts
|
|
3041
|
-
var
|
|
3108
|
+
var React15 = __toESM(require("react"), 1);
|
|
3042
3109
|
var import_viem5 = require("viem");
|
|
3043
3110
|
var import_wagmi2 = require("wagmi");
|
|
3044
3111
|
function useBaseERC20Token() {
|
|
3045
3112
|
const { address } = (0, import_wagmi2.useAccount)();
|
|
3046
3113
|
const baseClient = (0, import_wagmi2.usePublicClient)({ chainId: BASE_CHAIN_ID });
|
|
3047
3114
|
const defaultClient = (0, import_wagmi2.usePublicClient)();
|
|
3048
|
-
const [rows, setRows] =
|
|
3049
|
-
const [isLoading, setLoading] =
|
|
3050
|
-
const [error, setError] =
|
|
3051
|
-
|
|
3115
|
+
const [rows, setRows] = React15.useState([]);
|
|
3116
|
+
const [isLoading, setLoading] = React15.useState(false);
|
|
3117
|
+
const [error, setError] = React15.useState(null);
|
|
3118
|
+
React15.useEffect(() => {
|
|
3052
3119
|
let cancelled = false;
|
|
3053
3120
|
async function run() {
|
|
3054
3121
|
const client = baseClient ?? defaultClient;
|
|
@@ -3129,7 +3196,7 @@ var useBaseTokens = () => {
|
|
|
3129
3196
|
};
|
|
3130
3197
|
|
|
3131
3198
|
// src/modals/CryptoSelectModal.tsx
|
|
3132
|
-
var
|
|
3199
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
3133
3200
|
var CryptoSelectModal = import_nice_modal_react4.default.create(() => {
|
|
3134
3201
|
const modal = (0, import_nice_modal_react4.useModal)();
|
|
3135
3202
|
const { isLoading, error, erc20Balances } = useBaseERC20Token();
|
|
@@ -3148,14 +3215,14 @@ var CryptoSelectModal = import_nice_modal_react4.default.create(() => {
|
|
|
3148
3215
|
};
|
|
3149
3216
|
const userCoins = [nativeBalance, ...erc20Balances].filter(Boolean);
|
|
3150
3217
|
const userCoinSymbols = userCoins.map((c) => c.symbol);
|
|
3151
|
-
return /* @__PURE__ */ (0,
|
|
3152
|
-
/* @__PURE__ */ (0,
|
|
3153
|
-
/* @__PURE__ */ (0,
|
|
3154
|
-
/* @__PURE__ */ (0,
|
|
3155
|
-
/* @__PURE__ */ (0,
|
|
3156
|
-
/* @__PURE__ */ (0,
|
|
3157
|
-
/* @__PURE__ */ (0,
|
|
3158
|
-
/* @__PURE__ */ (0,
|
|
3218
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Dialog, { open: modal.visible, onOpenChange: modal.remove, children: [
|
|
3219
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DialogDescription, { className: "hidden", children: "Crypto Select Modal" }),
|
|
3220
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(DialogContent, { showCloseButton: false, className: "max-h-[90vh] gap-0 p-0", children: [
|
|
3221
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
|
|
3222
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
|
|
3223
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("button", { className: "rounded-md hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { stroke: "#000", d: "m15 6.5-6 6 6 6" }) }) }),
|
|
3224
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DialogTitle, { className: "text-primary text-2xl font-semibold", children: "Select a token" }),
|
|
3225
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("button", { className: "rounded-md p-1 hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "17", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
3159
3226
|
"path",
|
|
3160
3227
|
{
|
|
3161
3228
|
fill: "#000",
|
|
@@ -3163,22 +3230,22 @@ var CryptoSelectModal = import_nice_modal_react4.default.create(() => {
|
|
|
3163
3230
|
}
|
|
3164
3231
|
) }) })
|
|
3165
3232
|
] }),
|
|
3166
|
-
/* @__PURE__ */ (0,
|
|
3233
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Input2, { onChange: (e) => setSearch(e.target.value), placeholder: "Search by token name", value: search })
|
|
3167
3234
|
] }),
|
|
3168
|
-
/* @__PURE__ */ (0,
|
|
3169
|
-
/* @__PURE__ */ (0,
|
|
3170
|
-
/* @__PURE__ */ (0,
|
|
3171
|
-
(error || nativeError) && /* @__PURE__ */ (0,
|
|
3172
|
-
/* @__PURE__ */ (0,
|
|
3173
|
-
isLoadingNative && /* @__PURE__ */ (0,
|
|
3174
|
-
nativeBalance && /* @__PURE__ */ (0,
|
|
3235
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Separator2, { className: "hidden md:block" }),
|
|
3236
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
|
|
3237
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h3", { className: "text-primary text-xl font-semibold", children: "Tokens with wallet balance" }),
|
|
3238
|
+
(error || nativeError) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-center text-sm text-red-500", children: "Something wrong" }),
|
|
3239
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
|
|
3240
|
+
isLoadingNative && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
|
|
3241
|
+
nativeBalance && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
3175
3242
|
"button",
|
|
3176
3243
|
{
|
|
3177
3244
|
className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-black hover:bg-gray-100",
|
|
3178
3245
|
onClick: () => handleSelect(nativeBalance),
|
|
3179
3246
|
children: [
|
|
3180
|
-
/* @__PURE__ */ (0,
|
|
3181
|
-
nativeBalance.logoURI && /* @__PURE__ */ (0,
|
|
3247
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
3248
|
+
nativeBalance.logoURI && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
3182
3249
|
"img",
|
|
3183
3250
|
{
|
|
3184
3251
|
className: "h-8 w-8 shrink-0",
|
|
@@ -3186,53 +3253,53 @@ var CryptoSelectModal = import_nice_modal_react4.default.create(() => {
|
|
|
3186
3253
|
alt: `${nativeBalance.symbol} logo`
|
|
3187
3254
|
}
|
|
3188
3255
|
),
|
|
3189
|
-
/* @__PURE__ */ (0,
|
|
3256
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.symbol })
|
|
3190
3257
|
] }),
|
|
3191
|
-
/* @__PURE__ */ (0,
|
|
3258
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.formatted })
|
|
3192
3259
|
]
|
|
3193
3260
|
},
|
|
3194
3261
|
nativeBalance.symbol
|
|
3195
3262
|
),
|
|
3196
|
-
isLoading && /* @__PURE__ */ (0,
|
|
3197
|
-
/* @__PURE__ */ (0,
|
|
3198
|
-
/* @__PURE__ */ (0,
|
|
3199
|
-
/* @__PURE__ */ (0,
|
|
3263
|
+
isLoading && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
|
|
3264
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
|
|
3265
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
|
|
3266
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
|
|
3200
3267
|
] }),
|
|
3201
3268
|
erc20Balances.map((coin) => {
|
|
3202
3269
|
const Icon = getSymbolLogo(coin.symbol);
|
|
3203
|
-
return /* @__PURE__ */ (0,
|
|
3270
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
3204
3271
|
"button",
|
|
3205
3272
|
{
|
|
3206
3273
|
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",
|
|
3207
3274
|
onClick: () => handleSelect(coin),
|
|
3208
3275
|
children: [
|
|
3209
|
-
/* @__PURE__ */ (0,
|
|
3276
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
3210
3277
|
Boolean(Icon) && Icon,
|
|
3211
|
-
/* @__PURE__ */ (0,
|
|
3278
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-sm font-medium", children: coin.symbol })
|
|
3212
3279
|
] }),
|
|
3213
|
-
/* @__PURE__ */ (0,
|
|
3280
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-sm font-medium", children: coin.formatted })
|
|
3214
3281
|
]
|
|
3215
3282
|
},
|
|
3216
3283
|
coin.symbol
|
|
3217
3284
|
);
|
|
3218
3285
|
})
|
|
3219
3286
|
] }),
|
|
3220
|
-
/* @__PURE__ */ (0,
|
|
3221
|
-
/* @__PURE__ */ (0,
|
|
3222
|
-
tokensIsLoading && /* @__PURE__ */ (0,
|
|
3223
|
-
/* @__PURE__ */ (0,
|
|
3224
|
-
/* @__PURE__ */ (0,
|
|
3225
|
-
/* @__PURE__ */ (0,
|
|
3287
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h3", { className: "text-primary text-xl font-semibold", children: "All Tokens" }),
|
|
3288
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex max-h-[40vh] w-full flex-col gap-1 overflow-y-auto", children: [
|
|
3289
|
+
tokensIsLoading && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
|
|
3290
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
|
|
3291
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
|
|
3292
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
|
|
3226
3293
|
] }),
|
|
3227
|
-
filteredCoins.map((token) => /* @__PURE__ */ (0,
|
|
3294
|
+
filteredCoins.map((token) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
3228
3295
|
"button",
|
|
3229
3296
|
{
|
|
3230
3297
|
disabled: !userCoinSymbols.includes(token.symbol),
|
|
3231
3298
|
onClick: () => handleSelect(userCoins.find((c) => c.symbol === token.symbol)),
|
|
3232
3299
|
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",
|
|
3233
|
-
children: /* @__PURE__ */ (0,
|
|
3234
|
-
token.logoURI ? /* @__PURE__ */ (0,
|
|
3235
|
-
/* @__PURE__ */ (0,
|
|
3300
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
3301
|
+
token.logoURI ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("img", { className: "h-8 w-8 shrink-0", src: token.logoURI, alt: `${token.name} logo` }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "h-8 w-8 shrink-0 rounded-full bg-gray-400" }),
|
|
3302
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-sm font-medium", children: token.symbol })
|
|
3236
3303
|
] })
|
|
3237
3304
|
},
|
|
3238
3305
|
token.symbol
|
|
@@ -3245,44 +3312,44 @@ var CryptoSelectModal = import_nice_modal_react4.default.create(() => {
|
|
|
3245
3312
|
CryptoSelectModal.displayName = "CryptoSelectModal";
|
|
3246
3313
|
|
|
3247
3314
|
// src/components/CryptoTab/Crypto/SelectCoinButton.tsx
|
|
3248
|
-
var
|
|
3315
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
3249
3316
|
var SelectCoinButton = () => {
|
|
3250
3317
|
const openModal = () => {
|
|
3251
3318
|
import_nice_modal_react5.default.show(CryptoSelectModal);
|
|
3252
3319
|
};
|
|
3253
|
-
return /* @__PURE__ */ (0,
|
|
3254
|
-
/* @__PURE__ */ (0,
|
|
3255
|
-
/* @__PURE__ */ (0,
|
|
3256
|
-
/* @__PURE__ */ (0,
|
|
3257
|
-
/* @__PURE__ */ (0,
|
|
3320
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("button", { onClick: openModal, type: "button", className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
|
|
3321
|
+
/* @__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" }) }),
|
|
3322
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex h-full w-full items-center justify-between px-3", children: [
|
|
3323
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "font-medium text-black/50", children: "Select a token" }) }),
|
|
3324
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", { stroke: "#000", strokeLinecap: "round", d: "m6 12.43 4-4-4-4" }) })
|
|
3258
3325
|
] })
|
|
3259
3326
|
] });
|
|
3260
3327
|
};
|
|
3261
3328
|
|
|
3262
3329
|
// src/components/CryptoTab/Crypto/SelectedCoin.tsx
|
|
3263
|
-
var
|
|
3330
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
3264
3331
|
var SelectedCoin = (props) => {
|
|
3265
3332
|
const { coin, balance, logoURI } = props;
|
|
3266
3333
|
const Icon = getSymbolLogo(coin);
|
|
3267
|
-
return /* @__PURE__ */ (0,
|
|
3268
|
-
/* @__PURE__ */ (0,
|
|
3269
|
-
/* @__PURE__ */ (0,
|
|
3270
|
-
/* @__PURE__ */ (0,
|
|
3334
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
|
|
3335
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) }) }),
|
|
3336
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.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: [
|
|
3337
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-1", children: [
|
|
3271
3338
|
Icon,
|
|
3272
|
-
!Icon && logoURI && /* @__PURE__ */ (0,
|
|
3273
|
-
/* @__PURE__ */ (0,
|
|
3274
|
-
/* @__PURE__ */ (0,
|
|
3339
|
+
!Icon && logoURI && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("img", { className: "mr-1 h-8 w-8 shrink-0", src: logoURI, alt: `${coin} logo` }),
|
|
3340
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "font-semibold text-black", children: coin }),
|
|
3341
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.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_runtime37.jsx)("path", { d: "M6 12.4341L10 8.43408L6 4.43408", stroke: "black", strokeLinecap: "round" }) })
|
|
3275
3342
|
] }),
|
|
3276
|
-
/* @__PURE__ */ (0,
|
|
3343
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("p", { className: "text-xs font-medium text-black/50", children: [
|
|
3277
3344
|
"Wallet balance ",
|
|
3278
|
-
/* @__PURE__ */ (0,
|
|
3345
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-black", children: balance })
|
|
3279
3346
|
] })
|
|
3280
3347
|
] })
|
|
3281
3348
|
] });
|
|
3282
3349
|
};
|
|
3283
3350
|
|
|
3284
3351
|
// src/components/CryptoTab/Crypto/Crypto.tsx
|
|
3285
|
-
var
|
|
3352
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
3286
3353
|
var Crypto = () => {
|
|
3287
3354
|
const { address } = (0, import_wagmi4.useAccount)();
|
|
3288
3355
|
const { selectedPaymentMethod } = useSpreePaymentMethod();
|
|
@@ -3306,14 +3373,14 @@ var Crypto = () => {
|
|
|
3306
3373
|
(0, import_react15.useEffect)(() => {
|
|
3307
3374
|
register(handlePay);
|
|
3308
3375
|
}, [register, handlePay]);
|
|
3309
|
-
return /* @__PURE__ */ (0,
|
|
3310
|
-
/* @__PURE__ */ (0,
|
|
3311
|
-
/* @__PURE__ */ (0,
|
|
3312
|
-
/* @__PURE__ */ (0,
|
|
3376
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-col items-baseline gap-4", children: [
|
|
3377
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex w-full items-center justify-between gap-4", children: [
|
|
3378
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h3", { className: "text-primary text-xl leading-[1.7] font-semibold", children: "Pay with Crypto" }),
|
|
3379
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ConnectButton, {})
|
|
3313
3380
|
] }),
|
|
3314
|
-
!isWalletConnected && /* @__PURE__ */ (0,
|
|
3315
|
-
isWalletConnected && /* @__PURE__ */ (0,
|
|
3316
|
-
selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */ (0,
|
|
3381
|
+
!isWalletConnected && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Logos, {}),
|
|
3382
|
+
isWalletConnected && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
|
|
3383
|
+
selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
3317
3384
|
SelectedCoin,
|
|
3318
3385
|
{
|
|
3319
3386
|
coin: selectedPaymentMethod.method.symbol,
|
|
@@ -3321,13 +3388,13 @@ var Crypto = () => {
|
|
|
3321
3388
|
logoURI: selectedPaymentMethod.method.logoURI
|
|
3322
3389
|
}
|
|
3323
3390
|
),
|
|
3324
|
-
/* @__PURE__ */ (0,
|
|
3391
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SelectCoinButton, {})
|
|
3325
3392
|
] })
|
|
3326
3393
|
] });
|
|
3327
3394
|
};
|
|
3328
3395
|
|
|
3329
3396
|
// src/components/CryptoTab/Crypto/CryptoWrapper.tsx
|
|
3330
|
-
var
|
|
3397
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
3331
3398
|
var queryClient = new import_react_query.QueryClient();
|
|
3332
3399
|
var CHAINS = [import_chains.base];
|
|
3333
3400
|
var wagmiConfigCache = /* @__PURE__ */ new Map();
|
|
@@ -3342,36 +3409,34 @@ function getCachedWagmiConfig(projectId, appName) {
|
|
|
3342
3409
|
}
|
|
3343
3410
|
var CryptoWrapper = () => {
|
|
3344
3411
|
const { spreePayConfig, configIsLoading } = useSpreePayConfig();
|
|
3345
|
-
const
|
|
3346
|
-
|
|
3347
|
-
|
|
3348
|
-
const cfg2 = getCachedWagmiConfig(spreePayConfig.rainbowProjectId, spreePayConfig.rainbowAppName);
|
|
3349
|
-
setWagmiConfig((prev) => prev ? prev : cfg2);
|
|
3412
|
+
const wagmiConfig = (0, import_react16.useMemo)(() => {
|
|
3413
|
+
if (!spreePayConfig) return null;
|
|
3414
|
+
return getCachedWagmiConfig(spreePayConfig.rainbowProjectId, spreePayConfig.rainbowAppName);
|
|
3350
3415
|
}, [spreePayConfig]);
|
|
3351
3416
|
if (configIsLoading || !wagmiConfig) return null;
|
|
3352
|
-
return /* @__PURE__ */ (0,
|
|
3417
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_wagmi5.WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_rainbowkit2.RainbowKitProvider, { theme: (0, import_rainbowkit2.lightTheme)({ borderRadius: "large" }), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_nice_modal_react6.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Crypto, {}) }) }) }) });
|
|
3353
3418
|
};
|
|
3354
3419
|
|
|
3355
3420
|
// src/components/CryptoTab/CryptoTab.tsx
|
|
3356
|
-
var
|
|
3421
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
3357
3422
|
var CryptoTab = () => {
|
|
3358
3423
|
const { spreePayConfig } = useSpreePayConfig();
|
|
3359
|
-
return /* @__PURE__ */ (0,
|
|
3360
|
-
/* @__PURE__ */ (0,
|
|
3361
|
-
/* @__PURE__ */ (0,
|
|
3424
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { children: [
|
|
3425
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(CryptoWrapper, {}) }),
|
|
3426
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PointsSwitch, { disabled: true, message: spreePayConfig?.crypto.pointsInfoMessage }) })
|
|
3362
3427
|
] });
|
|
3363
3428
|
};
|
|
3364
3429
|
|
|
3365
3430
|
// src/components/TabButtons.tsx
|
|
3366
|
-
var
|
|
3367
|
-
var TabButton = ({ isDisabled =
|
|
3368
|
-
return /* @__PURE__ */ (0,
|
|
3431
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
3432
|
+
var TabButton = ({ isDisabled = false, isActive, children, onClick }) => {
|
|
3433
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
3369
3434
|
"button",
|
|
3370
3435
|
{
|
|
3371
3436
|
disabled: isDisabled,
|
|
3372
3437
|
onClick,
|
|
3373
3438
|
className: cn(
|
|
3374
|
-
"flex w-[132px] flex-col items-baseline rounded-sm border
|
|
3439
|
+
"flex w-[132px] flex-col items-baseline rounded-sm border border-black/50 px-2.5 py-1.5 text-sm text-black",
|
|
3375
3440
|
{ "opacity-50": !isActive || isDisabled },
|
|
3376
3441
|
{ "cursor-not-allowed": isDisabled },
|
|
3377
3442
|
{ "bg-primary/7 border-primary text-primary": isActive }
|
|
@@ -3382,83 +3447,71 @@ var TabButton = ({ isDisabled = true, isActive, children, onClick }) => {
|
|
|
3382
3447
|
};
|
|
3383
3448
|
var TabButtons = (props) => {
|
|
3384
3449
|
const { value, onChange } = props;
|
|
3385
|
-
const { spreePayConfig } = useSpreePayConfig();
|
|
3450
|
+
const { spreePayConfig, configIsLoading } = useSpreePayConfig();
|
|
3386
3451
|
const handleChange = (type) => () => {
|
|
3387
3452
|
if (value !== type) {
|
|
3388
3453
|
onChange({ type, method: null });
|
|
3389
3454
|
}
|
|
3390
3455
|
};
|
|
3391
|
-
return /* @__PURE__ */ (0,
|
|
3392
|
-
/* @__PURE__ */ (0,
|
|
3393
|
-
|
|
3394
|
-
{
|
|
3395
|
-
|
|
3396
|
-
|
|
3397
|
-
|
|
3398
|
-
|
|
3399
|
-
|
|
3400
|
-
|
|
3401
|
-
|
|
3402
|
-
|
|
3403
|
-
|
|
3404
|
-
|
|
3405
|
-
|
|
3406
|
-
|
|
3407
|
-
|
|
3408
|
-
|
|
3409
|
-
|
|
3410
|
-
|
|
3411
|
-
|
|
3412
|
-
|
|
3413
|
-
|
|
3414
|
-
|
|
3415
|
-
|
|
3416
|
-
|
|
3417
|
-
|
|
3418
|
-
|
|
3419
|
-
|
|
3420
|
-
|
|
3421
|
-
|
|
3422
|
-
|
|
3423
|
-
|
|
3424
|
-
|
|
3425
|
-
|
|
3426
|
-
"path",
|
|
3427
|
-
{
|
|
3428
|
-
fill: "currentColor",
|
|
3429
|
-
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"
|
|
3430
|
-
}
|
|
3431
|
-
),
|
|
3432
|
-
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "2" })
|
|
3433
|
-
] }),
|
|
3434
|
-
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-sm font-medium", children: "Crypto" })
|
|
3435
|
-
]
|
|
3436
|
-
}
|
|
3437
|
-
)
|
|
3456
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex gap-2", children: [
|
|
3457
|
+
configIsLoading && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
|
|
3458
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "bg-primary/7 h-[58px] w-[132px] animate-pulse rounded-sm" }),
|
|
3459
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "bg-primary/7 h-[58px] w-[132px] animate-pulse rounded-sm" })
|
|
3460
|
+
] }),
|
|
3461
|
+
spreePayConfig?.creditCard.enabled && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(TabButton, { onClick: handleChange("CREDIT_CARD" /* CREDIT_CARD */), isActive: value === "CREDIT_CARD" /* CREDIT_CARD */, children: [
|
|
3462
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
3463
|
+
"path",
|
|
3464
|
+
{
|
|
3465
|
+
fill: "currentColor",
|
|
3466
|
+
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"
|
|
3467
|
+
}
|
|
3468
|
+
) }),
|
|
3469
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-sm font-medium", children: "Card" })
|
|
3470
|
+
] }),
|
|
3471
|
+
spreePayConfig?.crypto.enabled && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(TabButton, { onClick: handleChange("CRYPTO" /* CRYPTO */), isActive: value === "CRYPTO" /* CRYPTO */, children: [
|
|
3472
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("svg", { className: "my-1", xmlns: "http://www.w3.org/2000/svg", width: "30", height: "16", fill: "none", children: [
|
|
3473
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
3474
|
+
"path",
|
|
3475
|
+
{
|
|
3476
|
+
fill: "currentColor",
|
|
3477
|
+
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"
|
|
3478
|
+
}
|
|
3479
|
+
),
|
|
3480
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
3481
|
+
"path",
|
|
3482
|
+
{
|
|
3483
|
+
fill: "currentColor",
|
|
3484
|
+
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"
|
|
3485
|
+
}
|
|
3486
|
+
),
|
|
3487
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "2" })
|
|
3488
|
+
] }),
|
|
3489
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-sm font-medium", children: "Crypto" })
|
|
3490
|
+
] })
|
|
3438
3491
|
] });
|
|
3439
3492
|
};
|
|
3440
3493
|
|
|
3441
3494
|
// src/components/Tabs.tsx
|
|
3442
|
-
var
|
|
3495
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
3443
3496
|
var Tabs = () => {
|
|
3444
3497
|
const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
|
|
3445
|
-
return /* @__PURE__ */ (0,
|
|
3446
|
-
/* @__PURE__ */ (0,
|
|
3447
|
-
/* @__PURE__ */ (0,
|
|
3448
|
-
/* @__PURE__ */ (0,
|
|
3498
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "mb-4 rounded-3xl border border-black/25 bg-white", children: [
|
|
3499
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.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: [
|
|
3500
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h2", { className: "text-primary text-2xl font-semibold", children: "Choose a Payment Method" }),
|
|
3501
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
|
|
3449
3502
|
] }),
|
|
3450
|
-
selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ (0,
|
|
3451
|
-
selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ (0,
|
|
3503
|
+
selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(CreditCardTab, {}),
|
|
3504
|
+
selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(CryptoTab, {})
|
|
3452
3505
|
] });
|
|
3453
3506
|
};
|
|
3454
3507
|
|
|
3455
3508
|
// src/SpreePayContent.tsx
|
|
3456
|
-
var
|
|
3509
|
+
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
3457
3510
|
var SpreePayContent = ({ isLoggedIn }) => {
|
|
3458
|
-
return /* @__PURE__ */ (0,
|
|
3459
|
-
/* @__PURE__ */ (0,
|
|
3460
|
-
/* @__PURE__ */ (0,
|
|
3461
|
-
/* @__PURE__ */ (0,
|
|
3511
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "w-full", children: [
|
|
3512
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Tabs, {}),
|
|
3513
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(CheckoutButton, { isLoggedIn }),
|
|
3514
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SpreeLegal, {})
|
|
3462
3515
|
] });
|
|
3463
3516
|
};
|
|
3464
3517
|
|
|
@@ -3471,6 +3524,8 @@ function useKeycloakSSO(config) {
|
|
|
3471
3524
|
const initRef = (0, import_react17.useRef)(false);
|
|
3472
3525
|
const kcRef = (0, import_react17.useRef)(null);
|
|
3473
3526
|
const refreshTimerRef = (0, import_react17.useRef)(null);
|
|
3527
|
+
const scheduleRefreshRef = (0, import_react17.useRef)(() => {
|
|
3528
|
+
});
|
|
3474
3529
|
const [error, setError] = (0, import_react17.useState)(null);
|
|
3475
3530
|
const [isChecking, setIsChecking] = (0, import_react17.useState)(enabled);
|
|
3476
3531
|
const [accessToken, setAccessToken] = (0, import_react17.useState)(null);
|
|
@@ -3488,17 +3543,19 @@ function useKeycloakSSO(config) {
|
|
|
3488
3543
|
kc.updateToken(refreshAheadSeconds).then((refreshed) => {
|
|
3489
3544
|
if (refreshed) {
|
|
3490
3545
|
setAccessToken(kc.token ?? null);
|
|
3491
|
-
|
|
3546
|
+
scheduleRefreshRef.current();
|
|
3492
3547
|
}
|
|
3493
3548
|
}).catch((_) => {
|
|
3494
3549
|
kc.login().catch(console.error);
|
|
3495
3550
|
});
|
|
3496
3551
|
}, delayMs);
|
|
3497
3552
|
}, []);
|
|
3553
|
+
(0, import_react17.useEffect)(() => {
|
|
3554
|
+
scheduleRefreshRef.current = scheduleRefresh;
|
|
3555
|
+
}, [scheduleRefresh]);
|
|
3498
3556
|
(0, import_react17.useEffect)(() => {
|
|
3499
3557
|
if (initRef.current || !enabled) return;
|
|
3500
3558
|
initRef.current = true;
|
|
3501
|
-
setIsChecking(true);
|
|
3502
3559
|
const kc = new import_keycloak_js.default({ url, realm, clientId });
|
|
3503
3560
|
kcRef.current = kc;
|
|
3504
3561
|
kc.onTokenExpired = () => {
|
|
@@ -3530,13 +3587,12 @@ function useKeycloakSSO(config) {
|
|
|
3530
3587
|
}
|
|
3531
3588
|
|
|
3532
3589
|
// src/SpreePay.tsx
|
|
3533
|
-
var
|
|
3590
|
+
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
3534
3591
|
var SpreePayInner = () => {
|
|
3535
|
-
const rootRef = (0, import_react18.useRef)(null);
|
|
3536
3592
|
const [portalEl, setPortalEl] = (0, import_react18.useState)(null);
|
|
3537
|
-
(0, import_react18.
|
|
3538
|
-
if (!
|
|
3539
|
-
const el =
|
|
3593
|
+
const rootRef = (0, import_react18.useCallback)((node) => {
|
|
3594
|
+
if (!node) return;
|
|
3595
|
+
const el = node.querySelector(":scope > .sl-spreepay__portal");
|
|
3540
3596
|
setPortalEl(el ?? null);
|
|
3541
3597
|
}, []);
|
|
3542
3598
|
(0, import_react18.useEffect)(() => {
|
|
@@ -3544,7 +3600,7 @@ var SpreePayInner = () => {
|
|
|
3544
3600
|
}, []);
|
|
3545
3601
|
const { env } = useSpreePayEnv();
|
|
3546
3602
|
const { staticConfig, appProps } = useStaticConfig();
|
|
3547
|
-
const tenantId = env?.tenantId
|
|
3603
|
+
const tenantId = env?.tenantId;
|
|
3548
3604
|
const { isChecking, accessToken } = useKeycloakSSO({
|
|
3549
3605
|
realm: tenantId,
|
|
3550
3606
|
url: staticConfig.keycloakUrl,
|
|
@@ -3564,13 +3620,13 @@ var SpreePayInner = () => {
|
|
|
3564
3620
|
}, [_accessToken, staticConfig, tenantId]);
|
|
3565
3621
|
const getContent = () => {
|
|
3566
3622
|
if (isChecking) {
|
|
3567
|
-
return /* @__PURE__ */ (0,
|
|
3568
|
-
/* @__PURE__ */ (0,
|
|
3569
|
-
/* @__PURE__ */ (0,
|
|
3570
|
-
/* @__PURE__ */ (0,
|
|
3623
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex w-full flex-col", children: [
|
|
3624
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "bg-primary/8 mb-4 h-[315px] animate-pulse rounded-3xl" }),
|
|
3625
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "bg-primary/8 h-[135px] animate-pulse rounded-3xl" }),
|
|
3626
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(SpreeLegal, {})
|
|
3571
3627
|
] });
|
|
3572
3628
|
}
|
|
3573
|
-
return /* @__PURE__ */ (0,
|
|
3629
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
3574
3630
|
import_swr5.SWRConfig,
|
|
3575
3631
|
{
|
|
3576
3632
|
value: {
|
|
@@ -3579,17 +3635,17 @@ var SpreePayInner = () => {
|
|
|
3579
3635
|
revalidateOnFocus: false,
|
|
3580
3636
|
revalidateIfStale: false
|
|
3581
3637
|
},
|
|
3582
|
-
children: /* @__PURE__ */ (0,
|
|
3638
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_nice_modal_react7.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(SpreePayContent, { isLoggedIn: Boolean(_accessToken) }) }) })
|
|
3583
3639
|
}
|
|
3584
3640
|
);
|
|
3585
3641
|
};
|
|
3586
|
-
return /* @__PURE__ */ (0,
|
|
3587
|
-
/* @__PURE__ */ (0,
|
|
3642
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { ref: rootRef, className: cn("sl-spreepay", appProps.className), children: [
|
|
3643
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "sl-spreepay__portal" }),
|
|
3588
3644
|
getContent()
|
|
3589
3645
|
] });
|
|
3590
3646
|
};
|
|
3591
3647
|
var SpreePay = (props) => {
|
|
3592
|
-
return /* @__PURE__ */ (0,
|
|
3648
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(StaticConfigProvider, { props, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(SpreePayInner, {}) });
|
|
3593
3649
|
};
|
|
3594
3650
|
|
|
3595
3651
|
// src/hooks/useCapture3DS.ts
|