@pandait.tech/payment-nuvei 0.1.0 → 0.1.1
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/dist/ui/index.cjs +418 -290
- package/dist/ui/index.cjs.map +1 -1
- package/dist/ui/index.d.cts +4 -4
- package/dist/ui/index.d.ts +4 -4
- package/dist/ui/index.js +418 -290
- package/dist/ui/index.js.map +1 -1
- package/package.json +1 -1
package/dist/ui/index.cjs
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var react = require('react');
|
|
4
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
5
|
var fa = require('react-icons/fa');
|
|
5
6
|
var Script = require('next/script');
|
|
6
7
|
|
|
@@ -516,8 +517,6 @@ var CARD_TYPE_NAMES = {
|
|
|
516
517
|
prepaid: "Prepago",
|
|
517
518
|
unknown: ""
|
|
518
519
|
};
|
|
519
|
-
|
|
520
|
-
// src/ui/CardVisual.tsx
|
|
521
520
|
var BRAND_GRADIENT = {
|
|
522
521
|
vi: { from: "#1a1f71", to: "#0d1240" },
|
|
523
522
|
mc: { from: "#cc4d2e", to: "#561a0e" },
|
|
@@ -529,9 +528,12 @@ var BRAND_GRADIENT = {
|
|
|
529
528
|
function BrandMark({ brand }) {
|
|
530
529
|
const text = CARD_BRAND_NAMES[brand] || "CARD";
|
|
531
530
|
if (brand === "mc") {
|
|
532
|
-
return /* @__PURE__ */
|
|
531
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center -space-x-2", children: [
|
|
532
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-4 h-4 rounded-full bg-[#eb001b]" }),
|
|
533
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-4 h-4 rounded-full bg-[#f79e1b]/90 mix-blend-screen" })
|
|
534
|
+
] });
|
|
533
535
|
}
|
|
534
|
-
return /* @__PURE__ */
|
|
536
|
+
return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white text-[11px] font-bold tracking-wider uppercase italic", children: text });
|
|
535
537
|
}
|
|
536
538
|
function CardVisual({
|
|
537
539
|
bin,
|
|
@@ -570,29 +572,66 @@ function CardVisual({
|
|
|
570
572
|
const cardType = binInfo?.type ? CARD_TYPE_NAMES[binInfo.type] || "" : "";
|
|
571
573
|
const expiryShort = `${expiryMonth.padStart(2, "0")}/${String(expiryYear).slice(-2)}`;
|
|
572
574
|
if (variant === "compact") {
|
|
573
|
-
return /* @__PURE__ */
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
575
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
|
|
576
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
577
|
+
"div",
|
|
578
|
+
{
|
|
579
|
+
style: gradientStyle,
|
|
580
|
+
className: "shrink-0 relative w-22 h-14 rounded-md shadow-md overflow-hidden",
|
|
581
|
+
children: [
|
|
582
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-linear-to-br from-white/10 via-transparent to-black/20 pointer-events-none" }),
|
|
583
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-2 left-2 w-3.5 h-2.5 rounded-sm bg-linear-to-br from-yellow-200/80 to-yellow-600/80 border border-yellow-700/40" }),
|
|
584
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-1.5 right-2", children: /* @__PURE__ */ jsxRuntime.jsx(BrandMark, { brand }) }),
|
|
585
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-1.5 left-2 right-2 flex justify-between items-end", children: [
|
|
586
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-white/95 text-[11px] font-mono tracking-[0.05em] font-semibold drop-shadow", children: [
|
|
587
|
+
"\xB7\xB7\xB7\xB7",
|
|
588
|
+
last4
|
|
589
|
+
] }),
|
|
590
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white/75 text-[8px] font-mono", children: expiryShort })
|
|
591
|
+
] })
|
|
592
|
+
]
|
|
593
|
+
}
|
|
594
|
+
),
|
|
595
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
|
|
596
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-[var(--color-text-main)] truncate", children: bankName || CARD_BRAND_NAMES[brand] || "Tarjeta" }),
|
|
597
|
+
/* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-[var(--color-text-main)]/50 truncate", children: [
|
|
598
|
+
cardType ? `${cardType} \xB7 ` : "",
|
|
599
|
+
holderName || "\u2014"
|
|
600
|
+
] })
|
|
601
|
+
] })
|
|
602
|
+
] });
|
|
584
603
|
}
|
|
585
|
-
return /* @__PURE__ */
|
|
604
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
586
605
|
"div",
|
|
587
606
|
{
|
|
588
607
|
style: gradientStyle,
|
|
589
|
-
className: "relative overflow-hidden rounded-2xl shadow-xl p-5 aspect-[1.586/1] w-full max-w-sm"
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
608
|
+
className: "relative overflow-hidden rounded-2xl shadow-xl p-5 aspect-[1.586/1] w-full max-w-sm",
|
|
609
|
+
children: [
|
|
610
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-linear-to-br from-white/10 via-transparent to-black/30 pointer-events-none" }),
|
|
611
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex justify-between items-start", children: [
|
|
612
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
613
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] font-medium tracking-[0.2em] uppercase text-white/50", children: cardType || "Tarjeta" }),
|
|
614
|
+
bankName && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-white/85 mt-0.5 font-medium", children: bankName })
|
|
615
|
+
] }),
|
|
616
|
+
/* @__PURE__ */ jsxRuntime.jsx(BrandMark, { brand })
|
|
617
|
+
] }),
|
|
618
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative mt-6 w-9 h-7 rounded-md bg-linear-to-br from-yellow-200 to-yellow-600 border border-yellow-700/40 shadow-inner" }),
|
|
619
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative mt-4", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "font-mono text-lg tracking-wider text-white drop-shadow", children: [
|
|
620
|
+
"\xB7\xB7\xB7\xB7 \xB7\xB7\xB7\xB7 \xB7\xB7\xB7\xB7 ",
|
|
621
|
+
last4
|
|
622
|
+
] }) }),
|
|
623
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mt-3 flex justify-between items-end", children: [
|
|
624
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
|
|
625
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[9px] uppercase tracking-wider text-white/50", children: "Titular" }),
|
|
626
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-white text-sm font-medium truncate uppercase", children: holderName || "\u2014" })
|
|
627
|
+
] }),
|
|
628
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-right", children: [
|
|
629
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[9px] uppercase tracking-wider text-white/50", children: "Expira" }),
|
|
630
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-white text-sm font-mono font-medium", children: expiryShort })
|
|
631
|
+
] })
|
|
632
|
+
] })
|
|
633
|
+
]
|
|
634
|
+
}
|
|
596
635
|
);
|
|
597
636
|
}
|
|
598
637
|
function SavedCards({
|
|
@@ -697,173 +736,219 @@ function SavedCards({
|
|
|
697
736
|
}
|
|
698
737
|
}
|
|
699
738
|
if (loading) {
|
|
700
|
-
return /* @__PURE__ */
|
|
739
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center py-6", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-12 h-12 rounded-full border-2 border-[var(--color-text-main)]/20 border-t-[var(--color-primary)] animate-spin" }) });
|
|
701
740
|
}
|
|
702
741
|
const validCards = cards.filter((c) => c.status === "valid");
|
|
703
742
|
const reviewCards = cards.filter(
|
|
704
743
|
(c) => c.status === "review" || c.status === "pending"
|
|
705
744
|
);
|
|
706
|
-
return /* @__PURE__ */
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
key: card.token,
|
|
714
|
-
onClick: () => {
|
|
715
|
-
onSelectCard(card, cvc);
|
|
716
|
-
if (!isSelected) {
|
|
717
|
-
setCvcValues((prev) => ({ ...prev, [card.token]: "" }));
|
|
718
|
-
}
|
|
719
|
-
},
|
|
720
|
-
className: `border rounded-lg cursor-pointer transition-all duration-200 ${isSelected ? "border-[var(--color-primary)] bg-[var(--color-primary)]/5 ring-1 ring-[var(--color-primary)]" : "border-[var(--color-border-default)] hover:border-[var(--color-border-strong)]"}`
|
|
721
|
-
},
|
|
722
|
-
/* @__PURE__ */ React.createElement("div", { className: "p-4 flex items-center justify-between gap-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 min-w-0 flex-1" }, /* @__PURE__ */ React.createElement(
|
|
723
|
-
CardVisual,
|
|
724
|
-
{
|
|
725
|
-
bin: card.bin,
|
|
726
|
-
brand: card.type,
|
|
727
|
-
last4: card.number,
|
|
728
|
-
holderName: card.holder_name,
|
|
729
|
-
expiryMonth: card.expiry_month,
|
|
730
|
-
expiryYear: card.expiry_year,
|
|
731
|
-
binDatabaseEndpoint
|
|
732
|
-
}
|
|
733
|
-
), isSelected && /* @__PURE__ */ React.createElement(fa.FaCheck, { className: "w-3.5 h-3.5 text-[var(--color-primary)] shrink-0" })), /* @__PURE__ */ React.createElement(
|
|
734
|
-
"button",
|
|
735
|
-
{
|
|
736
|
-
onClick: (e) => {
|
|
737
|
-
e.stopPropagation();
|
|
738
|
-
handleDelete(card.token);
|
|
739
|
-
},
|
|
740
|
-
disabled: deleting === card.token,
|
|
741
|
-
className: "text-[var(--color-text-main)]/30 hover:text-[var(--color-error)] p-1 disabled:opacity-50 transition-colors cursor-pointer shrink-0",
|
|
742
|
-
title: "Eliminar tarjeta"
|
|
743
|
-
},
|
|
744
|
-
/* @__PURE__ */ React.createElement(fa.FaTrash, { className: "w-3 h-3" })
|
|
745
|
-
)),
|
|
746
|
-
isSelected && /* @__PURE__ */ React.createElement("div", { className: "px-4 pb-4 pt-0 border-t border-[var(--color-primary)]/15" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-3 pt-3" }, /* @__PURE__ */ React.createElement(fa.FaLock, { className: "w-3 h-3 text-[var(--color-text-main)]/30 shrink-0" }), /* @__PURE__ */ React.createElement(
|
|
747
|
-
"label",
|
|
748
|
-
{
|
|
749
|
-
htmlFor: `cvc-${card.token}`,
|
|
750
|
-
className: "text-xs text-[var(--color-text-main)]/50 shrink-0"
|
|
751
|
-
},
|
|
752
|
-
"C\xF3digo de seguridad"
|
|
753
|
-
), /* @__PURE__ */ React.createElement(
|
|
754
|
-
"input",
|
|
755
|
-
{
|
|
756
|
-
id: `cvc-${card.token}`,
|
|
757
|
-
type: "text",
|
|
758
|
-
inputMode: "numeric",
|
|
759
|
-
maxLength: maxCvc,
|
|
760
|
-
autoComplete: "cc-csc",
|
|
761
|
-
placeholder: maxCvc === 4 ? "\xB7\xB7\xB7\xB7" : "\xB7\xB7\xB7",
|
|
762
|
-
value: cvc,
|
|
763
|
-
onClick: (e) => e.stopPropagation(),
|
|
764
|
-
onChange: (e) => {
|
|
765
|
-
const val = e.target.value.replace(/\D/g, "");
|
|
766
|
-
setCvcValues((prev) => ({
|
|
767
|
-
...prev,
|
|
768
|
-
[card.token]: val
|
|
769
|
-
}));
|
|
770
|
-
onSelectCard(card, val);
|
|
771
|
-
},
|
|
772
|
-
autoFocus: true,
|
|
773
|
-
className: "w-16 text-center font-mono text-sm tracking-[0.25em] border border-[var(--color-border-default)] rounded-lg py-2 bg-[var(--color-background)] text-[var(--color-text-main)] placeholder:text-[var(--color-text-main)]/20 focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/50 focus:border-[var(--color-primary)] transition-all"
|
|
774
|
-
}
|
|
775
|
-
)))
|
|
776
|
-
);
|
|
777
|
-
})), reviewCards.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "space-y-3" }, reviewCards.map((card) => {
|
|
778
|
-
const isExpanded = verifyingToken === card.token;
|
|
779
|
-
return /* @__PURE__ */ React.createElement(
|
|
780
|
-
"div",
|
|
781
|
-
{
|
|
782
|
-
key: card.token,
|
|
783
|
-
className: "border border-[var(--color-warning)]/30 bg-[var(--color-warning)]/5 rounded-lg overflow-hidden transition-all duration-200"
|
|
784
|
-
},
|
|
785
|
-
/* @__PURE__ */ React.createElement("div", { className: "p-4 flex items-center justify-between gap-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 min-w-0 flex-1" }, /* @__PURE__ */ React.createElement(
|
|
786
|
-
CardVisual,
|
|
787
|
-
{
|
|
788
|
-
bin: card.bin,
|
|
789
|
-
brand: card.type,
|
|
790
|
-
last4: card.number,
|
|
791
|
-
holderName: card.holder_name,
|
|
792
|
-
expiryMonth: card.expiry_month,
|
|
793
|
-
expiryYear: card.expiry_year,
|
|
794
|
-
binDatabaseEndpoint
|
|
795
|
-
}
|
|
796
|
-
), /* @__PURE__ */ React.createElement("span", { className: "text-[10px] font-medium uppercase tracking-wider bg-[var(--color-warning)]/15 text-[var(--color-warning)] px-1.5 py-0.5 rounded shrink-0 inline-flex items-center gap-1" }, /* @__PURE__ */ React.createElement(fa.FaExclamationTriangle, { className: "w-2.5 h-2.5" }), "Verificar")), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 shrink-0" }, !isExpanded && /* @__PURE__ */ React.createElement(
|
|
797
|
-
"button",
|
|
745
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
|
|
746
|
+
validCards.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: validCards.map((card) => {
|
|
747
|
+
const isSelected = selectedToken === card.token;
|
|
748
|
+
const cvc = cvcValues[card.token] || "";
|
|
749
|
+
const maxCvc = card.type === "ax" ? 4 : 3;
|
|
750
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
751
|
+
"div",
|
|
798
752
|
{
|
|
799
753
|
onClick: () => {
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
className: "text-xs font-medium text-[var(--color-primary)] hover:text-[var(--color-primary-hover)] underline underline-offset-2 transition-colors cursor-pointer"
|
|
805
|
-
},
|
|
806
|
-
"Verificar"
|
|
807
|
-
), /* @__PURE__ */ React.createElement(
|
|
808
|
-
"button",
|
|
809
|
-
{
|
|
810
|
-
onClick: () => handleDelete(card.token),
|
|
811
|
-
disabled: deleting === card.token,
|
|
812
|
-
className: "text-[var(--color-text-main)]/30 hover:text-[var(--color-error)] p-1 disabled:opacity-50 transition-colors cursor-pointer",
|
|
813
|
-
title: "Eliminar tarjeta"
|
|
814
|
-
},
|
|
815
|
-
/* @__PURE__ */ React.createElement(fa.FaTrash, { className: "w-3 h-3" })
|
|
816
|
-
))),
|
|
817
|
-
isExpanded && /* @__PURE__ */ React.createElement("div", { className: "px-4 pb-4 border-t border-[var(--color-warning)]/20" }, /* @__PURE__ */ React.createElement("div", { className: "pt-3 space-y-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-start gap-2.5" }, /* @__PURE__ */ React.createElement(fa.FaShieldAlt, { className: "w-3.5 h-3.5 text-[var(--color-primary)] mt-0.5 shrink-0" }), /* @__PURE__ */ React.createElement("p", { className: "text-xs text-[var(--color-text-main)]/60 leading-relaxed" }, "Se realiz\xF3 un micro-cobro a tu tarjeta. Revisa tu estado de cuenta bancario e ingresa el monto exacto para verificarla.")), /* @__PURE__ */ React.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "relative flex-1" }, /* @__PURE__ */ React.createElement("span", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-[var(--color-text-main)]/40 text-sm" }, "$"), /* @__PURE__ */ React.createElement(
|
|
818
|
-
"input",
|
|
819
|
-
{
|
|
820
|
-
type: "text",
|
|
821
|
-
inputMode: "decimal",
|
|
822
|
-
value: verifyValue,
|
|
823
|
-
onChange: (e) => {
|
|
824
|
-
const val = e.target.value.replace(
|
|
825
|
-
/[^0-9.]/g,
|
|
826
|
-
""
|
|
827
|
-
);
|
|
828
|
-
setVerifyValue(val);
|
|
754
|
+
onSelectCard(card, cvc);
|
|
755
|
+
if (!isSelected) {
|
|
756
|
+
setCvcValues((prev) => ({ ...prev, [card.token]: "" }));
|
|
757
|
+
}
|
|
829
758
|
},
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
759
|
+
className: `border rounded-lg cursor-pointer transition-all duration-200 ${isSelected ? "border-[var(--color-primary)] bg-[var(--color-primary)]/5 ring-1 ring-[var(--color-primary)]" : "border-[var(--color-border-default)] hover:border-[var(--color-border-strong)]"}`,
|
|
760
|
+
children: [
|
|
761
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 flex items-center justify-between gap-3", children: [
|
|
762
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: [
|
|
763
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
764
|
+
CardVisual,
|
|
765
|
+
{
|
|
766
|
+
bin: card.bin,
|
|
767
|
+
brand: card.type,
|
|
768
|
+
last4: card.number,
|
|
769
|
+
holderName: card.holder_name,
|
|
770
|
+
expiryMonth: card.expiry_month,
|
|
771
|
+
expiryYear: card.expiry_year,
|
|
772
|
+
binDatabaseEndpoint
|
|
773
|
+
}
|
|
774
|
+
),
|
|
775
|
+
isSelected && /* @__PURE__ */ jsxRuntime.jsx(fa.FaCheck, { className: "w-3.5 h-3.5 text-[var(--color-primary)] shrink-0" })
|
|
776
|
+
] }),
|
|
777
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
778
|
+
"button",
|
|
779
|
+
{
|
|
780
|
+
onClick: (e) => {
|
|
781
|
+
e.stopPropagation();
|
|
782
|
+
handleDelete(card.token);
|
|
783
|
+
},
|
|
784
|
+
disabled: deleting === card.token,
|
|
785
|
+
className: "text-[var(--color-text-main)]/30 hover:text-[var(--color-error)] p-1 disabled:opacity-50 transition-colors cursor-pointer shrink-0",
|
|
786
|
+
title: "Eliminar tarjeta",
|
|
787
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(fa.FaTrash, { className: "w-3 h-3" })
|
|
788
|
+
}
|
|
789
|
+
)
|
|
790
|
+
] }),
|
|
791
|
+
isSelected && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 pb-4 pt-0 border-t border-[var(--color-primary)]/15", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 pt-3", children: [
|
|
792
|
+
/* @__PURE__ */ jsxRuntime.jsx(fa.FaLock, { className: "w-3 h-3 text-[var(--color-text-main)]/30 shrink-0" }),
|
|
793
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
794
|
+
"label",
|
|
795
|
+
{
|
|
796
|
+
htmlFor: `cvc-${card.token}`,
|
|
797
|
+
className: "text-xs text-[var(--color-text-main)]/50 shrink-0",
|
|
798
|
+
children: "C\xF3digo de seguridad"
|
|
799
|
+
}
|
|
800
|
+
),
|
|
801
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
802
|
+
"input",
|
|
803
|
+
{
|
|
804
|
+
id: `cvc-${card.token}`,
|
|
805
|
+
type: "text",
|
|
806
|
+
inputMode: "numeric",
|
|
807
|
+
maxLength: maxCvc,
|
|
808
|
+
autoComplete: "cc-csc",
|
|
809
|
+
placeholder: maxCvc === 4 ? "\xB7\xB7\xB7\xB7" : "\xB7\xB7\xB7",
|
|
810
|
+
value: cvc,
|
|
811
|
+
onClick: (e) => e.stopPropagation(),
|
|
812
|
+
onChange: (e) => {
|
|
813
|
+
const val = e.target.value.replace(/\D/g, "");
|
|
814
|
+
setCvcValues((prev) => ({
|
|
815
|
+
...prev,
|
|
816
|
+
[card.token]: val
|
|
817
|
+
}));
|
|
818
|
+
onSelectCard(card, val);
|
|
819
|
+
},
|
|
820
|
+
autoFocus: true,
|
|
821
|
+
className: "w-16 text-center font-mono text-sm tracking-[0.25em] border border-[var(--color-border-default)] rounded-lg py-2 bg-[var(--color-background)] text-[var(--color-text-main)] placeholder:text-[var(--color-text-main)]/20 focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/50 focus:border-[var(--color-primary)] transition-all"
|
|
822
|
+
}
|
|
823
|
+
)
|
|
824
|
+
] }) })
|
|
825
|
+
]
|
|
843
826
|
},
|
|
844
|
-
|
|
845
|
-
)
|
|
846
|
-
|
|
827
|
+
card.token
|
|
828
|
+
);
|
|
829
|
+
}) }),
|
|
830
|
+
reviewCards.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: reviewCards.map((card) => {
|
|
831
|
+
const isExpanded = verifyingToken === card.token;
|
|
832
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
833
|
+
"div",
|
|
847
834
|
{
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
835
|
+
className: "border border-[var(--color-warning)]/30 bg-[var(--color-warning)]/5 rounded-lg overflow-hidden transition-all duration-200",
|
|
836
|
+
children: [
|
|
837
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 flex items-center justify-between gap-3", children: [
|
|
838
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: [
|
|
839
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
840
|
+
CardVisual,
|
|
841
|
+
{
|
|
842
|
+
bin: card.bin,
|
|
843
|
+
brand: card.type,
|
|
844
|
+
last4: card.number,
|
|
845
|
+
holderName: card.holder_name,
|
|
846
|
+
expiryMonth: card.expiry_month,
|
|
847
|
+
expiryYear: card.expiry_year,
|
|
848
|
+
binDatabaseEndpoint
|
|
849
|
+
}
|
|
850
|
+
),
|
|
851
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] font-medium uppercase tracking-wider bg-[var(--color-warning)]/15 text-[var(--color-warning)] px-1.5 py-0.5 rounded shrink-0 inline-flex items-center gap-1", children: [
|
|
852
|
+
/* @__PURE__ */ jsxRuntime.jsx(fa.FaExclamationTriangle, { className: "w-2.5 h-2.5" }),
|
|
853
|
+
"Verificar"
|
|
854
|
+
] })
|
|
855
|
+
] }),
|
|
856
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
|
|
857
|
+
!isExpanded && /* @__PURE__ */ jsxRuntime.jsx(
|
|
858
|
+
"button",
|
|
859
|
+
{
|
|
860
|
+
onClick: () => {
|
|
861
|
+
setVerifyingToken(card.token);
|
|
862
|
+
setVerifyValue("");
|
|
863
|
+
setVerifyError(null);
|
|
864
|
+
},
|
|
865
|
+
className: "text-xs font-medium text-[var(--color-primary)] hover:text-[var(--color-primary-hover)] underline underline-offset-2 transition-colors cursor-pointer",
|
|
866
|
+
children: "Verificar"
|
|
867
|
+
}
|
|
868
|
+
),
|
|
869
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
870
|
+
"button",
|
|
871
|
+
{
|
|
872
|
+
onClick: () => handleDelete(card.token),
|
|
873
|
+
disabled: deleting === card.token,
|
|
874
|
+
className: "text-[var(--color-text-main)]/30 hover:text-[var(--color-error)] p-1 disabled:opacity-50 transition-colors cursor-pointer",
|
|
875
|
+
title: "Eliminar tarjeta",
|
|
876
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(fa.FaTrash, { className: "w-3 h-3" })
|
|
877
|
+
}
|
|
878
|
+
)
|
|
879
|
+
] })
|
|
880
|
+
] }),
|
|
881
|
+
isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 pb-4 border-t border-[var(--color-warning)]/20", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-3 space-y-3", children: [
|
|
882
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2.5", children: [
|
|
883
|
+
/* @__PURE__ */ jsxRuntime.jsx(fa.FaShieldAlt, { className: "w-3.5 h-3.5 text-[var(--color-primary)] mt-0.5 shrink-0" }),
|
|
884
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-[var(--color-text-main)]/60 leading-relaxed", children: "Se realiz\xF3 un micro-cobro a tu tarjeta. Revisa tu estado de cuenta bancario e ingresa el monto exacto para verificarla." })
|
|
885
|
+
] }),
|
|
886
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
|
|
887
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1", children: [
|
|
888
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-[var(--color-text-main)]/40 text-sm", children: "$" }),
|
|
889
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
890
|
+
"input",
|
|
891
|
+
{
|
|
892
|
+
type: "text",
|
|
893
|
+
inputMode: "decimal",
|
|
894
|
+
value: verifyValue,
|
|
895
|
+
onChange: (e) => {
|
|
896
|
+
const val = e.target.value.replace(
|
|
897
|
+
/[^0-9.]/g,
|
|
898
|
+
""
|
|
899
|
+
);
|
|
900
|
+
setVerifyValue(val);
|
|
901
|
+
},
|
|
902
|
+
placeholder: "0.00",
|
|
903
|
+
className: "w-full pl-7 pr-3 py-2.5 text-sm border border-[var(--color-border-default)] rounded-lg bg-[var(--color-background)] text-[var(--color-text-main)] placeholder:text-[var(--color-text-main)]/30 focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/50 focus:border-[var(--color-primary)] transition-all",
|
|
904
|
+
autoFocus: true,
|
|
905
|
+
onKeyDown: (e) => {
|
|
906
|
+
if (e.key === "Enter") handleVerify(card);
|
|
907
|
+
}
|
|
908
|
+
}
|
|
909
|
+
)
|
|
910
|
+
] }),
|
|
911
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
912
|
+
"button",
|
|
913
|
+
{
|
|
914
|
+
onClick: () => handleVerify(card),
|
|
915
|
+
disabled: verifySubmitting || !verifyValue.trim(),
|
|
916
|
+
className: "px-4 py-2.5 bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] text-white text-sm font-medium rounded-lg transition-colors disabled:bg-[var(--color-surface-elevated)] disabled:text-[var(--color-text-main)]/30 cursor-pointer",
|
|
917
|
+
children: verifySubmitting ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-4 h-4 rounded-full border-2 border-white border-b-transparent animate-spin" }) : "Verificar"
|
|
918
|
+
}
|
|
919
|
+
)
|
|
920
|
+
] }),
|
|
921
|
+
verifyError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-[var(--color-error)]", children: verifyError }),
|
|
922
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
923
|
+
"button",
|
|
924
|
+
{
|
|
925
|
+
onClick: () => {
|
|
926
|
+
setVerifyingToken(null);
|
|
927
|
+
setVerifyValue("");
|
|
928
|
+
setVerifyError(null);
|
|
929
|
+
},
|
|
930
|
+
className: "text-xs text-[var(--color-text-main)]/40 hover:text-[var(--color-text-main)]/60 transition-colors cursor-pointer",
|
|
931
|
+
children: "Cancelar"
|
|
932
|
+
}
|
|
933
|
+
)
|
|
934
|
+
] }) })
|
|
935
|
+
]
|
|
854
936
|
},
|
|
855
|
-
|
|
856
|
-
)
|
|
857
|
-
)
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
937
|
+
card.token
|
|
938
|
+
);
|
|
939
|
+
}) }),
|
|
940
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
941
|
+
"button",
|
|
942
|
+
{
|
|
943
|
+
onClick: onAddNewCard,
|
|
944
|
+
className: "w-full flex items-center justify-center gap-2 p-3 border-2 border-dashed border-[var(--color-border-default)] rounded-lg text-sm text-[var(--color-text-main)]/50 hover:border-[var(--color-primary)] hover:text-[var(--color-primary)] transition-colors cursor-pointer",
|
|
945
|
+
children: [
|
|
946
|
+
/* @__PURE__ */ jsxRuntime.jsx(fa.FaPlus, { className: "w-3 h-3" }),
|
|
947
|
+
cards.length > 0 ? "Usar otra tarjeta" : "Agregar tarjeta"
|
|
948
|
+
]
|
|
949
|
+
}
|
|
950
|
+
)
|
|
951
|
+
] });
|
|
867
952
|
}
|
|
868
953
|
var SDK_URL = "https://cdn.paymentez.com/ccapi/sdk/payment_sdk_stable.min.js";
|
|
869
954
|
var CONTAINER_ID = "nuvei-tokenize-container";
|
|
@@ -1106,121 +1191,164 @@ function NuveiPaymentForm({
|
|
|
1106
1191
|
exclusiveCardTypes,
|
|
1107
1192
|
iconColor
|
|
1108
1193
|
]);
|
|
1109
|
-
return /* @__PURE__ */
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
src: SDK_URL,
|
|
1113
|
-
strategy: "afterInteractive",
|
|
1114
|
-
onReady: handleScriptReady
|
|
1115
|
-
}
|
|
1116
|
-
), error && error.variant !== "incomplete" ? /* @__PURE__ */ React.createElement(
|
|
1117
|
-
"div",
|
|
1118
|
-
{
|
|
1119
|
-
className: `rounded-xl border p-5 text-sm ${error.variant === "duplicate" ? "bg-[var(--color-primary)]/5 border-[var(--color-primary)]/20" : "bg-[var(--color-error)]/5 border-[var(--color-error)]/20"}`
|
|
1120
|
-
},
|
|
1121
|
-
/* @__PURE__ */ React.createElement("div", { className: "flex gap-3" }, /* @__PURE__ */ React.createElement("div", { className: "shrink-0 mt-0.5" }, error.variant === "duplicate" ? /* @__PURE__ */ React.createElement(fa.FaInfoCircle, { className: "w-4 h-4 text-[var(--color-primary)]" }) : /* @__PURE__ */ React.createElement(fa.FaTimesCircle, { className: "w-4 h-4 text-[var(--color-error)]" })), /* @__PURE__ */ React.createElement("div", { className: "grow space-y-1" }, /* @__PURE__ */ React.createElement("p", { className: "font-semibold text-[var(--color-text-main)]" }, error.title), /* @__PURE__ */ React.createElement("p", { className: "text-[var(--color-text-main)]/60 leading-relaxed" }, error.message))),
|
|
1122
|
-
/* @__PURE__ */ React.createElement("div", { className: "flex gap-3 mt-4 pt-3 border-t border-[var(--color-border-subtle)]" }, error.variant === "duplicate" && error.duplicateToken ? /* @__PURE__ */ React.createElement(
|
|
1123
|
-
"button",
|
|
1194
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
|
|
1195
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1196
|
+
Script__default.default,
|
|
1124
1197
|
{
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
})
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1198
|
+
src: SDK_URL,
|
|
1199
|
+
strategy: "afterInteractive",
|
|
1200
|
+
onReady: handleScriptReady
|
|
1201
|
+
}
|
|
1202
|
+
),
|
|
1203
|
+
error && error.variant !== "incomplete" ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1204
|
+
"div",
|
|
1205
|
+
{
|
|
1206
|
+
className: `rounded-xl border p-5 text-sm ${error.variant === "duplicate" ? "bg-[var(--color-primary)]/5 border-[var(--color-primary)]/20" : "bg-[var(--color-error)]/5 border-[var(--color-error)]/20"}`,
|
|
1207
|
+
children: [
|
|
1208
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3", children: [
|
|
1209
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 mt-0.5", children: error.variant === "duplicate" ? /* @__PURE__ */ jsxRuntime.jsx(fa.FaInfoCircle, { className: "w-4 h-4 text-[var(--color-primary)]" }) : /* @__PURE__ */ jsxRuntime.jsx(fa.FaTimesCircle, { className: "w-4 h-4 text-[var(--color-error)]" }) }),
|
|
1210
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grow space-y-1", children: [
|
|
1211
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold text-[var(--color-text-main)]", children: error.title }),
|
|
1212
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[var(--color-text-main)]/60 leading-relaxed", children: error.message })
|
|
1213
|
+
] })
|
|
1214
|
+
] }),
|
|
1215
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-3 mt-4 pt-3 border-t border-[var(--color-border-subtle)]", children: error.variant === "duplicate" && error.duplicateToken ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1216
|
+
"button",
|
|
1217
|
+
{
|
|
1218
|
+
type: "button",
|
|
1219
|
+
disabled: isDeletingDuplicate,
|
|
1220
|
+
onClick: async () => {
|
|
1221
|
+
setIsDeletingDuplicate(true);
|
|
1222
|
+
try {
|
|
1223
|
+
const res = await fetch("/api/nuvei/cards", {
|
|
1224
|
+
method: "DELETE",
|
|
1225
|
+
headers: { "Content-Type": "application/json" },
|
|
1226
|
+
body: JSON.stringify({
|
|
1227
|
+
token: error.duplicateToken
|
|
1228
|
+
})
|
|
1229
|
+
});
|
|
1230
|
+
const data = await res.json().catch(() => ({}));
|
|
1231
|
+
if (process.env.NODE_ENV !== "production") {
|
|
1232
|
+
console.log(
|
|
1233
|
+
"[NuveiPaymentForm] Delete response:",
|
|
1234
|
+
res.status,
|
|
1235
|
+
JSON.stringify(data)
|
|
1236
|
+
);
|
|
1237
|
+
}
|
|
1238
|
+
if (res.ok && !data.error) {
|
|
1239
|
+
setError(null);
|
|
1240
|
+
sdkInitRef.current = false;
|
|
1241
|
+
setSdkReady(false);
|
|
1242
|
+
setTimeout(() => handleScriptReady(), 100);
|
|
1243
|
+
} else {
|
|
1244
|
+
setError({
|
|
1245
|
+
variant: "rejected",
|
|
1246
|
+
title: "No se pudo eliminar",
|
|
1247
|
+
message: "El procesador de pagos no permiti\xF3 eliminar esta tarjeta. Intenta con otra tarjeta o contacta a tu banco."
|
|
1248
|
+
});
|
|
1249
|
+
}
|
|
1250
|
+
} catch {
|
|
1251
|
+
setError({
|
|
1252
|
+
variant: "system",
|
|
1253
|
+
title: "Error de conexi\xF3n",
|
|
1254
|
+
message: "No se pudo conectar al servidor. Intenta de nuevo."
|
|
1255
|
+
});
|
|
1256
|
+
} finally {
|
|
1257
|
+
setIsDeletingDuplicate(false);
|
|
1258
|
+
}
|
|
1259
|
+
},
|
|
1260
|
+
className: "flex-1 bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] text-white font-semibold py-2.5 px-4 rounded-lg transition-colors text-sm cursor-pointer inline-flex items-center justify-center gap-2 disabled:opacity-50",
|
|
1261
|
+
children: isDeletingDuplicate ? "Eliminando..." : "Eliminar y reintentar"
|
|
1144
1262
|
}
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1263
|
+
) : /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1264
|
+
"button",
|
|
1265
|
+
{
|
|
1266
|
+
type: "button",
|
|
1267
|
+
onClick: () => {
|
|
1268
|
+
setError(null);
|
|
1269
|
+
const container = document.getElementById(CONTAINER_ID);
|
|
1270
|
+
if (container) container.innerHTML = "";
|
|
1271
|
+
sdkInitRef.current = false;
|
|
1272
|
+
setSdkReady(false);
|
|
1273
|
+
setTimeout(() => handleScriptReady(), 100);
|
|
1274
|
+
},
|
|
1275
|
+
className: "flex-1 bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] text-white font-semibold py-2.5 px-4 rounded-lg transition-colors text-sm cursor-pointer inline-flex items-center justify-center gap-2",
|
|
1276
|
+
children: [
|
|
1277
|
+
/* @__PURE__ */ jsxRuntime.jsx(fa.FaRedo, { className: "w-3 h-3" }),
|
|
1278
|
+
"Intentar con otra tarjeta"
|
|
1279
|
+
]
|
|
1156
1280
|
}
|
|
1157
|
-
}
|
|
1158
|
-
|
|
1159
|
-
variant: "system",
|
|
1160
|
-
title: "Error de conexi\xF3n",
|
|
1161
|
-
message: "No se pudo conectar al servidor. Intenta de nuevo."
|
|
1162
|
-
});
|
|
1163
|
-
} finally {
|
|
1164
|
-
setIsDeletingDuplicate(false);
|
|
1165
|
-
}
|
|
1166
|
-
},
|
|
1167
|
-
className: "flex-1 bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] text-white font-semibold py-2.5 px-4 rounded-lg transition-colors text-sm cursor-pointer inline-flex items-center justify-center gap-2 disabled:opacity-50"
|
|
1168
|
-
},
|
|
1169
|
-
isDeletingDuplicate ? "Eliminando..." : "Eliminar y reintentar"
|
|
1170
|
-
) : /* @__PURE__ */ React.createElement(
|
|
1171
|
-
"button",
|
|
1172
|
-
{
|
|
1173
|
-
type: "button",
|
|
1174
|
-
onClick: () => {
|
|
1175
|
-
setError(null);
|
|
1176
|
-
const container = document.getElementById(CONTAINER_ID);
|
|
1177
|
-
if (container) container.innerHTML = "";
|
|
1178
|
-
sdkInitRef.current = false;
|
|
1179
|
-
setSdkReady(false);
|
|
1180
|
-
setTimeout(() => handleScriptReady(), 100);
|
|
1181
|
-
},
|
|
1182
|
-
className: "flex-1 bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] text-white font-semibold py-2.5 px-4 rounded-lg transition-colors text-sm cursor-pointer inline-flex items-center justify-center gap-2"
|
|
1183
|
-
},
|
|
1184
|
-
/* @__PURE__ */ React.createElement(fa.FaRedo, { className: "w-3 h-3" }),
|
|
1185
|
-
"Intentar con otra tarjeta"
|
|
1186
|
-
))
|
|
1187
|
-
) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { id: CONTAINER_ID, className: "min-h-16" }), error && /* @__PURE__ */ React.createElement(
|
|
1188
|
-
"div",
|
|
1189
|
-
{
|
|
1190
|
-
className: `rounded-xl border p-4 text-sm ${error.variant === "incomplete" ? "bg-[var(--color-warning)]/5 border-[var(--color-warning)]/20" : "bg-[var(--color-surface-elevated)] border-[var(--color-border-subtle)]"}`
|
|
1191
|
-
},
|
|
1192
|
-
/* @__PURE__ */ React.createElement("div", { className: "flex gap-3" }, /* @__PURE__ */ React.createElement(
|
|
1193
|
-
fa.FaExclamationTriangle,
|
|
1194
|
-
{
|
|
1195
|
-
className: `w-4 h-4 shrink-0 mt-0.5 ${error.variant === "incomplete" ? "text-[var(--color-warning)]" : "text-[var(--color-text-main)]/40"}`
|
|
1281
|
+
) })
|
|
1282
|
+
]
|
|
1196
1283
|
}
|
|
1197
|
-
)
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
|
|
1213
|
-
|
|
1214
|
-
|
|
1215
|
-
|
|
1216
|
-
|
|
1217
|
-
|
|
1218
|
-
|
|
1219
|
-
|
|
1220
|
-
|
|
1221
|
-
|
|
1222
|
-
|
|
1223
|
-
|
|
1284
|
+
) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1285
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { id: CONTAINER_ID, className: "min-h-16" }),
|
|
1286
|
+
error && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1287
|
+
"div",
|
|
1288
|
+
{
|
|
1289
|
+
className: `rounded-xl border p-4 text-sm ${error.variant === "incomplete" ? "bg-[var(--color-warning)]/5 border-[var(--color-warning)]/20" : "bg-[var(--color-surface-elevated)] border-[var(--color-border-subtle)]"}`,
|
|
1290
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3", children: [
|
|
1291
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1292
|
+
fa.FaExclamationTriangle,
|
|
1293
|
+
{
|
|
1294
|
+
className: `w-4 h-4 shrink-0 mt-0.5 ${error.variant === "incomplete" ? "text-[var(--color-warning)]" : "text-[var(--color-text-main)]/40"}`
|
|
1295
|
+
}
|
|
1296
|
+
),
|
|
1297
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grow", children: [
|
|
1298
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold text-[var(--color-text-main)]", children: error.title }),
|
|
1299
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[var(--color-text-main)]/60 leading-relaxed", children: error.message })
|
|
1300
|
+
] })
|
|
1301
|
+
] })
|
|
1302
|
+
}
|
|
1303
|
+
),
|
|
1304
|
+
sdkReady && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1305
|
+
showSaveCardCheckbox && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2.5 cursor-pointer select-none", children: [
|
|
1306
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1307
|
+
"input",
|
|
1308
|
+
{
|
|
1309
|
+
type: "checkbox",
|
|
1310
|
+
checked: saveCard,
|
|
1311
|
+
onChange: (e) => setSaveCard(e.target.checked),
|
|
1312
|
+
className: "w-4 h-4 rounded border-[var(--color-border-default)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]/30 cursor-pointer accent-[var(--color-primary)]"
|
|
1313
|
+
}
|
|
1314
|
+
),
|
|
1315
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-[var(--color-text-main)]/60", children: "Guardar tarjeta para futuras compras" })
|
|
1316
|
+
] }),
|
|
1317
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1318
|
+
"button",
|
|
1319
|
+
{
|
|
1320
|
+
type: "button",
|
|
1321
|
+
onClick: handlePay,
|
|
1322
|
+
disabled: isProcessing || disabled,
|
|
1323
|
+
className: "w-full bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] text-white font-semibold py-3 px-4 rounded-lg transition-all duration-200 disabled:bg-[var(--color-surface-elevated)] disabled:text-[var(--color-text-main)]/30 disabled:cursor-not-allowed flex items-center justify-center gap-2 active:scale-[0.97] cursor-pointer",
|
|
1324
|
+
children: isProcessing ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1325
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-5 h-5 rounded-full border-2 border-white border-b-transparent animate-spin" }),
|
|
1326
|
+
processingLabel
|
|
1327
|
+
] }) : buttonLabel ?? (saveCard ? "Agregar Tarjeta" : "Continuar con pago")
|
|
1328
|
+
}
|
|
1329
|
+
)
|
|
1330
|
+
] })
|
|
1331
|
+
] }),
|
|
1332
|
+
!sdkReady && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center py-4 gap-3", children: [
|
|
1333
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-12 h-12 rounded-full border-2 border-[var(--color-text-main)]/20 border-t-[var(--color-primary)] animate-spin" }),
|
|
1334
|
+
sdkTimedOut && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center space-y-2", children: [
|
|
1335
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-[var(--color-text-main)]/50", children: "El sistema de pagos est\xE1 tardando en cargar." }),
|
|
1336
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1337
|
+
"button",
|
|
1338
|
+
{
|
|
1339
|
+
type: "button",
|
|
1340
|
+
onClick: () => window.location.reload(),
|
|
1341
|
+
className: "text-xs font-semibold text-[var(--color-primary)] hover:text-[var(--color-primary-hover)] underline underline-offset-2 transition-colors",
|
|
1342
|
+
children: "Recargar p\xE1gina"
|
|
1343
|
+
}
|
|
1344
|
+
)
|
|
1345
|
+
] })
|
|
1346
|
+
] }),
|
|
1347
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 text-[var(--color-text-main)]/30 text-xs", children: [
|
|
1348
|
+
/* @__PURE__ */ jsxRuntime.jsx(fa.FaLock, { className: "w-3 h-3" }),
|
|
1349
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Pago 100% seguro \xB7 Tokenizaci\xF3n PCI Compliant" })
|
|
1350
|
+
] })
|
|
1351
|
+
] });
|
|
1224
1352
|
}
|
|
1225
1353
|
|
|
1226
1354
|
exports.CARD_BRAND_NAMES = CARD_BRAND_NAMES;
|