@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.cjs
CHANGED
|
@@ -66,21 +66,26 @@ var SpreePayProvider = ({ children, env }) => {
|
|
|
66
66
|
type: "CREDIT_CARD" /* CREDIT_CARD */,
|
|
67
67
|
method: null
|
|
68
68
|
});
|
|
69
|
+
const [isInternalProcessing, setInternalProcessing] = (0, import_react.useState)(false);
|
|
69
70
|
const register = (0, import_react.useCallback)((fn) => {
|
|
70
71
|
processRef.current = fn;
|
|
71
72
|
}, []);
|
|
72
|
-
const process = (0, import_react.useCallback)((data) => {
|
|
73
|
+
const process = (0, import_react.useCallback)(async (data) => {
|
|
73
74
|
if (!processRef.current) throw new Error("SpreePay process function not registered");
|
|
75
|
+
setInternalProcessing(true);
|
|
74
76
|
try {
|
|
75
|
-
return processRef.current(data);
|
|
77
|
+
return await processRef.current(data);
|
|
76
78
|
} catch (e) {
|
|
77
|
-
if (e instanceof Error)
|
|
78
|
-
|
|
79
|
+
if (e instanceof Error) throw e;
|
|
80
|
+
throw new PaymentError("Payment failed", "FAILED" /* FAILED */, e);
|
|
81
|
+
} finally {
|
|
82
|
+
setInternalProcessing(false);
|
|
79
83
|
}
|
|
80
84
|
}, []);
|
|
81
85
|
const value = {
|
|
82
86
|
env,
|
|
83
87
|
enabled: Boolean(selectedPaymentMethod.method),
|
|
88
|
+
isInternalProcessing,
|
|
84
89
|
process,
|
|
85
90
|
register,
|
|
86
91
|
selectedPaymentMethod,
|
|
@@ -91,12 +96,21 @@ var SpreePayProvider = ({ children, env }) => {
|
|
|
91
96
|
var useSpreePay = () => {
|
|
92
97
|
const ctx = (0, import_react.useContext)(SpreePayActionsContext);
|
|
93
98
|
if (!ctx) throw new Error("useSpreePay must be used within a SpreePayProvider");
|
|
94
|
-
return {
|
|
99
|
+
return {
|
|
100
|
+
process: ctx.process,
|
|
101
|
+
isProcessing: ctx.isInternalProcessing,
|
|
102
|
+
enabled: ctx.enabled,
|
|
103
|
+
selectedPaymentMethod: ctx.selectedPaymentMethod
|
|
104
|
+
};
|
|
95
105
|
};
|
|
96
106
|
var useSpreePaymentMethod = () => {
|
|
97
107
|
const ctx = (0, import_react.useContext)(SpreePayActionsContext);
|
|
98
108
|
if (!ctx) throw new Error("useSpreePay must be used within a SpreePayProvider");
|
|
99
|
-
return {
|
|
109
|
+
return {
|
|
110
|
+
setSelectedPaymentMethod: ctx.setSelectedPaymentMethod,
|
|
111
|
+
selectedPaymentMethod: ctx.selectedPaymentMethod,
|
|
112
|
+
isInternalProcessing: ctx.isInternalProcessing
|
|
113
|
+
};
|
|
100
114
|
};
|
|
101
115
|
var useSpreePayEnv = () => {
|
|
102
116
|
const ctx = (0, import_react.useContext)(SpreePayActionsContext);
|
|
@@ -116,6 +130,53 @@ function cn(...inputs) {
|
|
|
116
130
|
return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
|
|
117
131
|
}
|
|
118
132
|
|
|
133
|
+
// src/ui/spinner.tsx
|
|
134
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
135
|
+
var Spinner = (props) => {
|
|
136
|
+
const { size = "md", className } = props;
|
|
137
|
+
const sizeClasses = {
|
|
138
|
+
xs: "size-4",
|
|
139
|
+
sm: "size-6",
|
|
140
|
+
md: "size-8",
|
|
141
|
+
lg: "size-12",
|
|
142
|
+
xl: "size-16"
|
|
143
|
+
};
|
|
144
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
145
|
+
"svg",
|
|
146
|
+
{
|
|
147
|
+
className: cn(`${sizeClasses[size]} animate-spin text-gray-300`, className),
|
|
148
|
+
viewBox: "0 0 64 64",
|
|
149
|
+
fill: "none",
|
|
150
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
151
|
+
width: "24",
|
|
152
|
+
height: "24",
|
|
153
|
+
children: [
|
|
154
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
155
|
+
"path",
|
|
156
|
+
{
|
|
157
|
+
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",
|
|
158
|
+
stroke: "currentColor",
|
|
159
|
+
strokeWidth: "5",
|
|
160
|
+
strokeLinecap: "round",
|
|
161
|
+
strokeLinejoin: "round"
|
|
162
|
+
}
|
|
163
|
+
),
|
|
164
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
165
|
+
"path",
|
|
166
|
+
{
|
|
167
|
+
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",
|
|
168
|
+
stroke: "currentColor",
|
|
169
|
+
strokeWidth: "5",
|
|
170
|
+
strokeLinecap: "round",
|
|
171
|
+
strokeLinejoin: "round",
|
|
172
|
+
className: "text-gray-900"
|
|
173
|
+
}
|
|
174
|
+
)
|
|
175
|
+
]
|
|
176
|
+
}
|
|
177
|
+
);
|
|
178
|
+
};
|
|
179
|
+
|
|
119
180
|
// src/utils/format.ts
|
|
120
181
|
var formatUSD = (amount, currency = "USD") => {
|
|
121
182
|
const formattedAmount = new Intl.NumberFormat("en-US", {
|
|
@@ -126,7 +187,7 @@ var formatUSD = (amount, currency = "USD") => {
|
|
|
126
187
|
}).format(amount);
|
|
127
188
|
return formattedAmount;
|
|
128
189
|
};
|
|
129
|
-
var pointsConverionRate =
|
|
190
|
+
var pointsConverionRate = 100;
|
|
130
191
|
var formatPoints = (amount) => {
|
|
131
192
|
const formattedAmount = new Intl.NumberFormat("en-US", {
|
|
132
193
|
style: "decimal",
|
|
@@ -145,46 +206,44 @@ var formatCoin = (amount, currency = "USDC") => {
|
|
|
145
206
|
};
|
|
146
207
|
|
|
147
208
|
// src/components/CheckoutButton.tsx
|
|
148
|
-
var
|
|
149
|
-
var CheckoutButton = ({ amount, onCheckout }) => {
|
|
150
|
-
const { selectedPaymentMethod } = useSpreePaymentMethod();
|
|
151
|
-
const isDisabled = !amount || !selectedPaymentMethod.method;
|
|
209
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
210
|
+
var CheckoutButton = ({ isProcessing, amount, onCheckout }) => {
|
|
211
|
+
const { selectedPaymentMethod, isInternalProcessing } = useSpreePaymentMethod();
|
|
212
|
+
const isDisabled = !amount || !selectedPaymentMethod.method || !!isProcessing || isInternalProcessing;
|
|
152
213
|
const isUSD = selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */;
|
|
153
|
-
return /* @__PURE__ */ (0,
|
|
154
|
-
/* @__PURE__ */ (0,
|
|
214
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex w-full flex-col overflow-hidden rounded-[24px] border border-black/25 bg-white text-xs font-medium", children: [
|
|
215
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "px-7 py-5", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "text-[#798B95]", children: [
|
|
155
216
|
"By clicking on the button below I acknowledge that I have read and accepted the",
|
|
156
217
|
" ",
|
|
157
|
-
/* @__PURE__ */ (0,
|
|
218
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { className: "underline", href: "/", children: "Property Policies" }),
|
|
158
219
|
",",
|
|
159
220
|
" ",
|
|
160
|
-
/* @__PURE__ */ (0,
|
|
221
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { className: "underline", href: "/", children: "Check-in Instructions" }),
|
|
161
222
|
",",
|
|
162
223
|
" ",
|
|
163
|
-
/* @__PURE__ */ (0,
|
|
224
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { className: "underline", href: "/", children: "Property Fees" }),
|
|
164
225
|
", and",
|
|
165
226
|
" ",
|
|
166
|
-
/* @__PURE__ */ (0,
|
|
227
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { className: "underline", href: "/", children: "Supplier Terms and Conditions" }),
|
|
167
228
|
"."
|
|
168
229
|
] }) }),
|
|
169
|
-
onCheckout && /* @__PURE__ */ (0,
|
|
230
|
+
onCheckout && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
170
231
|
"button",
|
|
171
232
|
{
|
|
172
233
|
disabled: isDisabled,
|
|
173
234
|
onClick: onCheckout,
|
|
174
|
-
className:
|
|
175
|
-
|
|
176
|
-
}),
|
|
177
|
-
children: amount ? `Pay ${isUSD ? formatUSD(amount) : formatCoin(amount)}` : "Checkout"
|
|
235
|
+
className: "bg-primary h-[60px] w-full cursor-pointer text-xl font-semibold text-white disabled:cursor-not-allowed disabled:opacity-50",
|
|
236
|
+
children: !!isProcessing || isInternalProcessing ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, { className: "inline", size: "sm" }) : amount ? `Pay ${isUSD ? formatUSD(amount) : formatCoin(amount)}` : "Checkout"
|
|
178
237
|
}
|
|
179
238
|
)
|
|
180
239
|
] });
|
|
181
240
|
};
|
|
182
241
|
|
|
183
242
|
// src/components/SpreeLegal.tsx
|
|
184
|
-
var
|
|
243
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
185
244
|
var SpreeLegal = () => {
|
|
186
|
-
return /* @__PURE__ */ (0,
|
|
187
|
-
/* @__PURE__ */ (0,
|
|
245
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mt-4 flex items-center gap-4", children: [
|
|
246
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "flex-shrink-0", xmlns: "http://www.w3.org/2000/svg", width: "66", height: "30", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
188
247
|
"path",
|
|
189
248
|
{
|
|
190
249
|
fill: "#000",
|
|
@@ -192,10 +251,10 @@ var SpreeLegal = () => {
|
|
|
192
251
|
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"
|
|
193
252
|
}
|
|
194
253
|
) }),
|
|
195
|
-
/* @__PURE__ */ (0,
|
|
254
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { className: "text-xs text-[#798B95]", children: [
|
|
196
255
|
"Spree enables seamless crypto payments for real-world goods, travel, and experiences. Enjoy secure, fast transactions and earn rewards.",
|
|
197
256
|
" ",
|
|
198
|
-
/* @__PURE__ */ (0,
|
|
257
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("a", { className: "underline", href: "/", children: "Learn more" }),
|
|
199
258
|
" ",
|
|
200
259
|
"about Spree."
|
|
201
260
|
] })
|
|
@@ -215,7 +274,7 @@ var useSlapiBalance = () => {
|
|
|
215
274
|
// src/services/cardPayment.ts
|
|
216
275
|
var import_nice_modal_react2 = __toESM(require("@ebay/nice-modal-react"), 1);
|
|
217
276
|
|
|
218
|
-
// src/
|
|
277
|
+
// src/modals/Iframe3ds.tsx
|
|
219
278
|
var import_react3 = require("react");
|
|
220
279
|
var import_nice_modal_react = __toESM(require("@ebay/nice-modal-react"), 1);
|
|
221
280
|
|
|
@@ -251,16 +310,16 @@ function usePortalContainer() {
|
|
|
251
310
|
}
|
|
252
311
|
|
|
253
312
|
// src/ui/dialog.tsx
|
|
254
|
-
var
|
|
313
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
255
314
|
function Dialog({ ...props }) {
|
|
256
|
-
return /* @__PURE__ */ (0,
|
|
315
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
|
|
257
316
|
}
|
|
258
317
|
function DialogPortal({ ...props }) {
|
|
259
318
|
const container = usePortalContainer();
|
|
260
|
-
return /* @__PURE__ */ (0,
|
|
319
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogPrimitive.Portal, { container: container ?? void 0, "data-slot": "dialog-portal", ...props });
|
|
261
320
|
}
|
|
262
321
|
function DialogOverlay({ className, ...props }) {
|
|
263
|
-
return /* @__PURE__ */ (0,
|
|
322
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
264
323
|
DialogPrimitive.Overlay,
|
|
265
324
|
{
|
|
266
325
|
"data-slot": "dialog-overlay",
|
|
@@ -278,9 +337,9 @@ function DialogContent({
|
|
|
278
337
|
showCloseButton = true,
|
|
279
338
|
...props
|
|
280
339
|
}) {
|
|
281
|
-
return /* @__PURE__ */ (0,
|
|
282
|
-
/* @__PURE__ */ (0,
|
|
283
|
-
/* @__PURE__ */ (0,
|
|
340
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(DialogPortal, { "data-slot": "dialog-portal", children: [
|
|
341
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogOverlay, {}),
|
|
342
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
284
343
|
DialogPrimitive.Content,
|
|
285
344
|
{
|
|
286
345
|
"data-slot": "dialog-content",
|
|
@@ -291,14 +350,14 @@ function DialogContent({
|
|
|
291
350
|
...props,
|
|
292
351
|
children: [
|
|
293
352
|
children,
|
|
294
|
-
showCloseButton && /* @__PURE__ */ (0,
|
|
353
|
+
showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
295
354
|
DialogPrimitive.Close,
|
|
296
355
|
{
|
|
297
356
|
"data-slot": "dialog-close",
|
|
298
357
|
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",
|
|
299
358
|
children: [
|
|
300
|
-
/* @__PURE__ */ (0,
|
|
301
|
-
/* @__PURE__ */ (0,
|
|
359
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react.XIcon, {}),
|
|
360
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "sr-only", children: "Close" })
|
|
302
361
|
]
|
|
303
362
|
}
|
|
304
363
|
)
|
|
@@ -308,7 +367,7 @@ function DialogContent({
|
|
|
308
367
|
] });
|
|
309
368
|
}
|
|
310
369
|
function DialogTitle({ className, ...props }) {
|
|
311
|
-
return /* @__PURE__ */ (0,
|
|
370
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
312
371
|
DialogPrimitive.Title,
|
|
313
372
|
{
|
|
314
373
|
"data-slot": "dialog-title",
|
|
@@ -317,9 +376,19 @@ function DialogTitle({ className, ...props }) {
|
|
|
317
376
|
}
|
|
318
377
|
);
|
|
319
378
|
}
|
|
379
|
+
function DialogDescription({ className, ...props }) {
|
|
380
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
381
|
+
DialogPrimitive.Description,
|
|
382
|
+
{
|
|
383
|
+
"data-slot": "dialog-description",
|
|
384
|
+
className: cn("text-muted-foreground text-sm", className),
|
|
385
|
+
...props
|
|
386
|
+
}
|
|
387
|
+
);
|
|
388
|
+
}
|
|
320
389
|
|
|
321
|
-
// src/
|
|
322
|
-
var
|
|
390
|
+
// src/modals/Iframe3ds.tsx
|
|
391
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
323
392
|
var Iframe3ds = import_nice_modal_react.default.create(({ url }) => {
|
|
324
393
|
const modal = (0, import_nice_modal_react.useModal)();
|
|
325
394
|
(0, import_react3.useEffect)(() => {
|
|
@@ -332,10 +401,10 @@ var Iframe3ds = import_nice_modal_react.default.create(({ url }) => {
|
|
|
332
401
|
modal.reject();
|
|
333
402
|
modal.remove();
|
|
334
403
|
};
|
|
335
|
-
return /* @__PURE__ */ (0,
|
|
336
|
-
/* @__PURE__ */ (0,
|
|
337
|
-
/* @__PURE__ */ (0,
|
|
338
|
-
] });
|
|
404
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Dialog, { open: modal.visible, onOpenChange: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(DialogContent, { className: "max-h-[600px] w-full max-w-[680px] p-0", children: [
|
|
405
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DialogTitle, { className: "hidden", children: "3D Secure Verification" }),
|
|
406
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("iframe", { src: url, id: "3ds-iframe", title: "3D Secure Checkout", className: "h-[500px] w-full rounded-lg border-0" })
|
|
407
|
+
] }) });
|
|
339
408
|
});
|
|
340
409
|
Iframe3ds.displayName = "Iframe3ds";
|
|
341
410
|
|
|
@@ -523,9 +592,9 @@ var import_react4 = require("react");
|
|
|
523
592
|
|
|
524
593
|
// src/ui/label.tsx
|
|
525
594
|
var LabelPrimitive = __toESM(require("@radix-ui/react-label"), 1);
|
|
526
|
-
var
|
|
595
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
527
596
|
function Label({ className, ...props }) {
|
|
528
|
-
return /* @__PURE__ */ (0,
|
|
597
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
529
598
|
LabelPrimitive.Root,
|
|
530
599
|
{
|
|
531
600
|
"data-slot": "label",
|
|
@@ -539,23 +608,23 @@ function Label({ className, ...props }) {
|
|
|
539
608
|
}
|
|
540
609
|
|
|
541
610
|
// src/ui/switch.tsx
|
|
542
|
-
var
|
|
543
|
-
var
|
|
611
|
+
var SwitchPrimitive = __toESM(require("@radix-ui/react-switch"), 1);
|
|
612
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
544
613
|
function Switch({ className, ...props }) {
|
|
545
|
-
return /* @__PURE__ */ (0,
|
|
546
|
-
|
|
614
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
615
|
+
SwitchPrimitive.Root,
|
|
547
616
|
{
|
|
548
617
|
"data-slot": "switch",
|
|
549
618
|
className: cn(
|
|
550
|
-
"
|
|
619
|
+
"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",
|
|
551
620
|
className
|
|
552
621
|
),
|
|
553
622
|
...props,
|
|
554
|
-
children: /* @__PURE__ */ (0,
|
|
555
|
-
|
|
623
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
624
|
+
SwitchPrimitive.Thumb,
|
|
556
625
|
{
|
|
557
626
|
"data-slot": "switch-thumb",
|
|
558
|
-
className: "bg-background pointer-events-none block size-4 rounded-full
|
|
627
|
+
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"
|
|
559
628
|
}
|
|
560
629
|
)
|
|
561
630
|
}
|
|
@@ -563,23 +632,23 @@ function Switch({ className, ...props }) {
|
|
|
563
632
|
}
|
|
564
633
|
|
|
565
634
|
// src/components/common/PointsSwitch.tsx
|
|
566
|
-
var
|
|
635
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
567
636
|
var PointsSwitch = (props) => {
|
|
568
637
|
const { disabled = false, value, onChange } = props;
|
|
569
638
|
const { balance } = useSlapiBalance();
|
|
570
639
|
const id = (0, import_react4.useId)();
|
|
571
|
-
return /* @__PURE__ */ (0,
|
|
572
|
-
/* @__PURE__ */ (0,
|
|
573
|
-
/* @__PURE__ */ (0,
|
|
574
|
-
/* @__PURE__ */ (0,
|
|
640
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
|
|
641
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-3", children: [
|
|
642
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Switch, { checked: value, onCheckedChange: onChange, disabled, id }),
|
|
643
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Label, { className: "items-baseline text-xl leading-[1.3] font-semibold text-black", htmlFor: id, children: [
|
|
575
644
|
"Use Points ",
|
|
576
|
-
/* @__PURE__ */ (0,
|
|
645
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs font-medium", children: "Optional" })
|
|
577
646
|
] })
|
|
578
647
|
] }),
|
|
579
|
-
balance?.availablePoints ? /* @__PURE__ */ (0,
|
|
648
|
+
balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("p", { className: "text-sm font-medium text-black", children: [
|
|
580
649
|
formatPoints(balance.availablePoints),
|
|
581
650
|
" ",
|
|
582
|
-
/* @__PURE__ */ (0,
|
|
651
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-black/50", children: formatUSD(balance.availablePoints / pointsConverionRate) })
|
|
583
652
|
] }) : null
|
|
584
653
|
] });
|
|
585
654
|
};
|
|
@@ -608,22 +677,22 @@ var useConfig = () => {
|
|
|
608
677
|
};
|
|
609
678
|
|
|
610
679
|
// src/components/CreditCardTab/CreditCard/CardsList.tsx
|
|
611
|
-
var
|
|
680
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
612
681
|
var CardListItem = ({ card, isSelected, onSelect }) => {
|
|
613
682
|
const handleSelect = () => {
|
|
614
683
|
onSelect(card);
|
|
615
684
|
};
|
|
616
|
-
return /* @__PURE__ */ (0,
|
|
617
|
-
/* @__PURE__ */ (0,
|
|
685
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("button", { type: "button", onClick: handleSelect, className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
|
|
686
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
618
687
|
"div",
|
|
619
688
|
{
|
|
620
689
|
className: cn("flex w-11 items-center justify-center bg-black/10", {
|
|
621
690
|
"bg-primary": isSelected
|
|
622
691
|
}),
|
|
623
|
-
children: /* @__PURE__ */ (0,
|
|
692
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) })
|
|
624
693
|
}
|
|
625
694
|
),
|
|
626
|
-
/* @__PURE__ */ (0,
|
|
695
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
627
696
|
"div",
|
|
628
697
|
{
|
|
629
698
|
className: cn(
|
|
@@ -633,15 +702,15 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
|
|
|
633
702
|
}
|
|
634
703
|
),
|
|
635
704
|
children: [
|
|
636
|
-
/* @__PURE__ */ (0,
|
|
637
|
-
/* @__PURE__ */ (0,
|
|
638
|
-
/* @__PURE__ */ (0,
|
|
705
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-sm font-medium text-black", children: card.schema }) }),
|
|
706
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
707
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("p", { className: "text-sm font-medium text-[#798B95]", children: [
|
|
639
708
|
"Ending in ",
|
|
640
|
-
/* @__PURE__ */ (0,
|
|
709
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-black", children: card.lastFourNumbers })
|
|
641
710
|
] }),
|
|
642
|
-
/* @__PURE__ */ (0,
|
|
643
|
-
/* @__PURE__ */ (0,
|
|
644
|
-
/* @__PURE__ */ (0,
|
|
711
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "cursor-not-allowed", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", fill: "none", children: [
|
|
712
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("mask", { id: "mask0_188_5407", width: "20", height: "21", x: "0", y: "-1", maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { fill: "#D9D9D9", d: "M0-.5h20v20H0z" }) }),
|
|
713
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("g", { mask: "url(#mask0_188_5407)", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
645
714
|
"path",
|
|
646
715
|
{
|
|
647
716
|
fill: "#000",
|
|
@@ -659,14 +728,14 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
|
|
|
659
728
|
var CardsList = ({ selectedCard, setCard }) => {
|
|
660
729
|
const { cards, cardsIsLoading } = useCards();
|
|
661
730
|
if (cardsIsLoading) {
|
|
662
|
-
return /* @__PURE__ */ (0,
|
|
663
|
-
/* @__PURE__ */ (0,
|
|
664
|
-
/* @__PURE__ */ (0,
|
|
665
|
-
/* @__PURE__ */ (0,
|
|
731
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
|
|
732
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "bg-primary/8 h-11 animate-pulse rounded-md" }),
|
|
733
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "bg-primary/8 h-11 animate-pulse rounded-md" }),
|
|
734
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "bg-primary/8 h-11 animate-pulse rounded-md" })
|
|
666
735
|
] });
|
|
667
736
|
}
|
|
668
737
|
if (cards.length === 0) return null;
|
|
669
|
-
return /* @__PURE__ */ (0,
|
|
738
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex w-full flex-col gap-1", children: cards.map((card) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CardListItem, { isSelected: selectedCard?.id === card.id, onSelect: setCard, card }, card.id)) });
|
|
670
739
|
};
|
|
671
740
|
|
|
672
741
|
// src/components/CreditCardTab/CreditCard/CreditCardForm.tsx
|
|
@@ -676,9 +745,9 @@ var import_react_stripe_js = require("@stripe/react-stripe-js");
|
|
|
676
745
|
// src/ui/button.tsx
|
|
677
746
|
var import_react_slot = require("@radix-ui/react-slot");
|
|
678
747
|
var import_class_variance_authority = require("class-variance-authority");
|
|
679
|
-
var
|
|
748
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
680
749
|
var buttonVariants = (0, import_class_variance_authority.cva)(
|
|
681
|
-
"inline-flex
|
|
750
|
+
"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",
|
|
682
751
|
{
|
|
683
752
|
variants: {
|
|
684
753
|
variant: {
|
|
@@ -711,29 +780,29 @@ function Button({
|
|
|
711
780
|
...props
|
|
712
781
|
}) {
|
|
713
782
|
const Comp = asChild ? import_react_slot.Slot : "button";
|
|
714
|
-
return /* @__PURE__ */ (0,
|
|
783
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Comp, { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ...props });
|
|
715
784
|
}
|
|
716
785
|
|
|
717
786
|
// src/ui/checkbox.tsx
|
|
718
787
|
var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"), 1);
|
|
719
788
|
var import_lucide_react2 = require("lucide-react");
|
|
720
|
-
var
|
|
789
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
721
790
|
function Checkbox({ className, ...props }) {
|
|
722
|
-
return /* @__PURE__ */ (0,
|
|
791
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
723
792
|
CheckboxPrimitive.Root,
|
|
724
793
|
{
|
|
725
794
|
"data-slot": "checkbox",
|
|
726
795
|
className: cn(
|
|
727
|
-
"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-
|
|
796
|
+
"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",
|
|
728
797
|
className
|
|
729
798
|
),
|
|
730
799
|
...props,
|
|
731
|
-
children: /* @__PURE__ */ (0,
|
|
800
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
732
801
|
CheckboxPrimitive.Indicator,
|
|
733
802
|
{
|
|
734
803
|
"data-slot": "checkbox-indicator",
|
|
735
804
|
className: "flex items-center justify-center text-current transition-none",
|
|
736
|
-
children: /* @__PURE__ */ (0,
|
|
805
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react2.CheckIcon, { className: "size-3.5 text-white" })
|
|
737
806
|
}
|
|
738
807
|
)
|
|
739
808
|
}
|
|
@@ -741,7 +810,7 @@ function Checkbox({ className, ...props }) {
|
|
|
741
810
|
}
|
|
742
811
|
|
|
743
812
|
// src/components/CreditCardTab/CreditCard/CreditCardForm.tsx
|
|
744
|
-
var
|
|
813
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
745
814
|
var style = {
|
|
746
815
|
base: {
|
|
747
816
|
fontSize: "16px",
|
|
@@ -799,9 +868,9 @@ var CreditCardForm = ({ cancel, saveCard }) => {
|
|
|
799
868
|
setCardError("An error occurred while processing your card. Please try again.");
|
|
800
869
|
}
|
|
801
870
|
};
|
|
802
|
-
return /* @__PURE__ */ (0,
|
|
803
|
-
/* @__PURE__ */ (0,
|
|
804
|
-
/* @__PURE__ */ (0,
|
|
871
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
|
|
872
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
|
|
873
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
805
874
|
import_react_stripe_js.CardNumberElement,
|
|
806
875
|
{
|
|
807
876
|
options: {
|
|
@@ -811,8 +880,8 @@ var CreditCardForm = ({ cancel, saveCard }) => {
|
|
|
811
880
|
}
|
|
812
881
|
}
|
|
813
882
|
),
|
|
814
|
-
/* @__PURE__ */ (0,
|
|
815
|
-
/* @__PURE__ */ (0,
|
|
883
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex w-full gap-1", children: [
|
|
884
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
816
885
|
import_react_stripe_js.CardExpiryElement,
|
|
817
886
|
{
|
|
818
887
|
options: {
|
|
@@ -822,7 +891,7 @@ var CreditCardForm = ({ cancel, saveCard }) => {
|
|
|
822
891
|
}
|
|
823
892
|
}
|
|
824
893
|
),
|
|
825
|
-
/* @__PURE__ */ (0,
|
|
894
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
826
895
|
import_react_stripe_js.CardCvcElement,
|
|
827
896
|
{
|
|
828
897
|
options: {
|
|
@@ -833,24 +902,24 @@ var CreditCardForm = ({ cancel, saveCard }) => {
|
|
|
833
902
|
}
|
|
834
903
|
)
|
|
835
904
|
] }),
|
|
836
|
-
cardError && /* @__PURE__ */ (0,
|
|
905
|
+
cardError && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-destructive mt-1 text-sm", children: cardError })
|
|
837
906
|
] }),
|
|
838
|
-
/* @__PURE__ */ (0,
|
|
839
|
-
/* @__PURE__ */ (0,
|
|
840
|
-
/* @__PURE__ */ (0,
|
|
907
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
908
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Checkbox, { disabled: true, checked: true, id: "saveCard" }),
|
|
909
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Label, { className: "text-sm font-medium", htmlFor: "saveCard", children: "Save card for future purchases" })
|
|
841
910
|
] }),
|
|
842
|
-
/* @__PURE__ */ (0,
|
|
843
|
-
/* @__PURE__ */ (0,
|
|
844
|
-
/* @__PURE__ */ (0,
|
|
911
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex w-full justify-end gap-2", children: [
|
|
912
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { variant: "secondary", onClick: cancel, children: "Cancel" }),
|
|
913
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { onClick: handleSaveCard, children: "Add Card" })
|
|
845
914
|
] })
|
|
846
915
|
] });
|
|
847
916
|
};
|
|
848
917
|
|
|
849
918
|
// src/components/CreditCardTab/CreditCard/CreditCard.tsx
|
|
850
|
-
var
|
|
919
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
851
920
|
var SripeWrapper = (props) => {
|
|
852
921
|
const stripePromise = (0, import_react6.useMemo)(() => (0, import_stripe_js.loadStripe)(props.publicKey), [props.publicKey]);
|
|
853
|
-
return /* @__PURE__ */ (0,
|
|
922
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_stripe_js2.Elements, { stripe: stripePromise, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CreditCardForm, { cancel: props.onCancel, saveCard: props.saveNewCard }) });
|
|
854
923
|
};
|
|
855
924
|
var CreditCard = () => {
|
|
856
925
|
const [showForm, setShowForm] = (0, import_react6.useState)(false);
|
|
@@ -868,28 +937,28 @@ var CreditCard = () => {
|
|
|
868
937
|
const handleCancel = () => {
|
|
869
938
|
setShowForm(false);
|
|
870
939
|
};
|
|
871
|
-
return /* @__PURE__ */ (0,
|
|
872
|
-
/* @__PURE__ */ (0,
|
|
873
|
-
!showForm && /* @__PURE__ */ (0,
|
|
874
|
-
/* @__PURE__ */ (0,
|
|
940
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col items-baseline gap-4", children: [
|
|
941
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: "text-primary text-xl leading-[34px] font-semibold", children: "Your Credit Cards" }),
|
|
942
|
+
!showForm && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
|
|
943
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
875
944
|
CardsList,
|
|
876
945
|
{
|
|
877
946
|
selectedCard: selectedPaymentMethod?.type === "CREDIT_CARD" /* CREDIT_CARD */ ? selectedPaymentMethod.method : null,
|
|
878
947
|
setCard
|
|
879
948
|
}
|
|
880
949
|
),
|
|
881
|
-
config2?.stripePublicKey && /* @__PURE__ */ (0,
|
|
950
|
+
config2?.stripePublicKey && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { onClick: () => setShowForm(true), className: "text-sm font-medium text-black hover:underline", children: "Add new card" })
|
|
882
951
|
] }),
|
|
883
|
-
config2?.stripePublicKey && showForm && /* @__PURE__ */ (0,
|
|
952
|
+
config2?.stripePublicKey && showForm && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SripeWrapper, { onCancel: handleCancel, saveNewCard, publicKey: config2.stripePublicKey })
|
|
884
953
|
] });
|
|
885
954
|
};
|
|
886
955
|
|
|
887
956
|
// src/components/CreditCardTab/CreditCardTab.tsx
|
|
888
|
-
var
|
|
957
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
889
958
|
var PointsSelector = ({ isSelected, onSelect, children }) => {
|
|
890
959
|
return (
|
|
891
960
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
|
|
892
|
-
/* @__PURE__ */ (0,
|
|
961
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
893
962
|
"div",
|
|
894
963
|
{
|
|
895
964
|
onClick: onSelect,
|
|
@@ -897,19 +966,19 @@ var PointsSelector = ({ isSelected, onSelect, children }) => {
|
|
|
897
966
|
"border-primary": isSelected
|
|
898
967
|
}),
|
|
899
968
|
children: [
|
|
900
|
-
/* @__PURE__ */ (0,
|
|
901
|
-
/* @__PURE__ */ (0,
|
|
969
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cn("flex h-11 w-full", { "bg-black/4": isSelected }), children: [
|
|
970
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
902
971
|
"div",
|
|
903
972
|
{
|
|
904
973
|
className: cn("flex w-11 items-center justify-center bg-black/10", {
|
|
905
974
|
"bg-primary": isSelected
|
|
906
975
|
}),
|
|
907
|
-
children: /* @__PURE__ */ (0,
|
|
976
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) })
|
|
908
977
|
}
|
|
909
978
|
),
|
|
910
|
-
/* @__PURE__ */ (0,
|
|
979
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: cn("flex w-full items-center justify-between gap-4 px-3"), children })
|
|
911
980
|
] }),
|
|
912
|
-
isSelected && /* @__PURE__ */ (0,
|
|
981
|
+
isSelected && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "px-4 pt-6 pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { children: "Card" }) })
|
|
913
982
|
]
|
|
914
983
|
}
|
|
915
984
|
)
|
|
@@ -946,28 +1015,28 @@ var CreditCardTab = () => {
|
|
|
946
1015
|
(0, import_react7.useEffect)(() => {
|
|
947
1016
|
register(handlePay);
|
|
948
1017
|
}, [register, handlePay]);
|
|
949
|
-
return /* @__PURE__ */ (0,
|
|
950
|
-
/* @__PURE__ */ (0,
|
|
951
|
-
/* @__PURE__ */ (0,
|
|
952
|
-
/* @__PURE__ */ (0,
|
|
953
|
-
usePoints && /* @__PURE__ */ (0,
|
|
954
|
-
/* @__PURE__ */ (0,
|
|
955
|
-
/* @__PURE__ */ (0,
|
|
956
|
-
isBalanceLoading ? /* @__PURE__ */ (0,
|
|
957
|
-
balance?.availablePoints ? /* @__PURE__ */ (0,
|
|
1018
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
|
|
1019
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "border-b-1 border-black/7 px-7 py-6", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CreditCard, {}) }),
|
|
1020
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col gap-6 px-7 py-6", children: [
|
|
1021
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PointsSwitch, { disabled: true, value: usePoints, onChange: setUsePoints }),
|
|
1022
|
+
usePoints && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col gap-1", children: [
|
|
1023
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(PointsSelector, { onSelect: () => setSelectedPointsType("slapi"), isSelected: selectedPointsType === "slapi", children: [
|
|
1024
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-sm font-medium text-black", children: "from [Brand] Balance" }) }),
|
|
1025
|
+
isBalanceLoading ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "h-4 w-6 animate-pulse bg-gray-200" }) : !balance?.availablePoints && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-sm font-medium text-black", children: "No points available" }),
|
|
1026
|
+
balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("p", { className: "text-sm font-medium text-black", children: [
|
|
958
1027
|
formatPoints(balance.availablePoints),
|
|
959
1028
|
" ",
|
|
960
|
-
/* @__PURE__ */ (0,
|
|
1029
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-black/50", children: formatUSD(balance.availablePoints / pointsConverionRate) })
|
|
961
1030
|
] }) : null
|
|
962
1031
|
] }),
|
|
963
|
-
/* @__PURE__ */ (0,
|
|
1032
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
964
1033
|
PointsSelector,
|
|
965
1034
|
{
|
|
966
1035
|
onSelect: () => setSelectedPointsType("wallet"),
|
|
967
1036
|
isSelected: selectedPointsType === "wallet",
|
|
968
1037
|
children: [
|
|
969
|
-
/* @__PURE__ */ (0,
|
|
970
|
-
/* @__PURE__ */ (0,
|
|
1038
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-sm font-medium text-black", children: "from Crypto Wallet" }) }),
|
|
1039
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("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" })
|
|
971
1040
|
]
|
|
972
1041
|
}
|
|
973
1042
|
)
|
|
@@ -1150,13 +1219,13 @@ var useCryptoPayment = () => {
|
|
|
1150
1219
|
|
|
1151
1220
|
// src/components/CryptoTab/Crypto/ConnectButton.tsx
|
|
1152
1221
|
var import_rainbowkit = require("@rainbow-me/rainbowkit");
|
|
1153
|
-
var
|
|
1222
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
1154
1223
|
var ConnectButton = () => {
|
|
1155
|
-
return /* @__PURE__ */ (0,
|
|
1224
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_rainbowkit.ConnectButton.Custom, { children: ({ mounted, chain, account, openAccountModal, openChainModal, openConnectModal }) => {
|
|
1156
1225
|
if (!mounted) return null;
|
|
1157
|
-
return /* @__PURE__ */ (0,
|
|
1226
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: (() => {
|
|
1158
1227
|
if (!mounted || !account || !chain) {
|
|
1159
|
-
return /* @__PURE__ */ (0,
|
|
1228
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1160
1229
|
"button",
|
|
1161
1230
|
{
|
|
1162
1231
|
className: "h-[34px] rounded-md border-1 border-black px-3 text-sm font-medium",
|
|
@@ -1166,7 +1235,7 @@ var ConnectButton = () => {
|
|
|
1166
1235
|
);
|
|
1167
1236
|
}
|
|
1168
1237
|
if (chain.unsupported) {
|
|
1169
|
-
return /* @__PURE__ */ (0,
|
|
1238
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1170
1239
|
"button",
|
|
1171
1240
|
{
|
|
1172
1241
|
className: "h-[34px] rounded-md border-1 border-black px-3 text-sm font-medium text-red-500",
|
|
@@ -1175,13 +1244,13 @@ var ConnectButton = () => {
|
|
|
1175
1244
|
}
|
|
1176
1245
|
);
|
|
1177
1246
|
}
|
|
1178
|
-
return /* @__PURE__ */ (0,
|
|
1247
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
1179
1248
|
"button",
|
|
1180
1249
|
{
|
|
1181
1250
|
className: "flex h-[34px] items-center gap-2 rounded-md border-1 border-black px-1.5 text-sm font-medium",
|
|
1182
1251
|
onClick: openAccountModal,
|
|
1183
1252
|
children: [
|
|
1184
|
-
chain.hasIcon && /* @__PURE__ */ (0,
|
|
1253
|
+
chain.hasIcon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "h-6 w-6 overflow-hidden rounded-full", style: { background: chain.iconBackground }, children: chain.iconUrl && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("img", { alt: chain.name ?? "Chain icon", src: chain.iconUrl }) }),
|
|
1185
1254
|
account.displayName
|
|
1186
1255
|
]
|
|
1187
1256
|
}
|
|
@@ -1191,29 +1260,29 @@ var ConnectButton = () => {
|
|
|
1191
1260
|
};
|
|
1192
1261
|
|
|
1193
1262
|
// src/config/symbolLogos.tsx
|
|
1194
|
-
var
|
|
1195
|
-
var MOCA_SVG = /* @__PURE__ */ (0,
|
|
1196
|
-
/* @__PURE__ */ (0,
|
|
1197
|
-
/* @__PURE__ */ (0,
|
|
1263
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
1264
|
+
var MOCA_SVG = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
|
|
1265
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { cx: "14", cy: "14", r: "13.5", fill: "#C15F97" }),
|
|
1266
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1198
1267
|
"path",
|
|
1199
1268
|
{
|
|
1200
1269
|
fill: "#fff",
|
|
1201
1270
|
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"
|
|
1202
1271
|
}
|
|
1203
1272
|
),
|
|
1204
|
-
/* @__PURE__ */ (0,
|
|
1273
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { cx: "16", cy: "14", r: "1.5", fill: "#fff" })
|
|
1205
1274
|
] });
|
|
1206
|
-
var USDC_SVG = /* @__PURE__ */ (0,
|
|
1207
|
-
/* @__PURE__ */ (0,
|
|
1208
|
-
/* @__PURE__ */ (0,
|
|
1209
|
-
/* @__PURE__ */ (0,
|
|
1275
|
+
var USDC_SVG = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
|
|
1276
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("g", { clipPath: "url(#clip0_528_9163)", children: [
|
|
1277
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { fill: "#2775CA", d: "M14 28c7.76 0 14-6.24 14-14S21.76 0 14 0 0 6.24 0 14s6.24 14 14 14Z" }),
|
|
1278
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1210
1279
|
"path",
|
|
1211
1280
|
{
|
|
1212
1281
|
fill: "#fff",
|
|
1213
1282
|
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"
|
|
1214
1283
|
}
|
|
1215
1284
|
),
|
|
1216
|
-
/* @__PURE__ */ (0,
|
|
1285
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1217
1286
|
"path",
|
|
1218
1287
|
{
|
|
1219
1288
|
fill: "#fff",
|
|
@@ -1221,11 +1290,11 @@ var USDC_SVG = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { xmlns: "h
|
|
|
1221
1290
|
}
|
|
1222
1291
|
)
|
|
1223
1292
|
] }),
|
|
1224
|
-
/* @__PURE__ */ (0,
|
|
1293
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("clipPath", { id: "clip0_528_9163", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { fill: "#fff", d: "M0 0h28v28H0z" }) }) })
|
|
1225
1294
|
] });
|
|
1226
|
-
var USDT_SVG = /* @__PURE__ */ (0,
|
|
1227
|
-
/* @__PURE__ */ (0,
|
|
1228
|
-
/* @__PURE__ */ (0,
|
|
1295
|
+
var USDT_SVG = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
|
|
1296
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { fill: "#26A17B", d: "M14 28a14 14 0 1 0 0-28 14 14 0 0 0 0 28Z" }),
|
|
1297
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1229
1298
|
"path",
|
|
1230
1299
|
{
|
|
1231
1300
|
fill: "#fff",
|
|
@@ -1233,23 +1302,23 @@ var USDT_SVG = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { xmlns: "h
|
|
|
1233
1302
|
}
|
|
1234
1303
|
)
|
|
1235
1304
|
] });
|
|
1236
|
-
var WETH_SVG = /* @__PURE__ */ (0,
|
|
1237
|
-
/* @__PURE__ */ (0,
|
|
1238
|
-
/* @__PURE__ */ (0,
|
|
1305
|
+
var WETH_SVG = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", width: "28", height: "28", viewBox: "0 0 24 24", children: [
|
|
1306
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("g", { clipPath: "url(#clip0_528_9173)", children: [
|
|
1307
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1239
1308
|
"path",
|
|
1240
1309
|
{
|
|
1241
1310
|
fill: "#000",
|
|
1242
1311
|
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"
|
|
1243
1312
|
}
|
|
1244
1313
|
),
|
|
1245
|
-
/* @__PURE__ */ (0,
|
|
1314
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1246
1315
|
"path",
|
|
1247
1316
|
{
|
|
1248
1317
|
fill: "#F61F7D",
|
|
1249
1318
|
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"
|
|
1250
1319
|
}
|
|
1251
1320
|
),
|
|
1252
|
-
/* @__PURE__ */ (0,
|
|
1321
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1253
1322
|
"path",
|
|
1254
1323
|
{
|
|
1255
1324
|
fill: "#000",
|
|
@@ -1258,8 +1327,8 @@ var WETH_SVG = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { xmlns: "h
|
|
|
1258
1327
|
clipRule: "evenodd"
|
|
1259
1328
|
}
|
|
1260
1329
|
),
|
|
1261
|
-
/* @__PURE__ */ (0,
|
|
1262
|
-
/* @__PURE__ */ (0,
|
|
1330
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { fill: "#fff", d: "M24 12.17a10.8 10.8 0 1 1-21.6 0 10.8 10.8 0 0 1 21.6 0Z" }),
|
|
1331
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1263
1332
|
"path",
|
|
1264
1333
|
{
|
|
1265
1334
|
fill: "#000",
|
|
@@ -1268,8 +1337,8 @@ var WETH_SVG = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { xmlns: "h
|
|
|
1268
1337
|
clipRule: "evenodd"
|
|
1269
1338
|
}
|
|
1270
1339
|
),
|
|
1271
|
-
/* @__PURE__ */ (0,
|
|
1272
|
-
/* @__PURE__ */ (0,
|
|
1340
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { fill: "#000", fillRule: "evenodd", d: "M3.02 10.63.7 8.75l.74-.86 2.34 1.87-.75.87Z", clipRule: "evenodd" }),
|
|
1341
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1273
1342
|
"path",
|
|
1274
1343
|
{
|
|
1275
1344
|
fill: "#000",
|
|
@@ -1277,7 +1346,7 @@ var WETH_SVG = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { xmlns: "h
|
|
|
1277
1346
|
}
|
|
1278
1347
|
)
|
|
1279
1348
|
] }),
|
|
1280
|
-
/* @__PURE__ */ (0,
|
|
1349
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("clipPath", { id: "clip0_528_9173", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { fill: "#fff", d: "M0 0h24v24H0z" }) }) })
|
|
1281
1350
|
] });
|
|
1282
1351
|
var symbolLogos = {
|
|
1283
1352
|
MOCA: MOCA_SVG,
|
|
@@ -1290,13 +1359,13 @@ function getSymbolLogo(symbol) {
|
|
|
1290
1359
|
}
|
|
1291
1360
|
|
|
1292
1361
|
// src/components/CryptoTab/Crypto/Logos.tsx
|
|
1293
|
-
var
|
|
1362
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
1294
1363
|
var Logos = () => {
|
|
1295
|
-
return /* @__PURE__ */ (0,
|
|
1296
|
-
/* @__PURE__ */ (0,
|
|
1297
|
-
/* @__PURE__ */ (0,
|
|
1298
|
-
/* @__PURE__ */ (0,
|
|
1299
|
-
/* @__PURE__ */ (0,
|
|
1364
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex", children: [
|
|
1365
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "rounded-full border border-[#F5F7FA]", children: getSymbolLogo("MOCA") }),
|
|
1366
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "-ml-2.5 rounded-full border border-[#F5F7FA]", children: getSymbolLogo("USDC") }),
|
|
1367
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "-ml-2.5 rounded-full border border-[#F5F7FA]", children: getSymbolLogo("USDT") }),
|
|
1368
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "-ml-2.5 rounded-full border border-[#F5F7FA] bg-[#F5F7FA]", children: getSymbolLogo("WETH") })
|
|
1300
1369
|
] });
|
|
1301
1370
|
};
|
|
1302
1371
|
|
|
@@ -1391,7 +1460,7 @@ function useBaseNativeToken() {
|
|
|
1391
1460
|
}
|
|
1392
1461
|
|
|
1393
1462
|
// src/modals/CryptoSelectModal.tsx
|
|
1394
|
-
var
|
|
1463
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
1395
1464
|
var CryptoSelectModal = import_nice_modal_react3.default.create(() => {
|
|
1396
1465
|
const modal = (0, import_nice_modal_react3.useModal)();
|
|
1397
1466
|
const { isLoading, error, erc20Balances } = useBaseERC20Token();
|
|
@@ -1401,113 +1470,116 @@ var CryptoSelectModal = import_nice_modal_react3.default.create(() => {
|
|
|
1401
1470
|
modal.remove();
|
|
1402
1471
|
setSelectedPaymentMethod({ type: "CRYPTO" /* CRYPTO */, method: coin });
|
|
1403
1472
|
};
|
|
1404
|
-
return /* @__PURE__ */ (0,
|
|
1405
|
-
/* @__PURE__ */ (0,
|
|
1406
|
-
|
|
1407
|
-
/* @__PURE__ */ (0,
|
|
1408
|
-
|
|
1409
|
-
"
|
|
1410
|
-
{
|
|
1411
|
-
|
|
1412
|
-
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"
|
|
1413
|
-
}
|
|
1414
|
-
) }) })
|
|
1415
|
-
] }) }),
|
|
1416
|
-
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-col gap-4 px-7 py-6", children: [
|
|
1417
|
-
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h3", { className: "text-primary text-xl font-semibold", children: "Tokens with wallet balance" }),
|
|
1418
|
-
(error || nativeError) && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-center text-sm text-red-500", children: "Something wrong" }),
|
|
1419
|
-
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
|
|
1420
|
-
isLoadingNative && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
|
|
1421
|
-
nativeBalance && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
1422
|
-
"button",
|
|
1473
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Dialog, { open: modal.visible, onOpenChange: modal.remove, children: [
|
|
1474
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DialogDescription, { className: "hidden", children: "Crypto Select Modal" }),
|
|
1475
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(DialogContent, { showCloseButton: false, className: "gap-0 p-0", children: [
|
|
1476
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex flex-col gap-6 px-7 py-6", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
|
|
1477
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { className: "rounded-md hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { stroke: "#000", d: "m15 6.5-6 6 6 6" }) }) }),
|
|
1478
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DialogTitle, { className: "text-primary text-2xl font-semibold", children: "Select a token" }),
|
|
1479
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { className: "rounded-md p-1 hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "17", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
1480
|
+
"path",
|
|
1423
1481
|
{
|
|
1424
|
-
|
|
1425
|
-
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
|
-
|
|
1435
|
-
),
|
|
1436
|
-
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.symbol })
|
|
1437
|
-
] }),
|
|
1438
|
-
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.formatted })
|
|
1439
|
-
]
|
|
1440
|
-
},
|
|
1441
|
-
nativeBalance.symbol
|
|
1442
|
-
),
|
|
1443
|
-
isLoading && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
|
|
1444
|
-
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
|
|
1445
|
-
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
|
|
1446
|
-
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
|
|
1447
|
-
] }),
|
|
1448
|
-
erc20Balances.map((coin) => {
|
|
1449
|
-
const Icon = getSymbolLogo(coin.symbol);
|
|
1450
|
-
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
1482
|
+
fill: "#000",
|
|
1483
|
+
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"
|
|
1484
|
+
}
|
|
1485
|
+
) }) })
|
|
1486
|
+
] }) }),
|
|
1487
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-col gap-4 px-7 py-6", children: [
|
|
1488
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { className: "text-primary text-xl font-semibold", children: "Tokens with wallet balance" }),
|
|
1489
|
+
(error || nativeError) && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-center text-sm text-red-500", children: "Something wrong" }),
|
|
1490
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
|
|
1491
|
+
isLoadingNative && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
|
|
1492
|
+
nativeBalance && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
1451
1493
|
"button",
|
|
1452
1494
|
{
|
|
1453
|
-
className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 hover:bg-gray-100
|
|
1454
|
-
onClick: () => handleSelect(
|
|
1495
|
+
className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 hover:bg-gray-100",
|
|
1496
|
+
onClick: () => handleSelect(nativeBalance),
|
|
1455
1497
|
children: [
|
|
1456
|
-
/* @__PURE__ */ (0,
|
|
1457
|
-
|
|
1458
|
-
|
|
1498
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
1499
|
+
nativeBalance.logoURI && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
1500
|
+
"img",
|
|
1501
|
+
{
|
|
1502
|
+
className: "h-8 w-8 shrink-0",
|
|
1503
|
+
src: nativeBalance.logoURI,
|
|
1504
|
+
alt: `${nativeBalance.symbol} logo`
|
|
1505
|
+
}
|
|
1506
|
+
),
|
|
1507
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.symbol })
|
|
1459
1508
|
] }),
|
|
1460
|
-
/* @__PURE__ */ (0,
|
|
1509
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.formatted })
|
|
1461
1510
|
]
|
|
1462
1511
|
},
|
|
1463
|
-
|
|
1464
|
-
)
|
|
1465
|
-
|
|
1512
|
+
nativeBalance.symbol
|
|
1513
|
+
),
|
|
1514
|
+
isLoading && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
|
|
1515
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
|
|
1516
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
|
|
1517
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
|
|
1518
|
+
] }),
|
|
1519
|
+
erc20Balances.map((coin) => {
|
|
1520
|
+
const Icon = getSymbolLogo(coin.symbol);
|
|
1521
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
1522
|
+
"button",
|
|
1523
|
+
{
|
|
1524
|
+
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",
|
|
1525
|
+
onClick: () => handleSelect(coin),
|
|
1526
|
+
children: [
|
|
1527
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
1528
|
+
Boolean(Icon) && Icon,
|
|
1529
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm font-medium", children: coin.symbol })
|
|
1530
|
+
] }),
|
|
1531
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm font-medium", children: coin.formatted })
|
|
1532
|
+
]
|
|
1533
|
+
},
|
|
1534
|
+
coin.symbol
|
|
1535
|
+
);
|
|
1536
|
+
})
|
|
1537
|
+
] })
|
|
1466
1538
|
] })
|
|
1467
1539
|
] })
|
|
1468
|
-
] })
|
|
1540
|
+
] });
|
|
1469
1541
|
});
|
|
1470
1542
|
CryptoSelectModal.displayName = "CryptoSelectModal";
|
|
1471
1543
|
|
|
1472
1544
|
// src/components/CryptoTab/Crypto/SelectCoinButton.tsx
|
|
1473
|
-
var
|
|
1545
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
1474
1546
|
var SelectCoinButton = () => {
|
|
1475
1547
|
const openModal = () => {
|
|
1476
1548
|
import_nice_modal_react4.default.show(CryptoSelectModal);
|
|
1477
1549
|
};
|
|
1478
|
-
return /* @__PURE__ */ (0,
|
|
1479
|
-
/* @__PURE__ */ (0,
|
|
1480
|
-
/* @__PURE__ */ (0,
|
|
1481
|
-
/* @__PURE__ */ (0,
|
|
1482
|
-
/* @__PURE__ */ (0,
|
|
1550
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("button", { onClick: openModal, type: "button", className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
|
|
1551
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "bg-primary flex w-11 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white" }) }),
|
|
1552
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex w-full items-center justify-between px-3", children: [
|
|
1553
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "font-medium text-black/50", children: "Select a token" }) }),
|
|
1554
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { stroke: "#000", strokeLinecap: "round", d: "m6 12.43 4-4-4-4" }) })
|
|
1483
1555
|
] })
|
|
1484
1556
|
] });
|
|
1485
1557
|
};
|
|
1486
1558
|
|
|
1487
1559
|
// src/components/CryptoTab/Crypto/SelectedCoin.tsx
|
|
1488
|
-
var
|
|
1560
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
1489
1561
|
var SelectedCoin = (props) => {
|
|
1490
1562
|
const { coin, balance, logoURI } = props;
|
|
1491
1563
|
const Icon = getSymbolLogo(coin);
|
|
1492
|
-
return /* @__PURE__ */ (0,
|
|
1493
|
-
/* @__PURE__ */ (0,
|
|
1494
|
-
/* @__PURE__ */ (0,
|
|
1495
|
-
/* @__PURE__ */ (0,
|
|
1564
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
|
|
1565
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "bg-primary flex w-11 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) }) }),
|
|
1566
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "border-primary flex w-full items-center justify-between rounded-r-md border-1 !border-l-0 px-3", children: [
|
|
1567
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-1", children: [
|
|
1496
1568
|
Icon,
|
|
1497
|
-
!Icon && logoURI && /* @__PURE__ */ (0,
|
|
1498
|
-
/* @__PURE__ */ (0,
|
|
1499
|
-
/* @__PURE__ */ (0,
|
|
1569
|
+
!Icon && logoURI && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("img", { className: "mr-1 h-8 w-8 shrink-0", src: logoURI, alt: `${coin} logo` }),
|
|
1570
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "font-semibold", children: coin }),
|
|
1571
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M6 12.4341L10 8.43408L6 4.43408", stroke: "black", strokeLinecap: "round" }) })
|
|
1500
1572
|
] }),
|
|
1501
|
-
/* @__PURE__ */ (0,
|
|
1573
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("p", { className: "text-xs font-medium text-[#798B95]", children: [
|
|
1502
1574
|
"Wallet balance ",
|
|
1503
|
-
/* @__PURE__ */ (0,
|
|
1575
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-black", children: balance })
|
|
1504
1576
|
] })
|
|
1505
1577
|
] })
|
|
1506
1578
|
] });
|
|
1507
1579
|
};
|
|
1508
1580
|
|
|
1509
1581
|
// src/components/CryptoTab/Crypto/Crypto.tsx
|
|
1510
|
-
var
|
|
1582
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
1511
1583
|
var Crypto = () => {
|
|
1512
1584
|
const { address } = (0, import_wagmi4.useAccount)();
|
|
1513
1585
|
const { selectedPaymentMethod } = useSpreePaymentMethod();
|
|
@@ -1531,14 +1603,14 @@ var Crypto = () => {
|
|
|
1531
1603
|
(0, import_react8.useEffect)(() => {
|
|
1532
1604
|
register(handlePay);
|
|
1533
1605
|
}, [register, handlePay]);
|
|
1534
|
-
return /* @__PURE__ */ (0,
|
|
1535
|
-
/* @__PURE__ */ (0,
|
|
1536
|
-
/* @__PURE__ */ (0,
|
|
1537
|
-
/* @__PURE__ */ (0,
|
|
1606
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col items-baseline gap-4", children: [
|
|
1607
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex w-full items-center justify-between gap-4", children: [
|
|
1608
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h3", { className: "text-primary text-xl leading-[1.7] font-semibold", children: "Pay with Crypto" }),
|
|
1609
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ConnectButton, {})
|
|
1538
1610
|
] }),
|
|
1539
|
-
!isWalletConnected && /* @__PURE__ */ (0,
|
|
1540
|
-
isWalletConnected && /* @__PURE__ */ (0,
|
|
1541
|
-
selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */ (0,
|
|
1611
|
+
!isWalletConnected && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Logos, {}),
|
|
1612
|
+
isWalletConnected && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
|
|
1613
|
+
selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
1542
1614
|
SelectedCoin,
|
|
1543
1615
|
{
|
|
1544
1616
|
coin: selectedPaymentMethod.method.symbol,
|
|
@@ -1546,13 +1618,13 @@ var Crypto = () => {
|
|
|
1546
1618
|
logoURI: selectedPaymentMethod.method.logoURI
|
|
1547
1619
|
}
|
|
1548
1620
|
),
|
|
1549
|
-
/* @__PURE__ */ (0,
|
|
1621
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SelectCoinButton, {})
|
|
1550
1622
|
] })
|
|
1551
1623
|
] });
|
|
1552
1624
|
};
|
|
1553
1625
|
|
|
1554
1626
|
// src/components/CryptoTab/Crypto/CryptoWrapper.tsx
|
|
1555
|
-
var
|
|
1627
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
1556
1628
|
var queryClient = new import_react_query.QueryClient();
|
|
1557
1629
|
var connectors = (0, import_rainbowkit2.connectorsForWallets)(
|
|
1558
1630
|
[
|
|
@@ -1570,22 +1642,22 @@ var config = (0, import_wagmi5.createConfig)({
|
|
|
1570
1642
|
ssr: true
|
|
1571
1643
|
});
|
|
1572
1644
|
var CryptoWrapper = () => {
|
|
1573
|
-
return /* @__PURE__ */ (0,
|
|
1645
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_wagmi5.WagmiProvider, { config, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_rainbowkit2.RainbowKitProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_nice_modal_react5.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Crypto, {}) }) }) }) });
|
|
1574
1646
|
};
|
|
1575
1647
|
|
|
1576
1648
|
// src/components/CryptoTab/CryptoTab.tsx
|
|
1577
|
-
var
|
|
1649
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
1578
1650
|
var CryptoTab = () => {
|
|
1579
|
-
return /* @__PURE__ */ (0,
|
|
1580
|
-
/* @__PURE__ */ (0,
|
|
1581
|
-
/* @__PURE__ */ (0,
|
|
1651
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
|
|
1652
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "border-b-1 border-black/7 px-7 py-6", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CryptoWrapper, {}) }),
|
|
1653
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "px-7 py-6", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PointsSwitch, { disabled: true }) })
|
|
1582
1654
|
] });
|
|
1583
1655
|
};
|
|
1584
1656
|
|
|
1585
1657
|
// src/components/TabButtons.tsx
|
|
1586
|
-
var
|
|
1658
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
1587
1659
|
var TabButton = ({ isActive, children, onClick }) => {
|
|
1588
|
-
return /* @__PURE__ */ (0,
|
|
1660
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
1589
1661
|
"button",
|
|
1590
1662
|
{
|
|
1591
1663
|
onClick,
|
|
@@ -1605,62 +1677,62 @@ var TabButtons = (props) => {
|
|
|
1605
1677
|
onChange({ type, method: null });
|
|
1606
1678
|
}
|
|
1607
1679
|
};
|
|
1608
|
-
return /* @__PURE__ */ (0,
|
|
1609
|
-
/* @__PURE__ */ (0,
|
|
1610
|
-
/* @__PURE__ */ (0,
|
|
1680
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex gap-2", children: [
|
|
1681
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(TabButton, { onClick: handleChange("CREDIT_CARD" /* CREDIT_CARD */), isActive: value === "CREDIT_CARD" /* CREDIT_CARD */, children: [
|
|
1682
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
1611
1683
|
"path",
|
|
1612
1684
|
{
|
|
1613
1685
|
fill: "currentColor",
|
|
1614
1686
|
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"
|
|
1615
1687
|
}
|
|
1616
1688
|
) }),
|
|
1617
|
-
/* @__PURE__ */ (0,
|
|
1689
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-sm font-medium", children: "Card" })
|
|
1618
1690
|
] }),
|
|
1619
|
-
/* @__PURE__ */ (0,
|
|
1620
|
-
/* @__PURE__ */ (0,
|
|
1621
|
-
/* @__PURE__ */ (0,
|
|
1691
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(TabButton, { onClick: handleChange("CRYPTO" /* CRYPTO */), isActive: value === "CRYPTO" /* CRYPTO */, children: [
|
|
1692
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("svg", { className: "my-1", xmlns: "http://www.w3.org/2000/svg", width: "30", height: "16", fill: "none", children: [
|
|
1693
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
1622
1694
|
"path",
|
|
1623
1695
|
{
|
|
1624
1696
|
fill: "currentColor",
|
|
1625
1697
|
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"
|
|
1626
1698
|
}
|
|
1627
1699
|
),
|
|
1628
|
-
/* @__PURE__ */ (0,
|
|
1700
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
1629
1701
|
"path",
|
|
1630
1702
|
{
|
|
1631
1703
|
fill: "currentColor",
|
|
1632
1704
|
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"
|
|
1633
1705
|
}
|
|
1634
1706
|
),
|
|
1635
|
-
/* @__PURE__ */ (0,
|
|
1707
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "2" })
|
|
1636
1708
|
] }),
|
|
1637
|
-
/* @__PURE__ */ (0,
|
|
1709
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-sm font-medium", children: "Crypto" })
|
|
1638
1710
|
] })
|
|
1639
1711
|
] });
|
|
1640
1712
|
};
|
|
1641
1713
|
|
|
1642
1714
|
// src/components/Tabs.tsx
|
|
1643
|
-
var
|
|
1715
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
1644
1716
|
var Tabs = () => {
|
|
1645
1717
|
const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
|
|
1646
|
-
return /* @__PURE__ */ (0,
|
|
1647
|
-
/* @__PURE__ */ (0,
|
|
1648
|
-
/* @__PURE__ */ (0,
|
|
1649
|
-
/* @__PURE__ */ (0,
|
|
1718
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "mb-4 rounded-2xl border border-black/25 bg-white", children: [
|
|
1719
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex w-full flex-col gap-4 border-b-1 border-black/7 px-7 py-6", children: [
|
|
1720
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("h2", { className: "text-primary text-2xl font-semibold", children: "Choose a Payment Method" }),
|
|
1721
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
|
|
1650
1722
|
] }),
|
|
1651
|
-
selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ (0,
|
|
1652
|
-
selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ (0,
|
|
1723
|
+
selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CreditCardTab, {}),
|
|
1724
|
+
selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CryptoTab, {})
|
|
1653
1725
|
] });
|
|
1654
1726
|
};
|
|
1655
1727
|
|
|
1656
1728
|
// src/SpreePayContent.tsx
|
|
1657
|
-
var
|
|
1729
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
1658
1730
|
var SpreePayContent = (props) => {
|
|
1659
|
-
const { amount, onProcess } = props;
|
|
1660
|
-
return /* @__PURE__ */ (0,
|
|
1661
|
-
/* @__PURE__ */ (0,
|
|
1662
|
-
/* @__PURE__ */ (0,
|
|
1663
|
-
/* @__PURE__ */ (0,
|
|
1731
|
+
const { amount, onProcess, isProcessing } = props;
|
|
1732
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "w-full", children: [
|
|
1733
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Tabs, {}),
|
|
1734
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CheckoutButton, { isProcessing, onCheckout: onProcess, amount }),
|
|
1735
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SpreeLegal, {})
|
|
1664
1736
|
] });
|
|
1665
1737
|
};
|
|
1666
1738
|
|
|
@@ -1732,7 +1804,7 @@ function useKeycloakSSO(config2) {
|
|
|
1732
1804
|
}
|
|
1733
1805
|
|
|
1734
1806
|
// src/SpreePay.tsx
|
|
1735
|
-
var
|
|
1807
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
1736
1808
|
var envConfig = {
|
|
1737
1809
|
dev: {
|
|
1738
1810
|
bookit: {
|
|
@@ -1799,23 +1871,17 @@ var SpreePay = ({ className, ...rest }) => {
|
|
|
1799
1871
|
}
|
|
1800
1872
|
}, [env.accessToken, environment, tenantId, accessToken]);
|
|
1801
1873
|
if (isChecking) {
|
|
1802
|
-
return /* @__PURE__ */ (0,
|
|
1803
|
-
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "sl-spreepay__portal" }),
|
|
1804
|
-
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "w-full text-center text-sm", children: "Loading..." })
|
|
1805
|
-
] });
|
|
1874
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { ref: rootRef, className: cn("sl-spreepay", className), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "w-full text-center text-sm", children: "Loading..." }) });
|
|
1806
1875
|
}
|
|
1807
1876
|
if (error) {
|
|
1808
|
-
return /* @__PURE__ */ (0,
|
|
1809
|
-
|
|
1810
|
-
|
|
1811
|
-
|
|
1812
|
-
error.message
|
|
1813
|
-
] })
|
|
1814
|
-
] });
|
|
1877
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { ref: rootRef, className: cn("sl-spreepay", className), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("p", { className: "w-full text-center text-sm", children: [
|
|
1878
|
+
"Error: ",
|
|
1879
|
+
error.message
|
|
1880
|
+
] }) });
|
|
1815
1881
|
}
|
|
1816
|
-
return /* @__PURE__ */ (0,
|
|
1817
|
-
/* @__PURE__ */ (0,
|
|
1818
|
-
/* @__PURE__ */ (0,
|
|
1882
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { ref: rootRef, className: cn("sl-spreepay", className), children: [
|
|
1883
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "sl-spreepay__portal" }),
|
|
1884
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1819
1885
|
import_swr4.SWRConfig,
|
|
1820
1886
|
{
|
|
1821
1887
|
value: {
|
|
@@ -1824,7 +1890,7 @@ var SpreePay = ({ className, ...rest }) => {
|
|
|
1824
1890
|
revalidateIfStale: false,
|
|
1825
1891
|
revalidateOnReconnect: false
|
|
1826
1892
|
},
|
|
1827
|
-
children: /* @__PURE__ */ (0,
|
|
1893
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_nice_modal_react6.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SpreePayContent, { ...rest }) }) })
|
|
1828
1894
|
}
|
|
1829
1895
|
)
|
|
1830
1896
|
] });
|