@superlogic/spree-pay 0.1.7 → 0.1.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -2
- package/build/index.cjs +366 -297
- package/build/index.css +75 -21
- package/build/index.d.cts +4 -2
- package/build/index.d.ts +4 -2
- package/build/index.js +366 -297
- 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
|
|
|
@@ -469,12 +538,15 @@ var cardPayment = async ({ card, hash, redirect3dsURI }) => {
|
|
|
469
538
|
if (paymentIntent) {
|
|
470
539
|
const { data: validateData } = await SlapiPaymentService.validate3DS({ paymentId: paymentResData.id });
|
|
471
540
|
return {
|
|
472
|
-
status: validateData.status
|
|
541
|
+
status: validateData.status,
|
|
542
|
+
txHash: null,
|
|
543
|
+
paymentId: paymentResData.id
|
|
473
544
|
};
|
|
474
545
|
}
|
|
475
546
|
}
|
|
476
547
|
return {
|
|
477
548
|
status: paymentResData.status,
|
|
549
|
+
txHash: null,
|
|
478
550
|
paymentId: paymentResData.id
|
|
479
551
|
};
|
|
480
552
|
};
|
|
@@ -484,9 +556,9 @@ import { useId } from "react";
|
|
|
484
556
|
|
|
485
557
|
// src/ui/label.tsx
|
|
486
558
|
import * as LabelPrimitive from "@radix-ui/react-label";
|
|
487
|
-
import { jsx as
|
|
559
|
+
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
488
560
|
function Label({ className, ...props }) {
|
|
489
|
-
return /* @__PURE__ */
|
|
561
|
+
return /* @__PURE__ */ jsx7(
|
|
490
562
|
LabelPrimitive.Root,
|
|
491
563
|
{
|
|
492
564
|
"data-slot": "label",
|
|
@@ -500,23 +572,23 @@ function Label({ className, ...props }) {
|
|
|
500
572
|
}
|
|
501
573
|
|
|
502
574
|
// src/ui/switch.tsx
|
|
503
|
-
import * as
|
|
504
|
-
import { jsx as
|
|
575
|
+
import * as SwitchPrimitive from "@radix-ui/react-switch";
|
|
576
|
+
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
505
577
|
function Switch({ className, ...props }) {
|
|
506
|
-
return /* @__PURE__ */
|
|
507
|
-
|
|
578
|
+
return /* @__PURE__ */ jsx8(
|
|
579
|
+
SwitchPrimitive.Root,
|
|
508
580
|
{
|
|
509
581
|
"data-slot": "switch",
|
|
510
582
|
className: cn(
|
|
511
|
-
"
|
|
583
|
+
"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
584
|
className
|
|
513
585
|
),
|
|
514
586
|
...props,
|
|
515
|
-
children: /* @__PURE__ */
|
|
516
|
-
|
|
587
|
+
children: /* @__PURE__ */ jsx8(
|
|
588
|
+
SwitchPrimitive.Thumb,
|
|
517
589
|
{
|
|
518
590
|
"data-slot": "switch-thumb",
|
|
519
|
-
className: "bg-background pointer-events-none block size-4 rounded-full
|
|
591
|
+
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
592
|
}
|
|
521
593
|
)
|
|
522
594
|
}
|
|
@@ -524,23 +596,23 @@ function Switch({ className, ...props }) {
|
|
|
524
596
|
}
|
|
525
597
|
|
|
526
598
|
// src/components/common/PointsSwitch.tsx
|
|
527
|
-
import { jsx as
|
|
599
|
+
import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
528
600
|
var PointsSwitch = (props) => {
|
|
529
601
|
const { disabled = false, value, onChange } = props;
|
|
530
602
|
const { balance } = useSlapiBalance();
|
|
531
603
|
const id = useId();
|
|
532
|
-
return /* @__PURE__ */
|
|
533
|
-
/* @__PURE__ */
|
|
534
|
-
/* @__PURE__ */
|
|
535
|
-
/* @__PURE__ */
|
|
604
|
+
return /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between gap-3", children: [
|
|
605
|
+
/* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-3", children: [
|
|
606
|
+
/* @__PURE__ */ jsx9(Switch, { checked: value, onCheckedChange: onChange, disabled, id }),
|
|
607
|
+
/* @__PURE__ */ jsxs6(Label, { className: "items-baseline text-xl leading-[1.3] font-semibold text-black", htmlFor: id, children: [
|
|
536
608
|
"Use Points ",
|
|
537
|
-
/* @__PURE__ */
|
|
609
|
+
/* @__PURE__ */ jsx9("span", { className: "text-xs font-medium", children: "Optional" })
|
|
538
610
|
] })
|
|
539
611
|
] }),
|
|
540
|
-
balance?.availablePoints ? /* @__PURE__ */
|
|
612
|
+
balance?.availablePoints ? /* @__PURE__ */ jsxs6("p", { className: "text-sm font-medium text-black", children: [
|
|
541
613
|
formatPoints(balance.availablePoints),
|
|
542
614
|
" ",
|
|
543
|
-
/* @__PURE__ */
|
|
615
|
+
/* @__PURE__ */ jsx9("span", { className: "text-black/50", children: formatUSD(balance.availablePoints / pointsConverionRate) })
|
|
544
616
|
] }) : null
|
|
545
617
|
] });
|
|
546
618
|
};
|
|
@@ -569,22 +641,22 @@ var useConfig = () => {
|
|
|
569
641
|
};
|
|
570
642
|
|
|
571
643
|
// src/components/CreditCardTab/CreditCard/CardsList.tsx
|
|
572
|
-
import { jsx as
|
|
644
|
+
import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
573
645
|
var CardListItem = ({ card, isSelected, onSelect }) => {
|
|
574
646
|
const handleSelect = () => {
|
|
575
647
|
onSelect(card);
|
|
576
648
|
};
|
|
577
|
-
return /* @__PURE__ */
|
|
578
|
-
/* @__PURE__ */
|
|
649
|
+
return /* @__PURE__ */ jsxs7("button", { type: "button", onClick: handleSelect, className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
|
|
650
|
+
/* @__PURE__ */ jsx10(
|
|
579
651
|
"div",
|
|
580
652
|
{
|
|
581
653
|
className: cn("flex w-11 items-center justify-center bg-black/10", {
|
|
582
654
|
"bg-primary": isSelected
|
|
583
655
|
}),
|
|
584
|
-
children: /* @__PURE__ */
|
|
656
|
+
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
657
|
}
|
|
586
658
|
),
|
|
587
|
-
/* @__PURE__ */
|
|
659
|
+
/* @__PURE__ */ jsxs7(
|
|
588
660
|
"div",
|
|
589
661
|
{
|
|
590
662
|
className: cn(
|
|
@@ -594,15 +666,15 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
|
|
|
594
666
|
}
|
|
595
667
|
),
|
|
596
668
|
children: [
|
|
597
|
-
/* @__PURE__ */
|
|
598
|
-
/* @__PURE__ */
|
|
599
|
-
/* @__PURE__ */
|
|
669
|
+
/* @__PURE__ */ jsx10("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx10("p", { className: "text-sm font-medium text-black", children: card.schema }) }),
|
|
670
|
+
/* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
|
|
671
|
+
/* @__PURE__ */ jsxs7("p", { className: "text-sm font-medium text-[#798B95]", children: [
|
|
600
672
|
"Ending in ",
|
|
601
|
-
/* @__PURE__ */
|
|
673
|
+
/* @__PURE__ */ jsx10("span", { className: "text-black", children: card.lastFourNumbers })
|
|
602
674
|
] }),
|
|
603
|
-
/* @__PURE__ */
|
|
604
|
-
/* @__PURE__ */
|
|
605
|
-
/* @__PURE__ */
|
|
675
|
+
/* @__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: [
|
|
676
|
+
/* @__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" }) }),
|
|
677
|
+
/* @__PURE__ */ jsx10("g", { mask: "url(#mask0_188_5407)", children: /* @__PURE__ */ jsx10(
|
|
606
678
|
"path",
|
|
607
679
|
{
|
|
608
680
|
fill: "#000",
|
|
@@ -620,14 +692,14 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
|
|
|
620
692
|
var CardsList = ({ selectedCard, setCard }) => {
|
|
621
693
|
const { cards, cardsIsLoading } = useCards();
|
|
622
694
|
if (cardsIsLoading) {
|
|
623
|
-
return /* @__PURE__ */
|
|
624
|
-
/* @__PURE__ */
|
|
625
|
-
/* @__PURE__ */
|
|
626
|
-
/* @__PURE__ */
|
|
695
|
+
return /* @__PURE__ */ jsxs7("div", { className: "flex w-full flex-col gap-1", children: [
|
|
696
|
+
/* @__PURE__ */ jsx10("div", { className: "bg-primary/8 h-11 animate-pulse rounded-md" }),
|
|
697
|
+
/* @__PURE__ */ jsx10("div", { className: "bg-primary/8 h-11 animate-pulse rounded-md" }),
|
|
698
|
+
/* @__PURE__ */ jsx10("div", { className: "bg-primary/8 h-11 animate-pulse rounded-md" })
|
|
627
699
|
] });
|
|
628
700
|
}
|
|
629
701
|
if (cards.length === 0) return null;
|
|
630
|
-
return /* @__PURE__ */
|
|
702
|
+
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
703
|
};
|
|
632
704
|
|
|
633
705
|
// src/components/CreditCardTab/CreditCard/CreditCardForm.tsx
|
|
@@ -637,9 +709,9 @@ import { CardCvcElement, CardExpiryElement, CardNumberElement, useElements, useS
|
|
|
637
709
|
// src/ui/button.tsx
|
|
638
710
|
import { Slot } from "@radix-ui/react-slot";
|
|
639
711
|
import { cva } from "class-variance-authority";
|
|
640
|
-
import { jsx as
|
|
712
|
+
import { jsx as jsx11 } from "react/jsx-runtime";
|
|
641
713
|
var buttonVariants = cva(
|
|
642
|
-
"inline-flex
|
|
714
|
+
"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
715
|
{
|
|
644
716
|
variants: {
|
|
645
717
|
variant: {
|
|
@@ -672,29 +744,29 @@ function Button({
|
|
|
672
744
|
...props
|
|
673
745
|
}) {
|
|
674
746
|
const Comp = asChild ? Slot : "button";
|
|
675
|
-
return /* @__PURE__ */
|
|
747
|
+
return /* @__PURE__ */ jsx11(Comp, { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ...props });
|
|
676
748
|
}
|
|
677
749
|
|
|
678
750
|
// src/ui/checkbox.tsx
|
|
679
751
|
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
|
|
680
752
|
import { CheckIcon } from "lucide-react";
|
|
681
|
-
import { jsx as
|
|
753
|
+
import { jsx as jsx12 } from "react/jsx-runtime";
|
|
682
754
|
function Checkbox({ className, ...props }) {
|
|
683
|
-
return /* @__PURE__ */
|
|
755
|
+
return /* @__PURE__ */ jsx12(
|
|
684
756
|
CheckboxPrimitive.Root,
|
|
685
757
|
{
|
|
686
758
|
"data-slot": "checkbox",
|
|
687
759
|
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-
|
|
760
|
+
"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
761
|
className
|
|
690
762
|
),
|
|
691
763
|
...props,
|
|
692
|
-
children: /* @__PURE__ */
|
|
764
|
+
children: /* @__PURE__ */ jsx12(
|
|
693
765
|
CheckboxPrimitive.Indicator,
|
|
694
766
|
{
|
|
695
767
|
"data-slot": "checkbox-indicator",
|
|
696
768
|
className: "flex items-center justify-center text-current transition-none",
|
|
697
|
-
children: /* @__PURE__ */
|
|
769
|
+
children: /* @__PURE__ */ jsx12(CheckIcon, { className: "size-3.5 text-white" })
|
|
698
770
|
}
|
|
699
771
|
)
|
|
700
772
|
}
|
|
@@ -702,7 +774,7 @@ function Checkbox({ className, ...props }) {
|
|
|
702
774
|
}
|
|
703
775
|
|
|
704
776
|
// src/components/CreditCardTab/CreditCard/CreditCardForm.tsx
|
|
705
|
-
import { Fragment, jsx as
|
|
777
|
+
import { Fragment, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
706
778
|
var style = {
|
|
707
779
|
base: {
|
|
708
780
|
fontSize: "16px",
|
|
@@ -760,9 +832,9 @@ var CreditCardForm = ({ cancel, saveCard }) => {
|
|
|
760
832
|
setCardError("An error occurred while processing your card. Please try again.");
|
|
761
833
|
}
|
|
762
834
|
};
|
|
763
|
-
return /* @__PURE__ */
|
|
764
|
-
/* @__PURE__ */
|
|
765
|
-
/* @__PURE__ */
|
|
835
|
+
return /* @__PURE__ */ jsxs8(Fragment, { children: [
|
|
836
|
+
/* @__PURE__ */ jsxs8("div", { className: "flex w-full flex-col gap-1", children: [
|
|
837
|
+
/* @__PURE__ */ jsx13(
|
|
766
838
|
CardNumberElement,
|
|
767
839
|
{
|
|
768
840
|
options: {
|
|
@@ -772,8 +844,8 @@ var CreditCardForm = ({ cancel, saveCard }) => {
|
|
|
772
844
|
}
|
|
773
845
|
}
|
|
774
846
|
),
|
|
775
|
-
/* @__PURE__ */
|
|
776
|
-
/* @__PURE__ */
|
|
847
|
+
/* @__PURE__ */ jsxs8("div", { className: "flex w-full gap-1", children: [
|
|
848
|
+
/* @__PURE__ */ jsx13(
|
|
777
849
|
CardExpiryElement,
|
|
778
850
|
{
|
|
779
851
|
options: {
|
|
@@ -783,7 +855,7 @@ var CreditCardForm = ({ cancel, saveCard }) => {
|
|
|
783
855
|
}
|
|
784
856
|
}
|
|
785
857
|
),
|
|
786
|
-
/* @__PURE__ */
|
|
858
|
+
/* @__PURE__ */ jsx13(
|
|
787
859
|
CardCvcElement,
|
|
788
860
|
{
|
|
789
861
|
options: {
|
|
@@ -794,24 +866,24 @@ var CreditCardForm = ({ cancel, saveCard }) => {
|
|
|
794
866
|
}
|
|
795
867
|
)
|
|
796
868
|
] }),
|
|
797
|
-
cardError && /* @__PURE__ */
|
|
869
|
+
cardError && /* @__PURE__ */ jsx13("p", { className: "text-destructive mt-1 text-sm", children: cardError })
|
|
798
870
|
] }),
|
|
799
|
-
/* @__PURE__ */
|
|
800
|
-
/* @__PURE__ */
|
|
801
|
-
/* @__PURE__ */
|
|
871
|
+
/* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
|
|
872
|
+
/* @__PURE__ */ jsx13(Checkbox, { disabled: true, checked: true, id: "saveCard" }),
|
|
873
|
+
/* @__PURE__ */ jsx13(Label, { className: "text-sm font-medium", htmlFor: "saveCard", children: "Save card for future purchases" })
|
|
802
874
|
] }),
|
|
803
|
-
/* @__PURE__ */
|
|
804
|
-
/* @__PURE__ */
|
|
805
|
-
/* @__PURE__ */
|
|
875
|
+
/* @__PURE__ */ jsxs8("div", { className: "flex w-full justify-end gap-2", children: [
|
|
876
|
+
/* @__PURE__ */ jsx13(Button, { variant: "secondary", onClick: cancel, children: "Cancel" }),
|
|
877
|
+
/* @__PURE__ */ jsx13(Button, { onClick: handleSaveCard, children: "Add Card" })
|
|
806
878
|
] })
|
|
807
879
|
] });
|
|
808
880
|
};
|
|
809
881
|
|
|
810
882
|
// src/components/CreditCardTab/CreditCard/CreditCard.tsx
|
|
811
|
-
import { Fragment as Fragment2, jsx as
|
|
883
|
+
import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
812
884
|
var SripeWrapper = (props) => {
|
|
813
885
|
const stripePromise = useMemo(() => loadStripe(props.publicKey), [props.publicKey]);
|
|
814
|
-
return /* @__PURE__ */
|
|
886
|
+
return /* @__PURE__ */ jsx14(Elements, { stripe: stripePromise, children: /* @__PURE__ */ jsx14(CreditCardForm, { cancel: props.onCancel, saveCard: props.saveNewCard }) });
|
|
815
887
|
};
|
|
816
888
|
var CreditCard = () => {
|
|
817
889
|
const [showForm, setShowForm] = useState3(false);
|
|
@@ -829,28 +901,28 @@ var CreditCard = () => {
|
|
|
829
901
|
const handleCancel = () => {
|
|
830
902
|
setShowForm(false);
|
|
831
903
|
};
|
|
832
|
-
return /* @__PURE__ */
|
|
833
|
-
/* @__PURE__ */
|
|
834
|
-
!showForm && /* @__PURE__ */
|
|
835
|
-
/* @__PURE__ */
|
|
904
|
+
return /* @__PURE__ */ jsxs9("div", { className: "flex flex-col items-baseline gap-4", children: [
|
|
905
|
+
/* @__PURE__ */ jsx14("h3", { className: "text-primary text-xl leading-[34px] font-semibold", children: "Your Credit Cards" }),
|
|
906
|
+
!showForm && /* @__PURE__ */ jsxs9(Fragment2, { children: [
|
|
907
|
+
/* @__PURE__ */ jsx14(
|
|
836
908
|
CardsList,
|
|
837
909
|
{
|
|
838
910
|
selectedCard: selectedPaymentMethod?.type === "CREDIT_CARD" /* CREDIT_CARD */ ? selectedPaymentMethod.method : null,
|
|
839
911
|
setCard
|
|
840
912
|
}
|
|
841
913
|
),
|
|
842
|
-
config2?.stripePublicKey && /* @__PURE__ */
|
|
914
|
+
config2?.stripePublicKey && /* @__PURE__ */ jsx14("button", { onClick: () => setShowForm(true), className: "text-sm font-medium text-black hover:underline", children: "Add new card" })
|
|
843
915
|
] }),
|
|
844
|
-
config2?.stripePublicKey && showForm && /* @__PURE__ */
|
|
916
|
+
config2?.stripePublicKey && showForm && /* @__PURE__ */ jsx14(SripeWrapper, { onCancel: handleCancel, saveNewCard, publicKey: config2.stripePublicKey })
|
|
845
917
|
] });
|
|
846
918
|
};
|
|
847
919
|
|
|
848
920
|
// src/components/CreditCardTab/CreditCardTab.tsx
|
|
849
|
-
import { jsx as
|
|
921
|
+
import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
850
922
|
var PointsSelector = ({ isSelected, onSelect, children }) => {
|
|
851
923
|
return (
|
|
852
924
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
|
|
853
|
-
/* @__PURE__ */
|
|
925
|
+
/* @__PURE__ */ jsxs10(
|
|
854
926
|
"div",
|
|
855
927
|
{
|
|
856
928
|
onClick: onSelect,
|
|
@@ -858,19 +930,19 @@ var PointsSelector = ({ isSelected, onSelect, children }) => {
|
|
|
858
930
|
"border-primary": isSelected
|
|
859
931
|
}),
|
|
860
932
|
children: [
|
|
861
|
-
/* @__PURE__ */
|
|
862
|
-
/* @__PURE__ */
|
|
933
|
+
/* @__PURE__ */ jsxs10("div", { className: cn("flex h-11 w-full", { "bg-black/4": isSelected }), children: [
|
|
934
|
+
/* @__PURE__ */ jsx15(
|
|
863
935
|
"div",
|
|
864
936
|
{
|
|
865
937
|
className: cn("flex w-11 items-center justify-center bg-black/10", {
|
|
866
938
|
"bg-primary": isSelected
|
|
867
939
|
}),
|
|
868
|
-
children: /* @__PURE__ */
|
|
940
|
+
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
941
|
}
|
|
870
942
|
),
|
|
871
|
-
/* @__PURE__ */
|
|
943
|
+
/* @__PURE__ */ jsx15("div", { className: cn("flex w-full items-center justify-between gap-4 px-3"), children })
|
|
872
944
|
] }),
|
|
873
|
-
isSelected && /* @__PURE__ */
|
|
945
|
+
isSelected && /* @__PURE__ */ jsx15("div", { className: "px-4 pt-6 pb-2", children: /* @__PURE__ */ jsx15("p", { children: "Card" }) })
|
|
874
946
|
]
|
|
875
947
|
}
|
|
876
948
|
)
|
|
@@ -907,28 +979,28 @@ var CreditCardTab = () => {
|
|
|
907
979
|
useEffect2(() => {
|
|
908
980
|
register(handlePay);
|
|
909
981
|
}, [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__ */
|
|
982
|
+
return /* @__PURE__ */ jsxs10("div", { children: [
|
|
983
|
+
/* @__PURE__ */ jsx15("div", { className: "border-b-1 border-black/7 px-7 py-6", children: /* @__PURE__ */ jsx15(CreditCard, {}) }),
|
|
984
|
+
/* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-6 px-7 py-6", children: [
|
|
985
|
+
/* @__PURE__ */ jsx15(PointsSwitch, { disabled: true, value: usePoints, onChange: setUsePoints }),
|
|
986
|
+
usePoints && /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-1", children: [
|
|
987
|
+
/* @__PURE__ */ jsxs10(PointsSelector, { onSelect: () => setSelectedPointsType("slapi"), isSelected: selectedPointsType === "slapi", children: [
|
|
988
|
+
/* @__PURE__ */ jsx15("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx15("p", { className: "text-sm font-medium text-black", children: "from [Brand] Balance" }) }),
|
|
989
|
+
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" }),
|
|
990
|
+
balance?.availablePoints ? /* @__PURE__ */ jsxs10("p", { className: "text-sm font-medium text-black", children: [
|
|
919
991
|
formatPoints(balance.availablePoints),
|
|
920
992
|
" ",
|
|
921
|
-
/* @__PURE__ */
|
|
993
|
+
/* @__PURE__ */ jsx15("span", { className: "text-black/50", children: formatUSD(balance.availablePoints / pointsConverionRate) })
|
|
922
994
|
] }) : null
|
|
923
995
|
] }),
|
|
924
|
-
/* @__PURE__ */
|
|
996
|
+
/* @__PURE__ */ jsxs10(
|
|
925
997
|
PointsSelector,
|
|
926
998
|
{
|
|
927
999
|
onSelect: () => setSelectedPointsType("wallet"),
|
|
928
1000
|
isSelected: selectedPointsType === "wallet",
|
|
929
1001
|
children: [
|
|
930
|
-
/* @__PURE__ */
|
|
931
|
-
/* @__PURE__ */
|
|
1002
|
+
/* @__PURE__ */ jsx15("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx15("p", { className: "text-sm font-medium text-black", children: "from Crypto Wallet" }) }),
|
|
1003
|
+
/* @__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
1004
|
]
|
|
933
1005
|
}
|
|
934
1006
|
)
|
|
@@ -1111,13 +1183,13 @@ var useCryptoPayment = () => {
|
|
|
1111
1183
|
|
|
1112
1184
|
// src/components/CryptoTab/Crypto/ConnectButton.tsx
|
|
1113
1185
|
import { ConnectButton as RainbowButton } from "@rainbow-me/rainbowkit";
|
|
1114
|
-
import { Fragment as Fragment3, jsx as
|
|
1186
|
+
import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
1115
1187
|
var ConnectButton = () => {
|
|
1116
|
-
return /* @__PURE__ */
|
|
1188
|
+
return /* @__PURE__ */ jsx16(RainbowButton.Custom, { children: ({ mounted, chain, account, openAccountModal, openChainModal, openConnectModal }) => {
|
|
1117
1189
|
if (!mounted) return null;
|
|
1118
|
-
return /* @__PURE__ */
|
|
1190
|
+
return /* @__PURE__ */ jsx16(Fragment3, { children: (() => {
|
|
1119
1191
|
if (!mounted || !account || !chain) {
|
|
1120
|
-
return /* @__PURE__ */
|
|
1192
|
+
return /* @__PURE__ */ jsx16(
|
|
1121
1193
|
"button",
|
|
1122
1194
|
{
|
|
1123
1195
|
className: "h-[34px] rounded-md border-1 border-black px-3 text-sm font-medium",
|
|
@@ -1127,7 +1199,7 @@ var ConnectButton = () => {
|
|
|
1127
1199
|
);
|
|
1128
1200
|
}
|
|
1129
1201
|
if (chain.unsupported) {
|
|
1130
|
-
return /* @__PURE__ */
|
|
1202
|
+
return /* @__PURE__ */ jsx16(
|
|
1131
1203
|
"button",
|
|
1132
1204
|
{
|
|
1133
1205
|
className: "h-[34px] rounded-md border-1 border-black px-3 text-sm font-medium text-red-500",
|
|
@@ -1136,13 +1208,13 @@ var ConnectButton = () => {
|
|
|
1136
1208
|
}
|
|
1137
1209
|
);
|
|
1138
1210
|
}
|
|
1139
|
-
return /* @__PURE__ */
|
|
1211
|
+
return /* @__PURE__ */ jsxs11(
|
|
1140
1212
|
"button",
|
|
1141
1213
|
{
|
|
1142
1214
|
className: "flex h-[34px] items-center gap-2 rounded-md border-1 border-black px-1.5 text-sm font-medium",
|
|
1143
1215
|
onClick: openAccountModal,
|
|
1144
1216
|
children: [
|
|
1145
|
-
chain.hasIcon && /* @__PURE__ */
|
|
1217
|
+
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
1218
|
account.displayName
|
|
1147
1219
|
]
|
|
1148
1220
|
}
|
|
@@ -1152,29 +1224,29 @@ var ConnectButton = () => {
|
|
|
1152
1224
|
};
|
|
1153
1225
|
|
|
1154
1226
|
// src/config/symbolLogos.tsx
|
|
1155
|
-
import { jsx as
|
|
1156
|
-
var MOCA_SVG = /* @__PURE__ */
|
|
1157
|
-
/* @__PURE__ */
|
|
1158
|
-
/* @__PURE__ */
|
|
1227
|
+
import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
1228
|
+
var MOCA_SVG = /* @__PURE__ */ jsxs12("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
|
|
1229
|
+
/* @__PURE__ */ jsx17("circle", { cx: "14", cy: "14", r: "13.5", fill: "#C15F97" }),
|
|
1230
|
+
/* @__PURE__ */ jsx17(
|
|
1159
1231
|
"path",
|
|
1160
1232
|
{
|
|
1161
1233
|
fill: "#fff",
|
|
1162
1234
|
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
1235
|
}
|
|
1164
1236
|
),
|
|
1165
|
-
/* @__PURE__ */
|
|
1237
|
+
/* @__PURE__ */ jsx17("circle", { cx: "16", cy: "14", r: "1.5", fill: "#fff" })
|
|
1166
1238
|
] });
|
|
1167
|
-
var USDC_SVG = /* @__PURE__ */
|
|
1168
|
-
/* @__PURE__ */
|
|
1169
|
-
/* @__PURE__ */
|
|
1170
|
-
/* @__PURE__ */
|
|
1239
|
+
var USDC_SVG = /* @__PURE__ */ jsxs12("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
|
|
1240
|
+
/* @__PURE__ */ jsxs12("g", { clipPath: "url(#clip0_528_9163)", children: [
|
|
1241
|
+
/* @__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" }),
|
|
1242
|
+
/* @__PURE__ */ jsx17(
|
|
1171
1243
|
"path",
|
|
1172
1244
|
{
|
|
1173
1245
|
fill: "#fff",
|
|
1174
1246
|
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
1247
|
}
|
|
1176
1248
|
),
|
|
1177
|
-
/* @__PURE__ */
|
|
1249
|
+
/* @__PURE__ */ jsx17(
|
|
1178
1250
|
"path",
|
|
1179
1251
|
{
|
|
1180
1252
|
fill: "#fff",
|
|
@@ -1182,11 +1254,11 @@ var USDC_SVG = /* @__PURE__ */ jsxs11("svg", { xmlns: "http://www.w3.org/2000/sv
|
|
|
1182
1254
|
}
|
|
1183
1255
|
)
|
|
1184
1256
|
] }),
|
|
1185
|
-
/* @__PURE__ */
|
|
1257
|
+
/* @__PURE__ */ jsx17("defs", { children: /* @__PURE__ */ jsx17("clipPath", { id: "clip0_528_9163", children: /* @__PURE__ */ jsx17("path", { fill: "#fff", d: "M0 0h28v28H0z" }) }) })
|
|
1186
1258
|
] });
|
|
1187
|
-
var USDT_SVG = /* @__PURE__ */
|
|
1188
|
-
/* @__PURE__ */
|
|
1189
|
-
/* @__PURE__ */
|
|
1259
|
+
var USDT_SVG = /* @__PURE__ */ jsxs12("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
|
|
1260
|
+
/* @__PURE__ */ jsx17("path", { fill: "#26A17B", d: "M14 28a14 14 0 1 0 0-28 14 14 0 0 0 0 28Z" }),
|
|
1261
|
+
/* @__PURE__ */ jsx17(
|
|
1190
1262
|
"path",
|
|
1191
1263
|
{
|
|
1192
1264
|
fill: "#fff",
|
|
@@ -1194,23 +1266,23 @@ var USDT_SVG = /* @__PURE__ */ jsxs11("svg", { xmlns: "http://www.w3.org/2000/sv
|
|
|
1194
1266
|
}
|
|
1195
1267
|
)
|
|
1196
1268
|
] });
|
|
1197
|
-
var WETH_SVG = /* @__PURE__ */
|
|
1198
|
-
/* @__PURE__ */
|
|
1199
|
-
/* @__PURE__ */
|
|
1269
|
+
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: [
|
|
1270
|
+
/* @__PURE__ */ jsxs12("g", { clipPath: "url(#clip0_528_9173)", children: [
|
|
1271
|
+
/* @__PURE__ */ jsx17(
|
|
1200
1272
|
"path",
|
|
1201
1273
|
{
|
|
1202
1274
|
fill: "#000",
|
|
1203
1275
|
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
1276
|
}
|
|
1205
1277
|
),
|
|
1206
|
-
/* @__PURE__ */
|
|
1278
|
+
/* @__PURE__ */ jsx17(
|
|
1207
1279
|
"path",
|
|
1208
1280
|
{
|
|
1209
1281
|
fill: "#F61F7D",
|
|
1210
1282
|
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
1283
|
}
|
|
1212
1284
|
),
|
|
1213
|
-
/* @__PURE__ */
|
|
1285
|
+
/* @__PURE__ */ jsx17(
|
|
1214
1286
|
"path",
|
|
1215
1287
|
{
|
|
1216
1288
|
fill: "#000",
|
|
@@ -1219,8 +1291,8 @@ var WETH_SVG = /* @__PURE__ */ jsxs11("svg", { xmlns: "http://www.w3.org/2000/sv
|
|
|
1219
1291
|
clipRule: "evenodd"
|
|
1220
1292
|
}
|
|
1221
1293
|
),
|
|
1222
|
-
/* @__PURE__ */
|
|
1223
|
-
/* @__PURE__ */
|
|
1294
|
+
/* @__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" }),
|
|
1295
|
+
/* @__PURE__ */ jsx17(
|
|
1224
1296
|
"path",
|
|
1225
1297
|
{
|
|
1226
1298
|
fill: "#000",
|
|
@@ -1229,8 +1301,8 @@ var WETH_SVG = /* @__PURE__ */ jsxs11("svg", { xmlns: "http://www.w3.org/2000/sv
|
|
|
1229
1301
|
clipRule: "evenodd"
|
|
1230
1302
|
}
|
|
1231
1303
|
),
|
|
1232
|
-
/* @__PURE__ */
|
|
1233
|
-
/* @__PURE__ */
|
|
1304
|
+
/* @__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" }),
|
|
1305
|
+
/* @__PURE__ */ jsx17(
|
|
1234
1306
|
"path",
|
|
1235
1307
|
{
|
|
1236
1308
|
fill: "#000",
|
|
@@ -1238,7 +1310,7 @@ var WETH_SVG = /* @__PURE__ */ jsxs11("svg", { xmlns: "http://www.w3.org/2000/sv
|
|
|
1238
1310
|
}
|
|
1239
1311
|
)
|
|
1240
1312
|
] }),
|
|
1241
|
-
/* @__PURE__ */
|
|
1313
|
+
/* @__PURE__ */ jsx17("defs", { children: /* @__PURE__ */ jsx17("clipPath", { id: "clip0_528_9173", children: /* @__PURE__ */ jsx17("path", { fill: "#fff", d: "M0 0h24v24H0z" }) }) })
|
|
1242
1314
|
] });
|
|
1243
1315
|
var symbolLogos = {
|
|
1244
1316
|
MOCA: MOCA_SVG,
|
|
@@ -1251,13 +1323,13 @@ function getSymbolLogo(symbol) {
|
|
|
1251
1323
|
}
|
|
1252
1324
|
|
|
1253
1325
|
// src/components/CryptoTab/Crypto/Logos.tsx
|
|
1254
|
-
import { jsx as
|
|
1326
|
+
import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1255
1327
|
var Logos = () => {
|
|
1256
|
-
return /* @__PURE__ */
|
|
1257
|
-
/* @__PURE__ */
|
|
1258
|
-
/* @__PURE__ */
|
|
1259
|
-
/* @__PURE__ */
|
|
1260
|
-
/* @__PURE__ */
|
|
1328
|
+
return /* @__PURE__ */ jsxs13("div", { className: "flex", children: [
|
|
1329
|
+
/* @__PURE__ */ jsx18("div", { className: "rounded-full border border-[#F5F7FA]", children: getSymbolLogo("MOCA") }),
|
|
1330
|
+
/* @__PURE__ */ jsx18("div", { className: "-ml-2.5 rounded-full border border-[#F5F7FA]", children: getSymbolLogo("USDC") }),
|
|
1331
|
+
/* @__PURE__ */ jsx18("div", { className: "-ml-2.5 rounded-full border border-[#F5F7FA]", children: getSymbolLogo("USDT") }),
|
|
1332
|
+
/* @__PURE__ */ jsx18("div", { className: "-ml-2.5 rounded-full border border-[#F5F7FA] bg-[#F5F7FA]", children: getSymbolLogo("WETH") })
|
|
1261
1333
|
] });
|
|
1262
1334
|
};
|
|
1263
1335
|
|
|
@@ -1352,7 +1424,7 @@ function useBaseNativeToken() {
|
|
|
1352
1424
|
}
|
|
1353
1425
|
|
|
1354
1426
|
// src/modals/CryptoSelectModal.tsx
|
|
1355
|
-
import { Fragment as Fragment4, jsx as
|
|
1427
|
+
import { Fragment as Fragment4, jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1356
1428
|
var CryptoSelectModal = NiceModal3.create(() => {
|
|
1357
1429
|
const modal = useModal2();
|
|
1358
1430
|
const { isLoading, error, erc20Balances } = useBaseERC20Token();
|
|
@@ -1362,113 +1434,116 @@ var CryptoSelectModal = NiceModal3.create(() => {
|
|
|
1362
1434
|
modal.remove();
|
|
1363
1435
|
setSelectedPaymentMethod({ type: "CRYPTO" /* CRYPTO */, method: coin });
|
|
1364
1436
|
};
|
|
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",
|
|
1437
|
+
return /* @__PURE__ */ jsxs14(Dialog, { open: modal.visible, onOpenChange: modal.remove, children: [
|
|
1438
|
+
/* @__PURE__ */ jsx19(DialogDescription, { className: "hidden", children: "Crypto Select Modal" }),
|
|
1439
|
+
/* @__PURE__ */ jsxs14(DialogContent, { showCloseButton: false, className: "gap-0 p-0", children: [
|
|
1440
|
+
/* @__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: [
|
|
1441
|
+
/* @__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" }) }) }),
|
|
1442
|
+
/* @__PURE__ */ jsx19(DialogTitle, { className: "text-primary text-2xl font-semibold", children: "Select a token" }),
|
|
1443
|
+
/* @__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(
|
|
1444
|
+
"path",
|
|
1384
1445
|
{
|
|
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(
|
|
1446
|
+
fill: "#000",
|
|
1447
|
+
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"
|
|
1448
|
+
}
|
|
1449
|
+
) }) })
|
|
1450
|
+
] }) }),
|
|
1451
|
+
/* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-4 px-7 py-6", children: [
|
|
1452
|
+
/* @__PURE__ */ jsx19("h3", { className: "text-primary text-xl font-semibold", children: "Tokens with wallet balance" }),
|
|
1453
|
+
(error || nativeError) && /* @__PURE__ */ jsx19("p", { className: "text-center text-sm text-red-500", children: "Something wrong" }),
|
|
1454
|
+
/* @__PURE__ */ jsxs14("div", { className: "flex w-full flex-col gap-1", children: [
|
|
1455
|
+
isLoadingNative && /* @__PURE__ */ jsx19("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
|
|
1456
|
+
nativeBalance && /* @__PURE__ */ jsxs14(
|
|
1412
1457
|
"button",
|
|
1413
1458
|
{
|
|
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(
|
|
1459
|
+
className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 hover:bg-gray-100",
|
|
1460
|
+
onClick: () => handleSelect(nativeBalance),
|
|
1416
1461
|
children: [
|
|
1417
|
-
/* @__PURE__ */
|
|
1418
|
-
|
|
1419
|
-
|
|
1462
|
+
/* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2", children: [
|
|
1463
|
+
nativeBalance.logoURI && /* @__PURE__ */ jsx19(
|
|
1464
|
+
"img",
|
|
1465
|
+
{
|
|
1466
|
+
className: "h-8 w-8 shrink-0",
|
|
1467
|
+
src: nativeBalance.logoURI,
|
|
1468
|
+
alt: `${nativeBalance.symbol} logo`
|
|
1469
|
+
}
|
|
1470
|
+
),
|
|
1471
|
+
/* @__PURE__ */ jsx19("p", { className: "text-sm font-medium", children: nativeBalance.symbol })
|
|
1420
1472
|
] }),
|
|
1421
|
-
/* @__PURE__ */
|
|
1473
|
+
/* @__PURE__ */ jsx19("p", { className: "text-sm font-medium", children: nativeBalance.formatted })
|
|
1422
1474
|
]
|
|
1423
1475
|
},
|
|
1424
|
-
|
|
1425
|
-
)
|
|
1426
|
-
|
|
1476
|
+
nativeBalance.symbol
|
|
1477
|
+
),
|
|
1478
|
+
isLoading && /* @__PURE__ */ jsxs14(Fragment4, { children: [
|
|
1479
|
+
/* @__PURE__ */ jsx19("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
|
|
1480
|
+
/* @__PURE__ */ jsx19("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
|
|
1481
|
+
/* @__PURE__ */ jsx19("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
|
|
1482
|
+
] }),
|
|
1483
|
+
erc20Balances.map((coin) => {
|
|
1484
|
+
const Icon = getSymbolLogo(coin.symbol);
|
|
1485
|
+
return /* @__PURE__ */ jsxs14(
|
|
1486
|
+
"button",
|
|
1487
|
+
{
|
|
1488
|
+
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",
|
|
1489
|
+
onClick: () => handleSelect(coin),
|
|
1490
|
+
children: [
|
|
1491
|
+
/* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2", children: [
|
|
1492
|
+
Boolean(Icon) && Icon,
|
|
1493
|
+
/* @__PURE__ */ jsx19("p", { className: "text-sm font-medium", children: coin.symbol })
|
|
1494
|
+
] }),
|
|
1495
|
+
/* @__PURE__ */ jsx19("p", { className: "text-sm font-medium", children: coin.formatted })
|
|
1496
|
+
]
|
|
1497
|
+
},
|
|
1498
|
+
coin.symbol
|
|
1499
|
+
);
|
|
1500
|
+
})
|
|
1501
|
+
] })
|
|
1427
1502
|
] })
|
|
1428
1503
|
] })
|
|
1429
|
-
] })
|
|
1504
|
+
] });
|
|
1430
1505
|
});
|
|
1431
1506
|
CryptoSelectModal.displayName = "CryptoSelectModal";
|
|
1432
1507
|
|
|
1433
1508
|
// src/components/CryptoTab/Crypto/SelectCoinButton.tsx
|
|
1434
|
-
import { jsx as
|
|
1509
|
+
import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1435
1510
|
var SelectCoinButton = () => {
|
|
1436
1511
|
const openModal = () => {
|
|
1437
1512
|
NiceModal4.show(CryptoSelectModal);
|
|
1438
1513
|
};
|
|
1439
|
-
return /* @__PURE__ */
|
|
1440
|
-
/* @__PURE__ */
|
|
1441
|
-
/* @__PURE__ */
|
|
1442
|
-
/* @__PURE__ */
|
|
1443
|
-
/* @__PURE__ */
|
|
1514
|
+
return /* @__PURE__ */ jsxs15("button", { onClick: openModal, type: "button", className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
|
|
1515
|
+
/* @__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" }) }),
|
|
1516
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex w-full items-center justify-between px-3", children: [
|
|
1517
|
+
/* @__PURE__ */ jsx20("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx20("p", { className: "font-medium text-black/50", children: "Select a token" }) }),
|
|
1518
|
+
/* @__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
1519
|
] })
|
|
1445
1520
|
] });
|
|
1446
1521
|
};
|
|
1447
1522
|
|
|
1448
1523
|
// src/components/CryptoTab/Crypto/SelectedCoin.tsx
|
|
1449
|
-
import { jsx as
|
|
1524
|
+
import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1450
1525
|
var SelectedCoin = (props) => {
|
|
1451
1526
|
const { coin, balance, logoURI } = props;
|
|
1452
1527
|
const Icon = getSymbolLogo(coin);
|
|
1453
|
-
return /* @__PURE__ */
|
|
1454
|
-
/* @__PURE__ */
|
|
1455
|
-
/* @__PURE__ */
|
|
1456
|
-
/* @__PURE__ */
|
|
1528
|
+
return /* @__PURE__ */ jsxs16("div", { className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
|
|
1529
|
+
/* @__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" }) }) }),
|
|
1530
|
+
/* @__PURE__ */ jsxs16("div", { className: "border-primary flex w-full items-center justify-between rounded-r-md border-1 !border-l-0 px-3", children: [
|
|
1531
|
+
/* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-1", children: [
|
|
1457
1532
|
Icon,
|
|
1458
|
-
!Icon && logoURI && /* @__PURE__ */
|
|
1459
|
-
/* @__PURE__ */
|
|
1460
|
-
/* @__PURE__ */
|
|
1533
|
+
!Icon && logoURI && /* @__PURE__ */ jsx21("img", { className: "mr-1 h-8 w-8 shrink-0", src: logoURI, alt: `${coin} logo` }),
|
|
1534
|
+
/* @__PURE__ */ jsx21("p", { className: "font-semibold", children: coin }),
|
|
1535
|
+
/* @__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
1536
|
] }),
|
|
1462
|
-
/* @__PURE__ */
|
|
1537
|
+
/* @__PURE__ */ jsxs16("p", { className: "text-xs font-medium text-[#798B95]", children: [
|
|
1463
1538
|
"Wallet balance ",
|
|
1464
|
-
/* @__PURE__ */
|
|
1539
|
+
/* @__PURE__ */ jsx21("span", { className: "text-black", children: balance })
|
|
1465
1540
|
] })
|
|
1466
1541
|
] })
|
|
1467
1542
|
] });
|
|
1468
1543
|
};
|
|
1469
1544
|
|
|
1470
1545
|
// src/components/CryptoTab/Crypto/Crypto.tsx
|
|
1471
|
-
import { jsx as
|
|
1546
|
+
import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1472
1547
|
var Crypto = () => {
|
|
1473
1548
|
const { address } = useAccount3();
|
|
1474
1549
|
const { selectedPaymentMethod } = useSpreePaymentMethod();
|
|
@@ -1492,14 +1567,14 @@ var Crypto = () => {
|
|
|
1492
1567
|
useEffect4(() => {
|
|
1493
1568
|
register(handlePay);
|
|
1494
1569
|
}, [register, handlePay]);
|
|
1495
|
-
return /* @__PURE__ */
|
|
1496
|
-
/* @__PURE__ */
|
|
1497
|
-
/* @__PURE__ */
|
|
1498
|
-
/* @__PURE__ */
|
|
1570
|
+
return /* @__PURE__ */ jsxs17("div", { className: "flex flex-col items-baseline gap-4", children: [
|
|
1571
|
+
/* @__PURE__ */ jsxs17("div", { className: "flex w-full items-center justify-between gap-4", children: [
|
|
1572
|
+
/* @__PURE__ */ jsx22("h3", { className: "text-primary text-xl leading-[1.7] font-semibold", children: "Pay with Crypto" }),
|
|
1573
|
+
/* @__PURE__ */ jsx22(ConnectButton, {})
|
|
1499
1574
|
] }),
|
|
1500
|
-
!isWalletConnected && /* @__PURE__ */
|
|
1501
|
-
isWalletConnected && /* @__PURE__ */
|
|
1502
|
-
selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */
|
|
1575
|
+
!isWalletConnected && /* @__PURE__ */ jsx22(Logos, {}),
|
|
1576
|
+
isWalletConnected && /* @__PURE__ */ jsxs17("div", { className: "flex w-full flex-col gap-1", children: [
|
|
1577
|
+
selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */ jsx22(
|
|
1503
1578
|
SelectedCoin,
|
|
1504
1579
|
{
|
|
1505
1580
|
coin: selectedPaymentMethod.method.symbol,
|
|
@@ -1507,13 +1582,13 @@ var Crypto = () => {
|
|
|
1507
1582
|
logoURI: selectedPaymentMethod.method.logoURI
|
|
1508
1583
|
}
|
|
1509
1584
|
),
|
|
1510
|
-
/* @__PURE__ */
|
|
1585
|
+
/* @__PURE__ */ jsx22(SelectCoinButton, {})
|
|
1511
1586
|
] })
|
|
1512
1587
|
] });
|
|
1513
1588
|
};
|
|
1514
1589
|
|
|
1515
1590
|
// src/components/CryptoTab/Crypto/CryptoWrapper.tsx
|
|
1516
|
-
import { jsx as
|
|
1591
|
+
import { jsx as jsx23 } from "react/jsx-runtime";
|
|
1517
1592
|
var queryClient = new QueryClient();
|
|
1518
1593
|
var connectors = connectorsForWallets(
|
|
1519
1594
|
[
|
|
@@ -1531,22 +1606,22 @@ var config = createConfig({
|
|
|
1531
1606
|
ssr: true
|
|
1532
1607
|
});
|
|
1533
1608
|
var CryptoWrapper = () => {
|
|
1534
|
-
return /* @__PURE__ */
|
|
1609
|
+
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
1610
|
};
|
|
1536
1611
|
|
|
1537
1612
|
// src/components/CryptoTab/CryptoTab.tsx
|
|
1538
|
-
import { jsx as
|
|
1613
|
+
import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
1539
1614
|
var CryptoTab = () => {
|
|
1540
|
-
return /* @__PURE__ */
|
|
1541
|
-
/* @__PURE__ */
|
|
1542
|
-
/* @__PURE__ */
|
|
1615
|
+
return /* @__PURE__ */ jsxs18("div", { children: [
|
|
1616
|
+
/* @__PURE__ */ jsx24("div", { className: "border-b-1 border-black/7 px-7 py-6", children: /* @__PURE__ */ jsx24(CryptoWrapper, {}) }),
|
|
1617
|
+
/* @__PURE__ */ jsx24("div", { className: "px-7 py-6", children: /* @__PURE__ */ jsx24(PointsSwitch, { disabled: true }) })
|
|
1543
1618
|
] });
|
|
1544
1619
|
};
|
|
1545
1620
|
|
|
1546
1621
|
// src/components/TabButtons.tsx
|
|
1547
|
-
import { jsx as
|
|
1622
|
+
import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
1548
1623
|
var TabButton = ({ isActive, children, onClick }) => {
|
|
1549
|
-
return /* @__PURE__ */
|
|
1624
|
+
return /* @__PURE__ */ jsx25(
|
|
1550
1625
|
"button",
|
|
1551
1626
|
{
|
|
1552
1627
|
onClick,
|
|
@@ -1566,62 +1641,62 @@ var TabButtons = (props) => {
|
|
|
1566
1641
|
onChange({ type, method: null });
|
|
1567
1642
|
}
|
|
1568
1643
|
};
|
|
1569
|
-
return /* @__PURE__ */
|
|
1570
|
-
/* @__PURE__ */
|
|
1571
|
-
/* @__PURE__ */
|
|
1644
|
+
return /* @__PURE__ */ jsxs19("div", { className: "flex gap-2", children: [
|
|
1645
|
+
/* @__PURE__ */ jsxs19(TabButton, { onClick: handleChange("CREDIT_CARD" /* CREDIT_CARD */), isActive: value === "CREDIT_CARD" /* CREDIT_CARD */, children: [
|
|
1646
|
+
/* @__PURE__ */ jsx25("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", children: /* @__PURE__ */ jsx25(
|
|
1572
1647
|
"path",
|
|
1573
1648
|
{
|
|
1574
1649
|
fill: "currentColor",
|
|
1575
1650
|
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
1651
|
}
|
|
1577
1652
|
) }),
|
|
1578
|
-
/* @__PURE__ */
|
|
1653
|
+
/* @__PURE__ */ jsx25("p", { className: "text-sm font-medium", children: "Card" })
|
|
1579
1654
|
] }),
|
|
1580
|
-
/* @__PURE__ */
|
|
1581
|
-
/* @__PURE__ */
|
|
1582
|
-
/* @__PURE__ */
|
|
1655
|
+
/* @__PURE__ */ jsxs19(TabButton, { onClick: handleChange("CRYPTO" /* CRYPTO */), isActive: value === "CRYPTO" /* CRYPTO */, children: [
|
|
1656
|
+
/* @__PURE__ */ jsxs19("svg", { className: "my-1", xmlns: "http://www.w3.org/2000/svg", width: "30", height: "16", fill: "none", children: [
|
|
1657
|
+
/* @__PURE__ */ jsx25(
|
|
1583
1658
|
"path",
|
|
1584
1659
|
{
|
|
1585
1660
|
fill: "currentColor",
|
|
1586
1661
|
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
1662
|
}
|
|
1588
1663
|
),
|
|
1589
|
-
/* @__PURE__ */
|
|
1664
|
+
/* @__PURE__ */ jsx25(
|
|
1590
1665
|
"path",
|
|
1591
1666
|
{
|
|
1592
1667
|
fill: "currentColor",
|
|
1593
1668
|
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
1669
|
}
|
|
1595
1670
|
),
|
|
1596
|
-
/* @__PURE__ */
|
|
1671
|
+
/* @__PURE__ */ jsx25("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "2" })
|
|
1597
1672
|
] }),
|
|
1598
|
-
/* @__PURE__ */
|
|
1673
|
+
/* @__PURE__ */ jsx25("p", { className: "text-sm font-medium", children: "Crypto" })
|
|
1599
1674
|
] })
|
|
1600
1675
|
] });
|
|
1601
1676
|
};
|
|
1602
1677
|
|
|
1603
1678
|
// src/components/Tabs.tsx
|
|
1604
|
-
import { jsx as
|
|
1679
|
+
import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
1605
1680
|
var Tabs = () => {
|
|
1606
1681
|
const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
|
|
1607
|
-
return /* @__PURE__ */
|
|
1608
|
-
/* @__PURE__ */
|
|
1609
|
-
/* @__PURE__ */
|
|
1610
|
-
/* @__PURE__ */
|
|
1682
|
+
return /* @__PURE__ */ jsxs20("div", { className: "mb-4 rounded-2xl border border-black/25 bg-white", children: [
|
|
1683
|
+
/* @__PURE__ */ jsxs20("div", { className: "flex w-full flex-col gap-4 border-b-1 border-black/7 px-7 py-6", children: [
|
|
1684
|
+
/* @__PURE__ */ jsx26("h2", { className: "text-primary text-2xl font-semibold", children: "Choose a Payment Method" }),
|
|
1685
|
+
/* @__PURE__ */ jsx26(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
|
|
1611
1686
|
] }),
|
|
1612
|
-
selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */
|
|
1613
|
-
selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */
|
|
1687
|
+
selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ jsx26(CreditCardTab, {}),
|
|
1688
|
+
selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ jsx26(CryptoTab, {})
|
|
1614
1689
|
] });
|
|
1615
1690
|
};
|
|
1616
1691
|
|
|
1617
1692
|
// src/SpreePayContent.tsx
|
|
1618
|
-
import { jsx as
|
|
1693
|
+
import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
1619
1694
|
var SpreePayContent = (props) => {
|
|
1620
|
-
const { amount, onProcess } = props;
|
|
1621
|
-
return /* @__PURE__ */
|
|
1622
|
-
/* @__PURE__ */
|
|
1623
|
-
/* @__PURE__ */
|
|
1624
|
-
/* @__PURE__ */
|
|
1695
|
+
const { amount, onProcess, isProcessing } = props;
|
|
1696
|
+
return /* @__PURE__ */ jsxs21("div", { className: "w-full", children: [
|
|
1697
|
+
/* @__PURE__ */ jsx27(Tabs, {}),
|
|
1698
|
+
/* @__PURE__ */ jsx27(CheckoutButton, { isProcessing, onCheckout: onProcess, amount }),
|
|
1699
|
+
/* @__PURE__ */ jsx27(SpreeLegal, {})
|
|
1625
1700
|
] });
|
|
1626
1701
|
};
|
|
1627
1702
|
|
|
@@ -1693,7 +1768,7 @@ function useKeycloakSSO(config2) {
|
|
|
1693
1768
|
}
|
|
1694
1769
|
|
|
1695
1770
|
// src/SpreePay.tsx
|
|
1696
|
-
import { jsx as
|
|
1771
|
+
import { jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
1697
1772
|
var envConfig = {
|
|
1698
1773
|
dev: {
|
|
1699
1774
|
bookit: {
|
|
@@ -1760,23 +1835,17 @@ var SpreePay = ({ className, ...rest }) => {
|
|
|
1760
1835
|
}
|
|
1761
1836
|
}, [env.accessToken, environment, tenantId, accessToken]);
|
|
1762
1837
|
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
|
-
] });
|
|
1838
|
+
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
1839
|
}
|
|
1768
1840
|
if (error) {
|
|
1769
|
-
return /* @__PURE__ */
|
|
1770
|
-
|
|
1771
|
-
|
|
1772
|
-
|
|
1773
|
-
error.message
|
|
1774
|
-
] })
|
|
1775
|
-
] });
|
|
1841
|
+
return /* @__PURE__ */ jsx28("div", { ref: rootRef, className: cn("sl-spreepay", className), children: /* @__PURE__ */ jsxs22("p", { className: "w-full text-center text-sm", children: [
|
|
1842
|
+
"Error: ",
|
|
1843
|
+
error.message
|
|
1844
|
+
] }) });
|
|
1776
1845
|
}
|
|
1777
|
-
return /* @__PURE__ */
|
|
1778
|
-
/* @__PURE__ */
|
|
1779
|
-
/* @__PURE__ */
|
|
1846
|
+
return /* @__PURE__ */ jsxs22("div", { ref: rootRef, className: cn("sl-spreepay", className), children: [
|
|
1847
|
+
/* @__PURE__ */ jsx28("div", { className: "sl-spreepay__portal" }),
|
|
1848
|
+
/* @__PURE__ */ jsx28(
|
|
1780
1849
|
SWRConfig,
|
|
1781
1850
|
{
|
|
1782
1851
|
value: {
|
|
@@ -1785,7 +1854,7 @@ var SpreePay = ({ className, ...rest }) => {
|
|
|
1785
1854
|
revalidateIfStale: false,
|
|
1786
1855
|
revalidateOnReconnect: false
|
|
1787
1856
|
},
|
|
1788
|
-
children: /* @__PURE__ */
|
|
1857
|
+
children: /* @__PURE__ */ jsx28(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ jsx28(NiceModal6.Provider, { children: /* @__PURE__ */ jsx28(SpreePayContent, { ...rest }) }) })
|
|
1789
1858
|
}
|
|
1790
1859
|
)
|
|
1791
1860
|
] });
|