@superlogic/spree-pay 0.1.35 → 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/build/index.cjs +382 -377
- package/build/index.css +114 -136
- package/build/index.d.cts +1 -1
- package/build/index.d.ts +1 -1
- package/build/index.js +380 -375
- package/package.json +1 -1
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",
|
|
@@ -161,6 +162,11 @@ var CONFIG = {
|
|
|
161
162
|
slapiUrl: "https://slapi.dev.umusicpassport.com",
|
|
162
163
|
keycloakUrl: "https://auth.dev.umusicpassport.com",
|
|
163
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"
|
|
164
170
|
}
|
|
165
171
|
},
|
|
166
172
|
stg: {
|
|
@@ -183,6 +189,11 @@ var CONFIG = {
|
|
|
183
189
|
slapiUrl: "https://slapi.stg.umusicpassport.com",
|
|
184
190
|
keycloakUrl: "https://auth.stg.umusicpassport.com",
|
|
185
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"
|
|
186
197
|
}
|
|
187
198
|
},
|
|
188
199
|
prod: {
|
|
@@ -205,9 +216,17 @@ var CONFIG = {
|
|
|
205
216
|
slapiUrl: "https://slapi.umusicpassport.com",
|
|
206
217
|
keycloakUrl: "https://auth.umusicpassport.com",
|
|
207
218
|
keycloakClientId: "oneof-next"
|
|
219
|
+
},
|
|
220
|
+
cdc: {
|
|
221
|
+
slapiUrl: "https://slapi.superlogic.com",
|
|
222
|
+
keycloakUrl: "https://auth.superlogic.com",
|
|
223
|
+
keycloakClientId: "oneof-next"
|
|
208
224
|
}
|
|
209
225
|
}
|
|
210
226
|
};
|
|
227
|
+
|
|
228
|
+
// src/context/StaticConfigContext.tsx
|
|
229
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
211
230
|
var StaticConfigContext = (0, import_react2.createContext)(null);
|
|
212
231
|
var StaticConfigProvider = ({ children, props }) => {
|
|
213
232
|
const { env } = useSpreePayEnv();
|
|
@@ -216,8 +235,12 @@ var StaticConfigProvider = ({ children, props }) => {
|
|
|
216
235
|
setAppProps(props);
|
|
217
236
|
}, [props]);
|
|
218
237
|
const staticConfig = (0, import_react2.useMemo)(() => {
|
|
219
|
-
const envConfig =
|
|
220
|
-
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";
|
|
221
244
|
return envConfig[appKey];
|
|
222
245
|
}, [env.environment, env.tenantId]);
|
|
223
246
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StaticConfigContext.Provider, { value: { staticConfig, appProps }, children });
|
|
@@ -385,50 +408,38 @@ var CheckoutButton = ({ isLoggedIn }) => {
|
|
|
385
408
|
}
|
|
386
409
|
return "Checkout";
|
|
387
410
|
};
|
|
388
|
-
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex w-full flex-col
|
|
389
|
-
/* @__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: [
|
|
390
413
|
"By clicking on the button below I acknowledge that I have read and accepted the",
|
|
391
414
|
" ",
|
|
392
415
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("a", { className: "underline", href: spreePayConfig?.termsConditionsUrl, target: "_blank", rel: "noreferrer", children: "Terms and Conditions" }),
|
|
393
416
|
"."
|
|
394
|
-
] })
|
|
417
|
+
] }),
|
|
395
418
|
isLoggedIn ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: onProcess && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
396
419
|
"button",
|
|
397
420
|
{
|
|
398
421
|
disabled: isDisabled,
|
|
399
422
|
onClick: onProcess,
|
|
400
|
-
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",
|
|
401
424
|
children: getCheckoutContent()
|
|
402
425
|
}
|
|
403
426
|
) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
404
427
|
"a",
|
|
405
428
|
{
|
|
406
429
|
href: `${staticConfig.keycloakUrl}/realms/${env.tenantId}/protocol/openid-connect/auth?client_id=${staticConfig.keycloakClientId}&response_type=code&redirect_uri=${window.location.href}`,
|
|
407
|
-
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",
|
|
408
431
|
children: "Log in / Sign up for an AIR account"
|
|
409
432
|
}
|
|
410
|
-
)
|
|
411
|
-
|
|
412
|
-
}
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
{
|
|
421
|
-
fill: "#000",
|
|
422
|
-
fillOpacity: ".5",
|
|
423
|
-
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"
|
|
424
|
-
}
|
|
425
|
-
) }),
|
|
426
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "text-xs text-black/50", children: [
|
|
427
|
-
"Spree enables seamless crypto payments for real-world goods, travel, and experiences. Enjoy secure, fast transactions and earn rewards.",
|
|
428
|
-
" ",
|
|
429
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("a", { className: "underline", href: "https://www.spree.finance/", target: "_blank", rel: "noreferrer", children: "Learn more" }),
|
|
430
|
-
" ",
|
|
431
|
-
"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
|
+
) })
|
|
432
443
|
] })
|
|
433
444
|
] });
|
|
434
445
|
};
|
|
@@ -475,17 +486,17 @@ function usePortalContainer() {
|
|
|
475
486
|
}
|
|
476
487
|
|
|
477
488
|
// src/ui/dialog.tsx
|
|
478
|
-
var
|
|
489
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
479
490
|
function Dialog({ ...props }) {
|
|
480
|
-
return /* @__PURE__ */ (0,
|
|
491
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
|
|
481
492
|
}
|
|
482
493
|
function DialogPortal({ ...props }) {
|
|
483
494
|
const container = usePortalContainer();
|
|
484
495
|
const safeContainer = container && document.body.contains(container) ? container : void 0;
|
|
485
|
-
return /* @__PURE__ */ (0,
|
|
496
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogPrimitive.Portal, { container: safeContainer, "data-slot": "dialog-portal", ...props });
|
|
486
497
|
}
|
|
487
498
|
function DialogOverlay({ className, ...props }) {
|
|
488
|
-
return /* @__PURE__ */ (0,
|
|
499
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
489
500
|
DialogPrimitive.Overlay,
|
|
490
501
|
{
|
|
491
502
|
"data-slot": "dialog-overlay",
|
|
@@ -503,9 +514,9 @@ function DialogContent({
|
|
|
503
514
|
showCloseButton = true,
|
|
504
515
|
...props
|
|
505
516
|
}) {
|
|
506
|
-
return /* @__PURE__ */ (0,
|
|
507
|
-
/* @__PURE__ */ (0,
|
|
508
|
-
/* @__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)(
|
|
509
520
|
DialogPrimitive.Content,
|
|
510
521
|
{
|
|
511
522
|
"data-slot": "dialog-content",
|
|
@@ -516,14 +527,14 @@ function DialogContent({
|
|
|
516
527
|
...props,
|
|
517
528
|
children: [
|
|
518
529
|
children,
|
|
519
|
-
showCloseButton && /* @__PURE__ */ (0,
|
|
530
|
+
showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
520
531
|
DialogPrimitive.Close,
|
|
521
532
|
{
|
|
522
533
|
"data-slot": "dialog-close",
|
|
523
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",
|
|
524
535
|
children: [
|
|
525
|
-
/* @__PURE__ */ (0,
|
|
526
|
-
/* @__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" })
|
|
527
538
|
]
|
|
528
539
|
}
|
|
529
540
|
)
|
|
@@ -533,7 +544,7 @@ function DialogContent({
|
|
|
533
544
|
] });
|
|
534
545
|
}
|
|
535
546
|
function DialogTitle({ className, ...props }) {
|
|
536
|
-
return /* @__PURE__ */ (0,
|
|
547
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
537
548
|
DialogPrimitive.Title,
|
|
538
549
|
{
|
|
539
550
|
"data-slot": "dialog-title",
|
|
@@ -543,7 +554,7 @@ function DialogTitle({ className, ...props }) {
|
|
|
543
554
|
);
|
|
544
555
|
}
|
|
545
556
|
function DialogDescription({ className, ...props }) {
|
|
546
|
-
return /* @__PURE__ */ (0,
|
|
557
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
547
558
|
DialogPrimitive.Description,
|
|
548
559
|
{
|
|
549
560
|
"data-slot": "dialog-description",
|
|
@@ -554,7 +565,7 @@ function DialogDescription({ className, ...props }) {
|
|
|
554
565
|
}
|
|
555
566
|
|
|
556
567
|
// src/modals/Iframe3ds.tsx
|
|
557
|
-
var
|
|
568
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
558
569
|
var Iframe3ds = import_nice_modal_react.default.create(({ url }) => {
|
|
559
570
|
const modal = (0, import_nice_modal_react.useModal)();
|
|
560
571
|
(0, import_react4.useEffect)(() => {
|
|
@@ -567,9 +578,9 @@ var Iframe3ds = import_nice_modal_react.default.create(({ url }) => {
|
|
|
567
578
|
modal.reject();
|
|
568
579
|
modal.remove();
|
|
569
580
|
};
|
|
570
|
-
return /* @__PURE__ */ (0,
|
|
571
|
-
/* @__PURE__ */ (0,
|
|
572
|
-
/* @__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" })
|
|
573
584
|
] }) });
|
|
574
585
|
});
|
|
575
586
|
Iframe3ds.displayName = "Iframe3ds";
|
|
@@ -640,10 +651,10 @@ var slapiApi = {
|
|
|
640
651
|
throw new Error("slapiApi is not configured. Call registerApi(...) first.");
|
|
641
652
|
}
|
|
642
653
|
};
|
|
643
|
-
var registerApi = (
|
|
644
|
-
cfg.baseUrl =
|
|
645
|
-
cfg.accessToken =
|
|
646
|
-
cfg.tenantId =
|
|
654
|
+
var registerApi = (config2) => {
|
|
655
|
+
cfg.baseUrl = config2.baseUrl;
|
|
656
|
+
cfg.accessToken = config2.accessToken;
|
|
657
|
+
cfg.tenantId = config2.tenantId;
|
|
647
658
|
slapiApi = {
|
|
648
659
|
get: async (key) => {
|
|
649
660
|
const url = buildUrl(key);
|
|
@@ -933,6 +944,7 @@ var usePointsPayment = (mode = "web2") => {
|
|
|
933
944
|
};
|
|
934
945
|
|
|
935
946
|
// src/hooks/payments/useSplitCardPayments.ts
|
|
947
|
+
var import_nice_modal_react4 = __toESM(require("@ebay/nice-modal-react"), 1);
|
|
936
948
|
var useSplitCardPayments = (mode = "web2") => {
|
|
937
949
|
const { selectedPaymentMethod } = useSpreePaymentMethod();
|
|
938
950
|
const { env } = useSpreePayEnv();
|
|
@@ -967,6 +979,12 @@ var useSplitCardPayments = (mode = "web2") => {
|
|
|
967
979
|
amount: points
|
|
968
980
|
}
|
|
969
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
|
+
}
|
|
970
988
|
const cardStatus = await longPollCardStatus(paymentResData.id);
|
|
971
989
|
if (mode === "web3") {
|
|
972
990
|
const wallet = peekAirWallet();
|
|
@@ -1029,7 +1047,7 @@ var import_react_stripe_js2 = require("@stripe/react-stripe-js");
|
|
|
1029
1047
|
var import_stripe_js = require("@stripe/stripe-js");
|
|
1030
1048
|
|
|
1031
1049
|
// src/components/CreditCardTab/CreditCard/CardsList.tsx
|
|
1032
|
-
var
|
|
1050
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
1033
1051
|
var isRemoveDisabled = true;
|
|
1034
1052
|
var CardListItem = ({ card, isSelected, onSelect }) => {
|
|
1035
1053
|
const handleSelect = () => {
|
|
@@ -1039,17 +1057,17 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
|
|
|
1039
1057
|
e.stopPropagation();
|
|
1040
1058
|
if (isSelected || isRemoveDisabled) return;
|
|
1041
1059
|
};
|
|
1042
|
-
return /* @__PURE__ */ (0,
|
|
1043
|
-
/* @__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)(
|
|
1044
1062
|
"div",
|
|
1045
1063
|
{
|
|
1046
1064
|
className: cn("flex h-full w-11 items-center justify-center bg-black/10", {
|
|
1047
1065
|
"bg-primary": isSelected
|
|
1048
1066
|
}),
|
|
1049
|
-
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" }) })
|
|
1050
1068
|
}
|
|
1051
1069
|
),
|
|
1052
|
-
/* @__PURE__ */ (0,
|
|
1070
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
1053
1071
|
"div",
|
|
1054
1072
|
{
|
|
1055
1073
|
className: cn(
|
|
@@ -1059,13 +1077,13 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
|
|
|
1059
1077
|
}
|
|
1060
1078
|
),
|
|
1061
1079
|
children: [
|
|
1062
|
-
/* @__PURE__ */ (0,
|
|
1063
|
-
/* @__PURE__ */ (0,
|
|
1064
|
-
/* @__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: [
|
|
1065
1083
|
"Ending in ",
|
|
1066
|
-
/* @__PURE__ */ (0,
|
|
1084
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-black", children: card.lastFourNumbers })
|
|
1067
1085
|
] }),
|
|
1068
|
-
/* @__PURE__ */ (0,
|
|
1086
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1069
1087
|
"div",
|
|
1070
1088
|
{
|
|
1071
1089
|
onClick: handleRemoveCard,
|
|
@@ -1073,9 +1091,9 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
|
|
|
1073
1091
|
"cursor-not-allowed opacity-50": isSelected || isRemoveDisabled
|
|
1074
1092
|
// 'cursor-pointer': !isSelected || !isRemoveDisabled,
|
|
1075
1093
|
}),
|
|
1076
|
-
children: /* @__PURE__ */ (0,
|
|
1077
|
-
/* @__PURE__ */ (0,
|
|
1078
|
-
/* @__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)(
|
|
1079
1097
|
"path",
|
|
1080
1098
|
{
|
|
1081
1099
|
fill: "#000",
|
|
@@ -1095,13 +1113,13 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
|
|
|
1095
1113
|
var CardsList = ({ selectedCard, setCard }) => {
|
|
1096
1114
|
const { cards, cardsIsLoading } = useCards();
|
|
1097
1115
|
if (cardsIsLoading) {
|
|
1098
|
-
return /* @__PURE__ */ (0,
|
|
1099
|
-
/* @__PURE__ */ (0,
|
|
1100
|
-
/* @__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" })
|
|
1101
1119
|
] });
|
|
1102
1120
|
}
|
|
1103
1121
|
if (cards.length === 0) return null;
|
|
1104
|
-
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)) });
|
|
1105
1123
|
};
|
|
1106
1124
|
|
|
1107
1125
|
// src/components/CreditCardTab/CreditCard/CreditCardForm.tsx
|
|
@@ -1111,7 +1129,7 @@ var import_react_stripe_js = require("@stripe/react-stripe-js");
|
|
|
1111
1129
|
// src/ui/button.tsx
|
|
1112
1130
|
var import_react_slot = require("@radix-ui/react-slot");
|
|
1113
1131
|
var import_class_variance_authority = require("class-variance-authority");
|
|
1114
|
-
var
|
|
1132
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
1115
1133
|
var buttonVariants = (0, import_class_variance_authority.cva)(
|
|
1116
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",
|
|
1117
1135
|
{
|
|
@@ -1146,15 +1164,15 @@ function Button({
|
|
|
1146
1164
|
...props
|
|
1147
1165
|
}) {
|
|
1148
1166
|
const Comp = asChild ? import_react_slot.Slot : "button";
|
|
1149
|
-
return /* @__PURE__ */ (0,
|
|
1167
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Comp, { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ...props });
|
|
1150
1168
|
}
|
|
1151
1169
|
|
|
1152
1170
|
// src/ui/checkbox.tsx
|
|
1153
1171
|
var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"), 1);
|
|
1154
1172
|
var import_lucide_react2 = require("lucide-react");
|
|
1155
|
-
var
|
|
1173
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
1156
1174
|
function Checkbox({ className, ...props }) {
|
|
1157
|
-
return /* @__PURE__ */ (0,
|
|
1175
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1158
1176
|
CheckboxPrimitive.Root,
|
|
1159
1177
|
{
|
|
1160
1178
|
"data-slot": "checkbox",
|
|
@@ -1163,12 +1181,12 @@ function Checkbox({ className, ...props }) {
|
|
|
1163
1181
|
className
|
|
1164
1182
|
),
|
|
1165
1183
|
...props,
|
|
1166
|
-
children: /* @__PURE__ */ (0,
|
|
1184
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1167
1185
|
CheckboxPrimitive.Indicator,
|
|
1168
1186
|
{
|
|
1169
1187
|
"data-slot": "checkbox-indicator",
|
|
1170
1188
|
className: "flex items-center justify-center text-current transition-none",
|
|
1171
|
-
children: /* @__PURE__ */ (0,
|
|
1189
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react2.CheckIcon, { className: "size-3.5 text-white" })
|
|
1172
1190
|
}
|
|
1173
1191
|
)
|
|
1174
1192
|
}
|
|
@@ -1177,9 +1195,9 @@ function Checkbox({ className, ...props }) {
|
|
|
1177
1195
|
|
|
1178
1196
|
// src/ui/label.tsx
|
|
1179
1197
|
var LabelPrimitive = __toESM(require("@radix-ui/react-label"), 1);
|
|
1180
|
-
var
|
|
1198
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
1181
1199
|
function Label({ className, ...props }) {
|
|
1182
|
-
return /* @__PURE__ */ (0,
|
|
1200
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1183
1201
|
LabelPrimitive.Root,
|
|
1184
1202
|
{
|
|
1185
1203
|
"data-slot": "label",
|
|
@@ -1193,7 +1211,7 @@ function Label({ className, ...props }) {
|
|
|
1193
1211
|
}
|
|
1194
1212
|
|
|
1195
1213
|
// src/components/CreditCardTab/CreditCard/CreditCardForm.tsx
|
|
1196
|
-
var
|
|
1214
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
1197
1215
|
var style = {
|
|
1198
1216
|
base: {
|
|
1199
1217
|
fontSize: "16px",
|
|
@@ -1251,9 +1269,9 @@ var CreditCardForm = ({ cancel, saveCard }) => {
|
|
|
1251
1269
|
setCardError("An error occurred while processing your card. Please try again.");
|
|
1252
1270
|
}
|
|
1253
1271
|
};
|
|
1254
|
-
return /* @__PURE__ */ (0,
|
|
1255
|
-
/* @__PURE__ */ (0,
|
|
1256
|
-
/* @__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)(
|
|
1257
1275
|
import_react_stripe_js.CardNumberElement,
|
|
1258
1276
|
{
|
|
1259
1277
|
options: {
|
|
@@ -1263,8 +1281,8 @@ var CreditCardForm = ({ cancel, saveCard }) => {
|
|
|
1263
1281
|
}
|
|
1264
1282
|
}
|
|
1265
1283
|
),
|
|
1266
|
-
/* @__PURE__ */ (0,
|
|
1267
|
-
/* @__PURE__ */ (0,
|
|
1284
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex w-full gap-1", children: [
|
|
1285
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1268
1286
|
import_react_stripe_js.CardExpiryElement,
|
|
1269
1287
|
{
|
|
1270
1288
|
options: {
|
|
@@ -1274,7 +1292,7 @@ var CreditCardForm = ({ cancel, saveCard }) => {
|
|
|
1274
1292
|
}
|
|
1275
1293
|
}
|
|
1276
1294
|
),
|
|
1277
|
-
/* @__PURE__ */ (0,
|
|
1295
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1278
1296
|
import_react_stripe_js.CardCvcElement,
|
|
1279
1297
|
{
|
|
1280
1298
|
options: {
|
|
@@ -1285,24 +1303,24 @@ var CreditCardForm = ({ cancel, saveCard }) => {
|
|
|
1285
1303
|
}
|
|
1286
1304
|
)
|
|
1287
1305
|
] }),
|
|
1288
|
-
cardError && /* @__PURE__ */ (0,
|
|
1306
|
+
cardError && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-destructive mt-1 text-sm", children: cardError })
|
|
1289
1307
|
] }),
|
|
1290
|
-
/* @__PURE__ */ (0,
|
|
1291
|
-
/* @__PURE__ */ (0,
|
|
1292
|
-
/* @__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" })
|
|
1293
1311
|
] }),
|
|
1294
|
-
/* @__PURE__ */ (0,
|
|
1295
|
-
/* @__PURE__ */ (0,
|
|
1296
|
-
/* @__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" })
|
|
1297
1315
|
] })
|
|
1298
1316
|
] });
|
|
1299
1317
|
};
|
|
1300
1318
|
|
|
1301
1319
|
// src/components/CreditCardTab/CreditCard/CreditCard.tsx
|
|
1302
|
-
var
|
|
1320
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
1303
1321
|
var StripeWrapper = (props) => {
|
|
1304
1322
|
const stripePromise = (0, import_react6.useMemo)(() => (0, import_stripe_js.loadStripe)(props.publicKey), [props.publicKey]);
|
|
1305
|
-
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 }) });
|
|
1306
1324
|
};
|
|
1307
1325
|
var CreditCard = () => {
|
|
1308
1326
|
const [showForm, setShowForm] = (0, import_react6.useState)(false);
|
|
@@ -1320,19 +1338,19 @@ var CreditCard = () => {
|
|
|
1320
1338
|
const handleCancel = () => {
|
|
1321
1339
|
setShowForm(false);
|
|
1322
1340
|
};
|
|
1323
|
-
return /* @__PURE__ */ (0,
|
|
1324
|
-
/* @__PURE__ */ (0,
|
|
1325
|
-
!showForm && /* @__PURE__ */ (0,
|
|
1326
|
-
/* @__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)(
|
|
1327
1345
|
CardsList,
|
|
1328
1346
|
{
|
|
1329
1347
|
selectedCard: selectedPaymentMethod?.type === "CREDIT_CARD" /* CREDIT_CARD */ ? selectedPaymentMethod.method : null,
|
|
1330
1348
|
setCard
|
|
1331
1349
|
}
|
|
1332
1350
|
),
|
|
1333
|
-
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" })
|
|
1334
1352
|
] }),
|
|
1335
|
-
spreePayConfig?.stripePublicKey && showForm && /* @__PURE__ */ (0,
|
|
1353
|
+
spreePayConfig?.stripePublicKey && showForm && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(StripeWrapper, { onCancel: handleCancel, saveNewCard, publicKey: spreePayConfig.stripePublicKey })
|
|
1336
1354
|
] });
|
|
1337
1355
|
};
|
|
1338
1356
|
|
|
@@ -1344,9 +1362,9 @@ var import_react7 = require("react");
|
|
|
1344
1362
|
|
|
1345
1363
|
// src/ui/switch.tsx
|
|
1346
1364
|
var SwitchPrimitive = __toESM(require("@radix-ui/react-switch"), 1);
|
|
1347
|
-
var
|
|
1365
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
1348
1366
|
function Switch({ className, ...props }) {
|
|
1349
|
-
return /* @__PURE__ */ (0,
|
|
1367
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1350
1368
|
SwitchPrimitive.Root,
|
|
1351
1369
|
{
|
|
1352
1370
|
"data-slot": "switch",
|
|
@@ -1355,7 +1373,7 @@ function Switch({ className, ...props }) {
|
|
|
1355
1373
|
className
|
|
1356
1374
|
),
|
|
1357
1375
|
...props,
|
|
1358
|
-
children: /* @__PURE__ */ (0,
|
|
1376
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1359
1377
|
SwitchPrimitive.Thumb,
|
|
1360
1378
|
{
|
|
1361
1379
|
"data-slot": "switch-thumb",
|
|
@@ -1367,35 +1385,35 @@ function Switch({ className, ...props }) {
|
|
|
1367
1385
|
}
|
|
1368
1386
|
|
|
1369
1387
|
// src/components/common/PointsSwitch.tsx
|
|
1370
|
-
var
|
|
1388
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
1371
1389
|
var PointsSwitch = (props) => {
|
|
1372
1390
|
const { disabled = false, value, onChange, message } = props;
|
|
1373
1391
|
const { spreePayConfig } = useSpreePayConfig();
|
|
1374
1392
|
const { appProps } = useStaticConfig();
|
|
1375
1393
|
const { balance } = useSlapiBalance();
|
|
1376
1394
|
const id = (0, import_react7.useId)();
|
|
1377
|
-
return /* @__PURE__ */ (0,
|
|
1378
|
-
/* @__PURE__ */ (0,
|
|
1379
|
-
/* @__PURE__ */ (0,
|
|
1380
|
-
/* @__PURE__ */ (0,
|
|
1381
|
-
/* @__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)(
|
|
1382
1400
|
Label,
|
|
1383
1401
|
{
|
|
1384
1402
|
htmlFor: id,
|
|
1385
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",
|
|
1386
1404
|
children: [
|
|
1387
1405
|
"Use Points ",
|
|
1388
|
-
/* @__PURE__ */ (0,
|
|
1406
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-xs font-medium", children: "Optional" })
|
|
1389
1407
|
]
|
|
1390
1408
|
}
|
|
1391
1409
|
)
|
|
1392
1410
|
] }),
|
|
1393
|
-
/* @__PURE__ */ (0,
|
|
1394
|
-
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: [
|
|
1395
1413
|
formatPoints(balance.availablePoints, spreePayConfig?.pointsTitle),
|
|
1396
|
-
!!spreePayConfig?.pointsConversionRatio && /* @__PURE__ */ (0,
|
|
1414
|
+
!!spreePayConfig?.pointsConversionRatio && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-black/50", children: ` ${formatUSD(balance.availablePoints * spreePayConfig.pointsConversionRatio)}` })
|
|
1397
1415
|
] }) : null,
|
|
1398
|
-
Boolean(appProps.topUpLink) && /* @__PURE__ */ (0,
|
|
1416
|
+
Boolean(appProps.topUpLink) && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
1399
1417
|
"a",
|
|
1400
1418
|
{
|
|
1401
1419
|
className: "bg-primary cursor-pointer rounded-full px-2 py-1.5 text-xs font-medium text-white",
|
|
@@ -1407,15 +1425,15 @@ var PointsSwitch = (props) => {
|
|
|
1407
1425
|
)
|
|
1408
1426
|
] })
|
|
1409
1427
|
] }),
|
|
1410
|
-
message && /* @__PURE__ */ (0,
|
|
1411
|
-
/* @__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)(
|
|
1412
1430
|
"path",
|
|
1413
1431
|
{
|
|
1414
1432
|
fill: "#000",
|
|
1415
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"
|
|
1416
1434
|
}
|
|
1417
1435
|
) }),
|
|
1418
|
-
/* @__PURE__ */ (0,
|
|
1436
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-xs font-medium text-black", children: message })
|
|
1419
1437
|
] })
|
|
1420
1438
|
] });
|
|
1421
1439
|
};
|
|
@@ -1428,9 +1446,9 @@ var import_airkit2 = require("@mocanetwork/airkit");
|
|
|
1428
1446
|
var import_react10 = require("react");
|
|
1429
1447
|
|
|
1430
1448
|
// src/ui/input.tsx
|
|
1431
|
-
var
|
|
1449
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
1432
1450
|
function Input({ className, type, ...props }) {
|
|
1433
|
-
return /* @__PURE__ */ (0,
|
|
1451
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1434
1452
|
"input",
|
|
1435
1453
|
{
|
|
1436
1454
|
type,
|
|
@@ -1507,7 +1525,7 @@ function useComposedRefs(...refs) {
|
|
|
1507
1525
|
|
|
1508
1526
|
// ../../node_modules/@radix-ui/react-context/dist/index.mjs
|
|
1509
1527
|
var React3 = __toESM(require("react"), 1);
|
|
1510
|
-
var
|
|
1528
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
1511
1529
|
function createContextScope(scopeName, createContextScopeDeps = []) {
|
|
1512
1530
|
let defaultContexts = [];
|
|
1513
1531
|
function createContext32(rootComponentName, defaultContext) {
|
|
@@ -1518,7 +1536,7 @@ function createContextScope(scopeName, createContextScopeDeps = []) {
|
|
|
1518
1536
|
const { scope, children, ...context } = props;
|
|
1519
1537
|
const Context = scope?.[scopeName]?.[index] || BaseContext;
|
|
1520
1538
|
const value = React3.useMemo(() => context, Object.values(context));
|
|
1521
|
-
return /* @__PURE__ */ (0,
|
|
1539
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Context.Provider, { value, children });
|
|
1522
1540
|
};
|
|
1523
1541
|
Provider.displayName = rootComponentName + "Provider";
|
|
1524
1542
|
function useContext22(consumerName, scope) {
|
|
@@ -1643,7 +1661,7 @@ function isFunction(value) {
|
|
|
1643
1661
|
|
|
1644
1662
|
// ../../node_modules/@radix-ui/react-direction/dist/index.mjs
|
|
1645
1663
|
var React6 = __toESM(require("react"), 1);
|
|
1646
|
-
var
|
|
1664
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
1647
1665
|
var DirectionContext = React6.createContext(void 0);
|
|
1648
1666
|
function useDirection(localDir) {
|
|
1649
1667
|
const globalDir = React6.useContext(DirectionContext);
|
|
@@ -1704,7 +1722,7 @@ function useSize(element) {
|
|
|
1704
1722
|
var React9 = __toESM(require("react"), 1);
|
|
1705
1723
|
var ReactDOM = __toESM(require("react-dom"), 1);
|
|
1706
1724
|
var import_react_slot2 = require("@radix-ui/react-slot");
|
|
1707
|
-
var
|
|
1725
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
1708
1726
|
var NODES = [
|
|
1709
1727
|
"a",
|
|
1710
1728
|
"button",
|
|
@@ -1732,7 +1750,7 @@ var Primitive = NODES.reduce((primitive, node) => {
|
|
|
1732
1750
|
if (typeof window !== "undefined") {
|
|
1733
1751
|
window[/* @__PURE__ */ Symbol.for("radix-ui")] = true;
|
|
1734
1752
|
}
|
|
1735
|
-
return /* @__PURE__ */ (0,
|
|
1753
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Comp, { ...primitiveProps, ref: forwardedRef });
|
|
1736
1754
|
});
|
|
1737
1755
|
Node2.displayName = `Primitive.${node}`;
|
|
1738
1756
|
return { ...primitive, [node]: Node2 };
|
|
@@ -1741,10 +1759,10 @@ var Primitive = NODES.reduce((primitive, node) => {
|
|
|
1741
1759
|
// ../../node_modules/@radix-ui/react-collection/dist/index.mjs
|
|
1742
1760
|
var import_react8 = __toESM(require("react"), 1);
|
|
1743
1761
|
var import_react_slot3 = require("@radix-ui/react-slot");
|
|
1744
|
-
var
|
|
1762
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
1745
1763
|
var import_react9 = __toESM(require("react"), 1);
|
|
1746
1764
|
var import_react_slot4 = require("@radix-ui/react-slot");
|
|
1747
|
-
var
|
|
1765
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
1748
1766
|
function createCollection(name) {
|
|
1749
1767
|
const PROVIDER_NAME = name + "CollectionProvider";
|
|
1750
1768
|
const [createCollectionContext, createCollectionScope2] = createContextScope(PROVIDER_NAME);
|
|
@@ -1756,7 +1774,7 @@ function createCollection(name) {
|
|
|
1756
1774
|
const { scope, children } = props;
|
|
1757
1775
|
const ref = import_react8.default.useRef(null);
|
|
1758
1776
|
const itemMap = import_react8.default.useRef(/* @__PURE__ */ new Map()).current;
|
|
1759
|
-
return /* @__PURE__ */ (0,
|
|
1777
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
|
|
1760
1778
|
};
|
|
1761
1779
|
CollectionProvider.displayName = PROVIDER_NAME;
|
|
1762
1780
|
const COLLECTION_SLOT_NAME = name + "CollectionSlot";
|
|
@@ -1766,7 +1784,7 @@ function createCollection(name) {
|
|
|
1766
1784
|
const { scope, children } = props;
|
|
1767
1785
|
const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
|
|
1768
1786
|
const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
|
|
1769
|
-
return /* @__PURE__ */ (0,
|
|
1787
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CollectionSlotImpl, { ref: composedRefs, children });
|
|
1770
1788
|
}
|
|
1771
1789
|
);
|
|
1772
1790
|
CollectionSlot.displayName = COLLECTION_SLOT_NAME;
|
|
@@ -1783,7 +1801,7 @@ function createCollection(name) {
|
|
|
1783
1801
|
context.itemMap.set(ref, { ref, ...itemData });
|
|
1784
1802
|
return () => void context.itemMap.delete(ref);
|
|
1785
1803
|
});
|
|
1786
|
-
return /* @__PURE__ */ (0,
|
|
1804
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
|
|
1787
1805
|
}
|
|
1788
1806
|
);
|
|
1789
1807
|
CollectionItemSlot.displayName = ITEM_SLOT_NAME;
|
|
@@ -1809,7 +1827,7 @@ function createCollection(name) {
|
|
|
1809
1827
|
}
|
|
1810
1828
|
|
|
1811
1829
|
// ../../node_modules/@radix-ui/react-slider/dist/index.mjs
|
|
1812
|
-
var
|
|
1830
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
1813
1831
|
var PAGE_KEYS = ["PageUp", "PageDown"];
|
|
1814
1832
|
var ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
|
|
1815
1833
|
var BACK_KEYS = {
|
|
@@ -1887,7 +1905,7 @@ var Slider = React11.forwardRef(
|
|
|
1887
1905
|
}
|
|
1888
1906
|
});
|
|
1889
1907
|
}
|
|
1890
|
-
return /* @__PURE__ */ (0,
|
|
1908
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1891
1909
|
SliderProvider,
|
|
1892
1910
|
{
|
|
1893
1911
|
scope: props.__scopeSlider,
|
|
@@ -1900,7 +1918,7 @@ var Slider = React11.forwardRef(
|
|
|
1900
1918
|
values,
|
|
1901
1919
|
orientation,
|
|
1902
1920
|
form,
|
|
1903
|
-
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)(
|
|
1904
1922
|
SliderOrientation,
|
|
1905
1923
|
{
|
|
1906
1924
|
"aria-disabled": disabled,
|
|
@@ -1969,7 +1987,7 @@ var SliderHorizontal = React11.forwardRef(
|
|
|
1969
1987
|
rectRef.current = rect;
|
|
1970
1988
|
return value(pointerPosition - rect.left);
|
|
1971
1989
|
}
|
|
1972
|
-
return /* @__PURE__ */ (0,
|
|
1990
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1973
1991
|
SliderOrientationProvider,
|
|
1974
1992
|
{
|
|
1975
1993
|
scope: props.__scopeSlider,
|
|
@@ -1977,7 +1995,7 @@ var SliderHorizontal = React11.forwardRef(
|
|
|
1977
1995
|
endEdge: isSlidingFromLeft ? "right" : "left",
|
|
1978
1996
|
direction: isSlidingFromLeft ? 1 : -1,
|
|
1979
1997
|
size: "width",
|
|
1980
|
-
children: /* @__PURE__ */ (0,
|
|
1998
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1981
1999
|
SliderImpl,
|
|
1982
2000
|
{
|
|
1983
2001
|
dir: direction,
|
|
@@ -2035,7 +2053,7 @@ var SliderVertical = React11.forwardRef(
|
|
|
2035
2053
|
rectRef.current = rect;
|
|
2036
2054
|
return value(pointerPosition - rect.top);
|
|
2037
2055
|
}
|
|
2038
|
-
return /* @__PURE__ */ (0,
|
|
2056
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2039
2057
|
SliderOrientationProvider,
|
|
2040
2058
|
{
|
|
2041
2059
|
scope: props.__scopeSlider,
|
|
@@ -2043,7 +2061,7 @@ var SliderVertical = React11.forwardRef(
|
|
|
2043
2061
|
endEdge: isSlidingFromBottom ? "top" : "bottom",
|
|
2044
2062
|
size: "height",
|
|
2045
2063
|
direction: isSlidingFromBottom ? 1 : -1,
|
|
2046
|
-
children: /* @__PURE__ */ (0,
|
|
2064
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2047
2065
|
SliderImpl,
|
|
2048
2066
|
{
|
|
2049
2067
|
"data-orientation": "vertical",
|
|
@@ -2089,7 +2107,7 @@ var SliderImpl = React11.forwardRef(
|
|
|
2089
2107
|
...sliderProps
|
|
2090
2108
|
} = props;
|
|
2091
2109
|
const context = useSliderContext(SLIDER_NAME, __scopeSlider);
|
|
2092
|
-
return /* @__PURE__ */ (0,
|
|
2110
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2093
2111
|
Primitive.span,
|
|
2094
2112
|
{
|
|
2095
2113
|
...sliderProps,
|
|
@@ -2136,7 +2154,7 @@ var SliderTrack = React11.forwardRef(
|
|
|
2136
2154
|
(props, forwardedRef) => {
|
|
2137
2155
|
const { __scopeSlider, ...trackProps } = props;
|
|
2138
2156
|
const context = useSliderContext(TRACK_NAME, __scopeSlider);
|
|
2139
|
-
return /* @__PURE__ */ (0,
|
|
2157
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2140
2158
|
Primitive.span,
|
|
2141
2159
|
{
|
|
2142
2160
|
"data-disabled": context.disabled ? "" : void 0,
|
|
@@ -2162,7 +2180,7 @@ var SliderRange = React11.forwardRef(
|
|
|
2162
2180
|
);
|
|
2163
2181
|
const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0;
|
|
2164
2182
|
const offsetEnd = 100 - Math.max(...percentages);
|
|
2165
|
-
return /* @__PURE__ */ (0,
|
|
2183
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2166
2184
|
Primitive.span,
|
|
2167
2185
|
{
|
|
2168
2186
|
"data-orientation": context.orientation,
|
|
@@ -2189,7 +2207,7 @@ var SliderThumb = React11.forwardRef(
|
|
|
2189
2207
|
() => thumb ? getItems().findIndex((item) => item.ref.current === thumb) : -1,
|
|
2190
2208
|
[getItems, thumb]
|
|
2191
2209
|
);
|
|
2192
|
-
return /* @__PURE__ */ (0,
|
|
2210
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SliderThumbImpl, { ...props, ref: composedRefs, index });
|
|
2193
2211
|
}
|
|
2194
2212
|
);
|
|
2195
2213
|
var SliderThumbImpl = React11.forwardRef(
|
|
@@ -2214,7 +2232,7 @@ var SliderThumbImpl = React11.forwardRef(
|
|
|
2214
2232
|
};
|
|
2215
2233
|
}
|
|
2216
2234
|
}, [thumb, context.thumbs]);
|
|
2217
|
-
return /* @__PURE__ */ (0,
|
|
2235
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
2218
2236
|
"span",
|
|
2219
2237
|
{
|
|
2220
2238
|
style: {
|
|
@@ -2223,7 +2241,7 @@ var SliderThumbImpl = React11.forwardRef(
|
|
|
2223
2241
|
[orientation.startEdge]: `calc(${percent}% + ${thumbInBoundsOffset}px)`
|
|
2224
2242
|
},
|
|
2225
2243
|
children: [
|
|
2226
|
-
/* @__PURE__ */ (0,
|
|
2244
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Collection.ItemSlot, { scope: props.__scopeSlider, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2227
2245
|
Primitive.span,
|
|
2228
2246
|
{
|
|
2229
2247
|
role: "slider",
|
|
@@ -2243,7 +2261,7 @@ var SliderThumbImpl = React11.forwardRef(
|
|
|
2243
2261
|
})
|
|
2244
2262
|
}
|
|
2245
2263
|
) }),
|
|
2246
|
-
isFormControl && /* @__PURE__ */ (0,
|
|
2264
|
+
isFormControl && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2247
2265
|
SliderBubbleInput,
|
|
2248
2266
|
{
|
|
2249
2267
|
name: name ?? (context.name ? context.name + (context.values.length > 1 ? "[]" : "") : void 0),
|
|
@@ -2276,7 +2294,7 @@ var SliderBubbleInput = React11.forwardRef(
|
|
|
2276
2294
|
input.dispatchEvent(event);
|
|
2277
2295
|
}
|
|
2278
2296
|
}, [prevValue, value]);
|
|
2279
|
-
return /* @__PURE__ */ (0,
|
|
2297
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2280
2298
|
Primitive.input,
|
|
2281
2299
|
{
|
|
2282
2300
|
style: { display: "none" },
|
|
@@ -2358,14 +2376,14 @@ function cn2(...inputs) {
|
|
|
2358
2376
|
}
|
|
2359
2377
|
|
|
2360
2378
|
// src/ui/slider.tsx
|
|
2361
|
-
var
|
|
2379
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
2362
2380
|
function Slider2(props) {
|
|
2363
2381
|
const { className, defaultValue, value, min = 0, max = 100, ...rest } = props;
|
|
2364
2382
|
const _values = React12.useMemo(
|
|
2365
2383
|
() => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
|
|
2366
2384
|
[value, defaultValue, min, max]
|
|
2367
2385
|
);
|
|
2368
|
-
return /* @__PURE__ */ (0,
|
|
2386
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
2369
2387
|
Root5,
|
|
2370
2388
|
{
|
|
2371
2389
|
"data-slot": "slider",
|
|
@@ -2379,14 +2397,14 @@ function Slider2(props) {
|
|
|
2379
2397
|
),
|
|
2380
2398
|
...rest,
|
|
2381
2399
|
children: [
|
|
2382
|
-
/* @__PURE__ */ (0,
|
|
2400
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2383
2401
|
Track,
|
|
2384
2402
|
{
|
|
2385
2403
|
"data-slot": "slider-track",
|
|
2386
2404
|
className: cn2(
|
|
2387
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"
|
|
2388
2406
|
),
|
|
2389
|
-
children: /* @__PURE__ */ (0,
|
|
2407
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2390
2408
|
Range,
|
|
2391
2409
|
{
|
|
2392
2410
|
"data-slot": "slider-range",
|
|
@@ -2395,11 +2413,11 @@ function Slider2(props) {
|
|
|
2395
2413
|
)
|
|
2396
2414
|
}
|
|
2397
2415
|
),
|
|
2398
|
-
Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ (0,
|
|
2416
|
+
Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2399
2417
|
Thumb2,
|
|
2400
2418
|
{
|
|
2401
2419
|
"data-slot": "slider-thumb",
|
|
2402
|
-
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"
|
|
2403
2421
|
},
|
|
2404
2422
|
index
|
|
2405
2423
|
))
|
|
@@ -2409,7 +2427,7 @@ function Slider2(props) {
|
|
|
2409
2427
|
}
|
|
2410
2428
|
|
|
2411
2429
|
// src/components/CreditCardTab/Points/PointsSelector.tsx
|
|
2412
|
-
var
|
|
2430
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
2413
2431
|
var PointsSelector = (props) => {
|
|
2414
2432
|
const { isDisabled, isSelected, onSelect, children } = props;
|
|
2415
2433
|
const { balance } = useSlapiBalance();
|
|
@@ -2428,31 +2446,31 @@ var PointsSelector = (props) => {
|
|
|
2428
2446
|
};
|
|
2429
2447
|
const pointsValue = String(Math.round(splitTokens));
|
|
2430
2448
|
const usdValue = formatUSD(usdAmount + getTransactionFee(usdAmount, appProps.transactionFeePercentage));
|
|
2431
|
-
return /* @__PURE__ */ (0,
|
|
2449
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
2432
2450
|
"button",
|
|
2433
2451
|
{
|
|
2434
2452
|
disabled: isDisabled,
|
|
2435
2453
|
onClick: onSelect,
|
|
2436
|
-
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", {
|
|
2437
2455
|
"border-primary": isSelected,
|
|
2438
2456
|
"cursor-not-allowed opacity-50": isDisabled
|
|
2439
2457
|
}),
|
|
2440
2458
|
children: [
|
|
2441
|
-
/* @__PURE__ */ (0,
|
|
2442
|
-
/* @__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)(
|
|
2443
2461
|
"div",
|
|
2444
2462
|
{
|
|
2445
2463
|
className: cn("flex h-full w-11 items-center justify-center bg-black/10", {
|
|
2446
2464
|
"bg-primary": isSelected
|
|
2447
2465
|
}),
|
|
2448
|
-
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" }) })
|
|
2449
2467
|
}
|
|
2450
2468
|
),
|
|
2451
|
-
/* @__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 })
|
|
2452
2470
|
] }),
|
|
2453
|
-
isSelected && /* @__PURE__ */ (0,
|
|
2454
|
-
/* @__PURE__ */ (0,
|
|
2455
|
-
/* @__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)(
|
|
2456
2474
|
Input,
|
|
2457
2475
|
{
|
|
2458
2476
|
readOnly: true,
|
|
@@ -2463,9 +2481,9 @@ var PointsSelector = (props) => {
|
|
|
2463
2481
|
onClick: (e) => e.stopPropagation()
|
|
2464
2482
|
}
|
|
2465
2483
|
),
|
|
2466
|
-
/* @__PURE__ */ (0,
|
|
2484
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-left text-xs leading-[20px] text-black/45", children: "Points" })
|
|
2467
2485
|
] }),
|
|
2468
|
-
/* @__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)(
|
|
2469
2487
|
Slider2,
|
|
2470
2488
|
{
|
|
2471
2489
|
value: [splitTokens],
|
|
@@ -2477,8 +2495,8 @@ var PointsSelector = (props) => {
|
|
|
2477
2495
|
step
|
|
2478
2496
|
}
|
|
2479
2497
|
) }),
|
|
2480
|
-
/* @__PURE__ */ (0,
|
|
2481
|
-
/* @__PURE__ */ (0,
|
|
2498
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col gap-1", children: [
|
|
2499
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2482
2500
|
Input,
|
|
2483
2501
|
{
|
|
2484
2502
|
readOnly: true,
|
|
@@ -2489,7 +2507,7 @@ var PointsSelector = (props) => {
|
|
|
2489
2507
|
onClick: (e) => e.stopPropagation()
|
|
2490
2508
|
}
|
|
2491
2509
|
),
|
|
2492
|
-
/* @__PURE__ */ (0,
|
|
2510
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-left text-xs leading-[20px] text-black/45", children: "Card" })
|
|
2493
2511
|
] })
|
|
2494
2512
|
] }) })
|
|
2495
2513
|
]
|
|
@@ -2498,7 +2516,7 @@ var PointsSelector = (props) => {
|
|
|
2498
2516
|
};
|
|
2499
2517
|
|
|
2500
2518
|
// src/components/CreditCardTab/Points/SplitBlock.tsx
|
|
2501
|
-
var
|
|
2519
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
2502
2520
|
var SplitBlock = (props) => {
|
|
2503
2521
|
const { onToggle, isSelected, onSelect } = props;
|
|
2504
2522
|
const { balance, isBalanceLoading } = useSlapiBalance();
|
|
@@ -2542,21 +2560,21 @@ var SplitBlock = (props) => {
|
|
|
2542
2560
|
doInit();
|
|
2543
2561
|
}, [spreePayConfig?.pointsChain, initWallet, env.useWeb3Points]);
|
|
2544
2562
|
const isPointsSelectorDisabled = env.useWeb3Points ? !walletReady : false;
|
|
2545
|
-
return /* @__PURE__ */ (0,
|
|
2546
|
-
/* @__PURE__ */ (0,
|
|
2547
|
-
/* @__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" }),
|
|
2548
2566
|
" ",
|
|
2549
2567
|
formatPoints(balance.availablePoints, pointsTitle),
|
|
2550
2568
|
" ",
|
|
2551
|
-
pointsConversionRatio && /* @__PURE__ */ (0,
|
|
2569
|
+
pointsConversionRatio && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-black/50", children: formatUSD(balance.availablePoints * pointsConversionRatio) })
|
|
2552
2570
|
] }) : null }),
|
|
2553
|
-
isBalanceLoading ? /* @__PURE__ */ (0,
|
|
2554
|
-
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 })
|
|
2555
2573
|
] }) });
|
|
2556
2574
|
};
|
|
2557
2575
|
|
|
2558
2576
|
// src/components/CreditCardTab/Points/Points.tsx
|
|
2559
|
-
var
|
|
2577
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
2560
2578
|
var Points = () => {
|
|
2561
2579
|
const [usePoints, setUsePoints] = (0, import_react12.useState)(false);
|
|
2562
2580
|
const [selectedPointsType, setSelectedPointsType] = (0, import_react12.useState)(null);
|
|
@@ -2570,8 +2588,8 @@ var Points = () => {
|
|
|
2570
2588
|
setSelectedPaymentMethod({ ...selectedPaymentMethod, splitAmount: void 0 });
|
|
2571
2589
|
}
|
|
2572
2590
|
};
|
|
2573
|
-
return /* @__PURE__ */ (0,
|
|
2574
|
-
/* @__PURE__ */ (0,
|
|
2591
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
|
|
2592
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
2575
2593
|
PointsSwitch,
|
|
2576
2594
|
{
|
|
2577
2595
|
value: usePoints,
|
|
@@ -2580,7 +2598,7 @@ var Points = () => {
|
|
|
2580
2598
|
disabled: !spreePayConfig?.creditCard.enabled || !spreePayConfig?.creditCard.points || appProps.disabledPoints
|
|
2581
2599
|
}
|
|
2582
2600
|
),
|
|
2583
|
-
usePoints && /* @__PURE__ */ (0,
|
|
2601
|
+
usePoints && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
2584
2602
|
SplitBlock,
|
|
2585
2603
|
{
|
|
2586
2604
|
onToggle: handleTogglePoints,
|
|
@@ -2592,7 +2610,7 @@ var Points = () => {
|
|
|
2592
2610
|
};
|
|
2593
2611
|
|
|
2594
2612
|
// src/components/CreditCardTab/CreditCardTab.tsx
|
|
2595
|
-
var
|
|
2613
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
2596
2614
|
var CreditCardTab = () => {
|
|
2597
2615
|
const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
|
|
2598
2616
|
const { env } = useSpreePayEnv();
|
|
@@ -2647,16 +2665,16 @@ var CreditCardTab = () => {
|
|
|
2647
2665
|
(0, import_react13.useEffect)(() => {
|
|
2648
2666
|
register(handlePay);
|
|
2649
2667
|
}, [register, handlePay]);
|
|
2650
|
-
return /* @__PURE__ */ (0,
|
|
2651
|
-
/* @__PURE__ */ (0,
|
|
2652
|
-
/* @__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, {}) })
|
|
2653
2671
|
] });
|
|
2654
2672
|
};
|
|
2655
2673
|
|
|
2656
2674
|
// src/components/CryptoTab/Crypto/CryptoWrapper.tsx
|
|
2657
2675
|
var import_react16 = require("react");
|
|
2658
2676
|
var import_react_query = require("@tanstack/react-query");
|
|
2659
|
-
var
|
|
2677
|
+
var import_nice_modal_react7 = __toESM(require("@ebay/nice-modal-react"), 1);
|
|
2660
2678
|
var import_rainbowkit2 = require("@rainbow-me/rainbowkit");
|
|
2661
2679
|
var import_styles = require("@rainbow-me/rainbowkit/styles.css");
|
|
2662
2680
|
var import_wagmi5 = require("wagmi");
|
|
@@ -2679,9 +2697,9 @@ function getAction(client, actionFn, name) {
|
|
|
2679
2697
|
|
|
2680
2698
|
// ../../node_modules/@wagmi/core/dist/esm/actions/readContract.js
|
|
2681
2699
|
var import_actions = require("viem/actions");
|
|
2682
|
-
function readContract(
|
|
2700
|
+
function readContract(config2, parameters) {
|
|
2683
2701
|
const { chainId, ...rest } = parameters;
|
|
2684
|
-
const client =
|
|
2702
|
+
const client = config2.getClient({ chainId });
|
|
2685
2703
|
const action = getAction(client, import_actions.readContract, "readContract");
|
|
2686
2704
|
return action(rest);
|
|
2687
2705
|
}
|
|
@@ -2689,9 +2707,9 @@ function readContract(config, parameters) {
|
|
|
2689
2707
|
// ../../node_modules/@wagmi/core/dist/esm/actions/waitForTransactionReceipt.js
|
|
2690
2708
|
var import_viem2 = require("viem");
|
|
2691
2709
|
var import_actions2 = require("viem/actions");
|
|
2692
|
-
async function waitForTransactionReceipt(
|
|
2710
|
+
async function waitForTransactionReceipt(config2, parameters) {
|
|
2693
2711
|
const { chainId, timeout = 0, ...rest } = parameters;
|
|
2694
|
-
const client =
|
|
2712
|
+
const client = config2.getClient({ chainId });
|
|
2695
2713
|
const action = getAction(client, import_actions2.waitForTransactionReceipt, "waitForTransactionReceipt");
|
|
2696
2714
|
const receipt = await action({ ...rest, timeout });
|
|
2697
2715
|
if (receipt.status === "reverted") {
|
|
@@ -2766,7 +2784,7 @@ var MAX_UINT256 = BigInt(2) ** BigInt(256) - BigInt(1);
|
|
|
2766
2784
|
var useCryptoPayment = () => {
|
|
2767
2785
|
const { data: walletClient } = (0, import_wagmi.useWalletClient)();
|
|
2768
2786
|
const { spreePayConfig } = useSpreePayConfig();
|
|
2769
|
-
const
|
|
2787
|
+
const config2 = (0, import_wagmi.useConfig)();
|
|
2770
2788
|
const { selectedPaymentMethod } = useSpreePaymentMethod();
|
|
2771
2789
|
const cryptoPayment = async (params) => {
|
|
2772
2790
|
if (!walletClient) {
|
|
@@ -2785,7 +2803,7 @@ var useCryptoPayment = () => {
|
|
|
2785
2803
|
if (!tokenAddress) {
|
|
2786
2804
|
throw new Error("Token address not found");
|
|
2787
2805
|
}
|
|
2788
|
-
const allowance = await readContract(
|
|
2806
|
+
const allowance = await readContract(config2, {
|
|
2789
2807
|
address: tokenAddress,
|
|
2790
2808
|
abi: import_viem4.erc20Abi,
|
|
2791
2809
|
functionName: "allowance",
|
|
@@ -2798,7 +2816,7 @@ var useCryptoPayment = () => {
|
|
|
2798
2816
|
functionName: "approve",
|
|
2799
2817
|
args: [spreePayConfig.crypto.oneInchAggregationRouter, MAX_UINT256]
|
|
2800
2818
|
});
|
|
2801
|
-
await waitForTransactionReceipt(
|
|
2819
|
+
await waitForTransactionReceipt(config2, {
|
|
2802
2820
|
hash: result,
|
|
2803
2821
|
confirmations: 1
|
|
2804
2822
|
// You can change the number of block confirmations as per your requirement
|
|
@@ -2838,38 +2856,38 @@ var useCryptoPayment = () => {
|
|
|
2838
2856
|
|
|
2839
2857
|
// src/components/CryptoTab/Crypto/ConnectButton.tsx
|
|
2840
2858
|
var import_rainbowkit = require("@rainbow-me/rainbowkit");
|
|
2841
|
-
var
|
|
2859
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
2842
2860
|
var ConnectButton = () => {
|
|
2843
|
-
return /* @__PURE__ */ (0,
|
|
2861
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_rainbowkit.ConnectButton.Custom, { children: ({ mounted, chain, account, openAccountModal, openChainModal, openConnectModal }) => {
|
|
2844
2862
|
if (!mounted) return null;
|
|
2845
|
-
return /* @__PURE__ */ (0,
|
|
2863
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_jsx_runtime27.Fragment, { children: (() => {
|
|
2846
2864
|
if (!mounted || !account || !chain) {
|
|
2847
|
-
return /* @__PURE__ */ (0,
|
|
2865
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2848
2866
|
"button",
|
|
2849
2867
|
{
|
|
2850
|
-
className: "h-[34px] rounded-md border
|
|
2868
|
+
className: "h-[34px] rounded-md border border-black px-3 text-sm font-medium text-black",
|
|
2851
2869
|
onClick: openConnectModal,
|
|
2852
2870
|
children: "Connect a Wallet"
|
|
2853
2871
|
}
|
|
2854
2872
|
);
|
|
2855
2873
|
}
|
|
2856
2874
|
if (chain.unsupported) {
|
|
2857
|
-
return /* @__PURE__ */ (0,
|
|
2875
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2858
2876
|
"button",
|
|
2859
2877
|
{
|
|
2860
|
-
className: "h-[34px] rounded-md border
|
|
2878
|
+
className: "h-[34px] rounded-md border border-black px-3 text-sm font-medium text-black",
|
|
2861
2879
|
onClick: openChainModal,
|
|
2862
2880
|
children: "Select a Network"
|
|
2863
2881
|
}
|
|
2864
2882
|
);
|
|
2865
2883
|
}
|
|
2866
|
-
return /* @__PURE__ */ (0,
|
|
2884
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
2867
2885
|
"button",
|
|
2868
2886
|
{
|
|
2869
|
-
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",
|
|
2870
2888
|
onClick: openAccountModal,
|
|
2871
2889
|
children: [
|
|
2872
|
-
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 }) }),
|
|
2873
2891
|
account.displayName
|
|
2874
2892
|
]
|
|
2875
2893
|
}
|
|
@@ -2879,29 +2897,29 @@ var ConnectButton = () => {
|
|
|
2879
2897
|
};
|
|
2880
2898
|
|
|
2881
2899
|
// src/config/symbolLogos.tsx
|
|
2882
|
-
var
|
|
2883
|
-
var MOCA_SVG = /* @__PURE__ */ (0,
|
|
2884
|
-
/* @__PURE__ */ (0,
|
|
2885
|
-
/* @__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)(
|
|
2886
2904
|
"path",
|
|
2887
2905
|
{
|
|
2888
2906
|
fill: "#fff",
|
|
2889
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"
|
|
2890
2908
|
}
|
|
2891
2909
|
),
|
|
2892
|
-
/* @__PURE__ */ (0,
|
|
2910
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("circle", { cx: "16", cy: "14", r: "1.5", fill: "#fff" })
|
|
2893
2911
|
] });
|
|
2894
|
-
var USDC_SVG = /* @__PURE__ */ (0,
|
|
2895
|
-
/* @__PURE__ */ (0,
|
|
2896
|
-
/* @__PURE__ */ (0,
|
|
2897
|
-
/* @__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)(
|
|
2898
2916
|
"path",
|
|
2899
2917
|
{
|
|
2900
2918
|
fill: "#fff",
|
|
2901
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"
|
|
2902
2920
|
}
|
|
2903
2921
|
),
|
|
2904
|
-
/* @__PURE__ */ (0,
|
|
2922
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
2905
2923
|
"path",
|
|
2906
2924
|
{
|
|
2907
2925
|
fill: "#fff",
|
|
@@ -2909,11 +2927,11 @@ var USDC_SVG = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("svg", { xmlns: "h
|
|
|
2909
2927
|
}
|
|
2910
2928
|
)
|
|
2911
2929
|
] }),
|
|
2912
|
-
/* @__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" }) }) })
|
|
2913
2931
|
] });
|
|
2914
|
-
var USDT_SVG = /* @__PURE__ */ (0,
|
|
2915
|
-
/* @__PURE__ */ (0,
|
|
2916
|
-
/* @__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)(
|
|
2917
2935
|
"path",
|
|
2918
2936
|
{
|
|
2919
2937
|
fill: "#fff",
|
|
@@ -2921,23 +2939,23 @@ var USDT_SVG = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("svg", { xmlns: "h
|
|
|
2921
2939
|
}
|
|
2922
2940
|
)
|
|
2923
2941
|
] });
|
|
2924
|
-
var WETH_SVG = /* @__PURE__ */ (0,
|
|
2925
|
-
/* @__PURE__ */ (0,
|
|
2926
|
-
/* @__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)(
|
|
2927
2945
|
"path",
|
|
2928
2946
|
{
|
|
2929
2947
|
fill: "#000",
|
|
2930
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"
|
|
2931
2949
|
}
|
|
2932
2950
|
),
|
|
2933
|
-
/* @__PURE__ */ (0,
|
|
2951
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
2934
2952
|
"path",
|
|
2935
2953
|
{
|
|
2936
2954
|
fill: "#F61F7D",
|
|
2937
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"
|
|
2938
2956
|
}
|
|
2939
2957
|
),
|
|
2940
|
-
/* @__PURE__ */ (0,
|
|
2958
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
2941
2959
|
"path",
|
|
2942
2960
|
{
|
|
2943
2961
|
fill: "#000",
|
|
@@ -2946,8 +2964,8 @@ var WETH_SVG = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("svg", { xmlns: "h
|
|
|
2946
2964
|
clipRule: "evenodd"
|
|
2947
2965
|
}
|
|
2948
2966
|
),
|
|
2949
|
-
/* @__PURE__ */ (0,
|
|
2950
|
-
/* @__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)(
|
|
2951
2969
|
"path",
|
|
2952
2970
|
{
|
|
2953
2971
|
fill: "#000",
|
|
@@ -2956,8 +2974,8 @@ var WETH_SVG = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("svg", { xmlns: "h
|
|
|
2956
2974
|
clipRule: "evenodd"
|
|
2957
2975
|
}
|
|
2958
2976
|
),
|
|
2959
|
-
/* @__PURE__ */ (0,
|
|
2960
|
-
/* @__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)(
|
|
2961
2979
|
"path",
|
|
2962
2980
|
{
|
|
2963
2981
|
fill: "#000",
|
|
@@ -2965,7 +2983,7 @@ var WETH_SVG = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("svg", { xmlns: "h
|
|
|
2965
2983
|
}
|
|
2966
2984
|
)
|
|
2967
2985
|
] }),
|
|
2968
|
-
/* @__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" }) }) })
|
|
2969
2987
|
] });
|
|
2970
2988
|
var symbolLogos = {
|
|
2971
2989
|
MOCA: MOCA_SVG,
|
|
@@ -2978,33 +2996,33 @@ function getSymbolLogo(symbol) {
|
|
|
2978
2996
|
}
|
|
2979
2997
|
|
|
2980
2998
|
// src/components/CryptoTab/Crypto/Logos.tsx
|
|
2981
|
-
var
|
|
2999
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
2982
3000
|
var Logos = () => {
|
|
2983
|
-
return /* @__PURE__ */ (0,
|
|
2984
|
-
/* @__PURE__ */ (0,
|
|
2985
|
-
/* @__PURE__ */ (0,
|
|
2986
|
-
/* @__PURE__ */ (0,
|
|
2987
|
-
/* @__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") })
|
|
2988
3006
|
] });
|
|
2989
3007
|
};
|
|
2990
3008
|
|
|
2991
3009
|
// src/components/CryptoTab/Crypto/SelectCoinButton.tsx
|
|
2992
|
-
var
|
|
3010
|
+
var import_nice_modal_react6 = __toESM(require("@ebay/nice-modal-react"), 1);
|
|
2993
3011
|
|
|
2994
3012
|
// src/modals/CryptoSelectModal.tsx
|
|
2995
3013
|
var import_react14 = require("react");
|
|
2996
|
-
var
|
|
3014
|
+
var import_nice_modal_react5 = __toESM(require("@ebay/nice-modal-react"), 1);
|
|
2997
3015
|
|
|
2998
3016
|
// ../ui/src/components/input.tsx
|
|
2999
|
-
var
|
|
3017
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
3000
3018
|
function Input2({ className, type, ...props }) {
|
|
3001
|
-
return /* @__PURE__ */ (0,
|
|
3019
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
3002
3020
|
"input",
|
|
3003
3021
|
{
|
|
3004
3022
|
type,
|
|
3005
3023
|
"data-slot": "input",
|
|
3006
3024
|
className: cn2(
|
|
3007
|
-
"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",
|
|
3008
3026
|
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
|
3009
3027
|
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
|
3010
3028
|
className
|
|
@@ -3021,7 +3039,7 @@ var React14 = __toESM(require("react"), 1);
|
|
|
3021
3039
|
var React13 = __toESM(require("react"), 1);
|
|
3022
3040
|
var ReactDOM2 = __toESM(require("react-dom"), 1);
|
|
3023
3041
|
var import_react_slot5 = require("@radix-ui/react-slot");
|
|
3024
|
-
var
|
|
3042
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
3025
3043
|
var NODES2 = [
|
|
3026
3044
|
"a",
|
|
3027
3045
|
"button",
|
|
@@ -3049,14 +3067,14 @@ var Primitive2 = NODES2.reduce((primitive, node) => {
|
|
|
3049
3067
|
if (typeof window !== "undefined") {
|
|
3050
3068
|
window[/* @__PURE__ */ Symbol.for("radix-ui")] = true;
|
|
3051
3069
|
}
|
|
3052
|
-
return /* @__PURE__ */ (0,
|
|
3070
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Comp, { ...primitiveProps, ref: forwardedRef });
|
|
3053
3071
|
});
|
|
3054
3072
|
Node2.displayName = `Primitive.${node}`;
|
|
3055
3073
|
return { ...primitive, [node]: Node2 };
|
|
3056
3074
|
}, {});
|
|
3057
3075
|
|
|
3058
3076
|
// ../../node_modules/@radix-ui/react-separator/dist/index.mjs
|
|
3059
|
-
var
|
|
3077
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
3060
3078
|
var NAME = "Separator";
|
|
3061
3079
|
var DEFAULT_ORIENTATION = "horizontal";
|
|
3062
3080
|
var ORIENTATIONS = ["horizontal", "vertical"];
|
|
@@ -3065,7 +3083,7 @@ var Separator = React14.forwardRef((props, forwardedRef) => {
|
|
|
3065
3083
|
const orientation = isValidOrientation(orientationProp) ? orientationProp : DEFAULT_ORIENTATION;
|
|
3066
3084
|
const ariaOrientation = orientation === "vertical" ? orientation : void 0;
|
|
3067
3085
|
const semanticProps = decorative ? { role: "none" } : { "aria-orientation": ariaOrientation, role: "separator" };
|
|
3068
|
-
return /* @__PURE__ */ (0,
|
|
3086
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
3069
3087
|
Primitive2.div,
|
|
3070
3088
|
{
|
|
3071
3089
|
"data-orientation": orientation,
|
|
@@ -3082,21 +3100,21 @@ function isValidOrientation(orientation) {
|
|
|
3082
3100
|
var Root6 = Separator;
|
|
3083
3101
|
|
|
3084
3102
|
// ../ui/src/components/separator.tsx
|
|
3085
|
-
var
|
|
3103
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
3086
3104
|
function Separator2({
|
|
3087
3105
|
className,
|
|
3088
3106
|
orientation = "horizontal",
|
|
3089
3107
|
decorative = true,
|
|
3090
3108
|
...props
|
|
3091
3109
|
}) {
|
|
3092
|
-
return /* @__PURE__ */ (0,
|
|
3110
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
3093
3111
|
Root6,
|
|
3094
3112
|
{
|
|
3095
3113
|
"data-slot": "separator",
|
|
3096
3114
|
decorative,
|
|
3097
3115
|
orientation,
|
|
3098
3116
|
className: cn2(
|
|
3099
|
-
"
|
|
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",
|
|
3100
3118
|
className
|
|
3101
3119
|
),
|
|
3102
3120
|
...props
|
|
@@ -3196,9 +3214,9 @@ var useBaseTokens = () => {
|
|
|
3196
3214
|
};
|
|
3197
3215
|
|
|
3198
3216
|
// src/modals/CryptoSelectModal.tsx
|
|
3199
|
-
var
|
|
3200
|
-
var CryptoSelectModal =
|
|
3201
|
-
const modal = (0,
|
|
3217
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
3218
|
+
var CryptoSelectModal = import_nice_modal_react5.default.create(() => {
|
|
3219
|
+
const modal = (0, import_nice_modal_react5.useModal)();
|
|
3202
3220
|
const { isLoading, error, erc20Balances } = useBaseERC20Token();
|
|
3203
3221
|
const { isLoadingNative, nativeError, nativeBalance } = useBaseNativeToken();
|
|
3204
3222
|
const { tokens, tokensIsLoading } = useBaseTokens();
|
|
@@ -3214,15 +3232,14 @@ var CryptoSelectModal = import_nice_modal_react4.default.create(() => {
|
|
|
3214
3232
|
setSelectedPaymentMethod({ type: "CRYPTO" /* CRYPTO */, method: coin });
|
|
3215
3233
|
};
|
|
3216
3234
|
const userCoins = [nativeBalance, ...erc20Balances].filter(Boolean);
|
|
3217
|
-
|
|
3218
|
-
|
|
3219
|
-
/* @__PURE__ */ (0,
|
|
3220
|
-
|
|
3221
|
-
|
|
3222
|
-
|
|
3223
|
-
/* @__PURE__ */ (0,
|
|
3224
|
-
/* @__PURE__ */ (0,
|
|
3225
|
-
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("button", { className: "rounded-md p-1 hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "17", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
3235
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Dialog, { open: modal.visible, onOpenChange: modal.remove, children: [
|
|
3236
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DialogDescription, { className: "hidden", children: "Crypto Select Modal" }),
|
|
3237
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(DialogContent, { showCloseButton: false, className: "max-h-[90vh] gap-0 p-0", children: [
|
|
3238
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
|
|
3239
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
|
|
3240
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("button", { className: "rounded-md hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { stroke: "#000", d: "m15 6.5-6 6 6 6" }) }) }),
|
|
3241
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DialogTitle, { className: "text-primary text-2xl font-semibold", children: "Select a token" }),
|
|
3242
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("button", { className: "rounded-md p-1 hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "17", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
3226
3243
|
"path",
|
|
3227
3244
|
{
|
|
3228
3245
|
fill: "#000",
|
|
@@ -3230,80 +3247,76 @@ var CryptoSelectModal = import_nice_modal_react4.default.create(() => {
|
|
|
3230
3247
|
}
|
|
3231
3248
|
) }) })
|
|
3232
3249
|
] }),
|
|
3233
|
-
/* @__PURE__ */ (0,
|
|
3250
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Input2, { onChange: (e) => setSearch(e.target.value), placeholder: "Search by token name", value: search })
|
|
3234
3251
|
] }),
|
|
3235
|
-
/* @__PURE__ */ (0,
|
|
3236
|
-
/* @__PURE__ */ (0,
|
|
3237
|
-
/* @__PURE__ */ (0,
|
|
3238
|
-
(error || nativeError) && /* @__PURE__ */ (0,
|
|
3239
|
-
/* @__PURE__ */ (0,
|
|
3240
|
-
isLoadingNative && /* @__PURE__ */ (0,
|
|
3241
|
-
nativeBalance && /* @__PURE__ */ (0,
|
|
3252
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Separator2, { className: "hidden md:block" }),
|
|
3253
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
|
|
3254
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h3", { className: "text-primary text-xl font-semibold", children: "Tokens with wallet balance" }),
|
|
3255
|
+
(error || nativeError) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-center text-sm text-red-500", children: "Something wrong" }),
|
|
3256
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
|
|
3257
|
+
isLoadingNative && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
|
|
3258
|
+
nativeBalance && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
3242
3259
|
"button",
|
|
3243
3260
|
{
|
|
3244
3261
|
className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-black hover:bg-gray-100",
|
|
3245
3262
|
onClick: () => handleSelect(nativeBalance),
|
|
3246
3263
|
children: [
|
|
3247
|
-
/* @__PURE__ */ (0,
|
|
3248
|
-
nativeBalance.logoURI && /* @__PURE__ */ (0,
|
|
3249
|
-
|
|
3250
|
-
{
|
|
3251
|
-
className: "h-8 w-8 shrink-0",
|
|
3252
|
-
src: nativeBalance.logoURI,
|
|
3253
|
-
alt: `${nativeBalance.symbol} logo`
|
|
3254
|
-
}
|
|
3255
|
-
),
|
|
3256
|
-
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.symbol })
|
|
3264
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
3265
|
+
nativeBalance.logoURI && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("img", { className: "size-8 shrink-0", src: nativeBalance.logoURI, alt: `${nativeBalance.symbol} logo` }),
|
|
3266
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.symbol })
|
|
3257
3267
|
] }),
|
|
3258
|
-
/* @__PURE__ */ (0,
|
|
3268
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.formatted })
|
|
3259
3269
|
]
|
|
3260
3270
|
},
|
|
3261
3271
|
nativeBalance.symbol
|
|
3262
3272
|
),
|
|
3263
|
-
isLoading && /* @__PURE__ */ (0,
|
|
3264
|
-
/* @__PURE__ */ (0,
|
|
3265
|
-
/* @__PURE__ */ (0,
|
|
3266
|
-
/* @__PURE__ */ (0,
|
|
3273
|
+
isLoading && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
|
|
3274
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
|
|
3275
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
|
|
3276
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
|
|
3267
3277
|
] }),
|
|
3268
3278
|
erc20Balances.map((coin) => {
|
|
3269
3279
|
const Icon = getSymbolLogo(coin.symbol);
|
|
3270
|
-
return /* @__PURE__ */ (0,
|
|
3280
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
3271
3281
|
"button",
|
|
3272
3282
|
{
|
|
3273
3283
|
className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-black hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50",
|
|
3274
3284
|
onClick: () => handleSelect(coin),
|
|
3275
3285
|
children: [
|
|
3276
|
-
/* @__PURE__ */ (0,
|
|
3286
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
3277
3287
|
Boolean(Icon) && Icon,
|
|
3278
|
-
/* @__PURE__ */ (0,
|
|
3288
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm font-medium", children: coin.symbol })
|
|
3279
3289
|
] }),
|
|
3280
|
-
/* @__PURE__ */ (0,
|
|
3290
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm font-medium", children: coin.formatted })
|
|
3281
3291
|
]
|
|
3282
3292
|
},
|
|
3283
3293
|
coin.symbol
|
|
3284
3294
|
);
|
|
3285
3295
|
})
|
|
3286
3296
|
] }),
|
|
3287
|
-
/* @__PURE__ */ (0,
|
|
3288
|
-
/* @__PURE__ */ (0,
|
|
3289
|
-
tokensIsLoading && /* @__PURE__ */ (0,
|
|
3290
|
-
/* @__PURE__ */ (0,
|
|
3291
|
-
/* @__PURE__ */ (0,
|
|
3292
|
-
/* @__PURE__ */ (0,
|
|
3297
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h3", { className: "text-primary text-xl font-semibold", children: "All Tokens" }),
|
|
3298
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex max-h-[40vh] w-full flex-col gap-1 overflow-y-auto", children: [
|
|
3299
|
+
tokensIsLoading && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
|
|
3300
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
|
|
3301
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
|
|
3302
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
|
|
3293
3303
|
] }),
|
|
3294
|
-
filteredCoins.map((token) =>
|
|
3295
|
-
|
|
3296
|
-
|
|
3297
|
-
|
|
3298
|
-
|
|
3299
|
-
|
|
3300
|
-
|
|
3301
|
-
|
|
3302
|
-
/* @__PURE__ */ (0,
|
|
3303
|
-
|
|
3304
|
-
|
|
3305
|
-
|
|
3306
|
-
|
|
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
|
+
})
|
|
3307
3320
|
] })
|
|
3308
3321
|
] })
|
|
3309
3322
|
] })
|
|
@@ -3312,44 +3325,44 @@ var CryptoSelectModal = import_nice_modal_react4.default.create(() => {
|
|
|
3312
3325
|
CryptoSelectModal.displayName = "CryptoSelectModal";
|
|
3313
3326
|
|
|
3314
3327
|
// src/components/CryptoTab/Crypto/SelectCoinButton.tsx
|
|
3315
|
-
var
|
|
3328
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
3316
3329
|
var SelectCoinButton = () => {
|
|
3317
3330
|
const openModal = () => {
|
|
3318
|
-
|
|
3331
|
+
import_nice_modal_react6.default.show(CryptoSelectModal);
|
|
3319
3332
|
};
|
|
3320
|
-
return /* @__PURE__ */ (0,
|
|
3321
|
-
/* @__PURE__ */ (0,
|
|
3322
|
-
/* @__PURE__ */ (0,
|
|
3323
|
-
/* @__PURE__ */ (0,
|
|
3324
|
-
/* @__PURE__ */ (0,
|
|
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: [
|
|
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" }) }),
|
|
3335
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex h-full w-full items-center justify-between px-3", children: [
|
|
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" }) }),
|
|
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" }) })
|
|
3325
3338
|
] })
|
|
3326
3339
|
] });
|
|
3327
3340
|
};
|
|
3328
3341
|
|
|
3329
3342
|
// src/components/CryptoTab/Crypto/SelectedCoin.tsx
|
|
3330
|
-
var
|
|
3343
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
3331
3344
|
var SelectedCoin = (props) => {
|
|
3332
3345
|
const { coin, balance, logoURI } = props;
|
|
3333
3346
|
const Icon = getSymbolLogo(coin);
|
|
3334
|
-
return /* @__PURE__ */ (0,
|
|
3335
|
-
/* @__PURE__ */ (0,
|
|
3336
|
-
/* @__PURE__ */ (0,
|
|
3337
|
-
/* @__PURE__ */ (0,
|
|
3347
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
|
|
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: [
|
|
3350
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-1", children: [
|
|
3338
3351
|
Icon,
|
|
3339
|
-
!Icon && logoURI && /* @__PURE__ */ (0,
|
|
3340
|
-
/* @__PURE__ */ (0,
|
|
3341
|
-
/* @__PURE__ */ (0,
|
|
3352
|
+
!Icon && logoURI && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("img", { className: "mr-1 size-8 shrink-0", src: logoURI, alt: `${coin} logo` }),
|
|
3353
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "font-semibold text-black", children: coin }),
|
|
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" }) })
|
|
3342
3355
|
] }),
|
|
3343
|
-
/* @__PURE__ */ (0,
|
|
3356
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("p", { className: "text-xs font-medium text-black/50", children: [
|
|
3344
3357
|
"Wallet balance ",
|
|
3345
|
-
/* @__PURE__ */ (0,
|
|
3358
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-black", children: balance })
|
|
3346
3359
|
] })
|
|
3347
3360
|
] })
|
|
3348
3361
|
] });
|
|
3349
3362
|
};
|
|
3350
3363
|
|
|
3351
3364
|
// src/components/CryptoTab/Crypto/Crypto.tsx
|
|
3352
|
-
var
|
|
3365
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
3353
3366
|
var Crypto = () => {
|
|
3354
3367
|
const { address } = (0, import_wagmi4.useAccount)();
|
|
3355
3368
|
const { selectedPaymentMethod } = useSpreePaymentMethod();
|
|
@@ -3373,14 +3386,14 @@ var Crypto = () => {
|
|
|
3373
3386
|
(0, import_react15.useEffect)(() => {
|
|
3374
3387
|
register(handlePay);
|
|
3375
3388
|
}, [register, handlePay]);
|
|
3376
|
-
return /* @__PURE__ */ (0,
|
|
3377
|
-
/* @__PURE__ */ (0,
|
|
3378
|
-
/* @__PURE__ */ (0,
|
|
3379
|
-
/* @__PURE__ */ (0,
|
|
3389
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col items-baseline gap-4", children: [
|
|
3390
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex w-full items-center justify-between gap-4", children: [
|
|
3391
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h3", { className: "text-primary text-xl leading-[1.7] font-semibold", children: "Pay with Crypto" }),
|
|
3392
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ConnectButton, {})
|
|
3380
3393
|
] }),
|
|
3381
|
-
!isWalletConnected && /* @__PURE__ */ (0,
|
|
3382
|
-
isWalletConnected && /* @__PURE__ */ (0,
|
|
3383
|
-
selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */ (0,
|
|
3394
|
+
!isWalletConnected && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Logos, {}),
|
|
3395
|
+
isWalletConnected && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
|
|
3396
|
+
selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3384
3397
|
SelectedCoin,
|
|
3385
3398
|
{
|
|
3386
3399
|
coin: selectedPaymentMethod.method.symbol,
|
|
@@ -3388,13 +3401,13 @@ var Crypto = () => {
|
|
|
3388
3401
|
logoURI: selectedPaymentMethod.method.logoURI
|
|
3389
3402
|
}
|
|
3390
3403
|
),
|
|
3391
|
-
/* @__PURE__ */ (0,
|
|
3404
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SelectCoinButton, {})
|
|
3392
3405
|
] })
|
|
3393
3406
|
] });
|
|
3394
3407
|
};
|
|
3395
3408
|
|
|
3396
3409
|
// src/components/CryptoTab/Crypto/CryptoWrapper.tsx
|
|
3397
|
-
var
|
|
3410
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
3398
3411
|
var queryClient = new import_react_query.QueryClient();
|
|
3399
3412
|
var CHAINS = [import_chains.base];
|
|
3400
3413
|
var wagmiConfigCache = /* @__PURE__ */ new Map();
|
|
@@ -3414,23 +3427,23 @@ var CryptoWrapper = () => {
|
|
|
3414
3427
|
return getCachedWagmiConfig(spreePayConfig.rainbowProjectId, spreePayConfig.rainbowAppName);
|
|
3415
3428
|
}, [spreePayConfig]);
|
|
3416
3429
|
if (configIsLoading || !wagmiConfig) return null;
|
|
3417
|
-
return /* @__PURE__ */ (0,
|
|
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, {}) }) }) }) });
|
|
3418
3431
|
};
|
|
3419
3432
|
|
|
3420
3433
|
// src/components/CryptoTab/CryptoTab.tsx
|
|
3421
|
-
var
|
|
3434
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
3422
3435
|
var CryptoTab = () => {
|
|
3423
3436
|
const { spreePayConfig } = useSpreePayConfig();
|
|
3424
|
-
return /* @__PURE__ */ (0,
|
|
3425
|
-
/* @__PURE__ */ (0,
|
|
3426
|
-
/* @__PURE__ */ (0,
|
|
3437
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { children: [
|
|
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, {}) }),
|
|
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 }) })
|
|
3427
3440
|
] });
|
|
3428
3441
|
};
|
|
3429
3442
|
|
|
3430
3443
|
// src/components/TabButtons.tsx
|
|
3431
|
-
var
|
|
3444
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
3432
3445
|
var TabButton = ({ isDisabled = false, isActive, children, onClick }) => {
|
|
3433
|
-
return /* @__PURE__ */ (0,
|
|
3446
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
3434
3447
|
"button",
|
|
3435
3448
|
{
|
|
3436
3449
|
disabled: isDisabled,
|
|
@@ -3453,65 +3466,56 @@ var TabButtons = (props) => {
|
|
|
3453
3466
|
onChange({ type, method: null });
|
|
3454
3467
|
}
|
|
3455
3468
|
};
|
|
3456
|
-
return /* @__PURE__ */ (0,
|
|
3457
|
-
configIsLoading && /* @__PURE__ */ (0,
|
|
3458
|
-
/* @__PURE__ */ (0,
|
|
3459
|
-
/* @__PURE__ */ (0,
|
|
3469
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex gap-2", children: [
|
|
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" })
|
|
3460
3473
|
] }),
|
|
3461
|
-
spreePayConfig?.creditCard.enabled && /* @__PURE__ */ (0,
|
|
3462
|
-
/* @__PURE__ */ (0,
|
|
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)(
|
|
3463
3476
|
"path",
|
|
3464
3477
|
{
|
|
3465
3478
|
fill: "currentColor",
|
|
3466
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"
|
|
3467
3480
|
}
|
|
3468
3481
|
) }),
|
|
3469
|
-
/* @__PURE__ */ (0,
|
|
3482
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-sm font-medium", children: "Card" })
|
|
3470
3483
|
] }),
|
|
3471
|
-
spreePayConfig?.crypto.enabled && /* @__PURE__ */ (0,
|
|
3472
|
-
/* @__PURE__ */ (0,
|
|
3473
|
-
/* @__PURE__ */ (0,
|
|
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)(
|
|
3474
3487
|
"path",
|
|
3475
3488
|
{
|
|
3476
3489
|
fill: "currentColor",
|
|
3477
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"
|
|
3478
3491
|
}
|
|
3479
3492
|
),
|
|
3480
|
-
/* @__PURE__ */ (0,
|
|
3493
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
3481
3494
|
"path",
|
|
3482
3495
|
{
|
|
3483
3496
|
fill: "currentColor",
|
|
3484
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"
|
|
3485
3498
|
}
|
|
3486
3499
|
),
|
|
3487
|
-
/* @__PURE__ */ (0,
|
|
3500
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "2" })
|
|
3488
3501
|
] }),
|
|
3489
|
-
/* @__PURE__ */ (0,
|
|
3502
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-sm font-medium", children: "Crypto" })
|
|
3490
3503
|
] })
|
|
3491
3504
|
] });
|
|
3492
3505
|
};
|
|
3493
3506
|
|
|
3494
|
-
// src/components/Tabs.tsx
|
|
3495
|
-
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
3496
|
-
var Tabs = () => {
|
|
3497
|
-
const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
|
|
3498
|
-
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "mb-4 rounded-3xl border border-black/25 bg-white", children: [
|
|
3499
|
-
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex w-full flex-col gap-4 border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-6", children: [
|
|
3500
|
-
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h2", { className: "text-primary text-2xl font-semibold", children: "Choose a Payment Method" }),
|
|
3501
|
-
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
|
|
3502
|
-
] }),
|
|
3503
|
-
selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(CreditCardTab, {}),
|
|
3504
|
-
selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(CryptoTab, {})
|
|
3505
|
-
] });
|
|
3506
|
-
};
|
|
3507
|
-
|
|
3508
3507
|
// src/SpreePayContent.tsx
|
|
3509
|
-
var
|
|
3508
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
3510
3509
|
var SpreePayContent = ({ isLoggedIn }) => {
|
|
3511
|
-
|
|
3512
|
-
|
|
3513
|
-
/* @__PURE__ */ (0,
|
|
3514
|
-
|
|
3510
|
+
const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
|
|
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: [
|
|
3513
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h2", { className: "text-primary text-2xl font-semibold", children: "Choose a Payment Method" }),
|
|
3514
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
|
|
3515
|
+
] }),
|
|
3516
|
+
selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CreditCardTab, {}),
|
|
3517
|
+
selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CryptoTab, {}),
|
|
3518
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CheckoutButton, { isLoggedIn })
|
|
3515
3519
|
] });
|
|
3516
3520
|
};
|
|
3517
3521
|
|
|
@@ -3519,8 +3523,8 @@ var SpreePayContent = ({ isLoggedIn }) => {
|
|
|
3519
3523
|
var import_react17 = require("react");
|
|
3520
3524
|
var import_keycloak_js = __toESM(require("keycloak-js"), 1);
|
|
3521
3525
|
var refreshAheadSeconds = 60;
|
|
3522
|
-
function useKeycloakSSO(
|
|
3523
|
-
const { url, realm, clientId, ssoPageURI, enabled } =
|
|
3526
|
+
function useKeycloakSSO(config2) {
|
|
3527
|
+
const { url, realm, clientId, ssoPageURI, enabled } = config2;
|
|
3524
3528
|
const initRef = (0, import_react17.useRef)(false);
|
|
3525
3529
|
const kcRef = (0, import_react17.useRef)(null);
|
|
3526
3530
|
const refreshTimerRef = (0, import_react17.useRef)(null);
|
|
@@ -3587,7 +3591,7 @@ function useKeycloakSSO(config) {
|
|
|
3587
3591
|
}
|
|
3588
3592
|
|
|
3589
3593
|
// src/SpreePay.tsx
|
|
3590
|
-
var
|
|
3594
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
3591
3595
|
var SpreePayInner = () => {
|
|
3592
3596
|
const [portalEl, setPortalEl] = (0, import_react18.useState)(null);
|
|
3593
3597
|
const rootRef = (0, import_react18.useCallback)((node) => {
|
|
@@ -3609,6 +3613,7 @@ var SpreePayInner = () => {
|
|
|
3609
3613
|
enabled: !env?.accessToken
|
|
3610
3614
|
});
|
|
3611
3615
|
const _accessToken = env.accessToken ?? accessToken;
|
|
3616
|
+
const unauthenticatedFetcher = (0, import_react18.useCallback)(() => Promise.resolve(null), []);
|
|
3612
3617
|
const slapiFetcher = (0, import_react18.useMemo)(() => {
|
|
3613
3618
|
if (_accessToken) {
|
|
3614
3619
|
return registerApi({
|
|
@@ -3617,16 +3622,16 @@ var SpreePayInner = () => {
|
|
|
3617
3622
|
baseUrl: staticConfig.slapiUrl
|
|
3618
3623
|
});
|
|
3619
3624
|
}
|
|
3620
|
-
|
|
3625
|
+
return unauthenticatedFetcher;
|
|
3626
|
+
}, [_accessToken, staticConfig, tenantId, unauthenticatedFetcher]);
|
|
3621
3627
|
const getContent = () => {
|
|
3622
3628
|
if (isChecking) {
|
|
3623
|
-
return /* @__PURE__ */ (0,
|
|
3624
|
-
/* @__PURE__ */ (0,
|
|
3625
|
-
/* @__PURE__ */ (0,
|
|
3626
|
-
/* @__PURE__ */ (0, import_jsx_runtime44.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" })
|
|
3627
3632
|
] });
|
|
3628
3633
|
}
|
|
3629
|
-
return /* @__PURE__ */ (0,
|
|
3634
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
3630
3635
|
import_swr5.SWRConfig,
|
|
3631
3636
|
{
|
|
3632
3637
|
value: {
|
|
@@ -3635,17 +3640,17 @@ var SpreePayInner = () => {
|
|
|
3635
3640
|
revalidateOnFocus: false,
|
|
3636
3641
|
revalidateIfStale: false
|
|
3637
3642
|
},
|
|
3638
|
-
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) }) }) })
|
|
3639
3644
|
}
|
|
3640
3645
|
);
|
|
3641
3646
|
};
|
|
3642
|
-
return /* @__PURE__ */ (0,
|
|
3643
|
-
/* @__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" }),
|
|
3644
3649
|
getContent()
|
|
3645
3650
|
] });
|
|
3646
3651
|
};
|
|
3647
3652
|
var SpreePay = (props) => {
|
|
3648
|
-
return /* @__PURE__ */ (0,
|
|
3653
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(StaticConfigProvider, { props, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SpreePayInner, {}) });
|
|
3649
3654
|
};
|
|
3650
3655
|
|
|
3651
3656
|
// src/hooks/useCapture3DS.ts
|