@doujins/payments-ui 0.1.6 → 0.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/index.cjs +75 -187
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +37 -65
  4. package/dist/index.d.ts +37 -65
  5. package/dist/index.js +75 -186
  6. package/dist/index.js.map +1 -1
  7. package/package.json +3 -4
  8. package/dist/styles.css +0 -2
package/dist/index.cjs CHANGED
@@ -13,7 +13,7 @@ var walletAdapterTrust = require('@solana/wallet-adapter-trust');
13
13
  var walletAdapterCoinbase = require('@solana/wallet-adapter-coinbase');
14
14
  var DialogPrimitive = require('@radix-ui/react-dialog');
15
15
  var lucideReact = require('lucide-react');
16
- var clsx = require('clsx');
16
+ var clsx2 = require('clsx');
17
17
  var tailwindMerge = require('tailwind-merge');
18
18
  var jsxRuntime = require('react/jsx-runtime');
19
19
  var countryList = require('country-list');
@@ -50,6 +50,7 @@ function _interopNamespace(e) {
50
50
 
51
51
  var React17__namespace = /*#__PURE__*/_interopNamespace(React17);
52
52
  var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
53
+ var clsx2__default = /*#__PURE__*/_interopDefault(clsx2);
53
54
  var countryList__default = /*#__PURE__*/_interopDefault(countryList);
54
55
  var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
55
56
  var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
@@ -292,7 +293,7 @@ var createClient = (config) => {
292
293
  };
293
294
  };
294
295
  function cn(...inputs) {
295
- return tailwindMerge.twMerge(clsx.clsx(inputs));
296
+ return tailwindMerge.twMerge(clsx2.clsx(inputs));
296
297
  }
297
298
  var Dialog = DialogPrimitive__namespace.Root;
298
299
  var DialogPortal = DialogPrimitive__namespace.Portal;
@@ -715,7 +716,7 @@ var CardDetailsForm = ({
715
716
  window.CollectJS.startPaymentRequest();
716
717
  };
717
718
  const errorMessage = localError ?? externalError;
718
- const collectFieldClass = "flex h-11 w-full items-center rounded-md border border-white/10 bg-white/5 px-3 text-sm text-white";
719
+ const collectFieldClass = "flex h-11 w-full items-center rounded-md border bg-white/5 px-3 text-sm text-white";
719
720
  return /* @__PURE__ */ jsxRuntime.jsxs(
720
721
  "form",
721
722
  {
@@ -724,12 +725,9 @@ var CardDetailsForm = ({
724
725
  noValidate: true,
725
726
  children: [
726
727
  errorMessage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border border-red-500/40 bg-red-500/10 px-4 py-2 text-sm text-red-400", children: errorMessage }),
727
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-5 md:grid-cols-2", children: [
728
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
729
- /* @__PURE__ */ jsxRuntime.jsxs(Label, { htmlFor: "payments-first", className: "flex items-center gap-2 text-white/70", children: [
730
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "h-4 w-4" }),
731
- " First name"
732
- ] }),
728
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 md:flex-row", children: [
729
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-2", children: [
730
+ /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "payments-first", children: "First name" }),
733
731
  /* @__PURE__ */ jsxRuntime.jsx(
734
732
  Input,
735
733
  {
@@ -740,11 +738,8 @@ var CardDetailsForm = ({
740
738
  }
741
739
  )
742
740
  ] }),
743
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
744
- /* @__PURE__ */ jsxRuntime.jsxs(Label, { htmlFor: "payments-last", className: "flex items-center gap-2 text-white/70", children: [
745
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "h-4 w-4" }),
746
- " Last name"
747
- ] }),
741
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-2", children: [
742
+ /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "payments-last", children: "Last name" }),
748
743
  /* @__PURE__ */ jsxRuntime.jsx(
749
744
  Input,
750
745
  {
@@ -808,10 +803,7 @@ var CardDetailsForm = ({
808
803
  ] }),
809
804
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-5 md:grid-cols-2", children: [
810
805
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
811
- /* @__PURE__ */ jsxRuntime.jsxs(Label, { htmlFor: "payments-postal", className: "flex items-center gap-2 text-white/70", children: [
812
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MapPin, { className: "h-4 w-4" }),
813
- " Postal code"
814
- ] }),
806
+ /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "payments-postal", children: "Postal code" }),
815
807
  /* @__PURE__ */ jsxRuntime.jsx(
816
808
  Input,
817
809
  {
@@ -853,17 +845,10 @@ var CardDetailsForm = ({
853
845
  children: submitting || isTokenizing ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
854
846
  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
855
847
  " Processing\u2026"
856
- ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
857
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CreditCard, { className: "mr-2 h-4 w-4" }),
858
- " ",
859
- submitLabel
860
- ] })
848
+ ] }) : submitLabel
861
849
  }
862
850
  ),
863
- /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex items-center gap-2 text-xs text-white/50", children: [
864
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CreditCard, { className: "h-4 w-4" }),
865
- " Your payment information is encrypted and processed securely."
866
- ] })
851
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-white/60", children: "Your payment information is encrypted and processed securely." })
867
852
  ]
868
853
  }
869
854
  );
@@ -977,93 +962,44 @@ var formatCardLabel = (method) => {
977
962
  var StoredPaymentMethods = ({
978
963
  selectedMethodId,
979
964
  onMethodSelect,
980
- showAddButton = true,
981
- heading = "Payment Methods",
982
- description = "Manage your saved cards"
965
+ showAddButton = true
983
966
  }) => {
984
- const { listQuery, createMutation, deleteMutation } = usePaymentMethods();
985
967
  const [isModalOpen, setIsModalOpen] = React17.useState(false);
986
968
  const [deletingId, setDeletingId] = React17.useState(null);
969
+ const { listQuery, createMutation, deleteMutation } = usePaymentMethods();
987
970
  const payments = React17.useMemo(() => listQuery.data?.data ?? [], [listQuery.data]);
988
971
  const handleCardTokenize = (token, billing) => {
989
972
  createMutation.mutate({ token, billing });
990
973
  };
991
- const handleDelete = (method) => {
992
- setDeletingId(method.id);
993
- deleteMutation.mutate(
994
- { id: method.id },
995
- {
996
- onSettled: () => setDeletingId(null)
997
- }
998
- );
999
- };
1000
974
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
1001
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
1002
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
1003
- /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex items-center gap-2 text-sm font-medium text-muted-foreground", children: [
1004
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.WalletCards, { className: "h-4 w-4" }),
1005
- " ",
1006
- heading
1007
- ] }),
1008
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: description })
1009
- ] }),
1010
- showAddButton && /* @__PURE__ */ jsxRuntime.jsxs(Button, { size: "sm", variant: "outline", onClick: () => setIsModalOpen(true), children: [
1011
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CreditCard, { className: "mr-2 h-4 w-4" }),
1012
- " Add card"
1013
- ] })
1014
- ] }),
1015
- listQuery.isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center rounded-lg border border-dashed border-border/60 bg-muted/10 py-8 text-sm text-muted-foreground", children: [
975
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start justify-between gap-4", children: showAddButton && /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", variant: "ghost", onClick: () => setIsModalOpen(true), children: "Add card" }) }),
976
+ listQuery.isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center py-4 text-sm text-muted-foreground", children: [
1016
977
  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
1017
- " Loading cards\u2026"
1018
- ] }) : payments.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-dashed border-border/60 bg-muted/10 px-4 py-6 text-sm text-muted-foreground", children: "No saved payment methods yet." }) : /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "max-h-[320px] pr-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: payments.map((method) => {
978
+ " Loading cards..."
979
+ ] }) : payments.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center text-sm text-muted-foreground", children: "No saved payment methods yet." }) : /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "max-h-[320px] pr-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: payments.map((method) => {
1019
980
  const isSelected = selectedMethodId === method.id;
1020
981
  return /* @__PURE__ */ jsxRuntime.jsxs(
1021
982
  "div",
1022
983
  {
1023
984
  className: cn(
1024
- "flex flex-col gap-3 rounded-lg border px-4 py-3 transition-colors md:flex-row md:items-center md:justify-between",
1025
- isSelected ? "border-primary/60 bg-primary/5" : "border-border/60 bg-background"
985
+ "flex border border-border rounded-md px-4 py-3 flex-row items-center justify-between",
986
+ {
987
+ "bg-primary/5": isSelected
988
+ }
1026
989
  ),
1027
990
  children: [
1028
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
1029
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-foreground", children: formatCardLabel(method) }),
1030
- /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground", children: [
1031
- "Added on",
1032
- " ",
1033
- method.created_at ? new Date(method.created_at).toLocaleDateString() : "unknown"
1034
- ] })
1035
- ] }),
991
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-foreground", children: formatCardLabel(method) }),
1036
992
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
1037
- /* @__PURE__ */ jsxRuntime.jsx(
1038
- Badge,
1039
- {
1040
- variant: method.is_active ? "default" : "secondary",
1041
- className: cn(
1042
- method.is_active ? "bg-primary/20 text-primary" : "bg-muted text-muted-foreground"
1043
- ),
1044
- children: method.is_active ? "Active" : "Inactive"
1045
- }
1046
- ),
1047
993
  method.failure_reason && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "destructive", children: method.failure_reason }),
1048
994
  onMethodSelect && /* @__PURE__ */ jsxRuntime.jsx(
1049
995
  Button,
1050
996
  {
1051
997
  size: "sm",
1052
- variant: isSelected ? "default" : "outline",
998
+ variant: "ghost",
1053
999
  onClick: () => onMethodSelect(method),
1000
+ className: clsx2__default.default("px-3", { "bg-muted/90": !isSelected, "bg-background": isSelected }),
1054
1001
  children: isSelected ? "Selected" : "Use card"
1055
1002
  }
1056
- ),
1057
- /* @__PURE__ */ jsxRuntime.jsx(
1058
- Button,
1059
- {
1060
- size: "icon",
1061
- variant: "outline",
1062
- className: "text-destructive",
1063
- onClick: () => handleDelete(method),
1064
- disabled: deletingId === method.id && deleteMutation.isPending,
1065
- children: deletingId === method.id && deleteMutation.isPending ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-4 w-4" })
1066
- }
1067
1003
  )
1068
1004
  ] })
1069
1005
  ]
@@ -1428,9 +1364,9 @@ var QRCodePayment = ({
1428
1364
  onSuccess: handleQrSuccess
1429
1365
  });
1430
1366
  if (!selectedToken) {
1431
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border border-dashed border-border/60 bg-muted/10 px-4 py-6 text-center text-sm text-muted-foreground", children: "Select a token to continue." });
1367
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border border-dashed bg-muted/10 px-4 py-6 text-center text-sm text-muted-foreground", children: "Select a token to continue." });
1432
1368
  }
1433
- return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "space-y-4 border border-border/60 bg-background/80 p-6 shadow-none rounded-md", children: [
1369
+ return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "space-y-4 border bg-background/80 p-6 shadow-none rounded-md", children: [
1434
1370
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
1435
1371
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
1436
1372
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-foreground", children: "Scan with Solana Pay" }),
@@ -1449,7 +1385,7 @@ var QRCodePayment = ({
1449
1385
  )
1450
1386
  ] }),
1451
1387
  error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border border-destructive/40 bg-destructive/10 px-4 py-2 text-sm text-destructive", children: error }),
1452
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center rounded-2xl border border-dashed border-border/70 bg-muted/5 p-6", children: qrDataUri ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: qrDataUri, alt: "Solana Pay QR", className: "h-72 w-72 rounded-lg border border-border/40 bg-card" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center gap-2 text-sm text-muted-foreground", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1388
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center rounded-2xl border border-dashed bg-muted/5 p-6", children: qrDataUri ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: qrDataUri, alt: "Solana Pay QR", className: "h-72 w-72 rounded-lg border bg-card" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center gap-2 text-sm text-muted-foreground", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1453
1389
  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-5 w-5 animate-spin" }),
1454
1390
  " Generating QR code\u2026"
1455
1391
  ] }) : "QR code unavailable" }) }),
@@ -1801,7 +1737,7 @@ var SolanaPaymentView = ({
1801
1737
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
1802
1738
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-foreground", children: "Select token" }),
1803
1739
  /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: selectedToken?.symbol ?? "", onValueChange: handleTokenChange, children: [
1804
- /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Select token" }) }),
1740
+ /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "border bg-transparent", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Select token" }) }),
1805
1741
  /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { className: "max-h-64", children: tokens.map((token) => /* @__PURE__ */ jsxRuntime.jsxs(SelectItem, { value: token.symbol, children: [
1806
1742
  token.name,
1807
1743
  " (",
@@ -1828,7 +1764,7 @@ var SolanaPaymentView = ({
1828
1764
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-2xl font-semibold text-foreground", children: "Pay with Solana" }),
1829
1765
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Choose a supported token and send the payment via Solana Pay QR code." })
1830
1766
  ] }),
1831
- onClose && /* @__PURE__ */ jsxRuntime.jsxs(
1767
+ onClose && /* @__PURE__ */ jsxRuntime.jsx(
1832
1768
  Button,
1833
1769
  {
1834
1770
  type: "button",
@@ -1836,11 +1772,8 @@ var SolanaPaymentView = ({
1836
1772
  variant: "ghost",
1837
1773
  onClick: handleClose,
1838
1774
  disabled: paymentState === "processing" || paymentState === "confirming",
1839
- className: "h-8 px-2 text-sm",
1840
- children: [
1841
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "mr-2 h-4 w-4" }),
1842
- " Back"
1843
- ]
1775
+ className: "h-8 px-3 text-sm",
1776
+ children: "Back"
1844
1777
  }
1845
1778
  )
1846
1779
  ] }),
@@ -1871,7 +1804,7 @@ var PaymentExperience = ({
1871
1804
  const [savedError, setSavedError] = React17.useState(null);
1872
1805
  const [newCardStatus, setNewCardStatus] = React17.useState("idle");
1873
1806
  const [newCardError, setNewCardError] = React17.useState(null);
1874
- const { notifyStatus, notifySuccess, notifyError } = usePaymentNotifications();
1807
+ const { notifyStatus, notifyError } = usePaymentNotifications();
1875
1808
  React17.useEffect(() => {
1876
1809
  setActiveTab(showStored ? "saved" : "new");
1877
1810
  }, [showStored]);
@@ -1931,7 +1864,7 @@ var PaymentExperience = ({
1931
1864
  },
1932
1865
  [notifyError, notifyStatus, onNewCardPayment]
1933
1866
  );
1934
- const showSolanaView = React17.useCallback(() => {
1867
+ React17.useCallback(() => {
1935
1868
  if (!enableSolanaPay) return;
1936
1869
  setMode("solana");
1937
1870
  }, [enableSolanaPay]);
@@ -1959,11 +1892,9 @@ var PaymentExperience = ({
1959
1892
  /* @__PURE__ */ jsxRuntime.jsx(
1960
1893
  StoredPaymentMethods,
1961
1894
  {
1962
- heading: "Saved cards",
1895
+ showAddButton: false,
1963
1896
  selectedMethodId,
1964
- onMethodSelect: handleMethodSelect,
1965
- description: "Select one of your stored payment methods.",
1966
- showAddButton: false
1897
+ onMethodSelect: handleMethodSelect
1967
1898
  }
1968
1899
  ),
1969
1900
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -1972,7 +1903,7 @@ var PaymentExperience = ({
1972
1903
  className: "w-full",
1973
1904
  disabled: !selectedMethodId || savedStatus === "processing",
1974
1905
  onClick: handleSavedPayment,
1975
- children: savedStatus === "processing" ? "Processing\u2026" : "Pay with selected card"
1906
+ children: savedStatus === "processing" ? "Processing..." : "Pay with selected card"
1976
1907
  }
1977
1908
  ),
1978
1909
  savedError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", children: savedError })
@@ -1993,28 +1924,21 @@ var PaymentExperience = ({
1993
1924
  }
1994
1925
  );
1995
1926
  };
1996
- const renderCardExperience = () => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1997
- /* @__PURE__ */ jsxRuntime.jsxs(
1998
- Tabs,
1999
- {
2000
- value: activeTab,
2001
- onValueChange: (value) => setActiveTab(value),
2002
- className: "space-y-3",
2003
- children: [
2004
- /* @__PURE__ */ jsxRuntime.jsxs(TabsList, { className: "grid w-full grid-cols-2 border border-border/60", children: [
2005
- /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: "saved", disabled: !showStored, children: "Use saved card" }),
2006
- /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: "new", disabled: !showNewCard, children: "Add new card" })
2007
- ] }),
2008
- /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "saved", className: "space-y-4", children: renderSavedTab() }),
2009
- /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "new", className: "space-y-4", children: renderNewTab() })
2010
- ]
2011
- }
2012
- ),
2013
- enableSolanaPay && /* @__PURE__ */ jsxRuntime.jsxs(Button, { className: "w-full", variant: "secondary", onClick: showSolanaView, children: [
2014
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "mr-2 h-4 w-4" }),
2015
- " Pay with Solana"
2016
- ] })
2017
- ] });
1927
+ const renderCardExperience = () => /* @__PURE__ */ jsxRuntime.jsxs(
1928
+ Tabs,
1929
+ {
1930
+ value: activeTab,
1931
+ onValueChange: (value) => setActiveTab(value),
1932
+ children: [
1933
+ /* @__PURE__ */ jsxRuntime.jsxs(TabsList, { className: "grid w-full grid-cols-2", children: [
1934
+ /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: "saved", disabled: !showStored, children: "Use saved card" }),
1935
+ /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: "new", disabled: !showNewCard, children: "Add new card" })
1936
+ ] }),
1937
+ /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "saved", children: renderSavedTab() }),
1938
+ /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "new", children: renderNewTab() })
1939
+ ]
1940
+ }
1941
+ );
2018
1942
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6 pt-4", children: [
2019
1943
  mode === "cards" && renderCardExperience(),
2020
1944
  mode === "solana" && enableSolanaPay && /* @__PURE__ */ jsxRuntime.jsx(
@@ -2038,7 +1962,7 @@ var SubscriptionSuccessDialog = ({
2038
1962
  }) => {
2039
1963
  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange: (value) => {
2040
1964
  if (!value) onClose();
2041
- }, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "w-full max-w-md overflow-hidden border border-border/70 bg-background/95 p-0 shadow-2xl", children: [
1965
+ }, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "w-full max-w-md overflow-hidden border bg-background/95 p-0 shadow-2xl", children: [
2042
1966
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-gradient-to-b from-primary/25 via-primary/10 to-background px-6 py-8 text-center", children: [
2043
1967
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-background/60", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle, { className: "h-10 w-10 text-primary" }) }),
2044
1968
  /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
@@ -2194,11 +2118,11 @@ var SubscriptionCheckoutModal = ({
2194
2118
  };
2195
2119
  const handleNewCardPayment = async ({ token, billing }) => {
2196
2120
  const response = await subscribeWithCard({
2197
- priceId: ensurePrice(),
2121
+ billing,
2198
2122
  provider,
2123
+ idempotencyKey,
2199
2124
  paymentToken: token,
2200
- billing,
2201
- idempotencyKey
2125
+ priceId: ensurePrice()
2202
2126
  });
2203
2127
  assertCheckoutSuccess(response.status, response.message);
2204
2128
  notifySuccess();
@@ -2226,9 +2150,9 @@ var SubscriptionCheckoutModal = ({
2226
2150
  /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsxRuntime.jsx(
2227
2151
  DialogContent,
2228
2152
  {
2229
- className: "max-w-3xl max-h-[90vh] overflow-y-auto p-0 [&::-webkit-scrollbar]:hidden",
2153
+ className: "max-w-3xl max-h-[90vh] overflow-y-auto [&::-webkit-scrollbar]:hidden",
2230
2154
  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6 space-y-6", children: [
2231
- !priceId && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: [
2155
+ !priceId && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-destructive", children: [
2232
2156
  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-4 w-4" }),
2233
2157
  " Select a subscription plan to continue."
2234
2158
  ] }),
@@ -2237,14 +2161,14 @@ var SubscriptionCheckoutModal = ({
2237
2161
  {
2238
2162
  usdAmount,
2239
2163
  priceId: priceId ?? "",
2240
- onSolanaSuccess: solanaSuccess,
2164
+ initialMode,
2241
2165
  onSolanaError: solanaError,
2166
+ onSolanaSuccess: solanaSuccess,
2242
2167
  enableNewCard: Boolean(priceId),
2243
2168
  enableStoredMethods: Boolean(priceId),
2244
2169
  enableSolanaPay: enableSolanaPay && Boolean(priceId),
2245
2170
  onNewCardPayment: priceId ? handleNewCardPayment : void 0,
2246
- onSavedMethodPayment: priceId ? handleSavedMethodPayment : void 0,
2247
- initialMode
2171
+ onSavedMethodPayment: priceId ? handleSavedMethodPayment : void 0
2248
2172
  }
2249
2173
  )
2250
2174
  ] })
@@ -2276,8 +2200,8 @@ var wallets = [
2276
2200
  ];
2277
2201
  var WalletModal = ({ open, onOpenChange }) => {
2278
2202
  const [expandedWallet, setExpandedWallet] = React17.useState(null);
2279
- return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "w-full max-w-lg max-h-[90vh] overflow-y-auto rounded-md border border-border/70 bg-background/95 p-0 shadow-2xl [&::-webkit-scrollbar]:hidden", children: [
2280
- /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { className: "border-b border-border/40 bg-gradient-to-r from-primary/10 via-background to-background px-6 py-5 text-left", children: [
2203
+ return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "w-full max-w-lg max-h-[90vh] overflow-y-auto rounded-md border bg-background/95 p-0 shadow-2xl [&::-webkit-scrollbar]:hidden", children: [
2204
+ /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { className: "border-b bg-gradient-to-r from-primary/10 via-background to-background px-6 py-5 text-left", children: [
2281
2205
  /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { className: "flex items-center gap-2 text-foreground", children: [
2282
2206
  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wallet, { className: "h-5 w-5 text-primary" }),
2283
2207
  " Connect a Solana wallet"
@@ -2288,7 +2212,7 @@ var WalletModal = ({ open, onOpenChange }) => {
2288
2212
  wallets.map((wallet) => /* @__PURE__ */ jsxRuntime.jsxs(
2289
2213
  "div",
2290
2214
  {
2291
- className: "rounded-2xl border border-border/60 bg-background/80 p-4 shadow-sm",
2215
+ className: "rounded-2xl border bg-background/80 p-4 shadow-sm",
2292
2216
  children: [
2293
2217
  /* @__PURE__ */ jsxRuntime.jsxs(
2294
2218
  "button",
@@ -2323,7 +2247,7 @@ var WalletModal = ({ open, onOpenChange }) => {
2323
2247
  },
2324
2248
  wallet.id
2325
2249
  )),
2326
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-2xl border border-border/60 bg-muted/10 p-4 text-xs text-muted-foreground", children: "Don\u2019t see your wallet? Additional providers will be added soon. Contact support if you need manual verification." })
2250
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-2xl border bg-muted/10 p-4 text-xs text-muted-foreground", children: "Don\u2019t see your wallet? Additional providers will be added soon. Contact support if you need manual verification." })
2327
2251
  ] })
2328
2252
  ] }) });
2329
2253
  };
@@ -2482,46 +2406,12 @@ var usePaymentContext = () => {
2482
2406
  }
2483
2407
  return context;
2484
2408
  };
2485
- var BillingThemeProvider = ({
2486
- children,
2487
- className,
2488
- dark = false
2489
- }) => {
2490
- return /* @__PURE__ */ jsxRuntime.jsx(
2491
- "div",
2492
- {
2493
- className: cn(
2494
- "payments-ui-root",
2495
- dark && "dark",
2496
- className
2497
- ),
2498
- children
2499
- }
2500
- );
2501
- };
2502
- var BillingThemePortal = ({
2503
- children,
2504
- className,
2505
- dark = false
2506
- }) => {
2507
- return /* @__PURE__ */ jsxRuntime.jsx(
2508
- "div",
2509
- {
2510
- className: cn(
2511
- "payments-ui-portal",
2512
- dark && "dark",
2513
- className
2514
- ),
2515
- children
2516
- }
2517
- );
2518
- };
2519
2409
  var SolanaPaymentSelector = ({
2520
2410
  isOpen,
2521
2411
  onClose,
2522
2412
  ...props
2523
2413
  }) => {
2524
- return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isOpen, onOpenChange: (value) => value ? void 0 : onClose(), children: /* @__PURE__ */ jsxRuntime.jsx(DialogContent, { className: "w-full max-w-2xl max-h-[90vh] overflow-y-auto rounded-md border border-border/70 bg-background/95 p-0 shadow-2xl [&::-webkit-scrollbar]:hidden", children: /* @__PURE__ */ jsxRuntime.jsx(SolanaPaymentView, { ...props, onClose }) }) });
2414
+ return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isOpen, onOpenChange: (value) => value ? void 0 : onClose(), children: /* @__PURE__ */ jsxRuntime.jsx(DialogContent, { className: "w-full max-w-2xl max-h-[90vh] overflow-y-auto rounded-md border bg-background/95 p-0 shadow-2xl [&::-webkit-scrollbar]:hidden", children: /* @__PURE__ */ jsxRuntime.jsx(SolanaPaymentView, { ...props, onClose }) }) });
2525
2415
  };
2526
2416
  var Table = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
2527
2417
  "table",
@@ -2961,8 +2851,8 @@ var BillingHistory = ({
2961
2851
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: t.reviewActivity }),
2962
2852
  enableCancel && /* @__PURE__ */ jsxRuntime.jsx(CancelMembershipDialog, { onNotify: notify })
2963
2853
  ] }),
2964
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-[300px] overflow-y-auto rounded-lg border border-border/70", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto", children: historyQuery.isLoading ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "p-4 text-center text-sm text-muted-foreground", children: t.loading }) : historyQuery.isError ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "p-4 text-center text-sm text-destructive", children: t.error }) : /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
2965
- /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { className: "border-border/60", children: [
2854
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-[300px] overflow-y-auto rounded-lg border ", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto", children: historyQuery.isLoading ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "p-4 text-center text-sm text-muted-foreground", children: t.loading }) : historyQuery.isError ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "p-4 text-center text-sm text-destructive", children: t.error }) : /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
2855
+ /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { className: "", children: [
2966
2856
  /* @__PURE__ */ jsxRuntime.jsx(TableHead, { children: t.reference }),
2967
2857
  /* @__PURE__ */ jsxRuntime.jsx(TableHead, { children: t.date }),
2968
2858
  /* @__PURE__ */ jsxRuntime.jsx(TableHead, { children: t.amount }),
@@ -2970,7 +2860,7 @@ var BillingHistory = ({
2970
2860
  /* @__PURE__ */ jsxRuntime.jsx(TableHead, { children: t.status })
2971
2861
  ] }) }),
2972
2862
  /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: payments.map(
2973
- (page) => page.data.map((payment) => /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { className: "border-border/40", children: [
2863
+ (page) => page.data.map((payment) => /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { className: "", children: [
2974
2864
  /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "font-mono text-sm", children: payment.id.slice(0, 7).toUpperCase() }),
2975
2865
  /* @__PURE__ */ jsxRuntime.jsx(TableCell, { children: formatDate(payment.purchased_at) }),
2976
2866
  /* @__PURE__ */ jsxRuntime.jsx(TableCell, { children: formatAmount(payment.amount, payment.currency) }),
@@ -3158,10 +3048,10 @@ var PaymentMethodsSection = ({
3158
3048
  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "mr-2 h-5 w-5 animate-spin" }),
3159
3049
  " ",
3160
3050
  t.loadingCards
3161
- ] }) : payments.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-dashed border-white/20 bg-white/5 p-6 text-sm text-white/60", children: t.noPaymentMethods }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: payments.map((method) => /* @__PURE__ */ jsxRuntime.jsxs(
3051
+ ] }) : payments.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6 text-sm text-center", children: t.noPaymentMethods }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: payments.map((method) => /* @__PURE__ */ jsxRuntime.jsxs(
3162
3052
  "div",
3163
3053
  {
3164
- className: "rounded-lg border border-white/10 bg-white/5 p-4 shadow-sm",
3054
+ className: "rounded-lg border bg-white/5 p-4 shadow-sm",
3165
3055
  children: [
3166
3056
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 md:flex-row md:items-center md:justify-between", children: [
3167
3057
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -3246,7 +3136,7 @@ var PaymentMethodsSection = ({
3246
3136
  },
3247
3137
  externalError: createMutation.error?.message ?? null,
3248
3138
  onTokenize: handleCardTokenize,
3249
- className: "rounded-2xl border border-white/10 bg-white/5 p-6"
3139
+ className: "rounded-2xl border bg-white/5 p-6"
3250
3140
  }
3251
3141
  )
3252
3142
  ] }) }),
@@ -3269,7 +3159,7 @@ var PaymentMethodsSection = ({
3269
3159
  },
3270
3160
  externalError: replaceMutation.error?.message ?? null,
3271
3161
  onTokenize: handleReplaceTokenize,
3272
- className: "rounded-2xl border border-white/10 bg-white/5 p-6"
3162
+ className: "rounded-2xl border bg-white/5 p-6"
3273
3163
  }
3274
3164
  )
3275
3165
  ] }) })
@@ -3338,7 +3228,7 @@ var WalletDialog = ({ open, onOpenChange }) => {
3338
3228
  setForm(initialState);
3339
3229
  };
3340
3230
  return /* @__PURE__ */ jsxRuntime.jsx(AlertDialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogContent, { className: "max-h-[95vh] max-w-lg overflow-y-auto rounded-2xl border border-border bg-background", children: [
3341
- /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogHeader, { className: "border-b border-border/60 pb-4", children: [
3231
+ /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogHeader, { className: "border-b pb-4", children: [
3342
3232
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
3343
3233
  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Shield, { className: "h-5 w-5 text-primary" }),
3344
3234
  /* @__PURE__ */ jsxRuntime.jsx(AlertDialogTitle, { className: "text-center text-base font-semibold uppercase tracking-wide", children: "Secure Payment via Mobius Pay" })
@@ -3382,7 +3272,7 @@ var WalletDialog = ({ open, onOpenChange }) => {
3382
3272
  ] })
3383
3273
  ] })
3384
3274
  ] }),
3385
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 rounded-md border border-border/70 bg-muted/10 p-4", children: [
3275
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 rounded-md border bg-muted/10 p-4", children: [
3386
3276
  /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { id: "terms-agree", checked: form.termsAccepted, onCheckedChange: (checked) => updateField("termsAccepted", Boolean(checked)) }),
3387
3277
  /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "terms-agree", className: "text-sm text-muted-foreground", children: "By completing this order, I confirm that I am 18 years or older and agree to your privacy policy and terms." })
3388
3278
  ] }),
@@ -3791,8 +3681,6 @@ var usePaymentStatus = (options = {}) => {
3791
3681
  };
3792
3682
 
3793
3683
  exports.BillingHistory = BillingHistory;
3794
- exports.BillingThemePortal = BillingThemePortal;
3795
- exports.BillingThemeProvider = BillingThemeProvider;
3796
3684
  exports.CancelMembershipDialog = CancelMembershipDialog;
3797
3685
  exports.CardDetailsForm = CardDetailsForm;
3798
3686
  exports.ClientApiError = ClientApiError;