@withpotter/components 0.13.0-next.101

package/dist/billing/overview-tab.js

@@ -0,0 +1,313 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Badge } from "@withpotter/ui-kit/badge";
+import { Button } from "@withpotter/ui-kit/button";
+import {
+  Wallet,
+  AlertTriangle,
+  Check,
+  X,
+  HardDrive,
+  Wifi,
+  MessageSquare,
+  Mail,
+  Plus
+} from "lucide-react";
+import { formatDate, formatBytes } from "@withpotter/lib/utils";
+import { pickPlanPrice } from "@withpotter/lib/plan-price";
+const STORAGE_BASELINE_BYTES = 500 * 1024 * 1024;
+function getStatusBadge(status) {
+  switch (status) {
+    case "active":
+    case "trialing":
+      return /* @__PURE__ */ jsx(Badge, { variant: "success", children: "Active" });
+    case "past_due":
+      return /* @__PURE__ */ jsx(Badge, { variant: "error", children: "Past due" });
+    case "cancelled":
+      return /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: "Cancelled" });
+    case "non_renewing":
+      return /* @__PURE__ */ jsx(Badge, { variant: "warning", children: "Cancelling" });
+    default:
+      return /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: status });
+  }
+}
+function OverviewTab({
+  subscription,
+  currentUsage,
+  addOnBytes,
+  creditsInfo,
+  emailCreditsInfo,
+  formatCurrency,
+  onCancelClick,
+  onUpgradeNow,
+  onNavigateTab,
+  onBuyStorage,
+  buyStoragePending,
+  onTopUpCredits,
+  topUpCreditsPending,
+  onTopUpEmailCredits,
+  topUpEmailCreditsPending
+}) {
+  const storageUsedBytes = currentUsage?.storage.usedBytes ?? 0;
+  const storageFileCount = currentUsage?.storage.fileCount ?? 0;
+  const bandwidthUsedBytes = currentUsage?.bandwidth?.usedBytes ?? 0;
+  const storageLimitBytes = STORAGE_BASELINE_BYTES + addOnBytes;
+  const storagePct = Math.min(
+    100,
+    Math.round(storageUsedBytes / storageLimitBytes * 100)
+  );
+  const isOverBaseline = storageUsedBytes >= storageLimitBytes;
+  const isApproaching = storagePct >= 80 && !isOverBaseline;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "bg-[var(--bg-base)] rounded-md border border-[var(--border-default)] overflow-x-auto", children: [
+      /* @__PURE__ */ jsxs("div", { className: "px-5 py-4 border-b border-[var(--border-subtle)] flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "p-2 rounded-md bg-[var(--accent-secondary)] text-brand-500", children: /* @__PURE__ */ jsx(Wallet, { className: "w-5 h-5" }) }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-base font-medium text-[var(--text-primary)]", children: "Current plan" }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-tertiary)]", children: "Your subscription details" })
+          ] })
+        ] }),
+        subscription ? getStatusBadge(subscription.status) : /* @__PURE__ */ jsx(Badge, { variant: "info", children: "Free" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "p-5", children: subscription ? (() => {
+        const planPrice = pickPlanPrice(subscription.plan.prices);
+        const isFreePlan = subscription.plan.slug === "free" || !planPrice || planPrice.amount === 0;
+        return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-[var(--text-primary)]", children: (subscription.plan.name.split("\u2014")[0] || subscription.plan.name).trim() }),
+              /* @__PURE__ */ jsx("p", { className: "text-[var(--text-tertiary)]", children: isFreePlan ? "Free plan" : `${formatCurrency(planPrice?.amount ?? 0, planPrice?.currency ?? "NGN")}/${subscription.plan.interval}` })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "text-right", children: [
+              !isFreePlan && subscription.currentPeriod.end && /* @__PURE__ */ jsxs("p", { className: "text-sm text-[var(--text-tertiary)]", children: [
+                "Renews on ",
+                formatDate(subscription.currentPeriod.end)
+              ] }),
+              !isFreePlan && subscription.cancellation.cancelAtPeriodEnd && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-[var(--error)]", children: [
+                /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4" }),
+                /* @__PURE__ */ jsxs("span", { className: "text-sm", children: [
+                  "Cancels on",
+                  " ",
+                  formatDate(subscription.cancellation.endsAt)
+                ] })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "h-px bg-[var(--bg-muted)]" }),
+          /* @__PURE__ */ jsxs("div", { className: "text-sm", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-[var(--text-tertiary)]", children: "Custom domain" }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)] mb-1", children: "Link your own domain" }),
+            /* @__PURE__ */ jsx("p", { className: "font-medium", children: subscription.plan.features.customDomain ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-[var(--success)]" }) : /* @__PURE__ */ jsx(X, { className: "h-4 w-4 text-[var(--text-muted)]" }) })
+          ] }),
+          !isFreePlan && subscription.status !== "cancelled" && /* @__PURE__ */ jsx("div", { className: "pt-4 flex items-center justify-between border-t border-[var(--border-subtle)]", children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "secondary",
+              onClick: onCancelClick,
+              disabled: subscription.cancellation.cancelAtPeriodEnd,
+              children: subscription.cancellation.cancelAtPeriodEnd ? "Cancellation Pending" : "Cancel Subscription"
+            }
+          ) }),
+          isFreePlan && /* @__PURE__ */ jsx("div", { className: "pt-4 flex items-center justify-between border-t border-[var(--border-subtle)]", children: /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: onUpgradeNow, children: "Upgrade to Plus" }) })
+        ] });
+      })() : /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-[var(--text-primary)]", children: "Free plan" }),
+          /* @__PURE__ */ jsx("p", { className: "text-[var(--text-tertiary)]", children: "$0/month" })
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "h-px bg-[var(--bg-muted)]" }),
+        /* @__PURE__ */ jsx("div", { className: "text-sm text-[var(--text-tertiary)]", children: "Activate a plan to unlock custom domains, lower transaction fees, and the full set of growth tools." }),
+        /* @__PURE__ */ jsx("div", { className: "pt-4 flex items-center justify-between border-t border-[var(--border-subtle)]", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "primary",
+            onClick: () => onNavigateTab("plan"),
+            children: "Upgrade plan"
+          }
+        ) })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "bg-[var(--bg-base)] rounded-md border border-[var(--border-default)]", children: [
+      /* @__PURE__ */ jsxs("div", { className: "px-5 py-4 border-b border-[var(--border-subtle)] flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-base font-medium text-[var(--text-primary)]", children: "Usage this period" }),
+        currentUsage && /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--text-tertiary)]", children: [
+          formatDate(currentUsage.period.start),
+          " \u2013",
+          " ",
+          formatDate(currentUsage.period.end)
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "divide-y divide-[var(--border-subtle)]", children: [
+        /* @__PURE__ */ jsxs("div", { className: "px-5 py-4 text-sm", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1.5", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-[var(--text-secondary)]", children: [
+              /* @__PURE__ */ jsx(HardDrive, { className: "w-3.5 h-3.5" }),
+              /* @__PURE__ */ jsx("span", { children: "Image storage" }),
+              addOnBytes > 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-brand-500 bg-brand-500/10 px-1.5 py-0.5 rounded", children: [
+                "+",
+                formatBytes(addOnBytes),
+                " purchased"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--text-tertiary)]", children: [
+              formatBytes(storageUsedBytes),
+              " of",
+              " ",
+              formatBytes(storageLimitBytes),
+              " used"
+            ] })
+          ] }),
+          storageFileCount > 0 && /* @__PURE__ */ jsxs("p", { className: "text-xs text-[var(--text-muted)] mb-1.5", children: [
+            storageFileCount,
+            " ",
+            storageFileCount === 1 ? "file" : "files",
+            " ",
+            "uploaded this period"
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "w-full h-1.5 bg-[var(--bg-muted)] rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `h-full rounded-full transition-[width] duration-500 ${isOverBaseline ? "bg-[var(--error)]" : isApproaching ? "bg-[var(--warning)]" : "bg-brand-500"}`,
+              style: {
+                width: storagePct === 0 ? "0%" : `${Math.max(storagePct, 1)}%`
+              }
+            }
+          ) }),
+          isApproaching && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--warning)] mt-1", children: "Approaching your storage limit. Consider adding more storage." }),
+          isOverBaseline && /* @__PURE__ */ jsxs("p", { className: "text-xs text-[var(--error)] mt-1", children: [
+            "You've used ",
+            formatBytes(storageUsedBytes),
+            " (",
+            formatBytes(storageLimitBytes),
+            " limit). Overage of",
+            " ",
+            formatBytes(storageUsedBytes - storageLimitBytes),
+            " will be charged at end of month."
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: onBuyStorage,
+              disabled: buyStoragePending,
+              className: "mt-2 flex items-center gap-1 text-xs text-brand-500 hover:text-brand-600 hover:underline disabled:opacity-50 cursor-pointer",
+              children: [
+                /* @__PURE__ */ jsx(Plus, { className: "w-3 h-3" }),
+                "Buy more storage"
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "px-5 py-4 text-sm border-t border-[var(--border-subtle)]", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-[var(--text-secondary)]", children: [
+              /* @__PURE__ */ jsx(Wifi, { className: "w-3.5 h-3.5" }),
+              /* @__PURE__ */ jsx("span", { children: "Bandwidth" })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--text-tertiary)]", children: bandwidthUsedBytes > 0 ? `${formatBytes(bandwidthUsedBytes)} used this period` : "\u2014" })
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)] mt-1", children: "Served via CDN. Detailed tracking coming soon." })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "px-5 py-4 text-sm border-t border-[var(--border-subtle)]", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1.5", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-[var(--text-secondary)]", children: [
+              /* @__PURE__ */ jsx(MessageSquare, { className: "w-3.5 h-3.5" }),
+              /* @__PURE__ */ jsx("span", { children: "Messaging credits" })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "font-medium text-[var(--text-primary)]", children: creditsInfo != null ? `${creditsInfo.balance.toLocaleString()} remaining` : "\u2014" })
+          ] }),
+          creditsInfo && /* @__PURE__ */ jsxs(Fragment, { children: [
+            creditsInfo.monthlyAllowance > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between text-xs text-[var(--text-muted)] mb-1", children: /* @__PURE__ */ jsxs("span", { children: [
+                creditsInfo.usedThisPeriod.toLocaleString(),
+                " of",
+                " ",
+                creditsInfo.monthlyAllowance.toLocaleString(),
+                " included used"
+              ] }) }),
+              /* @__PURE__ */ jsx("div", { className: "w-full h-1.5 bg-[var(--bg-muted)] rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `h-full rounded-full transition-[width] duration-500 ${creditsInfo.overage > 0 ? "bg-[var(--error)]" : creditsInfo.usedThisPeriod / creditsInfo.monthlyAllowance >= 0.8 ? "bg-[var(--warning)]" : "bg-brand-500"}`,
+                  style: {
+                    width: `${Math.min(100, Math.round(creditsInfo.usedThisPeriod / creditsInfo.monthlyAllowance * 100))}%`
+                  }
+                }
+              ) })
+            ] }),
+            creditsInfo.isLowBalance && creditsInfo.overage === 0 && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--warning)] mt-1", children: "Low balance \u2014 top up to avoid message failures." }),
+            creditsInfo.overage > 0 && /* @__PURE__ */ jsxs("p", { className: "text-xs text-[var(--error)] mt-1", children: [
+              creditsInfo.overage.toLocaleString(),
+              " credits over your included allowance. Est. a-la-carte charge:",
+              " ",
+              formatCurrency(creditsInfo.overageCostNgn, "NGN"),
+              "."
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: onTopUpCredits,
+              disabled: topUpCreditsPending,
+              className: "mt-2 flex items-center gap-1 text-xs text-brand-500 hover:text-brand-600 hover:underline disabled:opacity-50 cursor-pointer",
+              children: [
+                /* @__PURE__ */ jsx(Plus, { className: "w-3 h-3" }),
+                "Top up credits"
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "px-5 py-4 text-sm border-t border-[var(--border-subtle)]", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1.5", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-[var(--text-secondary)]", children: [
+              /* @__PURE__ */ jsx(Mail, { className: "w-3.5 h-3.5" }),
+              /* @__PURE__ */ jsx("span", { children: "Email credits" })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "font-medium text-[var(--text-primary)]", children: emailCreditsInfo != null ? `${emailCreditsInfo.balance.toLocaleString()} remaining` : "\u2014" })
+          ] }),
+          emailCreditsInfo && /* @__PURE__ */ jsxs(Fragment, { children: [
+            emailCreditsInfo.monthlyAllowance > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between text-xs text-[var(--text-muted)] mb-1", children: /* @__PURE__ */ jsxs("span", { children: [
+                emailCreditsInfo.usedThisPeriod.toLocaleString(),
+                " of",
+                " ",
+                emailCreditsInfo.monthlyAllowance.toLocaleString(),
+                " ",
+                "included used"
+              ] }) }),
+              /* @__PURE__ */ jsx("div", { className: "w-full h-1.5 bg-[var(--bg-muted)] rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `h-full rounded-full transition-[width] duration-500 ${emailCreditsInfo.usedThisPeriod / emailCreditsInfo.monthlyAllowance >= 0.8 ? "bg-[var(--warning)]" : "bg-brand-500"}`,
+                  style: {
+                    width: `${Math.min(100, Math.round(emailCreditsInfo.usedThisPeriod / emailCreditsInfo.monthlyAllowance * 100))}%`
+                  }
+                }
+              ) })
+            ] }),
+            emailCreditsInfo.isLowBalance && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--warning)] mt-1", children: "Low balance \u2014 top up to keep emails sending." })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: onTopUpEmailCredits,
+              disabled: topUpEmailCreditsPending,
+              className: "mt-2 flex items-center gap-1 text-xs text-brand-500 hover:text-brand-600 hover:underline disabled:opacity-50 cursor-pointer",
+              children: [
+                /* @__PURE__ */ jsx(Plus, { className: "w-3 h-3" }),
+                "Top up email credits"
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+export {
+  OverviewTab,
+  STORAGE_BASELINE_BYTES
+};
+//# sourceMappingURL=overview-tab.js.map

package/dist/billing/overview-tab.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/billing/overview-tab.tsx"],"sourcesContent":["import { Badge } from '@withpotter/ui-kit/badge';\nimport { Button } from '@withpotter/ui-kit/button';\nimport {\n  Wallet,\n  AlertTriangle,\n  Check,\n  X,\n  HardDrive,\n  Wifi,\n  MessageSquare,\n  Mail,\n  Plus,\n} from 'lucide-react';\nimport { formatDate, formatBytes } from '@withpotter/lib/utils';\nimport { pickPlanPrice } from '@withpotter/lib/plan-price';\nimport type {\n  Subscription,\n  BillingTab,\n  CurrentUsage,\n  MessagingCreditsInfo,\n  EmailCreditsInfo,\n} from './helpers';\n\nexport const STORAGE_BASELINE_BYTES = 500 * 1024 * 1024; // 500 MB\n\n// Status badge helper (used only in overview)\nfunction getStatusBadge(status: string) {\n  switch (status) {\n    case 'active':\n    case 'trialing':\n      return <Badge variant=\"success\">Active</Badge>;\n    case 'past_due':\n      return <Badge variant=\"error\">Past due</Badge>;\n    case 'cancelled':\n      return <Badge variant=\"secondary\">Cancelled</Badge>;\n    case 'non_renewing':\n      return <Badge variant=\"warning\">Cancelling</Badge>;\n    default:\n      return <Badge variant=\"secondary\">{status}</Badge>;\n  }\n}\n\ninterface OverviewTabProps {\n  subscription: Subscription | null | undefined;\n  currentUsage: CurrentUsage | null | undefined;\n  addOnBytes: number;\n  creditsInfo: MessagingCreditsInfo | null | undefined;\n  emailCreditsInfo: EmailCreditsInfo | null | undefined;\n  formatCurrency: (amount: number, currency: string) => string;\n  onCancelClick: () => void;\n  onUpgradeNow: () => void;\n  onNavigateTab: (tab: BillingTab, subView?: string) => void;\n  onBuyStorage: () => void;\n  buyStoragePending: boolean;\n  onTopUpCredits: () => void;\n  topUpCreditsPending: boolean;\n  onTopUpEmailCredits: () => void;\n  topUpEmailCreditsPending: boolean;\n}\n\nexport function OverviewTab({\n  subscription,\n  currentUsage,\n  addOnBytes,\n  creditsInfo,\n  emailCreditsInfo,\n  formatCurrency,\n  onCancelClick,\n  onUpgradeNow,\n  onNavigateTab,\n  onBuyStorage,\n  buyStoragePending,\n  onTopUpCredits,\n  topUpCreditsPending,\n  onTopUpEmailCredits,\n  topUpEmailCreditsPending,\n}: OverviewTabProps) {\n  const storageUsedBytes = currentUsage?.storage.usedBytes ?? 0;\n  const storageFileCount = currentUsage?.storage.fileCount ?? 0;\n  const bandwidthUsedBytes = currentUsage?.bandwidth?.usedBytes ?? 0;\n  const storageLimitBytes = STORAGE_BASELINE_BYTES + addOnBytes;\n  const storagePct = Math.min(\n    100,\n    Math.round((storageUsedBytes / storageLimitBytes) * 100),\n  );\n  const isOverBaseline = storageUsedBytes >= storageLimitBytes;\n  const isApproaching = storagePct >= 80 && !isOverBaseline;\n\n  return (\n    <div className=\"space-y-6\">\n      {/* Current Plan Card */}\n      <div className=\"bg-[var(--bg-base)] rounded-md border border-[var(--border-default)] overflow-x-auto\">\n        <div className=\"px-5 py-4 border-b border-[var(--border-subtle)] flex items-center justify-between\">\n          <div className=\"flex items-center gap-3\">\n            <div className=\"p-2 rounded-md bg-[var(--accent-secondary)] text-brand-500\">\n              <Wallet className=\"w-5 h-5\" />\n            </div>\n            <div>\n              <h2 className=\"text-base font-medium text-[var(--text-primary)]\">\n                Current plan\n              </h2>\n              <p className=\"text-sm text-[var(--text-tertiary)]\">\n                Your subscription details\n              </p>\n            </div>\n          </div>\n          {subscription ? getStatusBadge(subscription.status) : <Badge variant=\"info\">Free</Badge>}\n        </div>\n\n        <div className=\"p-5\">\n          {subscription ? (() => {\n            const planPrice = pickPlanPrice(subscription.plan.prices);\n            const isFreePlan =\n              subscription.plan.slug === 'free' || !planPrice || planPrice.amount === 0;\n            return (\n            <div className=\"space-y-4\">\n              <div className=\"flex items-center justify-between\">\n                <div>\n                  <h3 className=\"text-lg font-semibold text-[var(--text-primary)]\">\n                    {(subscription.plan.name.split('—')[0] || subscription.plan.name).trim()}\n                  </h3>\n                  <p className=\"text-[var(--text-tertiary)]\">\n                    {isFreePlan\n                      ? 'Free plan'\n                      : `${formatCurrency(planPrice?.amount ?? 0, planPrice?.currency ?? 'NGN')}/${subscription.plan.interval}`}\n                  </p>\n                </div>\n                <div className=\"text-right\">\n                  {!isFreePlan && subscription.currentPeriod.end && (\n                    <p className=\"text-sm text-[var(--text-tertiary)]\">\n                      Renews on {formatDate(subscription.currentPeriod.end)}\n                    </p>\n                  )}\n                  {!isFreePlan && subscription.cancellation.cancelAtPeriodEnd && (\n                    <div className=\"flex items-center gap-1 text-[var(--error)]\">\n                      <AlertTriangle className=\"h-4 w-4\" />\n                      <span className=\"text-sm\">\n                        Cancels on{' '}\n                        {formatDate(subscription.cancellation.endsAt!)}\n                      </span>\n                    </div>\n                  )}\n                </div>\n              </div>\n\n              <div className=\"h-px bg-[var(--bg-muted)]\" />\n\n              {/* Plan-level transaction fees no longer apply — category fees\n                  are owned by PricingPolicy and surfaced in the Rates tab. */}\n              <div className=\"text-sm\">\n                <p className=\"text-[var(--text-tertiary)]\">Custom domain</p>\n                <p className=\"text-xs text-[var(--text-muted)] mb-1\">\n                  Link your own domain\n                </p>\n                <p className=\"font-medium\">\n                  {subscription.plan.features.customDomain ? (\n                    <Check className=\"h-4 w-4 text-[var(--success)]\" />\n                  ) : (\n                    <X className=\"h-4 w-4 text-[var(--text-muted)]\" />\n                  )}\n                </p>\n              </div>\n\n              {!isFreePlan && subscription.status !== 'cancelled' && (\n                <div className=\"pt-4 flex items-center justify-between border-t border-[var(--border-subtle)]\">\n                  <Button\n                    variant=\"secondary\"\n                    onClick={onCancelClick}\n                    disabled={subscription.cancellation.cancelAtPeriodEnd}\n                  >\n                    {subscription.cancellation.cancelAtPeriodEnd\n                      ? 'Cancellation Pending'\n                      : 'Cancel Subscription'}\n                  </Button>\n                </div>\n              )}\n\n              {isFreePlan && (\n                <div className=\"pt-4 flex items-center justify-between border-t border-[var(--border-subtle)]\">\n                  <Button variant=\"primary\" onClick={onUpgradeNow}>\n                    Upgrade to Plus\n                  </Button>\n                </div>\n              )}\n            </div>\n            );\n          })() : (\n            <div className=\"space-y-4\">\n              <div className=\"flex items-center justify-between\">\n                <div>\n                  <h3 className=\"text-lg font-semibold text-[var(--text-primary)]\">\n                    Free plan\n                  </h3>\n                  <p className=\"text-[var(--text-tertiary)]\">\n                    $0/month\n                  </p>\n                </div>\n              </div>\n\n              <div className=\"h-px bg-[var(--bg-muted)]\" />\n\n              <div className=\"text-sm text-[var(--text-tertiary)]\">\n                Activate a plan to unlock custom domains, lower transaction\n                fees, and the full set of growth tools.\n              </div>\n\n              <div className=\"pt-4 flex items-center justify-between border-t border-[var(--border-subtle)]\">\n                <Button\n                  variant=\"primary\"\n                  onClick={() => onNavigateTab('plan')}\n                >\n                  Upgrade plan\n                </Button>\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n\n      {/* Usage This Period — always shown so storage is visible from day one */}\n      <div className=\"bg-[var(--bg-base)] rounded-md border border-[var(--border-default)]\">\n        <div className=\"px-5 py-4 border-b border-[var(--border-subtle)] flex items-center justify-between\">\n          <h2 className=\"text-base font-medium text-[var(--text-primary)]\">\n            Usage this period\n          </h2>\n          {currentUsage && (\n            <span className=\"text-xs text-[var(--text-tertiary)]\">\n              {formatDate(currentUsage.period.start)} –{' '}\n              {formatDate(currentUsage.period.end)}\n            </span>\n          )}\n        </div>\n        <div className=\"divide-y divide-[var(--border-subtle)]\">\n          {/* Storage — always visible */}\n          <div className=\"px-5 py-4 text-sm\">\n            <div className=\"flex items-center justify-between mb-1.5\">\n              <div className=\"flex items-center gap-2 text-[var(--text-secondary)]\">\n                <HardDrive className=\"w-3.5 h-3.5\" />\n                <span>Image storage</span>\n                {addOnBytes > 0 && (\n                  <span className=\"text-xs text-brand-500 bg-brand-500/10 px-1.5 py-0.5 rounded\">\n                    +{formatBytes(addOnBytes)} purchased\n                  </span>\n                )}\n              </div>\n              <span className=\"text-xs text-[var(--text-tertiary)]\">\n                {formatBytes(storageUsedBytes)} of{' '}\n                {formatBytes(storageLimitBytes)} used\n              </span>\n            </div>\n            {storageFileCount > 0 && (\n              <p className=\"text-xs text-[var(--text-muted)] mb-1.5\">\n                {storageFileCount} {storageFileCount === 1 ? 'file' : 'files'}{' '}\n                uploaded this period\n              </p>\n            )}\n            <div className=\"w-full h-1.5 bg-[var(--bg-muted)] rounded-full overflow-hidden\">\n              <div\n                className={`h-full rounded-full transition-[width] duration-500 ${\n                  isOverBaseline\n                    ? 'bg-[var(--error)]'\n                    : isApproaching\n                      ? 'bg-[var(--warning)]'\n                      : 'bg-brand-500'\n                }`}\n                style={{\n                  width:\n                    storagePct === 0 ? '0%' : `${Math.max(storagePct, 1)}%`,\n                }}\n              />\n            </div>\n            {isApproaching && (\n              <p className=\"text-xs text-[var(--warning)] mt-1\">\n                Approaching your storage limit. Consider adding more storage.\n              </p>\n            )}\n            {isOverBaseline && (\n              <p className=\"text-xs text-[var(--error)] mt-1\">\n                You&apos;ve used {formatBytes(storageUsedBytes)} (\n                {formatBytes(storageLimitBytes)} limit). Overage of{' '}\n                {formatBytes(storageUsedBytes - storageLimitBytes)} will be\n                charged at end of month.\n              </p>\n            )}\n            <button\n              type=\"button\"\n              onClick={onBuyStorage}\n              disabled={buyStoragePending}\n              className=\"mt-2 flex items-center gap-1 text-xs text-brand-500 hover:text-brand-600 hover:underline disabled:opacity-50 cursor-pointer\"\n            >\n              <Plus className=\"w-3 h-3\" />\n              Buy more storage\n            </button>\n          </div>\n\n          {/* Bandwidth */}\n          <div className=\"px-5 py-4 text-sm border-t border-[var(--border-subtle)]\">\n            <div className=\"flex items-center justify-between\">\n              <div className=\"flex items-center gap-2 text-[var(--text-secondary)]\">\n                <Wifi className=\"w-3.5 h-3.5\" />\n                <span>Bandwidth</span>\n              </div>\n              <span className=\"text-xs text-[var(--text-tertiary)]\">\n                {bandwidthUsedBytes > 0\n                  ? `${formatBytes(bandwidthUsedBytes)} used this period`\n                  : '—'}\n              </span>\n            </div>\n            <p className=\"text-xs text-[var(--text-muted)] mt-1\">\n              Served via CDN. Detailed tracking coming soon.\n            </p>\n          </div>\n\n          {/* Messaging Credits */}\n          <div className=\"px-5 py-4 text-sm border-t border-[var(--border-subtle)]\">\n            <div className=\"flex items-center justify-between mb-1.5\">\n              <div className=\"flex items-center gap-2 text-[var(--text-secondary)]\">\n                <MessageSquare className=\"w-3.5 h-3.5\" />\n                <span>Messaging credits</span>\n              </div>\n              <span className=\"font-medium text-[var(--text-primary)]\">\n                {creditsInfo != null\n                  ? `${creditsInfo.balance.toLocaleString()} remaining`\n                  : '—'}\n              </span>\n            </div>\n\n            {creditsInfo && (\n              <>\n                {/* Usage bar */}\n                {creditsInfo.monthlyAllowance > 0 && (\n                  <>\n                    <div className=\"flex items-center justify-between text-xs text-[var(--text-muted)] mb-1\">\n                      <span>\n                        {creditsInfo.usedThisPeriod.toLocaleString()} of{' '}\n                        {creditsInfo.monthlyAllowance.toLocaleString()} included\n                        used\n                      </span>\n                    </div>\n                    <div className=\"w-full h-1.5 bg-[var(--bg-muted)] rounded-full overflow-hidden\">\n                      <div\n                        className={`h-full rounded-full transition-[width] duration-500 ${\n                          creditsInfo.overage > 0\n                            ? 'bg-[var(--error)]'\n                            : creditsInfo.usedThisPeriod /\n                                  creditsInfo.monthlyAllowance >=\n                                0.8\n                              ? 'bg-[var(--warning)]'\n                              : 'bg-brand-500'\n                        }`}\n                        style={{\n                          width: `${Math.min(100, Math.round((creditsInfo.usedThisPeriod / creditsInfo.monthlyAllowance) * 100))}%`,\n                        }}\n                      />\n                    </div>\n                  </>\n                )}\n\n                {/* Low balance warning */}\n                {creditsInfo.isLowBalance && creditsInfo.overage === 0 && (\n                  <p className=\"text-xs text-[var(--warning)] mt-1\">\n                    Low balance — top up to avoid message failures.\n                  </p>\n                )}\n\n                {/* Overage */}\n                {creditsInfo.overage > 0 && (\n                  <p className=\"text-xs text-[var(--error)] mt-1\">\n                    {creditsInfo.overage.toLocaleString()} credits over your\n                    included allowance. Est. a-la-carte charge:{' '}\n                    {formatCurrency(creditsInfo.overageCostNgn, 'NGN')}.\n                  </p>\n                )}\n              </>\n            )}\n\n            <button\n              type=\"button\"\n              onClick={onTopUpCredits}\n              disabled={topUpCreditsPending}\n              className=\"mt-2 flex items-center gap-1 text-xs text-brand-500 hover:text-brand-600 hover:underline disabled:opacity-50 cursor-pointer\"\n            >\n              <Plus className=\"w-3 h-3\" />\n              Top up credits\n            </button>\n          </div>\n\n          {/* Email Credits */}\n          <div className=\"px-5 py-4 text-sm border-t border-[var(--border-subtle)]\">\n            <div className=\"flex items-center justify-between mb-1.5\">\n              <div className=\"flex items-center gap-2 text-[var(--text-secondary)]\">\n                <Mail className=\"w-3.5 h-3.5\" />\n                <span>Email credits</span>\n              </div>\n              <span className=\"font-medium text-[var(--text-primary)]\">\n                {emailCreditsInfo != null\n                  ? `${emailCreditsInfo.balance.toLocaleString()} remaining`\n                  : '—'}\n              </span>\n            </div>\n\n            {emailCreditsInfo && (\n              <>\n                {emailCreditsInfo.monthlyAllowance > 0 && (\n                  <>\n                    <div className=\"flex items-center justify-between text-xs text-[var(--text-muted)] mb-1\">\n                      <span>\n                        {emailCreditsInfo.usedThisPeriod.toLocaleString()} of{' '}\n                        {emailCreditsInfo.monthlyAllowance.toLocaleString()}{' '}\n                        included used\n                      </span>\n                    </div>\n                    <div className=\"w-full h-1.5 bg-[var(--bg-muted)] rounded-full overflow-hidden\">\n                      <div\n                        className={`h-full rounded-full transition-[width] duration-500 ${\n                          emailCreditsInfo.usedThisPeriod /\n                            emailCreditsInfo.monthlyAllowance >=\n                          0.8\n                            ? 'bg-[var(--warning)]'\n                            : 'bg-brand-500'\n                        }`}\n                        style={{\n                          width: `${Math.min(100, Math.round((emailCreditsInfo.usedThisPeriod / emailCreditsInfo.monthlyAllowance) * 100))}%`,\n                        }}\n                      />\n                    </div>\n                  </>\n                )}\n\n                {emailCreditsInfo.isLowBalance && (\n                  <p className=\"text-xs text-[var(--warning)] mt-1\">\n                    Low balance — top up to keep emails sending.\n                  </p>\n                )}\n              </>\n            )}\n\n            <button\n              type=\"button\"\n              onClick={onTopUpEmailCredits}\n              disabled={topUpEmailCreditsPending}\n              className=\"mt-2 flex items-center gap-1 text-xs text-brand-500 hover:text-brand-600 hover:underline disabled:opacity-50 cursor-pointer\"\n            >\n              <Plus className=\"w-3 h-3\" />\n              Top up email credits\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/billing/payment-methods-tab.d.ts

@@ -0,0 +1,14 @@
+import type { PaymentMethod } from './helpers';
+interface PaymentMethodsTabProps {
+    paymentMethods: PaymentMethod[] | undefined;
+    paymentMethodsLoading: boolean;
+    deletingMethodId: string | null;
+    onSetDeletingMethodId: (id: string | null) => void;
+    onAddPaymentMethod: () => void;
+    addPaymentMethodPending: boolean;
+    onRemovePaymentMethod: (id: string) => void;
+    removePaymentMethodPending: boolean;
+    onSetDefaultPaymentMethod: (id: string) => void;
+}
+export declare function PaymentMethodsTab({ paymentMethods, paymentMethodsLoading, deletingMethodId, onSetDeletingMethodId, onAddPaymentMethod, addPaymentMethodPending, onRemovePaymentMethod, removePaymentMethodPending, onSetDefaultPaymentMethod, }: PaymentMethodsTabProps): import("react").JSX.Element;
+export {};

package/dist/billing/payment-methods-tab.js

@@ -0,0 +1,129 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@withpotter/ui-kit/button";
+import { Badge } from "@withpotter/ui-kit/badge";
+import { CreditCard, Plus, Trash2, Loader2 } from "lucide-react";
+import { BoxesLoader } from "@withpotter/ui-kit/boxes-loader";
+function PaymentMethodsTab({
+  paymentMethods,
+  paymentMethodsLoading,
+  deletingMethodId,
+  onSetDeletingMethodId,
+  onAddPaymentMethod,
+  addPaymentMethodPending,
+  onRemovePaymentMethod,
+  removePaymentMethodPending,
+  onSetDefaultPaymentMethod
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "space-y-6", children: /* @__PURE__ */ jsxs("div", { className: "bg-[var(--bg-base)] rounded-md border border-[var(--border-default)] overflow-x-auto", children: [
+    /* @__PURE__ */ jsxs("div", { className: "px-5 py-4 border-b border-[var(--border-subtle)] flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "p-2 rounded-md bg-[var(--accent-secondary)] text-brand-500", children: /* @__PURE__ */ jsx(CreditCard, { className: "w-5 h-5" }) }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-base font-medium text-[var(--text-primary)]", children: "Payment methods" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-tertiary)]", children: "Manage your saved payment methods" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          size: "sm",
+          onClick: onAddPaymentMethod,
+          disabled: addPaymentMethodPending,
+          children: [
+            /* @__PURE__ */ jsx(Plus, { className: "mr-2 h-4 w-4" }),
+            "Add card"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "p-5", children: paymentMethodsLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsx(BoxesLoader, {}) }) : paymentMethods?.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "py-8 text-center", children: [
+      /* @__PURE__ */ jsx(CreditCard, { className: "mx-auto h-12 w-12 text-[var(--text-muted)] mb-3" }),
+      /* @__PURE__ */ jsx("p", { className: "text-[var(--text-tertiary)] mb-4", children: "No payment methods saved yet" }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "secondary",
+          onClick: onAddPaymentMethod,
+          disabled: addPaymentMethodPending,
+          children: [
+            /* @__PURE__ */ jsx(Plus, { className: "mr-2 h-4 w-4" }),
+            "Add payment method"
+          ]
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx("div", { className: "space-y-3", children: paymentMethods?.map((method) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `flex items-center justify-between rounded-md border p-4 transition-colors ${deletingMethodId === method.id ? "border-[var(--error)]/20 bg-[var(--error-bg)]" : "border-[var(--border-default)]"}`,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx("div", { className: "p-2 rounded-md bg-[var(--bg-muted)]", children: /* @__PURE__ */ jsx(CreditCard, { className: "h-5 w-5 text-[var(--text-secondary)]" }) }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("p", { className: "font-medium text-[var(--text-primary)]", children: [
+                method.card?.brand,
+                " \u2022\u2022\u2022\u2022 ",
+                method.card?.last4
+              ] }),
+              /* @__PURE__ */ jsxs("p", { className: "text-sm text-[var(--text-tertiary)]", children: [
+                "Expires ",
+                method.card?.expMonth,
+                "/",
+                method.card?.expYear
+              ] })
+            ] }),
+            method.isDefault && /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: "Default" }),
+            method.isExpired && /* @__PURE__ */ jsx(Badge, { variant: "error", children: "Expired" })
+          ] }),
+          deletingMethodId === method.id ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--error)] mr-2", children: "Remove this card?" }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "secondary",
+                size: "sm",
+                onClick: () => onSetDeletingMethodId(null),
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "danger",
+                size: "sm",
+                onClick: () => onRemovePaymentMethod(method.id),
+                disabled: removePaymentMethodPending,
+                children: removePaymentMethodPending ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : "Remove"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+            !method.isDefault && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "secondary",
+                size: "sm",
+                onClick: () => onSetDefaultPaymentMethod(method.id),
+                children: "Set default"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                "aria-label": "Delete",
+                variant: "ghost",
+                size: "sm",
+                onClick: () => onSetDeletingMethodId(method.id),
+                className: "text-[var(--text-tertiary)] hover:text-[var(--error)] hover:bg-[var(--error-bg)]",
+                children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
+              }
+            )
+          ] })
+        ]
+      },
+      method.id
+    )) }) })
+  ] }) });
+}
+export {
+  PaymentMethodsTab
+};
+//# sourceMappingURL=payment-methods-tab.js.map

package/dist/billing/payment-methods-tab.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/billing/payment-methods-tab.tsx"],"sourcesContent":["import { Button } from '@withpotter/ui-kit/button';\nimport { Badge } from '@withpotter/ui-kit/badge';\nimport { CreditCard, Plus, Trash2, Loader2 } from 'lucide-react';\nimport { BoxesLoader } from '@withpotter/ui-kit/boxes-loader';\nimport type { PaymentMethod } from './helpers';\n\ninterface PaymentMethodsTabProps {\n  paymentMethods: PaymentMethod[] | undefined;\n  paymentMethodsLoading: boolean;\n  deletingMethodId: string | null;\n  onSetDeletingMethodId: (id: string | null) => void;\n  onAddPaymentMethod: () => void;\n  addPaymentMethodPending: boolean;\n  onRemovePaymentMethod: (id: string) => void;\n  removePaymentMethodPending: boolean;\n  onSetDefaultPaymentMethod: (id: string) => void;\n}\n\nexport function PaymentMethodsTab({\n  paymentMethods,\n  paymentMethodsLoading,\n  deletingMethodId,\n  onSetDeletingMethodId,\n  onAddPaymentMethod,\n  addPaymentMethodPending,\n  onRemovePaymentMethod,\n  removePaymentMethodPending,\n  onSetDefaultPaymentMethod,\n}: PaymentMethodsTabProps) {\n  return (\n    <div className=\"space-y-6\">\n      <div className=\"bg-[var(--bg-base)] rounded-md border border-[var(--border-default)] overflow-x-auto\">\n        <div className=\"px-5 py-4 border-b border-[var(--border-subtle)] flex items-center justify-between\">\n          <div className=\"flex items-center gap-3\">\n            <div className=\"p-2 rounded-md bg-[var(--accent-secondary)] text-brand-500\">\n              <CreditCard className=\"w-5 h-5\" />\n            </div>\n            <div>\n              <h2 className=\"text-base font-medium text-[var(--text-primary)]\">\n                Payment methods\n              </h2>\n              <p className=\"text-sm text-[var(--text-tertiary)]\">\n                Manage your saved payment methods\n              </p>\n            </div>\n          </div>\n          <Button\n            size=\"sm\"\n            onClick={onAddPaymentMethod}\n            disabled={addPaymentMethodPending}\n          >\n            <Plus className=\"mr-2 h-4 w-4\" />\n            Add card\n          </Button>\n        </div>\n\n        <div className=\"p-5\">\n          {paymentMethodsLoading ? (\n            <div className=\"flex items-center justify-center py-8\">\n              <BoxesLoader />\n            </div>\n          ) : paymentMethods?.length === 0 ? (\n            <div className=\"py-8 text-center\">\n              <CreditCard className=\"mx-auto h-12 w-12 text-[var(--text-muted)] mb-3\" />\n              <p className=\"text-[var(--text-tertiary)] mb-4\">\n                No payment methods saved yet\n              </p>\n              <Button\n                variant=\"secondary\"\n                onClick={onAddPaymentMethod}\n                disabled={addPaymentMethodPending}\n              >\n                <Plus className=\"mr-2 h-4 w-4\" />\n                Add payment method\n              </Button>\n            </div>\n          ) : (\n            <div className=\"space-y-3\">\n              {paymentMethods?.map((method) => (\n                <div\n                  key={method.id}\n                  className={`flex items-center justify-between rounded-md border p-4 transition-colors ${\n                    deletingMethodId === method.id\n                      ? 'border-[var(--error)]/20 bg-[var(--error-bg)]'\n                      : 'border-[var(--border-default)]'\n                  }`}\n                >\n                  <div className=\"flex items-center gap-3\">\n                    <div className=\"p-2 rounded-md bg-[var(--bg-muted)]\">\n                      <CreditCard className=\"h-5 w-5 text-[var(--text-secondary)]\" />\n                    </div>\n                    <div>\n                      <p className=\"font-medium text-[var(--text-primary)]\">\n                        {method.card?.brand} •••• {method.card?.last4}\n                      </p>\n                      <p className=\"text-sm text-[var(--text-tertiary)]\">\n                        Expires {method.card?.expMonth}/{method.card?.expYear}\n                      </p>\n                    </div>\n                    {method.isDefault && (\n                      <Badge variant=\"secondary\">Default</Badge>\n                    )}\n                    {method.isExpired && <Badge variant=\"error\">Expired</Badge>}\n                  </div>\n\n                  {deletingMethodId === method.id ? (\n                    <div className=\"flex items-center gap-2\">\n                      <span className=\"text-sm text-[var(--error)] mr-2\">\n                        Remove this card?\n                      </span>\n                      <Button\n                        variant=\"secondary\"\n                        size=\"sm\"\n                        onClick={() => onSetDeletingMethodId(null)}\n                      >\n                        Cancel\n                      </Button>\n                      <Button\n                        variant=\"danger\"\n                        size=\"sm\"\n                        onClick={() => onRemovePaymentMethod(method.id)}\n                        disabled={removePaymentMethodPending}\n                      >\n                        {removePaymentMethodPending ? (\n                          <Loader2 className=\"h-4 w-4 animate-spin\" />\n                        ) : (\n                          'Remove'\n                        )}\n                      </Button>\n                    </div>\n                  ) : (\n                    <div className=\"flex gap-2\">\n                      {!method.isDefault && (\n                        <Button\n                          variant=\"secondary\"\n                          size=\"sm\"\n                          onClick={() => onSetDefaultPaymentMethod(method.id)}\n                        >\n                          Set default\n                        </Button>\n                      )}\n                      <Button\n                        aria-label=\"Delete\"\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        onClick={() => onSetDeletingMethodId(method.id)}\n                        className=\"text-[var(--text-tertiary)] hover:text-[var(--error)] hover:bg-[var(--error-bg)]\"\n                      >\n                        <Trash2 className=\"h-4 w-4\" />\n                      </Button>\n                    </div>\n                  )}\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/billing/payments-tab.d.ts

@@ -0,0 +1,22 @@
+import type { PaymentMethod, Invoice } from './helpers';
+type PaymentsView = 'methods' | 'invoices';
+interface PaymentsTabProps {
+    paymentMethods: PaymentMethod[] | undefined;
+    paymentMethodsLoading: boolean;
+    deletingMethodId: string | null;
+    onSetDeletingMethodId: (id: string | null) => void;
+    onAddPaymentMethod: () => void;
+    addPaymentMethodPending: boolean;
+    onRemovePaymentMethod: (id: string) => void;
+    removePaymentMethodPending: boolean;
+    onSetDefaultPaymentMethod: (id: string) => void;
+    invoicesData: {
+        invoices: Invoice[];
+    } | undefined;
+    invoicesLoading: boolean;
+    formatCurrency: (amount: number, currency: string) => string;
+    onDownloadInvoice: (invoiceId: string, invoiceNumber: string) => void;
+    initialView?: PaymentsView;
+}
+export declare function PaymentsTab({ initialView, paymentMethods, paymentMethodsLoading, deletingMethodId, onSetDeletingMethodId, onAddPaymentMethod, addPaymentMethodPending, onRemovePaymentMethod, removePaymentMethodPending, onSetDefaultPaymentMethod, invoicesData, invoicesLoading, formatCurrency, onDownloadInvoice, }: PaymentsTabProps): import("react").JSX.Element;
+export {};