@superlogic/spree-pay 0.1.34 → 0.1.36
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 +434 -373
- package/build/index.css +133 -131
- package/build/index.d.cts +5 -2
- package/build/index.d.ts +5 -2
- package/build/index.js +478 -417
- package/package.json +19 -19
package/build/index.cjs
CHANGED
|
@@ -40,11 +40,11 @@ module.exports = __toCommonJS(index_exports);
|
|
|
40
40
|
|
|
41
41
|
// src/SpreePay.tsx
|
|
42
42
|
var import_react18 = require("react");
|
|
43
|
-
var
|
|
43
|
+
var import_nice_modal_react8 = __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.36";
|
|
48
48
|
|
|
49
49
|
// src/context/SpreePayActionsContext.tsx
|
|
50
50
|
var import_react = require("react");
|
|
@@ -139,8 +139,9 @@ var useSpreePayRegister = () => {
|
|
|
139
139
|
|
|
140
140
|
// src/context/StaticConfigContext.tsx
|
|
141
141
|
var import_react2 = require("react");
|
|
142
|
-
|
|
143
|
-
|
|
142
|
+
|
|
143
|
+
// src/context/config.ts
|
|
144
|
+
var config = {
|
|
144
145
|
dev: {
|
|
145
146
|
bookit: {
|
|
146
147
|
slapiUrl: "https://slapi.dev.superlogic.com",
|
|
@@ -156,6 +157,16 @@ var CONFIG = {
|
|
|
156
157
|
slapiUrl: "https://slapi.dev.superlogic.com",
|
|
157
158
|
keycloakUrl: "https://sso.dev.tickets.qiibeefoundation.org",
|
|
158
159
|
keycloakClientId: "oneof-next"
|
|
160
|
+
},
|
|
161
|
+
umhp: {
|
|
162
|
+
slapiUrl: "https://slapi.dev.umusicpassport.com",
|
|
163
|
+
keycloakUrl: "https://auth.dev.umusicpassport.com",
|
|
164
|
+
keycloakClientId: "oneof-next"
|
|
165
|
+
},
|
|
166
|
+
cdc: {
|
|
167
|
+
slapiUrl: "https://slapi.dev.superlogic.com",
|
|
168
|
+
keycloakUrl: "https://auth.dev02.superlogic.com",
|
|
169
|
+
keycloakClientId: "oneof-next"
|
|
159
170
|
}
|
|
160
171
|
},
|
|
161
172
|
stg: {
|
|
@@ -173,6 +184,16 @@ var CONFIG = {
|
|
|
173
184
|
slapiUrl: "https://slapi.stg.tickets.qiibeefoundation.org",
|
|
174
185
|
keycloakUrl: "https://sso.stg.tickets.qiibeefoundation.org",
|
|
175
186
|
keycloakClientId: "oneof-next"
|
|
187
|
+
},
|
|
188
|
+
umhp: {
|
|
189
|
+
slapiUrl: "https://slapi.stg.umusicpassport.com",
|
|
190
|
+
keycloakUrl: "https://auth.stg.umusicpassport.com",
|
|
191
|
+
keycloakClientId: "oneof-next"
|
|
192
|
+
},
|
|
193
|
+
cdc: {
|
|
194
|
+
slapiUrl: "https://slapi.stg.superlogic.com",
|
|
195
|
+
keycloakUrl: "https://auth.stg02.superlogic.com",
|
|
196
|
+
keycloakClientId: "oneof-next"
|
|
176
197
|
}
|
|
177
198
|
},
|
|
178
199
|
prod: {
|
|
@@ -190,9 +211,22 @@ var CONFIG = {
|
|
|
190
211
|
slapiUrl: "https://slapi.tickets.qiibeefoundation.org",
|
|
191
212
|
keycloakUrl: "https://sso.tickets.qiibeefoundation.org",
|
|
192
213
|
keycloakClientId: "oneof-next"
|
|
214
|
+
},
|
|
215
|
+
umhp: {
|
|
216
|
+
slapiUrl: "https://slapi.umusicpassport.com",
|
|
217
|
+
keycloakUrl: "https://auth.umusicpassport.com",
|
|
218
|
+
keycloakClientId: "oneof-next"
|
|
219
|
+
},
|
|
220
|
+
cdc: {
|
|
221
|
+
slapiUrl: "https://slapi.superlogic.com",
|
|
222
|
+
keycloakUrl: "https://auth.superlogic.com",
|
|
223
|
+
keycloakClientId: "oneof-next"
|
|
193
224
|
}
|
|
194
225
|
}
|
|
195
226
|
};
|
|
227
|
+
|
|
228
|
+
// src/context/StaticConfigContext.tsx
|
|
229
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
196
230
|
var StaticConfigContext = (0, import_react2.createContext)(null);
|
|
197
231
|
var StaticConfigProvider = ({ children, props }) => {
|
|
198
232
|
const { env } = useSpreePayEnv();
|
|
@@ -201,8 +235,12 @@ var StaticConfigProvider = ({ children, props }) => {
|
|
|
201
235
|
setAppProps(props);
|
|
202
236
|
}, [props]);
|
|
203
237
|
const staticConfig = (0, import_react2.useMemo)(() => {
|
|
204
|
-
const envConfig =
|
|
205
|
-
const
|
|
238
|
+
const envConfig = config[env.environment];
|
|
239
|
+
const isKnownTenant = env.tenantId in envConfig;
|
|
240
|
+
if (!isKnownTenant) {
|
|
241
|
+
console.warn(`[spree-pay] Unknown tenantId "${env.tenantId}", falling back to "moca"`);
|
|
242
|
+
}
|
|
243
|
+
const appKey = isKnownTenant ? env.tenantId : "moca";
|
|
206
244
|
return envConfig[appKey];
|
|
207
245
|
}, [env.environment, env.tenantId]);
|
|
208
246
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StaticConfigContext.Provider, { value: { staticConfig, appProps }, children });
|
|
@@ -370,50 +408,38 @@ var CheckoutButton = ({ isLoggedIn }) => {
|
|
|
370
408
|
}
|
|
371
409
|
return "Checkout";
|
|
372
410
|
};
|
|
373
|
-
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex w-full flex-col
|
|
374
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.
|
|
411
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex w-full flex-col gap-4 bg-white p-6 text-xs font-medium text-[#45505B] md:px-7", children: [
|
|
412
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { className: "text-center", children: [
|
|
375
413
|
"By clicking on the button below I acknowledge that I have read and accepted the",
|
|
376
414
|
" ",
|
|
377
415
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("a", { className: "underline", href: spreePayConfig?.termsConditionsUrl, target: "_blank", rel: "noreferrer", children: "Terms and Conditions" }),
|
|
378
416
|
"."
|
|
379
|
-
] })
|
|
417
|
+
] }),
|
|
380
418
|
isLoggedIn ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: onProcess && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
381
419
|
"button",
|
|
382
420
|
{
|
|
383
421
|
disabled: isDisabled,
|
|
384
422
|
onClick: onProcess,
|
|
385
|
-
className: "bg-primary
|
|
423
|
+
className: "bg-primary w-full cursor-pointer rounded-4xl p-4 text-xl leading-6 font-medium text-white disabled:cursor-not-allowed disabled:opacity-50",
|
|
386
424
|
children: getCheckoutContent()
|
|
387
425
|
}
|
|
388
426
|
) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
389
427
|
"a",
|
|
390
428
|
{
|
|
391
429
|
href: `${staticConfig.keycloakUrl}/realms/${env.tenantId}/protocol/openid-connect/auth?client_id=${staticConfig.keycloakClientId}&response_type=code&redirect_uri=${window.location.href}`,
|
|
392
|
-
className: "bg-primary
|
|
430
|
+
className: "bg-primary w-full cursor-pointer rounded-4xl p-4 text-center text-xl leading-6 font-medium text-white disabled:cursor-not-allowed disabled:opacity-50",
|
|
393
431
|
children: "Log in / Sign up for an AIR account"
|
|
394
432
|
}
|
|
395
|
-
)
|
|
396
|
-
|
|
397
|
-
}
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
{
|
|
406
|
-
fill: "#000",
|
|
407
|
-
fillOpacity: ".5",
|
|
408
|
-
d: "M57.79 25.48a4.82 4.82 0 0 1-1.55-.25l.55-1.86c.34.1.65.15.92.15s.51-.1.72-.26c.21-.16.39-.43.53-.81l.2-.55-3.65-10.3h2.52l2.32 7.62h.1l2.34-7.62h2.53l-4.04 11.31c-.19.54-.44 1-.75 1.38-.31.38-.7.68-1.14.88-.45.2-.98.3-1.6.3ZM48.95 21.9a4.2 4.2 0 0 1-1.73-.35c-.5-.23-.9-.57-1.2-1.02a3 3 0 0 1-.44-1.67 2.44 2.44 0 0 1 1.18-2.3c.35-.23.76-.4 1.22-.5.46-.13.93-.21 1.42-.27l1.44-.16c.37-.05.64-.13.8-.24.18-.1.26-.27.26-.5v-.04c0-.5-.15-.88-.44-1.15-.3-.27-.72-.4-1.27-.4-.58 0-1.04.12-1.38.37-.34.26-.57.56-.69.9l-2.22-.31a3.54 3.54 0 0 1 2.35-2.47 6.29 6.29 0 0 1 3.38-.14c.48.1.92.3 1.32.56.4.26.72.6.96 1.06.25.44.37 1 .37 1.67v6.75h-2.29v-1.38h-.08a2.9 2.9 0 0 1-1.59 1.37c-.39.14-.84.22-1.37.22Zm.62-1.75c.48 0 .89-.1 1.24-.28.35-.2.62-.45.8-.77.2-.31.3-.65.3-1.03V16.9c-.08.06-.2.11-.38.17a18.34 18.34 0 0 1-1.8.32c-.36.05-.68.12-.96.23-.28.11-.5.27-.66.46-.16.2-.24.45-.24.75 0 .44.16.77.48 1 .32.22.72.33 1.22.33ZM34.43 21.7V8.23h5.05c1.03 0 1.9.2 2.6.58.7.38 1.23.91 1.6 1.59.36.67.54 1.43.54 2.28 0 .87-.18 1.63-.55 2.3a3.9 3.9 0 0 1-1.6 1.59c-.72.38-1.59.57-2.63.57H36.1v-2h3.01c.6 0 1.1-.11 1.49-.32.38-.21.67-.5.85-.87.2-.37.29-.79.29-1.27 0-.47-.1-.9-.29-1.26a1.92 1.92 0 0 0-.86-.84c-.38-.2-.88-.31-1.49-.31h-2.23v11.41h-2.44ZM14.54.46a14.54 14.54 0 1 1 0 29.08 14.54 14.54 0 0 1 0-29.08ZM5.59 18.12l-.84 3.35h.83l.84-3.35h-.83Zm1.66 0-.83 3.35h1.66l.84-3.35H7.25Zm3.35-9.58c-1.03 0-2.08.84-2.34 1.87l-1.1 4.4c-.26 1.03.37 1.87 1.4 1.87h9.64l-.34 1.44h-8.1l-.85 3.35h9.6c1.04 0 2.1-.85 2.35-1.89l1.05-4.4c.25-1.03-.38-1.85-1.4-1.85h-9.63l.36-1.44h8.13l.84-3.35H10.6Zm10.44 0-.84 3.35h1.67l.83-3.35h-1.66Zm2.5 0-.84 3.35h.83l.84-3.35h-.83Z"
|
|
409
|
-
}
|
|
410
|
-
) }),
|
|
411
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "text-xs text-black/50", children: [
|
|
412
|
-
"Spree enables seamless crypto payments for real-world goods, travel, and experiences. Enjoy secure, fast transactions and earn rewards.",
|
|
413
|
-
" ",
|
|
414
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("a", { className: "underline", href: "https://www.spree.finance/", target: "_blank", rel: "noreferrer", children: "Learn more" }),
|
|
415
|
-
" ",
|
|
416
|
-
"about Spree."
|
|
433
|
+
),
|
|
434
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("a", { href: "https://www.spree.finance/", className: "flex items-center justify-center gap-2 hover:underline", children: [
|
|
435
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { children: "Powered by" }),
|
|
436
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "shrink-0", xmlns: "http://www.w3.org/2000/svg", width: "66", height: "30", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
437
|
+
"path",
|
|
438
|
+
{
|
|
439
|
+
fill: "currentColor",
|
|
440
|
+
d: "M57.79 25.48a4.82 4.82 0 0 1-1.55-.25l.55-1.86c.34.1.65.15.92.15s.51-.1.72-.26c.21-.16.39-.43.53-.81l.2-.55-3.65-10.3h2.52l2.32 7.62h.1l2.34-7.62h2.53l-4.04 11.31c-.19.54-.44 1-.75 1.38-.31.38-.7.68-1.14.88-.45.2-.98.3-1.6.3ZM48.95 21.9a4.2 4.2 0 0 1-1.73-.35c-.5-.23-.9-.57-1.2-1.02a3 3 0 0 1-.44-1.67 2.44 2.44 0 0 1 1.18-2.3c.35-.23.76-.4 1.22-.5.46-.13.93-.21 1.42-.27l1.44-.16c.37-.05.64-.13.8-.24.18-.1.26-.27.26-.5v-.04c0-.5-.15-.88-.44-1.15-.3-.27-.72-.4-1.27-.4-.58 0-1.04.12-1.38.37-.34.26-.57.56-.69.9l-2.22-.31a3.54 3.54 0 0 1 2.35-2.47 6.29 6.29 0 0 1 3.38-.14c.48.1.92.3 1.32.56.4.26.72.6.96 1.06.25.44.37 1 .37 1.67v6.75h-2.29v-1.38h-.08a2.9 2.9 0 0 1-1.59 1.37c-.39.14-.84.22-1.37.22Zm.62-1.75c.48 0 .89-.1 1.24-.28.35-.2.62-.45.8-.77.2-.31.3-.65.3-1.03V16.9c-.08.06-.2.11-.38.17a18.34 18.34 0 0 1-1.8.32c-.36.05-.68.12-.96.23-.28.11-.5.27-.66.46-.16.2-.24.45-.24.75 0 .44.16.77.48 1 .32.22.72.33 1.22.33ZM34.43 21.7V8.23h5.05c1.03 0 1.9.2 2.6.58.7.38 1.23.91 1.6 1.59.36.67.54 1.43.54 2.28 0 .87-.18 1.63-.55 2.3a3.9 3.9 0 0 1-1.6 1.59c-.72.38-1.59.57-2.63.57H36.1v-2h3.01c.6 0 1.1-.11 1.49-.32.38-.21.67-.5.85-.87.2-.37.29-.79.29-1.27 0-.47-.1-.9-.29-1.26a1.92 1.92 0 0 0-.86-.84c-.38-.2-.88-.31-1.49-.31h-2.23v11.41h-2.44ZM14.54.46a14.54 14.54 0 1 1 0 29.08 14.54 14.54 0 0 1 0-29.08ZM5.59 18.12l-.84 3.35h.83l.84-3.35h-.83Zm1.66 0-.83 3.35h1.66l.84-3.35H7.25Zm3.35-9.58c-1.03 0-2.08.84-2.34 1.87l-1.1 4.4c-.26 1.03.37 1.87 1.4 1.87h9.64l-.34 1.44h-8.1l-.85 3.35h9.6c1.04 0 2.1-.85 2.35-1.89l1.05-4.4c.25-1.03-.38-1.85-1.4-1.85h-9.63l.36-1.44h8.13l.84-3.35H10.6Zm10.44 0-.84 3.35h1.67l.83-3.35h-1.66Zm2.5 0-.84 3.35h.83l.84-3.35h-.83Z"
|
|
441
|
+
}
|
|
442
|
+
) })
|
|
417
443
|
] })
|
|
418
444
|
] });
|
|
419
445
|
};
|
|
@@ -460,17 +486,17 @@ function usePortalContainer() {
|
|
|
460
486
|
}
|
|
461
487
|
|
|
462
488
|
// src/ui/dialog.tsx
|
|
463
|
-
var
|
|
489
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
464
490
|
function Dialog({ ...props }) {
|
|
465
|
-
return /* @__PURE__ */ (0,
|
|
491
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
|
|
466
492
|
}
|
|
467
493
|
function DialogPortal({ ...props }) {
|
|
468
494
|
const container = usePortalContainer();
|
|
469
495
|
const safeContainer = container && document.body.contains(container) ? container : void 0;
|
|
470
|
-
return /* @__PURE__ */ (0,
|
|
496
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogPrimitive.Portal, { container: safeContainer, "data-slot": "dialog-portal", ...props });
|
|
471
497
|
}
|
|
472
498
|
function DialogOverlay({ className, ...props }) {
|
|
473
|
-
return /* @__PURE__ */ (0,
|
|
499
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
474
500
|
DialogPrimitive.Overlay,
|
|
475
501
|
{
|
|
476
502
|
"data-slot": "dialog-overlay",
|
|
@@ -488,9 +514,9 @@ function DialogContent({
|
|
|
488
514
|
showCloseButton = true,
|
|
489
515
|
...props
|
|
490
516
|
}) {
|
|
491
|
-
return /* @__PURE__ */ (0,
|
|
492
|
-
/* @__PURE__ */ (0,
|
|
493
|
-
/* @__PURE__ */ (0,
|
|
517
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(DialogPortal, { "data-slot": "dialog-portal", children: [
|
|
518
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogOverlay, {}),
|
|
519
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
494
520
|
DialogPrimitive.Content,
|
|
495
521
|
{
|
|
496
522
|
"data-slot": "dialog-content",
|
|
@@ -501,14 +527,14 @@ function DialogContent({
|
|
|
501
527
|
...props,
|
|
502
528
|
children: [
|
|
503
529
|
children,
|
|
504
|
-
showCloseButton && /* @__PURE__ */ (0,
|
|
530
|
+
showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
505
531
|
DialogPrimitive.Close,
|
|
506
532
|
{
|
|
507
533
|
"data-slot": "dialog-close",
|
|
508
534
|
className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
509
535
|
children: [
|
|
510
|
-
/* @__PURE__ */ (0,
|
|
511
|
-
/* @__PURE__ */ (0,
|
|
536
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react.XIcon, {}),
|
|
537
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "sr-only", children: "Close" })
|
|
512
538
|
]
|
|
513
539
|
}
|
|
514
540
|
)
|
|
@@ -518,7 +544,7 @@ function DialogContent({
|
|
|
518
544
|
] });
|
|
519
545
|
}
|
|
520
546
|
function DialogTitle({ className, ...props }) {
|
|
521
|
-
return /* @__PURE__ */ (0,
|
|
547
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
522
548
|
DialogPrimitive.Title,
|
|
523
549
|
{
|
|
524
550
|
"data-slot": "dialog-title",
|
|
@@ -528,7 +554,7 @@ function DialogTitle({ className, ...props }) {
|
|
|
528
554
|
);
|
|
529
555
|
}
|
|
530
556
|
function DialogDescription({ className, ...props }) {
|
|
531
|
-
return /* @__PURE__ */ (0,
|
|
557
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
532
558
|
DialogPrimitive.Description,
|
|
533
559
|
{
|
|
534
560
|
"data-slot": "dialog-description",
|
|
@@ -539,7 +565,7 @@ function DialogDescription({ className, ...props }) {
|
|
|
539
565
|
}
|
|
540
566
|
|
|
541
567
|
// src/modals/Iframe3ds.tsx
|
|
542
|
-
var
|
|
568
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
543
569
|
var Iframe3ds = import_nice_modal_react.default.create(({ url }) => {
|
|
544
570
|
const modal = (0, import_nice_modal_react.useModal)();
|
|
545
571
|
(0, import_react4.useEffect)(() => {
|
|
@@ -552,9 +578,9 @@ var Iframe3ds = import_nice_modal_react.default.create(({ url }) => {
|
|
|
552
578
|
modal.reject();
|
|
553
579
|
modal.remove();
|
|
554
580
|
};
|
|
555
|
-
return /* @__PURE__ */ (0,
|
|
556
|
-
/* @__PURE__ */ (0,
|
|
557
|
-
/* @__PURE__ */ (0,
|
|
581
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Dialog, { open: modal.visible, onOpenChange: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(DialogContent, { className: "max-h-[600px] w-full max-w-[680px] p-0", children: [
|
|
582
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DialogTitle, { className: "hidden", children: "3D Secure Verification" }),
|
|
583
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("iframe", { src: url, id: "3ds-iframe", title: "3D Secure Checkout", className: "h-[500px] w-full rounded-lg border-0" })
|
|
558
584
|
] }) });
|
|
559
585
|
});
|
|
560
586
|
Iframe3ds.displayName = "Iframe3ds";
|
|
@@ -625,10 +651,10 @@ var slapiApi = {
|
|
|
625
651
|
throw new Error("slapiApi is not configured. Call registerApi(...) first.");
|
|
626
652
|
}
|
|
627
653
|
};
|
|
628
|
-
var registerApi = (
|
|
629
|
-
cfg.baseUrl =
|
|
630
|
-
cfg.accessToken =
|
|
631
|
-
cfg.tenantId =
|
|
654
|
+
var registerApi = (config2) => {
|
|
655
|
+
cfg.baseUrl = config2.baseUrl;
|
|
656
|
+
cfg.accessToken = config2.accessToken;
|
|
657
|
+
cfg.tenantId = config2.tenantId;
|
|
632
658
|
slapiApi = {
|
|
633
659
|
get: async (key) => {
|
|
634
660
|
const url = buildUrl(key);
|
|
@@ -918,6 +944,7 @@ var usePointsPayment = (mode = "web2") => {
|
|
|
918
944
|
};
|
|
919
945
|
|
|
920
946
|
// src/hooks/payments/useSplitCardPayments.ts
|
|
947
|
+
var import_nice_modal_react4 = __toESM(require("@ebay/nice-modal-react"), 1);
|
|
921
948
|
var useSplitCardPayments = (mode = "web2") => {
|
|
922
949
|
const { selectedPaymentMethod } = useSpreePaymentMethod();
|
|
923
950
|
const { env } = useSpreePayEnv();
|
|
@@ -952,6 +979,12 @@ var useSplitCardPayments = (mode = "web2") => {
|
|
|
952
979
|
amount: points
|
|
953
980
|
}
|
|
954
981
|
});
|
|
982
|
+
if (paymentResData.redirectUrl) {
|
|
983
|
+
const paymentIntent = await import_nice_modal_react4.default.show(Iframe3ds, { url: paymentResData.redirectUrl });
|
|
984
|
+
if (paymentIntent) {
|
|
985
|
+
await SlapiPaymentService.validate3DS({ paymentId: paymentResData.id });
|
|
986
|
+
}
|
|
987
|
+
}
|
|
955
988
|
const cardStatus = await longPollCardStatus(paymentResData.id);
|
|
956
989
|
if (mode === "web3") {
|
|
957
990
|
const wallet = peekAirWallet();
|
|
@@ -1014,7 +1047,7 @@ var import_react_stripe_js2 = require("@stripe/react-stripe-js");
|
|
|
1014
1047
|
var import_stripe_js = require("@stripe/stripe-js");
|
|
1015
1048
|
|
|
1016
1049
|
// src/components/CreditCardTab/CreditCard/CardsList.tsx
|
|
1017
|
-
var
|
|
1050
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
1018
1051
|
var isRemoveDisabled = true;
|
|
1019
1052
|
var CardListItem = ({ card, isSelected, onSelect }) => {
|
|
1020
1053
|
const handleSelect = () => {
|
|
@@ -1024,30 +1057,33 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
|
|
|
1024
1057
|
e.stopPropagation();
|
|
1025
1058
|
if (isSelected || isRemoveDisabled) return;
|
|
1026
1059
|
};
|
|
1027
|
-
return /* @__PURE__ */ (0,
|
|
1028
|
-
/* @__PURE__ */ (0,
|
|
1060
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("button", { type: "button", onClick: handleSelect, className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-sm", children: [
|
|
1061
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1029
1062
|
"div",
|
|
1030
1063
|
{
|
|
1031
1064
|
className: cn("flex h-full w-11 items-center justify-center bg-black/10", {
|
|
1032
1065
|
"bg-primary": isSelected
|
|
1033
1066
|
}),
|
|
1034
|
-
children: /* @__PURE__ */ (0,
|
|
1067
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex size-5 items-center justify-center rounded-full bg-white", children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "bg-primary size-2.5 rounded-full" }) })
|
|
1035
1068
|
}
|
|
1036
1069
|
),
|
|
1037
|
-
/* @__PURE__ */ (0,
|
|
1070
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
1038
1071
|
"div",
|
|
1039
1072
|
{
|
|
1040
|
-
className: cn(
|
|
1041
|
-
"border-
|
|
1042
|
-
|
|
1073
|
+
className: cn(
|
|
1074
|
+
"flex h-full w-full items-center justify-between rounded-r-sm border border-l-0! border-transparent px-3",
|
|
1075
|
+
{
|
|
1076
|
+
"border-primary": isSelected
|
|
1077
|
+
}
|
|
1078
|
+
),
|
|
1043
1079
|
children: [
|
|
1044
|
-
/* @__PURE__ */ (0,
|
|
1045
|
-
/* @__PURE__ */ (0,
|
|
1046
|
-
/* @__PURE__ */ (0,
|
|
1080
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-sm font-medium text-black", children: card.schema }) }),
|
|
1081
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
1082
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { className: "text-sm font-medium text-black/50", children: [
|
|
1047
1083
|
"Ending in ",
|
|
1048
|
-
/* @__PURE__ */ (0,
|
|
1084
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-black", children: card.lastFourNumbers })
|
|
1049
1085
|
] }),
|
|
1050
|
-
/* @__PURE__ */ (0,
|
|
1086
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1051
1087
|
"div",
|
|
1052
1088
|
{
|
|
1053
1089
|
onClick: handleRemoveCard,
|
|
@@ -1055,9 +1091,9 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
|
|
|
1055
1091
|
"cursor-not-allowed opacity-50": isSelected || isRemoveDisabled
|
|
1056
1092
|
// 'cursor-pointer': !isSelected || !isRemoveDisabled,
|
|
1057
1093
|
}),
|
|
1058
|
-
children: /* @__PURE__ */ (0,
|
|
1059
|
-
/* @__PURE__ */ (0,
|
|
1060
|
-
/* @__PURE__ */ (0,
|
|
1094
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", fill: "none", children: [
|
|
1095
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("mask", { id: "mask0_188_5407", width: "20", height: "21", x: "0", y: "-1", maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { fill: "#D9D9D9", d: "M0-.5h20v20H0z" }) }),
|
|
1096
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("g", { mask: "url(#mask0_188_5407)", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1061
1097
|
"path",
|
|
1062
1098
|
{
|
|
1063
1099
|
fill: "#000",
|
|
@@ -1077,13 +1113,13 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
|
|
|
1077
1113
|
var CardsList = ({ selectedCard, setCard }) => {
|
|
1078
1114
|
const { cards, cardsIsLoading } = useCards();
|
|
1079
1115
|
if (cardsIsLoading) {
|
|
1080
|
-
return /* @__PURE__ */ (0,
|
|
1081
|
-
/* @__PURE__ */ (0,
|
|
1082
|
-
/* @__PURE__ */ (0,
|
|
1116
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
|
|
1117
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "bg-primary/8 h-11 animate-pulse rounded-sm" }),
|
|
1118
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "bg-primary/8 h-11 animate-pulse rounded-sm" })
|
|
1083
1119
|
] });
|
|
1084
1120
|
}
|
|
1085
1121
|
if (cards.length === 0) return null;
|
|
1086
|
-
return /* @__PURE__ */ (0,
|
|
1122
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex w-full flex-col gap-1", children: cards.map((card) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardListItem, { isSelected: selectedCard?.id === card.id, onSelect: setCard, card }, card.id)) });
|
|
1087
1123
|
};
|
|
1088
1124
|
|
|
1089
1125
|
// src/components/CreditCardTab/CreditCard/CreditCardForm.tsx
|
|
@@ -1093,7 +1129,7 @@ var import_react_stripe_js = require("@stripe/react-stripe-js");
|
|
|
1093
1129
|
// src/ui/button.tsx
|
|
1094
1130
|
var import_react_slot = require("@radix-ui/react-slot");
|
|
1095
1131
|
var import_class_variance_authority = require("class-variance-authority");
|
|
1096
|
-
var
|
|
1132
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
1097
1133
|
var buttonVariants = (0, import_class_variance_authority.cva)(
|
|
1098
1134
|
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
|
1099
1135
|
{
|
|
@@ -1128,15 +1164,15 @@ function Button({
|
|
|
1128
1164
|
...props
|
|
1129
1165
|
}) {
|
|
1130
1166
|
const Comp = asChild ? import_react_slot.Slot : "button";
|
|
1131
|
-
return /* @__PURE__ */ (0,
|
|
1167
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Comp, { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ...props });
|
|
1132
1168
|
}
|
|
1133
1169
|
|
|
1134
1170
|
// src/ui/checkbox.tsx
|
|
1135
1171
|
var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"), 1);
|
|
1136
1172
|
var import_lucide_react2 = require("lucide-react");
|
|
1137
|
-
var
|
|
1173
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
1138
1174
|
function Checkbox({ className, ...props }) {
|
|
1139
|
-
return /* @__PURE__ */ (0,
|
|
1175
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1140
1176
|
CheckboxPrimitive.Root,
|
|
1141
1177
|
{
|
|
1142
1178
|
"data-slot": "checkbox",
|
|
@@ -1145,12 +1181,12 @@ function Checkbox({ className, ...props }) {
|
|
|
1145
1181
|
className
|
|
1146
1182
|
),
|
|
1147
1183
|
...props,
|
|
1148
|
-
children: /* @__PURE__ */ (0,
|
|
1184
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1149
1185
|
CheckboxPrimitive.Indicator,
|
|
1150
1186
|
{
|
|
1151
1187
|
"data-slot": "checkbox-indicator",
|
|
1152
1188
|
className: "flex items-center justify-center text-current transition-none",
|
|
1153
|
-
children: /* @__PURE__ */ (0,
|
|
1189
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react2.CheckIcon, { className: "size-3.5 text-white" })
|
|
1154
1190
|
}
|
|
1155
1191
|
)
|
|
1156
1192
|
}
|
|
@@ -1159,9 +1195,9 @@ function Checkbox({ className, ...props }) {
|
|
|
1159
1195
|
|
|
1160
1196
|
// src/ui/label.tsx
|
|
1161
1197
|
var LabelPrimitive = __toESM(require("@radix-ui/react-label"), 1);
|
|
1162
|
-
var
|
|
1198
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
1163
1199
|
function Label({ className, ...props }) {
|
|
1164
|
-
return /* @__PURE__ */ (0,
|
|
1200
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1165
1201
|
LabelPrimitive.Root,
|
|
1166
1202
|
{
|
|
1167
1203
|
"data-slot": "label",
|
|
@@ -1175,7 +1211,7 @@ function Label({ className, ...props }) {
|
|
|
1175
1211
|
}
|
|
1176
1212
|
|
|
1177
1213
|
// src/components/CreditCardTab/CreditCard/CreditCardForm.tsx
|
|
1178
|
-
var
|
|
1214
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
1179
1215
|
var style = {
|
|
1180
1216
|
base: {
|
|
1181
1217
|
fontSize: "16px",
|
|
@@ -1233,9 +1269,9 @@ var CreditCardForm = ({ cancel, saveCard }) => {
|
|
|
1233
1269
|
setCardError("An error occurred while processing your card. Please try again.");
|
|
1234
1270
|
}
|
|
1235
1271
|
};
|
|
1236
|
-
return /* @__PURE__ */ (0,
|
|
1237
|
-
/* @__PURE__ */ (0,
|
|
1238
|
-
/* @__PURE__ */ (0,
|
|
1272
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
|
|
1273
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
|
|
1274
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1239
1275
|
import_react_stripe_js.CardNumberElement,
|
|
1240
1276
|
{
|
|
1241
1277
|
options: {
|
|
@@ -1245,8 +1281,8 @@ var CreditCardForm = ({ cancel, saveCard }) => {
|
|
|
1245
1281
|
}
|
|
1246
1282
|
}
|
|
1247
1283
|
),
|
|
1248
|
-
/* @__PURE__ */ (0,
|
|
1249
|
-
/* @__PURE__ */ (0,
|
|
1284
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex w-full gap-1", children: [
|
|
1285
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1250
1286
|
import_react_stripe_js.CardExpiryElement,
|
|
1251
1287
|
{
|
|
1252
1288
|
options: {
|
|
@@ -1256,7 +1292,7 @@ var CreditCardForm = ({ cancel, saveCard }) => {
|
|
|
1256
1292
|
}
|
|
1257
1293
|
}
|
|
1258
1294
|
),
|
|
1259
|
-
/* @__PURE__ */ (0,
|
|
1295
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1260
1296
|
import_react_stripe_js.CardCvcElement,
|
|
1261
1297
|
{
|
|
1262
1298
|
options: {
|
|
@@ -1267,24 +1303,24 @@ var CreditCardForm = ({ cancel, saveCard }) => {
|
|
|
1267
1303
|
}
|
|
1268
1304
|
)
|
|
1269
1305
|
] }),
|
|
1270
|
-
cardError && /* @__PURE__ */ (0,
|
|
1306
|
+
cardError && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-destructive mt-1 text-sm", children: cardError })
|
|
1271
1307
|
] }),
|
|
1272
|
-
/* @__PURE__ */ (0,
|
|
1273
|
-
/* @__PURE__ */ (0,
|
|
1274
|
-
/* @__PURE__ */ (0,
|
|
1308
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
1309
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Checkbox, { disabled: true, checked: true, id: "saveCard" }),
|
|
1310
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Label, { className: "text-sm font-medium", htmlFor: "saveCard", children: "Save card for future purchases" })
|
|
1275
1311
|
] }),
|
|
1276
|
-
/* @__PURE__ */ (0,
|
|
1277
|
-
/* @__PURE__ */ (0,
|
|
1278
|
-
/* @__PURE__ */ (0,
|
|
1312
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex w-full justify-end gap-2", children: [
|
|
1313
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Button, { variant: "outline", className: "hover:bg-gray-100", onClick: cancel, children: "Cancel" }),
|
|
1314
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Button, { onClick: handleSaveCard, children: "Add Card" })
|
|
1279
1315
|
] })
|
|
1280
1316
|
] });
|
|
1281
1317
|
};
|
|
1282
1318
|
|
|
1283
1319
|
// src/components/CreditCardTab/CreditCard/CreditCard.tsx
|
|
1284
|
-
var
|
|
1320
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
1285
1321
|
var StripeWrapper = (props) => {
|
|
1286
1322
|
const stripePromise = (0, import_react6.useMemo)(() => (0, import_stripe_js.loadStripe)(props.publicKey), [props.publicKey]);
|
|
1287
|
-
return /* @__PURE__ */ (0,
|
|
1323
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_stripe_js2.Elements, { stripe: stripePromise, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CreditCardForm, { cancel: props.onCancel, saveCard: props.saveNewCard }) });
|
|
1288
1324
|
};
|
|
1289
1325
|
var CreditCard = () => {
|
|
1290
1326
|
const [showForm, setShowForm] = (0, import_react6.useState)(false);
|
|
@@ -1302,19 +1338,19 @@ var CreditCard = () => {
|
|
|
1302
1338
|
const handleCancel = () => {
|
|
1303
1339
|
setShowForm(false);
|
|
1304
1340
|
};
|
|
1305
|
-
return /* @__PURE__ */ (0,
|
|
1306
|
-
/* @__PURE__ */ (0,
|
|
1307
|
-
!showForm && /* @__PURE__ */ (0,
|
|
1308
|
-
/* @__PURE__ */ (0,
|
|
1341
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col items-baseline gap-4", children: [
|
|
1342
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: "text-primary text-xl leading-[34px] font-semibold", children: "Your Cards" }),
|
|
1343
|
+
!showForm && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
|
|
1344
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1309
1345
|
CardsList,
|
|
1310
1346
|
{
|
|
1311
1347
|
selectedCard: selectedPaymentMethod?.type === "CREDIT_CARD" /* CREDIT_CARD */ ? selectedPaymentMethod.method : null,
|
|
1312
1348
|
setCard
|
|
1313
1349
|
}
|
|
1314
1350
|
),
|
|
1315
|
-
spreePayConfig?.stripePublicKey && /* @__PURE__ */ (0,
|
|
1351
|
+
spreePayConfig?.stripePublicKey && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { onClick: () => setShowForm(true), className: "text-sm font-medium text-black hover:underline", children: "Add new card" })
|
|
1316
1352
|
] }),
|
|
1317
|
-
spreePayConfig?.stripePublicKey && showForm && /* @__PURE__ */ (0,
|
|
1353
|
+
spreePayConfig?.stripePublicKey && showForm && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(StripeWrapper, { onCancel: handleCancel, saveNewCard, publicKey: spreePayConfig.stripePublicKey })
|
|
1318
1354
|
] });
|
|
1319
1355
|
};
|
|
1320
1356
|
|
|
@@ -1326,9 +1362,9 @@ var import_react7 = require("react");
|
|
|
1326
1362
|
|
|
1327
1363
|
// src/ui/switch.tsx
|
|
1328
1364
|
var SwitchPrimitive = __toESM(require("@radix-ui/react-switch"), 1);
|
|
1329
|
-
var
|
|
1365
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
1330
1366
|
function Switch({ className, ...props }) {
|
|
1331
|
-
return /* @__PURE__ */ (0,
|
|
1367
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1332
1368
|
SwitchPrimitive.Root,
|
|
1333
1369
|
{
|
|
1334
1370
|
"data-slot": "switch",
|
|
@@ -1337,7 +1373,7 @@ function Switch({ className, ...props }) {
|
|
|
1337
1373
|
className
|
|
1338
1374
|
),
|
|
1339
1375
|
...props,
|
|
1340
|
-
children: /* @__PURE__ */ (0,
|
|
1376
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1341
1377
|
SwitchPrimitive.Thumb,
|
|
1342
1378
|
{
|
|
1343
1379
|
"data-slot": "switch-thumb",
|
|
@@ -1349,35 +1385,35 @@ function Switch({ className, ...props }) {
|
|
|
1349
1385
|
}
|
|
1350
1386
|
|
|
1351
1387
|
// src/components/common/PointsSwitch.tsx
|
|
1352
|
-
var
|
|
1388
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
1353
1389
|
var PointsSwitch = (props) => {
|
|
1354
1390
|
const { disabled = false, value, onChange, message } = props;
|
|
1355
1391
|
const { spreePayConfig } = useSpreePayConfig();
|
|
1356
1392
|
const { appProps } = useStaticConfig();
|
|
1357
1393
|
const { balance } = useSlapiBalance();
|
|
1358
1394
|
const id = (0, import_react7.useId)();
|
|
1359
|
-
return /* @__PURE__ */ (0,
|
|
1360
|
-
/* @__PURE__ */ (0,
|
|
1361
|
-
/* @__PURE__ */ (0,
|
|
1362
|
-
/* @__PURE__ */ (0,
|
|
1363
|
-
/* @__PURE__ */ (0,
|
|
1395
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-6", children: [
|
|
1396
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
|
|
1397
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-3", children: [
|
|
1398
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Switch, { checked: value, onCheckedChange: onChange, disabled, id }),
|
|
1399
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
1364
1400
|
Label,
|
|
1365
1401
|
{
|
|
1366
1402
|
htmlFor: id,
|
|
1367
1403
|
className: "text-md flex-col items-baseline gap-0 leading-[1.3] font-semibold text-black sm:flex-row sm:gap-2 md:text-lg",
|
|
1368
1404
|
children: [
|
|
1369
1405
|
"Use Points ",
|
|
1370
|
-
/* @__PURE__ */ (0,
|
|
1406
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-xs font-medium", children: "Optional" })
|
|
1371
1407
|
]
|
|
1372
1408
|
}
|
|
1373
1409
|
)
|
|
1374
1410
|
] }),
|
|
1375
|
-
/* @__PURE__ */ (0,
|
|
1376
|
-
balance?.availablePoints ? /* @__PURE__ */ (0,
|
|
1411
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2.5", children: [
|
|
1412
|
+
balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { className: "flex-1 text-right text-sm font-medium text-black", children: [
|
|
1377
1413
|
formatPoints(balance.availablePoints, spreePayConfig?.pointsTitle),
|
|
1378
|
-
!!spreePayConfig?.pointsConversionRatio && /* @__PURE__ */ (0,
|
|
1414
|
+
!!spreePayConfig?.pointsConversionRatio && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-black/50", children: ` ${formatUSD(balance.availablePoints * spreePayConfig.pointsConversionRatio)}` })
|
|
1379
1415
|
] }) : null,
|
|
1380
|
-
Boolean(appProps.topUpLink) && /* @__PURE__ */ (0,
|
|
1416
|
+
Boolean(appProps.topUpLink) && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
1381
1417
|
"a",
|
|
1382
1418
|
{
|
|
1383
1419
|
className: "bg-primary cursor-pointer rounded-full px-2 py-1.5 text-xs font-medium text-white",
|
|
@@ -1389,15 +1425,15 @@ var PointsSwitch = (props) => {
|
|
|
1389
1425
|
)
|
|
1390
1426
|
] })
|
|
1391
1427
|
] }),
|
|
1392
|
-
message && /* @__PURE__ */ (0,
|
|
1393
|
-
/* @__PURE__ */ (0,
|
|
1428
|
+
message && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex gap-1 rounded-sm border border-[#006FD533] bg-[#006FD50D] p-1.5", children: [
|
|
1429
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("svg", { className: "size-5 shrink-0", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
1394
1430
|
"path",
|
|
1395
1431
|
{
|
|
1396
1432
|
fill: "#000",
|
|
1397
1433
|
d: "M9.6 13.8h.8V9.2h-.8zM10 8q.2 0 .4-.2l.1-.3-.1-.4L10 7l-.4.1-.1.4.1.3zm0 9.5a7 7 0 0 1-5.3-2.2 8 8 0 0 1-1.6-8.2 8 8 0 0 1 4-4q1.4-.6 2.9-.6a7 7 0 0 1 5.3 2.2 8 8 0 0 1 1.6 8.2 8 8 0 0 1-4 4q-1.4.6-2.9.6m0-.8q2.8 0 4.7-2 2-1.9 2-4.7t-2-4.7a6 6 0 0 0-4.7-2q-2.8 0-4.7 2a6 6 0 0 0-2 4.7q0 2.8 2 4.7 1.9 2 4.7 2"
|
|
1398
1434
|
}
|
|
1399
1435
|
) }),
|
|
1400
|
-
/* @__PURE__ */ (0,
|
|
1436
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-xs font-medium text-black", children: message })
|
|
1401
1437
|
] })
|
|
1402
1438
|
] });
|
|
1403
1439
|
};
|
|
@@ -1410,9 +1446,9 @@ var import_airkit2 = require("@mocanetwork/airkit");
|
|
|
1410
1446
|
var import_react10 = require("react");
|
|
1411
1447
|
|
|
1412
1448
|
// src/ui/input.tsx
|
|
1413
|
-
var
|
|
1449
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
1414
1450
|
function Input({ className, type, ...props }) {
|
|
1415
|
-
return /* @__PURE__ */ (0,
|
|
1451
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1416
1452
|
"input",
|
|
1417
1453
|
{
|
|
1418
1454
|
type,
|
|
@@ -1439,7 +1475,7 @@ function clamp(value, [min, max]) {
|
|
|
1439
1475
|
return Math.min(max, Math.max(min, value));
|
|
1440
1476
|
}
|
|
1441
1477
|
|
|
1442
|
-
// ../../node_modules/@radix-ui/
|
|
1478
|
+
// ../../node_modules/@radix-ui/primitive/dist/index.mjs
|
|
1443
1479
|
var canUseDOM = !!(typeof window !== "undefined" && window.document && window.document.createElement);
|
|
1444
1480
|
function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
|
|
1445
1481
|
return function handleEvent(event) {
|
|
@@ -1489,7 +1525,7 @@ function useComposedRefs(...refs) {
|
|
|
1489
1525
|
|
|
1490
1526
|
// ../../node_modules/@radix-ui/react-context/dist/index.mjs
|
|
1491
1527
|
var React3 = __toESM(require("react"), 1);
|
|
1492
|
-
var
|
|
1528
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
1493
1529
|
function createContextScope(scopeName, createContextScopeDeps = []) {
|
|
1494
1530
|
let defaultContexts = [];
|
|
1495
1531
|
function createContext32(rootComponentName, defaultContext) {
|
|
@@ -1500,7 +1536,7 @@ function createContextScope(scopeName, createContextScopeDeps = []) {
|
|
|
1500
1536
|
const { scope, children, ...context } = props;
|
|
1501
1537
|
const Context = scope?.[scopeName]?.[index] || BaseContext;
|
|
1502
1538
|
const value = React3.useMemo(() => context, Object.values(context));
|
|
1503
|
-
return /* @__PURE__ */ (0,
|
|
1539
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Context.Provider, { value, children });
|
|
1504
1540
|
};
|
|
1505
1541
|
Provider.displayName = rootComponentName + "Provider";
|
|
1506
1542
|
function useContext22(consumerName, scope) {
|
|
@@ -1622,11 +1658,10 @@ function useUncontrolledState({
|
|
|
1622
1658
|
function isFunction(value) {
|
|
1623
1659
|
return typeof value === "function";
|
|
1624
1660
|
}
|
|
1625
|
-
var SYNC_STATE = Symbol("RADIX:SYNC_STATE");
|
|
1626
1661
|
|
|
1627
1662
|
// ../../node_modules/@radix-ui/react-direction/dist/index.mjs
|
|
1628
1663
|
var React6 = __toESM(require("react"), 1);
|
|
1629
|
-
var
|
|
1664
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
1630
1665
|
var DirectionContext = React6.createContext(void 0);
|
|
1631
1666
|
function useDirection(localDir) {
|
|
1632
1667
|
const globalDir = React6.useContext(DirectionContext);
|
|
@@ -1687,7 +1722,7 @@ function useSize(element) {
|
|
|
1687
1722
|
var React9 = __toESM(require("react"), 1);
|
|
1688
1723
|
var ReactDOM = __toESM(require("react-dom"), 1);
|
|
1689
1724
|
var import_react_slot2 = require("@radix-ui/react-slot");
|
|
1690
|
-
var
|
|
1725
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
1691
1726
|
var NODES = [
|
|
1692
1727
|
"a",
|
|
1693
1728
|
"button",
|
|
@@ -1713,9 +1748,9 @@ var Primitive = NODES.reduce((primitive, node) => {
|
|
|
1713
1748
|
const { asChild, ...primitiveProps } = props;
|
|
1714
1749
|
const Comp = asChild ? Slot2 : node;
|
|
1715
1750
|
if (typeof window !== "undefined") {
|
|
1716
|
-
window[Symbol.for("radix-ui")] = true;
|
|
1751
|
+
window[/* @__PURE__ */ Symbol.for("radix-ui")] = true;
|
|
1717
1752
|
}
|
|
1718
|
-
return /* @__PURE__ */ (0,
|
|
1753
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Comp, { ...primitiveProps, ref: forwardedRef });
|
|
1719
1754
|
});
|
|
1720
1755
|
Node2.displayName = `Primitive.${node}`;
|
|
1721
1756
|
return { ...primitive, [node]: Node2 };
|
|
@@ -1724,10 +1759,10 @@ var Primitive = NODES.reduce((primitive, node) => {
|
|
|
1724
1759
|
// ../../node_modules/@radix-ui/react-collection/dist/index.mjs
|
|
1725
1760
|
var import_react8 = __toESM(require("react"), 1);
|
|
1726
1761
|
var import_react_slot3 = require("@radix-ui/react-slot");
|
|
1727
|
-
var
|
|
1762
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
1728
1763
|
var import_react9 = __toESM(require("react"), 1);
|
|
1729
1764
|
var import_react_slot4 = require("@radix-ui/react-slot");
|
|
1730
|
-
var
|
|
1765
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
1731
1766
|
function createCollection(name) {
|
|
1732
1767
|
const PROVIDER_NAME = name + "CollectionProvider";
|
|
1733
1768
|
const [createCollectionContext, createCollectionScope2] = createContextScope(PROVIDER_NAME);
|
|
@@ -1739,7 +1774,7 @@ function createCollection(name) {
|
|
|
1739
1774
|
const { scope, children } = props;
|
|
1740
1775
|
const ref = import_react8.default.useRef(null);
|
|
1741
1776
|
const itemMap = import_react8.default.useRef(/* @__PURE__ */ new Map()).current;
|
|
1742
|
-
return /* @__PURE__ */ (0,
|
|
1777
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
|
|
1743
1778
|
};
|
|
1744
1779
|
CollectionProvider.displayName = PROVIDER_NAME;
|
|
1745
1780
|
const COLLECTION_SLOT_NAME = name + "CollectionSlot";
|
|
@@ -1749,7 +1784,7 @@ function createCollection(name) {
|
|
|
1749
1784
|
const { scope, children } = props;
|
|
1750
1785
|
const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
|
|
1751
1786
|
const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
|
|
1752
|
-
return /* @__PURE__ */ (0,
|
|
1787
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CollectionSlotImpl, { ref: composedRefs, children });
|
|
1753
1788
|
}
|
|
1754
1789
|
);
|
|
1755
1790
|
CollectionSlot.displayName = COLLECTION_SLOT_NAME;
|
|
@@ -1766,7 +1801,7 @@ function createCollection(name) {
|
|
|
1766
1801
|
context.itemMap.set(ref, { ref, ...itemData });
|
|
1767
1802
|
return () => void context.itemMap.delete(ref);
|
|
1768
1803
|
});
|
|
1769
|
-
return /* @__PURE__ */ (0,
|
|
1804
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
|
|
1770
1805
|
}
|
|
1771
1806
|
);
|
|
1772
1807
|
CollectionItemSlot.displayName = ITEM_SLOT_NAME;
|
|
@@ -1792,7 +1827,7 @@ function createCollection(name) {
|
|
|
1792
1827
|
}
|
|
1793
1828
|
|
|
1794
1829
|
// ../../node_modules/@radix-ui/react-slider/dist/index.mjs
|
|
1795
|
-
var
|
|
1830
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
1796
1831
|
var PAGE_KEYS = ["PageUp", "PageDown"];
|
|
1797
1832
|
var ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
|
|
1798
1833
|
var BACK_KEYS = {
|
|
@@ -1870,7 +1905,7 @@ var Slider = React11.forwardRef(
|
|
|
1870
1905
|
}
|
|
1871
1906
|
});
|
|
1872
1907
|
}
|
|
1873
|
-
return /* @__PURE__ */ (0,
|
|
1908
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1874
1909
|
SliderProvider,
|
|
1875
1910
|
{
|
|
1876
1911
|
scope: props.__scopeSlider,
|
|
@@ -1883,7 +1918,7 @@ var Slider = React11.forwardRef(
|
|
|
1883
1918
|
values,
|
|
1884
1919
|
orientation,
|
|
1885
1920
|
form,
|
|
1886
|
-
children: /* @__PURE__ */ (0,
|
|
1921
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Collection.Provider, { scope: props.__scopeSlider, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Collection.Slot, { scope: props.__scopeSlider, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1887
1922
|
SliderOrientation,
|
|
1888
1923
|
{
|
|
1889
1924
|
"aria-disabled": disabled,
|
|
@@ -1952,7 +1987,7 @@ var SliderHorizontal = React11.forwardRef(
|
|
|
1952
1987
|
rectRef.current = rect;
|
|
1953
1988
|
return value(pointerPosition - rect.left);
|
|
1954
1989
|
}
|
|
1955
|
-
return /* @__PURE__ */ (0,
|
|
1990
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1956
1991
|
SliderOrientationProvider,
|
|
1957
1992
|
{
|
|
1958
1993
|
scope: props.__scopeSlider,
|
|
@@ -1960,7 +1995,7 @@ var SliderHorizontal = React11.forwardRef(
|
|
|
1960
1995
|
endEdge: isSlidingFromLeft ? "right" : "left",
|
|
1961
1996
|
direction: isSlidingFromLeft ? 1 : -1,
|
|
1962
1997
|
size: "width",
|
|
1963
|
-
children: /* @__PURE__ */ (0,
|
|
1998
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1964
1999
|
SliderImpl,
|
|
1965
2000
|
{
|
|
1966
2001
|
dir: direction,
|
|
@@ -2018,7 +2053,7 @@ var SliderVertical = React11.forwardRef(
|
|
|
2018
2053
|
rectRef.current = rect;
|
|
2019
2054
|
return value(pointerPosition - rect.top);
|
|
2020
2055
|
}
|
|
2021
|
-
return /* @__PURE__ */ (0,
|
|
2056
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2022
2057
|
SliderOrientationProvider,
|
|
2023
2058
|
{
|
|
2024
2059
|
scope: props.__scopeSlider,
|
|
@@ -2026,7 +2061,7 @@ var SliderVertical = React11.forwardRef(
|
|
|
2026
2061
|
endEdge: isSlidingFromBottom ? "top" : "bottom",
|
|
2027
2062
|
size: "height",
|
|
2028
2063
|
direction: isSlidingFromBottom ? 1 : -1,
|
|
2029
|
-
children: /* @__PURE__ */ (0,
|
|
2064
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2030
2065
|
SliderImpl,
|
|
2031
2066
|
{
|
|
2032
2067
|
"data-orientation": "vertical",
|
|
@@ -2072,7 +2107,7 @@ var SliderImpl = React11.forwardRef(
|
|
|
2072
2107
|
...sliderProps
|
|
2073
2108
|
} = props;
|
|
2074
2109
|
const context = useSliderContext(SLIDER_NAME, __scopeSlider);
|
|
2075
|
-
return /* @__PURE__ */ (0,
|
|
2110
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2076
2111
|
Primitive.span,
|
|
2077
2112
|
{
|
|
2078
2113
|
...sliderProps,
|
|
@@ -2119,7 +2154,7 @@ var SliderTrack = React11.forwardRef(
|
|
|
2119
2154
|
(props, forwardedRef) => {
|
|
2120
2155
|
const { __scopeSlider, ...trackProps } = props;
|
|
2121
2156
|
const context = useSliderContext(TRACK_NAME, __scopeSlider);
|
|
2122
|
-
return /* @__PURE__ */ (0,
|
|
2157
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2123
2158
|
Primitive.span,
|
|
2124
2159
|
{
|
|
2125
2160
|
"data-disabled": context.disabled ? "" : void 0,
|
|
@@ -2145,7 +2180,7 @@ var SliderRange = React11.forwardRef(
|
|
|
2145
2180
|
);
|
|
2146
2181
|
const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0;
|
|
2147
2182
|
const offsetEnd = 100 - Math.max(...percentages);
|
|
2148
|
-
return /* @__PURE__ */ (0,
|
|
2183
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2149
2184
|
Primitive.span,
|
|
2150
2185
|
{
|
|
2151
2186
|
"data-orientation": context.orientation,
|
|
@@ -2172,7 +2207,7 @@ var SliderThumb = React11.forwardRef(
|
|
|
2172
2207
|
() => thumb ? getItems().findIndex((item) => item.ref.current === thumb) : -1,
|
|
2173
2208
|
[getItems, thumb]
|
|
2174
2209
|
);
|
|
2175
|
-
return /* @__PURE__ */ (0,
|
|
2210
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SliderThumbImpl, { ...props, ref: composedRefs, index });
|
|
2176
2211
|
}
|
|
2177
2212
|
);
|
|
2178
2213
|
var SliderThumbImpl = React11.forwardRef(
|
|
@@ -2197,7 +2232,7 @@ var SliderThumbImpl = React11.forwardRef(
|
|
|
2197
2232
|
};
|
|
2198
2233
|
}
|
|
2199
2234
|
}, [thumb, context.thumbs]);
|
|
2200
|
-
return /* @__PURE__ */ (0,
|
|
2235
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
2201
2236
|
"span",
|
|
2202
2237
|
{
|
|
2203
2238
|
style: {
|
|
@@ -2206,7 +2241,7 @@ var SliderThumbImpl = React11.forwardRef(
|
|
|
2206
2241
|
[orientation.startEdge]: `calc(${percent}% + ${thumbInBoundsOffset}px)`
|
|
2207
2242
|
},
|
|
2208
2243
|
children: [
|
|
2209
|
-
/* @__PURE__ */ (0,
|
|
2244
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Collection.ItemSlot, { scope: props.__scopeSlider, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2210
2245
|
Primitive.span,
|
|
2211
2246
|
{
|
|
2212
2247
|
role: "slider",
|
|
@@ -2226,7 +2261,7 @@ var SliderThumbImpl = React11.forwardRef(
|
|
|
2226
2261
|
})
|
|
2227
2262
|
}
|
|
2228
2263
|
) }),
|
|
2229
|
-
isFormControl && /* @__PURE__ */ (0,
|
|
2264
|
+
isFormControl && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2230
2265
|
SliderBubbleInput,
|
|
2231
2266
|
{
|
|
2232
2267
|
name: name ?? (context.name ? context.name + (context.values.length > 1 ? "[]" : "") : void 0),
|
|
@@ -2259,7 +2294,7 @@ var SliderBubbleInput = React11.forwardRef(
|
|
|
2259
2294
|
input.dispatchEvent(event);
|
|
2260
2295
|
}
|
|
2261
2296
|
}, [prevValue, value]);
|
|
2262
|
-
return /* @__PURE__ */ (0,
|
|
2297
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2263
2298
|
Primitive.input,
|
|
2264
2299
|
{
|
|
2265
2300
|
style: { display: "none" },
|
|
@@ -2341,14 +2376,14 @@ function cn2(...inputs) {
|
|
|
2341
2376
|
}
|
|
2342
2377
|
|
|
2343
2378
|
// src/ui/slider.tsx
|
|
2344
|
-
var
|
|
2379
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
2345
2380
|
function Slider2(props) {
|
|
2346
2381
|
const { className, defaultValue, value, min = 0, max = 100, ...rest } = props;
|
|
2347
2382
|
const _values = React12.useMemo(
|
|
2348
2383
|
() => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
|
|
2349
2384
|
[value, defaultValue, min, max]
|
|
2350
2385
|
);
|
|
2351
|
-
return /* @__PURE__ */ (0,
|
|
2386
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
2352
2387
|
Root5,
|
|
2353
2388
|
{
|
|
2354
2389
|
"data-slot": "slider",
|
|
@@ -2362,14 +2397,14 @@ function Slider2(props) {
|
|
|
2362
2397
|
),
|
|
2363
2398
|
...rest,
|
|
2364
2399
|
children: [
|
|
2365
|
-
/* @__PURE__ */ (0,
|
|
2400
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2366
2401
|
Track,
|
|
2367
2402
|
{
|
|
2368
2403
|
"data-slot": "slider-track",
|
|
2369
2404
|
className: cn2(
|
|
2370
2405
|
"relative grow overflow-hidden rounded-full bg-black/15 data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
|
|
2371
2406
|
),
|
|
2372
|
-
children: /* @__PURE__ */ (0,
|
|
2407
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2373
2408
|
Range,
|
|
2374
2409
|
{
|
|
2375
2410
|
"data-slot": "slider-range",
|
|
@@ -2378,11 +2413,11 @@ function Slider2(props) {
|
|
|
2378
2413
|
)
|
|
2379
2414
|
}
|
|
2380
2415
|
),
|
|
2381
|
-
Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ (0,
|
|
2416
|
+
Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2382
2417
|
Thumb2,
|
|
2383
2418
|
{
|
|
2384
2419
|
"data-slot": "slider-thumb",
|
|
2385
|
-
className: "ring-ring/50 block size-5 shrink-0 rounded-full border
|
|
2420
|
+
className: "ring-ring/50 block size-5 shrink-0 rounded-full border border-white bg-black shadow-sm shadow-[#00000033] transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
|
|
2386
2421
|
},
|
|
2387
2422
|
index
|
|
2388
2423
|
))
|
|
@@ -2392,7 +2427,7 @@ function Slider2(props) {
|
|
|
2392
2427
|
}
|
|
2393
2428
|
|
|
2394
2429
|
// src/components/CreditCardTab/Points/PointsSelector.tsx
|
|
2395
|
-
var
|
|
2430
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
2396
2431
|
var PointsSelector = (props) => {
|
|
2397
2432
|
const { isDisabled, isSelected, onSelect, children } = props;
|
|
2398
2433
|
const { balance } = useSlapiBalance();
|
|
@@ -2411,31 +2446,31 @@ var PointsSelector = (props) => {
|
|
|
2411
2446
|
};
|
|
2412
2447
|
const pointsValue = String(Math.round(splitTokens));
|
|
2413
2448
|
const usdValue = formatUSD(usdAmount + getTransactionFee(usdAmount, appProps.transactionFeePercentage));
|
|
2414
|
-
return /* @__PURE__ */ (0,
|
|
2449
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
2415
2450
|
"button",
|
|
2416
2451
|
{
|
|
2417
2452
|
disabled: isDisabled,
|
|
2418
2453
|
onClick: onSelect,
|
|
2419
|
-
className: cn("bg-primary/8 cursor-pointer overflow-hidden rounded-sm border
|
|
2454
|
+
className: cn("bg-primary/8 cursor-pointer overflow-hidden rounded-sm border border-transparent", {
|
|
2420
2455
|
"border-primary": isSelected,
|
|
2421
2456
|
"cursor-not-allowed opacity-50": isDisabled
|
|
2422
2457
|
}),
|
|
2423
2458
|
children: [
|
|
2424
|
-
/* @__PURE__ */ (0,
|
|
2425
|
-
/* @__PURE__ */ (0,
|
|
2459
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: cn("flex h-11 w-full", { "bg-black/4": isSelected }), children: [
|
|
2460
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2426
2461
|
"div",
|
|
2427
2462
|
{
|
|
2428
2463
|
className: cn("flex h-full w-11 items-center justify-center bg-black/10", {
|
|
2429
2464
|
"bg-primary": isSelected
|
|
2430
2465
|
}),
|
|
2431
|
-
children: /* @__PURE__ */ (0,
|
|
2466
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex size-5 items-center justify-center rounded-full bg-white", children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "bg-primary size-2.5 rounded-full" }) })
|
|
2432
2467
|
}
|
|
2433
2468
|
),
|
|
2434
|
-
/* @__PURE__ */ (0,
|
|
2469
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex h-full w-full items-center justify-between gap-2 px-2 sm:gap-3 sm:px-3", children })
|
|
2435
2470
|
] }),
|
|
2436
|
-
isSelected && /* @__PURE__ */ (0,
|
|
2437
|
-
/* @__PURE__ */ (0,
|
|
2438
|
-
/* @__PURE__ */ (0,
|
|
2471
|
+
isSelected && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "px-2 pt-6 pb-2 sm:px-3 md:px-4", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex justify-between gap-2 sm:gap-3", children: [
|
|
2472
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col gap-1", children: [
|
|
2473
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2439
2474
|
Input,
|
|
2440
2475
|
{
|
|
2441
2476
|
readOnly: true,
|
|
@@ -2446,9 +2481,9 @@ var PointsSelector = (props) => {
|
|
|
2446
2481
|
onClick: (e) => e.stopPropagation()
|
|
2447
2482
|
}
|
|
2448
2483
|
),
|
|
2449
|
-
/* @__PURE__ */ (0,
|
|
2484
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-left text-xs leading-[20px] text-black/45", children: "Points" })
|
|
2450
2485
|
] }),
|
|
2451
|
-
/* @__PURE__ */ (0,
|
|
2486
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex w-full items-center pb-6", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2452
2487
|
Slider2,
|
|
2453
2488
|
{
|
|
2454
2489
|
value: [splitTokens],
|
|
@@ -2460,8 +2495,8 @@ var PointsSelector = (props) => {
|
|
|
2460
2495
|
step
|
|
2461
2496
|
}
|
|
2462
2497
|
) }),
|
|
2463
|
-
/* @__PURE__ */ (0,
|
|
2464
|
-
/* @__PURE__ */ (0,
|
|
2498
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col gap-1", children: [
|
|
2499
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2465
2500
|
Input,
|
|
2466
2501
|
{
|
|
2467
2502
|
readOnly: true,
|
|
@@ -2472,7 +2507,7 @@ var PointsSelector = (props) => {
|
|
|
2472
2507
|
onClick: (e) => e.stopPropagation()
|
|
2473
2508
|
}
|
|
2474
2509
|
),
|
|
2475
|
-
/* @__PURE__ */ (0,
|
|
2510
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-left text-xs leading-[20px] text-black/45", children: "Card" })
|
|
2476
2511
|
] })
|
|
2477
2512
|
] }) })
|
|
2478
2513
|
]
|
|
@@ -2481,7 +2516,7 @@ var PointsSelector = (props) => {
|
|
|
2481
2516
|
};
|
|
2482
2517
|
|
|
2483
2518
|
// src/components/CreditCardTab/Points/SplitBlock.tsx
|
|
2484
|
-
var
|
|
2519
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
2485
2520
|
var SplitBlock = (props) => {
|
|
2486
2521
|
const { onToggle, isSelected, onSelect } = props;
|
|
2487
2522
|
const { balance, isBalanceLoading } = useSlapiBalance();
|
|
@@ -2490,6 +2525,7 @@ var SplitBlock = (props) => {
|
|
|
2490
2525
|
const [walletReady, setWalletReady] = (0, import_react11.useState)(false);
|
|
2491
2526
|
const { pointsConversionRatio, pointsTitle } = spreePayConfig || {};
|
|
2492
2527
|
const { env } = useSpreePayEnv();
|
|
2528
|
+
const prevPointsChainRef = (0, import_react11.useRef)(spreePayConfig?.pointsChain);
|
|
2493
2529
|
const initWallet = (0, import_react11.useCallback)(
|
|
2494
2530
|
async (pointsChain) => {
|
|
2495
2531
|
if (!pointsChain) return;
|
|
@@ -2511,28 +2547,34 @@ var SplitBlock = (props) => {
|
|
|
2511
2547
|
[onToggle, env.environment]
|
|
2512
2548
|
);
|
|
2513
2549
|
(0, import_react11.useEffect)(() => {
|
|
2514
|
-
if (env.useWeb3Points)
|
|
2515
|
-
|
|
2516
|
-
|
|
2517
|
-
|
|
2518
|
-
|
|
2550
|
+
if (!env.useWeb3Points) return;
|
|
2551
|
+
const pointsChainChanged = prevPointsChainRef.current !== spreePayConfig?.pointsChain;
|
|
2552
|
+
prevPointsChainRef.current = spreePayConfig?.pointsChain;
|
|
2553
|
+
const doInit = async () => {
|
|
2554
|
+
if (pointsChainChanged) {
|
|
2555
|
+
setAddress(null);
|
|
2556
|
+
setWalletReady(false);
|
|
2557
|
+
}
|
|
2558
|
+
await initWallet(spreePayConfig?.pointsChain);
|
|
2559
|
+
};
|
|
2560
|
+
doInit();
|
|
2519
2561
|
}, [spreePayConfig?.pointsChain, initWallet, env.useWeb3Points]);
|
|
2520
2562
|
const isPointsSelectorDisabled = env.useWeb3Points ? !walletReady : false;
|
|
2521
|
-
return /* @__PURE__ */ (0,
|
|
2522
|
-
/* @__PURE__ */ (0,
|
|
2523
|
-
/* @__PURE__ */ (0,
|
|
2563
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(PointsSelector, { isDisabled: isPointsSelectorDisabled, onSelect: () => onSelect("air"), isSelected, children: [
|
|
2564
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex items-center gap-2", children: balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("p", { className: "text-left text-xs font-medium text-black sm:text-sm", children: [
|
|
2565
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-black/50", children: "Available" }),
|
|
2524
2566
|
" ",
|
|
2525
2567
|
formatPoints(balance.availablePoints, pointsTitle),
|
|
2526
2568
|
" ",
|
|
2527
|
-
pointsConversionRatio && /* @__PURE__ */ (0,
|
|
2569
|
+
pointsConversionRatio && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-black/50", children: formatUSD(balance.availablePoints * pointsConversionRatio) })
|
|
2528
2570
|
] }) : null }),
|
|
2529
|
-
isBalanceLoading ? /* @__PURE__ */ (0,
|
|
2530
|
-
address && /* @__PURE__ */ (0,
|
|
2571
|
+
isBalanceLoading ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-4 w-6 animate-pulse bg-gray-200" }) : !balance?.availablePoints && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-sm font-medium text-black", children: "No points available" }),
|
|
2572
|
+
address && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "text-sm font-medium text-black", children: address.length > 8 ? `${address.slice(0, 4)}...${address.slice(-4)}` : address })
|
|
2531
2573
|
] }) });
|
|
2532
2574
|
};
|
|
2533
2575
|
|
|
2534
2576
|
// src/components/CreditCardTab/Points/Points.tsx
|
|
2535
|
-
var
|
|
2577
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
2536
2578
|
var Points = () => {
|
|
2537
2579
|
const [usePoints, setUsePoints] = (0, import_react12.useState)(false);
|
|
2538
2580
|
const [selectedPointsType, setSelectedPointsType] = (0, import_react12.useState)(null);
|
|
@@ -2546,8 +2588,8 @@ var Points = () => {
|
|
|
2546
2588
|
setSelectedPaymentMethod({ ...selectedPaymentMethod, splitAmount: void 0 });
|
|
2547
2589
|
}
|
|
2548
2590
|
};
|
|
2549
|
-
return /* @__PURE__ */ (0,
|
|
2550
|
-
/* @__PURE__ */ (0,
|
|
2591
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
|
|
2592
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
2551
2593
|
PointsSwitch,
|
|
2552
2594
|
{
|
|
2553
2595
|
value: usePoints,
|
|
@@ -2556,7 +2598,7 @@ var Points = () => {
|
|
|
2556
2598
|
disabled: !spreePayConfig?.creditCard.enabled || !spreePayConfig?.creditCard.points || appProps.disabledPoints
|
|
2557
2599
|
}
|
|
2558
2600
|
),
|
|
2559
|
-
usePoints && /* @__PURE__ */ (0,
|
|
2601
|
+
usePoints && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
2560
2602
|
SplitBlock,
|
|
2561
2603
|
{
|
|
2562
2604
|
onToggle: handleTogglePoints,
|
|
@@ -2568,7 +2610,7 @@ var Points = () => {
|
|
|
2568
2610
|
};
|
|
2569
2611
|
|
|
2570
2612
|
// src/components/CreditCardTab/CreditCardTab.tsx
|
|
2571
|
-
var
|
|
2613
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
2572
2614
|
var CreditCardTab = () => {
|
|
2573
2615
|
const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
|
|
2574
2616
|
const { env } = useSpreePayEnv();
|
|
@@ -2623,16 +2665,16 @@ var CreditCardTab = () => {
|
|
|
2623
2665
|
(0, import_react13.useEffect)(() => {
|
|
2624
2666
|
register(handlePay);
|
|
2625
2667
|
}, [register, handlePay]);
|
|
2626
|
-
return /* @__PURE__ */ (0,
|
|
2627
|
-
/* @__PURE__ */ (0,
|
|
2628
|
-
/* @__PURE__ */ (0,
|
|
2668
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { children: [
|
|
2669
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "border-b border-black/7 px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CreditCard, {}) }),
|
|
2670
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex flex-col gap-6 border-b border-black/7 px-5 pt-5 pb-5 md:px-7 md:pt-6 md:pb-7", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Points, {}) })
|
|
2629
2671
|
] });
|
|
2630
2672
|
};
|
|
2631
2673
|
|
|
2632
2674
|
// src/components/CryptoTab/Crypto/CryptoWrapper.tsx
|
|
2633
2675
|
var import_react16 = require("react");
|
|
2634
2676
|
var import_react_query = require("@tanstack/react-query");
|
|
2635
|
-
var
|
|
2677
|
+
var import_nice_modal_react7 = __toESM(require("@ebay/nice-modal-react"), 1);
|
|
2636
2678
|
var import_rainbowkit2 = require("@rainbow-me/rainbowkit");
|
|
2637
2679
|
var import_styles = require("@rainbow-me/rainbowkit/styles.css");
|
|
2638
2680
|
var import_wagmi5 = require("wagmi");
|
|
@@ -2655,9 +2697,9 @@ function getAction(client, actionFn, name) {
|
|
|
2655
2697
|
|
|
2656
2698
|
// ../../node_modules/@wagmi/core/dist/esm/actions/readContract.js
|
|
2657
2699
|
var import_actions = require("viem/actions");
|
|
2658
|
-
function readContract(
|
|
2700
|
+
function readContract(config2, parameters) {
|
|
2659
2701
|
const { chainId, ...rest } = parameters;
|
|
2660
|
-
const client =
|
|
2702
|
+
const client = config2.getClient({ chainId });
|
|
2661
2703
|
const action = getAction(client, import_actions.readContract, "readContract");
|
|
2662
2704
|
return action(rest);
|
|
2663
2705
|
}
|
|
@@ -2665,17 +2707,20 @@ function readContract(config, parameters) {
|
|
|
2665
2707
|
// ../../node_modules/@wagmi/core/dist/esm/actions/waitForTransactionReceipt.js
|
|
2666
2708
|
var import_viem2 = require("viem");
|
|
2667
2709
|
var import_actions2 = require("viem/actions");
|
|
2668
|
-
async function waitForTransactionReceipt(
|
|
2710
|
+
async function waitForTransactionReceipt(config2, parameters) {
|
|
2669
2711
|
const { chainId, timeout = 0, ...rest } = parameters;
|
|
2670
|
-
const client =
|
|
2712
|
+
const client = config2.getClient({ chainId });
|
|
2671
2713
|
const action = getAction(client, import_actions2.waitForTransactionReceipt, "waitForTransactionReceipt");
|
|
2672
2714
|
const receipt = await action({ ...rest, timeout });
|
|
2673
2715
|
if (receipt.status === "reverted") {
|
|
2674
2716
|
const action_getTransaction = getAction(client, import_actions2.getTransaction, "getTransaction");
|
|
2675
|
-
const txn = await action_getTransaction({
|
|
2717
|
+
const { from: account, ...txn } = await action_getTransaction({
|
|
2718
|
+
hash: receipt.transactionHash
|
|
2719
|
+
});
|
|
2676
2720
|
const action_call = getAction(client, import_actions2.call, "call");
|
|
2677
2721
|
const code = await action_call({
|
|
2678
2722
|
...txn,
|
|
2723
|
+
account,
|
|
2679
2724
|
data: txn.input,
|
|
2680
2725
|
gasPrice: txn.type !== "eip1559" ? txn.gasPrice : void 0,
|
|
2681
2726
|
maxFeePerGas: txn.type === "eip1559" ? txn.maxFeePerGas : void 0,
|
|
@@ -2739,7 +2784,7 @@ var MAX_UINT256 = BigInt(2) ** BigInt(256) - BigInt(1);
|
|
|
2739
2784
|
var useCryptoPayment = () => {
|
|
2740
2785
|
const { data: walletClient } = (0, import_wagmi.useWalletClient)();
|
|
2741
2786
|
const { spreePayConfig } = useSpreePayConfig();
|
|
2742
|
-
const
|
|
2787
|
+
const config2 = (0, import_wagmi.useConfig)();
|
|
2743
2788
|
const { selectedPaymentMethod } = useSpreePaymentMethod();
|
|
2744
2789
|
const cryptoPayment = async (params) => {
|
|
2745
2790
|
if (!walletClient) {
|
|
@@ -2758,7 +2803,7 @@ var useCryptoPayment = () => {
|
|
|
2758
2803
|
if (!tokenAddress) {
|
|
2759
2804
|
throw new Error("Token address not found");
|
|
2760
2805
|
}
|
|
2761
|
-
const allowance = await readContract(
|
|
2806
|
+
const allowance = await readContract(config2, {
|
|
2762
2807
|
address: tokenAddress,
|
|
2763
2808
|
abi: import_viem4.erc20Abi,
|
|
2764
2809
|
functionName: "allowance",
|
|
@@ -2771,7 +2816,7 @@ var useCryptoPayment = () => {
|
|
|
2771
2816
|
functionName: "approve",
|
|
2772
2817
|
args: [spreePayConfig.crypto.oneInchAggregationRouter, MAX_UINT256]
|
|
2773
2818
|
});
|
|
2774
|
-
await waitForTransactionReceipt(
|
|
2819
|
+
await waitForTransactionReceipt(config2, {
|
|
2775
2820
|
hash: result,
|
|
2776
2821
|
confirmations: 1
|
|
2777
2822
|
// You can change the number of block confirmations as per your requirement
|
|
@@ -2811,38 +2856,38 @@ var useCryptoPayment = () => {
|
|
|
2811
2856
|
|
|
2812
2857
|
// src/components/CryptoTab/Crypto/ConnectButton.tsx
|
|
2813
2858
|
var import_rainbowkit = require("@rainbow-me/rainbowkit");
|
|
2814
|
-
var
|
|
2859
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
2815
2860
|
var ConnectButton = () => {
|
|
2816
|
-
return /* @__PURE__ */ (0,
|
|
2861
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_rainbowkit.ConnectButton.Custom, { children: ({ mounted, chain, account, openAccountModal, openChainModal, openConnectModal }) => {
|
|
2817
2862
|
if (!mounted) return null;
|
|
2818
|
-
return /* @__PURE__ */ (0,
|
|
2863
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_jsx_runtime27.Fragment, { children: (() => {
|
|
2819
2864
|
if (!mounted || !account || !chain) {
|
|
2820
|
-
return /* @__PURE__ */ (0,
|
|
2865
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2821
2866
|
"button",
|
|
2822
2867
|
{
|
|
2823
|
-
className: "h-[34px] rounded-md border
|
|
2868
|
+
className: "h-[34px] rounded-md border border-black px-3 text-sm font-medium text-black",
|
|
2824
2869
|
onClick: openConnectModal,
|
|
2825
2870
|
children: "Connect a Wallet"
|
|
2826
2871
|
}
|
|
2827
2872
|
);
|
|
2828
2873
|
}
|
|
2829
2874
|
if (chain.unsupported) {
|
|
2830
|
-
return /* @__PURE__ */ (0,
|
|
2875
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2831
2876
|
"button",
|
|
2832
2877
|
{
|
|
2833
|
-
className: "h-[34px] rounded-md border
|
|
2878
|
+
className: "h-[34px] rounded-md border border-black px-3 text-sm font-medium text-black",
|
|
2834
2879
|
onClick: openChainModal,
|
|
2835
2880
|
children: "Select a Network"
|
|
2836
2881
|
}
|
|
2837
2882
|
);
|
|
2838
2883
|
}
|
|
2839
|
-
return /* @__PURE__ */ (0,
|
|
2884
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
2840
2885
|
"button",
|
|
2841
2886
|
{
|
|
2842
|
-
className: "flex h-[34px] items-center gap-2 rounded-md border
|
|
2887
|
+
className: "flex h-[34px] items-center gap-2 rounded-md border border-black px-1.5 text-sm font-medium text-black",
|
|
2843
2888
|
onClick: openAccountModal,
|
|
2844
2889
|
children: [
|
|
2845
|
-
chain.hasIcon && /* @__PURE__ */ (0,
|
|
2890
|
+
chain.hasIcon && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "size-6 overflow-hidden rounded-full", style: { background: chain.iconBackground }, children: chain.iconUrl && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("img", { alt: chain.name ?? "Chain icon", src: chain.iconUrl }) }),
|
|
2846
2891
|
account.displayName
|
|
2847
2892
|
]
|
|
2848
2893
|
}
|
|
@@ -2852,29 +2897,29 @@ var ConnectButton = () => {
|
|
|
2852
2897
|
};
|
|
2853
2898
|
|
|
2854
2899
|
// src/config/symbolLogos.tsx
|
|
2855
|
-
var
|
|
2856
|
-
var MOCA_SVG = /* @__PURE__ */ (0,
|
|
2857
|
-
/* @__PURE__ */ (0,
|
|
2858
|
-
/* @__PURE__ */ (0,
|
|
2900
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
2901
|
+
var MOCA_SVG = /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
|
|
2902
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("circle", { cx: "14", cy: "14", r: "13.5", fill: "#C15F97" }),
|
|
2903
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
2859
2904
|
"path",
|
|
2860
2905
|
{
|
|
2861
2906
|
fill: "#fff",
|
|
2862
2907
|
d: "M16.06 6.65c.3 0 .59.16.74.43l6.06 10.5a.85.85 0 1 1-1.47.84L16.06 9.2l-1.51 2.62-.02.03-3.8 6.57a.85.85 0 0 1-1.47-.84l3.57-6.18-1.27-2.2-5.32 9.22a.85.85 0 0 1-1.48-.84l6.07-10.5.06-.1a.85.85 0 0 1 1.4.1l1.52 2.62 1.52-2.62.06-.1c.16-.2.4-.33.67-.33Z"
|
|
2863
2908
|
}
|
|
2864
2909
|
),
|
|
2865
|
-
/* @__PURE__ */ (0,
|
|
2910
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("circle", { cx: "16", cy: "14", r: "1.5", fill: "#fff" })
|
|
2866
2911
|
] });
|
|
2867
|
-
var USDC_SVG = /* @__PURE__ */ (0,
|
|
2868
|
-
/* @__PURE__ */ (0,
|
|
2869
|
-
/* @__PURE__ */ (0,
|
|
2870
|
-
/* @__PURE__ */ (0,
|
|
2912
|
+
var USDC_SVG = /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
|
|
2913
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("g", { clipPath: "url(#clip0_528_9163)", children: [
|
|
2914
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { fill: "#2775CA", d: "M14 28c7.76 0 14-6.24 14-14S21.76 0 14 0 0 6.24 0 14s6.24 14 14 14Z" }),
|
|
2915
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
2871
2916
|
"path",
|
|
2872
2917
|
{
|
|
2873
2918
|
fill: "#fff",
|
|
2874
2919
|
d: "M17.85 16.22c0-2.04-1.23-2.74-3.68-3.04-1.75-.23-2.1-.7-2.1-1.51 0-.82.59-1.34 1.75-1.34 1.05 0 1.64.35 1.93 1.22.06.18.23.3.4.3h.94a.4.4 0 0 0 .41-.42v-.05a2.91 2.91 0 0 0-2.63-2.4v-1.4c0-.23-.17-.4-.46-.46h-.88c-.23 0-.4.17-.46.46v1.35c-1.75.23-2.86 1.4-2.86 2.85 0 1.93 1.16 2.69 3.61 2.98 1.64.29 2.16.64 2.16 1.57 0 .94-.81 1.58-1.92 1.58-1.52 0-2.04-.64-2.22-1.52-.06-.23-.23-.35-.4-.35h-1a.4.4 0 0 0-.4.41v.06c.23 1.46 1.16 2.5 3.08 2.8v1.4c0 .23.18.4.47.47h.88c.23 0 .4-.18.46-.47v-1.4c1.75-.3 2.92-1.52 2.92-3.1Z"
|
|
2875
2920
|
}
|
|
2876
2921
|
),
|
|
2877
|
-
/* @__PURE__ */ (0,
|
|
2922
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
2878
2923
|
"path",
|
|
2879
2924
|
{
|
|
2880
2925
|
fill: "#fff",
|
|
@@ -2882,11 +2927,11 @@ var USDC_SVG = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("svg", { xmlns: "h
|
|
|
2882
2927
|
}
|
|
2883
2928
|
)
|
|
2884
2929
|
] }),
|
|
2885
|
-
/* @__PURE__ */ (0,
|
|
2930
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("clipPath", { id: "clip0_528_9163", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { fill: "#fff", d: "M0 0h28v28H0z" }) }) })
|
|
2886
2931
|
] });
|
|
2887
|
-
var USDT_SVG = /* @__PURE__ */ (0,
|
|
2888
|
-
/* @__PURE__ */ (0,
|
|
2889
|
-
/* @__PURE__ */ (0,
|
|
2932
|
+
var USDT_SVG = /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
|
|
2933
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { fill: "#26A17B", d: "M14 28a14 14 0 1 0 0-28 14 14 0 0 0 0 28Z" }),
|
|
2934
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
2890
2935
|
"path",
|
|
2891
2936
|
{
|
|
2892
2937
|
fill: "#fff",
|
|
@@ -2894,23 +2939,23 @@ var USDT_SVG = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("svg", { xmlns: "h
|
|
|
2894
2939
|
}
|
|
2895
2940
|
)
|
|
2896
2941
|
] });
|
|
2897
|
-
var WETH_SVG = /* @__PURE__ */ (0,
|
|
2898
|
-
/* @__PURE__ */ (0,
|
|
2899
|
-
/* @__PURE__ */ (0,
|
|
2942
|
+
var WETH_SVG = /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", width: "28", height: "28", viewBox: "0 0 24 24", children: [
|
|
2943
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("g", { clipPath: "url(#clip0_528_9173)", children: [
|
|
2944
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
2900
2945
|
"path",
|
|
2901
2946
|
{
|
|
2902
2947
|
fill: "#000",
|
|
2903
2948
|
d: "M17.14 20.57c0 .95-1.31 2.01-3.39 2.4h-2.59c-4.65 0-8.42-1.07-8.42-2.4 0-1.32 3.77-2.4 8.42-2.4s5.98 1.08 5.98 2.4Z"
|
|
2904
2949
|
}
|
|
2905
2950
|
),
|
|
2906
|
-
/* @__PURE__ */ (0,
|
|
2951
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
2907
2952
|
"path",
|
|
2908
2953
|
{
|
|
2909
2954
|
fill: "#F61F7D",
|
|
2910
2955
|
d: "M23.31 11c0 5.86-5.18 11.63-11.07 11.63-5.9 0-11.9-6.17-11.9-12.03C.34 4.75 5.12 0 11.01 0s12.3 5.15 12.3 11Z"
|
|
2911
2956
|
}
|
|
2912
2957
|
),
|
|
2913
|
-
/* @__PURE__ */ (0,
|
|
2958
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
2914
2959
|
"path",
|
|
2915
2960
|
{
|
|
2916
2961
|
fill: "#000",
|
|
@@ -2919,8 +2964,8 @@ var WETH_SVG = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("svg", { xmlns: "h
|
|
|
2919
2964
|
clipRule: "evenodd"
|
|
2920
2965
|
}
|
|
2921
2966
|
),
|
|
2922
|
-
/* @__PURE__ */ (0,
|
|
2923
|
-
/* @__PURE__ */ (0,
|
|
2967
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { fill: "#fff", d: "M24 12.17a10.8 10.8 0 1 1-21.6 0 10.8 10.8 0 0 1 21.6 0Z" }),
|
|
2968
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
2924
2969
|
"path",
|
|
2925
2970
|
{
|
|
2926
2971
|
fill: "#000",
|
|
@@ -2929,8 +2974,8 @@ var WETH_SVG = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("svg", { xmlns: "h
|
|
|
2929
2974
|
clipRule: "evenodd"
|
|
2930
2975
|
}
|
|
2931
2976
|
),
|
|
2932
|
-
/* @__PURE__ */ (0,
|
|
2933
|
-
/* @__PURE__ */ (0,
|
|
2977
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { fill: "#000", fillRule: "evenodd", d: "M3.02 10.63.7 8.75l.74-.86 2.34 1.87-.75.87Z", clipRule: "evenodd" }),
|
|
2978
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
2934
2979
|
"path",
|
|
2935
2980
|
{
|
|
2936
2981
|
fill: "#000",
|
|
@@ -2938,7 +2983,7 @@ var WETH_SVG = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("svg", { xmlns: "h
|
|
|
2938
2983
|
}
|
|
2939
2984
|
)
|
|
2940
2985
|
] }),
|
|
2941
|
-
/* @__PURE__ */ (0,
|
|
2986
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("clipPath", { id: "clip0_528_9173", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { fill: "#fff", d: "M0 0h24v24H0z" }) }) })
|
|
2942
2987
|
] });
|
|
2943
2988
|
var symbolLogos = {
|
|
2944
2989
|
MOCA: MOCA_SVG,
|
|
@@ -2951,33 +2996,33 @@ function getSymbolLogo(symbol) {
|
|
|
2951
2996
|
}
|
|
2952
2997
|
|
|
2953
2998
|
// src/components/CryptoTab/Crypto/Logos.tsx
|
|
2954
|
-
var
|
|
2999
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
2955
3000
|
var Logos = () => {
|
|
2956
|
-
return /* @__PURE__ */ (0,
|
|
2957
|
-
/* @__PURE__ */ (0,
|
|
2958
|
-
/* @__PURE__ */ (0,
|
|
2959
|
-
/* @__PURE__ */ (0,
|
|
2960
|
-
/* @__PURE__ */ (0,
|
|
3001
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex", children: [
|
|
3002
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "rounded-full border border-[#F5F7FA]", children: getSymbolLogo("MOCA") }),
|
|
3003
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "-ml-2.5 rounded-full border border-[#F5F7FA]", children: getSymbolLogo("USDC") }),
|
|
3004
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "-ml-2.5 rounded-full border border-[#F5F7FA]", children: getSymbolLogo("USDT") }),
|
|
3005
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "-ml-2.5 rounded-full border border-[#F5F7FA] bg-[#F5F7FA]", children: getSymbolLogo("WETH") })
|
|
2961
3006
|
] });
|
|
2962
3007
|
};
|
|
2963
3008
|
|
|
2964
3009
|
// src/components/CryptoTab/Crypto/SelectCoinButton.tsx
|
|
2965
|
-
var
|
|
3010
|
+
var import_nice_modal_react6 = __toESM(require("@ebay/nice-modal-react"), 1);
|
|
2966
3011
|
|
|
2967
3012
|
// src/modals/CryptoSelectModal.tsx
|
|
2968
3013
|
var import_react14 = require("react");
|
|
2969
|
-
var
|
|
3014
|
+
var import_nice_modal_react5 = __toESM(require("@ebay/nice-modal-react"), 1);
|
|
2970
3015
|
|
|
2971
3016
|
// ../ui/src/components/input.tsx
|
|
2972
|
-
var
|
|
3017
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
2973
3018
|
function Input2({ className, type, ...props }) {
|
|
2974
|
-
return /* @__PURE__ */ (0,
|
|
3019
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
2975
3020
|
"input",
|
|
2976
3021
|
{
|
|
2977
3022
|
type,
|
|
2978
3023
|
"data-slot": "input",
|
|
2979
3024
|
className: cn2(
|
|
2980
|
-
"file:text-foreground
|
|
3025
|
+
"file:text-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 text-(--primary) 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 placeholder:text-(--tertiary) disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
|
2981
3026
|
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
|
2982
3027
|
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
|
2983
3028
|
className
|
|
@@ -2988,18 +3033,58 @@ function Input2({ className, type, ...props }) {
|
|
|
2988
3033
|
}
|
|
2989
3034
|
|
|
2990
3035
|
// ../../node_modules/@radix-ui/react-separator/dist/index.mjs
|
|
3036
|
+
var React14 = __toESM(require("react"), 1);
|
|
3037
|
+
|
|
3038
|
+
// ../../node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-primitive/dist/index.mjs
|
|
2991
3039
|
var React13 = __toESM(require("react"), 1);
|
|
3040
|
+
var ReactDOM2 = __toESM(require("react-dom"), 1);
|
|
3041
|
+
var import_react_slot5 = require("@radix-ui/react-slot");
|
|
3042
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
3043
|
+
var NODES2 = [
|
|
3044
|
+
"a",
|
|
3045
|
+
"button",
|
|
3046
|
+
"div",
|
|
3047
|
+
"form",
|
|
3048
|
+
"h2",
|
|
3049
|
+
"h3",
|
|
3050
|
+
"img",
|
|
3051
|
+
"input",
|
|
3052
|
+
"label",
|
|
3053
|
+
"li",
|
|
3054
|
+
"nav",
|
|
3055
|
+
"ol",
|
|
3056
|
+
"p",
|
|
3057
|
+
"select",
|
|
3058
|
+
"span",
|
|
3059
|
+
"svg",
|
|
3060
|
+
"ul"
|
|
3061
|
+
];
|
|
3062
|
+
var Primitive2 = NODES2.reduce((primitive, node) => {
|
|
3063
|
+
const Slot2 = (0, import_react_slot5.createSlot)(`Primitive.${node}`);
|
|
3064
|
+
const Node2 = React13.forwardRef((props, forwardedRef) => {
|
|
3065
|
+
const { asChild, ...primitiveProps } = props;
|
|
3066
|
+
const Comp = asChild ? Slot2 : node;
|
|
3067
|
+
if (typeof window !== "undefined") {
|
|
3068
|
+
window[/* @__PURE__ */ Symbol.for("radix-ui")] = true;
|
|
3069
|
+
}
|
|
3070
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Comp, { ...primitiveProps, ref: forwardedRef });
|
|
3071
|
+
});
|
|
3072
|
+
Node2.displayName = `Primitive.${node}`;
|
|
3073
|
+
return { ...primitive, [node]: Node2 };
|
|
3074
|
+
}, {});
|
|
3075
|
+
|
|
3076
|
+
// ../../node_modules/@radix-ui/react-separator/dist/index.mjs
|
|
2992
3077
|
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
2993
3078
|
var NAME = "Separator";
|
|
2994
3079
|
var DEFAULT_ORIENTATION = "horizontal";
|
|
2995
3080
|
var ORIENTATIONS = ["horizontal", "vertical"];
|
|
2996
|
-
var Separator =
|
|
3081
|
+
var Separator = React14.forwardRef((props, forwardedRef) => {
|
|
2997
3082
|
const { decorative, orientation: orientationProp = DEFAULT_ORIENTATION, ...domProps } = props;
|
|
2998
3083
|
const orientation = isValidOrientation(orientationProp) ? orientationProp : DEFAULT_ORIENTATION;
|
|
2999
3084
|
const ariaOrientation = orientation === "vertical" ? orientation : void 0;
|
|
3000
3085
|
const semanticProps = decorative ? { role: "none" } : { "aria-orientation": ariaOrientation, role: "separator" };
|
|
3001
3086
|
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
3002
|
-
|
|
3087
|
+
Primitive2.div,
|
|
3003
3088
|
{
|
|
3004
3089
|
"data-orientation": orientation,
|
|
3005
3090
|
...semanticProps,
|
|
@@ -3029,7 +3114,7 @@ function Separator2({
|
|
|
3029
3114
|
decorative,
|
|
3030
3115
|
orientation,
|
|
3031
3116
|
className: cn2(
|
|
3032
|
-
"
|
|
3117
|
+
"shrink-0 bg-(--b-secondary) data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
|
|
3033
3118
|
className
|
|
3034
3119
|
),
|
|
3035
3120
|
...props
|
|
@@ -3038,17 +3123,17 @@ function Separator2({
|
|
|
3038
3123
|
}
|
|
3039
3124
|
|
|
3040
3125
|
// src/hooks/useBaseERC20Token.ts
|
|
3041
|
-
var
|
|
3126
|
+
var React15 = __toESM(require("react"), 1);
|
|
3042
3127
|
var import_viem5 = require("viem");
|
|
3043
3128
|
var import_wagmi2 = require("wagmi");
|
|
3044
3129
|
function useBaseERC20Token() {
|
|
3045
3130
|
const { address } = (0, import_wagmi2.useAccount)();
|
|
3046
3131
|
const baseClient = (0, import_wagmi2.usePublicClient)({ chainId: BASE_CHAIN_ID });
|
|
3047
3132
|
const defaultClient = (0, import_wagmi2.usePublicClient)();
|
|
3048
|
-
const [rows, setRows] =
|
|
3049
|
-
const [isLoading, setLoading] =
|
|
3050
|
-
const [error, setError] =
|
|
3051
|
-
|
|
3133
|
+
const [rows, setRows] = React15.useState([]);
|
|
3134
|
+
const [isLoading, setLoading] = React15.useState(false);
|
|
3135
|
+
const [error, setError] = React15.useState(null);
|
|
3136
|
+
React15.useEffect(() => {
|
|
3052
3137
|
let cancelled = false;
|
|
3053
3138
|
async function run() {
|
|
3054
3139
|
const client = baseClient ?? defaultClient;
|
|
@@ -3130,8 +3215,8 @@ var useBaseTokens = () => {
|
|
|
3130
3215
|
|
|
3131
3216
|
// src/modals/CryptoSelectModal.tsx
|
|
3132
3217
|
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
3133
|
-
var CryptoSelectModal =
|
|
3134
|
-
const modal = (0,
|
|
3218
|
+
var CryptoSelectModal = import_nice_modal_react5.default.create(() => {
|
|
3219
|
+
const modal = (0, import_nice_modal_react5.useModal)();
|
|
3135
3220
|
const { isLoading, error, erc20Balances } = useBaseERC20Token();
|
|
3136
3221
|
const { isLoadingNative, nativeError, nativeBalance } = useBaseNativeToken();
|
|
3137
3222
|
const { tokens, tokensIsLoading } = useBaseTokens();
|
|
@@ -3147,7 +3232,6 @@ var CryptoSelectModal = import_nice_modal_react4.default.create(() => {
|
|
|
3147
3232
|
setSelectedPaymentMethod({ type: "CRYPTO" /* CRYPTO */, method: coin });
|
|
3148
3233
|
};
|
|
3149
3234
|
const userCoins = [nativeBalance, ...erc20Balances].filter(Boolean);
|
|
3150
|
-
const userCoinSymbols = userCoins.map((c) => c.symbol);
|
|
3151
3235
|
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Dialog, { open: modal.visible, onOpenChange: modal.remove, children: [
|
|
3152
3236
|
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DialogDescription, { className: "hidden", children: "Crypto Select Modal" }),
|
|
3153
3237
|
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(DialogContent, { showCloseButton: false, className: "max-h-[90vh] gap-0 p-0", children: [
|
|
@@ -3178,14 +3262,7 @@ var CryptoSelectModal = import_nice_modal_react4.default.create(() => {
|
|
|
3178
3262
|
onClick: () => handleSelect(nativeBalance),
|
|
3179
3263
|
children: [
|
|
3180
3264
|
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
3181
|
-
nativeBalance.logoURI && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
3182
|
-
"img",
|
|
3183
|
-
{
|
|
3184
|
-
className: "h-8 w-8 shrink-0",
|
|
3185
|
-
src: nativeBalance.logoURI,
|
|
3186
|
-
alt: `${nativeBalance.symbol} logo`
|
|
3187
|
-
}
|
|
3188
|
-
),
|
|
3265
|
+
nativeBalance.logoURI && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("img", { className: "size-8 shrink-0", src: nativeBalance.logoURI, alt: `${nativeBalance.symbol} logo` }),
|
|
3189
3266
|
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.symbol })
|
|
3190
3267
|
] }),
|
|
3191
3268
|
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.formatted })
|
|
@@ -3224,19 +3301,22 @@ var CryptoSelectModal = import_nice_modal_react4.default.create(() => {
|
|
|
3224
3301
|
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
|
|
3225
3302
|
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
|
|
3226
3303
|
] }),
|
|
3227
|
-
filteredCoins.map((token) =>
|
|
3228
|
-
|
|
3229
|
-
|
|
3230
|
-
|
|
3231
|
-
|
|
3232
|
-
|
|
3233
|
-
|
|
3234
|
-
|
|
3235
|
-
/* @__PURE__ */ (0, import_jsx_runtime34.
|
|
3236
|
-
|
|
3237
|
-
|
|
3238
|
-
|
|
3239
|
-
|
|
3304
|
+
filteredCoins.map((token) => {
|
|
3305
|
+
const userCoin = userCoins.find((c) => c.symbol === token.symbol);
|
|
3306
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
3307
|
+
"button",
|
|
3308
|
+
{
|
|
3309
|
+
disabled: !userCoin,
|
|
3310
|
+
onClick: () => userCoin && handleSelect(userCoin),
|
|
3311
|
+
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",
|
|
3312
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
3313
|
+
token.logoURI ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("img", { className: "size-8 shrink-0", src: token.logoURI, alt: `${token.name} logo` }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "size-8 shrink-0 rounded-full bg-gray-400" }),
|
|
3314
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm font-medium", children: token.symbol })
|
|
3315
|
+
] })
|
|
3316
|
+
},
|
|
3317
|
+
token.symbol
|
|
3318
|
+
);
|
|
3319
|
+
})
|
|
3240
3320
|
] })
|
|
3241
3321
|
] })
|
|
3242
3322
|
] })
|
|
@@ -3248,10 +3328,10 @@ CryptoSelectModal.displayName = "CryptoSelectModal";
|
|
|
3248
3328
|
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
3249
3329
|
var SelectCoinButton = () => {
|
|
3250
3330
|
const openModal = () => {
|
|
3251
|
-
|
|
3331
|
+
import_nice_modal_react6.default.show(CryptoSelectModal);
|
|
3252
3332
|
};
|
|
3253
3333
|
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: [
|
|
3254
|
-
/* @__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
|
|
3334
|
+
/* @__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 size-5 items-center justify-center rounded-full bg-white" }) }),
|
|
3255
3335
|
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex h-full w-full items-center justify-between px-3", children: [
|
|
3256
3336
|
/* @__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" }) }),
|
|
3257
3337
|
/* @__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" }) })
|
|
@@ -3265,11 +3345,11 @@ var SelectedCoin = (props) => {
|
|
|
3265
3345
|
const { coin, balance, logoURI } = props;
|
|
3266
3346
|
const Icon = getSymbolLogo(coin);
|
|
3267
3347
|
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
|
|
3268
|
-
/* @__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
|
|
3269
|
-
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "border-primary flex h-full w-full items-center justify-between rounded-r-md border
|
|
3348
|
+
/* @__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 size-5 items-center justify-center rounded-full bg-white", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "bg-primary size-2.5 rounded-full" }) }) }),
|
|
3349
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "border-primary flex h-full w-full items-center justify-between rounded-r-md border border-l-0! px-3", children: [
|
|
3270
3350
|
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-1", children: [
|
|
3271
3351
|
Icon,
|
|
3272
|
-
!Icon && logoURI && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("img", { className: "mr-1
|
|
3352
|
+
!Icon && logoURI && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("img", { className: "mr-1 size-8 shrink-0", src: logoURI, alt: `${coin} logo` }),
|
|
3273
3353
|
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "font-semibold text-black", children: coin }),
|
|
3274
3354
|
/* @__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" }) })
|
|
3275
3355
|
] }),
|
|
@@ -3342,14 +3422,12 @@ function getCachedWagmiConfig(projectId, appName) {
|
|
|
3342
3422
|
}
|
|
3343
3423
|
var CryptoWrapper = () => {
|
|
3344
3424
|
const { spreePayConfig, configIsLoading } = useSpreePayConfig();
|
|
3345
|
-
const
|
|
3346
|
-
|
|
3347
|
-
|
|
3348
|
-
const cfg2 = getCachedWagmiConfig(spreePayConfig.rainbowProjectId, spreePayConfig.rainbowAppName);
|
|
3349
|
-
setWagmiConfig((prev) => prev ? prev : cfg2);
|
|
3425
|
+
const wagmiConfig = (0, import_react16.useMemo)(() => {
|
|
3426
|
+
if (!spreePayConfig) return null;
|
|
3427
|
+
return getCachedWagmiConfig(spreePayConfig.rainbowProjectId, spreePayConfig.rainbowAppName);
|
|
3350
3428
|
}, [spreePayConfig]);
|
|
3351
3429
|
if (configIsLoading || !wagmiConfig) return null;
|
|
3352
|
-
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_wagmi5.WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_rainbowkit2.RainbowKitProvider, { theme: (0, import_rainbowkit2.lightTheme)({ borderRadius: "large" }), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
3430
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_wagmi5.WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_rainbowkit2.RainbowKitProvider, { theme: (0, import_rainbowkit2.lightTheme)({ borderRadius: "large" }), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_nice_modal_react7.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Crypto, {}) }) }) }) });
|
|
3353
3431
|
};
|
|
3354
3432
|
|
|
3355
3433
|
// src/components/CryptoTab/CryptoTab.tsx
|
|
@@ -3357,21 +3435,21 @@ var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
|
3357
3435
|
var CryptoTab = () => {
|
|
3358
3436
|
const { spreePayConfig } = useSpreePayConfig();
|
|
3359
3437
|
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { children: [
|
|
3360
|
-
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "border-b
|
|
3438
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "border-b border-black/7 px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CryptoWrapper, {}) }),
|
|
3361
3439
|
/* @__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, message: spreePayConfig?.crypto.pointsInfoMessage }) })
|
|
3362
3440
|
] });
|
|
3363
3441
|
};
|
|
3364
3442
|
|
|
3365
3443
|
// src/components/TabButtons.tsx
|
|
3366
3444
|
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
3367
|
-
var TabButton = ({ isDisabled =
|
|
3445
|
+
var TabButton = ({ isDisabled = false, isActive, children, onClick }) => {
|
|
3368
3446
|
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
3369
3447
|
"button",
|
|
3370
3448
|
{
|
|
3371
3449
|
disabled: isDisabled,
|
|
3372
3450
|
onClick,
|
|
3373
3451
|
className: cn(
|
|
3374
|
-
"flex w-[132px] flex-col items-baseline rounded-sm border
|
|
3452
|
+
"flex w-[132px] flex-col items-baseline rounded-sm border border-black/50 px-2.5 py-1.5 text-sm text-black",
|
|
3375
3453
|
{ "opacity-50": !isActive || isDisabled },
|
|
3376
3454
|
{ "cursor-not-allowed": isDisabled },
|
|
3377
3455
|
{ "bg-primary/7 border-primary text-primary": isActive }
|
|
@@ -3382,83 +3460,62 @@ var TabButton = ({ isDisabled = true, isActive, children, onClick }) => {
|
|
|
3382
3460
|
};
|
|
3383
3461
|
var TabButtons = (props) => {
|
|
3384
3462
|
const { value, onChange } = props;
|
|
3385
|
-
const { spreePayConfig } = useSpreePayConfig();
|
|
3463
|
+
const { spreePayConfig, configIsLoading } = useSpreePayConfig();
|
|
3386
3464
|
const handleChange = (type) => () => {
|
|
3387
3465
|
if (value !== type) {
|
|
3388
3466
|
onChange({ type, method: null });
|
|
3389
3467
|
}
|
|
3390
3468
|
};
|
|
3391
3469
|
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex gap-2", children: [
|
|
3392
|
-
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
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
|
-
)
|
|
3470
|
+
configIsLoading && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
|
|
3471
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "bg-primary/7 h-[58px] w-[132px] animate-pulse rounded-sm" }),
|
|
3472
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "bg-primary/7 h-[58px] w-[132px] animate-pulse rounded-sm" })
|
|
3473
|
+
] }),
|
|
3474
|
+
spreePayConfig?.creditCard.enabled && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(TabButton, { onClick: handleChange("CREDIT_CARD" /* CREDIT_CARD */), isActive: value === "CREDIT_CARD" /* CREDIT_CARD */, children: [
|
|
3475
|
+
/* @__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)(
|
|
3476
|
+
"path",
|
|
3477
|
+
{
|
|
3478
|
+
fill: "currentColor",
|
|
3479
|
+
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"
|
|
3480
|
+
}
|
|
3481
|
+
) }),
|
|
3482
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-sm font-medium", children: "Card" })
|
|
3483
|
+
] }),
|
|
3484
|
+
spreePayConfig?.crypto.enabled && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(TabButton, { onClick: handleChange("CRYPTO" /* CRYPTO */), isActive: value === "CRYPTO" /* CRYPTO */, children: [
|
|
3485
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("svg", { className: "my-1", xmlns: "http://www.w3.org/2000/svg", width: "30", height: "16", fill: "none", children: [
|
|
3486
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
3487
|
+
"path",
|
|
3488
|
+
{
|
|
3489
|
+
fill: "currentColor",
|
|
3490
|
+
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"
|
|
3491
|
+
}
|
|
3492
|
+
),
|
|
3493
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
3494
|
+
"path",
|
|
3495
|
+
{
|
|
3496
|
+
fill: "currentColor",
|
|
3497
|
+
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"
|
|
3498
|
+
}
|
|
3499
|
+
),
|
|
3500
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "2" })
|
|
3501
|
+
] }),
|
|
3502
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-sm font-medium", children: "Crypto" })
|
|
3503
|
+
] })
|
|
3438
3504
|
] });
|
|
3439
3505
|
};
|
|
3440
3506
|
|
|
3441
|
-
// src/
|
|
3507
|
+
// src/SpreePayContent.tsx
|
|
3442
3508
|
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
3443
|
-
var
|
|
3509
|
+
var SpreePayContent = ({ isLoggedIn }) => {
|
|
3444
3510
|
const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
|
|
3445
|
-
return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "
|
|
3446
|
-
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex w-full flex-col gap-4 border-b
|
|
3511
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "w-full overflow-hidden rounded-3xl border border-black/25 bg-white", children: [
|
|
3512
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex w-full flex-col gap-4 border-b border-black/7 px-5 py-5 md:px-7 md:py-6", children: [
|
|
3447
3513
|
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h2", { className: "text-primary text-2xl font-semibold", children: "Choose a Payment Method" }),
|
|
3448
3514
|
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
|
|
3449
3515
|
] }),
|
|
3450
3516
|
selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CreditCardTab, {}),
|
|
3451
|
-
selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CryptoTab, {})
|
|
3452
|
-
|
|
3453
|
-
};
|
|
3454
|
-
|
|
3455
|
-
// src/SpreePayContent.tsx
|
|
3456
|
-
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
3457
|
-
var SpreePayContent = ({ isLoggedIn }) => {
|
|
3458
|
-
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "w-full", children: [
|
|
3459
|
-
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Tabs, {}),
|
|
3460
|
-
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(CheckoutButton, { isLoggedIn }),
|
|
3461
|
-
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SpreeLegal, {})
|
|
3517
|
+
selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CryptoTab, {}),
|
|
3518
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CheckoutButton, { isLoggedIn })
|
|
3462
3519
|
] });
|
|
3463
3520
|
};
|
|
3464
3521
|
|
|
@@ -3466,11 +3523,13 @@ var SpreePayContent = ({ isLoggedIn }) => {
|
|
|
3466
3523
|
var import_react17 = require("react");
|
|
3467
3524
|
var import_keycloak_js = __toESM(require("keycloak-js"), 1);
|
|
3468
3525
|
var refreshAheadSeconds = 60;
|
|
3469
|
-
function useKeycloakSSO(
|
|
3470
|
-
const { url, realm, clientId, ssoPageURI, enabled } =
|
|
3526
|
+
function useKeycloakSSO(config2) {
|
|
3527
|
+
const { url, realm, clientId, ssoPageURI, enabled } = config2;
|
|
3471
3528
|
const initRef = (0, import_react17.useRef)(false);
|
|
3472
3529
|
const kcRef = (0, import_react17.useRef)(null);
|
|
3473
3530
|
const refreshTimerRef = (0, import_react17.useRef)(null);
|
|
3531
|
+
const scheduleRefreshRef = (0, import_react17.useRef)(() => {
|
|
3532
|
+
});
|
|
3474
3533
|
const [error, setError] = (0, import_react17.useState)(null);
|
|
3475
3534
|
const [isChecking, setIsChecking] = (0, import_react17.useState)(enabled);
|
|
3476
3535
|
const [accessToken, setAccessToken] = (0, import_react17.useState)(null);
|
|
@@ -3488,17 +3547,19 @@ function useKeycloakSSO(config) {
|
|
|
3488
3547
|
kc.updateToken(refreshAheadSeconds).then((refreshed) => {
|
|
3489
3548
|
if (refreshed) {
|
|
3490
3549
|
setAccessToken(kc.token ?? null);
|
|
3491
|
-
|
|
3550
|
+
scheduleRefreshRef.current();
|
|
3492
3551
|
}
|
|
3493
3552
|
}).catch((_) => {
|
|
3494
3553
|
kc.login().catch(console.error);
|
|
3495
3554
|
});
|
|
3496
3555
|
}, delayMs);
|
|
3497
3556
|
}, []);
|
|
3557
|
+
(0, import_react17.useEffect)(() => {
|
|
3558
|
+
scheduleRefreshRef.current = scheduleRefresh;
|
|
3559
|
+
}, [scheduleRefresh]);
|
|
3498
3560
|
(0, import_react17.useEffect)(() => {
|
|
3499
3561
|
if (initRef.current || !enabled) return;
|
|
3500
3562
|
initRef.current = true;
|
|
3501
|
-
setIsChecking(true);
|
|
3502
3563
|
const kc = new import_keycloak_js.default({ url, realm, clientId });
|
|
3503
3564
|
kcRef.current = kc;
|
|
3504
3565
|
kc.onTokenExpired = () => {
|
|
@@ -3530,13 +3591,12 @@ function useKeycloakSSO(config) {
|
|
|
3530
3591
|
}
|
|
3531
3592
|
|
|
3532
3593
|
// src/SpreePay.tsx
|
|
3533
|
-
var
|
|
3594
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
3534
3595
|
var SpreePayInner = () => {
|
|
3535
|
-
const rootRef = (0, import_react18.useRef)(null);
|
|
3536
3596
|
const [portalEl, setPortalEl] = (0, import_react18.useState)(null);
|
|
3537
|
-
(0, import_react18.
|
|
3538
|
-
if (!
|
|
3539
|
-
const el =
|
|
3597
|
+
const rootRef = (0, import_react18.useCallback)((node) => {
|
|
3598
|
+
if (!node) return;
|
|
3599
|
+
const el = node.querySelector(":scope > .sl-spreepay__portal");
|
|
3540
3600
|
setPortalEl(el ?? null);
|
|
3541
3601
|
}, []);
|
|
3542
3602
|
(0, import_react18.useEffect)(() => {
|
|
@@ -3544,7 +3604,7 @@ var SpreePayInner = () => {
|
|
|
3544
3604
|
}, []);
|
|
3545
3605
|
const { env } = useSpreePayEnv();
|
|
3546
3606
|
const { staticConfig, appProps } = useStaticConfig();
|
|
3547
|
-
const tenantId = env?.tenantId
|
|
3607
|
+
const tenantId = env?.tenantId;
|
|
3548
3608
|
const { isChecking, accessToken } = useKeycloakSSO({
|
|
3549
3609
|
realm: tenantId,
|
|
3550
3610
|
url: staticConfig.keycloakUrl,
|
|
@@ -3553,6 +3613,7 @@ var SpreePayInner = () => {
|
|
|
3553
3613
|
enabled: !env?.accessToken
|
|
3554
3614
|
});
|
|
3555
3615
|
const _accessToken = env.accessToken ?? accessToken;
|
|
3616
|
+
const unauthenticatedFetcher = (0, import_react18.useCallback)(() => Promise.resolve(null), []);
|
|
3556
3617
|
const slapiFetcher = (0, import_react18.useMemo)(() => {
|
|
3557
3618
|
if (_accessToken) {
|
|
3558
3619
|
return registerApi({
|
|
@@ -3561,16 +3622,16 @@ var SpreePayInner = () => {
|
|
|
3561
3622
|
baseUrl: staticConfig.slapiUrl
|
|
3562
3623
|
});
|
|
3563
3624
|
}
|
|
3564
|
-
|
|
3625
|
+
return unauthenticatedFetcher;
|
|
3626
|
+
}, [_accessToken, staticConfig, tenantId, unauthenticatedFetcher]);
|
|
3565
3627
|
const getContent = () => {
|
|
3566
3628
|
if (isChecking) {
|
|
3567
|
-
return /* @__PURE__ */ (0,
|
|
3568
|
-
/* @__PURE__ */ (0,
|
|
3569
|
-
/* @__PURE__ */ (0,
|
|
3570
|
-
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SpreeLegal, {})
|
|
3629
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex w-full flex-col", children: [
|
|
3630
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "bg-primary/8 mb-4 h-[315px] animate-pulse rounded-3xl" }),
|
|
3631
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "bg-primary/8 h-[135px] animate-pulse rounded-3xl" })
|
|
3571
3632
|
] });
|
|
3572
3633
|
}
|
|
3573
|
-
return /* @__PURE__ */ (0,
|
|
3634
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
3574
3635
|
import_swr5.SWRConfig,
|
|
3575
3636
|
{
|
|
3576
3637
|
value: {
|
|
@@ -3579,17 +3640,17 @@ var SpreePayInner = () => {
|
|
|
3579
3640
|
revalidateOnFocus: false,
|
|
3580
3641
|
revalidateIfStale: false
|
|
3581
3642
|
},
|
|
3582
|
-
children: /* @__PURE__ */ (0,
|
|
3643
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_nice_modal_react8.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SpreePayContent, { isLoggedIn: Boolean(_accessToken) }) }) })
|
|
3583
3644
|
}
|
|
3584
3645
|
);
|
|
3585
3646
|
};
|
|
3586
|
-
return /* @__PURE__ */ (0,
|
|
3587
|
-
/* @__PURE__ */ (0,
|
|
3647
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { ref: rootRef, className: cn("sl-spreepay", appProps.className), children: [
|
|
3648
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "sl-spreepay__portal" }),
|
|
3588
3649
|
getContent()
|
|
3589
3650
|
] });
|
|
3590
3651
|
};
|
|
3591
3652
|
var SpreePay = (props) => {
|
|
3592
|
-
return /* @__PURE__ */ (0,
|
|
3653
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(StaticConfigProvider, { props, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SpreePayInner, {}) });
|
|
3593
3654
|
};
|
|
3594
3655
|
|
|
3595
3656
|
// src/hooks/useCapture3DS.ts
|