@superlogic/spree-pay 0.1.35 → 0.1.37
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 +520 -471
- package/build/index.css +331 -541
- package/build/index.d.cts +1 -1
- package/build/index.d.ts +1 -1
- package/build/index.js +518 -469
- package/package.json +3 -2
- package/src/styles/globals.css +149 -0
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.37";
|
|
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 });
|
|
@@ -269,7 +292,7 @@ var Spinner = (props) => {
|
|
|
269
292
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
270
293
|
"svg",
|
|
271
294
|
{
|
|
272
|
-
className: cn(`${sizeClasses[size]} animate-spin text-
|
|
295
|
+
className: cn(`${sizeClasses[size]} animate-spin text-(--tertiary)`, className),
|
|
273
296
|
viewBox: "0 0 64 64",
|
|
274
297
|
fill: "none",
|
|
275
298
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -294,7 +317,7 @@ var Spinner = (props) => {
|
|
|
294
317
|
strokeWidth: "5",
|
|
295
318
|
strokeLinecap: "round",
|
|
296
319
|
strokeLinejoin: "round",
|
|
297
|
-
className: "text-
|
|
320
|
+
className: "text-(--brand-primary)"
|
|
298
321
|
}
|
|
299
322
|
)
|
|
300
323
|
]
|
|
@@ -385,50 +408,31 @@ var CheckoutButton = ({ isLoggedIn }) => {
|
|
|
385
408
|
}
|
|
386
409
|
return "Checkout";
|
|
387
410
|
};
|
|
388
|
-
|
|
389
|
-
|
|
411
|
+
const checkoutClass = "text-(--inverse) h-14 w-full cursor-pointer rounded-4xl bg-(--s-brand) hover:bg-(--s-brand-hover) px-4 text-center text-xl leading-6 font-medium disabled:cursor-not-allowed disabled:bg-(--s-disabled) disabled:text-(--disabled)";
|
|
412
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex w-full flex-col gap-4 bg-(--s-default) p-6 text-xs leading-5 font-medium text-(--secondary) md:px-7", children: [
|
|
413
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { className: "text-center", children: [
|
|
390
414
|
"By clicking on the button below I acknowledge that I have read and accepted the",
|
|
391
415
|
" ",
|
|
392
416
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("a", { className: "underline", href: spreePayConfig?.termsConditionsUrl, target: "_blank", rel: "noreferrer", children: "Terms and Conditions" }),
|
|
393
417
|
"."
|
|
394
|
-
] })
|
|
395
|
-
isLoggedIn ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: onProcess && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
396
|
-
"button",
|
|
397
|
-
{
|
|
398
|
-
disabled: isDisabled,
|
|
399
|
-
onClick: onProcess,
|
|
400
|
-
className: "bg-primary h-[60px] w-full cursor-pointer text-xl font-semibold text-white disabled:cursor-not-allowed disabled:opacity-50",
|
|
401
|
-
children: getCheckoutContent()
|
|
402
|
-
}
|
|
403
|
-
) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
418
|
+
] }),
|
|
419
|
+
isLoggedIn ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: onProcess && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { disabled: isDisabled, onClick: onProcess, className: checkoutClass, children: getCheckoutContent() }) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
404
420
|
"a",
|
|
405
421
|
{
|
|
406
422
|
href: `${staticConfig.keycloakUrl}/realms/${env.tenantId}/protocol/openid-connect/auth?client_id=${staticConfig.keycloakClientId}&response_type=code&redirect_uri=${window.location.href}`,
|
|
407
|
-
className:
|
|
423
|
+
className: checkoutClass,
|
|
408
424
|
children: "Log in / Sign up for an AIR account"
|
|
409
425
|
}
|
|
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."
|
|
426
|
+
),
|
|
427
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("a", { href: "https://www.spree.finance/", className: "flex items-center justify-center gap-2 hover:underline", children: [
|
|
428
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { children: "Powered by" }),
|
|
429
|
+
/* @__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)(
|
|
430
|
+
"path",
|
|
431
|
+
{
|
|
432
|
+
fill: "currentColor",
|
|
433
|
+
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"
|
|
434
|
+
}
|
|
435
|
+
) })
|
|
432
436
|
] })
|
|
433
437
|
] });
|
|
434
438
|
};
|
|
@@ -475,17 +479,17 @@ function usePortalContainer() {
|
|
|
475
479
|
}
|
|
476
480
|
|
|
477
481
|
// src/ui/dialog.tsx
|
|
478
|
-
var
|
|
482
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
479
483
|
function Dialog({ ...props }) {
|
|
480
|
-
return /* @__PURE__ */ (0,
|
|
484
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
|
|
481
485
|
}
|
|
482
486
|
function DialogPortal({ ...props }) {
|
|
483
487
|
const container = usePortalContainer();
|
|
484
488
|
const safeContainer = container && document.body.contains(container) ? container : void 0;
|
|
485
|
-
return /* @__PURE__ */ (0,
|
|
489
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogPrimitive.Portal, { container: safeContainer, "data-slot": "dialog-portal", ...props });
|
|
486
490
|
}
|
|
487
491
|
function DialogOverlay({ className, ...props }) {
|
|
488
|
-
return /* @__PURE__ */ (0,
|
|
492
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
489
493
|
DialogPrimitive.Overlay,
|
|
490
494
|
{
|
|
491
495
|
"data-slot": "dialog-overlay",
|
|
@@ -503,27 +507,27 @@ function DialogContent({
|
|
|
503
507
|
showCloseButton = true,
|
|
504
508
|
...props
|
|
505
509
|
}) {
|
|
506
|
-
return /* @__PURE__ */ (0,
|
|
507
|
-
/* @__PURE__ */ (0,
|
|
508
|
-
/* @__PURE__ */ (0,
|
|
510
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(DialogPortal, { "data-slot": "dialog-portal", children: [
|
|
511
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogOverlay, {}),
|
|
512
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
509
513
|
DialogPrimitive.Content,
|
|
510
514
|
{
|
|
511
515
|
"data-slot": "dialog-content",
|
|
512
516
|
className: cn(
|
|
513
|
-
"
|
|
517
|
+
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-(--border-component-specific-card) bg-(--surface-component-specific-card-default-card) p-6 shadow-lg duration-200 sm:max-w-lg",
|
|
514
518
|
className
|
|
515
519
|
),
|
|
516
520
|
...props,
|
|
517
521
|
children: [
|
|
518
522
|
children,
|
|
519
|
-
showCloseButton && /* @__PURE__ */ (0,
|
|
523
|
+
showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
520
524
|
DialogPrimitive.Close,
|
|
521
525
|
{
|
|
522
526
|
"data-slot": "dialog-close",
|
|
523
|
-
className: "ring-offset-background focus:ring-ring data-[state=open]:
|
|
527
|
+
className: "ring-offset-background focus:ring-ring 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 data-[state=open]:bg-(--accent) [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
524
528
|
children: [
|
|
525
|
-
/* @__PURE__ */ (0,
|
|
526
|
-
/* @__PURE__ */ (0,
|
|
529
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react.XIcon, {}),
|
|
530
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "sr-only", children: "Close" })
|
|
527
531
|
]
|
|
528
532
|
}
|
|
529
533
|
)
|
|
@@ -533,7 +537,7 @@ function DialogContent({
|
|
|
533
537
|
] });
|
|
534
538
|
}
|
|
535
539
|
function DialogTitle({ className, ...props }) {
|
|
536
|
-
return /* @__PURE__ */ (0,
|
|
540
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
537
541
|
DialogPrimitive.Title,
|
|
538
542
|
{
|
|
539
543
|
"data-slot": "dialog-title",
|
|
@@ -543,7 +547,7 @@ function DialogTitle({ className, ...props }) {
|
|
|
543
547
|
);
|
|
544
548
|
}
|
|
545
549
|
function DialogDescription({ className, ...props }) {
|
|
546
|
-
return /* @__PURE__ */ (0,
|
|
550
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
547
551
|
DialogPrimitive.Description,
|
|
548
552
|
{
|
|
549
553
|
"data-slot": "dialog-description",
|
|
@@ -554,7 +558,7 @@ function DialogDescription({ className, ...props }) {
|
|
|
554
558
|
}
|
|
555
559
|
|
|
556
560
|
// src/modals/Iframe3ds.tsx
|
|
557
|
-
var
|
|
561
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
558
562
|
var Iframe3ds = import_nice_modal_react.default.create(({ url }) => {
|
|
559
563
|
const modal = (0, import_nice_modal_react.useModal)();
|
|
560
564
|
(0, import_react4.useEffect)(() => {
|
|
@@ -567,9 +571,9 @@ var Iframe3ds = import_nice_modal_react.default.create(({ url }) => {
|
|
|
567
571
|
modal.reject();
|
|
568
572
|
modal.remove();
|
|
569
573
|
};
|
|
570
|
-
return /* @__PURE__ */ (0,
|
|
571
|
-
/* @__PURE__ */ (0,
|
|
572
|
-
/* @__PURE__ */ (0,
|
|
574
|
+
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: [
|
|
575
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DialogTitle, { className: "hidden", children: "3D Secure Verification" }),
|
|
576
|
+
/* @__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
577
|
] }) });
|
|
574
578
|
});
|
|
575
579
|
Iframe3ds.displayName = "Iframe3ds";
|
|
@@ -640,10 +644,10 @@ var slapiApi = {
|
|
|
640
644
|
throw new Error("slapiApi is not configured. Call registerApi(...) first.");
|
|
641
645
|
}
|
|
642
646
|
};
|
|
643
|
-
var registerApi = (
|
|
644
|
-
cfg.baseUrl =
|
|
645
|
-
cfg.accessToken =
|
|
646
|
-
cfg.tenantId =
|
|
647
|
+
var registerApi = (config2) => {
|
|
648
|
+
cfg.baseUrl = config2.baseUrl;
|
|
649
|
+
cfg.accessToken = config2.accessToken;
|
|
650
|
+
cfg.tenantId = config2.tenantId;
|
|
647
651
|
slapiApi = {
|
|
648
652
|
get: async (key) => {
|
|
649
653
|
const url = buildUrl(key);
|
|
@@ -933,6 +937,7 @@ var usePointsPayment = (mode = "web2") => {
|
|
|
933
937
|
};
|
|
934
938
|
|
|
935
939
|
// src/hooks/payments/useSplitCardPayments.ts
|
|
940
|
+
var import_nice_modal_react4 = __toESM(require("@ebay/nice-modal-react"), 1);
|
|
936
941
|
var useSplitCardPayments = (mode = "web2") => {
|
|
937
942
|
const { selectedPaymentMethod } = useSpreePaymentMethod();
|
|
938
943
|
const { env } = useSpreePayEnv();
|
|
@@ -967,6 +972,12 @@ var useSplitCardPayments = (mode = "web2") => {
|
|
|
967
972
|
amount: points
|
|
968
973
|
}
|
|
969
974
|
});
|
|
975
|
+
if (paymentResData.redirectUrl) {
|
|
976
|
+
const paymentIntent = await import_nice_modal_react4.default.show(Iframe3ds, { url: paymentResData.redirectUrl });
|
|
977
|
+
if (paymentIntent) {
|
|
978
|
+
await SlapiPaymentService.validate3DS({ paymentId: paymentResData.id });
|
|
979
|
+
}
|
|
980
|
+
}
|
|
970
981
|
const cardStatus = await longPollCardStatus(paymentResData.id);
|
|
971
982
|
if (mode === "web3") {
|
|
972
983
|
const wallet = peekAirWallet();
|
|
@@ -1029,7 +1040,7 @@ var import_react_stripe_js2 = require("@stripe/react-stripe-js");
|
|
|
1029
1040
|
var import_stripe_js = require("@stripe/stripe-js");
|
|
1030
1041
|
|
|
1031
1042
|
// src/components/CreditCardTab/CreditCard/CardsList.tsx
|
|
1032
|
-
var
|
|
1043
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
1033
1044
|
var isRemoveDisabled = true;
|
|
1034
1045
|
var CardListItem = ({ card, isSelected, onSelect }) => {
|
|
1035
1046
|
const handleSelect = () => {
|
|
@@ -1039,69 +1050,72 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
|
|
|
1039
1050
|
e.stopPropagation();
|
|
1040
1051
|
if (isSelected || isRemoveDisabled) return;
|
|
1041
1052
|
};
|
|
1042
|
-
return /* @__PURE__ */ (0,
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
"flex h-full w-full items-center justify-between rounded-r-sm border border-l-0! border-transparent px-3",
|
|
1053
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
1054
|
+
"button",
|
|
1055
|
+
{
|
|
1056
|
+
type: "button",
|
|
1057
|
+
onClick: handleSelect,
|
|
1058
|
+
className: cn(
|
|
1059
|
+
"flex h-12 w-full overflow-hidden rounded-md border-2 border-(--b-inverse) bg-(--s-primary) hover:bg-(--s-primary-hover)",
|
|
1060
|
+
{
|
|
1061
|
+
"border-(--b-brand)": isSelected
|
|
1062
|
+
}
|
|
1063
|
+
),
|
|
1064
|
+
children: [
|
|
1065
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1066
|
+
"div",
|
|
1057
1067
|
{
|
|
1058
|
-
"border-
|
|
1068
|
+
className: cn("flex h-full w-11 shrink-0 items-center justify-center border-r border-(--b-inverse)", {
|
|
1069
|
+
"border-(--b-brand)": isSelected
|
|
1070
|
+
}),
|
|
1071
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex size-5 items-center justify-center rounded-full border-2 border-(--brand-primary)", children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "size-2 rounded-full bg-(--brand-primary)" }) })
|
|
1059
1072
|
}
|
|
1060
1073
|
),
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
"
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
"div",
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1074
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
1075
|
+
"div",
|
|
1076
|
+
{
|
|
1077
|
+
className: cn("flex h-full w-full items-center justify-between rounded-r-sm px-3", {
|
|
1078
|
+
"border-(--primary)": isSelected
|
|
1079
|
+
}),
|
|
1080
|
+
children: [
|
|
1081
|
+
/* @__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-(--brand-primary)", children: card.schema }) }),
|
|
1082
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
1083
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { className: "text-sm font-medium text-(--secondary)", children: [
|
|
1084
|
+
"Ending in ",
|
|
1085
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-(--brand-primary)", children: card.lastFourNumbers })
|
|
1086
|
+
] }),
|
|
1087
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1088
|
+
"div",
|
|
1089
|
+
{
|
|
1090
|
+
onClick: handleRemoveCard,
|
|
1091
|
+
className: cn("rounded-md p-1 text-(--tertiary) transition-all hover:bg-(--s-secondary)", {
|
|
1092
|
+
"cursor-not-allowed opacity-50": isSelected || isRemoveDisabled
|
|
1093
|
+
// 'cursor-pointer': !isSelected || !isRemoveDisabled,
|
|
1094
|
+
}),
|
|
1095
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1096
|
+
"path",
|
|
1097
|
+
{
|
|
1098
|
+
fill: "currentColor",
|
|
1099
|
+
d: "M6.35 16.17c-.38 0-.7-.13-.96-.4a1.3 1.3 0 0 1-.39-.95V4.5h-.83v-.83H7.5v-.64h5v.64h3.33v.83H15v10.32c0 .39-.13.7-.39.96a1.3 1.3 0 0 1-.96.39h-7.3ZM14.17 4.5H5.83v10.32c0 .15.05.28.15.37.1.1.22.15.37.15h7.3c.13 0 .25-.06.36-.16.1-.11.16-.23.16-.36V4.5Zm-6 9.17h.84v-7.5h-.84v7.5Zm2.82 0h.84v-7.5h-.84v7.5Z"
|
|
1100
|
+
}
|
|
1101
|
+
) })
|
|
1102
|
+
}
|
|
1103
|
+
)
|
|
1104
|
+
] })
|
|
1105
|
+
]
|
|
1106
|
+
}
|
|
1107
|
+
)
|
|
1108
|
+
]
|
|
1109
|
+
}
|
|
1110
|
+
);
|
|
1094
1111
|
};
|
|
1095
1112
|
var CardsList = ({ selectedCard, setCard }) => {
|
|
1096
1113
|
const { cards, cardsIsLoading } = useCards();
|
|
1097
1114
|
if (cardsIsLoading) {
|
|
1098
|
-
return /* @__PURE__ */ (0,
|
|
1099
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "bg-primary/8 h-11 animate-pulse rounded-sm" }),
|
|
1100
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "bg-primary/8 h-11 animate-pulse rounded-sm" })
|
|
1101
|
-
] });
|
|
1115
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "h-11 animate-pulse rounded-sm bg-(--s-primary)" }) });
|
|
1102
1116
|
}
|
|
1103
1117
|
if (cards.length === 0) return null;
|
|
1104
|
-
return /* @__PURE__ */ (0,
|
|
1118
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex w-full flex-col gap-4", children: cards.map((card) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardListItem, { isSelected: selectedCard?.id === card.id, onSelect: setCard, card }, card.id)) });
|
|
1105
1119
|
};
|
|
1106
1120
|
|
|
1107
1121
|
// src/components/CreditCardTab/CreditCard/CreditCardForm.tsx
|
|
@@ -1111,18 +1125,18 @@ var import_react_stripe_js = require("@stripe/react-stripe-js");
|
|
|
1111
1125
|
// src/ui/button.tsx
|
|
1112
1126
|
var import_react_slot = require("@radix-ui/react-slot");
|
|
1113
1127
|
var import_class_variance_authority = require("class-variance-authority");
|
|
1114
|
-
var
|
|
1128
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
1115
1129
|
var buttonVariants = (0, import_class_variance_authority.cva)(
|
|
1116
1130
|
"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
1131
|
{
|
|
1118
1132
|
variants: {
|
|
1119
1133
|
variant: {
|
|
1120
|
-
default: "bg-primary text-
|
|
1121
|
-
destructive: "bg-destructive text-
|
|
1122
|
-
outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
|
1123
|
-
secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
|
|
1124
|
-
ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
|
1125
|
-
link: "text-primary underline-offset-4 hover:underline"
|
|
1134
|
+
default: "bg-(--primary) text-(--inverse) shadow-xs hover:bg-(--primary)/90 ",
|
|
1135
|
+
destructive: "bg-destructive text-(--inverse) shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
|
1136
|
+
outline: "border bg-background shadow-xs hover:bg-(--accent) hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
|
1137
|
+
secondary: "bg-(--secondary) text-secondary-foreground shadow-xs hover:bg-(--secondary)/80",
|
|
1138
|
+
ghost: "hover:bg-(--accent) hover:text-accent-foreground dark:hover:bg-(--accent)/50",
|
|
1139
|
+
link: "text-(--brand-primary) underline-offset-4 hover:underline"
|
|
1126
1140
|
},
|
|
1127
1141
|
size: {
|
|
1128
1142
|
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
|
@@ -1146,29 +1160,29 @@ function Button({
|
|
|
1146
1160
|
...props
|
|
1147
1161
|
}) {
|
|
1148
1162
|
const Comp = asChild ? import_react_slot.Slot : "button";
|
|
1149
|
-
return /* @__PURE__ */ (0,
|
|
1163
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Comp, { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ...props });
|
|
1150
1164
|
}
|
|
1151
1165
|
|
|
1152
1166
|
// src/ui/checkbox.tsx
|
|
1153
1167
|
var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"), 1);
|
|
1154
1168
|
var import_lucide_react2 = require("lucide-react");
|
|
1155
|
-
var
|
|
1169
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
1156
1170
|
function Checkbox({ className, ...props }) {
|
|
1157
|
-
return /* @__PURE__ */ (0,
|
|
1171
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1158
1172
|
CheckboxPrimitive.Root,
|
|
1159
1173
|
{
|
|
1160
1174
|
"data-slot": "checkbox",
|
|
1161
1175
|
className: cn(
|
|
1162
|
-
"peer border-input dark:bg-input/30
|
|
1176
|
+
"peer border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-sm border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-(--primary) data-[state=checked]:bg-(--primary) data-[state=checked]:text-(--inverse) dark:data-[state=checked]:bg-(--primary)",
|
|
1163
1177
|
className
|
|
1164
1178
|
),
|
|
1165
1179
|
...props,
|
|
1166
|
-
children: /* @__PURE__ */ (0,
|
|
1180
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1167
1181
|
CheckboxPrimitive.Indicator,
|
|
1168
1182
|
{
|
|
1169
1183
|
"data-slot": "checkbox-indicator",
|
|
1170
1184
|
className: "flex items-center justify-center text-current transition-none",
|
|
1171
|
-
children: /* @__PURE__ */ (0,
|
|
1185
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react2.CheckIcon, { className: "size-3.5 text-(--inverse)" })
|
|
1172
1186
|
}
|
|
1173
1187
|
)
|
|
1174
1188
|
}
|
|
@@ -1177,9 +1191,9 @@ function Checkbox({ className, ...props }) {
|
|
|
1177
1191
|
|
|
1178
1192
|
// src/ui/label.tsx
|
|
1179
1193
|
var LabelPrimitive = __toESM(require("@radix-ui/react-label"), 1);
|
|
1180
|
-
var
|
|
1194
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
1181
1195
|
function Label({ className, ...props }) {
|
|
1182
|
-
return /* @__PURE__ */ (0,
|
|
1196
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1183
1197
|
LabelPrimitive.Root,
|
|
1184
1198
|
{
|
|
1185
1199
|
"data-slot": "label",
|
|
@@ -1193,11 +1207,24 @@ function Label({ className, ...props }) {
|
|
|
1193
1207
|
}
|
|
1194
1208
|
|
|
1195
1209
|
// src/components/CreditCardTab/CreditCard/CreditCardForm.tsx
|
|
1196
|
-
var
|
|
1197
|
-
var
|
|
1210
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
1211
|
+
var styleDark = {
|
|
1198
1212
|
base: {
|
|
1199
1213
|
fontSize: "16px",
|
|
1200
|
-
fontWeight: "
|
|
1214
|
+
fontWeight: "500",
|
|
1215
|
+
color: "rgba(255, 255, 255, 0.70)",
|
|
1216
|
+
"::placeholder": {
|
|
1217
|
+
color: "rgba(255, 255, 255, 0.5)"
|
|
1218
|
+
}
|
|
1219
|
+
},
|
|
1220
|
+
invalid: {
|
|
1221
|
+
color: "rgba(255, 255, 255, 0.70)"
|
|
1222
|
+
}
|
|
1223
|
+
};
|
|
1224
|
+
var styleLight = {
|
|
1225
|
+
base: {
|
|
1226
|
+
fontSize: "16px",
|
|
1227
|
+
fontWeight: "500",
|
|
1201
1228
|
color: "#000",
|
|
1202
1229
|
"::placeholder": {
|
|
1203
1230
|
color: "rgba(0, 0, 0, 0.5)"
|
|
@@ -1208,12 +1235,13 @@ var style = {
|
|
|
1208
1235
|
}
|
|
1209
1236
|
};
|
|
1210
1237
|
var stripeElementClasses = {
|
|
1211
|
-
base: "w-full
|
|
1212
|
-
invalid: "
|
|
1238
|
+
base: "w-full rounded-[12px] bg-(--s-primary) px-5 py-4 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50",
|
|
1239
|
+
invalid: "focus-visible:ring-destructive",
|
|
1213
1240
|
focus: "border-ring ring-ring/50 ring-2"
|
|
1214
1241
|
};
|
|
1215
1242
|
var CreditCardForm = ({ cancel, saveCard }) => {
|
|
1216
1243
|
const [cardError, setCardError] = (0, import_react5.useState)(void 0);
|
|
1244
|
+
const { env } = useSpreePayEnv();
|
|
1217
1245
|
const elements = (0, import_react_stripe_js.useElements)();
|
|
1218
1246
|
const stripe = (0, import_react_stripe_js.useStripe)();
|
|
1219
1247
|
const id = (0, import_react5.useId)();
|
|
@@ -1251,58 +1279,74 @@ var CreditCardForm = ({ cancel, saveCard }) => {
|
|
|
1251
1279
|
setCardError("An error occurred while processing your card. Please try again.");
|
|
1252
1280
|
}
|
|
1253
1281
|
};
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1282
|
+
const isDarkMode = env.tenantId === "cdc";
|
|
1283
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
|
|
1284
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex w-full flex-col gap-4", children: [
|
|
1285
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1257
1286
|
import_react_stripe_js.CardNumberElement,
|
|
1258
1287
|
{
|
|
1259
1288
|
options: {
|
|
1260
|
-
style,
|
|
1289
|
+
style: isDarkMode ? styleDark : styleLight,
|
|
1261
1290
|
placeholder: "Card Number",
|
|
1262
1291
|
classes: stripeElementClasses
|
|
1263
1292
|
}
|
|
1264
1293
|
}
|
|
1265
1294
|
),
|
|
1266
|
-
/* @__PURE__ */ (0,
|
|
1267
|
-
/* @__PURE__ */ (0,
|
|
1295
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex w-full gap-4", children: [
|
|
1296
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1268
1297
|
import_react_stripe_js.CardExpiryElement,
|
|
1269
1298
|
{
|
|
1270
1299
|
options: {
|
|
1271
|
-
style,
|
|
1300
|
+
style: isDarkMode ? styleDark : styleLight,
|
|
1272
1301
|
placeholder: "MM / YY",
|
|
1273
1302
|
classes: stripeElementClasses
|
|
1274
1303
|
}
|
|
1275
1304
|
}
|
|
1276
1305
|
),
|
|
1277
|
-
/* @__PURE__ */ (0,
|
|
1306
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1278
1307
|
import_react_stripe_js.CardCvcElement,
|
|
1279
1308
|
{
|
|
1280
1309
|
options: {
|
|
1281
|
-
style,
|
|
1310
|
+
style: isDarkMode ? styleDark : styleLight,
|
|
1282
1311
|
placeholder: "CVV",
|
|
1283
1312
|
classes: stripeElementClasses
|
|
1284
1313
|
}
|
|
1285
1314
|
}
|
|
1286
1315
|
)
|
|
1287
1316
|
] }),
|
|
1288
|
-
cardError && /* @__PURE__ */ (0,
|
|
1317
|
+
cardError && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-destructive mt-1 text-sm", children: cardError })
|
|
1289
1318
|
] }),
|
|
1290
|
-
/* @__PURE__ */ (0,
|
|
1291
|
-
/* @__PURE__ */ (0,
|
|
1292
|
-
/* @__PURE__ */ (0,
|
|
1319
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
1320
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Checkbox, { disabled: true, checked: true, id: "saveCard" }),
|
|
1321
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Label, { className: "text-sm font-medium", htmlFor: "saveCard", children: "Save card for future purchases" })
|
|
1293
1322
|
] }),
|
|
1294
|
-
/* @__PURE__ */ (0,
|
|
1295
|
-
/* @__PURE__ */ (0,
|
|
1296
|
-
|
|
1323
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex w-full justify-end gap-2", children: [
|
|
1324
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1325
|
+
Button,
|
|
1326
|
+
{
|
|
1327
|
+
variant: "outline",
|
|
1328
|
+
className: "border-(--b-brand) bg-transparent font-medium text-(--brand-primary) hover:bg-(--s-primary-hover) hover:text-(--brand-primary)",
|
|
1329
|
+
onClick: cancel,
|
|
1330
|
+
children: "Cancel"
|
|
1331
|
+
}
|
|
1332
|
+
),
|
|
1333
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1334
|
+
Button,
|
|
1335
|
+
{
|
|
1336
|
+
className: "bg-(--s-brand) font-medium text-(--inverse) hover:bg-(--s-brand-hover)",
|
|
1337
|
+
onClick: handleSaveCard,
|
|
1338
|
+
children: "Add Card"
|
|
1339
|
+
}
|
|
1340
|
+
)
|
|
1297
1341
|
] })
|
|
1298
1342
|
] });
|
|
1299
1343
|
};
|
|
1300
1344
|
|
|
1301
1345
|
// src/components/CreditCardTab/CreditCard/CreditCard.tsx
|
|
1302
|
-
var
|
|
1346
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
1303
1347
|
var StripeWrapper = (props) => {
|
|
1304
1348
|
const stripePromise = (0, import_react6.useMemo)(() => (0, import_stripe_js.loadStripe)(props.publicKey), [props.publicKey]);
|
|
1305
|
-
return /* @__PURE__ */ (0,
|
|
1349
|
+
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
1350
|
};
|
|
1307
1351
|
var CreditCard = () => {
|
|
1308
1352
|
const [showForm, setShowForm] = (0, import_react6.useState)(false);
|
|
@@ -1320,19 +1364,27 @@ var CreditCard = () => {
|
|
|
1320
1364
|
const handleCancel = () => {
|
|
1321
1365
|
setShowForm(false);
|
|
1322
1366
|
};
|
|
1323
|
-
return /* @__PURE__ */ (0,
|
|
1324
|
-
/* @__PURE__ */ (0,
|
|
1325
|
-
!showForm && /* @__PURE__ */ (0,
|
|
1326
|
-
/* @__PURE__ */ (0,
|
|
1367
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col items-baseline gap-4", children: [
|
|
1368
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: "text-[22px] leading-7 font-medium text-(--brand-primary)", children: "Your Cards" }),
|
|
1369
|
+
!showForm && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
|
|
1370
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1327
1371
|
CardsList,
|
|
1328
1372
|
{
|
|
1329
1373
|
selectedCard: selectedPaymentMethod?.type === "CREDIT_CARD" /* CREDIT_CARD */ ? selectedPaymentMethod.method : null,
|
|
1330
1374
|
setCard
|
|
1331
1375
|
}
|
|
1332
1376
|
),
|
|
1333
|
-
|
|
1377
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1378
|
+
"button",
|
|
1379
|
+
{
|
|
1380
|
+
onClick: () => setShowForm(true),
|
|
1381
|
+
disabled: !spreePayConfig?.stripePublicKey,
|
|
1382
|
+
className: "text-md text-(--brand-primary) hover:underline",
|
|
1383
|
+
children: "Add new card"
|
|
1384
|
+
}
|
|
1385
|
+
)
|
|
1334
1386
|
] }),
|
|
1335
|
-
spreePayConfig?.stripePublicKey && showForm && /* @__PURE__ */ (0,
|
|
1387
|
+
spreePayConfig?.stripePublicKey && showForm && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(StripeWrapper, { onCancel: handleCancel, saveNewCard, publicKey: spreePayConfig.stripePublicKey })
|
|
1336
1388
|
] });
|
|
1337
1389
|
};
|
|
1338
1390
|
|
|
@@ -1344,22 +1396,22 @@ var import_react7 = require("react");
|
|
|
1344
1396
|
|
|
1345
1397
|
// src/ui/switch.tsx
|
|
1346
1398
|
var SwitchPrimitive = __toESM(require("@radix-ui/react-switch"), 1);
|
|
1347
|
-
var
|
|
1399
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
1348
1400
|
function Switch({ className, ...props }) {
|
|
1349
|
-
return /* @__PURE__ */ (0,
|
|
1401
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1350
1402
|
SwitchPrimitive.Root,
|
|
1351
1403
|
{
|
|
1352
1404
|
"data-slot": "switch",
|
|
1353
1405
|
className: cn(
|
|
1354
|
-
"peer
|
|
1406
|
+
"peer focus-visible:border-ring focus-visible:ring-ring/50 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-(--brand-primary) data-[state=unchecked]:bg-(--brand-primary)",
|
|
1355
1407
|
className
|
|
1356
1408
|
),
|
|
1357
1409
|
...props,
|
|
1358
|
-
children: /* @__PURE__ */ (0,
|
|
1410
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1359
1411
|
SwitchPrimitive.Thumb,
|
|
1360
1412
|
{
|
|
1361
1413
|
"data-slot": "switch-thumb",
|
|
1362
|
-
className: "
|
|
1414
|
+
className: "pointer-events-none block size-4 rounded-full bg-(--s-default) ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
|
|
1363
1415
|
}
|
|
1364
1416
|
)
|
|
1365
1417
|
}
|
|
@@ -1367,38 +1419,38 @@ function Switch({ className, ...props }) {
|
|
|
1367
1419
|
}
|
|
1368
1420
|
|
|
1369
1421
|
// src/components/common/PointsSwitch.tsx
|
|
1370
|
-
var
|
|
1422
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
1371
1423
|
var PointsSwitch = (props) => {
|
|
1372
1424
|
const { disabled = false, value, onChange, message } = props;
|
|
1373
1425
|
const { spreePayConfig } = useSpreePayConfig();
|
|
1374
1426
|
const { appProps } = useStaticConfig();
|
|
1375
1427
|
const { balance } = useSlapiBalance();
|
|
1376
1428
|
const id = (0, import_react7.useId)();
|
|
1377
|
-
return /* @__PURE__ */ (0,
|
|
1378
|
-
/* @__PURE__ */ (0,
|
|
1379
|
-
/* @__PURE__ */ (0,
|
|
1380
|
-
/* @__PURE__ */ (0,
|
|
1381
|
-
/* @__PURE__ */ (0,
|
|
1429
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-6", children: [
|
|
1430
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
|
|
1431
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-3", children: [
|
|
1432
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Switch, { checked: value, onCheckedChange: onChange, disabled, id }),
|
|
1433
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
1382
1434
|
Label,
|
|
1383
1435
|
{
|
|
1384
1436
|
htmlFor: id,
|
|
1385
|
-
className: "text-md flex-col items-baseline gap-0 leading-[1.3] font-
|
|
1437
|
+
className: "text-md flex-col items-baseline gap-0 leading-[1.3] font-medium text-(--brand-primary) sm:flex-row sm:gap-2 md:text-[22px]",
|
|
1386
1438
|
children: [
|
|
1387
1439
|
"Use Points ",
|
|
1388
|
-
/* @__PURE__ */ (0,
|
|
1440
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-xs font-medium text-(--tertiary)", children: "Optional" })
|
|
1389
1441
|
]
|
|
1390
1442
|
}
|
|
1391
1443
|
)
|
|
1392
1444
|
] }),
|
|
1393
|
-
/* @__PURE__ */ (0,
|
|
1394
|
-
balance?.availablePoints ? /* @__PURE__ */ (0,
|
|
1445
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2.5", children: [
|
|
1446
|
+
balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { className: "flex-1 text-right text-sm font-medium text-(--brand-primary)", children: [
|
|
1395
1447
|
formatPoints(balance.availablePoints, spreePayConfig?.pointsTitle),
|
|
1396
|
-
!!spreePayConfig?.pointsConversionRatio && /* @__PURE__ */ (0,
|
|
1448
|
+
!!spreePayConfig?.pointsConversionRatio && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-(--secondary)", children: ` \xB7 ${formatUSD(balance.availablePoints * spreePayConfig.pointsConversionRatio)}` })
|
|
1397
1449
|
] }) : null,
|
|
1398
|
-
Boolean(appProps.topUpLink) && /* @__PURE__ */ (0,
|
|
1450
|
+
Boolean(appProps.topUpLink) && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
1399
1451
|
"a",
|
|
1400
1452
|
{
|
|
1401
|
-
className: "
|
|
1453
|
+
className: "cursor-pointer rounded-full bg-(--primary) px-2 py-1.5 text-xs font-medium text-(--inverse)",
|
|
1402
1454
|
rel: "noreferrer",
|
|
1403
1455
|
target: "_blank",
|
|
1404
1456
|
href: appProps.topUpLink,
|
|
@@ -1407,15 +1459,15 @@ var PointsSwitch = (props) => {
|
|
|
1407
1459
|
)
|
|
1408
1460
|
] })
|
|
1409
1461
|
] }),
|
|
1410
|
-
message && /* @__PURE__ */ (0,
|
|
1411
|
-
/* @__PURE__ */ (0,
|
|
1462
|
+
message && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex gap-1 rounded-sm border border-(--accent)/20 bg-(--accent)/5 p-1.5", children: [
|
|
1463
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("svg", { className: "size-4 shrink-0", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
1412
1464
|
"path",
|
|
1413
1465
|
{
|
|
1414
|
-
fill: "
|
|
1466
|
+
fill: "currentColor",
|
|
1415
1467
|
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
1468
|
}
|
|
1417
1469
|
) }),
|
|
1418
|
-
/* @__PURE__ */ (0,
|
|
1470
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-xs leading-4 font-medium text-(--brand-primary)", children: message })
|
|
1419
1471
|
] })
|
|
1420
1472
|
] });
|
|
1421
1473
|
};
|
|
@@ -1428,15 +1480,15 @@ var import_airkit2 = require("@mocanetwork/airkit");
|
|
|
1428
1480
|
var import_react10 = require("react");
|
|
1429
1481
|
|
|
1430
1482
|
// src/ui/input.tsx
|
|
1431
|
-
var
|
|
1483
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
1432
1484
|
function Input({ className, type, ...props }) {
|
|
1433
|
-
return /* @__PURE__ */ (0,
|
|
1485
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1434
1486
|
"input",
|
|
1435
1487
|
{
|
|
1436
1488
|
type,
|
|
1437
1489
|
"data-slot": "input",
|
|
1438
1490
|
className: cn(
|
|
1439
|
-
"file:text-foreground
|
|
1491
|
+
"file:text-foreground dark:bg-input/30 border-input placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-(--primary) selection:text-(--inverse) file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
|
1440
1492
|
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
|
1441
1493
|
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
|
1442
1494
|
className
|
|
@@ -1507,7 +1559,7 @@ function useComposedRefs(...refs) {
|
|
|
1507
1559
|
|
|
1508
1560
|
// ../../node_modules/@radix-ui/react-context/dist/index.mjs
|
|
1509
1561
|
var React3 = __toESM(require("react"), 1);
|
|
1510
|
-
var
|
|
1562
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
1511
1563
|
function createContextScope(scopeName, createContextScopeDeps = []) {
|
|
1512
1564
|
let defaultContexts = [];
|
|
1513
1565
|
function createContext32(rootComponentName, defaultContext) {
|
|
@@ -1518,7 +1570,7 @@ function createContextScope(scopeName, createContextScopeDeps = []) {
|
|
|
1518
1570
|
const { scope, children, ...context } = props;
|
|
1519
1571
|
const Context = scope?.[scopeName]?.[index] || BaseContext;
|
|
1520
1572
|
const value = React3.useMemo(() => context, Object.values(context));
|
|
1521
|
-
return /* @__PURE__ */ (0,
|
|
1573
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Context.Provider, { value, children });
|
|
1522
1574
|
};
|
|
1523
1575
|
Provider.displayName = rootComponentName + "Provider";
|
|
1524
1576
|
function useContext22(consumerName, scope) {
|
|
@@ -1643,7 +1695,7 @@ function isFunction(value) {
|
|
|
1643
1695
|
|
|
1644
1696
|
// ../../node_modules/@radix-ui/react-direction/dist/index.mjs
|
|
1645
1697
|
var React6 = __toESM(require("react"), 1);
|
|
1646
|
-
var
|
|
1698
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
1647
1699
|
var DirectionContext = React6.createContext(void 0);
|
|
1648
1700
|
function useDirection(localDir) {
|
|
1649
1701
|
const globalDir = React6.useContext(DirectionContext);
|
|
@@ -1704,7 +1756,7 @@ function useSize(element) {
|
|
|
1704
1756
|
var React9 = __toESM(require("react"), 1);
|
|
1705
1757
|
var ReactDOM = __toESM(require("react-dom"), 1);
|
|
1706
1758
|
var import_react_slot2 = require("@radix-ui/react-slot");
|
|
1707
|
-
var
|
|
1759
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
1708
1760
|
var NODES = [
|
|
1709
1761
|
"a",
|
|
1710
1762
|
"button",
|
|
@@ -1732,7 +1784,7 @@ var Primitive = NODES.reduce((primitive, node) => {
|
|
|
1732
1784
|
if (typeof window !== "undefined") {
|
|
1733
1785
|
window[/* @__PURE__ */ Symbol.for("radix-ui")] = true;
|
|
1734
1786
|
}
|
|
1735
|
-
return /* @__PURE__ */ (0,
|
|
1787
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Comp, { ...primitiveProps, ref: forwardedRef });
|
|
1736
1788
|
});
|
|
1737
1789
|
Node2.displayName = `Primitive.${node}`;
|
|
1738
1790
|
return { ...primitive, [node]: Node2 };
|
|
@@ -1741,10 +1793,10 @@ var Primitive = NODES.reduce((primitive, node) => {
|
|
|
1741
1793
|
// ../../node_modules/@radix-ui/react-collection/dist/index.mjs
|
|
1742
1794
|
var import_react8 = __toESM(require("react"), 1);
|
|
1743
1795
|
var import_react_slot3 = require("@radix-ui/react-slot");
|
|
1744
|
-
var
|
|
1796
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
1745
1797
|
var import_react9 = __toESM(require("react"), 1);
|
|
1746
1798
|
var import_react_slot4 = require("@radix-ui/react-slot");
|
|
1747
|
-
var
|
|
1799
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
1748
1800
|
function createCollection(name) {
|
|
1749
1801
|
const PROVIDER_NAME = name + "CollectionProvider";
|
|
1750
1802
|
const [createCollectionContext, createCollectionScope2] = createContextScope(PROVIDER_NAME);
|
|
@@ -1756,7 +1808,7 @@ function createCollection(name) {
|
|
|
1756
1808
|
const { scope, children } = props;
|
|
1757
1809
|
const ref = import_react8.default.useRef(null);
|
|
1758
1810
|
const itemMap = import_react8.default.useRef(/* @__PURE__ */ new Map()).current;
|
|
1759
|
-
return /* @__PURE__ */ (0,
|
|
1811
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
|
|
1760
1812
|
};
|
|
1761
1813
|
CollectionProvider.displayName = PROVIDER_NAME;
|
|
1762
1814
|
const COLLECTION_SLOT_NAME = name + "CollectionSlot";
|
|
@@ -1766,7 +1818,7 @@ function createCollection(name) {
|
|
|
1766
1818
|
const { scope, children } = props;
|
|
1767
1819
|
const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
|
|
1768
1820
|
const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
|
|
1769
|
-
return /* @__PURE__ */ (0,
|
|
1821
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CollectionSlotImpl, { ref: composedRefs, children });
|
|
1770
1822
|
}
|
|
1771
1823
|
);
|
|
1772
1824
|
CollectionSlot.displayName = COLLECTION_SLOT_NAME;
|
|
@@ -1783,7 +1835,7 @@ function createCollection(name) {
|
|
|
1783
1835
|
context.itemMap.set(ref, { ref, ...itemData });
|
|
1784
1836
|
return () => void context.itemMap.delete(ref);
|
|
1785
1837
|
});
|
|
1786
|
-
return /* @__PURE__ */ (0,
|
|
1838
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
|
|
1787
1839
|
}
|
|
1788
1840
|
);
|
|
1789
1841
|
CollectionItemSlot.displayName = ITEM_SLOT_NAME;
|
|
@@ -1809,7 +1861,7 @@ function createCollection(name) {
|
|
|
1809
1861
|
}
|
|
1810
1862
|
|
|
1811
1863
|
// ../../node_modules/@radix-ui/react-slider/dist/index.mjs
|
|
1812
|
-
var
|
|
1864
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
1813
1865
|
var PAGE_KEYS = ["PageUp", "PageDown"];
|
|
1814
1866
|
var ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
|
|
1815
1867
|
var BACK_KEYS = {
|
|
@@ -1887,7 +1939,7 @@ var Slider = React11.forwardRef(
|
|
|
1887
1939
|
}
|
|
1888
1940
|
});
|
|
1889
1941
|
}
|
|
1890
|
-
return /* @__PURE__ */ (0,
|
|
1942
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1891
1943
|
SliderProvider,
|
|
1892
1944
|
{
|
|
1893
1945
|
scope: props.__scopeSlider,
|
|
@@ -1900,7 +1952,7 @@ var Slider = React11.forwardRef(
|
|
|
1900
1952
|
values,
|
|
1901
1953
|
orientation,
|
|
1902
1954
|
form,
|
|
1903
|
-
children: /* @__PURE__ */ (0,
|
|
1955
|
+
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
1956
|
SliderOrientation,
|
|
1905
1957
|
{
|
|
1906
1958
|
"aria-disabled": disabled,
|
|
@@ -1969,7 +2021,7 @@ var SliderHorizontal = React11.forwardRef(
|
|
|
1969
2021
|
rectRef.current = rect;
|
|
1970
2022
|
return value(pointerPosition - rect.left);
|
|
1971
2023
|
}
|
|
1972
|
-
return /* @__PURE__ */ (0,
|
|
2024
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1973
2025
|
SliderOrientationProvider,
|
|
1974
2026
|
{
|
|
1975
2027
|
scope: props.__scopeSlider,
|
|
@@ -1977,7 +2029,7 @@ var SliderHorizontal = React11.forwardRef(
|
|
|
1977
2029
|
endEdge: isSlidingFromLeft ? "right" : "left",
|
|
1978
2030
|
direction: isSlidingFromLeft ? 1 : -1,
|
|
1979
2031
|
size: "width",
|
|
1980
|
-
children: /* @__PURE__ */ (0,
|
|
2032
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1981
2033
|
SliderImpl,
|
|
1982
2034
|
{
|
|
1983
2035
|
dir: direction,
|
|
@@ -2035,7 +2087,7 @@ var SliderVertical = React11.forwardRef(
|
|
|
2035
2087
|
rectRef.current = rect;
|
|
2036
2088
|
return value(pointerPosition - rect.top);
|
|
2037
2089
|
}
|
|
2038
|
-
return /* @__PURE__ */ (0,
|
|
2090
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2039
2091
|
SliderOrientationProvider,
|
|
2040
2092
|
{
|
|
2041
2093
|
scope: props.__scopeSlider,
|
|
@@ -2043,7 +2095,7 @@ var SliderVertical = React11.forwardRef(
|
|
|
2043
2095
|
endEdge: isSlidingFromBottom ? "top" : "bottom",
|
|
2044
2096
|
size: "height",
|
|
2045
2097
|
direction: isSlidingFromBottom ? 1 : -1,
|
|
2046
|
-
children: /* @__PURE__ */ (0,
|
|
2098
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2047
2099
|
SliderImpl,
|
|
2048
2100
|
{
|
|
2049
2101
|
"data-orientation": "vertical",
|
|
@@ -2089,7 +2141,7 @@ var SliderImpl = React11.forwardRef(
|
|
|
2089
2141
|
...sliderProps
|
|
2090
2142
|
} = props;
|
|
2091
2143
|
const context = useSliderContext(SLIDER_NAME, __scopeSlider);
|
|
2092
|
-
return /* @__PURE__ */ (0,
|
|
2144
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2093
2145
|
Primitive.span,
|
|
2094
2146
|
{
|
|
2095
2147
|
...sliderProps,
|
|
@@ -2136,7 +2188,7 @@ var SliderTrack = React11.forwardRef(
|
|
|
2136
2188
|
(props, forwardedRef) => {
|
|
2137
2189
|
const { __scopeSlider, ...trackProps } = props;
|
|
2138
2190
|
const context = useSliderContext(TRACK_NAME, __scopeSlider);
|
|
2139
|
-
return /* @__PURE__ */ (0,
|
|
2191
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2140
2192
|
Primitive.span,
|
|
2141
2193
|
{
|
|
2142
2194
|
"data-disabled": context.disabled ? "" : void 0,
|
|
@@ -2162,7 +2214,7 @@ var SliderRange = React11.forwardRef(
|
|
|
2162
2214
|
);
|
|
2163
2215
|
const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0;
|
|
2164
2216
|
const offsetEnd = 100 - Math.max(...percentages);
|
|
2165
|
-
return /* @__PURE__ */ (0,
|
|
2217
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2166
2218
|
Primitive.span,
|
|
2167
2219
|
{
|
|
2168
2220
|
"data-orientation": context.orientation,
|
|
@@ -2189,7 +2241,7 @@ var SliderThumb = React11.forwardRef(
|
|
|
2189
2241
|
() => thumb ? getItems().findIndex((item) => item.ref.current === thumb) : -1,
|
|
2190
2242
|
[getItems, thumb]
|
|
2191
2243
|
);
|
|
2192
|
-
return /* @__PURE__ */ (0,
|
|
2244
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SliderThumbImpl, { ...props, ref: composedRefs, index });
|
|
2193
2245
|
}
|
|
2194
2246
|
);
|
|
2195
2247
|
var SliderThumbImpl = React11.forwardRef(
|
|
@@ -2214,7 +2266,7 @@ var SliderThumbImpl = React11.forwardRef(
|
|
|
2214
2266
|
};
|
|
2215
2267
|
}
|
|
2216
2268
|
}, [thumb, context.thumbs]);
|
|
2217
|
-
return /* @__PURE__ */ (0,
|
|
2269
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
2218
2270
|
"span",
|
|
2219
2271
|
{
|
|
2220
2272
|
style: {
|
|
@@ -2223,7 +2275,7 @@ var SliderThumbImpl = React11.forwardRef(
|
|
|
2223
2275
|
[orientation.startEdge]: `calc(${percent}% + ${thumbInBoundsOffset}px)`
|
|
2224
2276
|
},
|
|
2225
2277
|
children: [
|
|
2226
|
-
/* @__PURE__ */ (0,
|
|
2278
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Collection.ItemSlot, { scope: props.__scopeSlider, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2227
2279
|
Primitive.span,
|
|
2228
2280
|
{
|
|
2229
2281
|
role: "slider",
|
|
@@ -2243,7 +2295,7 @@ var SliderThumbImpl = React11.forwardRef(
|
|
|
2243
2295
|
})
|
|
2244
2296
|
}
|
|
2245
2297
|
) }),
|
|
2246
|
-
isFormControl && /* @__PURE__ */ (0,
|
|
2298
|
+
isFormControl && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2247
2299
|
SliderBubbleInput,
|
|
2248
2300
|
{
|
|
2249
2301
|
name: name ?? (context.name ? context.name + (context.values.length > 1 ? "[]" : "") : void 0),
|
|
@@ -2276,7 +2328,7 @@ var SliderBubbleInput = React11.forwardRef(
|
|
|
2276
2328
|
input.dispatchEvent(event);
|
|
2277
2329
|
}
|
|
2278
2330
|
}, [prevValue, value]);
|
|
2279
|
-
return /* @__PURE__ */ (0,
|
|
2331
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2280
2332
|
Primitive.input,
|
|
2281
2333
|
{
|
|
2282
2334
|
style: { display: "none" },
|
|
@@ -2358,14 +2410,14 @@ function cn2(...inputs) {
|
|
|
2358
2410
|
}
|
|
2359
2411
|
|
|
2360
2412
|
// src/ui/slider.tsx
|
|
2361
|
-
var
|
|
2413
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
2362
2414
|
function Slider2(props) {
|
|
2363
2415
|
const { className, defaultValue, value, min = 0, max = 100, ...rest } = props;
|
|
2364
2416
|
const _values = React12.useMemo(
|
|
2365
2417
|
() => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
|
|
2366
2418
|
[value, defaultValue, min, max]
|
|
2367
2419
|
);
|
|
2368
|
-
return /* @__PURE__ */ (0,
|
|
2420
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
2369
2421
|
Root5,
|
|
2370
2422
|
{
|
|
2371
2423
|
"data-slot": "slider",
|
|
@@ -2374,32 +2426,34 @@ function Slider2(props) {
|
|
|
2374
2426
|
min,
|
|
2375
2427
|
max,
|
|
2376
2428
|
className: cn2(
|
|
2377
|
-
"relative flex w-full touch-none items-center select-none data-
|
|
2429
|
+
"relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
|
|
2378
2430
|
className
|
|
2379
2431
|
),
|
|
2380
2432
|
...rest,
|
|
2381
2433
|
children: [
|
|
2382
|
-
/* @__PURE__ */ (0,
|
|
2434
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2383
2435
|
Track,
|
|
2384
2436
|
{
|
|
2385
2437
|
"data-slot": "slider-track",
|
|
2386
2438
|
className: cn2(
|
|
2387
|
-
"relative grow overflow-hidden rounded-full bg-
|
|
2439
|
+
"relative grow overflow-hidden rounded-full bg-(--primary)/15 data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
|
|
2388
2440
|
),
|
|
2389
|
-
children: /* @__PURE__ */ (0,
|
|
2441
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2390
2442
|
Range,
|
|
2391
2443
|
{
|
|
2392
2444
|
"data-slot": "slider-range",
|
|
2393
|
-
className: cn2(
|
|
2445
|
+
className: cn2(
|
|
2446
|
+
"absolute bg-(--primary) data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
|
|
2447
|
+
)
|
|
2394
2448
|
}
|
|
2395
2449
|
)
|
|
2396
2450
|
}
|
|
2397
2451
|
),
|
|
2398
|
-
Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ (0,
|
|
2452
|
+
Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2399
2453
|
Thumb2,
|
|
2400
2454
|
{
|
|
2401
2455
|
"data-slot": "slider-thumb",
|
|
2402
|
-
className: "ring-ring/50 block size-5 shrink-0 rounded-full border
|
|
2456
|
+
className: "ring-ring/50 block size-5 shrink-0 rounded-full border border-(--b-inverse) bg-(--primary) shadow-(--primary)/20 shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
|
|
2403
2457
|
},
|
|
2404
2458
|
index
|
|
2405
2459
|
))
|
|
@@ -2409,7 +2463,7 @@ function Slider2(props) {
|
|
|
2409
2463
|
}
|
|
2410
2464
|
|
|
2411
2465
|
// src/components/CreditCardTab/Points/PointsSelector.tsx
|
|
2412
|
-
var
|
|
2466
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
2413
2467
|
var PointsSelector = (props) => {
|
|
2414
2468
|
const { isDisabled, isSelected, onSelect, children } = props;
|
|
2415
2469
|
const { balance } = useSlapiBalance();
|
|
@@ -2428,44 +2482,47 @@ var PointsSelector = (props) => {
|
|
|
2428
2482
|
};
|
|
2429
2483
|
const pointsValue = String(Math.round(splitTokens));
|
|
2430
2484
|
const usdValue = formatUSD(usdAmount + getTransactionFee(usdAmount, appProps.transactionFeePercentage));
|
|
2431
|
-
return /* @__PURE__ */ (0,
|
|
2485
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
2432
2486
|
"button",
|
|
2433
2487
|
{
|
|
2434
2488
|
disabled: isDisabled,
|
|
2435
2489
|
onClick: onSelect,
|
|
2436
|
-
className: cn("
|
|
2437
|
-
"border-
|
|
2490
|
+
className: cn("cursor-pointer overflow-hidden rounded-md border-2 border-transparent", {
|
|
2491
|
+
"border-(--b-brand)": isSelected,
|
|
2438
2492
|
"cursor-not-allowed opacity-50": isDisabled
|
|
2439
2493
|
}),
|
|
2440
2494
|
children: [
|
|
2441
|
-
/* @__PURE__ */ (0,
|
|
2442
|
-
/* @__PURE__ */ (0,
|
|
2495
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex h-11 w-full bg-(--s-primary) hover:bg-(--s-primary-hover)", children: [
|
|
2496
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2443
2497
|
"div",
|
|
2444
2498
|
{
|
|
2445
|
-
className: cn(
|
|
2446
|
-
"
|
|
2447
|
-
|
|
2448
|
-
|
|
2499
|
+
className: cn(
|
|
2500
|
+
"flex h-full w-11 shrink-0 items-center justify-center border-r border-b border-(--b-inverse)",
|
|
2501
|
+
{
|
|
2502
|
+
"border-(--b-brand)": isSelected
|
|
2503
|
+
}
|
|
2504
|
+
),
|
|
2505
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex size-5 items-center justify-center rounded-full border-2 border-(--brand-primary)", children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "size-2 rounded-full bg-(--brand-primary)" }) })
|
|
2449
2506
|
}
|
|
2450
2507
|
),
|
|
2451
|
-
/* @__PURE__ */ (0,
|
|
2508
|
+
/* @__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
2509
|
] }),
|
|
2453
|
-
isSelected && /* @__PURE__ */ (0,
|
|
2454
|
-
/* @__PURE__ */ (0,
|
|
2455
|
-
/* @__PURE__ */ (0,
|
|
2510
|
+
isSelected && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "px-2 pt-5 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: [
|
|
2511
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col gap-1", children: [
|
|
2512
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2456
2513
|
Input,
|
|
2457
2514
|
{
|
|
2458
2515
|
readOnly: true,
|
|
2459
2516
|
name: "points amount",
|
|
2460
2517
|
value: pointsValue,
|
|
2461
|
-
className: "sm:text-md min-w-[50px] bg-
|
|
2518
|
+
className: "sm:text-md min-w-[50px] bg-(--s-default) px-1 text-center text-xs font-medium sm:min-w-[100px] sm:px-2",
|
|
2462
2519
|
style: { width: `${pointsValue.length}ch` },
|
|
2463
2520
|
onClick: (e) => e.stopPropagation()
|
|
2464
2521
|
}
|
|
2465
2522
|
),
|
|
2466
|
-
/* @__PURE__ */ (0,
|
|
2523
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-left text-xs leading-5 text-(--tertiary)", children: "Points" })
|
|
2467
2524
|
] }),
|
|
2468
|
-
/* @__PURE__ */ (0,
|
|
2525
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex w-full items-center pb-6", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2469
2526
|
Slider2,
|
|
2470
2527
|
{
|
|
2471
2528
|
value: [splitTokens],
|
|
@@ -2477,19 +2534,19 @@ var PointsSelector = (props) => {
|
|
|
2477
2534
|
step
|
|
2478
2535
|
}
|
|
2479
2536
|
) }),
|
|
2480
|
-
/* @__PURE__ */ (0,
|
|
2481
|
-
/* @__PURE__ */ (0,
|
|
2537
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col gap-1", children: [
|
|
2538
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2482
2539
|
Input,
|
|
2483
2540
|
{
|
|
2484
2541
|
readOnly: true,
|
|
2485
2542
|
name: "usd amount",
|
|
2486
2543
|
value: usdValue,
|
|
2487
|
-
className: "sm:text-md min-w-[50px] bg-
|
|
2544
|
+
className: "sm:text-md min-w-[50px] bg-(--s-default) px-1 text-center text-xs font-medium sm:min-w-[100px] sm:px-2",
|
|
2488
2545
|
style: { width: `${usdValue.length}ch` },
|
|
2489
2546
|
onClick: (e) => e.stopPropagation()
|
|
2490
2547
|
}
|
|
2491
2548
|
),
|
|
2492
|
-
/* @__PURE__ */ (0,
|
|
2549
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-left text-xs leading-5 text-(--tertiary)", children: "Card" })
|
|
2493
2550
|
] })
|
|
2494
2551
|
] }) })
|
|
2495
2552
|
]
|
|
@@ -2498,7 +2555,7 @@ var PointsSelector = (props) => {
|
|
|
2498
2555
|
};
|
|
2499
2556
|
|
|
2500
2557
|
// src/components/CreditCardTab/Points/SplitBlock.tsx
|
|
2501
|
-
var
|
|
2558
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
2502
2559
|
var SplitBlock = (props) => {
|
|
2503
2560
|
const { onToggle, isSelected, onSelect } = props;
|
|
2504
2561
|
const { balance, isBalanceLoading } = useSlapiBalance();
|
|
@@ -2542,21 +2599,21 @@ var SplitBlock = (props) => {
|
|
|
2542
2599
|
doInit();
|
|
2543
2600
|
}, [spreePayConfig?.pointsChain, initWallet, env.useWeb3Points]);
|
|
2544
2601
|
const isPointsSelectorDisabled = env.useWeb3Points ? !walletReady : false;
|
|
2545
|
-
return /* @__PURE__ */ (0,
|
|
2546
|
-
/* @__PURE__ */ (0,
|
|
2547
|
-
/* @__PURE__ */ (0,
|
|
2602
|
+
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: [
|
|
2603
|
+
/* @__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-(--brand-primary) sm:text-sm", children: [
|
|
2604
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-(--secondary)", children: "Available" }),
|
|
2548
2605
|
" ",
|
|
2549
2606
|
formatPoints(balance.availablePoints, pointsTitle),
|
|
2550
2607
|
" ",
|
|
2551
|
-
pointsConversionRatio && /* @__PURE__ */ (0,
|
|
2608
|
+
pointsConversionRatio && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-(--secondary)", children: formatUSD(balance.availablePoints * pointsConversionRatio) })
|
|
2552
2609
|
] }) : null }),
|
|
2553
|
-
isBalanceLoading ? /* @__PURE__ */ (0,
|
|
2554
|
-
address && /* @__PURE__ */ (0,
|
|
2610
|
+
isBalanceLoading ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-4 w-6 animate-pulse bg-(--s-secondary)" }) : !balance?.availablePoints && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-sm font-medium text-(--brand-primary)", children: "No points available" }),
|
|
2611
|
+
address && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "text-sm font-medium text-(--brand-primary)", children: address.length > 8 ? `${address.slice(0, 4)}...${address.slice(-4)}` : address })
|
|
2555
2612
|
] }) });
|
|
2556
2613
|
};
|
|
2557
2614
|
|
|
2558
2615
|
// src/components/CreditCardTab/Points/Points.tsx
|
|
2559
|
-
var
|
|
2616
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
2560
2617
|
var Points = () => {
|
|
2561
2618
|
const [usePoints, setUsePoints] = (0, import_react12.useState)(false);
|
|
2562
2619
|
const [selectedPointsType, setSelectedPointsType] = (0, import_react12.useState)(null);
|
|
@@ -2570,8 +2627,8 @@ var Points = () => {
|
|
|
2570
2627
|
setSelectedPaymentMethod({ ...selectedPaymentMethod, splitAmount: void 0 });
|
|
2571
2628
|
}
|
|
2572
2629
|
};
|
|
2573
|
-
return /* @__PURE__ */ (0,
|
|
2574
|
-
/* @__PURE__ */ (0,
|
|
2630
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
|
|
2631
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
2575
2632
|
PointsSwitch,
|
|
2576
2633
|
{
|
|
2577
2634
|
value: usePoints,
|
|
@@ -2580,7 +2637,7 @@ var Points = () => {
|
|
|
2580
2637
|
disabled: !spreePayConfig?.creditCard.enabled || !spreePayConfig?.creditCard.points || appProps.disabledPoints
|
|
2581
2638
|
}
|
|
2582
2639
|
),
|
|
2583
|
-
usePoints && /* @__PURE__ */ (0,
|
|
2640
|
+
usePoints && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
2584
2641
|
SplitBlock,
|
|
2585
2642
|
{
|
|
2586
2643
|
onToggle: handleTogglePoints,
|
|
@@ -2592,7 +2649,7 @@ var Points = () => {
|
|
|
2592
2649
|
};
|
|
2593
2650
|
|
|
2594
2651
|
// src/components/CreditCardTab/CreditCardTab.tsx
|
|
2595
|
-
var
|
|
2652
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
2596
2653
|
var CreditCardTab = () => {
|
|
2597
2654
|
const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
|
|
2598
2655
|
const { env } = useSpreePayEnv();
|
|
@@ -2647,16 +2704,16 @@ var CreditCardTab = () => {
|
|
|
2647
2704
|
(0, import_react13.useEffect)(() => {
|
|
2648
2705
|
register(handlePay);
|
|
2649
2706
|
}, [register, handlePay]);
|
|
2650
|
-
return /* @__PURE__ */ (0,
|
|
2651
|
-
/* @__PURE__ */ (0,
|
|
2652
|
-
/* @__PURE__ */ (0,
|
|
2707
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { children: [
|
|
2708
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "border-b border-b-(--border-component-specific-card) px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CreditCard, {}) }),
|
|
2709
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex flex-col gap-4 border-b border-b-(--border-component-specific-card) px-5 pt-5 pb-5 md:px-7 md:pt-6 md:pb-7", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Points, {}) })
|
|
2653
2710
|
] });
|
|
2654
2711
|
};
|
|
2655
2712
|
|
|
2656
2713
|
// src/components/CryptoTab/Crypto/CryptoWrapper.tsx
|
|
2657
2714
|
var import_react16 = require("react");
|
|
2658
2715
|
var import_react_query = require("@tanstack/react-query");
|
|
2659
|
-
var
|
|
2716
|
+
var import_nice_modal_react7 = __toESM(require("@ebay/nice-modal-react"), 1);
|
|
2660
2717
|
var import_rainbowkit2 = require("@rainbow-me/rainbowkit");
|
|
2661
2718
|
var import_styles = require("@rainbow-me/rainbowkit/styles.css");
|
|
2662
2719
|
var import_wagmi5 = require("wagmi");
|
|
@@ -2679,9 +2736,9 @@ function getAction(client, actionFn, name) {
|
|
|
2679
2736
|
|
|
2680
2737
|
// ../../node_modules/@wagmi/core/dist/esm/actions/readContract.js
|
|
2681
2738
|
var import_actions = require("viem/actions");
|
|
2682
|
-
function readContract(
|
|
2739
|
+
function readContract(config2, parameters) {
|
|
2683
2740
|
const { chainId, ...rest } = parameters;
|
|
2684
|
-
const client =
|
|
2741
|
+
const client = config2.getClient({ chainId });
|
|
2685
2742
|
const action = getAction(client, import_actions.readContract, "readContract");
|
|
2686
2743
|
return action(rest);
|
|
2687
2744
|
}
|
|
@@ -2689,9 +2746,9 @@ function readContract(config, parameters) {
|
|
|
2689
2746
|
// ../../node_modules/@wagmi/core/dist/esm/actions/waitForTransactionReceipt.js
|
|
2690
2747
|
var import_viem2 = require("viem");
|
|
2691
2748
|
var import_actions2 = require("viem/actions");
|
|
2692
|
-
async function waitForTransactionReceipt(
|
|
2749
|
+
async function waitForTransactionReceipt(config2, parameters) {
|
|
2693
2750
|
const { chainId, timeout = 0, ...rest } = parameters;
|
|
2694
|
-
const client =
|
|
2751
|
+
const client = config2.getClient({ chainId });
|
|
2695
2752
|
const action = getAction(client, import_actions2.waitForTransactionReceipt, "waitForTransactionReceipt");
|
|
2696
2753
|
const receipt = await action({ ...rest, timeout });
|
|
2697
2754
|
if (receipt.status === "reverted") {
|
|
@@ -2766,7 +2823,7 @@ var MAX_UINT256 = BigInt(2) ** BigInt(256) - BigInt(1);
|
|
|
2766
2823
|
var useCryptoPayment = () => {
|
|
2767
2824
|
const { data: walletClient } = (0, import_wagmi.useWalletClient)();
|
|
2768
2825
|
const { spreePayConfig } = useSpreePayConfig();
|
|
2769
|
-
const
|
|
2826
|
+
const config2 = (0, import_wagmi.useConfig)();
|
|
2770
2827
|
const { selectedPaymentMethod } = useSpreePaymentMethod();
|
|
2771
2828
|
const cryptoPayment = async (params) => {
|
|
2772
2829
|
if (!walletClient) {
|
|
@@ -2785,7 +2842,7 @@ var useCryptoPayment = () => {
|
|
|
2785
2842
|
if (!tokenAddress) {
|
|
2786
2843
|
throw new Error("Token address not found");
|
|
2787
2844
|
}
|
|
2788
|
-
const allowance = await readContract(
|
|
2845
|
+
const allowance = await readContract(config2, {
|
|
2789
2846
|
address: tokenAddress,
|
|
2790
2847
|
abi: import_viem4.erc20Abi,
|
|
2791
2848
|
functionName: "allowance",
|
|
@@ -2798,7 +2855,7 @@ var useCryptoPayment = () => {
|
|
|
2798
2855
|
functionName: "approve",
|
|
2799
2856
|
args: [spreePayConfig.crypto.oneInchAggregationRouter, MAX_UINT256]
|
|
2800
2857
|
});
|
|
2801
|
-
await waitForTransactionReceipt(
|
|
2858
|
+
await waitForTransactionReceipt(config2, {
|
|
2802
2859
|
hash: result,
|
|
2803
2860
|
confirmations: 1
|
|
2804
2861
|
// You can change the number of block confirmations as per your requirement
|
|
@@ -2838,38 +2895,38 @@ var useCryptoPayment = () => {
|
|
|
2838
2895
|
|
|
2839
2896
|
// src/components/CryptoTab/Crypto/ConnectButton.tsx
|
|
2840
2897
|
var import_rainbowkit = require("@rainbow-me/rainbowkit");
|
|
2841
|
-
var
|
|
2898
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
2842
2899
|
var ConnectButton = () => {
|
|
2843
|
-
return /* @__PURE__ */ (0,
|
|
2900
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_rainbowkit.ConnectButton.Custom, { children: ({ mounted, chain, account, openAccountModal, openChainModal, openConnectModal }) => {
|
|
2844
2901
|
if (!mounted) return null;
|
|
2845
|
-
return /* @__PURE__ */ (0,
|
|
2902
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_jsx_runtime27.Fragment, { children: (() => {
|
|
2846
2903
|
if (!mounted || !account || !chain) {
|
|
2847
|
-
return /* @__PURE__ */ (0,
|
|
2904
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2848
2905
|
"button",
|
|
2849
2906
|
{
|
|
2850
|
-
className: "h-[34px] rounded-md border
|
|
2907
|
+
className: "h-[34px] rounded-md border border-(--b-strong) px-3 text-sm font-medium text-(--brand-primary)",
|
|
2851
2908
|
onClick: openConnectModal,
|
|
2852
2909
|
children: "Connect a Wallet"
|
|
2853
2910
|
}
|
|
2854
2911
|
);
|
|
2855
2912
|
}
|
|
2856
2913
|
if (chain.unsupported) {
|
|
2857
|
-
return /* @__PURE__ */ (0,
|
|
2914
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2858
2915
|
"button",
|
|
2859
2916
|
{
|
|
2860
|
-
className: "h-[34px] rounded-md border
|
|
2917
|
+
className: "h-[34px] rounded-md border border-(--b-strong) px-3 text-sm font-medium text-(--brand-primary)",
|
|
2861
2918
|
onClick: openChainModal,
|
|
2862
2919
|
children: "Select a Network"
|
|
2863
2920
|
}
|
|
2864
2921
|
);
|
|
2865
2922
|
}
|
|
2866
|
-
return /* @__PURE__ */ (0,
|
|
2923
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
2867
2924
|
"button",
|
|
2868
2925
|
{
|
|
2869
|
-
className: "flex h-[34px] items-center gap-2 rounded-md border
|
|
2926
|
+
className: "flex h-[34px] items-center gap-2 rounded-md border border-(--b-strong) px-1.5 text-sm font-medium text-(--brand-primary)",
|
|
2870
2927
|
onClick: openAccountModal,
|
|
2871
2928
|
children: [
|
|
2872
|
-
chain.hasIcon && /* @__PURE__ */ (0,
|
|
2929
|
+
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
2930
|
account.displayName
|
|
2874
2931
|
]
|
|
2875
2932
|
}
|
|
@@ -2879,29 +2936,29 @@ var ConnectButton = () => {
|
|
|
2879
2936
|
};
|
|
2880
2937
|
|
|
2881
2938
|
// src/config/symbolLogos.tsx
|
|
2882
|
-
var
|
|
2883
|
-
var MOCA_SVG = /* @__PURE__ */ (0,
|
|
2884
|
-
/* @__PURE__ */ (0,
|
|
2885
|
-
/* @__PURE__ */ (0,
|
|
2939
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
2940
|
+
var MOCA_SVG = /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
|
|
2941
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("circle", { cx: "14", cy: "14", r: "13.5", fill: "#C15F97" }),
|
|
2942
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
2886
2943
|
"path",
|
|
2887
2944
|
{
|
|
2888
2945
|
fill: "#fff",
|
|
2889
2946
|
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
2947
|
}
|
|
2891
2948
|
),
|
|
2892
|
-
/* @__PURE__ */ (0,
|
|
2949
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("circle", { cx: "16", cy: "14", r: "1.5", fill: "#fff" })
|
|
2893
2950
|
] });
|
|
2894
|
-
var USDC_SVG = /* @__PURE__ */ (0,
|
|
2895
|
-
/* @__PURE__ */ (0,
|
|
2896
|
-
/* @__PURE__ */ (0,
|
|
2897
|
-
/* @__PURE__ */ (0,
|
|
2951
|
+
var USDC_SVG = /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
|
|
2952
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("g", { clipPath: "url(#clip0_528_9163)", children: [
|
|
2953
|
+
/* @__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" }),
|
|
2954
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
2898
2955
|
"path",
|
|
2899
2956
|
{
|
|
2900
2957
|
fill: "#fff",
|
|
2901
2958
|
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
2959
|
}
|
|
2903
2960
|
),
|
|
2904
|
-
/* @__PURE__ */ (0,
|
|
2961
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
2905
2962
|
"path",
|
|
2906
2963
|
{
|
|
2907
2964
|
fill: "#fff",
|
|
@@ -2909,11 +2966,11 @@ var USDC_SVG = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("svg", { xmlns: "h
|
|
|
2909
2966
|
}
|
|
2910
2967
|
)
|
|
2911
2968
|
] }),
|
|
2912
|
-
/* @__PURE__ */ (0,
|
|
2969
|
+
/* @__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
2970
|
] });
|
|
2914
|
-
var USDT_SVG = /* @__PURE__ */ (0,
|
|
2915
|
-
/* @__PURE__ */ (0,
|
|
2916
|
-
/* @__PURE__ */ (0,
|
|
2971
|
+
var USDT_SVG = /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
|
|
2972
|
+
/* @__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" }),
|
|
2973
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
2917
2974
|
"path",
|
|
2918
2975
|
{
|
|
2919
2976
|
fill: "#fff",
|
|
@@ -2921,23 +2978,23 @@ var USDT_SVG = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("svg", { xmlns: "h
|
|
|
2921
2978
|
}
|
|
2922
2979
|
)
|
|
2923
2980
|
] });
|
|
2924
|
-
var WETH_SVG = /* @__PURE__ */ (0,
|
|
2925
|
-
/* @__PURE__ */ (0,
|
|
2926
|
-
/* @__PURE__ */ (0,
|
|
2981
|
+
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: [
|
|
2982
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("g", { clipPath: "url(#clip0_528_9173)", children: [
|
|
2983
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
2927
2984
|
"path",
|
|
2928
2985
|
{
|
|
2929
2986
|
fill: "#000",
|
|
2930
2987
|
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
2988
|
}
|
|
2932
2989
|
),
|
|
2933
|
-
/* @__PURE__ */ (0,
|
|
2990
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
2934
2991
|
"path",
|
|
2935
2992
|
{
|
|
2936
2993
|
fill: "#F61F7D",
|
|
2937
2994
|
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
2995
|
}
|
|
2939
2996
|
),
|
|
2940
|
-
/* @__PURE__ */ (0,
|
|
2997
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
2941
2998
|
"path",
|
|
2942
2999
|
{
|
|
2943
3000
|
fill: "#000",
|
|
@@ -2946,8 +3003,8 @@ var WETH_SVG = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("svg", { xmlns: "h
|
|
|
2946
3003
|
clipRule: "evenodd"
|
|
2947
3004
|
}
|
|
2948
3005
|
),
|
|
2949
|
-
/* @__PURE__ */ (0,
|
|
2950
|
-
/* @__PURE__ */ (0,
|
|
3006
|
+
/* @__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" }),
|
|
3007
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
2951
3008
|
"path",
|
|
2952
3009
|
{
|
|
2953
3010
|
fill: "#000",
|
|
@@ -2956,8 +3013,8 @@ var WETH_SVG = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("svg", { xmlns: "h
|
|
|
2956
3013
|
clipRule: "evenodd"
|
|
2957
3014
|
}
|
|
2958
3015
|
),
|
|
2959
|
-
/* @__PURE__ */ (0,
|
|
2960
|
-
/* @__PURE__ */ (0,
|
|
3016
|
+
/* @__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" }),
|
|
3017
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
2961
3018
|
"path",
|
|
2962
3019
|
{
|
|
2963
3020
|
fill: "#000",
|
|
@@ -2965,7 +3022,7 @@ var WETH_SVG = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("svg", { xmlns: "h
|
|
|
2965
3022
|
}
|
|
2966
3023
|
)
|
|
2967
3024
|
] }),
|
|
2968
|
-
/* @__PURE__ */ (0,
|
|
3025
|
+
/* @__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
3026
|
] });
|
|
2970
3027
|
var symbolLogos = {
|
|
2971
3028
|
MOCA: MOCA_SVG,
|
|
@@ -2978,33 +3035,33 @@ function getSymbolLogo(symbol) {
|
|
|
2978
3035
|
}
|
|
2979
3036
|
|
|
2980
3037
|
// src/components/CryptoTab/Crypto/Logos.tsx
|
|
2981
|
-
var
|
|
3038
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
2982
3039
|
var Logos = () => {
|
|
2983
|
-
return /* @__PURE__ */ (0,
|
|
2984
|
-
/* @__PURE__ */ (0,
|
|
2985
|
-
/* @__PURE__ */ (0,
|
|
2986
|
-
/* @__PURE__ */ (0,
|
|
2987
|
-
/* @__PURE__ */ (0,
|
|
3040
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex", children: [
|
|
3041
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "rounded-full border border-(--b-primary)", children: getSymbolLogo("MOCA") }),
|
|
3042
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "-ml-2.5 rounded-full border border-(--b-primary)", children: getSymbolLogo("USDC") }),
|
|
3043
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "-ml-2.5 rounded-full border border-(--b-primary)", children: getSymbolLogo("USDT") }),
|
|
3044
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "-ml-2.5 rounded-full border border-(--b-primary) bg-(--s-primary)", children: getSymbolLogo("WETH") })
|
|
2988
3045
|
] });
|
|
2989
3046
|
};
|
|
2990
3047
|
|
|
2991
3048
|
// src/components/CryptoTab/Crypto/SelectCoinButton.tsx
|
|
2992
|
-
var
|
|
3049
|
+
var import_nice_modal_react6 = __toESM(require("@ebay/nice-modal-react"), 1);
|
|
2993
3050
|
|
|
2994
3051
|
// src/modals/CryptoSelectModal.tsx
|
|
2995
3052
|
var import_react14 = require("react");
|
|
2996
|
-
var
|
|
3053
|
+
var import_nice_modal_react5 = __toESM(require("@ebay/nice-modal-react"), 1);
|
|
2997
3054
|
|
|
2998
3055
|
// ../ui/src/components/input.tsx
|
|
2999
|
-
var
|
|
3056
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
3000
3057
|
function Input2({ className, type, ...props }) {
|
|
3001
|
-
return /* @__PURE__ */ (0,
|
|
3058
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
3002
3059
|
"input",
|
|
3003
3060
|
{
|
|
3004
3061
|
type,
|
|
3005
3062
|
"data-slot": "input",
|
|
3006
3063
|
className: cn2(
|
|
3007
|
-
"file:text-foreground
|
|
3064
|
+
"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
3065
|
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
|
3009
3066
|
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
|
3010
3067
|
className
|
|
@@ -3021,7 +3078,7 @@ var React14 = __toESM(require("react"), 1);
|
|
|
3021
3078
|
var React13 = __toESM(require("react"), 1);
|
|
3022
3079
|
var ReactDOM2 = __toESM(require("react-dom"), 1);
|
|
3023
3080
|
var import_react_slot5 = require("@radix-ui/react-slot");
|
|
3024
|
-
var
|
|
3081
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
3025
3082
|
var NODES2 = [
|
|
3026
3083
|
"a",
|
|
3027
3084
|
"button",
|
|
@@ -3049,14 +3106,14 @@ var Primitive2 = NODES2.reduce((primitive, node) => {
|
|
|
3049
3106
|
if (typeof window !== "undefined") {
|
|
3050
3107
|
window[/* @__PURE__ */ Symbol.for("radix-ui")] = true;
|
|
3051
3108
|
}
|
|
3052
|
-
return /* @__PURE__ */ (0,
|
|
3109
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Comp, { ...primitiveProps, ref: forwardedRef });
|
|
3053
3110
|
});
|
|
3054
3111
|
Node2.displayName = `Primitive.${node}`;
|
|
3055
3112
|
return { ...primitive, [node]: Node2 };
|
|
3056
3113
|
}, {});
|
|
3057
3114
|
|
|
3058
3115
|
// ../../node_modules/@radix-ui/react-separator/dist/index.mjs
|
|
3059
|
-
var
|
|
3116
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
3060
3117
|
var NAME = "Separator";
|
|
3061
3118
|
var DEFAULT_ORIENTATION = "horizontal";
|
|
3062
3119
|
var ORIENTATIONS = ["horizontal", "vertical"];
|
|
@@ -3065,7 +3122,7 @@ var Separator = React14.forwardRef((props, forwardedRef) => {
|
|
|
3065
3122
|
const orientation = isValidOrientation(orientationProp) ? orientationProp : DEFAULT_ORIENTATION;
|
|
3066
3123
|
const ariaOrientation = orientation === "vertical" ? orientation : void 0;
|
|
3067
3124
|
const semanticProps = decorative ? { role: "none" } : { "aria-orientation": ariaOrientation, role: "separator" };
|
|
3068
|
-
return /* @__PURE__ */ (0,
|
|
3125
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
3069
3126
|
Primitive2.div,
|
|
3070
3127
|
{
|
|
3071
3128
|
"data-orientation": orientation,
|
|
@@ -3082,21 +3139,21 @@ function isValidOrientation(orientation) {
|
|
|
3082
3139
|
var Root6 = Separator;
|
|
3083
3140
|
|
|
3084
3141
|
// ../ui/src/components/separator.tsx
|
|
3085
|
-
var
|
|
3142
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
3086
3143
|
function Separator2({
|
|
3087
3144
|
className,
|
|
3088
3145
|
orientation = "horizontal",
|
|
3089
3146
|
decorative = true,
|
|
3090
3147
|
...props
|
|
3091
3148
|
}) {
|
|
3092
|
-
return /* @__PURE__ */ (0,
|
|
3149
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
3093
3150
|
Root6,
|
|
3094
3151
|
{
|
|
3095
3152
|
"data-slot": "separator",
|
|
3096
3153
|
decorative,
|
|
3097
3154
|
orientation,
|
|
3098
3155
|
className: cn2(
|
|
3099
|
-
"
|
|
3156
|
+
"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
3157
|
className
|
|
3101
3158
|
),
|
|
3102
3159
|
...props
|
|
@@ -3196,9 +3253,9 @@ var useBaseTokens = () => {
|
|
|
3196
3253
|
};
|
|
3197
3254
|
|
|
3198
3255
|
// src/modals/CryptoSelectModal.tsx
|
|
3199
|
-
var
|
|
3200
|
-
var CryptoSelectModal =
|
|
3201
|
-
const modal = (0,
|
|
3256
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
3257
|
+
var CryptoSelectModal = import_nice_modal_react5.default.create(() => {
|
|
3258
|
+
const modal = (0, import_nice_modal_react5.useModal)();
|
|
3202
3259
|
const { isLoading, error, erc20Balances } = useBaseERC20Token();
|
|
3203
3260
|
const { isLoadingNative, nativeError, nativeBalance } = useBaseNativeToken();
|
|
3204
3261
|
const { tokens, tokensIsLoading } = useBaseTokens();
|
|
@@ -3214,96 +3271,91 @@ var CryptoSelectModal = import_nice_modal_react4.default.create(() => {
|
|
|
3214
3271
|
setSelectedPaymentMethod({ type: "CRYPTO" /* CRYPTO */, method: coin });
|
|
3215
3272
|
};
|
|
3216
3273
|
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)(
|
|
3274
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Dialog, { open: modal.visible, onOpenChange: modal.remove, children: [
|
|
3275
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DialogDescription, { className: "hidden", children: "Crypto Select Modal" }),
|
|
3276
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(DialogContent, { showCloseButton: false, className: "max-h-[90vh] gap-0 p-0", children: [
|
|
3277
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
|
|
3278
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
|
|
3279
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("button", { className: "rounded-md hover:bg-(--s-primary-hover)", 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: "currentColor", d: "m15 6.5-6 6 6 6" }) }) }),
|
|
3280
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DialogTitle, { className: "text-2xl font-medium text-(--brand-primary)", children: "Select a token" }),
|
|
3281
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("button", { className: "rounded-md p-1 hover:bg-(--s-primary-hover)", 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
3282
|
"path",
|
|
3227
3283
|
{
|
|
3228
|
-
fill: "
|
|
3284
|
+
fill: "currentColor",
|
|
3229
3285
|
d: "M12.6 3.9c.2.2.2.52 0 .71L8.7 8.5l3.9 3.89a.5.5 0 1 1-.71.7L8 9.22 4.11 13.1a.5.5 0 1 1-.7-.71L7.28 8.5 3.4 4.61a.5.5 0 1 1 .71-.7L8 7.78l3.89-3.89c.2-.2.51-.2.7 0Z"
|
|
3230
3286
|
}
|
|
3231
3287
|
) }) })
|
|
3232
3288
|
] }),
|
|
3233
|
-
/* @__PURE__ */ (0,
|
|
3289
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Input2, { onChange: (e) => setSearch(e.target.value), placeholder: "Search by token name", value: search })
|
|
3234
3290
|
] }),
|
|
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,
|
|
3291
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Separator2, { className: "hidden md:block" }),
|
|
3292
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
|
|
3293
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h3", { className: "text-md font-medium text-(--brand-primary)", children: "Tokens with wallet balance" }),
|
|
3294
|
+
(error || nativeError) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-center text-sm text-(--negative)", children: "Something wrong" }),
|
|
3295
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
|
|
3296
|
+
isLoadingNative && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
|
|
3297
|
+
nativeBalance && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
3242
3298
|
"button",
|
|
3243
3299
|
{
|
|
3244
|
-
className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-
|
|
3300
|
+
className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-(--brand-primary) hover:bg-(--s-primary-hover)",
|
|
3245
3301
|
onClick: () => handleSelect(nativeBalance),
|
|
3246
3302
|
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 })
|
|
3303
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
3304
|
+
nativeBalance.logoURI && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("img", { className: "size-8 shrink-0", src: nativeBalance.logoURI, alt: `${nativeBalance.symbol} logo` }),
|
|
3305
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.symbol })
|
|
3257
3306
|
] }),
|
|
3258
|
-
/* @__PURE__ */ (0,
|
|
3307
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.formatted })
|
|
3259
3308
|
]
|
|
3260
3309
|
},
|
|
3261
3310
|
nativeBalance.symbol
|
|
3262
3311
|
),
|
|
3263
|
-
isLoading && /* @__PURE__ */ (0,
|
|
3264
|
-
/* @__PURE__ */ (0,
|
|
3265
|
-
/* @__PURE__ */ (0,
|
|
3266
|
-
/* @__PURE__ */ (0,
|
|
3312
|
+
isLoading && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
|
|
3313
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
|
|
3314
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
|
|
3315
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" })
|
|
3267
3316
|
] }),
|
|
3268
3317
|
erc20Balances.map((coin) => {
|
|
3269
3318
|
const Icon = getSymbolLogo(coin.symbol);
|
|
3270
|
-
return /* @__PURE__ */ (0,
|
|
3319
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
3271
3320
|
"button",
|
|
3272
3321
|
{
|
|
3273
|
-
className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-
|
|
3322
|
+
className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-(--brand-primary) hover:bg-(--s-primary-hover) disabled:cursor-not-allowed disabled:opacity-50",
|
|
3274
3323
|
onClick: () => handleSelect(coin),
|
|
3275
3324
|
children: [
|
|
3276
|
-
/* @__PURE__ */ (0,
|
|
3325
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
3277
3326
|
Boolean(Icon) && Icon,
|
|
3278
|
-
/* @__PURE__ */ (0,
|
|
3327
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm font-medium", children: coin.symbol })
|
|
3279
3328
|
] }),
|
|
3280
|
-
/* @__PURE__ */ (0,
|
|
3329
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm font-medium", children: coin.formatted })
|
|
3281
3330
|
]
|
|
3282
3331
|
},
|
|
3283
3332
|
coin.symbol
|
|
3284
3333
|
);
|
|
3285
3334
|
})
|
|
3286
3335
|
] }),
|
|
3287
|
-
/* @__PURE__ */ (0,
|
|
3288
|
-
/* @__PURE__ */ (0,
|
|
3289
|
-
tokensIsLoading && /* @__PURE__ */ (0,
|
|
3290
|
-
/* @__PURE__ */ (0,
|
|
3291
|
-
/* @__PURE__ */ (0,
|
|
3292
|
-
/* @__PURE__ */ (0,
|
|
3336
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h3", { className: "text-md font-medium text-(--brand-primary)", children: "All Tokens" }),
|
|
3337
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex max-h-[40vh] w-full flex-col gap-1 overflow-y-auto", children: [
|
|
3338
|
+
tokensIsLoading && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
|
|
3339
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
|
|
3340
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
|
|
3341
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" })
|
|
3293
3342
|
] }),
|
|
3294
|
-
filteredCoins.map((token) =>
|
|
3295
|
-
|
|
3296
|
-
|
|
3297
|
-
|
|
3298
|
-
|
|
3299
|
-
|
|
3300
|
-
|
|
3301
|
-
|
|
3302
|
-
/* @__PURE__ */ (0,
|
|
3303
|
-
|
|
3304
|
-
|
|
3305
|
-
|
|
3306
|
-
|
|
3343
|
+
filteredCoins.map((token) => {
|
|
3344
|
+
const userCoin = userCoins.find((c) => c.symbol === token.symbol);
|
|
3345
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
3346
|
+
"button",
|
|
3347
|
+
{
|
|
3348
|
+
disabled: !userCoin,
|
|
3349
|
+
onClick: () => userCoin && handleSelect(userCoin),
|
|
3350
|
+
className: "flex min-h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-(--brand-primary) hover:bg-(--s-primary-hover) disabled:cursor-not-allowed disabled:opacity-50",
|
|
3351
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
3352
|
+
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-(--s-tertiary)" }),
|
|
3353
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm font-medium", children: token.symbol })
|
|
3354
|
+
] })
|
|
3355
|
+
},
|
|
3356
|
+
token.symbol
|
|
3357
|
+
);
|
|
3358
|
+
})
|
|
3307
3359
|
] })
|
|
3308
3360
|
] })
|
|
3309
3361
|
] })
|
|
@@ -3312,44 +3364,48 @@ var CryptoSelectModal = import_nice_modal_react4.default.create(() => {
|
|
|
3312
3364
|
CryptoSelectModal.displayName = "CryptoSelectModal";
|
|
3313
3365
|
|
|
3314
3366
|
// src/components/CryptoTab/Crypto/SelectCoinButton.tsx
|
|
3315
|
-
var
|
|
3367
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
3316
3368
|
var SelectCoinButton = () => {
|
|
3317
3369
|
const openModal = () => {
|
|
3318
|
-
|
|
3370
|
+
import_nice_modal_react6.default.show(CryptoSelectModal);
|
|
3319
3371
|
};
|
|
3320
|
-
return /* @__PURE__ */ (0,
|
|
3321
|
-
|
|
3322
|
-
|
|
3323
|
-
|
|
3324
|
-
|
|
3325
|
-
|
|
3326
|
-
|
|
3372
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
3373
|
+
"button",
|
|
3374
|
+
{
|
|
3375
|
+
onClick: openModal,
|
|
3376
|
+
className: "flex h-11 w-full overflow-hidden rounded-md bg-(--s-primary) hover:bg-(--s-primary-hover)",
|
|
3377
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex h-full w-full items-center justify-between px-3", children: [
|
|
3378
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "font-medium text-(--secondary)", children: "Select a token" }) }),
|
|
3379
|
+
/* @__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: "currentColor", strokeLinecap: "round", d: "m6 12.43 4-4-4-4" }) })
|
|
3380
|
+
] })
|
|
3381
|
+
}
|
|
3382
|
+
);
|
|
3327
3383
|
};
|
|
3328
3384
|
|
|
3329
3385
|
// src/components/CryptoTab/Crypto/SelectedCoin.tsx
|
|
3330
|
-
var
|
|
3386
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
3331
3387
|
var SelectedCoin = (props) => {
|
|
3332
3388
|
const { coin, balance, logoURI } = props;
|
|
3333
3389
|
const Icon = getSymbolLogo(coin);
|
|
3334
|
-
return /* @__PURE__ */ (0,
|
|
3335
|
-
/* @__PURE__ */ (0,
|
|
3336
|
-
/* @__PURE__ */ (0,
|
|
3337
|
-
/* @__PURE__ */ (0,
|
|
3390
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex h-12 w-full overflow-hidden rounded-md border-2 border-(--b-brand) bg-(--s-primary)", children: [
|
|
3391
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex h-full w-11 shrink-0 items-center justify-center border-r border-(--b-brand) bg-(--s-primary)", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex size-5 items-center justify-center rounded-full border-2 border-(--brand-primary)", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "size-2 rounded-full bg-(--brand-primary)" }) }) }),
|
|
3392
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex h-full w-full items-center justify-between rounded-r-md px-3", children: [
|
|
3393
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-1", children: [
|
|
3338
3394
|
Icon,
|
|
3339
|
-
!Icon && logoURI && /* @__PURE__ */ (0,
|
|
3340
|
-
/* @__PURE__ */ (0,
|
|
3341
|
-
/* @__PURE__ */ (0,
|
|
3395
|
+
!Icon && logoURI && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("img", { className: "mr-1 size-8 shrink-0", src: logoURI, alt: `${coin} logo` }),
|
|
3396
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "font-semibold text-(--brand-primary)", children: coin }),
|
|
3397
|
+
/* @__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: "currentColor", strokeLinecap: "round" }) })
|
|
3342
3398
|
] }),
|
|
3343
|
-
/* @__PURE__ */ (0,
|
|
3399
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("p", { className: "text-xs font-medium text-(--secondary)", children: [
|
|
3344
3400
|
"Wallet balance ",
|
|
3345
|
-
/* @__PURE__ */ (0,
|
|
3401
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-(--brand-primary)", children: balance })
|
|
3346
3402
|
] })
|
|
3347
3403
|
] })
|
|
3348
3404
|
] });
|
|
3349
3405
|
};
|
|
3350
3406
|
|
|
3351
3407
|
// src/components/CryptoTab/Crypto/Crypto.tsx
|
|
3352
|
-
var
|
|
3408
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
3353
3409
|
var Crypto = () => {
|
|
3354
3410
|
const { address } = (0, import_wagmi4.useAccount)();
|
|
3355
3411
|
const { selectedPaymentMethod } = useSpreePaymentMethod();
|
|
@@ -3373,14 +3429,14 @@ var Crypto = () => {
|
|
|
3373
3429
|
(0, import_react15.useEffect)(() => {
|
|
3374
3430
|
register(handlePay);
|
|
3375
3431
|
}, [register, handlePay]);
|
|
3376
|
-
return /* @__PURE__ */ (0,
|
|
3377
|
-
/* @__PURE__ */ (0,
|
|
3378
|
-
/* @__PURE__ */ (0,
|
|
3379
|
-
/* @__PURE__ */ (0,
|
|
3432
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col items-baseline gap-4", children: [
|
|
3433
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex w-full items-center justify-between gap-4", children: [
|
|
3434
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h3", { className: "text-xl leading-[1.7] font-semibold text-(--brand-primary)", children: "Pay with Crypto" }),
|
|
3435
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ConnectButton, {})
|
|
3380
3436
|
] }),
|
|
3381
|
-
!isWalletConnected && /* @__PURE__ */ (0,
|
|
3382
|
-
isWalletConnected && /* @__PURE__ */ (0,
|
|
3383
|
-
selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */ (0,
|
|
3437
|
+
!isWalletConnected && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Logos, {}),
|
|
3438
|
+
isWalletConnected && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex w-full flex-col gap-4", children: [
|
|
3439
|
+
selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3384
3440
|
SelectedCoin,
|
|
3385
3441
|
{
|
|
3386
3442
|
coin: selectedPaymentMethod.method.symbol,
|
|
@@ -3388,13 +3444,13 @@ var Crypto = () => {
|
|
|
3388
3444
|
logoURI: selectedPaymentMethod.method.logoURI
|
|
3389
3445
|
}
|
|
3390
3446
|
),
|
|
3391
|
-
/* @__PURE__ */ (0,
|
|
3447
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SelectCoinButton, {})
|
|
3392
3448
|
] })
|
|
3393
3449
|
] });
|
|
3394
3450
|
};
|
|
3395
3451
|
|
|
3396
3452
|
// src/components/CryptoTab/Crypto/CryptoWrapper.tsx
|
|
3397
|
-
var
|
|
3453
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
3398
3454
|
var queryClient = new import_react_query.QueryClient();
|
|
3399
3455
|
var CHAINS = [import_chains.base];
|
|
3400
3456
|
var wagmiConfigCache = /* @__PURE__ */ new Map();
|
|
@@ -3414,32 +3470,33 @@ var CryptoWrapper = () => {
|
|
|
3414
3470
|
return getCachedWagmiConfig(spreePayConfig.rainbowProjectId, spreePayConfig.rainbowAppName);
|
|
3415
3471
|
}, [spreePayConfig]);
|
|
3416
3472
|
if (configIsLoading || !wagmiConfig) return null;
|
|
3417
|
-
return /* @__PURE__ */ (0,
|
|
3473
|
+
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
3474
|
};
|
|
3419
3475
|
|
|
3420
3476
|
// src/components/CryptoTab/CryptoTab.tsx
|
|
3421
|
-
var
|
|
3477
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
3422
3478
|
var CryptoTab = () => {
|
|
3423
3479
|
const { spreePayConfig } = useSpreePayConfig();
|
|
3424
|
-
return /* @__PURE__ */ (0,
|
|
3425
|
-
/* @__PURE__ */ (0,
|
|
3426
|
-
/* @__PURE__ */ (0,
|
|
3480
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { children: [
|
|
3481
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "border-b border-b-(--border-component-specific-card) px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CryptoWrapper, {}) }),
|
|
3482
|
+
/* @__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
3483
|
] });
|
|
3428
3484
|
};
|
|
3429
3485
|
|
|
3430
3486
|
// src/components/TabButtons.tsx
|
|
3431
|
-
var
|
|
3487
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
3432
3488
|
var TabButton = ({ isDisabled = false, isActive, children, onClick }) => {
|
|
3433
|
-
return /* @__PURE__ */ (0,
|
|
3489
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
3434
3490
|
"button",
|
|
3435
3491
|
{
|
|
3436
3492
|
disabled: isDisabled,
|
|
3437
3493
|
onClick,
|
|
3438
3494
|
className: cn(
|
|
3439
|
-
"flex w-[
|
|
3440
|
-
{ "opacity-50": !isActive || isDisabled },
|
|
3495
|
+
"flex w-[180px] flex-col items-baseline gap-0.5 rounded-md border border-(--b-tertiary) px-3 py-1.5 text-(--tertiary) shadow-[0_6.25px_25px_0_rgba(0,0,0,0.05)] hover:bg-(--s-primary)",
|
|
3441
3496
|
{ "cursor-not-allowed": isDisabled },
|
|
3442
|
-
{
|
|
3497
|
+
{
|
|
3498
|
+
"border-2 border-(--b-brand) bg-(--s-primary) text-(--brand-primary)": isActive
|
|
3499
|
+
}
|
|
3443
3500
|
),
|
|
3444
3501
|
children
|
|
3445
3502
|
}
|
|
@@ -3453,65 +3510,56 @@ var TabButtons = (props) => {
|
|
|
3453
3510
|
onChange({ type, method: null });
|
|
3454
3511
|
}
|
|
3455
3512
|
};
|
|
3456
|
-
return /* @__PURE__ */ (0,
|
|
3457
|
-
configIsLoading && /* @__PURE__ */ (0,
|
|
3458
|
-
|
|
3459
|
-
/* @__PURE__ */ (0,
|
|
3460
|
-
|
|
3461
|
-
|
|
3462
|
-
|
|
3463
|
-
|
|
3464
|
-
|
|
3465
|
-
|
|
3466
|
-
|
|
3467
|
-
}
|
|
3468
|
-
|
|
3469
|
-
/* @__PURE__ */ (0,
|
|
3513
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex gap-4", children: [
|
|
3514
|
+
configIsLoading && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "h-[74px] w-[180px] animate-pulse rounded-md bg-(--s-primary)" }),
|
|
3515
|
+
spreePayConfig?.creditCard.enabled && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(TabButton, { onClick: handleChange("CREDIT_CARD" /* CREDIT_CARD */), isActive: value === "CREDIT_CARD" /* CREDIT_CARD */, children: [
|
|
3516
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", fill: "none", viewBox: "0 0 32 32", children: [
|
|
3517
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("mask", { id: "a", width: "32", height: "32", x: "0", y: "0", maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { fill: "#d9d9d9", d: "M0 0h32v32H0z" }) }),
|
|
3518
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("g", { mask: "url(#a)", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
3519
|
+
"path",
|
|
3520
|
+
{
|
|
3521
|
+
fill: "currentColor",
|
|
3522
|
+
d: "M28 8.82v14.36q0 .92-.62 1.54-.6.6-1.53.61H6.15q-.91 0-1.53-.61A2 2 0 0 1 4 23.18V8.82q0-.92.62-1.54.6-.6 1.53-.61h19.7q.91 0 1.53.61.62.62.62 1.54M5.33 11.74h21.34V8.82q0-.31-.26-.56a.8.8 0 0 0-.56-.26H6.15q-.3 0-.56.26a.8.8 0 0 0-.26.56zm0 3.18v8.26q0 .31.26.56t.56.26h19.7q.3 0 .56-.26a.8.8 0 0 0 .26-.56v-8.26z"
|
|
3523
|
+
}
|
|
3524
|
+
) })
|
|
3525
|
+
] }),
|
|
3526
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-md font-medium", children: "Card" })
|
|
3470
3527
|
] }),
|
|
3471
|
-
spreePayConfig?.crypto.enabled && /* @__PURE__ */ (0,
|
|
3472
|
-
/* @__PURE__ */ (0,
|
|
3473
|
-
/* @__PURE__ */ (0,
|
|
3528
|
+
spreePayConfig?.crypto.enabled && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(TabButton, { onClick: handleChange("CRYPTO" /* CRYPTO */), isActive: value === "CRYPTO" /* CRYPTO */, children: [
|
|
3529
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("svg", { className: "my-1", xmlns: "http://www.w3.org/2000/svg", width: "30", height: "16", fill: "none", children: [
|
|
3530
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
3474
3531
|
"path",
|
|
3475
3532
|
{
|
|
3476
3533
|
fill: "currentColor",
|
|
3477
3534
|
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
3535
|
}
|
|
3479
3536
|
),
|
|
3480
|
-
/* @__PURE__ */ (0,
|
|
3537
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
3481
3538
|
"path",
|
|
3482
3539
|
{
|
|
3483
3540
|
fill: "currentColor",
|
|
3484
3541
|
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
3542
|
}
|
|
3486
3543
|
),
|
|
3487
|
-
/* @__PURE__ */ (0,
|
|
3544
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "2" })
|
|
3488
3545
|
] }),
|
|
3489
|
-
/* @__PURE__ */ (0,
|
|
3546
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-md font-medium", children: "Crypto" })
|
|
3490
3547
|
] })
|
|
3491
3548
|
] });
|
|
3492
3549
|
};
|
|
3493
3550
|
|
|
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
3551
|
// src/SpreePayContent.tsx
|
|
3509
|
-
var
|
|
3552
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
3510
3553
|
var SpreePayContent = ({ isLoggedIn }) => {
|
|
3511
|
-
|
|
3512
|
-
|
|
3513
|
-
/* @__PURE__ */ (0,
|
|
3514
|
-
|
|
3554
|
+
const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
|
|
3555
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "w-full overflow-hidden rounded-3xl border border-(--border-component-specific-card) bg-(--surface-component-specific-card-default-card) shadow-[0_6.25px_25px_0_var(--shadow-component-specific-card)]", children: [
|
|
3556
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex w-full flex-col gap-4 border-b border-b-(--border-component-specific-card) px-5 py-5 md:px-7 md:py-6", children: [
|
|
3557
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h2", { className: "text-[28px] leading-8 font-medium text-(--brand-primary)", children: "Choose a Payment Method" }),
|
|
3558
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
|
|
3559
|
+
] }),
|
|
3560
|
+
selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CreditCardTab, {}),
|
|
3561
|
+
selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CryptoTab, {}),
|
|
3562
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CheckoutButton, { isLoggedIn })
|
|
3515
3563
|
] });
|
|
3516
3564
|
};
|
|
3517
3565
|
|
|
@@ -3519,8 +3567,8 @@ var SpreePayContent = ({ isLoggedIn }) => {
|
|
|
3519
3567
|
var import_react17 = require("react");
|
|
3520
3568
|
var import_keycloak_js = __toESM(require("keycloak-js"), 1);
|
|
3521
3569
|
var refreshAheadSeconds = 60;
|
|
3522
|
-
function useKeycloakSSO(
|
|
3523
|
-
const { url, realm, clientId, ssoPageURI, enabled } =
|
|
3570
|
+
function useKeycloakSSO(config2) {
|
|
3571
|
+
const { url, realm, clientId, ssoPageURI, enabled } = config2;
|
|
3524
3572
|
const initRef = (0, import_react17.useRef)(false);
|
|
3525
3573
|
const kcRef = (0, import_react17.useRef)(null);
|
|
3526
3574
|
const refreshTimerRef = (0, import_react17.useRef)(null);
|
|
@@ -3587,7 +3635,7 @@ function useKeycloakSSO(config) {
|
|
|
3587
3635
|
}
|
|
3588
3636
|
|
|
3589
3637
|
// src/SpreePay.tsx
|
|
3590
|
-
var
|
|
3638
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
3591
3639
|
var SpreePayInner = () => {
|
|
3592
3640
|
const [portalEl, setPortalEl] = (0, import_react18.useState)(null);
|
|
3593
3641
|
const rootRef = (0, import_react18.useCallback)((node) => {
|
|
@@ -3609,6 +3657,7 @@ var SpreePayInner = () => {
|
|
|
3609
3657
|
enabled: !env?.accessToken
|
|
3610
3658
|
});
|
|
3611
3659
|
const _accessToken = env.accessToken ?? accessToken;
|
|
3660
|
+
const unauthenticatedFetcher = (0, import_react18.useCallback)(() => Promise.resolve(null), []);
|
|
3612
3661
|
const slapiFetcher = (0, import_react18.useMemo)(() => {
|
|
3613
3662
|
if (_accessToken) {
|
|
3614
3663
|
return registerApi({
|
|
@@ -3617,16 +3666,16 @@ var SpreePayInner = () => {
|
|
|
3617
3666
|
baseUrl: staticConfig.slapiUrl
|
|
3618
3667
|
});
|
|
3619
3668
|
}
|
|
3620
|
-
|
|
3669
|
+
return unauthenticatedFetcher;
|
|
3670
|
+
}, [_accessToken, staticConfig, tenantId, unauthenticatedFetcher]);
|
|
3621
3671
|
const getContent = () => {
|
|
3622
3672
|
if (isChecking) {
|
|
3623
|
-
return /* @__PURE__ */ (0,
|
|
3624
|
-
/* @__PURE__ */ (0,
|
|
3625
|
-
/* @__PURE__ */ (0,
|
|
3626
|
-
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(SpreeLegal, {})
|
|
3673
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex w-full flex-col", children: [
|
|
3674
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "mb-4 h-[315px] animate-pulse rounded-3xl bg-(--s-primary)" }),
|
|
3675
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "h-[135px] animate-pulse rounded-3xl bg-(--s-primary)" })
|
|
3627
3676
|
] });
|
|
3628
3677
|
}
|
|
3629
|
-
return /* @__PURE__ */ (0,
|
|
3678
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
3630
3679
|
import_swr5.SWRConfig,
|
|
3631
3680
|
{
|
|
3632
3681
|
value: {
|
|
@@ -3635,17 +3684,17 @@ var SpreePayInner = () => {
|
|
|
3635
3684
|
revalidateOnFocus: false,
|
|
3636
3685
|
revalidateIfStale: false
|
|
3637
3686
|
},
|
|
3638
|
-
children: /* @__PURE__ */ (0,
|
|
3687
|
+
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
3688
|
}
|
|
3640
3689
|
);
|
|
3641
3690
|
};
|
|
3642
|
-
return /* @__PURE__ */ (0,
|
|
3643
|
-
/* @__PURE__ */ (0,
|
|
3691
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { ref: rootRef, className: cn("sl-spreepay", appProps.className), children: [
|
|
3692
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "sl-spreepay__portal" }),
|
|
3644
3693
|
getContent()
|
|
3645
3694
|
] });
|
|
3646
3695
|
};
|
|
3647
3696
|
var SpreePay = (props) => {
|
|
3648
|
-
return /* @__PURE__ */ (0,
|
|
3697
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(StaticConfigProvider, { props, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SpreePayInner, {}) });
|
|
3649
3698
|
};
|
|
3650
3699
|
|
|
3651
3700
|
// src/hooks/useCapture3DS.ts
|