@superlogic/spree-pay 0.1.7 → 0.1.8
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 +362 -296
- package/build/index.css +75 -21
- package/build/index.d.cts +2 -0
- package/build/index.d.ts +2 -0
- package/build/index.js +362 -296
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -27,21 +27,26 @@ var SpreePayProvider = ({ children, env }) => {
|
|
|
27
27
|
type: "CREDIT_CARD" /* CREDIT_CARD */,
|
|
28
28
|
method: null
|
|
29
29
|
});
|
|
30
|
+
const [isInternalProcessing, setInternalProcessing] = useState(false);
|
|
30
31
|
const register = useCallback((fn) => {
|
|
31
32
|
processRef.current = fn;
|
|
32
33
|
}, []);
|
|
33
|
-
const process = useCallback((data) => {
|
|
34
|
+
const process = useCallback(async (data) => {
|
|
34
35
|
if (!processRef.current) throw new Error("SpreePay process function not registered");
|
|
36
|
+
setInternalProcessing(true);
|
|
35
37
|
try {
|
|
36
|
-
return processRef.current(data);
|
|
38
|
+
return await processRef.current(data);
|
|
37
39
|
} catch (e) {
|
|
38
|
-
if (e instanceof Error)
|
|
39
|
-
|
|
40
|
+
if (e instanceof Error) throw e;
|
|
41
|
+
throw new PaymentError("Payment failed", "FAILED" /* FAILED */, e);
|
|
42
|
+
} finally {
|
|
43
|
+
setInternalProcessing(false);
|
|
40
44
|
}
|
|
41
45
|
}, []);
|
|
42
46
|
const value = {
|
|
43
47
|
env,
|
|
44
48
|
enabled: Boolean(selectedPaymentMethod.method),
|
|
49
|
+
isInternalProcessing,
|
|
45
50
|
process,
|
|
46
51
|
register,
|
|
47
52
|
selectedPaymentMethod,
|
|
@@ -52,12 +57,21 @@ var SpreePayProvider = ({ children, env }) => {
|
|
|
52
57
|
var useSpreePay = () => {
|
|
53
58
|
const ctx = useContext(SpreePayActionsContext);
|
|
54
59
|
if (!ctx) throw new Error("useSpreePay must be used within a SpreePayProvider");
|
|
55
|
-
return {
|
|
60
|
+
return {
|
|
61
|
+
process: ctx.process,
|
|
62
|
+
isProcessing: ctx.isInternalProcessing,
|
|
63
|
+
enabled: ctx.enabled,
|
|
64
|
+
selectedPaymentMethod: ctx.selectedPaymentMethod
|
|
65
|
+
};
|
|
56
66
|
};
|
|
57
67
|
var useSpreePaymentMethod = () => {
|
|
58
68
|
const ctx = useContext(SpreePayActionsContext);
|
|
59
69
|
if (!ctx) throw new Error("useSpreePay must be used within a SpreePayProvider");
|
|
60
|
-
return {
|
|
70
|
+
return {
|
|
71
|
+
setSelectedPaymentMethod: ctx.setSelectedPaymentMethod,
|
|
72
|
+
selectedPaymentMethod: ctx.selectedPaymentMethod,
|
|
73
|
+
isInternalProcessing: ctx.isInternalProcessing
|
|
74
|
+
};
|
|
61
75
|
};
|
|
62
76
|
var useSpreePayEnv = () => {
|
|
63
77
|
const ctx = useContext(SpreePayActionsContext);
|
|
@@ -77,6 +91,53 @@ function cn(...inputs) {
|
|
|
77
91
|
return twMerge(clsx(inputs));
|
|
78
92
|
}
|
|
79
93
|
|
|
94
|
+
// src/ui/spinner.tsx
|
|
95
|
+
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
96
|
+
var Spinner = (props) => {
|
|
97
|
+
const { size = "md", className } = props;
|
|
98
|
+
const sizeClasses = {
|
|
99
|
+
xs: "size-4",
|
|
100
|
+
sm: "size-6",
|
|
101
|
+
md: "size-8",
|
|
102
|
+
lg: "size-12",
|
|
103
|
+
xl: "size-16"
|
|
104
|
+
};
|
|
105
|
+
return /* @__PURE__ */ jsxs(
|
|
106
|
+
"svg",
|
|
107
|
+
{
|
|
108
|
+
className: cn(`${sizeClasses[size]} animate-spin text-gray-300`, className),
|
|
109
|
+
viewBox: "0 0 64 64",
|
|
110
|
+
fill: "none",
|
|
111
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
112
|
+
width: "24",
|
|
113
|
+
height: "24",
|
|
114
|
+
children: [
|
|
115
|
+
/* @__PURE__ */ jsx2(
|
|
116
|
+
"path",
|
|
117
|
+
{
|
|
118
|
+
d: "M32 3C35.8083 3 39.5794 3.75011 43.0978 5.20749C46.6163 6.66488 49.8132 8.80101 52.5061 11.4939C55.199 14.1868 57.3351 17.3837 58.7925 20.9022C60.2499 24.4206 61 28.1917 61 32C61 35.8083 60.2499 39.5794 58.7925 43.0978C57.3351 46.6163 55.199 49.8132 52.5061 52.5061C49.8132 55.199 46.6163 57.3351 43.0978 58.7925C39.5794 60.2499 35.8083 61 32 61C28.1917 61 24.4206 60.2499 20.9022 58.7925C17.3837 57.3351 14.1868 55.199 11.4939 52.5061C8.801 49.8132 6.66487 46.6163 5.20749 43.0978C3.7501 39.5794 3 35.8083 3 32C3 28.1917 3.75011 24.4206 5.2075 20.9022C6.66489 17.3837 8.80101 14.1868 11.4939 11.4939C14.1868 8.80099 17.3838 6.66487 20.9022 5.20749C24.4206 3.7501 28.1917 3 32 3L32 3Z",
|
|
119
|
+
stroke: "currentColor",
|
|
120
|
+
strokeWidth: "5",
|
|
121
|
+
strokeLinecap: "round",
|
|
122
|
+
strokeLinejoin: "round"
|
|
123
|
+
}
|
|
124
|
+
),
|
|
125
|
+
/* @__PURE__ */ jsx2(
|
|
126
|
+
"path",
|
|
127
|
+
{
|
|
128
|
+
d: "M32 3C36.5778 3 41.0906 4.08374 45.1692 6.16256C49.2477 8.24138 52.7762 11.2562 55.466 14.9605C58.1558 18.6647 59.9304 22.9531 60.6448 27.4748C61.3591 31.9965 60.9928 36.6232 59.5759 40.9762",
|
|
129
|
+
stroke: "currentColor",
|
|
130
|
+
strokeWidth: "5",
|
|
131
|
+
strokeLinecap: "round",
|
|
132
|
+
strokeLinejoin: "round",
|
|
133
|
+
className: "text-gray-900"
|
|
134
|
+
}
|
|
135
|
+
)
|
|
136
|
+
]
|
|
137
|
+
}
|
|
138
|
+
);
|
|
139
|
+
};
|
|
140
|
+
|
|
80
141
|
// src/utils/format.ts
|
|
81
142
|
var formatUSD = (amount, currency = "USD") => {
|
|
82
143
|
const formattedAmount = new Intl.NumberFormat("en-US", {
|
|
@@ -87,7 +148,7 @@ var formatUSD = (amount, currency = "USD") => {
|
|
|
87
148
|
}).format(amount);
|
|
88
149
|
return formattedAmount;
|
|
89
150
|
};
|
|
90
|
-
var pointsConverionRate =
|
|
151
|
+
var pointsConverionRate = 100;
|
|
91
152
|
var formatPoints = (amount) => {
|
|
92
153
|
const formattedAmount = new Intl.NumberFormat("en-US", {
|
|
93
154
|
style: "decimal",
|
|
@@ -106,46 +167,44 @@ var formatCoin = (amount, currency = "USDC") => {
|
|
|
106
167
|
};
|
|
107
168
|
|
|
108
169
|
// src/components/CheckoutButton.tsx
|
|
109
|
-
import { jsx as
|
|
110
|
-
var CheckoutButton = ({ amount, onCheckout }) => {
|
|
111
|
-
const { selectedPaymentMethod } = useSpreePaymentMethod();
|
|
112
|
-
const isDisabled = !amount || !selectedPaymentMethod.method;
|
|
170
|
+
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
171
|
+
var CheckoutButton = ({ isProcessing, amount, onCheckout }) => {
|
|
172
|
+
const { selectedPaymentMethod, isInternalProcessing } = useSpreePaymentMethod();
|
|
173
|
+
const isDisabled = !amount || !selectedPaymentMethod.method || !!isProcessing || isInternalProcessing;
|
|
113
174
|
const isUSD = selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */;
|
|
114
|
-
return /* @__PURE__ */
|
|
115
|
-
/* @__PURE__ */
|
|
175
|
+
return /* @__PURE__ */ jsxs2("div", { className: "flex w-full flex-col overflow-hidden rounded-[24px] border border-black/25 bg-white text-xs font-medium", children: [
|
|
176
|
+
/* @__PURE__ */ jsx3("div", { className: "px-7 py-5", children: /* @__PURE__ */ jsxs2("p", { className: "text-[#798B95]", children: [
|
|
116
177
|
"By clicking on the button below I acknowledge that I have read and accepted the",
|
|
117
178
|
" ",
|
|
118
|
-
/* @__PURE__ */
|
|
179
|
+
/* @__PURE__ */ jsx3("a", { className: "underline", href: "/", children: "Property Policies" }),
|
|
119
180
|
",",
|
|
120
181
|
" ",
|
|
121
|
-
/* @__PURE__ */
|
|
182
|
+
/* @__PURE__ */ jsx3("a", { className: "underline", href: "/", children: "Check-in Instructions" }),
|
|
122
183
|
",",
|
|
123
184
|
" ",
|
|
124
|
-
/* @__PURE__ */
|
|
185
|
+
/* @__PURE__ */ jsx3("a", { className: "underline", href: "/", children: "Property Fees" }),
|
|
125
186
|
", and",
|
|
126
187
|
" ",
|
|
127
|
-
/* @__PURE__ */
|
|
188
|
+
/* @__PURE__ */ jsx3("a", { className: "underline", href: "/", children: "Supplier Terms and Conditions" }),
|
|
128
189
|
"."
|
|
129
190
|
] }) }),
|
|
130
|
-
onCheckout && /* @__PURE__ */
|
|
191
|
+
onCheckout && /* @__PURE__ */ jsx3(
|
|
131
192
|
"button",
|
|
132
193
|
{
|
|
133
194
|
disabled: isDisabled,
|
|
134
195
|
onClick: onCheckout,
|
|
135
|
-
className:
|
|
136
|
-
|
|
137
|
-
}),
|
|
138
|
-
children: amount ? `Pay ${isUSD ? formatUSD(amount) : formatCoin(amount)}` : "Checkout"
|
|
196
|
+
className: "bg-primary h-[60px] w-full cursor-pointer text-xl font-semibold text-white disabled:cursor-not-allowed disabled:opacity-50",
|
|
197
|
+
children: !!isProcessing || isInternalProcessing ? /* @__PURE__ */ jsx3(Spinner, { className: "inline", size: "sm" }) : amount ? `Pay ${isUSD ? formatUSD(amount) : formatCoin(amount)}` : "Checkout"
|
|
139
198
|
}
|
|
140
199
|
)
|
|
141
200
|
] });
|
|
142
201
|
};
|
|
143
202
|
|
|
144
203
|
// src/components/SpreeLegal.tsx
|
|
145
|
-
import { jsx as
|
|
204
|
+
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
146
205
|
var SpreeLegal = () => {
|
|
147
|
-
return /* @__PURE__ */
|
|
148
|
-
/* @__PURE__ */
|
|
206
|
+
return /* @__PURE__ */ jsxs3("div", { className: "mt-4 flex items-center gap-4", children: [
|
|
207
|
+
/* @__PURE__ */ jsx4("svg", { className: "flex-shrink-0", xmlns: "http://www.w3.org/2000/svg", width: "66", height: "30", fill: "none", children: /* @__PURE__ */ jsx4(
|
|
149
208
|
"path",
|
|
150
209
|
{
|
|
151
210
|
fill: "#000",
|
|
@@ -153,10 +212,10 @@ var SpreeLegal = () => {
|
|
|
153
212
|
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"
|
|
154
213
|
}
|
|
155
214
|
) }),
|
|
156
|
-
/* @__PURE__ */
|
|
215
|
+
/* @__PURE__ */ jsxs3("p", { className: "text-xs text-[#798B95]", children: [
|
|
157
216
|
"Spree enables seamless crypto payments for real-world goods, travel, and experiences. Enjoy secure, fast transactions and earn rewards.",
|
|
158
217
|
" ",
|
|
159
|
-
/* @__PURE__ */
|
|
218
|
+
/* @__PURE__ */ jsx4("a", { className: "underline", href: "/", children: "Learn more" }),
|
|
160
219
|
" ",
|
|
161
220
|
"about Spree."
|
|
162
221
|
] })
|
|
@@ -176,7 +235,7 @@ var useSlapiBalance = () => {
|
|
|
176
235
|
// src/services/cardPayment.ts
|
|
177
236
|
import NiceModal2 from "@ebay/nice-modal-react";
|
|
178
237
|
|
|
179
|
-
// src/
|
|
238
|
+
// src/modals/Iframe3ds.tsx
|
|
180
239
|
import { useEffect } from "react";
|
|
181
240
|
import NiceModal, { useModal } from "@ebay/nice-modal-react";
|
|
182
241
|
|
|
@@ -212,16 +271,16 @@ function usePortalContainer() {
|
|
|
212
271
|
}
|
|
213
272
|
|
|
214
273
|
// src/ui/dialog.tsx
|
|
215
|
-
import { jsx as
|
|
274
|
+
import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
216
275
|
function Dialog({ ...props }) {
|
|
217
|
-
return /* @__PURE__ */
|
|
276
|
+
return /* @__PURE__ */ jsx5(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
|
|
218
277
|
}
|
|
219
278
|
function DialogPortal({ ...props }) {
|
|
220
279
|
const container = usePortalContainer();
|
|
221
|
-
return /* @__PURE__ */
|
|
280
|
+
return /* @__PURE__ */ jsx5(DialogPrimitive.Portal, { container: container ?? void 0, "data-slot": "dialog-portal", ...props });
|
|
222
281
|
}
|
|
223
282
|
function DialogOverlay({ className, ...props }) {
|
|
224
|
-
return /* @__PURE__ */
|
|
283
|
+
return /* @__PURE__ */ jsx5(
|
|
225
284
|
DialogPrimitive.Overlay,
|
|
226
285
|
{
|
|
227
286
|
"data-slot": "dialog-overlay",
|
|
@@ -239,9 +298,9 @@ function DialogContent({
|
|
|
239
298
|
showCloseButton = true,
|
|
240
299
|
...props
|
|
241
300
|
}) {
|
|
242
|
-
return /* @__PURE__ */
|
|
243
|
-
/* @__PURE__ */
|
|
244
|
-
/* @__PURE__ */
|
|
301
|
+
return /* @__PURE__ */ jsxs4(DialogPortal, { "data-slot": "dialog-portal", children: [
|
|
302
|
+
/* @__PURE__ */ jsx5(DialogOverlay, {}),
|
|
303
|
+
/* @__PURE__ */ jsxs4(
|
|
245
304
|
DialogPrimitive.Content,
|
|
246
305
|
{
|
|
247
306
|
"data-slot": "dialog-content",
|
|
@@ -252,14 +311,14 @@ function DialogContent({
|
|
|
252
311
|
...props,
|
|
253
312
|
children: [
|
|
254
313
|
children,
|
|
255
|
-
showCloseButton && /* @__PURE__ */
|
|
314
|
+
showCloseButton && /* @__PURE__ */ jsxs4(
|
|
256
315
|
DialogPrimitive.Close,
|
|
257
316
|
{
|
|
258
317
|
"data-slot": "dialog-close",
|
|
259
318
|
className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
260
319
|
children: [
|
|
261
|
-
/* @__PURE__ */
|
|
262
|
-
/* @__PURE__ */
|
|
320
|
+
/* @__PURE__ */ jsx5(XIcon, {}),
|
|
321
|
+
/* @__PURE__ */ jsx5("span", { className: "sr-only", children: "Close" })
|
|
263
322
|
]
|
|
264
323
|
}
|
|
265
324
|
)
|
|
@@ -269,7 +328,7 @@ function DialogContent({
|
|
|
269
328
|
] });
|
|
270
329
|
}
|
|
271
330
|
function DialogTitle({ className, ...props }) {
|
|
272
|
-
return /* @__PURE__ */
|
|
331
|
+
return /* @__PURE__ */ jsx5(
|
|
273
332
|
DialogPrimitive.Title,
|
|
274
333
|
{
|
|
275
334
|
"data-slot": "dialog-title",
|
|
@@ -278,9 +337,19 @@ function DialogTitle({ className, ...props }) {
|
|
|
278
337
|
}
|
|
279
338
|
);
|
|
280
339
|
}
|
|
340
|
+
function DialogDescription({ className, ...props }) {
|
|
341
|
+
return /* @__PURE__ */ jsx5(
|
|
342
|
+
DialogPrimitive.Description,
|
|
343
|
+
{
|
|
344
|
+
"data-slot": "dialog-description",
|
|
345
|
+
className: cn("text-muted-foreground text-sm", className),
|
|
346
|
+
...props
|
|
347
|
+
}
|
|
348
|
+
);
|
|
349
|
+
}
|
|
281
350
|
|
|
282
|
-
// src/
|
|
283
|
-
import { jsx as
|
|
351
|
+
// src/modals/Iframe3ds.tsx
|
|
352
|
+
import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
284
353
|
var Iframe3ds = NiceModal.create(({ url }) => {
|
|
285
354
|
const modal = useModal();
|
|
286
355
|
useEffect(() => {
|
|
@@ -293,10 +362,10 @@ var Iframe3ds = NiceModal.create(({ url }) => {
|
|
|
293
362
|
modal.reject();
|
|
294
363
|
modal.remove();
|
|
295
364
|
};
|
|
296
|
-
return /* @__PURE__ */
|
|
297
|
-
/* @__PURE__ */
|
|
298
|
-
/* @__PURE__ */
|
|
299
|
-
] });
|
|
365
|
+
return /* @__PURE__ */ jsx6(Dialog, { open: modal.visible, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs5(DialogContent, { className: "max-h-[600px] w-full max-w-[680px] p-0", children: [
|
|
366
|
+
/* @__PURE__ */ jsx6(DialogTitle, { className: "hidden", children: "3D Secure Verification" }),
|
|
367
|
+
/* @__PURE__ */ jsx6("iframe", { src: url, id: "3ds-iframe", title: "3D Secure Checkout", className: "h-[500px] w-full rounded-lg border-0" })
|
|
368
|
+
] }) });
|
|
300
369
|
});
|
|
301
370
|
Iframe3ds.displayName = "Iframe3ds";
|
|
302
371
|
|
|
@@ -484,9 +553,9 @@ import { useId } from "react";
|
|
|
484
553
|
|
|
485
554
|
// src/ui/label.tsx
|
|
486
555
|
import * as LabelPrimitive from "@radix-ui/react-label";
|
|
487
|
-
import { jsx as
|
|
556
|
+
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
488
557
|
function Label({ className, ...props }) {
|
|
489
|
-
return /* @__PURE__ */
|
|
558
|
+
return /* @__PURE__ */ jsx7(
|
|
490
559
|
LabelPrimitive.Root,
|
|
491
560
|
{
|
|
492
561
|
"data-slot": "label",
|
|
@@ -500,23 +569,23 @@ function Label({ className, ...props }) {
|
|
|
500
569
|
}
|
|
501
570
|
|
|
502
571
|
// src/ui/switch.tsx
|
|
503
|
-
import * as
|
|
504
|
-
import { jsx as
|
|
572
|
+
import * as SwitchPrimitive from "@radix-ui/react-switch";
|
|
573
|
+
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
505
574
|
function Switch({ className, ...props }) {
|
|
506
|
-
return /* @__PURE__ */
|
|
507
|
-
|
|
575
|
+
return /* @__PURE__ */ jsx8(
|
|
576
|
+
SwitchPrimitive.Root,
|
|
508
577
|
{
|
|
509
578
|
"data-slot": "switch",
|
|
510
579
|
className: cn(
|
|
511
|
-
"
|
|
580
|
+
"peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 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",
|
|
512
581
|
className
|
|
513
582
|
),
|
|
514
583
|
...props,
|
|
515
|
-
children: /* @__PURE__ */
|
|
516
|
-
|
|
584
|
+
children: /* @__PURE__ */ jsx8(
|
|
585
|
+
SwitchPrimitive.Thumb,
|
|
517
586
|
{
|
|
518
587
|
"data-slot": "switch-thumb",
|
|
519
|
-
className: "bg-background pointer-events-none block size-4 rounded-full
|
|
588
|
+
className: "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
|
|
520
589
|
}
|
|
521
590
|
)
|
|
522
591
|
}
|
|
@@ -524,23 +593,23 @@ function Switch({ className, ...props }) {
|
|
|
524
593
|
}
|
|
525
594
|
|
|
526
595
|
// src/components/common/PointsSwitch.tsx
|
|
527
|
-
import { jsx as
|
|
596
|
+
import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
528
597
|
var PointsSwitch = (props) => {
|
|
529
598
|
const { disabled = false, value, onChange } = props;
|
|
530
599
|
const { balance } = useSlapiBalance();
|
|
531
600
|
const id = useId();
|
|
532
|
-
return /* @__PURE__ */
|
|
533
|
-
/* @__PURE__ */
|
|
534
|
-
/* @__PURE__ */
|
|
535
|
-
/* @__PURE__ */
|
|
601
|
+
return /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between gap-3", children: [
|
|
602
|
+
/* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-3", children: [
|
|
603
|
+
/* @__PURE__ */ jsx9(Switch, { checked: value, onCheckedChange: onChange, disabled, id }),
|
|
604
|
+
/* @__PURE__ */ jsxs6(Label, { className: "items-baseline text-xl leading-[1.3] font-semibold text-black", htmlFor: id, children: [
|
|
536
605
|
"Use Points ",
|
|
537
|
-
/* @__PURE__ */
|
|
606
|
+
/* @__PURE__ */ jsx9("span", { className: "text-xs font-medium", children: "Optional" })
|
|
538
607
|
] })
|
|
539
608
|
] }),
|
|
540
|
-
balance?.availablePoints ? /* @__PURE__ */
|
|
609
|
+
balance?.availablePoints ? /* @__PURE__ */ jsxs6("p", { className: "text-sm font-medium text-black", children: [
|
|
541
610
|
formatPoints(balance.availablePoints),
|
|
542
611
|
" ",
|
|
543
|
-
/* @__PURE__ */
|
|
612
|
+
/* @__PURE__ */ jsx9("span", { className: "text-black/50", children: formatUSD(balance.availablePoints / pointsConverionRate) })
|
|
544
613
|
] }) : null
|
|
545
614
|
] });
|
|
546
615
|
};
|
|
@@ -569,22 +638,22 @@ var useConfig = () => {
|
|
|
569
638
|
};
|
|
570
639
|
|
|
571
640
|
// src/components/CreditCardTab/CreditCard/CardsList.tsx
|
|
572
|
-
import { jsx as
|
|
641
|
+
import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
573
642
|
var CardListItem = ({ card, isSelected, onSelect }) => {
|
|
574
643
|
const handleSelect = () => {
|
|
575
644
|
onSelect(card);
|
|
576
645
|
};
|
|
577
|
-
return /* @__PURE__ */
|
|
578
|
-
/* @__PURE__ */
|
|
646
|
+
return /* @__PURE__ */ jsxs7("button", { type: "button", onClick: handleSelect, className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
|
|
647
|
+
/* @__PURE__ */ jsx10(
|
|
579
648
|
"div",
|
|
580
649
|
{
|
|
581
650
|
className: cn("flex w-11 items-center justify-center bg-black/10", {
|
|
582
651
|
"bg-primary": isSelected
|
|
583
652
|
}),
|
|
584
|
-
children: /* @__PURE__ */
|
|
653
|
+
children: /* @__PURE__ */ jsx10("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: isSelected && /* @__PURE__ */ jsx10("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) })
|
|
585
654
|
}
|
|
586
655
|
),
|
|
587
|
-
/* @__PURE__ */
|
|
656
|
+
/* @__PURE__ */ jsxs7(
|
|
588
657
|
"div",
|
|
589
658
|
{
|
|
590
659
|
className: cn(
|
|
@@ -594,15 +663,15 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
|
|
|
594
663
|
}
|
|
595
664
|
),
|
|
596
665
|
children: [
|
|
597
|
-
/* @__PURE__ */
|
|
598
|
-
/* @__PURE__ */
|
|
599
|
-
/* @__PURE__ */
|
|
666
|
+
/* @__PURE__ */ jsx10("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx10("p", { className: "text-sm font-medium text-black", children: card.schema }) }),
|
|
667
|
+
/* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
|
|
668
|
+
/* @__PURE__ */ jsxs7("p", { className: "text-sm font-medium text-[#798B95]", children: [
|
|
600
669
|
"Ending in ",
|
|
601
|
-
/* @__PURE__ */
|
|
670
|
+
/* @__PURE__ */ jsx10("span", { className: "text-black", children: card.lastFourNumbers })
|
|
602
671
|
] }),
|
|
603
|
-
/* @__PURE__ */
|
|
604
|
-
/* @__PURE__ */
|
|
605
|
-
/* @__PURE__ */
|
|
672
|
+
/* @__PURE__ */ jsx10("div", { className: "cursor-not-allowed", children: /* @__PURE__ */ jsxs7("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", fill: "none", children: [
|
|
673
|
+
/* @__PURE__ */ jsx10("mask", { id: "mask0_188_5407", width: "20", height: "21", x: "0", y: "-1", maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx10("path", { fill: "#D9D9D9", d: "M0-.5h20v20H0z" }) }),
|
|
674
|
+
/* @__PURE__ */ jsx10("g", { mask: "url(#mask0_188_5407)", children: /* @__PURE__ */ jsx10(
|
|
606
675
|
"path",
|
|
607
676
|
{
|
|
608
677
|
fill: "#000",
|
|
@@ -620,14 +689,14 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
|
|
|
620
689
|
var CardsList = ({ selectedCard, setCard }) => {
|
|
621
690
|
const { cards, cardsIsLoading } = useCards();
|
|
622
691
|
if (cardsIsLoading) {
|
|
623
|
-
return /* @__PURE__ */
|
|
624
|
-
/* @__PURE__ */
|
|
625
|
-
/* @__PURE__ */
|
|
626
|
-
/* @__PURE__ */
|
|
692
|
+
return /* @__PURE__ */ jsxs7("div", { className: "flex w-full flex-col gap-1", children: [
|
|
693
|
+
/* @__PURE__ */ jsx10("div", { className: "bg-primary/8 h-11 animate-pulse rounded-md" }),
|
|
694
|
+
/* @__PURE__ */ jsx10("div", { className: "bg-primary/8 h-11 animate-pulse rounded-md" }),
|
|
695
|
+
/* @__PURE__ */ jsx10("div", { className: "bg-primary/8 h-11 animate-pulse rounded-md" })
|
|
627
696
|
] });
|
|
628
697
|
}
|
|
629
698
|
if (cards.length === 0) return null;
|
|
630
|
-
return /* @__PURE__ */
|
|
699
|
+
return /* @__PURE__ */ jsx10("div", { className: "flex w-full flex-col gap-1", children: cards.map((card) => /* @__PURE__ */ jsx10(CardListItem, { isSelected: selectedCard?.id === card.id, onSelect: setCard, card }, card.id)) });
|
|
631
700
|
};
|
|
632
701
|
|
|
633
702
|
// src/components/CreditCardTab/CreditCard/CreditCardForm.tsx
|
|
@@ -637,9 +706,9 @@ import { CardCvcElement, CardExpiryElement, CardNumberElement, useElements, useS
|
|
|
637
706
|
// src/ui/button.tsx
|
|
638
707
|
import { Slot } from "@radix-ui/react-slot";
|
|
639
708
|
import { cva } from "class-variance-authority";
|
|
640
|
-
import { jsx as
|
|
709
|
+
import { jsx as jsx11 } from "react/jsx-runtime";
|
|
641
710
|
var buttonVariants = cva(
|
|
642
|
-
"inline-flex
|
|
711
|
+
"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",
|
|
643
712
|
{
|
|
644
713
|
variants: {
|
|
645
714
|
variant: {
|
|
@@ -672,29 +741,29 @@ function Button({
|
|
|
672
741
|
...props
|
|
673
742
|
}) {
|
|
674
743
|
const Comp = asChild ? Slot : "button";
|
|
675
|
-
return /* @__PURE__ */
|
|
744
|
+
return /* @__PURE__ */ jsx11(Comp, { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ...props });
|
|
676
745
|
}
|
|
677
746
|
|
|
678
747
|
// src/ui/checkbox.tsx
|
|
679
748
|
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
|
|
680
749
|
import { CheckIcon } from "lucide-react";
|
|
681
|
-
import { jsx as
|
|
750
|
+
import { jsx as jsx12 } from "react/jsx-runtime";
|
|
682
751
|
function Checkbox({ className, ...props }) {
|
|
683
|
-
return /* @__PURE__ */
|
|
752
|
+
return /* @__PURE__ */ jsx12(
|
|
684
753
|
CheckboxPrimitive.Root,
|
|
685
754
|
{
|
|
686
755
|
"data-slot": "checkbox",
|
|
687
756
|
className: cn(
|
|
688
|
-
"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary 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-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-
|
|
757
|
+
"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary 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-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
|
|
689
758
|
className
|
|
690
759
|
),
|
|
691
760
|
...props,
|
|
692
|
-
children: /* @__PURE__ */
|
|
761
|
+
children: /* @__PURE__ */ jsx12(
|
|
693
762
|
CheckboxPrimitive.Indicator,
|
|
694
763
|
{
|
|
695
764
|
"data-slot": "checkbox-indicator",
|
|
696
765
|
className: "flex items-center justify-center text-current transition-none",
|
|
697
|
-
children: /* @__PURE__ */
|
|
766
|
+
children: /* @__PURE__ */ jsx12(CheckIcon, { className: "size-3.5 text-white" })
|
|
698
767
|
}
|
|
699
768
|
)
|
|
700
769
|
}
|
|
@@ -702,7 +771,7 @@ function Checkbox({ className, ...props }) {
|
|
|
702
771
|
}
|
|
703
772
|
|
|
704
773
|
// src/components/CreditCardTab/CreditCard/CreditCardForm.tsx
|
|
705
|
-
import { Fragment, jsx as
|
|
774
|
+
import { Fragment, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
706
775
|
var style = {
|
|
707
776
|
base: {
|
|
708
777
|
fontSize: "16px",
|
|
@@ -760,9 +829,9 @@ var CreditCardForm = ({ cancel, saveCard }) => {
|
|
|
760
829
|
setCardError("An error occurred while processing your card. Please try again.");
|
|
761
830
|
}
|
|
762
831
|
};
|
|
763
|
-
return /* @__PURE__ */
|
|
764
|
-
/* @__PURE__ */
|
|
765
|
-
/* @__PURE__ */
|
|
832
|
+
return /* @__PURE__ */ jsxs8(Fragment, { children: [
|
|
833
|
+
/* @__PURE__ */ jsxs8("div", { className: "flex w-full flex-col gap-1", children: [
|
|
834
|
+
/* @__PURE__ */ jsx13(
|
|
766
835
|
CardNumberElement,
|
|
767
836
|
{
|
|
768
837
|
options: {
|
|
@@ -772,8 +841,8 @@ var CreditCardForm = ({ cancel, saveCard }) => {
|
|
|
772
841
|
}
|
|
773
842
|
}
|
|
774
843
|
),
|
|
775
|
-
/* @__PURE__ */
|
|
776
|
-
/* @__PURE__ */
|
|
844
|
+
/* @__PURE__ */ jsxs8("div", { className: "flex w-full gap-1", children: [
|
|
845
|
+
/* @__PURE__ */ jsx13(
|
|
777
846
|
CardExpiryElement,
|
|
778
847
|
{
|
|
779
848
|
options: {
|
|
@@ -783,7 +852,7 @@ var CreditCardForm = ({ cancel, saveCard }) => {
|
|
|
783
852
|
}
|
|
784
853
|
}
|
|
785
854
|
),
|
|
786
|
-
/* @__PURE__ */
|
|
855
|
+
/* @__PURE__ */ jsx13(
|
|
787
856
|
CardCvcElement,
|
|
788
857
|
{
|
|
789
858
|
options: {
|
|
@@ -794,24 +863,24 @@ var CreditCardForm = ({ cancel, saveCard }) => {
|
|
|
794
863
|
}
|
|
795
864
|
)
|
|
796
865
|
] }),
|
|
797
|
-
cardError && /* @__PURE__ */
|
|
866
|
+
cardError && /* @__PURE__ */ jsx13("p", { className: "text-destructive mt-1 text-sm", children: cardError })
|
|
798
867
|
] }),
|
|
799
|
-
/* @__PURE__ */
|
|
800
|
-
/* @__PURE__ */
|
|
801
|
-
/* @__PURE__ */
|
|
868
|
+
/* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
|
|
869
|
+
/* @__PURE__ */ jsx13(Checkbox, { disabled: true, checked: true, id: "saveCard" }),
|
|
870
|
+
/* @__PURE__ */ jsx13(Label, { className: "text-sm font-medium", htmlFor: "saveCard", children: "Save card for future purchases" })
|
|
802
871
|
] }),
|
|
803
|
-
/* @__PURE__ */
|
|
804
|
-
/* @__PURE__ */
|
|
805
|
-
/* @__PURE__ */
|
|
872
|
+
/* @__PURE__ */ jsxs8("div", { className: "flex w-full justify-end gap-2", children: [
|
|
873
|
+
/* @__PURE__ */ jsx13(Button, { variant: "secondary", onClick: cancel, children: "Cancel" }),
|
|
874
|
+
/* @__PURE__ */ jsx13(Button, { onClick: handleSaveCard, children: "Add Card" })
|
|
806
875
|
] })
|
|
807
876
|
] });
|
|
808
877
|
};
|
|
809
878
|
|
|
810
879
|
// src/components/CreditCardTab/CreditCard/CreditCard.tsx
|
|
811
|
-
import { Fragment as Fragment2, jsx as
|
|
880
|
+
import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
812
881
|
var SripeWrapper = (props) => {
|
|
813
882
|
const stripePromise = useMemo(() => loadStripe(props.publicKey), [props.publicKey]);
|
|
814
|
-
return /* @__PURE__ */
|
|
883
|
+
return /* @__PURE__ */ jsx14(Elements, { stripe: stripePromise, children: /* @__PURE__ */ jsx14(CreditCardForm, { cancel: props.onCancel, saveCard: props.saveNewCard }) });
|
|
815
884
|
};
|
|
816
885
|
var CreditCard = () => {
|
|
817
886
|
const [showForm, setShowForm] = useState3(false);
|
|
@@ -829,28 +898,28 @@ var CreditCard = () => {
|
|
|
829
898
|
const handleCancel = () => {
|
|
830
899
|
setShowForm(false);
|
|
831
900
|
};
|
|
832
|
-
return /* @__PURE__ */
|
|
833
|
-
/* @__PURE__ */
|
|
834
|
-
!showForm && /* @__PURE__ */
|
|
835
|
-
/* @__PURE__ */
|
|
901
|
+
return /* @__PURE__ */ jsxs9("div", { className: "flex flex-col items-baseline gap-4", children: [
|
|
902
|
+
/* @__PURE__ */ jsx14("h3", { className: "text-primary text-xl leading-[34px] font-semibold", children: "Your Credit Cards" }),
|
|
903
|
+
!showForm && /* @__PURE__ */ jsxs9(Fragment2, { children: [
|
|
904
|
+
/* @__PURE__ */ jsx14(
|
|
836
905
|
CardsList,
|
|
837
906
|
{
|
|
838
907
|
selectedCard: selectedPaymentMethod?.type === "CREDIT_CARD" /* CREDIT_CARD */ ? selectedPaymentMethod.method : null,
|
|
839
908
|
setCard
|
|
840
909
|
}
|
|
841
910
|
),
|
|
842
|
-
config2?.stripePublicKey && /* @__PURE__ */
|
|
911
|
+
config2?.stripePublicKey && /* @__PURE__ */ jsx14("button", { onClick: () => setShowForm(true), className: "text-sm font-medium text-black hover:underline", children: "Add new card" })
|
|
843
912
|
] }),
|
|
844
|
-
config2?.stripePublicKey && showForm && /* @__PURE__ */
|
|
913
|
+
config2?.stripePublicKey && showForm && /* @__PURE__ */ jsx14(SripeWrapper, { onCancel: handleCancel, saveNewCard, publicKey: config2.stripePublicKey })
|
|
845
914
|
] });
|
|
846
915
|
};
|
|
847
916
|
|
|
848
917
|
// src/components/CreditCardTab/CreditCardTab.tsx
|
|
849
|
-
import { jsx as
|
|
918
|
+
import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
850
919
|
var PointsSelector = ({ isSelected, onSelect, children }) => {
|
|
851
920
|
return (
|
|
852
921
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
|
|
853
|
-
/* @__PURE__ */
|
|
922
|
+
/* @__PURE__ */ jsxs10(
|
|
854
923
|
"div",
|
|
855
924
|
{
|
|
856
925
|
onClick: onSelect,
|
|
@@ -858,19 +927,19 @@ var PointsSelector = ({ isSelected, onSelect, children }) => {
|
|
|
858
927
|
"border-primary": isSelected
|
|
859
928
|
}),
|
|
860
929
|
children: [
|
|
861
|
-
/* @__PURE__ */
|
|
862
|
-
/* @__PURE__ */
|
|
930
|
+
/* @__PURE__ */ jsxs10("div", { className: cn("flex h-11 w-full", { "bg-black/4": isSelected }), children: [
|
|
931
|
+
/* @__PURE__ */ jsx15(
|
|
863
932
|
"div",
|
|
864
933
|
{
|
|
865
934
|
className: cn("flex w-11 items-center justify-center bg-black/10", {
|
|
866
935
|
"bg-primary": isSelected
|
|
867
936
|
}),
|
|
868
|
-
children: /* @__PURE__ */
|
|
937
|
+
children: /* @__PURE__ */ jsx15("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: isSelected && /* @__PURE__ */ jsx15("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) })
|
|
869
938
|
}
|
|
870
939
|
),
|
|
871
|
-
/* @__PURE__ */
|
|
940
|
+
/* @__PURE__ */ jsx15("div", { className: cn("flex w-full items-center justify-between gap-4 px-3"), children })
|
|
872
941
|
] }),
|
|
873
|
-
isSelected && /* @__PURE__ */
|
|
942
|
+
isSelected && /* @__PURE__ */ jsx15("div", { className: "px-4 pt-6 pb-2", children: /* @__PURE__ */ jsx15("p", { children: "Card" }) })
|
|
874
943
|
]
|
|
875
944
|
}
|
|
876
945
|
)
|
|
@@ -907,28 +976,28 @@ var CreditCardTab = () => {
|
|
|
907
976
|
useEffect2(() => {
|
|
908
977
|
register(handlePay);
|
|
909
978
|
}, [register, handlePay]);
|
|
910
|
-
return /* @__PURE__ */
|
|
911
|
-
/* @__PURE__ */
|
|
912
|
-
/* @__PURE__ */
|
|
913
|
-
/* @__PURE__ */
|
|
914
|
-
usePoints && /* @__PURE__ */
|
|
915
|
-
/* @__PURE__ */
|
|
916
|
-
/* @__PURE__ */
|
|
917
|
-
isBalanceLoading ? /* @__PURE__ */
|
|
918
|
-
balance?.availablePoints ? /* @__PURE__ */
|
|
979
|
+
return /* @__PURE__ */ jsxs10("div", { children: [
|
|
980
|
+
/* @__PURE__ */ jsx15("div", { className: "border-b-1 border-black/7 px-7 py-6", children: /* @__PURE__ */ jsx15(CreditCard, {}) }),
|
|
981
|
+
/* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-6 px-7 py-6", children: [
|
|
982
|
+
/* @__PURE__ */ jsx15(PointsSwitch, { disabled: true, value: usePoints, onChange: setUsePoints }),
|
|
983
|
+
usePoints && /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-1", children: [
|
|
984
|
+
/* @__PURE__ */ jsxs10(PointsSelector, { onSelect: () => setSelectedPointsType("slapi"), isSelected: selectedPointsType === "slapi", children: [
|
|
985
|
+
/* @__PURE__ */ jsx15("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx15("p", { className: "text-sm font-medium text-black", children: "from [Brand] Balance" }) }),
|
|
986
|
+
isBalanceLoading ? /* @__PURE__ */ jsx15("div", { className: "h-4 w-6 animate-pulse bg-gray-200" }) : !balance?.availablePoints && /* @__PURE__ */ jsx15("p", { className: "text-sm font-medium text-black", children: "No points available" }),
|
|
987
|
+
balance?.availablePoints ? /* @__PURE__ */ jsxs10("p", { className: "text-sm font-medium text-black", children: [
|
|
919
988
|
formatPoints(balance.availablePoints),
|
|
920
989
|
" ",
|
|
921
|
-
/* @__PURE__ */
|
|
990
|
+
/* @__PURE__ */ jsx15("span", { className: "text-black/50", children: formatUSD(balance.availablePoints / pointsConverionRate) })
|
|
922
991
|
] }) : null
|
|
923
992
|
] }),
|
|
924
|
-
/* @__PURE__ */
|
|
993
|
+
/* @__PURE__ */ jsxs10(
|
|
925
994
|
PointsSelector,
|
|
926
995
|
{
|
|
927
996
|
onSelect: () => setSelectedPointsType("wallet"),
|
|
928
997
|
isSelected: selectedPointsType === "wallet",
|
|
929
998
|
children: [
|
|
930
|
-
/* @__PURE__ */
|
|
931
|
-
/* @__PURE__ */
|
|
999
|
+
/* @__PURE__ */ jsx15("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx15("p", { className: "text-sm font-medium text-black", children: "from Crypto Wallet" }) }),
|
|
1000
|
+
/* @__PURE__ */ jsx15("button", { className: "hover:bg-primary -mr-2 h-[34px] rounded-sm border-1 border-black px-3 text-sm font-medium hover:text-white", children: "Connect a Wallet" })
|
|
932
1001
|
]
|
|
933
1002
|
}
|
|
934
1003
|
)
|
|
@@ -1111,13 +1180,13 @@ var useCryptoPayment = () => {
|
|
|
1111
1180
|
|
|
1112
1181
|
// src/components/CryptoTab/Crypto/ConnectButton.tsx
|
|
1113
1182
|
import { ConnectButton as RainbowButton } from "@rainbow-me/rainbowkit";
|
|
1114
|
-
import { Fragment as Fragment3, jsx as
|
|
1183
|
+
import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
1115
1184
|
var ConnectButton = () => {
|
|
1116
|
-
return /* @__PURE__ */
|
|
1185
|
+
return /* @__PURE__ */ jsx16(RainbowButton.Custom, { children: ({ mounted, chain, account, openAccountModal, openChainModal, openConnectModal }) => {
|
|
1117
1186
|
if (!mounted) return null;
|
|
1118
|
-
return /* @__PURE__ */
|
|
1187
|
+
return /* @__PURE__ */ jsx16(Fragment3, { children: (() => {
|
|
1119
1188
|
if (!mounted || !account || !chain) {
|
|
1120
|
-
return /* @__PURE__ */
|
|
1189
|
+
return /* @__PURE__ */ jsx16(
|
|
1121
1190
|
"button",
|
|
1122
1191
|
{
|
|
1123
1192
|
className: "h-[34px] rounded-md border-1 border-black px-3 text-sm font-medium",
|
|
@@ -1127,7 +1196,7 @@ var ConnectButton = () => {
|
|
|
1127
1196
|
);
|
|
1128
1197
|
}
|
|
1129
1198
|
if (chain.unsupported) {
|
|
1130
|
-
return /* @__PURE__ */
|
|
1199
|
+
return /* @__PURE__ */ jsx16(
|
|
1131
1200
|
"button",
|
|
1132
1201
|
{
|
|
1133
1202
|
className: "h-[34px] rounded-md border-1 border-black px-3 text-sm font-medium text-red-500",
|
|
@@ -1136,13 +1205,13 @@ var ConnectButton = () => {
|
|
|
1136
1205
|
}
|
|
1137
1206
|
);
|
|
1138
1207
|
}
|
|
1139
|
-
return /* @__PURE__ */
|
|
1208
|
+
return /* @__PURE__ */ jsxs11(
|
|
1140
1209
|
"button",
|
|
1141
1210
|
{
|
|
1142
1211
|
className: "flex h-[34px] items-center gap-2 rounded-md border-1 border-black px-1.5 text-sm font-medium",
|
|
1143
1212
|
onClick: openAccountModal,
|
|
1144
1213
|
children: [
|
|
1145
|
-
chain.hasIcon && /* @__PURE__ */
|
|
1214
|
+
chain.hasIcon && /* @__PURE__ */ jsx16("div", { className: "h-6 w-6 overflow-hidden rounded-full", style: { background: chain.iconBackground }, children: chain.iconUrl && /* @__PURE__ */ jsx16("img", { alt: chain.name ?? "Chain icon", src: chain.iconUrl }) }),
|
|
1146
1215
|
account.displayName
|
|
1147
1216
|
]
|
|
1148
1217
|
}
|
|
@@ -1152,29 +1221,29 @@ var ConnectButton = () => {
|
|
|
1152
1221
|
};
|
|
1153
1222
|
|
|
1154
1223
|
// src/config/symbolLogos.tsx
|
|
1155
|
-
import { jsx as
|
|
1156
|
-
var MOCA_SVG = /* @__PURE__ */
|
|
1157
|
-
/* @__PURE__ */
|
|
1158
|
-
/* @__PURE__ */
|
|
1224
|
+
import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
1225
|
+
var MOCA_SVG = /* @__PURE__ */ jsxs12("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
|
|
1226
|
+
/* @__PURE__ */ jsx17("circle", { cx: "14", cy: "14", r: "13.5", fill: "#C15F97" }),
|
|
1227
|
+
/* @__PURE__ */ jsx17(
|
|
1159
1228
|
"path",
|
|
1160
1229
|
{
|
|
1161
1230
|
fill: "#fff",
|
|
1162
1231
|
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"
|
|
1163
1232
|
}
|
|
1164
1233
|
),
|
|
1165
|
-
/* @__PURE__ */
|
|
1234
|
+
/* @__PURE__ */ jsx17("circle", { cx: "16", cy: "14", r: "1.5", fill: "#fff" })
|
|
1166
1235
|
] });
|
|
1167
|
-
var USDC_SVG = /* @__PURE__ */
|
|
1168
|
-
/* @__PURE__ */
|
|
1169
|
-
/* @__PURE__ */
|
|
1170
|
-
/* @__PURE__ */
|
|
1236
|
+
var USDC_SVG = /* @__PURE__ */ jsxs12("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
|
|
1237
|
+
/* @__PURE__ */ jsxs12("g", { clipPath: "url(#clip0_528_9163)", children: [
|
|
1238
|
+
/* @__PURE__ */ jsx17("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" }),
|
|
1239
|
+
/* @__PURE__ */ jsx17(
|
|
1171
1240
|
"path",
|
|
1172
1241
|
{
|
|
1173
1242
|
fill: "#fff",
|
|
1174
1243
|
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"
|
|
1175
1244
|
}
|
|
1176
1245
|
),
|
|
1177
|
-
/* @__PURE__ */
|
|
1246
|
+
/* @__PURE__ */ jsx17(
|
|
1178
1247
|
"path",
|
|
1179
1248
|
{
|
|
1180
1249
|
fill: "#fff",
|
|
@@ -1182,11 +1251,11 @@ var USDC_SVG = /* @__PURE__ */ jsxs11("svg", { xmlns: "http://www.w3.org/2000/sv
|
|
|
1182
1251
|
}
|
|
1183
1252
|
)
|
|
1184
1253
|
] }),
|
|
1185
|
-
/* @__PURE__ */
|
|
1254
|
+
/* @__PURE__ */ jsx17("defs", { children: /* @__PURE__ */ jsx17("clipPath", { id: "clip0_528_9163", children: /* @__PURE__ */ jsx17("path", { fill: "#fff", d: "M0 0h28v28H0z" }) }) })
|
|
1186
1255
|
] });
|
|
1187
|
-
var USDT_SVG = /* @__PURE__ */
|
|
1188
|
-
/* @__PURE__ */
|
|
1189
|
-
/* @__PURE__ */
|
|
1256
|
+
var USDT_SVG = /* @__PURE__ */ jsxs12("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
|
|
1257
|
+
/* @__PURE__ */ jsx17("path", { fill: "#26A17B", d: "M14 28a14 14 0 1 0 0-28 14 14 0 0 0 0 28Z" }),
|
|
1258
|
+
/* @__PURE__ */ jsx17(
|
|
1190
1259
|
"path",
|
|
1191
1260
|
{
|
|
1192
1261
|
fill: "#fff",
|
|
@@ -1194,23 +1263,23 @@ var USDT_SVG = /* @__PURE__ */ jsxs11("svg", { xmlns: "http://www.w3.org/2000/sv
|
|
|
1194
1263
|
}
|
|
1195
1264
|
)
|
|
1196
1265
|
] });
|
|
1197
|
-
var WETH_SVG = /* @__PURE__ */
|
|
1198
|
-
/* @__PURE__ */
|
|
1199
|
-
/* @__PURE__ */
|
|
1266
|
+
var WETH_SVG = /* @__PURE__ */ jsxs12("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", width: "28", height: "28", viewBox: "0 0 24 24", children: [
|
|
1267
|
+
/* @__PURE__ */ jsxs12("g", { clipPath: "url(#clip0_528_9173)", children: [
|
|
1268
|
+
/* @__PURE__ */ jsx17(
|
|
1200
1269
|
"path",
|
|
1201
1270
|
{
|
|
1202
1271
|
fill: "#000",
|
|
1203
1272
|
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"
|
|
1204
1273
|
}
|
|
1205
1274
|
),
|
|
1206
|
-
/* @__PURE__ */
|
|
1275
|
+
/* @__PURE__ */ jsx17(
|
|
1207
1276
|
"path",
|
|
1208
1277
|
{
|
|
1209
1278
|
fill: "#F61F7D",
|
|
1210
1279
|
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"
|
|
1211
1280
|
}
|
|
1212
1281
|
),
|
|
1213
|
-
/* @__PURE__ */
|
|
1282
|
+
/* @__PURE__ */ jsx17(
|
|
1214
1283
|
"path",
|
|
1215
1284
|
{
|
|
1216
1285
|
fill: "#000",
|
|
@@ -1219,8 +1288,8 @@ var WETH_SVG = /* @__PURE__ */ jsxs11("svg", { xmlns: "http://www.w3.org/2000/sv
|
|
|
1219
1288
|
clipRule: "evenodd"
|
|
1220
1289
|
}
|
|
1221
1290
|
),
|
|
1222
|
-
/* @__PURE__ */
|
|
1223
|
-
/* @__PURE__ */
|
|
1291
|
+
/* @__PURE__ */ jsx17("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" }),
|
|
1292
|
+
/* @__PURE__ */ jsx17(
|
|
1224
1293
|
"path",
|
|
1225
1294
|
{
|
|
1226
1295
|
fill: "#000",
|
|
@@ -1229,8 +1298,8 @@ var WETH_SVG = /* @__PURE__ */ jsxs11("svg", { xmlns: "http://www.w3.org/2000/sv
|
|
|
1229
1298
|
clipRule: "evenodd"
|
|
1230
1299
|
}
|
|
1231
1300
|
),
|
|
1232
|
-
/* @__PURE__ */
|
|
1233
|
-
/* @__PURE__ */
|
|
1301
|
+
/* @__PURE__ */ jsx17("path", { fill: "#000", fillRule: "evenodd", d: "M3.02 10.63.7 8.75l.74-.86 2.34 1.87-.75.87Z", clipRule: "evenodd" }),
|
|
1302
|
+
/* @__PURE__ */ jsx17(
|
|
1234
1303
|
"path",
|
|
1235
1304
|
{
|
|
1236
1305
|
fill: "#000",
|
|
@@ -1238,7 +1307,7 @@ var WETH_SVG = /* @__PURE__ */ jsxs11("svg", { xmlns: "http://www.w3.org/2000/sv
|
|
|
1238
1307
|
}
|
|
1239
1308
|
)
|
|
1240
1309
|
] }),
|
|
1241
|
-
/* @__PURE__ */
|
|
1310
|
+
/* @__PURE__ */ jsx17("defs", { children: /* @__PURE__ */ jsx17("clipPath", { id: "clip0_528_9173", children: /* @__PURE__ */ jsx17("path", { fill: "#fff", d: "M0 0h24v24H0z" }) }) })
|
|
1242
1311
|
] });
|
|
1243
1312
|
var symbolLogos = {
|
|
1244
1313
|
MOCA: MOCA_SVG,
|
|
@@ -1251,13 +1320,13 @@ function getSymbolLogo(symbol) {
|
|
|
1251
1320
|
}
|
|
1252
1321
|
|
|
1253
1322
|
// src/components/CryptoTab/Crypto/Logos.tsx
|
|
1254
|
-
import { jsx as
|
|
1323
|
+
import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1255
1324
|
var Logos = () => {
|
|
1256
|
-
return /* @__PURE__ */
|
|
1257
|
-
/* @__PURE__ */
|
|
1258
|
-
/* @__PURE__ */
|
|
1259
|
-
/* @__PURE__ */
|
|
1260
|
-
/* @__PURE__ */
|
|
1325
|
+
return /* @__PURE__ */ jsxs13("div", { className: "flex", children: [
|
|
1326
|
+
/* @__PURE__ */ jsx18("div", { className: "rounded-full border border-[#F5F7FA]", children: getSymbolLogo("MOCA") }),
|
|
1327
|
+
/* @__PURE__ */ jsx18("div", { className: "-ml-2.5 rounded-full border border-[#F5F7FA]", children: getSymbolLogo("USDC") }),
|
|
1328
|
+
/* @__PURE__ */ jsx18("div", { className: "-ml-2.5 rounded-full border border-[#F5F7FA]", children: getSymbolLogo("USDT") }),
|
|
1329
|
+
/* @__PURE__ */ jsx18("div", { className: "-ml-2.5 rounded-full border border-[#F5F7FA] bg-[#F5F7FA]", children: getSymbolLogo("WETH") })
|
|
1261
1330
|
] });
|
|
1262
1331
|
};
|
|
1263
1332
|
|
|
@@ -1352,7 +1421,7 @@ function useBaseNativeToken() {
|
|
|
1352
1421
|
}
|
|
1353
1422
|
|
|
1354
1423
|
// src/modals/CryptoSelectModal.tsx
|
|
1355
|
-
import { Fragment as Fragment4, jsx as
|
|
1424
|
+
import { Fragment as Fragment4, jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1356
1425
|
var CryptoSelectModal = NiceModal3.create(() => {
|
|
1357
1426
|
const modal = useModal2();
|
|
1358
1427
|
const { isLoading, error, erc20Balances } = useBaseERC20Token();
|
|
@@ -1362,113 +1431,116 @@ var CryptoSelectModal = NiceModal3.create(() => {
|
|
|
1362
1431
|
modal.remove();
|
|
1363
1432
|
setSelectedPaymentMethod({ type: "CRYPTO" /* CRYPTO */, method: coin });
|
|
1364
1433
|
};
|
|
1365
|
-
return /* @__PURE__ */
|
|
1366
|
-
/* @__PURE__ */
|
|
1367
|
-
|
|
1368
|
-
/* @__PURE__ */
|
|
1369
|
-
|
|
1370
|
-
"
|
|
1371
|
-
{
|
|
1372
|
-
|
|
1373
|
-
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"
|
|
1374
|
-
}
|
|
1375
|
-
) }) })
|
|
1376
|
-
] }) }),
|
|
1377
|
-
/* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-4 px-7 py-6", children: [
|
|
1378
|
-
/* @__PURE__ */ jsx18("h3", { className: "text-primary text-xl font-semibold", children: "Tokens with wallet balance" }),
|
|
1379
|
-
(error || nativeError) && /* @__PURE__ */ jsx18("p", { className: "text-center text-sm text-red-500", children: "Something wrong" }),
|
|
1380
|
-
/* @__PURE__ */ jsxs13("div", { className: "flex w-full flex-col gap-1", children: [
|
|
1381
|
-
isLoadingNative && /* @__PURE__ */ jsx18("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
|
|
1382
|
-
nativeBalance && /* @__PURE__ */ jsxs13(
|
|
1383
|
-
"button",
|
|
1434
|
+
return /* @__PURE__ */ jsxs14(Dialog, { open: modal.visible, onOpenChange: modal.remove, children: [
|
|
1435
|
+
/* @__PURE__ */ jsx19(DialogDescription, { className: "hidden", children: "Crypto Select Modal" }),
|
|
1436
|
+
/* @__PURE__ */ jsxs14(DialogContent, { showCloseButton: false, className: "gap-0 p-0", children: [
|
|
1437
|
+
/* @__PURE__ */ jsx19("div", { className: "flex flex-col gap-6 px-7 py-6", children: /* @__PURE__ */ jsxs14("div", { className: "flex items-center justify-between gap-4", children: [
|
|
1438
|
+
/* @__PURE__ */ jsx19("button", { className: "rounded-md hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ jsx19("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", fill: "none", children: /* @__PURE__ */ jsx19("path", { stroke: "#000", d: "m15 6.5-6 6 6 6" }) }) }),
|
|
1439
|
+
/* @__PURE__ */ jsx19(DialogTitle, { className: "text-primary text-2xl font-semibold", children: "Select a token" }),
|
|
1440
|
+
/* @__PURE__ */ jsx19("button", { className: "rounded-md p-1 hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ jsx19("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "17", fill: "none", children: /* @__PURE__ */ jsx19(
|
|
1441
|
+
"path",
|
|
1384
1442
|
{
|
|
1385
|
-
|
|
1386
|
-
|
|
1387
|
-
|
|
1388
|
-
|
|
1389
|
-
|
|
1390
|
-
|
|
1391
|
-
|
|
1392
|
-
|
|
1393
|
-
|
|
1394
|
-
|
|
1395
|
-
|
|
1396
|
-
),
|
|
1397
|
-
/* @__PURE__ */ jsx18("p", { className: "text-sm font-medium", children: nativeBalance.symbol })
|
|
1398
|
-
] }),
|
|
1399
|
-
/* @__PURE__ */ jsx18("p", { className: "text-sm font-medium", children: nativeBalance.formatted })
|
|
1400
|
-
]
|
|
1401
|
-
},
|
|
1402
|
-
nativeBalance.symbol
|
|
1403
|
-
),
|
|
1404
|
-
isLoading && /* @__PURE__ */ jsxs13(Fragment4, { children: [
|
|
1405
|
-
/* @__PURE__ */ jsx18("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
|
|
1406
|
-
/* @__PURE__ */ jsx18("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
|
|
1407
|
-
/* @__PURE__ */ jsx18("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
|
|
1408
|
-
] }),
|
|
1409
|
-
erc20Balances.map((coin) => {
|
|
1410
|
-
const Icon = getSymbolLogo(coin.symbol);
|
|
1411
|
-
return /* @__PURE__ */ jsxs13(
|
|
1443
|
+
fill: "#000",
|
|
1444
|
+
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"
|
|
1445
|
+
}
|
|
1446
|
+
) }) })
|
|
1447
|
+
] }) }),
|
|
1448
|
+
/* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-4 px-7 py-6", children: [
|
|
1449
|
+
/* @__PURE__ */ jsx19("h3", { className: "text-primary text-xl font-semibold", children: "Tokens with wallet balance" }),
|
|
1450
|
+
(error || nativeError) && /* @__PURE__ */ jsx19("p", { className: "text-center text-sm text-red-500", children: "Something wrong" }),
|
|
1451
|
+
/* @__PURE__ */ jsxs14("div", { className: "flex w-full flex-col gap-1", children: [
|
|
1452
|
+
isLoadingNative && /* @__PURE__ */ jsx19("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
|
|
1453
|
+
nativeBalance && /* @__PURE__ */ jsxs14(
|
|
1412
1454
|
"button",
|
|
1413
1455
|
{
|
|
1414
|
-
className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 hover:bg-gray-100
|
|
1415
|
-
onClick: () => handleSelect(
|
|
1456
|
+
className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 hover:bg-gray-100",
|
|
1457
|
+
onClick: () => handleSelect(nativeBalance),
|
|
1416
1458
|
children: [
|
|
1417
|
-
/* @__PURE__ */
|
|
1418
|
-
|
|
1419
|
-
|
|
1459
|
+
/* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2", children: [
|
|
1460
|
+
nativeBalance.logoURI && /* @__PURE__ */ jsx19(
|
|
1461
|
+
"img",
|
|
1462
|
+
{
|
|
1463
|
+
className: "h-8 w-8 shrink-0",
|
|
1464
|
+
src: nativeBalance.logoURI,
|
|
1465
|
+
alt: `${nativeBalance.symbol} logo`
|
|
1466
|
+
}
|
|
1467
|
+
),
|
|
1468
|
+
/* @__PURE__ */ jsx19("p", { className: "text-sm font-medium", children: nativeBalance.symbol })
|
|
1420
1469
|
] }),
|
|
1421
|
-
/* @__PURE__ */
|
|
1470
|
+
/* @__PURE__ */ jsx19("p", { className: "text-sm font-medium", children: nativeBalance.formatted })
|
|
1422
1471
|
]
|
|
1423
1472
|
},
|
|
1424
|
-
|
|
1425
|
-
)
|
|
1426
|
-
|
|
1473
|
+
nativeBalance.symbol
|
|
1474
|
+
),
|
|
1475
|
+
isLoading && /* @__PURE__ */ jsxs14(Fragment4, { children: [
|
|
1476
|
+
/* @__PURE__ */ jsx19("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
|
|
1477
|
+
/* @__PURE__ */ jsx19("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
|
|
1478
|
+
/* @__PURE__ */ jsx19("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
|
|
1479
|
+
] }),
|
|
1480
|
+
erc20Balances.map((coin) => {
|
|
1481
|
+
const Icon = getSymbolLogo(coin.symbol);
|
|
1482
|
+
return /* @__PURE__ */ jsxs14(
|
|
1483
|
+
"button",
|
|
1484
|
+
{
|
|
1485
|
+
className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50",
|
|
1486
|
+
onClick: () => handleSelect(coin),
|
|
1487
|
+
children: [
|
|
1488
|
+
/* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2", children: [
|
|
1489
|
+
Boolean(Icon) && Icon,
|
|
1490
|
+
/* @__PURE__ */ jsx19("p", { className: "text-sm font-medium", children: coin.symbol })
|
|
1491
|
+
] }),
|
|
1492
|
+
/* @__PURE__ */ jsx19("p", { className: "text-sm font-medium", children: coin.formatted })
|
|
1493
|
+
]
|
|
1494
|
+
},
|
|
1495
|
+
coin.symbol
|
|
1496
|
+
);
|
|
1497
|
+
})
|
|
1498
|
+
] })
|
|
1427
1499
|
] })
|
|
1428
1500
|
] })
|
|
1429
|
-
] })
|
|
1501
|
+
] });
|
|
1430
1502
|
});
|
|
1431
1503
|
CryptoSelectModal.displayName = "CryptoSelectModal";
|
|
1432
1504
|
|
|
1433
1505
|
// src/components/CryptoTab/Crypto/SelectCoinButton.tsx
|
|
1434
|
-
import { jsx as
|
|
1506
|
+
import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1435
1507
|
var SelectCoinButton = () => {
|
|
1436
1508
|
const openModal = () => {
|
|
1437
1509
|
NiceModal4.show(CryptoSelectModal);
|
|
1438
1510
|
};
|
|
1439
|
-
return /* @__PURE__ */
|
|
1440
|
-
/* @__PURE__ */
|
|
1441
|
-
/* @__PURE__ */
|
|
1442
|
-
/* @__PURE__ */
|
|
1443
|
-
/* @__PURE__ */
|
|
1511
|
+
return /* @__PURE__ */ jsxs15("button", { onClick: openModal, type: "button", className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
|
|
1512
|
+
/* @__PURE__ */ jsx20("div", { className: "bg-primary flex w-11 items-center justify-center", children: /* @__PURE__ */ jsx20("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white" }) }),
|
|
1513
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex w-full items-center justify-between px-3", children: [
|
|
1514
|
+
/* @__PURE__ */ jsx20("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx20("p", { className: "font-medium text-black/50", children: "Select a token" }) }),
|
|
1515
|
+
/* @__PURE__ */ jsx20("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ jsx20("path", { stroke: "#000", strokeLinecap: "round", d: "m6 12.43 4-4-4-4" }) })
|
|
1444
1516
|
] })
|
|
1445
1517
|
] });
|
|
1446
1518
|
};
|
|
1447
1519
|
|
|
1448
1520
|
// src/components/CryptoTab/Crypto/SelectedCoin.tsx
|
|
1449
|
-
import { jsx as
|
|
1521
|
+
import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1450
1522
|
var SelectedCoin = (props) => {
|
|
1451
1523
|
const { coin, balance, logoURI } = props;
|
|
1452
1524
|
const Icon = getSymbolLogo(coin);
|
|
1453
|
-
return /* @__PURE__ */
|
|
1454
|
-
/* @__PURE__ */
|
|
1455
|
-
/* @__PURE__ */
|
|
1456
|
-
/* @__PURE__ */
|
|
1525
|
+
return /* @__PURE__ */ jsxs16("div", { className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
|
|
1526
|
+
/* @__PURE__ */ jsx21("div", { className: "bg-primary flex w-11 items-center justify-center", children: /* @__PURE__ */ jsx21("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: /* @__PURE__ */ jsx21("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) }) }),
|
|
1527
|
+
/* @__PURE__ */ jsxs16("div", { className: "border-primary flex w-full items-center justify-between rounded-r-md border-1 !border-l-0 px-3", children: [
|
|
1528
|
+
/* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-1", children: [
|
|
1457
1529
|
Icon,
|
|
1458
|
-
!Icon && logoURI && /* @__PURE__ */
|
|
1459
|
-
/* @__PURE__ */
|
|
1460
|
-
/* @__PURE__ */
|
|
1530
|
+
!Icon && logoURI && /* @__PURE__ */ jsx21("img", { className: "mr-1 h-8 w-8 shrink-0", src: logoURI, alt: `${coin} logo` }),
|
|
1531
|
+
/* @__PURE__ */ jsx21("p", { className: "font-semibold", children: coin }),
|
|
1532
|
+
/* @__PURE__ */ jsx21("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx21("path", { d: "M6 12.4341L10 8.43408L6 4.43408", stroke: "black", strokeLinecap: "round" }) })
|
|
1461
1533
|
] }),
|
|
1462
|
-
/* @__PURE__ */
|
|
1534
|
+
/* @__PURE__ */ jsxs16("p", { className: "text-xs font-medium text-[#798B95]", children: [
|
|
1463
1535
|
"Wallet balance ",
|
|
1464
|
-
/* @__PURE__ */
|
|
1536
|
+
/* @__PURE__ */ jsx21("span", { className: "text-black", children: balance })
|
|
1465
1537
|
] })
|
|
1466
1538
|
] })
|
|
1467
1539
|
] });
|
|
1468
1540
|
};
|
|
1469
1541
|
|
|
1470
1542
|
// src/components/CryptoTab/Crypto/Crypto.tsx
|
|
1471
|
-
import { jsx as
|
|
1543
|
+
import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1472
1544
|
var Crypto = () => {
|
|
1473
1545
|
const { address } = useAccount3();
|
|
1474
1546
|
const { selectedPaymentMethod } = useSpreePaymentMethod();
|
|
@@ -1492,14 +1564,14 @@ var Crypto = () => {
|
|
|
1492
1564
|
useEffect4(() => {
|
|
1493
1565
|
register(handlePay);
|
|
1494
1566
|
}, [register, handlePay]);
|
|
1495
|
-
return /* @__PURE__ */
|
|
1496
|
-
/* @__PURE__ */
|
|
1497
|
-
/* @__PURE__ */
|
|
1498
|
-
/* @__PURE__ */
|
|
1567
|
+
return /* @__PURE__ */ jsxs17("div", { className: "flex flex-col items-baseline gap-4", children: [
|
|
1568
|
+
/* @__PURE__ */ jsxs17("div", { className: "flex w-full items-center justify-between gap-4", children: [
|
|
1569
|
+
/* @__PURE__ */ jsx22("h3", { className: "text-primary text-xl leading-[1.7] font-semibold", children: "Pay with Crypto" }),
|
|
1570
|
+
/* @__PURE__ */ jsx22(ConnectButton, {})
|
|
1499
1571
|
] }),
|
|
1500
|
-
!isWalletConnected && /* @__PURE__ */
|
|
1501
|
-
isWalletConnected && /* @__PURE__ */
|
|
1502
|
-
selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */
|
|
1572
|
+
!isWalletConnected && /* @__PURE__ */ jsx22(Logos, {}),
|
|
1573
|
+
isWalletConnected && /* @__PURE__ */ jsxs17("div", { className: "flex w-full flex-col gap-1", children: [
|
|
1574
|
+
selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */ jsx22(
|
|
1503
1575
|
SelectedCoin,
|
|
1504
1576
|
{
|
|
1505
1577
|
coin: selectedPaymentMethod.method.symbol,
|
|
@@ -1507,13 +1579,13 @@ var Crypto = () => {
|
|
|
1507
1579
|
logoURI: selectedPaymentMethod.method.logoURI
|
|
1508
1580
|
}
|
|
1509
1581
|
),
|
|
1510
|
-
/* @__PURE__ */
|
|
1582
|
+
/* @__PURE__ */ jsx22(SelectCoinButton, {})
|
|
1511
1583
|
] })
|
|
1512
1584
|
] });
|
|
1513
1585
|
};
|
|
1514
1586
|
|
|
1515
1587
|
// src/components/CryptoTab/Crypto/CryptoWrapper.tsx
|
|
1516
|
-
import { jsx as
|
|
1588
|
+
import { jsx as jsx23 } from "react/jsx-runtime";
|
|
1517
1589
|
var queryClient = new QueryClient();
|
|
1518
1590
|
var connectors = connectorsForWallets(
|
|
1519
1591
|
[
|
|
@@ -1531,22 +1603,22 @@ var config = createConfig({
|
|
|
1531
1603
|
ssr: true
|
|
1532
1604
|
});
|
|
1533
1605
|
var CryptoWrapper = () => {
|
|
1534
|
-
return /* @__PURE__ */
|
|
1606
|
+
return /* @__PURE__ */ jsx23(WagmiProvider, { config, children: /* @__PURE__ */ jsx23(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx23(RainbowKitProvider, { children: /* @__PURE__ */ jsx23(NiceModal5.Provider, { children: /* @__PURE__ */ jsx23(Crypto, {}) }) }) }) });
|
|
1535
1607
|
};
|
|
1536
1608
|
|
|
1537
1609
|
// src/components/CryptoTab/CryptoTab.tsx
|
|
1538
|
-
import { jsx as
|
|
1610
|
+
import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
1539
1611
|
var CryptoTab = () => {
|
|
1540
|
-
return /* @__PURE__ */
|
|
1541
|
-
/* @__PURE__ */
|
|
1542
|
-
/* @__PURE__ */
|
|
1612
|
+
return /* @__PURE__ */ jsxs18("div", { children: [
|
|
1613
|
+
/* @__PURE__ */ jsx24("div", { className: "border-b-1 border-black/7 px-7 py-6", children: /* @__PURE__ */ jsx24(CryptoWrapper, {}) }),
|
|
1614
|
+
/* @__PURE__ */ jsx24("div", { className: "px-7 py-6", children: /* @__PURE__ */ jsx24(PointsSwitch, { disabled: true }) })
|
|
1543
1615
|
] });
|
|
1544
1616
|
};
|
|
1545
1617
|
|
|
1546
1618
|
// src/components/TabButtons.tsx
|
|
1547
|
-
import { jsx as
|
|
1619
|
+
import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
1548
1620
|
var TabButton = ({ isActive, children, onClick }) => {
|
|
1549
|
-
return /* @__PURE__ */
|
|
1621
|
+
return /* @__PURE__ */ jsx25(
|
|
1550
1622
|
"button",
|
|
1551
1623
|
{
|
|
1552
1624
|
onClick,
|
|
@@ -1566,62 +1638,62 @@ var TabButtons = (props) => {
|
|
|
1566
1638
|
onChange({ type, method: null });
|
|
1567
1639
|
}
|
|
1568
1640
|
};
|
|
1569
|
-
return /* @__PURE__ */
|
|
1570
|
-
/* @__PURE__ */
|
|
1571
|
-
/* @__PURE__ */
|
|
1641
|
+
return /* @__PURE__ */ jsxs19("div", { className: "flex gap-2", children: [
|
|
1642
|
+
/* @__PURE__ */ jsxs19(TabButton, { onClick: handleChange("CREDIT_CARD" /* CREDIT_CARD */), isActive: value === "CREDIT_CARD" /* CREDIT_CARD */, children: [
|
|
1643
|
+
/* @__PURE__ */ jsx25("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", children: /* @__PURE__ */ jsx25(
|
|
1572
1644
|
"path",
|
|
1573
1645
|
{
|
|
1574
1646
|
fill: "currentColor",
|
|
1575
1647
|
d: "M22 6v12c0 .55-.2 1.02-.59 1.41-.39.4-.86.59-1.41.59H4c-.55 0-1.02-.2-1.41-.59-.4-.39-.59-.86-.59-1.41V6c0-.55.2-1.02.59-1.41C2.98 4.19 3.45 4 4 4h16c.55 0 1.02.2 1.41.59.4.39.59.86.59 1.41ZM4 8h16V6H4v2Zm0 4v6h16v-6H4Z"
|
|
1576
1648
|
}
|
|
1577
1649
|
) }),
|
|
1578
|
-
/* @__PURE__ */
|
|
1650
|
+
/* @__PURE__ */ jsx25("p", { className: "text-sm font-medium", children: "Card" })
|
|
1579
1651
|
] }),
|
|
1580
|
-
/* @__PURE__ */
|
|
1581
|
-
/* @__PURE__ */
|
|
1582
|
-
/* @__PURE__ */
|
|
1652
|
+
/* @__PURE__ */ jsxs19(TabButton, { onClick: handleChange("CRYPTO" /* CRYPTO */), isActive: value === "CRYPTO" /* CRYPTO */, children: [
|
|
1653
|
+
/* @__PURE__ */ jsxs19("svg", { className: "my-1", xmlns: "http://www.w3.org/2000/svg", width: "30", height: "16", fill: "none", children: [
|
|
1654
|
+
/* @__PURE__ */ jsx25(
|
|
1583
1655
|
"path",
|
|
1584
1656
|
{
|
|
1585
1657
|
fill: "currentColor",
|
|
1586
1658
|
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"
|
|
1587
1659
|
}
|
|
1588
1660
|
),
|
|
1589
|
-
/* @__PURE__ */
|
|
1661
|
+
/* @__PURE__ */ jsx25(
|
|
1590
1662
|
"path",
|
|
1591
1663
|
{
|
|
1592
1664
|
fill: "currentColor",
|
|
1593
1665
|
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"
|
|
1594
1666
|
}
|
|
1595
1667
|
),
|
|
1596
|
-
/* @__PURE__ */
|
|
1668
|
+
/* @__PURE__ */ jsx25("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "2" })
|
|
1597
1669
|
] }),
|
|
1598
|
-
/* @__PURE__ */
|
|
1670
|
+
/* @__PURE__ */ jsx25("p", { className: "text-sm font-medium", children: "Crypto" })
|
|
1599
1671
|
] })
|
|
1600
1672
|
] });
|
|
1601
1673
|
};
|
|
1602
1674
|
|
|
1603
1675
|
// src/components/Tabs.tsx
|
|
1604
|
-
import { jsx as
|
|
1676
|
+
import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
1605
1677
|
var Tabs = () => {
|
|
1606
1678
|
const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
|
|
1607
|
-
return /* @__PURE__ */
|
|
1608
|
-
/* @__PURE__ */
|
|
1609
|
-
/* @__PURE__ */
|
|
1610
|
-
/* @__PURE__ */
|
|
1679
|
+
return /* @__PURE__ */ jsxs20("div", { className: "mb-4 rounded-2xl border border-black/25 bg-white", children: [
|
|
1680
|
+
/* @__PURE__ */ jsxs20("div", { className: "flex w-full flex-col gap-4 border-b-1 border-black/7 px-7 py-6", children: [
|
|
1681
|
+
/* @__PURE__ */ jsx26("h2", { className: "text-primary text-2xl font-semibold", children: "Choose a Payment Method" }),
|
|
1682
|
+
/* @__PURE__ */ jsx26(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
|
|
1611
1683
|
] }),
|
|
1612
|
-
selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */
|
|
1613
|
-
selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */
|
|
1684
|
+
selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ jsx26(CreditCardTab, {}),
|
|
1685
|
+
selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ jsx26(CryptoTab, {})
|
|
1614
1686
|
] });
|
|
1615
1687
|
};
|
|
1616
1688
|
|
|
1617
1689
|
// src/SpreePayContent.tsx
|
|
1618
|
-
import { jsx as
|
|
1690
|
+
import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
1619
1691
|
var SpreePayContent = (props) => {
|
|
1620
|
-
const { amount, onProcess } = props;
|
|
1621
|
-
return /* @__PURE__ */
|
|
1622
|
-
/* @__PURE__ */
|
|
1623
|
-
/* @__PURE__ */
|
|
1624
|
-
/* @__PURE__ */
|
|
1692
|
+
const { amount, onProcess, isProcessing } = props;
|
|
1693
|
+
return /* @__PURE__ */ jsxs21("div", { className: "w-full", children: [
|
|
1694
|
+
/* @__PURE__ */ jsx27(Tabs, {}),
|
|
1695
|
+
/* @__PURE__ */ jsx27(CheckoutButton, { isProcessing, onCheckout: onProcess, amount }),
|
|
1696
|
+
/* @__PURE__ */ jsx27(SpreeLegal, {})
|
|
1625
1697
|
] });
|
|
1626
1698
|
};
|
|
1627
1699
|
|
|
@@ -1693,7 +1765,7 @@ function useKeycloakSSO(config2) {
|
|
|
1693
1765
|
}
|
|
1694
1766
|
|
|
1695
1767
|
// src/SpreePay.tsx
|
|
1696
|
-
import { jsx as
|
|
1768
|
+
import { jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
1697
1769
|
var envConfig = {
|
|
1698
1770
|
dev: {
|
|
1699
1771
|
bookit: {
|
|
@@ -1760,23 +1832,17 @@ var SpreePay = ({ className, ...rest }) => {
|
|
|
1760
1832
|
}
|
|
1761
1833
|
}, [env.accessToken, environment, tenantId, accessToken]);
|
|
1762
1834
|
if (isChecking) {
|
|
1763
|
-
return /* @__PURE__ */
|
|
1764
|
-
/* @__PURE__ */ jsx27("div", { className: "sl-spreepay__portal" }),
|
|
1765
|
-
/* @__PURE__ */ jsx27("p", { className: "w-full text-center text-sm", children: "Loading..." })
|
|
1766
|
-
] });
|
|
1835
|
+
return /* @__PURE__ */ jsx28("div", { ref: rootRef, className: cn("sl-spreepay", className), children: /* @__PURE__ */ jsx28("p", { className: "w-full text-center text-sm", children: "Loading..." }) });
|
|
1767
1836
|
}
|
|
1768
1837
|
if (error) {
|
|
1769
|
-
return /* @__PURE__ */
|
|
1770
|
-
|
|
1771
|
-
|
|
1772
|
-
|
|
1773
|
-
error.message
|
|
1774
|
-
] })
|
|
1775
|
-
] });
|
|
1838
|
+
return /* @__PURE__ */ jsx28("div", { ref: rootRef, className: cn("sl-spreepay", className), children: /* @__PURE__ */ jsxs22("p", { className: "w-full text-center text-sm", children: [
|
|
1839
|
+
"Error: ",
|
|
1840
|
+
error.message
|
|
1841
|
+
] }) });
|
|
1776
1842
|
}
|
|
1777
|
-
return /* @__PURE__ */
|
|
1778
|
-
/* @__PURE__ */
|
|
1779
|
-
/* @__PURE__ */
|
|
1843
|
+
return /* @__PURE__ */ jsxs22("div", { ref: rootRef, className: cn("sl-spreepay", className), children: [
|
|
1844
|
+
/* @__PURE__ */ jsx28("div", { className: "sl-spreepay__portal" }),
|
|
1845
|
+
/* @__PURE__ */ jsx28(
|
|
1780
1846
|
SWRConfig,
|
|
1781
1847
|
{
|
|
1782
1848
|
value: {
|
|
@@ -1785,7 +1851,7 @@ var SpreePay = ({ className, ...rest }) => {
|
|
|
1785
1851
|
revalidateIfStale: false,
|
|
1786
1852
|
revalidateOnReconnect: false
|
|
1787
1853
|
},
|
|
1788
|
-
children: /* @__PURE__ */
|
|
1854
|
+
children: /* @__PURE__ */ jsx28(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ jsx28(NiceModal6.Provider, { children: /* @__PURE__ */ jsx28(SpreePayContent, { ...rest }) }) })
|
|
1789
1855
|
}
|
|
1790
1856
|
)
|
|
1791
1857
|
] });
|