@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.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
|
|
|
@@ -508,12 +577,15 @@ var cardPayment = async ({ card, hash, redirect3dsURI }) => {
|
|
|
508
577
|
if (paymentIntent) {
|
|
509
578
|
const { data: validateData } = await SlapiPaymentService.validate3DS({ paymentId: paymentResData.id });
|
|
510
579
|
return {
|
|
511
|
-
status: validateData.status
|
|
580
|
+
status: validateData.status,
|
|
581
|
+
txHash: null,
|
|
582
|
+
paymentId: paymentResData.id
|
|
512
583
|
};
|
|
513
584
|
}
|
|
514
585
|
}
|
|
515
586
|
return {
|
|
516
587
|
status: paymentResData.status,
|
|
588
|
+
txHash: null,
|
|
517
589
|
paymentId: paymentResData.id
|
|
518
590
|
};
|
|
519
591
|
};
|
|
@@ -523,9 +595,9 @@ var import_react4 = require("react");
|
|
|
523
595
|
|
|
524
596
|
// src/ui/label.tsx
|
|
525
597
|
var LabelPrimitive = __toESM(require("@radix-ui/react-label"), 1);
|
|
526
|
-
var
|
|
598
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
527
599
|
function Label({ className, ...props }) {
|
|
528
|
-
return /* @__PURE__ */ (0,
|
|
600
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
529
601
|
LabelPrimitive.Root,
|
|
530
602
|
{
|
|
531
603
|
"data-slot": "label",
|
|
@@ -539,23 +611,23 @@ function Label({ className, ...props }) {
|
|
|
539
611
|
}
|
|
540
612
|
|
|
541
613
|
// src/ui/switch.tsx
|
|
542
|
-
var
|
|
543
|
-
var
|
|
614
|
+
var SwitchPrimitive = __toESM(require("@radix-ui/react-switch"), 1);
|
|
615
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
544
616
|
function Switch({ className, ...props }) {
|
|
545
|
-
return /* @__PURE__ */ (0,
|
|
546
|
-
|
|
617
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
618
|
+
SwitchPrimitive.Root,
|
|
547
619
|
{
|
|
548
620
|
"data-slot": "switch",
|
|
549
621
|
className: cn(
|
|
550
|
-
"
|
|
622
|
+
"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
623
|
className
|
|
552
624
|
),
|
|
553
625
|
...props,
|
|
554
|
-
children: /* @__PURE__ */ (0,
|
|
555
|
-
|
|
626
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
627
|
+
SwitchPrimitive.Thumb,
|
|
556
628
|
{
|
|
557
629
|
"data-slot": "switch-thumb",
|
|
558
|
-
className: "bg-background pointer-events-none block size-4 rounded-full
|
|
630
|
+
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
631
|
}
|
|
560
632
|
)
|
|
561
633
|
}
|
|
@@ -563,23 +635,23 @@ function Switch({ className, ...props }) {
|
|
|
563
635
|
}
|
|
564
636
|
|
|
565
637
|
// src/components/common/PointsSwitch.tsx
|
|
566
|
-
var
|
|
638
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
567
639
|
var PointsSwitch = (props) => {
|
|
568
640
|
const { disabled = false, value, onChange } = props;
|
|
569
641
|
const { balance } = useSlapiBalance();
|
|
570
642
|
const id = (0, import_react4.useId)();
|
|
571
|
-
return /* @__PURE__ */ (0,
|
|
572
|
-
/* @__PURE__ */ (0,
|
|
573
|
-
/* @__PURE__ */ (0,
|
|
574
|
-
/* @__PURE__ */ (0,
|
|
643
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
|
|
644
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-3", children: [
|
|
645
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Switch, { checked: value, onCheckedChange: onChange, disabled, id }),
|
|
646
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Label, { className: "items-baseline text-xl leading-[1.3] font-semibold text-black", htmlFor: id, children: [
|
|
575
647
|
"Use Points ",
|
|
576
|
-
/* @__PURE__ */ (0,
|
|
648
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs font-medium", children: "Optional" })
|
|
577
649
|
] })
|
|
578
650
|
] }),
|
|
579
|
-
balance?.availablePoints ? /* @__PURE__ */ (0,
|
|
651
|
+
balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("p", { className: "text-sm font-medium text-black", children: [
|
|
580
652
|
formatPoints(balance.availablePoints),
|
|
581
653
|
" ",
|
|
582
|
-
/* @__PURE__ */ (0,
|
|
654
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-black/50", children: formatUSD(balance.availablePoints / pointsConverionRate) })
|
|
583
655
|
] }) : null
|
|
584
656
|
] });
|
|
585
657
|
};
|
|
@@ -608,22 +680,22 @@ var useConfig = () => {
|
|
|
608
680
|
};
|
|
609
681
|
|
|
610
682
|
// src/components/CreditCardTab/CreditCard/CardsList.tsx
|
|
611
|
-
var
|
|
683
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
612
684
|
var CardListItem = ({ card, isSelected, onSelect }) => {
|
|
613
685
|
const handleSelect = () => {
|
|
614
686
|
onSelect(card);
|
|
615
687
|
};
|
|
616
|
-
return /* @__PURE__ */ (0,
|
|
617
|
-
/* @__PURE__ */ (0,
|
|
688
|
+
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: [
|
|
689
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
618
690
|
"div",
|
|
619
691
|
{
|
|
620
692
|
className: cn("flex w-11 items-center justify-center bg-black/10", {
|
|
621
693
|
"bg-primary": isSelected
|
|
622
694
|
}),
|
|
623
|
-
children: /* @__PURE__ */ (0,
|
|
695
|
+
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
696
|
}
|
|
625
697
|
),
|
|
626
|
-
/* @__PURE__ */ (0,
|
|
698
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
627
699
|
"div",
|
|
628
700
|
{
|
|
629
701
|
className: cn(
|
|
@@ -633,15 +705,15 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
|
|
|
633
705
|
}
|
|
634
706
|
),
|
|
635
707
|
children: [
|
|
636
|
-
/* @__PURE__ */ (0,
|
|
637
|
-
/* @__PURE__ */ (0,
|
|
638
|
-
/* @__PURE__ */ (0,
|
|
708
|
+
/* @__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 }) }),
|
|
709
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
710
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("p", { className: "text-sm font-medium text-[#798B95]", children: [
|
|
639
711
|
"Ending in ",
|
|
640
|
-
/* @__PURE__ */ (0,
|
|
712
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-black", children: card.lastFourNumbers })
|
|
641
713
|
] }),
|
|
642
|
-
/* @__PURE__ */ (0,
|
|
643
|
-
/* @__PURE__ */ (0,
|
|
644
|
-
/* @__PURE__ */ (0,
|
|
714
|
+
/* @__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: [
|
|
715
|
+
/* @__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" }) }),
|
|
716
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("g", { mask: "url(#mask0_188_5407)", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
645
717
|
"path",
|
|
646
718
|
{
|
|
647
719
|
fill: "#000",
|
|
@@ -659,14 +731,14 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
|
|
|
659
731
|
var CardsList = ({ selectedCard, setCard }) => {
|
|
660
732
|
const { cards, cardsIsLoading } = useCards();
|
|
661
733
|
if (cardsIsLoading) {
|
|
662
|
-
return /* @__PURE__ */ (0,
|
|
663
|
-
/* @__PURE__ */ (0,
|
|
664
|
-
/* @__PURE__ */ (0,
|
|
665
|
-
/* @__PURE__ */ (0,
|
|
734
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
|
|
735
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "bg-primary/8 h-11 animate-pulse rounded-md" }),
|
|
736
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "bg-primary/8 h-11 animate-pulse rounded-md" }),
|
|
737
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "bg-primary/8 h-11 animate-pulse rounded-md" })
|
|
666
738
|
] });
|
|
667
739
|
}
|
|
668
740
|
if (cards.length === 0) return null;
|
|
669
|
-
return /* @__PURE__ */ (0,
|
|
741
|
+
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
742
|
};
|
|
671
743
|
|
|
672
744
|
// src/components/CreditCardTab/CreditCard/CreditCardForm.tsx
|
|
@@ -676,9 +748,9 @@ var import_react_stripe_js = require("@stripe/react-stripe-js");
|
|
|
676
748
|
// src/ui/button.tsx
|
|
677
749
|
var import_react_slot = require("@radix-ui/react-slot");
|
|
678
750
|
var import_class_variance_authority = require("class-variance-authority");
|
|
679
|
-
var
|
|
751
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
680
752
|
var buttonVariants = (0, import_class_variance_authority.cva)(
|
|
681
|
-
"inline-flex
|
|
753
|
+
"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
754
|
{
|
|
683
755
|
variants: {
|
|
684
756
|
variant: {
|
|
@@ -711,29 +783,29 @@ function Button({
|
|
|
711
783
|
...props
|
|
712
784
|
}) {
|
|
713
785
|
const Comp = asChild ? import_react_slot.Slot : "button";
|
|
714
|
-
return /* @__PURE__ */ (0,
|
|
786
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Comp, { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ...props });
|
|
715
787
|
}
|
|
716
788
|
|
|
717
789
|
// src/ui/checkbox.tsx
|
|
718
790
|
var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"), 1);
|
|
719
791
|
var import_lucide_react2 = require("lucide-react");
|
|
720
|
-
var
|
|
792
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
721
793
|
function Checkbox({ className, ...props }) {
|
|
722
|
-
return /* @__PURE__ */ (0,
|
|
794
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
723
795
|
CheckboxPrimitive.Root,
|
|
724
796
|
{
|
|
725
797
|
"data-slot": "checkbox",
|
|
726
798
|
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-
|
|
799
|
+
"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
800
|
className
|
|
729
801
|
),
|
|
730
802
|
...props,
|
|
731
|
-
children: /* @__PURE__ */ (0,
|
|
803
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
732
804
|
CheckboxPrimitive.Indicator,
|
|
733
805
|
{
|
|
734
806
|
"data-slot": "checkbox-indicator",
|
|
735
807
|
className: "flex items-center justify-center text-current transition-none",
|
|
736
|
-
children: /* @__PURE__ */ (0,
|
|
808
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react2.CheckIcon, { className: "size-3.5 text-white" })
|
|
737
809
|
}
|
|
738
810
|
)
|
|
739
811
|
}
|
|
@@ -741,7 +813,7 @@ function Checkbox({ className, ...props }) {
|
|
|
741
813
|
}
|
|
742
814
|
|
|
743
815
|
// src/components/CreditCardTab/CreditCard/CreditCardForm.tsx
|
|
744
|
-
var
|
|
816
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
745
817
|
var style = {
|
|
746
818
|
base: {
|
|
747
819
|
fontSize: "16px",
|
|
@@ -799,9 +871,9 @@ var CreditCardForm = ({ cancel, saveCard }) => {
|
|
|
799
871
|
setCardError("An error occurred while processing your card. Please try again.");
|
|
800
872
|
}
|
|
801
873
|
};
|
|
802
|
-
return /* @__PURE__ */ (0,
|
|
803
|
-
/* @__PURE__ */ (0,
|
|
804
|
-
/* @__PURE__ */ (0,
|
|
874
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
|
|
875
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
|
|
876
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
805
877
|
import_react_stripe_js.CardNumberElement,
|
|
806
878
|
{
|
|
807
879
|
options: {
|
|
@@ -811,8 +883,8 @@ var CreditCardForm = ({ cancel, saveCard }) => {
|
|
|
811
883
|
}
|
|
812
884
|
}
|
|
813
885
|
),
|
|
814
|
-
/* @__PURE__ */ (0,
|
|
815
|
-
/* @__PURE__ */ (0,
|
|
886
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex w-full gap-1", children: [
|
|
887
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
816
888
|
import_react_stripe_js.CardExpiryElement,
|
|
817
889
|
{
|
|
818
890
|
options: {
|
|
@@ -822,7 +894,7 @@ var CreditCardForm = ({ cancel, saveCard }) => {
|
|
|
822
894
|
}
|
|
823
895
|
}
|
|
824
896
|
),
|
|
825
|
-
/* @__PURE__ */ (0,
|
|
897
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
826
898
|
import_react_stripe_js.CardCvcElement,
|
|
827
899
|
{
|
|
828
900
|
options: {
|
|
@@ -833,24 +905,24 @@ var CreditCardForm = ({ cancel, saveCard }) => {
|
|
|
833
905
|
}
|
|
834
906
|
)
|
|
835
907
|
] }),
|
|
836
|
-
cardError && /* @__PURE__ */ (0,
|
|
908
|
+
cardError && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-destructive mt-1 text-sm", children: cardError })
|
|
837
909
|
] }),
|
|
838
|
-
/* @__PURE__ */ (0,
|
|
839
|
-
/* @__PURE__ */ (0,
|
|
840
|
-
/* @__PURE__ */ (0,
|
|
910
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
911
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Checkbox, { disabled: true, checked: true, id: "saveCard" }),
|
|
912
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Label, { className: "text-sm font-medium", htmlFor: "saveCard", children: "Save card for future purchases" })
|
|
841
913
|
] }),
|
|
842
|
-
/* @__PURE__ */ (0,
|
|
843
|
-
/* @__PURE__ */ (0,
|
|
844
|
-
/* @__PURE__ */ (0,
|
|
914
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex w-full justify-end gap-2", children: [
|
|
915
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { variant: "secondary", onClick: cancel, children: "Cancel" }),
|
|
916
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { onClick: handleSaveCard, children: "Add Card" })
|
|
845
917
|
] })
|
|
846
918
|
] });
|
|
847
919
|
};
|
|
848
920
|
|
|
849
921
|
// src/components/CreditCardTab/CreditCard/CreditCard.tsx
|
|
850
|
-
var
|
|
922
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
851
923
|
var SripeWrapper = (props) => {
|
|
852
924
|
const stripePromise = (0, import_react6.useMemo)(() => (0, import_stripe_js.loadStripe)(props.publicKey), [props.publicKey]);
|
|
853
|
-
return /* @__PURE__ */ (0,
|
|
925
|
+
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
926
|
};
|
|
855
927
|
var CreditCard = () => {
|
|
856
928
|
const [showForm, setShowForm] = (0, import_react6.useState)(false);
|
|
@@ -868,28 +940,28 @@ var CreditCard = () => {
|
|
|
868
940
|
const handleCancel = () => {
|
|
869
941
|
setShowForm(false);
|
|
870
942
|
};
|
|
871
|
-
return /* @__PURE__ */ (0,
|
|
872
|
-
/* @__PURE__ */ (0,
|
|
873
|
-
!showForm && /* @__PURE__ */ (0,
|
|
874
|
-
/* @__PURE__ */ (0,
|
|
943
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col items-baseline gap-4", children: [
|
|
944
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: "text-primary text-xl leading-[34px] font-semibold", children: "Your Credit Cards" }),
|
|
945
|
+
!showForm && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
|
|
946
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
875
947
|
CardsList,
|
|
876
948
|
{
|
|
877
949
|
selectedCard: selectedPaymentMethod?.type === "CREDIT_CARD" /* CREDIT_CARD */ ? selectedPaymentMethod.method : null,
|
|
878
950
|
setCard
|
|
879
951
|
}
|
|
880
952
|
),
|
|
881
|
-
config2?.stripePublicKey && /* @__PURE__ */ (0,
|
|
953
|
+
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
954
|
] }),
|
|
883
|
-
config2?.stripePublicKey && showForm && /* @__PURE__ */ (0,
|
|
955
|
+
config2?.stripePublicKey && showForm && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SripeWrapper, { onCancel: handleCancel, saveNewCard, publicKey: config2.stripePublicKey })
|
|
884
956
|
] });
|
|
885
957
|
};
|
|
886
958
|
|
|
887
959
|
// src/components/CreditCardTab/CreditCardTab.tsx
|
|
888
|
-
var
|
|
960
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
889
961
|
var PointsSelector = ({ isSelected, onSelect, children }) => {
|
|
890
962
|
return (
|
|
891
963
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
|
|
892
|
-
/* @__PURE__ */ (0,
|
|
964
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
893
965
|
"div",
|
|
894
966
|
{
|
|
895
967
|
onClick: onSelect,
|
|
@@ -897,19 +969,19 @@ var PointsSelector = ({ isSelected, onSelect, children }) => {
|
|
|
897
969
|
"border-primary": isSelected
|
|
898
970
|
}),
|
|
899
971
|
children: [
|
|
900
|
-
/* @__PURE__ */ (0,
|
|
901
|
-
/* @__PURE__ */ (0,
|
|
972
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cn("flex h-11 w-full", { "bg-black/4": isSelected }), children: [
|
|
973
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
902
974
|
"div",
|
|
903
975
|
{
|
|
904
976
|
className: cn("flex w-11 items-center justify-center bg-black/10", {
|
|
905
977
|
"bg-primary": isSelected
|
|
906
978
|
}),
|
|
907
|
-
children: /* @__PURE__ */ (0,
|
|
979
|
+
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
980
|
}
|
|
909
981
|
),
|
|
910
|
-
/* @__PURE__ */ (0,
|
|
982
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: cn("flex w-full items-center justify-between gap-4 px-3"), children })
|
|
911
983
|
] }),
|
|
912
|
-
isSelected && /* @__PURE__ */ (0,
|
|
984
|
+
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
985
|
]
|
|
914
986
|
}
|
|
915
987
|
)
|
|
@@ -946,28 +1018,28 @@ var CreditCardTab = () => {
|
|
|
946
1018
|
(0, import_react7.useEffect)(() => {
|
|
947
1019
|
register(handlePay);
|
|
948
1020
|
}, [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,
|
|
1021
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
|
|
1022
|
+
/* @__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, {}) }),
|
|
1023
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col gap-6 px-7 py-6", children: [
|
|
1024
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PointsSwitch, { disabled: true, value: usePoints, onChange: setUsePoints }),
|
|
1025
|
+
usePoints && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col gap-1", children: [
|
|
1026
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(PointsSelector, { onSelect: () => setSelectedPointsType("slapi"), isSelected: selectedPointsType === "slapi", children: [
|
|
1027
|
+
/* @__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" }) }),
|
|
1028
|
+
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" }),
|
|
1029
|
+
balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("p", { className: "text-sm font-medium text-black", children: [
|
|
958
1030
|
formatPoints(balance.availablePoints),
|
|
959
1031
|
" ",
|
|
960
|
-
/* @__PURE__ */ (0,
|
|
1032
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-black/50", children: formatUSD(balance.availablePoints / pointsConverionRate) })
|
|
961
1033
|
] }) : null
|
|
962
1034
|
] }),
|
|
963
|
-
/* @__PURE__ */ (0,
|
|
1035
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
964
1036
|
PointsSelector,
|
|
965
1037
|
{
|
|
966
1038
|
onSelect: () => setSelectedPointsType("wallet"),
|
|
967
1039
|
isSelected: selectedPointsType === "wallet",
|
|
968
1040
|
children: [
|
|
969
|
-
/* @__PURE__ */ (0,
|
|
970
|
-
/* @__PURE__ */ (0,
|
|
1041
|
+
/* @__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" }) }),
|
|
1042
|
+
/* @__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
1043
|
]
|
|
972
1044
|
}
|
|
973
1045
|
)
|
|
@@ -1150,13 +1222,13 @@ var useCryptoPayment = () => {
|
|
|
1150
1222
|
|
|
1151
1223
|
// src/components/CryptoTab/Crypto/ConnectButton.tsx
|
|
1152
1224
|
var import_rainbowkit = require("@rainbow-me/rainbowkit");
|
|
1153
|
-
var
|
|
1225
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
1154
1226
|
var ConnectButton = () => {
|
|
1155
|
-
return /* @__PURE__ */ (0,
|
|
1227
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_rainbowkit.ConnectButton.Custom, { children: ({ mounted, chain, account, openAccountModal, openChainModal, openConnectModal }) => {
|
|
1156
1228
|
if (!mounted) return null;
|
|
1157
|
-
return /* @__PURE__ */ (0,
|
|
1229
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: (() => {
|
|
1158
1230
|
if (!mounted || !account || !chain) {
|
|
1159
|
-
return /* @__PURE__ */ (0,
|
|
1231
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1160
1232
|
"button",
|
|
1161
1233
|
{
|
|
1162
1234
|
className: "h-[34px] rounded-md border-1 border-black px-3 text-sm font-medium",
|
|
@@ -1166,7 +1238,7 @@ var ConnectButton = () => {
|
|
|
1166
1238
|
);
|
|
1167
1239
|
}
|
|
1168
1240
|
if (chain.unsupported) {
|
|
1169
|
-
return /* @__PURE__ */ (0,
|
|
1241
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1170
1242
|
"button",
|
|
1171
1243
|
{
|
|
1172
1244
|
className: "h-[34px] rounded-md border-1 border-black px-3 text-sm font-medium text-red-500",
|
|
@@ -1175,13 +1247,13 @@ var ConnectButton = () => {
|
|
|
1175
1247
|
}
|
|
1176
1248
|
);
|
|
1177
1249
|
}
|
|
1178
|
-
return /* @__PURE__ */ (0,
|
|
1250
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
1179
1251
|
"button",
|
|
1180
1252
|
{
|
|
1181
1253
|
className: "flex h-[34px] items-center gap-2 rounded-md border-1 border-black px-1.5 text-sm font-medium",
|
|
1182
1254
|
onClick: openAccountModal,
|
|
1183
1255
|
children: [
|
|
1184
|
-
chain.hasIcon && /* @__PURE__ */ (0,
|
|
1256
|
+
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
1257
|
account.displayName
|
|
1186
1258
|
]
|
|
1187
1259
|
}
|
|
@@ -1191,29 +1263,29 @@ var ConnectButton = () => {
|
|
|
1191
1263
|
};
|
|
1192
1264
|
|
|
1193
1265
|
// src/config/symbolLogos.tsx
|
|
1194
|
-
var
|
|
1195
|
-
var MOCA_SVG = /* @__PURE__ */ (0,
|
|
1196
|
-
/* @__PURE__ */ (0,
|
|
1197
|
-
/* @__PURE__ */ (0,
|
|
1266
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
1267
|
+
var MOCA_SVG = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
|
|
1268
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { cx: "14", cy: "14", r: "13.5", fill: "#C15F97" }),
|
|
1269
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1198
1270
|
"path",
|
|
1199
1271
|
{
|
|
1200
1272
|
fill: "#fff",
|
|
1201
1273
|
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
1274
|
}
|
|
1203
1275
|
),
|
|
1204
|
-
/* @__PURE__ */ (0,
|
|
1276
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { cx: "16", cy: "14", r: "1.5", fill: "#fff" })
|
|
1205
1277
|
] });
|
|
1206
|
-
var USDC_SVG = /* @__PURE__ */ (0,
|
|
1207
|
-
/* @__PURE__ */ (0,
|
|
1208
|
-
/* @__PURE__ */ (0,
|
|
1209
|
-
/* @__PURE__ */ (0,
|
|
1278
|
+
var USDC_SVG = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
|
|
1279
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("g", { clipPath: "url(#clip0_528_9163)", children: [
|
|
1280
|
+
/* @__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" }),
|
|
1281
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1210
1282
|
"path",
|
|
1211
1283
|
{
|
|
1212
1284
|
fill: "#fff",
|
|
1213
1285
|
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
1286
|
}
|
|
1215
1287
|
),
|
|
1216
|
-
/* @__PURE__ */ (0,
|
|
1288
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1217
1289
|
"path",
|
|
1218
1290
|
{
|
|
1219
1291
|
fill: "#fff",
|
|
@@ -1221,11 +1293,11 @@ var USDC_SVG = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { xmlns: "h
|
|
|
1221
1293
|
}
|
|
1222
1294
|
)
|
|
1223
1295
|
] }),
|
|
1224
|
-
/* @__PURE__ */ (0,
|
|
1296
|
+
/* @__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
1297
|
] });
|
|
1226
|
-
var USDT_SVG = /* @__PURE__ */ (0,
|
|
1227
|
-
/* @__PURE__ */ (0,
|
|
1228
|
-
/* @__PURE__ */ (0,
|
|
1298
|
+
var USDT_SVG = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
|
|
1299
|
+
/* @__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" }),
|
|
1300
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1229
1301
|
"path",
|
|
1230
1302
|
{
|
|
1231
1303
|
fill: "#fff",
|
|
@@ -1233,23 +1305,23 @@ var USDT_SVG = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { xmlns: "h
|
|
|
1233
1305
|
}
|
|
1234
1306
|
)
|
|
1235
1307
|
] });
|
|
1236
|
-
var WETH_SVG = /* @__PURE__ */ (0,
|
|
1237
|
-
/* @__PURE__ */ (0,
|
|
1238
|
-
/* @__PURE__ */ (0,
|
|
1308
|
+
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: [
|
|
1309
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("g", { clipPath: "url(#clip0_528_9173)", children: [
|
|
1310
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1239
1311
|
"path",
|
|
1240
1312
|
{
|
|
1241
1313
|
fill: "#000",
|
|
1242
1314
|
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
1315
|
}
|
|
1244
1316
|
),
|
|
1245
|
-
/* @__PURE__ */ (0,
|
|
1317
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1246
1318
|
"path",
|
|
1247
1319
|
{
|
|
1248
1320
|
fill: "#F61F7D",
|
|
1249
1321
|
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
1322
|
}
|
|
1251
1323
|
),
|
|
1252
|
-
/* @__PURE__ */ (0,
|
|
1324
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1253
1325
|
"path",
|
|
1254
1326
|
{
|
|
1255
1327
|
fill: "#000",
|
|
@@ -1258,8 +1330,8 @@ var WETH_SVG = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { xmlns: "h
|
|
|
1258
1330
|
clipRule: "evenodd"
|
|
1259
1331
|
}
|
|
1260
1332
|
),
|
|
1261
|
-
/* @__PURE__ */ (0,
|
|
1262
|
-
/* @__PURE__ */ (0,
|
|
1333
|
+
/* @__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" }),
|
|
1334
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1263
1335
|
"path",
|
|
1264
1336
|
{
|
|
1265
1337
|
fill: "#000",
|
|
@@ -1268,8 +1340,8 @@ var WETH_SVG = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { xmlns: "h
|
|
|
1268
1340
|
clipRule: "evenodd"
|
|
1269
1341
|
}
|
|
1270
1342
|
),
|
|
1271
|
-
/* @__PURE__ */ (0,
|
|
1272
|
-
/* @__PURE__ */ (0,
|
|
1343
|
+
/* @__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" }),
|
|
1344
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1273
1345
|
"path",
|
|
1274
1346
|
{
|
|
1275
1347
|
fill: "#000",
|
|
@@ -1277,7 +1349,7 @@ var WETH_SVG = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { xmlns: "h
|
|
|
1277
1349
|
}
|
|
1278
1350
|
)
|
|
1279
1351
|
] }),
|
|
1280
|
-
/* @__PURE__ */ (0,
|
|
1352
|
+
/* @__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
1353
|
] });
|
|
1282
1354
|
var symbolLogos = {
|
|
1283
1355
|
MOCA: MOCA_SVG,
|
|
@@ -1290,13 +1362,13 @@ function getSymbolLogo(symbol) {
|
|
|
1290
1362
|
}
|
|
1291
1363
|
|
|
1292
1364
|
// src/components/CryptoTab/Crypto/Logos.tsx
|
|
1293
|
-
var
|
|
1365
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
1294
1366
|
var Logos = () => {
|
|
1295
|
-
return /* @__PURE__ */ (0,
|
|
1296
|
-
/* @__PURE__ */ (0,
|
|
1297
|
-
/* @__PURE__ */ (0,
|
|
1298
|
-
/* @__PURE__ */ (0,
|
|
1299
|
-
/* @__PURE__ */ (0,
|
|
1367
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex", children: [
|
|
1368
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "rounded-full border border-[#F5F7FA]", children: getSymbolLogo("MOCA") }),
|
|
1369
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "-ml-2.5 rounded-full border border-[#F5F7FA]", children: getSymbolLogo("USDC") }),
|
|
1370
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "-ml-2.5 rounded-full border border-[#F5F7FA]", children: getSymbolLogo("USDT") }),
|
|
1371
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "-ml-2.5 rounded-full border border-[#F5F7FA] bg-[#F5F7FA]", children: getSymbolLogo("WETH") })
|
|
1300
1372
|
] });
|
|
1301
1373
|
};
|
|
1302
1374
|
|
|
@@ -1391,7 +1463,7 @@ function useBaseNativeToken() {
|
|
|
1391
1463
|
}
|
|
1392
1464
|
|
|
1393
1465
|
// src/modals/CryptoSelectModal.tsx
|
|
1394
|
-
var
|
|
1466
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
1395
1467
|
var CryptoSelectModal = import_nice_modal_react3.default.create(() => {
|
|
1396
1468
|
const modal = (0, import_nice_modal_react3.useModal)();
|
|
1397
1469
|
const { isLoading, error, erc20Balances } = useBaseERC20Token();
|
|
@@ -1401,113 +1473,116 @@ var CryptoSelectModal = import_nice_modal_react3.default.create(() => {
|
|
|
1401
1473
|
modal.remove();
|
|
1402
1474
|
setSelectedPaymentMethod({ type: "CRYPTO" /* CRYPTO */, method: coin });
|
|
1403
1475
|
};
|
|
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",
|
|
1476
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Dialog, { open: modal.visible, onOpenChange: modal.remove, children: [
|
|
1477
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DialogDescription, { className: "hidden", children: "Crypto Select Modal" }),
|
|
1478
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(DialogContent, { showCloseButton: false, className: "gap-0 p-0", children: [
|
|
1479
|
+
/* @__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: [
|
|
1480
|
+
/* @__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" }) }) }),
|
|
1481
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DialogTitle, { className: "text-primary text-2xl font-semibold", children: "Select a token" }),
|
|
1482
|
+
/* @__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)(
|
|
1483
|
+
"path",
|
|
1423
1484
|
{
|
|
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)(
|
|
1485
|
+
fill: "#000",
|
|
1486
|
+
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"
|
|
1487
|
+
}
|
|
1488
|
+
) }) })
|
|
1489
|
+
] }) }),
|
|
1490
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-col gap-4 px-7 py-6", children: [
|
|
1491
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { className: "text-primary text-xl font-semibold", children: "Tokens with wallet balance" }),
|
|
1492
|
+
(error || nativeError) && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-center text-sm text-red-500", children: "Something wrong" }),
|
|
1493
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
|
|
1494
|
+
isLoadingNative && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
|
|
1495
|
+
nativeBalance && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
1451
1496
|
"button",
|
|
1452
1497
|
{
|
|
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(
|
|
1498
|
+
className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 hover:bg-gray-100",
|
|
1499
|
+
onClick: () => handleSelect(nativeBalance),
|
|
1455
1500
|
children: [
|
|
1456
|
-
/* @__PURE__ */ (0,
|
|
1457
|
-
|
|
1458
|
-
|
|
1501
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
1502
|
+
nativeBalance.logoURI && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
1503
|
+
"img",
|
|
1504
|
+
{
|
|
1505
|
+
className: "h-8 w-8 shrink-0",
|
|
1506
|
+
src: nativeBalance.logoURI,
|
|
1507
|
+
alt: `${nativeBalance.symbol} logo`
|
|
1508
|
+
}
|
|
1509
|
+
),
|
|
1510
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.symbol })
|
|
1459
1511
|
] }),
|
|
1460
|
-
/* @__PURE__ */ (0,
|
|
1512
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.formatted })
|
|
1461
1513
|
]
|
|
1462
1514
|
},
|
|
1463
|
-
|
|
1464
|
-
)
|
|
1465
|
-
|
|
1515
|
+
nativeBalance.symbol
|
|
1516
|
+
),
|
|
1517
|
+
isLoading && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
|
|
1518
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
|
|
1519
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
|
|
1520
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
|
|
1521
|
+
] }),
|
|
1522
|
+
erc20Balances.map((coin) => {
|
|
1523
|
+
const Icon = getSymbolLogo(coin.symbol);
|
|
1524
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
1525
|
+
"button",
|
|
1526
|
+
{
|
|
1527
|
+
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",
|
|
1528
|
+
onClick: () => handleSelect(coin),
|
|
1529
|
+
children: [
|
|
1530
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
1531
|
+
Boolean(Icon) && Icon,
|
|
1532
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm font-medium", children: coin.symbol })
|
|
1533
|
+
] }),
|
|
1534
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm font-medium", children: coin.formatted })
|
|
1535
|
+
]
|
|
1536
|
+
},
|
|
1537
|
+
coin.symbol
|
|
1538
|
+
);
|
|
1539
|
+
})
|
|
1540
|
+
] })
|
|
1466
1541
|
] })
|
|
1467
1542
|
] })
|
|
1468
|
-
] })
|
|
1543
|
+
] });
|
|
1469
1544
|
});
|
|
1470
1545
|
CryptoSelectModal.displayName = "CryptoSelectModal";
|
|
1471
1546
|
|
|
1472
1547
|
// src/components/CryptoTab/Crypto/SelectCoinButton.tsx
|
|
1473
|
-
var
|
|
1548
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
1474
1549
|
var SelectCoinButton = () => {
|
|
1475
1550
|
const openModal = () => {
|
|
1476
1551
|
import_nice_modal_react4.default.show(CryptoSelectModal);
|
|
1477
1552
|
};
|
|
1478
|
-
return /* @__PURE__ */ (0,
|
|
1479
|
-
/* @__PURE__ */ (0,
|
|
1480
|
-
/* @__PURE__ */ (0,
|
|
1481
|
-
/* @__PURE__ */ (0,
|
|
1482
|
-
/* @__PURE__ */ (0,
|
|
1553
|
+
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: [
|
|
1554
|
+
/* @__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" }) }),
|
|
1555
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex w-full items-center justify-between px-3", children: [
|
|
1556
|
+
/* @__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" }) }),
|
|
1557
|
+
/* @__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
1558
|
] })
|
|
1484
1559
|
] });
|
|
1485
1560
|
};
|
|
1486
1561
|
|
|
1487
1562
|
// src/components/CryptoTab/Crypto/SelectedCoin.tsx
|
|
1488
|
-
var
|
|
1563
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
1489
1564
|
var SelectedCoin = (props) => {
|
|
1490
1565
|
const { coin, balance, logoURI } = props;
|
|
1491
1566
|
const Icon = getSymbolLogo(coin);
|
|
1492
|
-
return /* @__PURE__ */ (0,
|
|
1493
|
-
/* @__PURE__ */ (0,
|
|
1494
|
-
/* @__PURE__ */ (0,
|
|
1495
|
-
/* @__PURE__ */ (0,
|
|
1567
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
|
|
1568
|
+
/* @__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" }) }) }),
|
|
1569
|
+
/* @__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: [
|
|
1570
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-1", children: [
|
|
1496
1571
|
Icon,
|
|
1497
|
-
!Icon && logoURI && /* @__PURE__ */ (0,
|
|
1498
|
-
/* @__PURE__ */ (0,
|
|
1499
|
-
/* @__PURE__ */ (0,
|
|
1572
|
+
!Icon && logoURI && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("img", { className: "mr-1 h-8 w-8 shrink-0", src: logoURI, alt: `${coin} logo` }),
|
|
1573
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "font-semibold", children: coin }),
|
|
1574
|
+
/* @__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
1575
|
] }),
|
|
1501
|
-
/* @__PURE__ */ (0,
|
|
1576
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("p", { className: "text-xs font-medium text-[#798B95]", children: [
|
|
1502
1577
|
"Wallet balance ",
|
|
1503
|
-
/* @__PURE__ */ (0,
|
|
1578
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-black", children: balance })
|
|
1504
1579
|
] })
|
|
1505
1580
|
] })
|
|
1506
1581
|
] });
|
|
1507
1582
|
};
|
|
1508
1583
|
|
|
1509
1584
|
// src/components/CryptoTab/Crypto/Crypto.tsx
|
|
1510
|
-
var
|
|
1585
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
1511
1586
|
var Crypto = () => {
|
|
1512
1587
|
const { address } = (0, import_wagmi4.useAccount)();
|
|
1513
1588
|
const { selectedPaymentMethod } = useSpreePaymentMethod();
|
|
@@ -1531,14 +1606,14 @@ var Crypto = () => {
|
|
|
1531
1606
|
(0, import_react8.useEffect)(() => {
|
|
1532
1607
|
register(handlePay);
|
|
1533
1608
|
}, [register, handlePay]);
|
|
1534
|
-
return /* @__PURE__ */ (0,
|
|
1535
|
-
/* @__PURE__ */ (0,
|
|
1536
|
-
/* @__PURE__ */ (0,
|
|
1537
|
-
/* @__PURE__ */ (0,
|
|
1609
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col items-baseline gap-4", children: [
|
|
1610
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex w-full items-center justify-between gap-4", children: [
|
|
1611
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h3", { className: "text-primary text-xl leading-[1.7] font-semibold", children: "Pay with Crypto" }),
|
|
1612
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ConnectButton, {})
|
|
1538
1613
|
] }),
|
|
1539
|
-
!isWalletConnected && /* @__PURE__ */ (0,
|
|
1540
|
-
isWalletConnected && /* @__PURE__ */ (0,
|
|
1541
|
-
selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */ (0,
|
|
1614
|
+
!isWalletConnected && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Logos, {}),
|
|
1615
|
+
isWalletConnected && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
|
|
1616
|
+
selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
1542
1617
|
SelectedCoin,
|
|
1543
1618
|
{
|
|
1544
1619
|
coin: selectedPaymentMethod.method.symbol,
|
|
@@ -1546,13 +1621,13 @@ var Crypto = () => {
|
|
|
1546
1621
|
logoURI: selectedPaymentMethod.method.logoURI
|
|
1547
1622
|
}
|
|
1548
1623
|
),
|
|
1549
|
-
/* @__PURE__ */ (0,
|
|
1624
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SelectCoinButton, {})
|
|
1550
1625
|
] })
|
|
1551
1626
|
] });
|
|
1552
1627
|
};
|
|
1553
1628
|
|
|
1554
1629
|
// src/components/CryptoTab/Crypto/CryptoWrapper.tsx
|
|
1555
|
-
var
|
|
1630
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
1556
1631
|
var queryClient = new import_react_query.QueryClient();
|
|
1557
1632
|
var connectors = (0, import_rainbowkit2.connectorsForWallets)(
|
|
1558
1633
|
[
|
|
@@ -1570,22 +1645,22 @@ var config = (0, import_wagmi5.createConfig)({
|
|
|
1570
1645
|
ssr: true
|
|
1571
1646
|
});
|
|
1572
1647
|
var CryptoWrapper = () => {
|
|
1573
|
-
return /* @__PURE__ */ (0,
|
|
1648
|
+
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
1649
|
};
|
|
1575
1650
|
|
|
1576
1651
|
// src/components/CryptoTab/CryptoTab.tsx
|
|
1577
|
-
var
|
|
1652
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
1578
1653
|
var CryptoTab = () => {
|
|
1579
|
-
return /* @__PURE__ */ (0,
|
|
1580
|
-
/* @__PURE__ */ (0,
|
|
1581
|
-
/* @__PURE__ */ (0,
|
|
1654
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
|
|
1655
|
+
/* @__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, {}) }),
|
|
1656
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "px-7 py-6", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PointsSwitch, { disabled: true }) })
|
|
1582
1657
|
] });
|
|
1583
1658
|
};
|
|
1584
1659
|
|
|
1585
1660
|
// src/components/TabButtons.tsx
|
|
1586
|
-
var
|
|
1661
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
1587
1662
|
var TabButton = ({ isActive, children, onClick }) => {
|
|
1588
|
-
return /* @__PURE__ */ (0,
|
|
1663
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
1589
1664
|
"button",
|
|
1590
1665
|
{
|
|
1591
1666
|
onClick,
|
|
@@ -1605,62 +1680,62 @@ var TabButtons = (props) => {
|
|
|
1605
1680
|
onChange({ type, method: null });
|
|
1606
1681
|
}
|
|
1607
1682
|
};
|
|
1608
|
-
return /* @__PURE__ */ (0,
|
|
1609
|
-
/* @__PURE__ */ (0,
|
|
1610
|
-
/* @__PURE__ */ (0,
|
|
1683
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex gap-2", children: [
|
|
1684
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(TabButton, { onClick: handleChange("CREDIT_CARD" /* CREDIT_CARD */), isActive: value === "CREDIT_CARD" /* CREDIT_CARD */, children: [
|
|
1685
|
+
/* @__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
1686
|
"path",
|
|
1612
1687
|
{
|
|
1613
1688
|
fill: "currentColor",
|
|
1614
1689
|
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
1690
|
}
|
|
1616
1691
|
) }),
|
|
1617
|
-
/* @__PURE__ */ (0,
|
|
1692
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-sm font-medium", children: "Card" })
|
|
1618
1693
|
] }),
|
|
1619
|
-
/* @__PURE__ */ (0,
|
|
1620
|
-
/* @__PURE__ */ (0,
|
|
1621
|
-
/* @__PURE__ */ (0,
|
|
1694
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(TabButton, { onClick: handleChange("CRYPTO" /* CRYPTO */), isActive: value === "CRYPTO" /* CRYPTO */, children: [
|
|
1695
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("svg", { className: "my-1", xmlns: "http://www.w3.org/2000/svg", width: "30", height: "16", fill: "none", children: [
|
|
1696
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
1622
1697
|
"path",
|
|
1623
1698
|
{
|
|
1624
1699
|
fill: "currentColor",
|
|
1625
1700
|
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
1701
|
}
|
|
1627
1702
|
),
|
|
1628
|
-
/* @__PURE__ */ (0,
|
|
1703
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
1629
1704
|
"path",
|
|
1630
1705
|
{
|
|
1631
1706
|
fill: "currentColor",
|
|
1632
1707
|
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
1708
|
}
|
|
1634
1709
|
),
|
|
1635
|
-
/* @__PURE__ */ (0,
|
|
1710
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "2" })
|
|
1636
1711
|
] }),
|
|
1637
|
-
/* @__PURE__ */ (0,
|
|
1712
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-sm font-medium", children: "Crypto" })
|
|
1638
1713
|
] })
|
|
1639
1714
|
] });
|
|
1640
1715
|
};
|
|
1641
1716
|
|
|
1642
1717
|
// src/components/Tabs.tsx
|
|
1643
|
-
var
|
|
1718
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
1644
1719
|
var Tabs = () => {
|
|
1645
1720
|
const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
|
|
1646
|
-
return /* @__PURE__ */ (0,
|
|
1647
|
-
/* @__PURE__ */ (0,
|
|
1648
|
-
/* @__PURE__ */ (0,
|
|
1649
|
-
/* @__PURE__ */ (0,
|
|
1721
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "mb-4 rounded-2xl border border-black/25 bg-white", children: [
|
|
1722
|
+
/* @__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: [
|
|
1723
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("h2", { className: "text-primary text-2xl font-semibold", children: "Choose a Payment Method" }),
|
|
1724
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
|
|
1650
1725
|
] }),
|
|
1651
|
-
selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ (0,
|
|
1652
|
-
selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ (0,
|
|
1726
|
+
selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CreditCardTab, {}),
|
|
1727
|
+
selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CryptoTab, {})
|
|
1653
1728
|
] });
|
|
1654
1729
|
};
|
|
1655
1730
|
|
|
1656
1731
|
// src/SpreePayContent.tsx
|
|
1657
|
-
var
|
|
1732
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
1658
1733
|
var SpreePayContent = (props) => {
|
|
1659
|
-
const { amount, onProcess } = props;
|
|
1660
|
-
return /* @__PURE__ */ (0,
|
|
1661
|
-
/* @__PURE__ */ (0,
|
|
1662
|
-
/* @__PURE__ */ (0,
|
|
1663
|
-
/* @__PURE__ */ (0,
|
|
1734
|
+
const { amount, onProcess, isProcessing } = props;
|
|
1735
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "w-full", children: [
|
|
1736
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Tabs, {}),
|
|
1737
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CheckoutButton, { isProcessing, onCheckout: onProcess, amount }),
|
|
1738
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SpreeLegal, {})
|
|
1664
1739
|
] });
|
|
1665
1740
|
};
|
|
1666
1741
|
|
|
@@ -1732,7 +1807,7 @@ function useKeycloakSSO(config2) {
|
|
|
1732
1807
|
}
|
|
1733
1808
|
|
|
1734
1809
|
// src/SpreePay.tsx
|
|
1735
|
-
var
|
|
1810
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
1736
1811
|
var envConfig = {
|
|
1737
1812
|
dev: {
|
|
1738
1813
|
bookit: {
|
|
@@ -1799,23 +1874,17 @@ var SpreePay = ({ className, ...rest }) => {
|
|
|
1799
1874
|
}
|
|
1800
1875
|
}, [env.accessToken, environment, tenantId, accessToken]);
|
|
1801
1876
|
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
|
-
] });
|
|
1877
|
+
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
1878
|
}
|
|
1807
1879
|
if (error) {
|
|
1808
|
-
return /* @__PURE__ */ (0,
|
|
1809
|
-
|
|
1810
|
-
|
|
1811
|
-
|
|
1812
|
-
error.message
|
|
1813
|
-
] })
|
|
1814
|
-
] });
|
|
1880
|
+
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: [
|
|
1881
|
+
"Error: ",
|
|
1882
|
+
error.message
|
|
1883
|
+
] }) });
|
|
1815
1884
|
}
|
|
1816
|
-
return /* @__PURE__ */ (0,
|
|
1817
|
-
/* @__PURE__ */ (0,
|
|
1818
|
-
/* @__PURE__ */ (0,
|
|
1885
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { ref: rootRef, className: cn("sl-spreepay", className), children: [
|
|
1886
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "sl-spreepay__portal" }),
|
|
1887
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1819
1888
|
import_swr4.SWRConfig,
|
|
1820
1889
|
{
|
|
1821
1890
|
value: {
|
|
@@ -1824,7 +1893,7 @@ var SpreePay = ({ className, ...rest }) => {
|
|
|
1824
1893
|
revalidateIfStale: false,
|
|
1825
1894
|
revalidateOnReconnect: false
|
|
1826
1895
|
},
|
|
1827
|
-
children: /* @__PURE__ */ (0,
|
|
1896
|
+
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
1897
|
}
|
|
1829
1898
|
)
|
|
1830
1899
|
] });
|