@doujins/payments-ui 0.1.6 → 0.1.7

package/dist/index.js

@@ -11,7 +11,7 @@ import { SolflareWalletAdapter } from '@solana/wallet-adapter-solflare';
 import { TrustWalletAdapter } from '@solana/wallet-adapter-trust';
 import { CoinbaseWalletAdapter } from '@solana/wallet-adapter-coinbase';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { X, ChevronDown, ChevronUp, Check, User, MapPin, Loader2, CreditCard, WalletCards, Trash2, ArrowLeft, CheckCircle, AlertCircle, Wallet, Ban, TriangleAlert, Shield, UserRound, Calendar, KeyRound, Sparkles, XCircle, RotateCcw, RefreshCw } from 'lucide-react';
+import { X, ChevronDown, ChevronUp, Check, Loader2, CheckCircle, AlertCircle, Wallet, Ban, TriangleAlert, WalletCards, CreditCard, Trash2, Shield, UserRound, Calendar, KeyRound, Sparkles, XCircle, RotateCcw, RefreshCw } from 'lucide-react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -692,12 +692,9 @@ var CardDetailsForm = ({
       noValidate: true,
       children: [
         errorMessage && /* @__PURE__ */ 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 }),
-        /* @__PURE__ */ jsxs("div", { className: "grid gap-5 md:grid-cols-2", children: [
-          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxs(Label, { htmlFor: "payments-first", className: "flex items-center gap-2 text-white/70", children: [
-              /* @__PURE__ */ jsx(User, { className: "h-4 w-4" }),
-              " First name"
-            ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 md:flex-row", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+            /* @__PURE__ */ jsx(Label, { htmlFor: "payments-first", children: "First name" }),
             /* @__PURE__ */ jsx(
               Input,
               {
@@ -708,11 +705,8 @@ var CardDetailsForm = ({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxs(Label, { htmlFor: "payments-last", className: "flex items-center gap-2 text-white/70", children: [
-              /* @__PURE__ */ jsx(User, { className: "h-4 w-4" }),
-              " Last name"
-            ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+            /* @__PURE__ */ jsx(Label, { htmlFor: "payments-last", children: "Last name" }),
             /* @__PURE__ */ jsx(
               Input,
               {
@@ -776,10 +770,7 @@ var CardDetailsForm = ({
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "grid gap-5 md:grid-cols-2", children: [
           /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxs(Label, { htmlFor: "payments-postal", className: "flex items-center gap-2 text-white/70", children: [
-              /* @__PURE__ */ jsx(MapPin, { className: "h-4 w-4" }),
-              " Postal code"
-            ] }),
+            /* @__PURE__ */ jsx(Label, { htmlFor: "payments-postal", children: "Postal code" }),
             /* @__PURE__ */ jsx(
               Input,
               {
@@ -821,17 +812,10 @@ var CardDetailsForm = ({
             children: submitting || isTokenizing ? /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
               " Processing\u2026"
-            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(CreditCard, { className: "mr-2 h-4 w-4" }),
-              " ",
-              submitLabel
-            ] })
+            ] }) : submitLabel
           }
         ),
-        /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-2 text-xs text-white/50", children: [
-          /* @__PURE__ */ jsx(CreditCard, { className: "h-4 w-4" }),
-          " Your payment information is encrypted and processed securely."
-        ] })
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-white/60", children: "Your payment information is encrypted and processed securely." })
       ]
     }
   );
@@ -945,9 +929,7 @@ var formatCardLabel = (method) => {
 var StoredPaymentMethods = ({
   selectedMethodId,
   onMethodSelect,
-  showAddButton = true,
-  heading = "Payment Methods",
-  description = "Manage your saved cards"
+  showAddButton = true
 }) => {
   const { listQuery, createMutation, deleteMutation } = usePaymentMethods();
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -966,31 +948,18 @@ var StoredPaymentMethods = ({
     );
   };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-2 text-sm font-medium text-muted-foreground", children: [
-          /* @__PURE__ */ jsx(WalletCards, { className: "h-4 w-4" }),
-          " ",
-          heading
-        ] }),
-        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: description })
-      ] }),
-      showAddButton && /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "outline", onClick: () => setIsModalOpen(true), children: [
-        /* @__PURE__ */ jsx(CreditCard, { className: "mr-2 h-4 w-4" }),
-        " Add card"
-      ] })
-    ] }),
-    listQuery.isLoading ? /* @__PURE__ */ 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: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-start justify-between gap-4", children: showAddButton && /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: () => setIsModalOpen(true), children: "Add card" }) }),
+    listQuery.isLoading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center py-4 text-sm text-muted-foreground", children: [
       /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
-      " Loading cards\u2026"
-    ] }) : payments.length === 0 ? /* @__PURE__ */ 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__ */ jsx(ScrollArea, { className: "max-h-[320px] pr-2", children: /* @__PURE__ */ jsx("div", { className: "space-y-3", children: payments.map((method) => {
+      " Loading cards..."
+    ] }) : payments.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-sm text-muted-foreground", children: "No saved payment methods yet." }) : /* @__PURE__ */ jsx(ScrollArea, { className: "max-h-[320px] pr-2", children: /* @__PURE__ */ jsx("div", { className: "space-y-3", children: payments.map((method) => {
       const isSelected = selectedMethodId === method.id;
       return /* @__PURE__ */ jsxs(
         "div",
         {
           className: cn(
-            "flex flex-col gap-3 rounded-lg border px-4 py-3 transition-colors md:flex-row md:items-center md:justify-between",
-            isSelected ? "border-primary/60 bg-primary/5" : "border-border/60 bg-background"
+            "flex flex-col gap-3 rounded-md px-4 py-3 transition-colors md:flex-row md:items-center md:justify-between",
+            isSelected ? "ring-1 ring-primary/70 bg-primary/5" : "ring-1 ring-border/40 bg-transparent"
           ),
           children: [
             /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
@@ -1017,7 +986,8 @@ var StoredPaymentMethods = ({
                 Button,
                 {
                   size: "sm",
-                  variant: isSelected ? "default" : "outline",
+                  variant: "ghost",
+                  className: "px-3",
                   onClick: () => onMethodSelect(method),
                   children: isSelected ? "Selected" : "Use card"
                 }
@@ -1025,12 +995,12 @@ var StoredPaymentMethods = ({
               /* @__PURE__ */ jsx(
                 Button,
                 {
-                  size: "icon",
-                  variant: "outline",
-                  className: "text-destructive",
+                  size: "sm",
+                  variant: "ghost",
+                  className: "px-3 text-destructive",
                   onClick: () => handleDelete(method),
                   disabled: deletingId === method.id && deleteMutation.isPending,
-                  children: deletingId === method.id && deleteMutation.isPending ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
+                  children: deletingId === method.id && deleteMutation.isPending ? "Removing\u2026" : "Remove"
                 }
               )
             ] })
@@ -1769,7 +1739,7 @@ var SolanaPaymentView = ({
       /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: "Select token" }),
         /* @__PURE__ */ jsxs(Select, { value: selectedToken?.symbol ?? "", onValueChange: handleTokenChange, children: [
-          /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select token" }) }),
+          /* @__PURE__ */ jsx(SelectTrigger, { className: "border border-border/60 bg-transparent", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select token" }) }),
           /* @__PURE__ */ jsx(SelectContent, { className: "max-h-64", children: tokens.map((token) => /* @__PURE__ */ jsxs(SelectItem, { value: token.symbol, children: [
             token.name,
             " (",
@@ -1796,7 +1766,7 @@ var SolanaPaymentView = ({
         /* @__PURE__ */ jsx("p", { className: "text-2xl font-semibold text-foreground", children: "Pay with Solana" }),
         /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Choose a supported token and send the payment via Solana Pay QR code." })
       ] }),
-      onClose && /* @__PURE__ */ jsxs(
+      onClose && /* @__PURE__ */ jsx(
         Button,
         {
           type: "button",
@@ -1804,11 +1774,8 @@ var SolanaPaymentView = ({
           variant: "ghost",
           onClick: handleClose,
           disabled: paymentState === "processing" || paymentState === "confirming",
-          className: "h-8 px-2 text-sm",
-          children: [
-            /* @__PURE__ */ jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }),
-            " Back"
-          ]
+          className: "h-8 px-3 text-sm",
+          children: "Back"
         }
       )
     ] }),
@@ -1927,11 +1894,9 @@ var PaymentExperience = ({
       /* @__PURE__ */ jsx(
         StoredPaymentMethods,
         {
-          heading: "Saved cards",
+          showAddButton: false,
           selectedMethodId,
-          onMethodSelect: handleMethodSelect,
-          description: "Select one of your stored payment methods.",
-          showAddButton: false
+          onMethodSelect: handleMethodSelect
         }
       ),
       /* @__PURE__ */ jsx(
@@ -1940,7 +1905,7 @@ var PaymentExperience = ({
           className: "w-full",
           disabled: !selectedMethodId || savedStatus === "processing",
           onClick: handleSavedPayment,
-          children: savedStatus === "processing" ? "Processing\u2026" : "Pay with selected card"
+          children: savedStatus === "processing" ? "Processing..." : "Pay with selected card"
         }
       ),
       savedError && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: savedError })
@@ -1973,8 +1938,8 @@ var PaymentExperience = ({
             /* @__PURE__ */ jsx(TabsTrigger, { value: "saved", disabled: !showStored, children: "Use saved card" }),
             /* @__PURE__ */ jsx(TabsTrigger, { value: "new", disabled: !showNewCard, children: "Add new card" })
           ] }),
-          /* @__PURE__ */ jsx(TabsContent, { value: "saved", className: "space-y-4", children: renderSavedTab() }),
-          /* @__PURE__ */ jsx(TabsContent, { value: "new", className: "space-y-4", children: renderNewTab() })
+          /* @__PURE__ */ jsx(TabsContent, { value: "saved", children: renderSavedTab() }),
+          /* @__PURE__ */ jsx(TabsContent, { value: "new", children: renderNewTab() })
         ]
       }
     ),
@@ -2162,11 +2127,11 @@ var SubscriptionCheckoutModal = ({
   };
   const handleNewCardPayment = async ({ token, billing }) => {
     const response = await subscribeWithCard({
-      priceId: ensurePrice(),
+      billing,
       provider,
+      idempotencyKey,
       paymentToken: token,
-      billing,
-      idempotencyKey
+      priceId: ensurePrice()
     });
     assertCheckoutSuccess(response.status, response.message);
     notifySuccess();
@@ -2205,14 +2170,14 @@ var SubscriptionCheckoutModal = ({
             {
               usdAmount,
               priceId: priceId ?? "",
-              onSolanaSuccess: solanaSuccess,
+              initialMode,
               onSolanaError: solanaError,
+              onSolanaSuccess: solanaSuccess,
               enableNewCard: Boolean(priceId),
               enableStoredMethods: Boolean(priceId),
               enableSolanaPay: enableSolanaPay && Boolean(priceId),
               onNewCardPayment: priceId ? handleNewCardPayment : void 0,
-              onSavedMethodPayment: priceId ? handleSavedMethodPayment : void 0,
-              initialMode
+              onSavedMethodPayment: priceId ? handleSavedMethodPayment : void 0
             }
           )
         ] })
@@ -3126,7 +3091,7 @@ var PaymentMethodsSection = ({
       /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-5 w-5 animate-spin" }),
       " ",
       t.loadingCards
-    ] }) : payments.length === 0 ? /* @__PURE__ */ 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__ */ jsx("div", { className: "space-y-3", children: payments.map((method) => /* @__PURE__ */ jsxs(
+    ] }) : payments.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-6 text-sm text-center", children: t.noPaymentMethods }) : /* @__PURE__ */ jsx("div", { className: "space-y-3", children: payments.map((method) => /* @__PURE__ */ jsxs(
       "div",
       {
         className: "rounded-lg border border-white/10 bg-white/5 p-4 shadow-sm",