@withpotter/components 0.13.0-next.101

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

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

package/dist/mobile/screens/billing.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Mobile screen — Billing hub
+ *
+ * Visual contract: `BillingHub` in mobile-redesign-mockups.tsx
+ * Route: /dashboard/settings/billing (mobile)
+ */
+import React from 'react';
+import type { BillingPlan, Subscription, PaymentMethod, MessagingCreditsInfo, EmailCreditsInfo } from '@withpotter/pages-core/dashboard/settings/billing/_components';
+/**
+ * The screens this drawer can send you to, named as the billing page's mobile
+ * router names them.
+ *
+ * It used to keep its own list, and the two drifted: this file emitted
+ * `subscription` and `history` where the page renders `plan` and `usage`, so two
+ * of the seven rows led nowhere. Exported, and consumed by the page's own state,
+ * so a name can only be wrong in one place.
+ */
+export type MobileBillingScreenKey = 'overview' | 'plan' | 'messaging' | 'email' | 'invoices' | 'usage' | 'payment';
+interface MobileBillingScreenProps {
+    subscription: Subscription | null | undefined;
+    plans?: BillingPlan[];
+    paymentMethods?: PaymentMethod[];
+    invoiceCount?: number;
+    messagingCredits: MessagingCreditsInfo | null | undefined;
+    emailCredits: EmailCreditsInfo | null | undefined;
+    formatCurrency: (n: number) => string;
+    onSelectTab: (tab: MobileBillingScreenKey) => void;
+    onTopUpMessaging?: () => void;
+    onManagePlan?: () => void;
+}
+export declare function MobileBillingScreen({ subscription, paymentMethods, invoiceCount, messagingCredits, emailCredits, formatCurrency, onSelectTab, onTopUpMessaging, onManagePlan, }: MobileBillingScreenProps): React.JSX.Element;
+export {};

package/dist/mobile/screens/billing.js

@@ -0,0 +1,355 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRouter } from "next/navigation";
+import { MobileScreenFrame } from "@withpotter/components/mobile/screen-frame-host";
+import { pickPlanPrice } from "@withpotter/lib/plan-price";
+import {
+  BOX_EMAIL_ONLY,
+  phoneChannelsLabel
+} from "@withpotter/lib/box-channels";
+import {
+  ChevronRight,
+  CreditCard,
+  Mail,
+  MessageCircle,
+  Percent,
+  Receipt,
+  Star,
+  Wallet
+} from "lucide-react";
+function MobileBillingScreen({
+  subscription,
+  paymentMethods,
+  invoiceCount,
+  messagingCredits,
+  emailCredits,
+  formatCurrency,
+  onSelectTab,
+  onTopUpMessaging,
+  onManagePlan
+}) {
+  const router = useRouter();
+  const plan = subscription?.plan;
+  const planPrice = plan ? pickPlanPrice(plan.prices)?.amount ?? 0 : 0;
+  const status = subscription?.status ?? "inactive";
+  const renewsAt = subscription?.currentPeriod?.end ?? null;
+  const defaultPM = paymentMethods?.find((m) => m.isDefault) ?? paymentMethods?.[0];
+  const totalCredits = (BOX_EMAIL_ONLY ? 0 : messagingCredits?.balance ?? 0) + (emailCredits?.balance ?? 0);
+  return (
+    /* The frame owns the app row, the sheet, the title and the tab bar. Every
+       native screen used to draw all four itself — the same root div, the same
+       `env(safe-area-inset-top)`, the same title, the same `<BottomTabBar/>`,
+       thirteen times and already disagreeing on padding and title size. */
+    /* @__PURE__ */ jsxs(MobileScreenFrame, { title: "Billing", 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__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: "text-3xs font-medium",
+                    style: { color: "var(--mb-accent)" },
+                    children: plan?.name ?? "No active plan"
+                  }
+                ),
+                /* @__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__ */ jsxs(
+                  "p",
+                  {
+                    className: "mt-1 text-xs",
+                    style: { color: "var(--mb-text-secondary)" },
+                    children: [
+                      renewsAt ? `Renews ${new Date(renewsAt).toLocaleDateString()}` : "No renewal date",
+                      defaultPM?.card ? ` \xB7 ${defaultPM.card.brand} ending ${defaultPM.card.last4}` : ""
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(StatusPill, { status })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onManagePlan ?? (() => onSelectTab("plan")),
+                className: "mt-4 flex h-11 w-full items-center justify-center gap-2 rounded-2xl text-sm font-semibold",
+                style: {
+                  background: "var(--mb-accent)",
+                  color: "var(--mb-accent-fg)"
+                },
+                children: "Manage plan"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "section",
+        {
+          className: "mt-4 rounded-2xl border p-4",
+          style: {
+            borderColor: "var(--mb-border)",
+            background: "var(--mb-card)"
+          },
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: "text-2xs",
+                    style: { color: "var(--mb-text-tertiary)" },
+                    children: "Credits available"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: "mt-1 text-3xl font-bold leading-tight tabular-nums",
+                    style: { color: "var(--mb-text)" },
+                    children: totalCredits.toLocaleString()
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: BOX_EMAIL_ONLY ? () => onSelectTab("email") : onTopUpMessaging ?? (() => onSelectTab("messaging")),
+                  className: "rounded-full px-3 py-1.5 text-2xs font-semibold",
+                  style: {
+                    background: "color-mix(in srgb, var(--mb-accent) 15%, transparent)",
+                    color: "var(--mb-accent)"
+                  },
+                  children: "Top up"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-3", children: [
+              /* @__PURE__ */ jsx(
+                CreditMeter,
+                {
+                  label: "Email",
+                  info: emailCredits,
+                  color: "var(--mb-accent)"
+                }
+              ),
+              phoneChannelsLabel() && /* @__PURE__ */ jsx(
+                CreditMeter,
+                {
+                  label: phoneChannelsLabel(),
+                  info: messagingCredits,
+                  color: "var(--mb-warn)"
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("section", { className: "mt-6", children: [
+        /* @__PURE__ */ jsx(Caption, { children: "Billing tools" }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-2", children: [
+          /* @__PURE__ */ jsx(
+            ToolRow,
+            {
+              icon: Star,
+              label: "Plan",
+              hint: plan?.name ?? "Choose a plan",
+              onClick: () => onSelectTab("plan")
+            }
+          ),
+          !BOX_EMAIL_ONLY && /* @__PURE__ */ jsx(
+            ToolRow,
+            {
+              icon: MessageCircle,
+              label: "Messaging credits",
+              hint: `${(messagingCredits?.balance ?? 0).toLocaleString()} available`,
+              onClick: () => onSelectTab("messaging")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ToolRow,
+            {
+              icon: Mail,
+              label: "Email credits",
+              hint: `${(emailCredits?.balance ?? 0).toLocaleString()} available`,
+              onClick: () => onSelectTab("email")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ToolRow,
+            {
+              icon: Receipt,
+              label: "Statements",
+              hint: `${invoiceCount ?? 0} document${invoiceCount === 1 ? "" : "s"}`,
+              onClick: () => onSelectTab("invoices")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ToolRow,
+            {
+              icon: CreditCard,
+              label: "Payment method",
+              hint: defaultPM?.card ? `${defaultPM.card.brand} ending ${defaultPM.card.last4}` : "Add a card",
+              onClick: () => onSelectTab("payment")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ToolRow,
+            {
+              icon: Percent,
+              label: "Rates & fees",
+              hint: "Policy, preview, ledger",
+              onClick: () => router.push("/dashboard/payments")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ToolRow,
+            {
+              icon: Wallet,
+              label: "Usage history",
+              hint: "Past activity",
+              onClick: () => onSelectTab("usage")
+            }
+          )
+        ] })
+      ] })
+    ] })
+  );
+}
+function Caption({ children }) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: "text-3xs font-medium",
+      style: { color: "var(--mb-text-tertiary)" },
+      children
+    }
+  );
+}
+function StatusPill({ status }) {
+  const isActive = /active|trial/i.test(status);
+  const isCancelled = /cancel/i.test(status);
+  const color = isActive ? "var(--mb-good)" : isCancelled ? "var(--mb-warn)" : "var(--mb-text-tertiary)";
+  const bg = isActive ? "color-mix(in srgb, var(--mb-good) 12%, transparent)" : isCancelled ? "color-mix(in srgb, var(--mb-warn) 12%, transparent)" : "var(--mb-elevated)";
+  const border = isActive ? "color-mix(in srgb, var(--mb-good) 36%, transparent)" : isCancelled ? "color-mix(in srgb, var(--mb-warn) 36%, transparent)" : "var(--mb-border)";
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "rounded-full border px-2.5 py-1 text-3xs font-semibold capitalize",
+      style: { borderColor: border, background: bg, color },
+      children: status || "inactive"
+    }
+  );
+}
+function CreditMeter({
+  label,
+  info,
+  color
+}) {
+  const balance = info?.balance ?? 0;
+  const allowance = info?.monthlyAllowance ?? 0;
+  const denom = Math.max(allowance, balance, 1);
+  const pct = Math.max(0, Math.min(100, Math.round(balance / denom * 100)));
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-2xs", children: [
+      /* @__PURE__ */ jsx("span", { style: { color: "var(--mb-text-secondary)" }, children: label }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "tabular-nums",
+          style: { color: "var(--mb-text)", fontWeight: 600 },
+          children: balance.toLocaleString()
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "mt-1.5 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 ToolRow({
+  icon: Icon,
+  label,
+  hint,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: "flex w-full items-center gap-3 rounded-2xl border p-4 text-left",
+      style: {
+        borderColor: "var(--mb-border)",
+        background: "var(--mb-card)",
+        minHeight: 60
+      },
+      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",
+                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",
+              style: { color: "var(--mb-text)" },
+              children: label
+            }
+          ),
+          hint ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "mt-0.5 truncate text-2xs",
+              style: { color: "var(--mb-text-tertiary)" },
+              children: hint
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsx(
+          ChevronRight,
+          {
+            className: "size-4",
+            style: { color: "var(--mb-text-muted)" }
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  MobileBillingScreen
+};
+//# sourceMappingURL=billing.js.map