@superlogic/spree-pay 0.1.36 → 0.1.37
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.cjs +234 -190
- package/build/index.css +253 -441
- package/build/index.js +235 -191
- package/package.json +3 -2
- package/src/styles/globals.css +149 -0
package/build/index.cjs
CHANGED
|
@@ -44,7 +44,7 @@ var import_nice_modal_react8 = __toESM(require("@ebay/nice-modal-react"), 1);
|
|
|
44
44
|
var import_swr5 = require("swr");
|
|
45
45
|
|
|
46
46
|
// package.json
|
|
47
|
-
var version = "0.1.
|
|
47
|
+
var version = "0.1.37";
|
|
48
48
|
|
|
49
49
|
// src/context/SpreePayActionsContext.tsx
|
|
50
50
|
var import_react = require("react");
|
|
@@ -292,7 +292,7 @@ var Spinner = (props) => {
|
|
|
292
292
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
293
293
|
"svg",
|
|
294
294
|
{
|
|
295
|
-
className: cn(`${sizeClasses[size]} animate-spin text-
|
|
295
|
+
className: cn(`${sizeClasses[size]} animate-spin text-(--tertiary)`, className),
|
|
296
296
|
viewBox: "0 0 64 64",
|
|
297
297
|
fill: "none",
|
|
298
298
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -317,7 +317,7 @@ var Spinner = (props) => {
|
|
|
317
317
|
strokeWidth: "5",
|
|
318
318
|
strokeLinecap: "round",
|
|
319
319
|
strokeLinejoin: "round",
|
|
320
|
-
className: "text-
|
|
320
|
+
className: "text-(--brand-primary)"
|
|
321
321
|
}
|
|
322
322
|
)
|
|
323
323
|
]
|
|
@@ -408,26 +408,19 @@ var CheckoutButton = ({ isLoggedIn }) => {
|
|
|
408
408
|
}
|
|
409
409
|
return "Checkout";
|
|
410
410
|
};
|
|
411
|
-
|
|
411
|
+
const checkoutClass = "text-(--inverse) h-14 w-full cursor-pointer rounded-4xl bg-(--s-brand) hover:bg-(--s-brand-hover) px-4 text-center text-xl leading-6 font-medium disabled:cursor-not-allowed disabled:bg-(--s-disabled) disabled:text-(--disabled)";
|
|
412
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex w-full flex-col gap-4 bg-(--s-default) p-6 text-xs leading-5 font-medium text-(--secondary) md:px-7", children: [
|
|
412
413
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { className: "text-center", children: [
|
|
413
414
|
"By clicking on the button below I acknowledge that I have read and accepted the",
|
|
414
415
|
" ",
|
|
415
416
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("a", { className: "underline", href: spreePayConfig?.termsConditionsUrl, target: "_blank", rel: "noreferrer", children: "Terms and Conditions" }),
|
|
416
417
|
"."
|
|
417
418
|
] }),
|
|
418
|
-
isLoggedIn ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: onProcess && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
419
|
-
"button",
|
|
420
|
-
{
|
|
421
|
-
disabled: isDisabled,
|
|
422
|
-
onClick: onProcess,
|
|
423
|
-
className: "bg-primary w-full cursor-pointer rounded-4xl p-4 text-xl leading-6 font-medium text-white disabled:cursor-not-allowed disabled:opacity-50",
|
|
424
|
-
children: getCheckoutContent()
|
|
425
|
-
}
|
|
426
|
-
) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
419
|
+
isLoggedIn ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: onProcess && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { disabled: isDisabled, onClick: onProcess, className: checkoutClass, children: getCheckoutContent() }) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
427
420
|
"a",
|
|
428
421
|
{
|
|
429
422
|
href: `${staticConfig.keycloakUrl}/realms/${env.tenantId}/protocol/openid-connect/auth?client_id=${staticConfig.keycloakClientId}&response_type=code&redirect_uri=${window.location.href}`,
|
|
430
|
-
className:
|
|
423
|
+
className: checkoutClass,
|
|
431
424
|
children: "Log in / Sign up for an AIR account"
|
|
432
425
|
}
|
|
433
426
|
),
|
|
@@ -521,7 +514,7 @@ function DialogContent({
|
|
|
521
514
|
{
|
|
522
515
|
"data-slot": "dialog-content",
|
|
523
516
|
className: cn(
|
|
524
|
-
"
|
|
517
|
+
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-(--border-component-specific-card) bg-(--surface-component-specific-card-default-card) p-6 shadow-lg duration-200 sm:max-w-lg",
|
|
525
518
|
className
|
|
526
519
|
),
|
|
527
520
|
...props,
|
|
@@ -531,7 +524,7 @@ function DialogContent({
|
|
|
531
524
|
DialogPrimitive.Close,
|
|
532
525
|
{
|
|
533
526
|
"data-slot": "dialog-close",
|
|
534
|
-
className: "ring-offset-background focus:ring-ring data-[state=open]:
|
|
527
|
+
className: "ring-offset-background focus:ring-ring data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-(--accent) [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
535
528
|
children: [
|
|
536
529
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react.XIcon, {}),
|
|
537
530
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "sr-only", children: "Close" })
|
|
@@ -1057,69 +1050,72 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
|
|
|
1057
1050
|
e.stopPropagation();
|
|
1058
1051
|
if (isSelected || isRemoveDisabled) return;
|
|
1059
1052
|
};
|
|
1060
|
-
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
"flex h-full w-full items-center justify-between rounded-r-sm border border-l-0! border-transparent px-3",
|
|
1053
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
1054
|
+
"button",
|
|
1055
|
+
{
|
|
1056
|
+
type: "button",
|
|
1057
|
+
onClick: handleSelect,
|
|
1058
|
+
className: cn(
|
|
1059
|
+
"flex h-12 w-full overflow-hidden rounded-md border-2 border-(--b-inverse) bg-(--s-primary) hover:bg-(--s-primary-hover)",
|
|
1060
|
+
{
|
|
1061
|
+
"border-(--b-brand)": isSelected
|
|
1062
|
+
}
|
|
1063
|
+
),
|
|
1064
|
+
children: [
|
|
1065
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1066
|
+
"div",
|
|
1075
1067
|
{
|
|
1076
|
-
"border-
|
|
1068
|
+
className: cn("flex h-full w-11 shrink-0 items-center justify-center border-r border-(--b-inverse)", {
|
|
1069
|
+
"border-(--b-brand)": isSelected
|
|
1070
|
+
}),
|
|
1071
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex size-5 items-center justify-center rounded-full border-2 border-(--brand-primary)", children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "size-2 rounded-full bg-(--brand-primary)" }) })
|
|
1077
1072
|
}
|
|
1078
1073
|
),
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
"
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
"div",
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1074
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
1075
|
+
"div",
|
|
1076
|
+
{
|
|
1077
|
+
className: cn("flex h-full w-full items-center justify-between rounded-r-sm px-3", {
|
|
1078
|
+
"border-(--primary)": isSelected
|
|
1079
|
+
}),
|
|
1080
|
+
children: [
|
|
1081
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-sm font-medium text-(--brand-primary)", children: card.schema }) }),
|
|
1082
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
1083
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { className: "text-sm font-medium text-(--secondary)", children: [
|
|
1084
|
+
"Ending in ",
|
|
1085
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-(--brand-primary)", children: card.lastFourNumbers })
|
|
1086
|
+
] }),
|
|
1087
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1088
|
+
"div",
|
|
1089
|
+
{
|
|
1090
|
+
onClick: handleRemoveCard,
|
|
1091
|
+
className: cn("rounded-md p-1 text-(--tertiary) transition-all hover:bg-(--s-secondary)", {
|
|
1092
|
+
"cursor-not-allowed opacity-50": isSelected || isRemoveDisabled
|
|
1093
|
+
// 'cursor-pointer': !isSelected || !isRemoveDisabled,
|
|
1094
|
+
}),
|
|
1095
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1096
|
+
"path",
|
|
1097
|
+
{
|
|
1098
|
+
fill: "currentColor",
|
|
1099
|
+
d: "M6.35 16.17c-.38 0-.7-.13-.96-.4a1.3 1.3 0 0 1-.39-.95V4.5h-.83v-.83H7.5v-.64h5v.64h3.33v.83H15v10.32c0 .39-.13.7-.39.96a1.3 1.3 0 0 1-.96.39h-7.3ZM14.17 4.5H5.83v10.32c0 .15.05.28.15.37.1.1.22.15.37.15h7.3c.13 0 .25-.06.36-.16.1-.11.16-.23.16-.36V4.5Zm-6 9.17h.84v-7.5h-.84v7.5Zm2.82 0h.84v-7.5h-.84v7.5Z"
|
|
1100
|
+
}
|
|
1101
|
+
) })
|
|
1102
|
+
}
|
|
1103
|
+
)
|
|
1104
|
+
] })
|
|
1105
|
+
]
|
|
1106
|
+
}
|
|
1107
|
+
)
|
|
1108
|
+
]
|
|
1109
|
+
}
|
|
1110
|
+
);
|
|
1112
1111
|
};
|
|
1113
1112
|
var CardsList = ({ selectedCard, setCard }) => {
|
|
1114
1113
|
const { cards, cardsIsLoading } = useCards();
|
|
1115
1114
|
if (cardsIsLoading) {
|
|
1116
|
-
return /* @__PURE__ */ (0, import_jsx_runtime7.
|
|
1117
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "bg-primary/8 h-11 animate-pulse rounded-sm" }),
|
|
1118
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "bg-primary/8 h-11 animate-pulse rounded-sm" })
|
|
1119
|
-
] });
|
|
1115
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "h-11 animate-pulse rounded-sm bg-(--s-primary)" }) });
|
|
1120
1116
|
}
|
|
1121
1117
|
if (cards.length === 0) return null;
|
|
1122
|
-
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex w-full flex-col gap-
|
|
1118
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex w-full flex-col gap-4", children: cards.map((card) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardListItem, { isSelected: selectedCard?.id === card.id, onSelect: setCard, card }, card.id)) });
|
|
1123
1119
|
};
|
|
1124
1120
|
|
|
1125
1121
|
// src/components/CreditCardTab/CreditCard/CreditCardForm.tsx
|
|
@@ -1135,12 +1131,12 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
|
|
|
1135
1131
|
{
|
|
1136
1132
|
variants: {
|
|
1137
1133
|
variant: {
|
|
1138
|
-
default: "bg-primary text-
|
|
1139
|
-
destructive: "bg-destructive text-
|
|
1140
|
-
outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
|
1141
|
-
secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
|
|
1142
|
-
ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
|
1143
|
-
link: "text-primary underline-offset-4 hover:underline"
|
|
1134
|
+
default: "bg-(--primary) text-(--inverse) shadow-xs hover:bg-(--primary)/90 ",
|
|
1135
|
+
destructive: "bg-destructive text-(--inverse) shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
|
1136
|
+
outline: "border bg-background shadow-xs hover:bg-(--accent) hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
|
1137
|
+
secondary: "bg-(--secondary) text-secondary-foreground shadow-xs hover:bg-(--secondary)/80",
|
|
1138
|
+
ghost: "hover:bg-(--accent) hover:text-accent-foreground dark:hover:bg-(--accent)/50",
|
|
1139
|
+
link: "text-(--brand-primary) underline-offset-4 hover:underline"
|
|
1144
1140
|
},
|
|
1145
1141
|
size: {
|
|
1146
1142
|
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
|
@@ -1177,7 +1173,7 @@ function Checkbox({ className, ...props }) {
|
|
|
1177
1173
|
{
|
|
1178
1174
|
"data-slot": "checkbox",
|
|
1179
1175
|
className: cn(
|
|
1180
|
-
"peer border-input dark:bg-input/30
|
|
1176
|
+
"peer border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-sm border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-(--primary) data-[state=checked]:bg-(--primary) data-[state=checked]:text-(--inverse) dark:data-[state=checked]:bg-(--primary)",
|
|
1181
1177
|
className
|
|
1182
1178
|
),
|
|
1183
1179
|
...props,
|
|
@@ -1186,7 +1182,7 @@ function Checkbox({ className, ...props }) {
|
|
|
1186
1182
|
{
|
|
1187
1183
|
"data-slot": "checkbox-indicator",
|
|
1188
1184
|
className: "flex items-center justify-center text-current transition-none",
|
|
1189
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react2.CheckIcon, { className: "size-3.5 text-
|
|
1185
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react2.CheckIcon, { className: "size-3.5 text-(--inverse)" })
|
|
1190
1186
|
}
|
|
1191
1187
|
)
|
|
1192
1188
|
}
|
|
@@ -1212,10 +1208,23 @@ function Label({ className, ...props }) {
|
|
|
1212
1208
|
|
|
1213
1209
|
// src/components/CreditCardTab/CreditCard/CreditCardForm.tsx
|
|
1214
1210
|
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
1215
|
-
var
|
|
1211
|
+
var styleDark = {
|
|
1216
1212
|
base: {
|
|
1217
1213
|
fontSize: "16px",
|
|
1218
|
-
fontWeight: "
|
|
1214
|
+
fontWeight: "500",
|
|
1215
|
+
color: "rgba(255, 255, 255, 0.70)",
|
|
1216
|
+
"::placeholder": {
|
|
1217
|
+
color: "rgba(255, 255, 255, 0.5)"
|
|
1218
|
+
}
|
|
1219
|
+
},
|
|
1220
|
+
invalid: {
|
|
1221
|
+
color: "rgba(255, 255, 255, 0.70)"
|
|
1222
|
+
}
|
|
1223
|
+
};
|
|
1224
|
+
var styleLight = {
|
|
1225
|
+
base: {
|
|
1226
|
+
fontSize: "16px",
|
|
1227
|
+
fontWeight: "500",
|
|
1219
1228
|
color: "#000",
|
|
1220
1229
|
"::placeholder": {
|
|
1221
1230
|
color: "rgba(0, 0, 0, 0.5)"
|
|
@@ -1226,12 +1235,13 @@ var style = {
|
|
|
1226
1235
|
}
|
|
1227
1236
|
};
|
|
1228
1237
|
var stripeElementClasses = {
|
|
1229
|
-
base: "w-full
|
|
1230
|
-
invalid: "
|
|
1238
|
+
base: "w-full rounded-[12px] bg-(--s-primary) px-5 py-4 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50",
|
|
1239
|
+
invalid: "focus-visible:ring-destructive",
|
|
1231
1240
|
focus: "border-ring ring-ring/50 ring-2"
|
|
1232
1241
|
};
|
|
1233
1242
|
var CreditCardForm = ({ cancel, saveCard }) => {
|
|
1234
1243
|
const [cardError, setCardError] = (0, import_react5.useState)(void 0);
|
|
1244
|
+
const { env } = useSpreePayEnv();
|
|
1235
1245
|
const elements = (0, import_react_stripe_js.useElements)();
|
|
1236
1246
|
const stripe = (0, import_react_stripe_js.useStripe)();
|
|
1237
1247
|
const id = (0, import_react5.useId)();
|
|
@@ -1269,24 +1279,25 @@ var CreditCardForm = ({ cancel, saveCard }) => {
|
|
|
1269
1279
|
setCardError("An error occurred while processing your card. Please try again.");
|
|
1270
1280
|
}
|
|
1271
1281
|
};
|
|
1282
|
+
const isDarkMode = env.tenantId === "cdc";
|
|
1272
1283
|
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
|
|
1273
|
-
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex w-full flex-col gap-
|
|
1284
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex w-full flex-col gap-4", children: [
|
|
1274
1285
|
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1275
1286
|
import_react_stripe_js.CardNumberElement,
|
|
1276
1287
|
{
|
|
1277
1288
|
options: {
|
|
1278
|
-
style,
|
|
1289
|
+
style: isDarkMode ? styleDark : styleLight,
|
|
1279
1290
|
placeholder: "Card Number",
|
|
1280
1291
|
classes: stripeElementClasses
|
|
1281
1292
|
}
|
|
1282
1293
|
}
|
|
1283
1294
|
),
|
|
1284
|
-
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex w-full gap-
|
|
1295
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex w-full gap-4", children: [
|
|
1285
1296
|
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1286
1297
|
import_react_stripe_js.CardExpiryElement,
|
|
1287
1298
|
{
|
|
1288
1299
|
options: {
|
|
1289
|
-
style,
|
|
1300
|
+
style: isDarkMode ? styleDark : styleLight,
|
|
1290
1301
|
placeholder: "MM / YY",
|
|
1291
1302
|
classes: stripeElementClasses
|
|
1292
1303
|
}
|
|
@@ -1296,7 +1307,7 @@ var CreditCardForm = ({ cancel, saveCard }) => {
|
|
|
1296
1307
|
import_react_stripe_js.CardCvcElement,
|
|
1297
1308
|
{
|
|
1298
1309
|
options: {
|
|
1299
|
-
style,
|
|
1310
|
+
style: isDarkMode ? styleDark : styleLight,
|
|
1300
1311
|
placeholder: "CVV",
|
|
1301
1312
|
classes: stripeElementClasses
|
|
1302
1313
|
}
|
|
@@ -1310,8 +1321,23 @@ var CreditCardForm = ({ cancel, saveCard }) => {
|
|
|
1310
1321
|
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Label, { className: "text-sm font-medium", htmlFor: "saveCard", children: "Save card for future purchases" })
|
|
1311
1322
|
] }),
|
|
1312
1323
|
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex w-full justify-end gap-2", children: [
|
|
1313
|
-
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1314
|
-
|
|
1324
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1325
|
+
Button,
|
|
1326
|
+
{
|
|
1327
|
+
variant: "outline",
|
|
1328
|
+
className: "border-(--b-brand) bg-transparent font-medium text-(--brand-primary) hover:bg-(--s-primary-hover) hover:text-(--brand-primary)",
|
|
1329
|
+
onClick: cancel,
|
|
1330
|
+
children: "Cancel"
|
|
1331
|
+
}
|
|
1332
|
+
),
|
|
1333
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1334
|
+
Button,
|
|
1335
|
+
{
|
|
1336
|
+
className: "bg-(--s-brand) font-medium text-(--inverse) hover:bg-(--s-brand-hover)",
|
|
1337
|
+
onClick: handleSaveCard,
|
|
1338
|
+
children: "Add Card"
|
|
1339
|
+
}
|
|
1340
|
+
)
|
|
1315
1341
|
] })
|
|
1316
1342
|
] });
|
|
1317
1343
|
};
|
|
@@ -1339,7 +1365,7 @@ var CreditCard = () => {
|
|
|
1339
1365
|
setShowForm(false);
|
|
1340
1366
|
};
|
|
1341
1367
|
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col items-baseline gap-4", children: [
|
|
1342
|
-
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: "text-
|
|
1368
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: "text-[22px] leading-7 font-medium text-(--brand-primary)", children: "Your Cards" }),
|
|
1343
1369
|
!showForm && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
|
|
1344
1370
|
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1345
1371
|
CardsList,
|
|
@@ -1348,7 +1374,15 @@ var CreditCard = () => {
|
|
|
1348
1374
|
setCard
|
|
1349
1375
|
}
|
|
1350
1376
|
),
|
|
1351
|
-
|
|
1377
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1378
|
+
"button",
|
|
1379
|
+
{
|
|
1380
|
+
onClick: () => setShowForm(true),
|
|
1381
|
+
disabled: !spreePayConfig?.stripePublicKey,
|
|
1382
|
+
className: "text-md text-(--brand-primary) hover:underline",
|
|
1383
|
+
children: "Add new card"
|
|
1384
|
+
}
|
|
1385
|
+
)
|
|
1352
1386
|
] }),
|
|
1353
1387
|
spreePayConfig?.stripePublicKey && showForm && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(StripeWrapper, { onCancel: handleCancel, saveNewCard, publicKey: spreePayConfig.stripePublicKey })
|
|
1354
1388
|
] });
|
|
@@ -1369,7 +1403,7 @@ function Switch({ className, ...props }) {
|
|
|
1369
1403
|
{
|
|
1370
1404
|
"data-slot": "switch",
|
|
1371
1405
|
className: cn(
|
|
1372
|
-
"peer
|
|
1406
|
+
"peer focus-visible:border-ring focus-visible:ring-ring/50 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-(--brand-primary) data-[state=unchecked]:bg-(--brand-primary)",
|
|
1373
1407
|
className
|
|
1374
1408
|
),
|
|
1375
1409
|
...props,
|
|
@@ -1377,7 +1411,7 @@ function Switch({ className, ...props }) {
|
|
|
1377
1411
|
SwitchPrimitive.Thumb,
|
|
1378
1412
|
{
|
|
1379
1413
|
"data-slot": "switch-thumb",
|
|
1380
|
-
className: "
|
|
1414
|
+
className: "pointer-events-none block size-4 rounded-full bg-(--s-default) ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
|
|
1381
1415
|
}
|
|
1382
1416
|
)
|
|
1383
1417
|
}
|
|
@@ -1400,23 +1434,23 @@ var PointsSwitch = (props) => {
|
|
|
1400
1434
|
Label,
|
|
1401
1435
|
{
|
|
1402
1436
|
htmlFor: id,
|
|
1403
|
-
className: "text-md flex-col items-baseline gap-0 leading-[1.3] font-
|
|
1437
|
+
className: "text-md flex-col items-baseline gap-0 leading-[1.3] font-medium text-(--brand-primary) sm:flex-row sm:gap-2 md:text-[22px]",
|
|
1404
1438
|
children: [
|
|
1405
1439
|
"Use Points ",
|
|
1406
|
-
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-xs font-medium", children: "Optional" })
|
|
1440
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-xs font-medium text-(--tertiary)", children: "Optional" })
|
|
1407
1441
|
]
|
|
1408
1442
|
}
|
|
1409
1443
|
)
|
|
1410
1444
|
] }),
|
|
1411
1445
|
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2.5", children: [
|
|
1412
|
-
balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { className: "flex-1 text-right text-sm font-medium text-
|
|
1446
|
+
balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { className: "flex-1 text-right text-sm font-medium text-(--brand-primary)", children: [
|
|
1413
1447
|
formatPoints(balance.availablePoints, spreePayConfig?.pointsTitle),
|
|
1414
|
-
!!spreePayConfig?.pointsConversionRatio && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-
|
|
1448
|
+
!!spreePayConfig?.pointsConversionRatio && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-(--secondary)", children: ` \xB7 ${formatUSD(balance.availablePoints * spreePayConfig.pointsConversionRatio)}` })
|
|
1415
1449
|
] }) : null,
|
|
1416
1450
|
Boolean(appProps.topUpLink) && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
1417
1451
|
"a",
|
|
1418
1452
|
{
|
|
1419
|
-
className: "
|
|
1453
|
+
className: "cursor-pointer rounded-full bg-(--primary) px-2 py-1.5 text-xs font-medium text-(--inverse)",
|
|
1420
1454
|
rel: "noreferrer",
|
|
1421
1455
|
target: "_blank",
|
|
1422
1456
|
href: appProps.topUpLink,
|
|
@@ -1425,15 +1459,15 @@ var PointsSwitch = (props) => {
|
|
|
1425
1459
|
)
|
|
1426
1460
|
] })
|
|
1427
1461
|
] }),
|
|
1428
|
-
message && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex gap-1 rounded-sm border border-
|
|
1429
|
-
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("svg", { className: "size-
|
|
1462
|
+
message && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex gap-1 rounded-sm border border-(--accent)/20 bg-(--accent)/5 p-1.5", children: [
|
|
1463
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("svg", { className: "size-4 shrink-0", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
1430
1464
|
"path",
|
|
1431
1465
|
{
|
|
1432
|
-
fill: "
|
|
1466
|
+
fill: "currentColor",
|
|
1433
1467
|
d: "M9.6 13.8h.8V9.2h-.8zM10 8q.2 0 .4-.2l.1-.3-.1-.4L10 7l-.4.1-.1.4.1.3zm0 9.5a7 7 0 0 1-5.3-2.2 8 8 0 0 1-1.6-8.2 8 8 0 0 1 4-4q1.4-.6 2.9-.6a7 7 0 0 1 5.3 2.2 8 8 0 0 1 1.6 8.2 8 8 0 0 1-4 4q-1.4.6-2.9.6m0-.8q2.8 0 4.7-2 2-1.9 2-4.7t-2-4.7a6 6 0 0 0-4.7-2q-2.8 0-4.7 2a6 6 0 0 0-2 4.7q0 2.8 2 4.7 1.9 2 4.7 2"
|
|
1434
1468
|
}
|
|
1435
1469
|
) }),
|
|
1436
|
-
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-xs font-medium text-
|
|
1470
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-xs leading-4 font-medium text-(--brand-primary)", children: message })
|
|
1437
1471
|
] })
|
|
1438
1472
|
] });
|
|
1439
1473
|
};
|
|
@@ -1454,7 +1488,7 @@ function Input({ className, type, ...props }) {
|
|
|
1454
1488
|
type,
|
|
1455
1489
|
"data-slot": "input",
|
|
1456
1490
|
className: cn(
|
|
1457
|
-
"file:text-foreground
|
|
1491
|
+
"file:text-foreground dark:bg-input/30 border-input placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-(--primary) selection:text-(--inverse) file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
|
1458
1492
|
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
|
1459
1493
|
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
|
1460
1494
|
className
|
|
@@ -2392,7 +2426,7 @@ function Slider2(props) {
|
|
|
2392
2426
|
min,
|
|
2393
2427
|
max,
|
|
2394
2428
|
className: cn2(
|
|
2395
|
-
"relative flex w-full touch-none items-center select-none data-
|
|
2429
|
+
"relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
|
|
2396
2430
|
className
|
|
2397
2431
|
),
|
|
2398
2432
|
...rest,
|
|
@@ -2402,13 +2436,15 @@ function Slider2(props) {
|
|
|
2402
2436
|
{
|
|
2403
2437
|
"data-slot": "slider-track",
|
|
2404
2438
|
className: cn2(
|
|
2405
|
-
"relative grow overflow-hidden rounded-full bg-
|
|
2439
|
+
"relative grow overflow-hidden rounded-full bg-(--primary)/15 data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
|
|
2406
2440
|
),
|
|
2407
2441
|
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2408
2442
|
Range,
|
|
2409
2443
|
{
|
|
2410
2444
|
"data-slot": "slider-range",
|
|
2411
|
-
className: cn2(
|
|
2445
|
+
className: cn2(
|
|
2446
|
+
"absolute bg-(--primary) data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
|
|
2447
|
+
)
|
|
2412
2448
|
}
|
|
2413
2449
|
)
|
|
2414
2450
|
}
|
|
@@ -2417,7 +2453,7 @@ function Slider2(props) {
|
|
|
2417
2453
|
Thumb2,
|
|
2418
2454
|
{
|
|
2419
2455
|
"data-slot": "slider-thumb",
|
|
2420
|
-
className: "ring-ring/50 block size-5 shrink-0 rounded-full border border-
|
|
2456
|
+
className: "ring-ring/50 block size-5 shrink-0 rounded-full border border-(--b-inverse) bg-(--primary) shadow-(--primary)/20 shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
|
|
2421
2457
|
},
|
|
2422
2458
|
index
|
|
2423
2459
|
))
|
|
@@ -2451,24 +2487,27 @@ var PointsSelector = (props) => {
|
|
|
2451
2487
|
{
|
|
2452
2488
|
disabled: isDisabled,
|
|
2453
2489
|
onClick: onSelect,
|
|
2454
|
-
className: cn("
|
|
2455
|
-
"border-
|
|
2490
|
+
className: cn("cursor-pointer overflow-hidden rounded-md border-2 border-transparent", {
|
|
2491
|
+
"border-(--b-brand)": isSelected,
|
|
2456
2492
|
"cursor-not-allowed opacity-50": isDisabled
|
|
2457
2493
|
}),
|
|
2458
2494
|
children: [
|
|
2459
|
-
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className:
|
|
2495
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex h-11 w-full bg-(--s-primary) hover:bg-(--s-primary-hover)", children: [
|
|
2460
2496
|
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2461
2497
|
"div",
|
|
2462
2498
|
{
|
|
2463
|
-
className: cn(
|
|
2464
|
-
"
|
|
2465
|
-
|
|
2466
|
-
|
|
2499
|
+
className: cn(
|
|
2500
|
+
"flex h-full w-11 shrink-0 items-center justify-center border-r border-b border-(--b-inverse)",
|
|
2501
|
+
{
|
|
2502
|
+
"border-(--b-brand)": isSelected
|
|
2503
|
+
}
|
|
2504
|
+
),
|
|
2505
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex size-5 items-center justify-center rounded-full border-2 border-(--brand-primary)", children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "size-2 rounded-full bg-(--brand-primary)" }) })
|
|
2467
2506
|
}
|
|
2468
2507
|
),
|
|
2469
2508
|
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex h-full w-full items-center justify-between gap-2 px-2 sm:gap-3 sm:px-3", children })
|
|
2470
2509
|
] }),
|
|
2471
|
-
isSelected && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "px-2 pt-
|
|
2510
|
+
isSelected && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "px-2 pt-5 pb-2 sm:px-3 md:px-4", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex justify-between gap-2 sm:gap-3", children: [
|
|
2472
2511
|
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col gap-1", children: [
|
|
2473
2512
|
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2474
2513
|
Input,
|
|
@@ -2476,12 +2515,12 @@ var PointsSelector = (props) => {
|
|
|
2476
2515
|
readOnly: true,
|
|
2477
2516
|
name: "points amount",
|
|
2478
2517
|
value: pointsValue,
|
|
2479
|
-
className: "sm:text-md min-w-[50px] bg-
|
|
2518
|
+
className: "sm:text-md min-w-[50px] bg-(--s-default) px-1 text-center text-xs font-medium sm:min-w-[100px] sm:px-2",
|
|
2480
2519
|
style: { width: `${pointsValue.length}ch` },
|
|
2481
2520
|
onClick: (e) => e.stopPropagation()
|
|
2482
2521
|
}
|
|
2483
2522
|
),
|
|
2484
|
-
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-left text-xs leading-
|
|
2523
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-left text-xs leading-5 text-(--tertiary)", children: "Points" })
|
|
2485
2524
|
] }),
|
|
2486
2525
|
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex w-full items-center pb-6", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2487
2526
|
Slider2,
|
|
@@ -2502,12 +2541,12 @@ var PointsSelector = (props) => {
|
|
|
2502
2541
|
readOnly: true,
|
|
2503
2542
|
name: "usd amount",
|
|
2504
2543
|
value: usdValue,
|
|
2505
|
-
className: "sm:text-md min-w-[50px] bg-
|
|
2544
|
+
className: "sm:text-md min-w-[50px] bg-(--s-default) px-1 text-center text-xs font-medium sm:min-w-[100px] sm:px-2",
|
|
2506
2545
|
style: { width: `${usdValue.length}ch` },
|
|
2507
2546
|
onClick: (e) => e.stopPropagation()
|
|
2508
2547
|
}
|
|
2509
2548
|
),
|
|
2510
|
-
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-left text-xs leading-
|
|
2549
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-left text-xs leading-5 text-(--tertiary)", children: "Card" })
|
|
2511
2550
|
] })
|
|
2512
2551
|
] }) })
|
|
2513
2552
|
]
|
|
@@ -2561,15 +2600,15 @@ var SplitBlock = (props) => {
|
|
|
2561
2600
|
}, [spreePayConfig?.pointsChain, initWallet, env.useWeb3Points]);
|
|
2562
2601
|
const isPointsSelectorDisabled = env.useWeb3Points ? !walletReady : false;
|
|
2563
2602
|
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(PointsSelector, { isDisabled: isPointsSelectorDisabled, onSelect: () => onSelect("air"), isSelected, children: [
|
|
2564
|
-
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex items-center gap-2", children: balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("p", { className: "text-left text-xs font-medium text-
|
|
2565
|
-
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-
|
|
2603
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex items-center gap-2", children: balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("p", { className: "text-left text-xs font-medium text-(--brand-primary) sm:text-sm", children: [
|
|
2604
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-(--secondary)", children: "Available" }),
|
|
2566
2605
|
" ",
|
|
2567
2606
|
formatPoints(balance.availablePoints, pointsTitle),
|
|
2568
2607
|
" ",
|
|
2569
|
-
pointsConversionRatio && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-
|
|
2608
|
+
pointsConversionRatio && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-(--secondary)", children: formatUSD(balance.availablePoints * pointsConversionRatio) })
|
|
2570
2609
|
] }) : null }),
|
|
2571
|
-
isBalanceLoading ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-4 w-6 animate-pulse bg-
|
|
2572
|
-
address && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "text-sm font-medium text-
|
|
2610
|
+
isBalanceLoading ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-4 w-6 animate-pulse bg-(--s-secondary)" }) : !balance?.availablePoints && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-sm font-medium text-(--brand-primary)", children: "No points available" }),
|
|
2611
|
+
address && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "text-sm font-medium text-(--brand-primary)", children: address.length > 8 ? `${address.slice(0, 4)}...${address.slice(-4)}` : address })
|
|
2573
2612
|
] }) });
|
|
2574
2613
|
};
|
|
2575
2614
|
|
|
@@ -2666,8 +2705,8 @@ var CreditCardTab = () => {
|
|
|
2666
2705
|
register(handlePay);
|
|
2667
2706
|
}, [register, handlePay]);
|
|
2668
2707
|
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { children: [
|
|
2669
|
-
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "border-b border-
|
|
2670
|
-
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex flex-col gap-
|
|
2708
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "border-b border-b-(--border-component-specific-card) px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CreditCard, {}) }),
|
|
2709
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex flex-col gap-4 border-b border-b-(--border-component-specific-card) px-5 pt-5 pb-5 md:px-7 md:pt-6 md:pb-7", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Points, {}) })
|
|
2671
2710
|
] });
|
|
2672
2711
|
};
|
|
2673
2712
|
|
|
@@ -2865,7 +2904,7 @@ var ConnectButton = () => {
|
|
|
2865
2904
|
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2866
2905
|
"button",
|
|
2867
2906
|
{
|
|
2868
|
-
className: "h-[34px] rounded-md border border-
|
|
2907
|
+
className: "h-[34px] rounded-md border border-(--b-strong) px-3 text-sm font-medium text-(--brand-primary)",
|
|
2869
2908
|
onClick: openConnectModal,
|
|
2870
2909
|
children: "Connect a Wallet"
|
|
2871
2910
|
}
|
|
@@ -2875,7 +2914,7 @@ var ConnectButton = () => {
|
|
|
2875
2914
|
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2876
2915
|
"button",
|
|
2877
2916
|
{
|
|
2878
|
-
className: "h-[34px] rounded-md border border-
|
|
2917
|
+
className: "h-[34px] rounded-md border border-(--b-strong) px-3 text-sm font-medium text-(--brand-primary)",
|
|
2879
2918
|
onClick: openChainModal,
|
|
2880
2919
|
children: "Select a Network"
|
|
2881
2920
|
}
|
|
@@ -2884,7 +2923,7 @@ var ConnectButton = () => {
|
|
|
2884
2923
|
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
2885
2924
|
"button",
|
|
2886
2925
|
{
|
|
2887
|
-
className: "flex h-[34px] items-center gap-2 rounded-md border border-
|
|
2926
|
+
className: "flex h-[34px] items-center gap-2 rounded-md border border-(--b-strong) px-1.5 text-sm font-medium text-(--brand-primary)",
|
|
2888
2927
|
onClick: openAccountModal,
|
|
2889
2928
|
children: [
|
|
2890
2929
|
chain.hasIcon && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "size-6 overflow-hidden rounded-full", style: { background: chain.iconBackground }, children: chain.iconUrl && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("img", { alt: chain.name ?? "Chain icon", src: chain.iconUrl }) }),
|
|
@@ -2999,10 +3038,10 @@ function getSymbolLogo(symbol) {
|
|
|
2999
3038
|
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
3000
3039
|
var Logos = () => {
|
|
3001
3040
|
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex", children: [
|
|
3002
|
-
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "rounded-full border border-
|
|
3003
|
-
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "-ml-2.5 rounded-full border border-
|
|
3004
|
-
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "-ml-2.5 rounded-full border border-
|
|
3005
|
-
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "-ml-2.5 rounded-full border border-
|
|
3041
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "rounded-full border border-(--b-primary)", children: getSymbolLogo("MOCA") }),
|
|
3042
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "-ml-2.5 rounded-full border border-(--b-primary)", children: getSymbolLogo("USDC") }),
|
|
3043
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "-ml-2.5 rounded-full border border-(--b-primary)", children: getSymbolLogo("USDT") }),
|
|
3044
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "-ml-2.5 rounded-full border border-(--b-primary) bg-(--s-primary)", children: getSymbolLogo("WETH") })
|
|
3006
3045
|
] });
|
|
3007
3046
|
};
|
|
3008
3047
|
|
|
@@ -3237,12 +3276,12 @@ var CryptoSelectModal = import_nice_modal_react5.default.create(() => {
|
|
|
3237
3276
|
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(DialogContent, { showCloseButton: false, className: "max-h-[90vh] gap-0 p-0", children: [
|
|
3238
3277
|
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
|
|
3239
3278
|
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
|
|
3240
|
-
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("button", { className: "rounded-md hover:bg-
|
|
3241
|
-
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DialogTitle, { className: "text-
|
|
3242
|
-
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("button", { className: "rounded-md p-1 hover:bg-
|
|
3279
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("button", { className: "rounded-md hover:bg-(--s-primary-hover)", onClick: modal.remove, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { stroke: "currentColor", d: "m15 6.5-6 6 6 6" }) }) }),
|
|
3280
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DialogTitle, { className: "text-2xl font-medium text-(--brand-primary)", children: "Select a token" }),
|
|
3281
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("button", { className: "rounded-md p-1 hover:bg-(--s-primary-hover)", onClick: modal.remove, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "17", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
3243
3282
|
"path",
|
|
3244
3283
|
{
|
|
3245
|
-
fill: "
|
|
3284
|
+
fill: "currentColor",
|
|
3246
3285
|
d: "M12.6 3.9c.2.2.2.52 0 .71L8.7 8.5l3.9 3.89a.5.5 0 1 1-.71.7L8 9.22 4.11 13.1a.5.5 0 1 1-.7-.71L7.28 8.5 3.4 4.61a.5.5 0 1 1 .71-.7L8 7.78l3.89-3.89c.2-.2.51-.2.7 0Z"
|
|
3247
3286
|
}
|
|
3248
3287
|
) }) })
|
|
@@ -3251,14 +3290,14 @@ var CryptoSelectModal = import_nice_modal_react5.default.create(() => {
|
|
|
3251
3290
|
] }),
|
|
3252
3291
|
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Separator2, { className: "hidden md:block" }),
|
|
3253
3292
|
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
|
|
3254
|
-
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h3", { className: "text-
|
|
3255
|
-
(error || nativeError) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-center text-sm text-
|
|
3293
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h3", { className: "text-md font-medium text-(--brand-primary)", children: "Tokens with wallet balance" }),
|
|
3294
|
+
(error || nativeError) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-center text-sm text-(--negative)", children: "Something wrong" }),
|
|
3256
3295
|
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
|
|
3257
|
-
isLoadingNative && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-
|
|
3296
|
+
isLoadingNative && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
|
|
3258
3297
|
nativeBalance && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
3259
3298
|
"button",
|
|
3260
3299
|
{
|
|
3261
|
-
className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-
|
|
3300
|
+
className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-(--brand-primary) hover:bg-(--s-primary-hover)",
|
|
3262
3301
|
onClick: () => handleSelect(nativeBalance),
|
|
3263
3302
|
children: [
|
|
3264
3303
|
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
@@ -3271,16 +3310,16 @@ var CryptoSelectModal = import_nice_modal_react5.default.create(() => {
|
|
|
3271
3310
|
nativeBalance.symbol
|
|
3272
3311
|
),
|
|
3273
3312
|
isLoading && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
|
|
3274
|
-
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-
|
|
3275
|
-
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-
|
|
3276
|
-
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-
|
|
3313
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
|
|
3314
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
|
|
3315
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" })
|
|
3277
3316
|
] }),
|
|
3278
3317
|
erc20Balances.map((coin) => {
|
|
3279
3318
|
const Icon = getSymbolLogo(coin.symbol);
|
|
3280
3319
|
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
3281
3320
|
"button",
|
|
3282
3321
|
{
|
|
3283
|
-
className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-
|
|
3322
|
+
className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-(--brand-primary) hover:bg-(--s-primary-hover) disabled:cursor-not-allowed disabled:opacity-50",
|
|
3284
3323
|
onClick: () => handleSelect(coin),
|
|
3285
3324
|
children: [
|
|
3286
3325
|
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
@@ -3294,12 +3333,12 @@ var CryptoSelectModal = import_nice_modal_react5.default.create(() => {
|
|
|
3294
3333
|
);
|
|
3295
3334
|
})
|
|
3296
3335
|
] }),
|
|
3297
|
-
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h3", { className: "text-
|
|
3336
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h3", { className: "text-md font-medium text-(--brand-primary)", children: "All Tokens" }),
|
|
3298
3337
|
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex max-h-[40vh] w-full flex-col gap-1 overflow-y-auto", children: [
|
|
3299
3338
|
tokensIsLoading && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
|
|
3300
|
-
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-
|
|
3301
|
-
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-
|
|
3302
|
-
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-
|
|
3339
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
|
|
3340
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
|
|
3341
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" })
|
|
3303
3342
|
] }),
|
|
3304
3343
|
filteredCoins.map((token) => {
|
|
3305
3344
|
const userCoin = userCoins.find((c) => c.symbol === token.symbol);
|
|
@@ -3308,9 +3347,9 @@ var CryptoSelectModal = import_nice_modal_react5.default.create(() => {
|
|
|
3308
3347
|
{
|
|
3309
3348
|
disabled: !userCoin,
|
|
3310
3349
|
onClick: () => userCoin && handleSelect(userCoin),
|
|
3311
|
-
className: "flex min-h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-
|
|
3350
|
+
className: "flex min-h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-(--brand-primary) hover:bg-(--s-primary-hover) disabled:cursor-not-allowed disabled:opacity-50",
|
|
3312
3351
|
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
3313
|
-
token.logoURI ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("img", { className: "size-8 shrink-0", src: token.logoURI, alt: `${token.name} logo` }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "size-8 shrink-0 rounded-full bg-
|
|
3352
|
+
token.logoURI ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("img", { className: "size-8 shrink-0", src: token.logoURI, alt: `${token.name} logo` }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "size-8 shrink-0 rounded-full bg-(--s-tertiary)" }),
|
|
3314
3353
|
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm font-medium", children: token.symbol })
|
|
3315
3354
|
] })
|
|
3316
3355
|
},
|
|
@@ -3330,13 +3369,17 @@ var SelectCoinButton = () => {
|
|
|
3330
3369
|
const openModal = () => {
|
|
3331
3370
|
import_nice_modal_react6.default.show(CryptoSelectModal);
|
|
3332
3371
|
};
|
|
3333
|
-
return /* @__PURE__ */ (0, import_jsx_runtime35.
|
|
3334
|
-
|
|
3335
|
-
|
|
3336
|
-
|
|
3337
|
-
|
|
3338
|
-
|
|
3339
|
-
|
|
3372
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
3373
|
+
"button",
|
|
3374
|
+
{
|
|
3375
|
+
onClick: openModal,
|
|
3376
|
+
className: "flex h-11 w-full overflow-hidden rounded-md bg-(--s-primary) hover:bg-(--s-primary-hover)",
|
|
3377
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex h-full w-full items-center justify-between px-3", children: [
|
|
3378
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "font-medium text-(--secondary)", children: "Select a token" }) }),
|
|
3379
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", d: "m6 12.43 4-4-4-4" }) })
|
|
3380
|
+
] })
|
|
3381
|
+
}
|
|
3382
|
+
);
|
|
3340
3383
|
};
|
|
3341
3384
|
|
|
3342
3385
|
// src/components/CryptoTab/Crypto/SelectedCoin.tsx
|
|
@@ -3344,18 +3387,18 @@ var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
|
3344
3387
|
var SelectedCoin = (props) => {
|
|
3345
3388
|
const { coin, balance, logoURI } = props;
|
|
3346
3389
|
const Icon = getSymbolLogo(coin);
|
|
3347
|
-
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "
|
|
3348
|
-
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "
|
|
3349
|
-
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "
|
|
3390
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex h-12 w-full overflow-hidden rounded-md border-2 border-(--b-brand) bg-(--s-primary)", children: [
|
|
3391
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex h-full w-11 shrink-0 items-center justify-center border-r border-(--b-brand) bg-(--s-primary)", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex size-5 items-center justify-center rounded-full border-2 border-(--brand-primary)", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "size-2 rounded-full bg-(--brand-primary)" }) }) }),
|
|
3392
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex h-full w-full items-center justify-between rounded-r-md px-3", children: [
|
|
3350
3393
|
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-1", children: [
|
|
3351
3394
|
Icon,
|
|
3352
3395
|
!Icon && logoURI && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("img", { className: "mr-1 size-8 shrink-0", src: logoURI, alt: `${coin} logo` }),
|
|
3353
|
-
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "font-semibold text-
|
|
3354
|
-
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", { d: "M6 12.4341L10 8.43408L6 4.43408", stroke: "
|
|
3396
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "font-semibold text-(--brand-primary)", children: coin }),
|
|
3397
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", { d: "M6 12.4341L10 8.43408L6 4.43408", stroke: "currentColor", strokeLinecap: "round" }) })
|
|
3355
3398
|
] }),
|
|
3356
|
-
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("p", { className: "text-xs font-medium text-
|
|
3399
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("p", { className: "text-xs font-medium text-(--secondary)", children: [
|
|
3357
3400
|
"Wallet balance ",
|
|
3358
|
-
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-
|
|
3401
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-(--brand-primary)", children: balance })
|
|
3359
3402
|
] })
|
|
3360
3403
|
] })
|
|
3361
3404
|
] });
|
|
@@ -3388,11 +3431,11 @@ var Crypto = () => {
|
|
|
3388
3431
|
}, [register, handlePay]);
|
|
3389
3432
|
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col items-baseline gap-4", children: [
|
|
3390
3433
|
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex w-full items-center justify-between gap-4", children: [
|
|
3391
|
-
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h3", { className: "text-
|
|
3434
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h3", { className: "text-xl leading-[1.7] font-semibold text-(--brand-primary)", children: "Pay with Crypto" }),
|
|
3392
3435
|
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ConnectButton, {})
|
|
3393
3436
|
] }),
|
|
3394
3437
|
!isWalletConnected && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Logos, {}),
|
|
3395
|
-
isWalletConnected && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex w-full flex-col gap-
|
|
3438
|
+
isWalletConnected && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex w-full flex-col gap-4", children: [
|
|
3396
3439
|
selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3397
3440
|
SelectedCoin,
|
|
3398
3441
|
{
|
|
@@ -3435,7 +3478,7 @@ var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
|
3435
3478
|
var CryptoTab = () => {
|
|
3436
3479
|
const { spreePayConfig } = useSpreePayConfig();
|
|
3437
3480
|
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { children: [
|
|
3438
|
-
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "border-b border-
|
|
3481
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "border-b border-b-(--border-component-specific-card) px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CryptoWrapper, {}) }),
|
|
3439
3482
|
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PointsSwitch, { disabled: true, message: spreePayConfig?.crypto.pointsInfoMessage }) })
|
|
3440
3483
|
] });
|
|
3441
3484
|
};
|
|
@@ -3449,10 +3492,11 @@ var TabButton = ({ isDisabled = false, isActive, children, onClick }) => {
|
|
|
3449
3492
|
disabled: isDisabled,
|
|
3450
3493
|
onClick,
|
|
3451
3494
|
className: cn(
|
|
3452
|
-
"flex w-[
|
|
3453
|
-
{ "opacity-50": !isActive || isDisabled },
|
|
3495
|
+
"flex w-[180px] flex-col items-baseline gap-0.5 rounded-md border border-(--b-tertiary) px-3 py-1.5 text-(--tertiary) shadow-[0_6.25px_25px_0_rgba(0,0,0,0.05)] hover:bg-(--s-primary)",
|
|
3454
3496
|
{ "cursor-not-allowed": isDisabled },
|
|
3455
|
-
{
|
|
3497
|
+
{
|
|
3498
|
+
"border-2 border-(--b-brand) bg-(--s-primary) text-(--brand-primary)": isActive
|
|
3499
|
+
}
|
|
3456
3500
|
),
|
|
3457
3501
|
children
|
|
3458
3502
|
}
|
|
@@ -3466,20 +3510,20 @@ var TabButtons = (props) => {
|
|
|
3466
3510
|
onChange({ type, method: null });
|
|
3467
3511
|
}
|
|
3468
3512
|
};
|
|
3469
|
-
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex gap-
|
|
3470
|
-
configIsLoading && /* @__PURE__ */ (0, import_jsx_runtime40.
|
|
3471
|
-
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "bg-primary/7 h-[58px] w-[132px] animate-pulse rounded-sm" }),
|
|
3472
|
-
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "bg-primary/7 h-[58px] w-[132px] animate-pulse rounded-sm" })
|
|
3473
|
-
] }),
|
|
3513
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex gap-4", children: [
|
|
3514
|
+
configIsLoading && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "h-[74px] w-[180px] animate-pulse rounded-md bg-(--s-primary)" }),
|
|
3474
3515
|
spreePayConfig?.creditCard.enabled && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(TabButton, { onClick: handleChange("CREDIT_CARD" /* CREDIT_CARD */), isActive: value === "CREDIT_CARD" /* CREDIT_CARD */, children: [
|
|
3475
|
-
/* @__PURE__ */ (0, import_jsx_runtime40.
|
|
3476
|
-
"path",
|
|
3477
|
-
{
|
|
3478
|
-
|
|
3479
|
-
|
|
3480
|
-
|
|
3481
|
-
|
|
3482
|
-
|
|
3516
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", fill: "none", viewBox: "0 0 32 32", children: [
|
|
3517
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("mask", { id: "a", width: "32", height: "32", x: "0", y: "0", maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { fill: "#d9d9d9", d: "M0 0h32v32H0z" }) }),
|
|
3518
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("g", { mask: "url(#a)", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
3519
|
+
"path",
|
|
3520
|
+
{
|
|
3521
|
+
fill: "currentColor",
|
|
3522
|
+
d: "M28 8.82v14.36q0 .92-.62 1.54-.6.6-1.53.61H6.15q-.91 0-1.53-.61A2 2 0 0 1 4 23.18V8.82q0-.92.62-1.54.6-.6 1.53-.61h19.7q.91 0 1.53.61.62.62.62 1.54M5.33 11.74h21.34V8.82q0-.31-.26-.56a.8.8 0 0 0-.56-.26H6.15q-.3 0-.56.26a.8.8 0 0 0-.26.56zm0 3.18v8.26q0 .31.26.56t.56.26h19.7q.3 0 .56-.26a.8.8 0 0 0 .26-.56v-8.26z"
|
|
3523
|
+
}
|
|
3524
|
+
) })
|
|
3525
|
+
] }),
|
|
3526
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-md font-medium", children: "Card" })
|
|
3483
3527
|
] }),
|
|
3484
3528
|
spreePayConfig?.crypto.enabled && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(TabButton, { onClick: handleChange("CRYPTO" /* CRYPTO */), isActive: value === "CRYPTO" /* CRYPTO */, children: [
|
|
3485
3529
|
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("svg", { className: "my-1", xmlns: "http://www.w3.org/2000/svg", width: "30", height: "16", fill: "none", children: [
|
|
@@ -3499,7 +3543,7 @@ var TabButtons = (props) => {
|
|
|
3499
3543
|
),
|
|
3500
3544
|
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "2" })
|
|
3501
3545
|
] }),
|
|
3502
|
-
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-
|
|
3546
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-md font-medium", children: "Crypto" })
|
|
3503
3547
|
] })
|
|
3504
3548
|
] });
|
|
3505
3549
|
};
|
|
@@ -3508,9 +3552,9 @@ var TabButtons = (props) => {
|
|
|
3508
3552
|
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
3509
3553
|
var SpreePayContent = ({ isLoggedIn }) => {
|
|
3510
3554
|
const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
|
|
3511
|
-
return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "w-full overflow-hidden rounded-3xl border border-
|
|
3512
|
-
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex w-full flex-col gap-4 border-b border-
|
|
3513
|
-
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h2", { className: "text-
|
|
3555
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "w-full overflow-hidden rounded-3xl border border-(--border-component-specific-card) bg-(--surface-component-specific-card-default-card) shadow-[0_6.25px_25px_0_var(--shadow-component-specific-card)]", children: [
|
|
3556
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex w-full flex-col gap-4 border-b border-b-(--border-component-specific-card) px-5 py-5 md:px-7 md:py-6", children: [
|
|
3557
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h2", { className: "text-[28px] leading-8 font-medium text-(--brand-primary)", children: "Choose a Payment Method" }),
|
|
3514
3558
|
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
|
|
3515
3559
|
] }),
|
|
3516
3560
|
selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CreditCardTab, {}),
|
|
@@ -3627,8 +3671,8 @@ var SpreePayInner = () => {
|
|
|
3627
3671
|
const getContent = () => {
|
|
3628
3672
|
if (isChecking) {
|
|
3629
3673
|
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex w-full flex-col", children: [
|
|
3630
|
-
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "
|
|
3631
|
-
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "
|
|
3674
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "mb-4 h-[315px] animate-pulse rounded-3xl bg-(--s-primary)" }),
|
|
3675
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "h-[135px] animate-pulse rounded-3xl bg-(--s-primary)" })
|
|
3632
3676
|
] });
|
|
3633
3677
|
}
|
|
3634
3678
|
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|