@withpotter/components 0.13.0-next.101

package/dist/mobile/screens/billing-flows.js

@@ -0,0 +1,1934 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { useMemo, useState } from "react";
+import { pickPlanPrice } from "@withpotter/lib/plan-price";
+import {
+  AlertTriangle,
+  ArrowRight,
+  Calculator,
+  Check,
+  CheckCircle2,
+  CreditCard,
+  Download,
+  Landmark,
+  Loader2,
+  Mail,
+  MessageCircle,
+  MessageSquare,
+  Percent,
+  Plus,
+  Receipt,
+  Smartphone,
+  Star,
+  Trash2,
+  TrendingUp
+} from "lucide-react";
+import {
+  BackBar,
+  BottomSheet,
+  MOBILE_BOTTOM_OFFSET_MIN,
+  StickyCtaBar,
+  stickyCtaScrollPadding,
+  TextField
+} from "@withpotter/components/mobile/primitives";
+import {
+  useMessagingData
+} from "@withpotter/hooks/use-messaging-data";
+import { Select } from "@withpotter/ui-kit/select";
+import {
+  BOX_HIDE_SMS,
+  BOX_HIDE_WHATSAPP,
+  phoneChannelsLabel
+} from "@withpotter/lib/box-channels";
+import { Button } from "@withpotter/ui-kit/button";
+import { Input } from "@withpotter/ui-kit";
+function MobileBillingPlanScreen({
+  plans,
+  subscription,
+  isPending,
+  onSubscribe,
+  onCancel,
+  onBack,
+  formatCurrency
+}) {
+  const sortedPlans = useMemo(() => {
+    return [...plans ?? []].sort((a, b) => {
+      const ap = pickPlanPrice(a.prices)?.amount ?? 0;
+      const bp = pickPlanPrice(b.prices)?.amount ?? 0;
+      return ap - bp;
+    });
+  }, [plans]);
+  const currentPlanId = subscription?.plan?.id;
+  const [selectedId, setSelectedId] = useState(
+    currentPlanId ?? sortedPlans.find((p) => (pickPlanPrice(p.prices)?.amount ?? 0) > 0)?.id ?? null
+  );
+  const selected = sortedPlans.find((p) => p.id === selectedId);
+  const selectedPrice = selected ? pickPlanPrice(selected.prices)?.amount ?? 0 : 0;
+  const isCurrent = selectedId === currentPlanId;
+  const cancelling = subscription?.cancellation?.cancelAtPeriodEnd;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex min-h-dvh flex-col",
+      style: { background: "var(--mb-canvas)" },
+      children: [
+        /* @__PURE__ */ jsx(BackBar, { title: "Plan", onBack }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex-1 overflow-y-auto px-4",
+            style: { paddingBottom: stickyCtaScrollPadding(false) },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "section",
+                {
+                  className: "mt-6 rounded-3xl border p-4",
+                  style: {
+                    borderColor: "color-mix(in srgb, var(--mb-accent) 28%, transparent)",
+                    background: "color-mix(in srgb, var(--mb-accent) 8%, transparent)"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: "text-2xs font-medium",
+                        style: { color: "var(--mb-accent)" },
+                        children: selected?.name ?? "Choose a plan"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: "mt-1 text-4xl font-bold leading-tight tabular-nums",
+                        style: { color: "var(--mb-text)" },
+                        children: selected ? formatCurrency(selectedPrice) : "\u2014"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: "mt-1 text-xs",
+                        style: { color: "var(--mb-text-secondary)" },
+                        children: selected?.description || "Per business \xB7 billed monthly"
+                      }
+                    ),
+                    cancelling && subscription?.cancellation?.endsAt && /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        className: "mt-3 rounded-2xl border p-4 text-2xs",
+                        style: {
+                          borderColor: "color-mix(in srgb, var(--mb-warn) 36%, transparent)",
+                          background: "color-mix(in srgb, var(--mb-warn) 10%, transparent)",
+                          color: "var(--mb-warn)"
+                        },
+                        children: [
+                          "Cancellation scheduled for",
+                          " ",
+                          new Date(subscription.cancellation.endsAt).toLocaleDateString()
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("section", { className: "mt-6 grid grid-cols-2 gap-2", children: sortedPlans.map((p) => {
+                const price = pickPlanPrice(p.prices)?.amount ?? 0;
+                const isActive = p.id === selectedId;
+                return /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    variant: "secondary",
+                    size: "icon",
+                    className: "text-left",
+                    onClick: () => setSelectedId(p.id),
+                    style: {
+                      borderColor: isActive ? "var(--mb-accent)" : "var(--mb-border)",
+                      background: isActive ? "color-mix(in srgb, var(--mb-accent) 8%, transparent)" : "var(--mb-card)"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "p",
+                        {
+                          className: "text-2xs font-medium",
+                          style: {
+                            color: isActive ? "var(--mb-accent)" : "var(--mb-text-tertiary)"
+                          },
+                          children: p.name
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "p",
+                        {
+                          className: "mt-1 text-2xl font-bold tabular-nums",
+                          style: { color: "var(--mb-text)" },
+                          children: price === 0 ? "Free" : formatCurrency(price)
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "p",
+                        {
+                          className: "mt-1 line-clamp-2 text-2xs",
+                          style: { color: "var(--mb-text-tertiary)" },
+                          children: p.description ?? `${p.interval} plan`
+                        }
+                      ),
+                      p.id === currentPlanId && /* @__PURE__ */ jsxs(
+                        "p",
+                        {
+                          className: "mt-2 inline-flex items-center gap-1 text-3xs font-semibold",
+                          style: { color: "var(--mb-good)" },
+                          children: [
+                            /* @__PURE__ */ jsx(CheckCircle2, {}),
+                            "Current"
+                          ]
+                        }
+                      )
+                    ]
+                  },
+                  p.id
+                );
+              }) }),
+              selected && /* @__PURE__ */ jsxs("section", { className: "mt-6 space-y-2", children: [
+                /* @__PURE__ */ jsxs(Caption, { children: [
+                  "Included in ",
+                  selected.name
+                ] }),
+                /* @__PURE__ */ jsx(FeatureRows, { features: selected.features })
+              ] }),
+              currentPlanId && !cancelling && /* @__PURE__ */ jsx("section", { className: "mt-6", children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onCancel,
+                  className: "flex h-11 w-full items-center justify-center rounded-2xl border text-sm font-medium",
+                  style: {
+                    borderColor: "color-mix(in srgb, var(--mb-bad) 32%, transparent)",
+                    background: "transparent",
+                    color: "var(--mb-bad)"
+                  },
+                  children: "Cancel subscription"
+                }
+              ) })
+            ]
+          }
+        ),
+        selected && !isCurrent && /* @__PURE__ */ jsx(StickyCtaBar, { respectTabBar: false, children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            disabled: isPending,
+            onClick: () => onSubscribe(selected.id),
+            className: "flex h-12 w-full items-center justify-center gap-2 rounded-2xl text-md font-semibold disabled:opacity-60",
+            style: {
+              background: "var(--mb-accent)",
+              color: "var(--mb-accent-fg)"
+            },
+            children: isPending ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              currentPlanId ? "Switch to" : "Subscribe to",
+              " ",
+              selected.name,
+              /* @__PURE__ */ jsx(ArrowRight, { className: "size-4" })
+            ] })
+          }
+        ) })
+      ]
+    }
+  );
+}
+function FeatureRows({
+  features
+}) {
+  const rows = Object.entries(features).filter(
+    ([, v]) => v !== false && v != null
+  );
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsx("p", { className: "text-xs", style: { color: "var(--mb-text-tertiary)" }, children: "Standard features included." });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "rounded-2xl border",
+      style: { borderColor: "var(--mb-border)", background: "var(--mb-card)" },
+      children: rows.map(([key, value], i) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center gap-3 px-4 py-3",
+          style: {
+            borderTop: i === 0 ? "none" : "1px solid var(--mb-border)"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              Check,
+              {
+                className: "size-4 shrink-0",
+                style: { color: "var(--mb-good)" }
+              }
+            ),
+            /* @__PURE__ */ jsxs("p", { className: "flex-1 text-sm", style: { color: "var(--mb-text)" }, children: [
+              humanizeKey(key),
+              typeof value !== "boolean" && value !== "" && /* @__PURE__ */ jsxs("span", { style: { color: "var(--mb-text-tertiary)" }, children: [
+                " ",
+                "\xB7 ",
+                String(value)
+              ] })
+            ] })
+          ]
+        },
+        key
+      ))
+    }
+  );
+}
+function humanizeKey(k) {
+  return k.replace(/[_-]+/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, (c) => c.toUpperCase());
+}
+function MobileBillingCreditsScreen({
+  channel,
+  messagingCredits,
+  emailCredits,
+  onTopUpMessaging,
+  onTopUpEmail,
+  onBack
+}) {
+  const isMessaging = channel === "messaging";
+  const info = isMessaging ? messagingCredits : emailCredits;
+  const onTopUp = isMessaging ? onTopUpMessaging : onTopUpEmail;
+  const title = isMessaging ? "Messaging credits" : "Email credits";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex min-h-dvh flex-col",
+      style: { background: "var(--mb-canvas)" },
+      children: [
+        /* @__PURE__ */ jsx(BackBar, { title, onBack }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex-1 overflow-y-auto px-4",
+            style: { paddingBottom: stickyCtaScrollPadding(false) },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "section",
+                {
+                  className: "mt-6 rounded-3xl border p-4",
+                  style: {
+                    borderColor: "var(--mb-border)",
+                    background: "var(--mb-card)"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: "text-2xs font-medium",
+                        style: { color: "var(--mb-text-tertiary)" },
+                        children: "Available balance"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: "mt-1 text-5xl font-bold leading-tight tabular-nums",
+                        style: { color: "var(--mb-text)" },
+                        children: (info?.balance ?? 0).toLocaleString()
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: "mt-1 text-xs",
+                        style: { color: "var(--mb-text-secondary)" },
+                        children: isMessaging ? `1 credit \u2248 1 ${(phoneChannelsLabel() ?? "SMS / WhatsApp").replace(" / ", " or 1 ")} message` : "1 credit = 1 email send"
+                      }
+                    ),
+                    info?.isLowBalance && /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        className: "mt-3 flex items-center gap-2 rounded-2xl border p-4 text-2xs",
+                        style: {
+                          borderColor: "color-mix(in srgb, var(--mb-warn) 36%, transparent)",
+                          background: "color-mix(in srgb, var(--mb-warn) 10%, transparent)",
+                          color: "var(--mb-warn)"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(AlertTriangle, {}),
+                          "Low balance \u2014 top up to keep sending"
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("section", { className: "mt-6 space-y-3", children: isMessaging ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                !BOX_HIDE_SMS && /* @__PURE__ */ jsx(
+                  ChannelRow,
+                  {
+                    icon: Smartphone,
+                    label: "SMS",
+                    balance: info?.balance ?? 0,
+                    allowance: info?.monthlyAllowance ?? 0,
+                    used: info?.usedThisPeriod ?? 0,
+                    color: "var(--mb-warn)"
+                  }
+                ),
+                !BOX_HIDE_WHATSAPP && /* @__PURE__ */ jsx(
+                  ChannelRow,
+                  {
+                    icon: MessageSquare,
+                    label: "WhatsApp",
+                    balance: info?.balance ?? 0,
+                    allowance: info?.monthlyAllowance ?? 0,
+                    used: info?.usedThisPeriod ?? 0,
+                    color: "var(--mb-good)"
+                  }
+                )
+              ] }) : /* @__PURE__ */ jsx(
+                ChannelRow,
+                {
+                  icon: Mail,
+                  label: "Email",
+                  balance: info?.balance ?? 0,
+                  allowance: info?.monthlyAllowance ?? 0,
+                  used: info?.usedThisPeriod ?? 0,
+                  color: "var(--mb-accent)"
+                }
+              ) }),
+              /* @__PURE__ */ jsxs("section", { className: "mt-6 grid grid-cols-2 gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  StatTile,
+                  {
+                    label: "Used this period",
+                    value: (info?.usedThisPeriod ?? 0).toLocaleString()
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  StatTile,
+                  {
+                    label: "Monthly allowance",
+                    value: (info?.monthlyAllowance ?? 0).toLocaleString()
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  StatTile,
+                  {
+                    label: "Total purchased",
+                    value: (info?.totalPurchased ?? 0).toLocaleString()
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  StatTile,
+                  {
+                    label: "Resets",
+                    value: info?.nextResetDate ? new Date(info.nextResetDate).toLocaleDateString(void 0, {
+                      month: "short",
+                      day: "numeric"
+                    }) : "\u2014"
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(StickyCtaBar, { respectTabBar: false, children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onTopUp,
+            className: "flex h-12 w-full items-center justify-center gap-2 rounded-2xl text-md font-semibold",
+            style: {
+              background: "var(--mb-accent)",
+              color: "var(--mb-accent-fg)"
+            },
+            children: [
+              /* @__PURE__ */ jsx(Plus, { className: "size-4" }),
+              "Top up ",
+              isMessaging ? "messaging" : "email",
+              " credits"
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+function ChannelRow({
+  icon: Icon,
+  label,
+  balance,
+  allowance,
+  used,
+  color
+}) {
+  const denom = Math.max(allowance, balance + used, 1);
+  const pct = Math.max(0, Math.min(100, Math.round(balance / denom * 100)));
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "rounded-2xl border p-4",
+      style: { borderColor: "var(--mb-border)", background: "var(--mb-card)" },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "flex h-9 w-9 items-center justify-center rounded-xl",
+              style: { background: "var(--mb-elevated)" },
+              children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4", style: { color } })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: "text-sm font-semibold",
+                style: { color: "var(--mb-text)" },
+                children: label
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "p",
+              {
+                className: "mt-0.5 text-2xs",
+                style: { color: "var(--mb-text-tertiary)" },
+                children: [
+                  used.toLocaleString(),
+                  " used this month"
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "text-base font-bold tabular-nums",
+              style: { color: "var(--mb-text)" },
+              children: balance.toLocaleString()
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "mt-3 h-1.5 w-full overflow-hidden rounded-full",
+            style: { background: "var(--mb-elevated)" },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  width: `${pct}%`,
+                  background: color,
+                  height: "100%"
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function MobileBillingTopUpScreen({
+  open,
+  onClose,
+  initialChannel,
+  messagingPacks,
+  emailPacks,
+  isPendingMessaging,
+  isPendingEmail,
+  onPurchaseMessaging,
+  onPurchaseEmail,
+  formatCurrency
+}) {
+  const [channel, setChannel] = useState(
+    initialChannel === "sms" && BOX_HIDE_SMS || initialChannel === "whatsapp" && BOX_HIDE_WHATSAPP ? "email" : initialChannel
+  );
+  const isEmail = channel === "email";
+  const packs = isEmail ? emailPacks : messagingPacks;
+  const [selectedCredits, setSelectedCredits] = useState(null);
+  React.useEffect(() => {
+    if (open) setChannel(initialChannel);
+  }, [open, initialChannel]);
+  React.useEffect(() => {
+    if (packs.length === 0) {
+      setSelectedCredits(null);
+      return;
+    }
+    setSelectedCredits(packs[1]?.credits ?? packs[0].credits);
+  }, [channel, packs]);
+  const selected = packs.find((p) => p.credits === selectedCredits);
+  const subtotal = selected?.priceNgn ?? 0;
+  const vat = Math.round(subtotal * 0.075 * 100) / 100;
+  const total = subtotal + vat;
+  const isPending = isEmail ? isPendingEmail : isPendingMessaging;
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "fixed inset-0 z-[90] flex flex-col",
+      style: { background: "var(--mb-canvas)" },
+      children: [
+        /* @__PURE__ */ jsx(BackBar, { title: "Top up", onBack: onClose }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex-1 overflow-y-auto px-4",
+            style: { paddingBottom: stickyCtaScrollPadding(false) },
+            children: [
+              /* @__PURE__ */ jsxs("section", { className: "mt-6", children: [
+                /* @__PURE__ */ jsx(Caption, { children: "Channel" }),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: `mt-2 grid gap-2 ${["", "grid-cols-1", "grid-cols-2", "grid-cols-3"][1 + (BOX_HIDE_SMS ? 0 : 1) + (BOX_HIDE_WHATSAPP ? 0 : 1)]}`,
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        ChannelPill,
+                        {
+                          icon: Mail,
+                          label: "Email",
+                          active: channel === "email",
+                          onClick: () => setChannel("email")
+                        }
+                      ),
+                      !BOX_HIDE_SMS && /* @__PURE__ */ jsx(
+                        ChannelPill,
+                        {
+                          icon: MessageCircle,
+                          label: "SMS",
+                          active: channel === "sms",
+                          onClick: () => setChannel("sms")
+                        }
+                      ),
+                      !BOX_HIDE_WHATSAPP && /* @__PURE__ */ jsx(
+                        ChannelPill,
+                        {
+                          icon: MessageSquare,
+                          label: "WhatsApp",
+                          active: channel === "whatsapp",
+                          onClick: () => setChannel("whatsapp")
+                        }
+                      )
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("section", { className: "mt-6 space-y-2", children: [
+                /* @__PURE__ */ jsx(Caption, { children: "Choose pack" }),
+                packs.length === 0 ? /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: "rounded-2xl border p-4 text-center text-xs",
+                    style: {
+                      borderColor: "var(--mb-border)",
+                      background: "var(--mb-card)",
+                      color: "var(--mb-text-tertiary)"
+                    },
+                    children: "No packs available right now."
+                  }
+                ) : packs.map((p, i) => {
+                  const isActive = p.credits === selectedCredits;
+                  const badge = i === 1 ? "Best value" : null;
+                  return /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setSelectedCredits(p.credits),
+                      className: "flex w-full items-center justify-between gap-3 rounded-2xl border p-4 text-left",
+                      style: {
+                        borderColor: isActive ? "var(--mb-accent)" : "var(--mb-border)",
+                        background: isActive ? "color-mix(in srgb, var(--mb-accent) 8%, transparent)" : "var(--mb-card)"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                            /* @__PURE__ */ jsx(
+                              "p",
+                              {
+                                className: "text-md font-semibold",
+                                style: { color: "var(--mb-text)" },
+                                children: p.label
+                              }
+                            ),
+                            badge && /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                className: "rounded-full px-2 py-0.5 text-3xs font-semibold",
+                                style: {
+                                  background: "color-mix(in srgb, var(--mb-good) 16%, transparent)",
+                                  color: "var(--mb-good)"
+                                },
+                                children: badge
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ jsxs(
+                            "p",
+                            {
+                              className: "mt-0.5 text-2xs",
+                              style: { color: "var(--mb-text-tertiary)" },
+                              children: [
+                                p.credits.toLocaleString(),
+                                " credits"
+                              ]
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsx(
+                          "p",
+                          {
+                            className: "text-lg font-bold tabular-nums",
+                            style: { color: "var(--mb-text)" },
+                            children: formatCurrency(p.priceNgn)
+                          }
+                        )
+                      ]
+                    },
+                    `${p.label}-${p.credits}`
+                  );
+                })
+              ] }),
+              selected && /* @__PURE__ */ jsxs(
+                "section",
+                {
+                  className: "mt-6 rounded-2xl border",
+                  style: {
+                    borderColor: "var(--mb-border)",
+                    background: "var(--mb-card)"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      SummaryRow,
+                      {
+                        label: `${selected.label} pack`,
+                        value: formatCurrency(subtotal)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(RowDivider, {}),
+                    /* @__PURE__ */ jsx(SummaryRow, { label: "VAT (7.5%)", value: formatCurrency(vat) }),
+                    /* @__PURE__ */ jsx(RowDivider, {}),
+                    /* @__PURE__ */ jsx(SummaryRow, { label: "Total", value: formatCurrency(total), emphasis: true })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          StickyCtaBar,
+          {
+            respectTabBar: false,
+            className: "px-3",
+            style: { background: "transparent" },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "rounded-[26px] border p-2",
+                style: {
+                  borderColor: "var(--mb-border)",
+                  background: "color-mix(in srgb, var(--mb-card) 95%, transparent)",
+                  backdropFilter: "blur(12px)",
+                  WebkitBackdropFilter: "blur(12px)"
+                },
+                children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    disabled: isPending || !selected,
+                    onClick: () => {
+                      if (!selected) return;
+                      if (isEmail) onPurchaseEmail(selected.credits);
+                      else onPurchaseMessaging(selected.credits);
+                    },
+                    className: "flex h-12 w-full items-center justify-center gap-2 rounded-2xl text-md font-semibold disabled:opacity-60",
+                    style: {
+                      background: "var(--mb-accent)",
+                      color: "var(--mb-accent-fg)"
+                    },
+                    children: isPending ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                      "Pay ",
+                      selected ? formatCurrency(total) : "",
+                      /* @__PURE__ */ jsx(ArrowRight, { className: "size-4" })
+                    ] })
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function ChannelPill({
+  icon: Icon,
+  label,
+  active,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: "flex h-16 flex-col items-center justify-center gap-1 rounded-2xl border text-2xs font-semibold",
+      style: {
+        borderColor: active ? "var(--mb-accent)" : "var(--mb-border)",
+        background: active ? "color-mix(in srgb, var(--mb-accent) 10%, transparent)" : "var(--mb-card)",
+        color: active ? "var(--mb-accent)" : "var(--mb-text-secondary)"
+      },
+      children: [
+        /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }),
+        label
+      ]
+    }
+  );
+}
+function SummaryRow({
+  label,
+  value,
+  emphasis
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "text-xs",
+        style: {
+          color: emphasis ? "var(--mb-text)" : "var(--mb-text-tertiary)",
+          fontWeight: emphasis ? 600 : 400
+        },
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "tabular-nums",
+        style: {
+          color: "var(--mb-text)",
+          fontSize: emphasis ? 15 : 13,
+          fontWeight: emphasis ? 700 : 500
+        },
+        children: value
+      }
+    )
+  ] });
+}
+function RowDivider() {
+  return /* @__PURE__ */ jsx("div", { style: { height: 1, background: "var(--mb-border)" } });
+}
+function formatMobileMinorCurrency(valueCents, currency, formatCurrency) {
+  return formatCurrency(Math.round(valueCents / 100), currency);
+}
+function formatMobileBps(bps) {
+  return `${(bps / 100).toFixed(bps % 100 === 0 ? 0 : 2)}%`;
+}
+function MobileBillingInvoicesScreen({
+  invoices,
+  loading,
+  subscription,
+  onDownload,
+  onBack,
+  formatCurrency
+}) {
+  const plan = subscription?.plan;
+  const planPrice = plan ? pickPlanPrice(plan.prices)?.amount ?? 0 : 0;
+  const renewsAt = subscription?.currentPeriod?.end;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex min-h-dvh flex-col",
+      style: { background: "var(--mb-canvas)" },
+      children: [
+        /* @__PURE__ */ jsx(BackBar, { title: "Invoices", onBack }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex-1 overflow-y-auto px-4",
+            style: { paddingBottom: MOBILE_BOTTOM_OFFSET_MIN },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "section",
+                {
+                  className: "mt-6 rounded-3xl border p-4",
+                  style: {
+                    borderColor: "var(--mb-border)",
+                    background: "var(--mb-card)"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: "text-2xs font-medium",
+                        style: { color: "var(--mb-text-tertiary)" },
+                        children: "Current cycle"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: "mt-1 text-4xl font-bold leading-tight tabular-nums",
+                        style: { color: "var(--mb-text)" },
+                        children: plan ? formatCurrency(planPrice) : "\u2014"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: "mt-1 text-xs",
+                        style: { color: "var(--mb-text-secondary)" },
+                        children: renewsAt ? `Next invoice \xB7 ${new Date(renewsAt).toLocaleDateString(void 0, { month: "short", day: "numeric" })}` : "No upcoming invoice"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("section", { className: "mt-6 space-y-2", children: [
+                /* @__PURE__ */ jsx(Caption, { children: "Documents" }),
+                loading ? /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: "py-6 text-center text-xs",
+                    style: { color: "var(--mb-text-tertiary)" },
+                    children: "Loading\u2026"
+                  }
+                ) : invoices.length === 0 ? /* @__PURE__ */ jsx(
+                  EmptyCard,
+                  {
+                    icon: Receipt,
+                    title: "No invoices yet",
+                    hint: "Once you're billed, your receipts will appear here"
+                  }
+                ) : invoices.map((inv) => /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => onDownload(inv.id, inv.invoiceNumber),
+                    className: "flex w-full items-center gap-3 rounded-2xl border p-4 text-left",
+                    style: {
+                      borderColor: "var(--mb-border)",
+                      background: "var(--mb-card)"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl",
+                          style: { background: "var(--mb-elevated)" },
+                          children: /* @__PURE__ */ jsx(
+                            Receipt,
+                            {
+                              className: "size-4",
+                              style: { color: "var(--mb-text-secondary)" }
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                        /* @__PURE__ */ jsx(
+                          "p",
+                          {
+                            className: "truncate text-sm font-semibold",
+                            style: { color: "var(--mb-text)" },
+                            children: inv.invoiceNumber
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs(
+                          "p",
+                          {
+                            className: "mt-0.5 truncate text-2xs",
+                            style: { color: "var(--mb-text-tertiary)" },
+                            children: [
+                              new Date(inv.createdAt).toLocaleDateString(void 0, {
+                                month: "short",
+                                day: "numeric",
+                                year: "numeric"
+                              }),
+                              " \xB7 ",
+                              /* @__PURE__ */ jsx("span", { style: { textTransform: "capitalize" }, children: inv.status })
+                            ]
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-col items-end gap-1", children: [
+                        /* @__PURE__ */ jsx(
+                          "p",
+                          {
+                            className: "text-md font-semibold tabular-nums",
+                            style: { color: "var(--mb-text)" },
+                            children: formatCurrency(inv.amounts.total, inv.amounts.currency)
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(Download, { style: { color: "var(--mb-text-muted)" } })
+                      ] })
+                    ]
+                  },
+                  inv.id
+                ))
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function MobileBillingUsageScreen({
+  onBack
+}) {
+  const {
+    loading,
+    transactions,
+    transactionTotal,
+    usageStats,
+    formatDate,
+    getTransactionTypeLabel,
+    getTransactionIcon
+  } = useMessagingData();
+  const [period, setPeriod] = useState("30d");
+  const totalSends = (usageStats?.smsCount ?? 0) + (usageStats?.whatsappCount ?? 0);
+  const totalSpend = (usageStats?.smsCredits ?? 0) + (usageStats?.whatsappCredits ?? 0);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex min-h-dvh flex-col",
+      style: { background: "var(--mb-canvas)" },
+      children: [
+        /* @__PURE__ */ jsx(BackBar, { title: "Usage", onBack }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex-1 overflow-y-auto px-4",
+            style: { paddingBottom: MOBILE_BOTTOM_OFFSET_MIN },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "mt-3 flex gap-1 rounded-full p-1",
+                  style: { background: "var(--mb-elevated)" },
+                  children: ["7d", "30d", "90d"].map((k) => /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setPeriod(k),
+                      className: "flex-1 rounded-full px-2 py-1.5 text-xs font-medium",
+                      style: {
+                        background: period === k ? "var(--mb-card)" : "transparent",
+                        color: period === k ? "var(--mb-text)" : "var(--mb-text-tertiary)"
+                      },
+                      children: k === "7d" ? "Last 7 days" : k === "30d" ? "Last 30 days" : "Last 90 days"
+                    },
+                    k
+                  ))
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "section",
+                {
+                  className: "mt-6 rounded-3xl border p-4",
+                  style: {
+                    borderColor: "var(--mb-border)",
+                    background: "var(--mb-card)"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: "text-2xs font-medium",
+                        style: { color: "var(--mb-text-tertiary)" },
+                        children: "Credits used"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: "mt-1 text-4xl font-bold leading-tight tabular-nums",
+                        style: { color: "var(--mb-text)" },
+                        children: totalSpend.toLocaleString()
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      "p",
+                      {
+                        className: "mt-1 text-xs",
+                        style: { color: "var(--mb-text-secondary)" },
+                        children: [
+                          totalSends.toLocaleString(),
+                          " sends \xB7 ",
+                          transactionTotal,
+                          " ledger entries"
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("section", { className: "mt-6 space-y-3", children: [
+                /* @__PURE__ */ jsx(Caption, { children: "By channel" }),
+                !BOX_HIDE_SMS && /* @__PURE__ */ jsx(
+                  BreakdownBar,
+                  {
+                    label: "SMS",
+                    sends: usageStats?.smsCount ?? 0,
+                    credits: usageStats?.smsCredits ?? 0,
+                    total: totalSpend,
+                    color: "var(--mb-warn)"
+                  }
+                ),
+                !BOX_HIDE_WHATSAPP && /* @__PURE__ */ jsx(
+                  BreakdownBar,
+                  {
+                    label: "WhatsApp",
+                    sends: usageStats?.whatsappCount ?? 0,
+                    credits: usageStats?.whatsappCredits ?? 0,
+                    total: totalSpend,
+                    color: "var(--mb-good)"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("section", { className: "mt-6 space-y-2", children: [
+                /* @__PURE__ */ jsx(Caption, { children: "Recent activity" }),
+                loading ? /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: "py-6 text-center text-xs",
+                    style: { color: "var(--mb-text-tertiary)" },
+                    children: "Loading\u2026"
+                  }
+                ) : transactions.length === 0 ? /* @__PURE__ */ jsx(
+                  EmptyCard,
+                  {
+                    icon: TrendingUp,
+                    title: "No activity yet",
+                    hint: "Send a campaign or top up to see ledger entries here"
+                  }
+                ) : transactions.slice(0, 12).map((tx) => /* @__PURE__ */ jsx(
+                  ActivityRow,
+                  {
+                    tx,
+                    formatDate,
+                    getLabel: getTransactionTypeLabel,
+                    getIcon: getTransactionIcon
+                  },
+                  tx.id
+                ))
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function BreakdownBar({
+  label,
+  sends,
+  credits,
+  total,
+  color
+}) {
+  const pct = total > 0 ? Math.max(0, Math.min(100, Math.round(credits / total * 100))) : 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "rounded-2xl border p-4",
+      style: { borderColor: "var(--mb-border)", background: "var(--mb-card)" },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+          /* @__PURE__ */ jsx("span", { style: { color: "var(--mb-text)" }, children: label }),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "tabular-nums",
+              style: { color: "var(--mb-text-tertiary)" },
+              children: [
+                sends.toLocaleString(),
+                " sends \xB7 ",
+                credits.toLocaleString(),
+                " credits"
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "mt-2 h-1.5 w-full overflow-hidden rounded-full",
+            style: { background: "var(--mb-elevated)" },
+            children: /* @__PURE__ */ jsx("div", { style: { width: `${pct}%`, background: color, height: "100%" } })
+          }
+        )
+      ]
+    }
+  );
+}
+function ActivityRow({
+  tx,
+  formatDate,
+  getLabel,
+  getIcon
+}) {
+  const Icon = getIcon(tx.type);
+  const isAdd = tx.amount > 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex items-center gap-3 rounded-2xl border p-4",
+      style: { borderColor: "var(--mb-border)", background: "var(--mb-card)" },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-xl",
+            style: { background: "var(--mb-elevated)" },
+            children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "truncate text-sm font-medium",
+              style: { color: "var(--mb-text)" },
+              children: getLabel(tx.type)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "mt-0.5 truncate text-2xs",
+              style: { color: "var(--mb-text-tertiary)" },
+              children: tx.description || formatDate(tx.createdAt)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "p",
+          {
+            className: "text-sm font-semibold tabular-nums",
+            style: {
+              color: isAdd ? "var(--mb-good)" : "var(--mb-text)"
+            },
+            children: [
+              isAdd ? "+" : "",
+              tx.amount.toLocaleString()
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+const MOBILE_FEE_CATEGORIES = [
+  { value: "selling", label: "Selling" },
+  { value: "bookings", label: "Bookings" },
+  { value: "digital", label: "Digital" },
+  { value: "consultations", label: "Consultations" },
+  { value: "events", label: "Events" }
+];
+function MobileBillingRatesScreen({
+  policy,
+  ledgerSummary,
+  policyLoading,
+  ledgerLoading,
+  previewResult,
+  previewPending,
+  onPreview,
+  onBack,
+  formatCurrency
+}) {
+  const [category, setCategory] = useState("selling");
+  const [amount, setAmount] = useState("10000");
+  const currency = policy?.policy.currency ?? ledgerSummary?.context.currency ?? "NGN";
+  const selectedRule = policy?.policy.rules.platform_fee[category];
+  const totals = previewResult?.calculation.totals;
+  const runPreview = () => {
+    const amountValue = Number(amount.replace(/,/g, ""));
+    if (!Number.isFinite(amountValue) || amountValue < 0) return;
+    onPreview({
+      lineItems: [
+        {
+          id: "mobile-preview",
+          category,
+          grossCents: Math.round(amountValue * 100)
+        }
+      ]
+    });
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex min-h-dvh flex-col",
+      style: { background: "var(--mb-canvas)" },
+      children: [
+        /* @__PURE__ */ jsx(BackBar, { title: "Rates", onBack }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex-1 overflow-y-auto px-4",
+            style: { paddingBottom: MOBILE_BOTTOM_OFFSET_MIN },
+            children: [
+              /* @__PURE__ */ jsx(
+                "section",
+                {
+                  className: "mt-6 rounded-3xl border p-4",
+                  style: {
+                    borderColor: "color-mix(in srgb, var(--mb-accent) 28%, transparent)",
+                    background: "color-mix(in srgb, var(--mb-accent) 8%, transparent)"
+                  },
+                  children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                      /* @__PURE__ */ jsx(
+                        "p",
+                        {
+                          className: "text-2xs font-medium",
+                          style: { color: "var(--mb-accent)" },
+                          children: policyLoading ? "Loading policy" : `Policy v${policy?.policy.version ?? "\u2014"}`
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "p",
+                        {
+                          className: "mt-1 text-4xl font-bold leading-tight tabular-nums",
+                          style: { color: "var(--mb-text)" },
+                          children: selectedRule ? formatMobileBps(selectedRule.rate_bps) : "\u2014"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "p",
+                        {
+                          className: "mt-1 text-xs",
+                          style: { color: "var(--mb-text-secondary)" },
+                          children: policy ? `${policy.policy.region} \xB7 ${policy.policy.tier} \xB7 ${currency}` : "Current business rate"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl",
+                        style: { background: "var(--mb-elevated)" },
+                        children: /* @__PURE__ */ jsx(
+                          Percent,
+                          {
+                            className: "size-5",
+                            style: { color: "var(--mb-accent)" }
+                          }
+                        )
+                      }
+                    )
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsxs("section", { className: "mt-6 space-y-3", children: [
+                /* @__PURE__ */ jsx(Caption, { children: "Preview" }),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "rounded-2xl border p-4",
+                    style: {
+                      borderColor: "var(--mb-border)",
+                      background: "var(--mb-card)"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+                        /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            className: "text-2xs",
+                            style: { color: "var(--mb-text-tertiary)" },
+                            children: [
+                              "Category",
+                              /* @__PURE__ */ jsx(
+                                Select,
+                                {
+                                  value: category,
+                                  onChange: (next) => setCategory(next),
+                                  options: MOBILE_FEE_CATEGORIES,
+                                  ariaLabel: "Category",
+                                  searchable: MOBILE_FEE_CATEGORIES.length > 15,
+                                  className: "mt-1.5"
+                                }
+                              )
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs(
+                          "label",
+                          {
+                            className: "text-2xs",
+                            style: { color: "var(--mb-text-tertiary)" },
+                            children: [
+                              "Amount",
+                              /* @__PURE__ */ jsx(
+                                Input,
+                                {
+                                  value: amount,
+                                  onChange: (event) => setAmount(event.target.value),
+                                  inputMode: "decimal",
+                                  className: "h-11 w-full",
+                                  style: {
+                                    borderColor: "var(--mb-border)",
+                                    background: "var(--mb-elevated)",
+                                    color: "var(--mb-text)"
+                                  }
+                                }
+                              )
+                            ]
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          disabled: !policy || previewPending,
+                          onClick: runPreview,
+                          className: "mt-3 flex h-11 w-full items-center justify-center gap-2 rounded-2xl text-sm font-semibold disabled:opacity-60",
+                          style: {
+                            background: "var(--mb-accent)",
+                            color: "var(--mb-accent-fg)"
+                          },
+                          children: [
+                            previewPending ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsx(Calculator, { className: "size-4" }),
+                            "Calculate fees"
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                )
+              ] }),
+              totals && /* @__PURE__ */ jsxs("section", { className: "mt-6 grid grid-cols-2 gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  StatTile,
+                  {
+                    label: "Platform fee",
+                    value: formatMobileMinorCurrency(
+                      totals.platformFeeCents,
+                      currency,
+                      formatCurrency
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  StatTile,
+                  {
+                    label: "Settlement",
+                    value: formatMobileMinorCurrency(
+                      totals.settlementFeeCents,
+                      currency,
+                      formatCurrency
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  StatTile,
+                  {
+                    label: "VAT",
+                    value: formatMobileMinorCurrency(
+                      totals.vatCents,
+                      currency,
+                      formatCurrency
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  StatTile,
+                  {
+                    label: "Total fees",
+                    value: formatMobileMinorCurrency(
+                      totals.platformFeeCents + totals.settlementFeeCents + totals.vatCents,
+                      currency,
+                      formatCurrency
+                    )
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("section", { className: "mt-6 grid grid-cols-2 gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  StatTile,
+                  {
+                    label: "Gross tracked",
+                    value: formatMobileMinorCurrency(
+                      ledgerSummary?.totals.grossCents ?? 0,
+                      currency,
+                      formatCurrency
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  StatTile,
+                  {
+                    label: "Platform fees",
+                    value: formatMobileMinorCurrency(
+                      ledgerSummary?.totals.platformFeeCents ?? 0,
+                      currency,
+                      formatCurrency
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  StatTile,
+                  {
+                    label: "Rev share",
+                    value: formatMobileMinorCurrency(
+                      ledgerSummary?.totals.revShareCents ?? 0,
+                      currency,
+                      formatCurrency
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  StatTile,
+                  {
+                    label: "Entries",
+                    value: ledgerLoading ? "\u2026" : (ledgerSummary?.totals.feeLedgerEntries ?? 0).toLocaleString()
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("section", { className: "mt-6 space-y-2", children: [
+                /* @__PURE__ */ jsx(Caption, { children: "Recent fees" }),
+                (ledgerSummary?.recentFees ?? []).slice(0, 8).map((fee) => /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "flex items-center gap-3 rounded-2xl border p-4",
+                    style: {
+                      borderColor: "var(--mb-border)",
+                      background: "var(--mb-card)"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-xl",
+                          style: { background: "var(--mb-elevated)" },
+                          children: /* @__PURE__ */ jsx(
+                            Landmark,
+                            {
+                              className: "size-4",
+                              style: { color: "var(--mb-text-secondary)" }
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                        /* @__PURE__ */ jsx(
+                          "p",
+                          {
+                            className: "truncate text-sm font-medium capitalize",
+                            style: { color: "var(--mb-text)" },
+                            children: fee.category
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "p",
+                          {
+                            className: "mt-0.5 truncate text-2xs",
+                            style: { color: "var(--mb-text-tertiary)" },
+                            children: new Date(fee.createdAt).toLocaleDateString(void 0, {
+                              month: "short",
+                              day: "numeric"
+                            })
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        "p",
+                        {
+                          className: "text-sm font-semibold tabular-nums",
+                          style: { color: "var(--mb-text)" },
+                          children: formatMobileMinorCurrency(
+                            fee.platformFeeCents + fee.vatCents,
+                            currency,
+                            formatCurrency
+                          )
+                        }
+                      )
+                    ]
+                  },
+                  fee.id
+                )),
+                !ledgerLoading && (ledgerSummary?.recentFees.length ?? 0) === 0 && /* @__PURE__ */ jsx(
+                  EmptyCard,
+                  {
+                    icon: Receipt,
+                    title: "No fees yet",
+                    hint: "Paid orders and bookings will appear here"
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function MobileBillingPaymentMethodsScreen({
+  paymentMethods,
+  loading,
+  onAdd,
+  addPending,
+  onRemove,
+  removePending,
+  deletingId,
+  onSetDeletingId,
+  onSetDefault,
+  onBack
+}) {
+  const list = paymentMethods ?? [];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex min-h-dvh flex-col",
+      style: { background: "var(--mb-canvas)" },
+      children: [
+        /* @__PURE__ */ jsx(BackBar, { title: "Payment method", onBack }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex-1 overflow-y-auto px-4",
+            style: { paddingBottom: stickyCtaScrollPadding(false) },
+            children: /* @__PURE__ */ jsx("section", { className: "mt-6 space-y-2", children: loading ? /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: "py-6 text-center text-xs",
+                style: { color: "var(--mb-text-tertiary)" },
+                children: "Loading\u2026"
+              }
+            ) : list.length === 0 ? /* @__PURE__ */ jsx(
+              EmptyCard,
+              {
+                icon: CreditCard,
+                title: "No payment methods",
+                hint: "Add a card to keep your plan active"
+              }
+            ) : list.map((pm) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "flex items-center gap-3 rounded-2xl border p-4",
+                style: {
+                  borderColor: pm.isDefault ? "var(--mb-accent)" : "var(--mb-border)",
+                  background: "var(--mb-card)"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl",
+                      style: { background: "var(--mb-elevated)" },
+                      children: /* @__PURE__ */ jsx(
+                        CreditCard,
+                        {
+                          className: "size-4",
+                          style: { color: "var(--mb-text-secondary)" }
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsxs(
+                        "p",
+                        {
+                          className: "truncate text-sm font-semibold capitalize",
+                          style: { color: "var(--mb-text)" },
+                          children: [
+                            pm.card?.brand ?? pm.type,
+                            " \xB7\xB7\xB7\xB7",
+                            pm.card?.last4 ?? "\u2022\u2022\u2022\u2022"
+                          ]
+                        }
+                      ),
+                      pm.isDefault && /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "rounded-full px-2 py-0.5 text-3xs font-semibold",
+                          style: {
+                            background: "color-mix(in srgb, var(--mb-good) 16%, transparent)",
+                            color: "var(--mb-good)"
+                          },
+                          children: "Default"
+                        }
+                      ),
+                      pm.isExpired && /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "rounded-full px-2 py-0.5 text-3xs font-semibold",
+                          style: {
+                            background: "color-mix(in srgb, var(--mb-bad) 14%, transparent)",
+                            color: "var(--mb-bad)"
+                          },
+                          children: "Expired"
+                        }
+                      )
+                    ] }),
+                    pm.card && /* @__PURE__ */ jsxs(
+                      "p",
+                      {
+                        className: "mt-0.5 truncate text-2xs",
+                        style: { color: "var(--mb-text-tertiary)" },
+                        children: [
+                          "Expires ",
+                          String(pm.card.expMonth).padStart(2, "0"),
+                          "/",
+                          String(pm.card.expYear).slice(-2)
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+                    !pm.isDefault && /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => onSetDefault(pm.id),
+                        "aria-label": "Set default",
+                        className: "flex h-8 w-8 items-center justify-center rounded-full",
+                        style: { background: "var(--mb-elevated)" },
+                        children: /* @__PURE__ */ jsx(Star, { style: { color: "var(--mb-text-secondary)" } })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => onSetDeletingId(pm.id),
+                        "aria-label": "Remove",
+                        className: "flex h-8 w-8 items-center justify-center rounded-full",
+                        style: { background: "var(--mb-elevated)" },
+                        children: /* @__PURE__ */ jsx(Trash2, { style: { color: "var(--mb-bad)" } })
+                      }
+                    )
+                  ] })
+                ]
+              },
+              pm.id
+            )) })
+          }
+        ),
+        /* @__PURE__ */ jsx(StickyCtaBar, { respectTabBar: false, children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            disabled: addPending,
+            onClick: onAdd,
+            className: "flex h-12 w-full items-center justify-center gap-2 rounded-2xl text-md font-semibold disabled:opacity-60",
+            style: {
+              background: "var(--mb-accent)",
+              color: "var(--mb-accent-fg)"
+            },
+            children: addPending ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Plus, { className: "size-4" }),
+              "Add payment method"
+            ] })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(BottomSheet, { open: !!deletingId, onClose: () => onSetDeletingId(null), children: /* @__PURE__ */ jsxs("div", { className: "px-1 pb-1", children: [
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "text-base font-semibold",
+              style: { color: "var(--mb-text)" },
+              children: "Remove this payment method?"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "mt-1 text-xs",
+              style: { color: "var(--mb-text-tertiary)" },
+              children: "You can add a new card any time. If this is your default, your subscription may fail to renew."
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "mt-4 flex gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => onSetDeletingId(null),
+                className: "flex h-11 flex-1 items-center justify-center rounded-2xl text-sm font-medium",
+                style: {
+                  background: "var(--mb-elevated)",
+                  color: "var(--mb-text)"
+                },
+                children: "Keep"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                disabled: removePending,
+                onClick: () => deletingId && onRemove(deletingId),
+                className: "flex h-11 flex-1 items-center justify-center gap-2 rounded-2xl text-sm font-semibold disabled:opacity-60",
+                style: {
+                  background: "var(--mb-bad)",
+                  color: "var(--mb-accent-fg)"
+                },
+                children: removePending ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }) : "Remove"
+              }
+            )
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
+function MobileCancelSubscriptionSheet({
+  open,
+  onClose,
+  onConfirm,
+  isPending,
+  endsAt
+}) {
+  const [reason, setReason] = useState("");
+  return /* @__PURE__ */ jsx(BottomSheet, { open, onClose, children: /* @__PURE__ */ jsxs("div", { className: "px-1 pb-1", children: [
+    /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: "text-base font-semibold",
+        style: { color: "var(--mb-text)" },
+        children: "Cancel subscription?"
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "p",
+      {
+        className: "mt-1 text-xs",
+        style: { color: "var(--mb-text-tertiary)" },
+        children: [
+          "You'll keep access until",
+          endsAt ? ` ${new Date(endsAt).toLocaleDateString()}` : " the end of the current period",
+          ". You can reactivate any time before then."
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "label",
+      {
+        className: "mt-4 block text-2xs font-medium",
+        style: { color: "var(--mb-text-tertiary)" },
+        children: "Reason (optional)"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TextField,
+      {
+        className: "mt-1",
+        multiline: true,
+        value: reason,
+        onChange: setReason,
+        placeholder: "Help us improve\u2026"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "mt-4 flex gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onClose,
+          className: "flex h-11 flex-1 items-center justify-center rounded-2xl text-sm font-medium",
+          style: {
+            background: "var(--mb-elevated)",
+            color: "var(--mb-text)"
+          },
+          children: "Keep plan"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          disabled: isPending,
+          onClick: () => onConfirm(reason.trim() || void 0),
+          className: "flex h-11 flex-1 items-center justify-center gap-2 rounded-2xl text-sm font-semibold disabled:opacity-60",
+          style: {
+            background: "var(--mb-bad)",
+            color: "var(--mb-accent-fg)"
+          },
+          children: isPending ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }) : "Confirm cancel"
+        }
+      )
+    ] })
+  ] }) });
+}
+function Caption({ children }) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: "text-3xs font-medium",
+      style: { color: "var(--mb-text-tertiary)" },
+      children
+    }
+  );
+}
+function StatTile({ label, value }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "rounded-2xl border p-4",
+      style: { borderColor: "var(--mb-border)", background: "var(--mb-card)" },
+      children: [
+        /* @__PURE__ */ jsx("p", { className: "text-2xs", style: { color: "var(--mb-text-tertiary)" }, children: label }),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "mt-1 text-base font-bold tabular-nums",
+            style: { color: "var(--mb-text)" },
+            children: value
+          }
+        )
+      ]
+    }
+  );
+}
+function EmptyCard({
+  icon: Icon,
+  title,
+  hint
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "rounded-2xl border p-8 text-center",
+      style: { borderColor: "var(--mb-border)", background: "var(--mb-card)" },
+      children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            className: "mx-auto h-8 w-8",
+            style: { color: "var(--mb-text-muted)" }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "mt-2 text-sm font-semibold",
+            style: { color: "var(--mb-text)" },
+            children: title
+          }
+        ),
+        hint && /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "mt-1 text-2xs",
+            style: { color: "var(--mb-text-tertiary)" },
+            children: hint
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  MobileBillingCreditsScreen,
+  MobileBillingInvoicesScreen,
+  MobileBillingPaymentMethodsScreen,
+  MobileBillingPlanScreen,
+  MobileBillingRatesScreen,
+  MobileBillingTopUpScreen,
+  MobileBillingUsageScreen,
+  MobileCancelSubscriptionSheet
+};
+//# sourceMappingURL=billing-flows.js.map