@withpotter/components 0.13.0-next.101

package/dist/mobile/screens/store.js

@@ -0,0 +1,326 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { DELIVERY_NAV } from "@withpotter/lib/fulfilment-nav";
+import {
+  AlarmClock,
+  ChartNoAxesCombined,
+  BookOpen,
+  CalendarDays,
+  CalendarRange,
+  Camera,
+  Wallet,
+  FolderTree,
+  Gift,
+  Globe,
+  Layers,
+  Megaphone,
+  MessageSquare,
+  Receipt,
+  Share2,
+  Shield,
+  Store as StoreIcon,
+  Tag,
+  Truck,
+  Users,
+  Wand2
+} from "lucide-react";
+import { Caption, ListRow } from "@withpotter/components/mobile/primitives";
+import { MobileScreenFrame } from "@withpotter/components/mobile/screen-frame-host";
+import { CloseEarly } from "@withpotter/components/mobile/close-early";
+import { TEAM_PAGE } from "@withpotter/lib/team-page";
+function IdentityAction({
+  icon: Icon,
+  label,
+  onClick,
+  href,
+  external
+}) {
+  const cls = "flex h-[52px] flex-col items-center justify-center gap-1 rounded-xl border text-3xs font-medium";
+  const style = {
+    borderColor: "var(--mb-accent-edge)",
+    background: "var(--mb-accent-wash)",
+    color: "var(--mb-text-secondary)"
+  };
+  if (href) {
+    return /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href,
+        target: external ? "_blank" : void 0,
+        rel: external ? "noopener noreferrer" : void 0,
+        className: cls,
+        style,
+        children: [
+          /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }),
+          label
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("button", { type: "button", onClick, className: cls, style, children: [
+    /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }),
+    label
+  ] });
+}
+function MobileStoreScreen({
+  workspaceName,
+  storefrontUrl,
+  storefrontHost,
+  isPublished,
+  logoUrl,
+  onShare,
+  onShowQr,
+  showPlanSection = true,
+  showFulfillment = true,
+  showCalendarSync = false,
+  showHours = false,
+  showBlog = false
+}) {
+  return (
+    /* The frame owns the app row, the sheet, the title and the tab bar. This
+       screen used to draw all four itself — as did the twelve other native
+       screens, each with its own copy of the same root div, the same
+       `env(safe-area-inset-top)`, the same `<h1>` and the same
+       `<BottomTabBar/>`, already disagreeing on padding and title size. */
+    /* @__PURE__ */ jsxs(MobileScreenFrame, { title: "Store", children: [
+      /* @__PURE__ */ jsxs(
+        "section",
+        {
+          className: "mt-6 rounded-3xl border p-4",
+          style: {
+            borderColor: "var(--mb-accent-edge)",
+            background: "var(--mb-accent-wash)"
+          },
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+              logoUrl ? (
+                // eslint-disable-next-line @next/next/no-img-element
+                /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: logoUrl,
+                    alt: workspaceName,
+                    className: "h-14 w-14 rounded-2xl object-cover",
+                    style: { background: "var(--mb-elevated)" }
+                  }
+                )
+              ) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "flex h-14 w-14 items-center justify-center rounded-2xl",
+                  style: {
+                    background: "var(--mb-accent)",
+                    color: "var(--mb-accent-fg)"
+                  },
+                  children: /* @__PURE__ */ jsx(StoreIcon, { className: "size-6" })
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: "truncate text-base font-semibold",
+                    style: { color: "var(--mb-text)" },
+                    children: workspaceName
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "p",
+                  {
+                    className: "truncate text-2xs",
+                    style: {
+                      color: "color-mix(in srgb, var(--mb-accent) 80%, var(--mb-text))"
+                    },
+                    children: [
+                      storefrontHost,
+                      " \xB7 ",
+                      isPublished ? "Live" : "Draft"
+                    ]
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "mt-4 rounded-2xl border p-4",
+                style: {
+                  borderColor: "var(--mb-border)",
+                  background: "var(--mb-card)"
+                },
+                children: /* @__PURE__ */ jsx(CloseEarly, {})
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "mt-4 grid grid-cols-3 gap-2", children: [
+              /* @__PURE__ */ jsx(IdentityAction, { icon: Share2, label: "Share", onClick: onShare }),
+              /* @__PURE__ */ jsx(
+                IdentityAction,
+                {
+                  icon: Globe,
+                  label: "Open",
+                  href: storefrontUrl && storefrontUrl !== "#" ? storefrontUrl : void 0,
+                  external: true
+                }
+              ),
+              /* @__PURE__ */ jsx(IdentityAction, { icon: Camera, label: "QR code", onClick: onShowQr })
+            ] })
+          ]
+        }
+      ),
+      showPlanSection && /* @__PURE__ */ jsxs("section", { className: "mt-6 space-y-2", children: [
+        /* @__PURE__ */ jsx(Caption, { children: "Plan & operate" }),
+        /* @__PURE__ */ jsx(
+          ListRow,
+          {
+            icon: CalendarDays,
+            label: "Calendar",
+            href: "/dashboard/bookings?view=calendar"
+          }
+        ),
+        showHours && /* @__PURE__ */ jsx(
+          ListRow,
+          {
+            icon: AlarmClock,
+            label: "Hours",
+            href: "/dashboard/settings/hours"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ListRow,
+          {
+            icon: Layers,
+            label: "Resources",
+            href: "/dashboard/resources"
+          }
+        ),
+        showCalendarSync && /* @__PURE__ */ jsx(
+          ListRow,
+          {
+            icon: CalendarRange,
+            label: "Calendar sync",
+            hint: "Google Calendar",
+            href: "/dashboard/calendar-sync"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: "mt-6 space-y-2", children: [
+        /* @__PURE__ */ jsx(Caption, { children: "Manage business" }),
+        /* @__PURE__ */ jsx(
+          ListRow,
+          {
+            icon: ChartNoAxesCombined,
+            label: "Insights",
+            href: "/dashboard/analytics"
+          }
+        ),
+        /* @__PURE__ */ jsx(ListRow, { icon: Wallet, label: "Money", href: "/dashboard/payments" }),
+        /* @__PURE__ */ jsx(
+          ListRow,
+          {
+            icon: Megaphone,
+            label: "Marketing",
+            href: "/dashboard/marketing"
+          }
+        ),
+        /* @__PURE__ */ jsx(ListRow, { icon: Gift, label: "Loyalty", href: "/dashboard/loyalty" }),
+        /* @__PURE__ */ jsx(ListRow, { icon: Users, label: "Customers", href: "/dashboard/customers" })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: "mt-6 space-y-2", children: [
+        /* @__PURE__ */ jsx(Caption, { children: "Catalog tools" }),
+        /* @__PURE__ */ jsx(
+          ListRow,
+          {
+            icon: FolderTree,
+            label: "Collections",
+            href: "/dashboard/collections"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ListRow,
+          {
+            icon: Tag,
+            label: "Discounts",
+            href: "/dashboard/marketing/promotions?view=discounts"
+          }
+        ),
+        showBlog && /* @__PURE__ */ jsx(ListRow, { icon: BookOpen, label: "Blog", href: "/dashboard/blog" })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: "mt-6 space-y-2", children: [
+        /* @__PURE__ */ jsx(Caption, { children: "Configure" }),
+        /* @__PURE__ */ jsx(
+          ListRow,
+          {
+            icon: Globe,
+            label: "Site & domain",
+            hint: storefrontHost,
+            href: "/dashboard/business/domains"
+          }
+        ),
+        showFulfillment && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+          ListRow,
+          {
+            icon: Truck,
+            label: DELIVERY_NAV.label,
+            href: "/dashboard/settings/shipping"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          ListRow,
+          {
+            icon: Receipt,
+            label: "Taxes",
+            href: "/dashboard/business/checkout?tab=taxes"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ListRow,
+          {
+            icon: Receipt,
+            label: "Policies",
+            href: "/dashboard/settings/policies"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ListRow,
+          {
+            icon: Wand2,
+            label: "Appearance & template",
+            href: "/dashboard/appearance"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: "mt-6 space-y-2", children: [
+        /* @__PURE__ */ jsx(Caption, { children: "Account" }),
+        process.env.NEXT_PUBLIC_BOX_HIDE_BILLING !== "true" && /* @__PURE__ */ jsx(
+          ListRow,
+          {
+            icon: Wallet,
+            label: "Billing",
+            href: "/dashboard/settings/billing"
+          }
+        ),
+        /* @__PURE__ */ jsx(ListRow, { icon: Users, label: "Team", href: TEAM_PAGE }),
+        /* @__PURE__ */ jsx(
+          ListRow,
+          {
+            icon: Shield,
+            label: "Roles & permissions",
+            href: "/dashboard/settings/roles"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ListRow,
+          {
+            icon: MessageSquare,
+            label: "Help & support",
+            href: "/dashboard/help"
+          }
+        )
+      ] })
+    ] })
+  );
+}
+export {
+  MobileStoreScreen
+};
+//# sourceMappingURL=store.js.map

package/dist/mobile/screens/store.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/mobile/screens/store.tsx"],"sourcesContent":["'use client';\nimport { DELIVERY_NAV } from '@withpotter/lib/fulfilment-nav';\n\n/**\n * Mobile screen — Store tab\n *\n * Visual contract: `StoreTab` in mobile-redesign-mockups.tsx\n * Route: /dashboard/store\n * Archetype: HUB\n */\n\nimport React from 'react';\nimport {\n  AlarmClock,\n  ChartNoAxesCombined,\n  BookOpen,\n  CalendarDays,\n  CalendarRange,\n  Camera,\n  Wallet,\n  FolderTree,\n  Gift,\n  Globe,\n  Layers,\n  Megaphone,\n  MessageSquare,\n  Receipt,\n  Share2,\n  Shield,\n  Store as StoreIcon,\n  Tag,\n  Truck,\n  Users,\n  Wand2,\n} from 'lucide-react';\nimport { Caption, ListRow } from '@withpotter/components/mobile/primitives';\nimport { MobileScreenFrame } from '@withpotter/components/mobile/screen-frame-host';\nimport { CloseEarly } from '@withpotter/components/mobile/close-early';\nimport { TEAM_PAGE } from '@withpotter/lib/team-page';\n\nexport interface MobileStoreScreenProps {\n  workspaceName: string;\n  storefrontUrl: string;\n  storefrontHost: string;\n  isPublished: boolean;\n  logoUrl?: string;\n  onShare?: () => void;\n  onShowQr?: () => void;\n  /** True when tenant has at least one time-based intent\n   *  (take-bookings / rent-property / event-tickets). Gates the Plan & operate\n   *  section (Calendar, Schedule, Resources, Calendar Sync). */\n  showPlanSection?: boolean;\n  /** True when tenant has at least one fulfillment-bearing intent\n   *  (sell-products / food-orders / rent-property). Gates Shipping &\n   *  Locations rows. */\n  showFulfillment?: boolean;\n  /** True when tenant has a bookable behavior — used for the standalone\n   *  Calendar Sync row inside Plan & operate. */\n  showCalendarSync?: boolean;\n  /** True when tenant has a time-based intent — shows Hours row in Plan & operate. */\n  showHours?: boolean;\n  /** True when the tenant has the `publishable` behavior — shows the Blog row.\n   *  Mirrors the desktop sidebar, which gates Blog the same way. */\n  showBlog?: boolean;\n}\n\nfunction IdentityAction({\n  icon: Icon,\n  label,\n  onClick,\n  href,\n  external,\n}: {\n  icon: React.ComponentType<{ className?: string }>;\n  label: string;\n  onClick?: () => void;\n  href?: string;\n  external?: boolean;\n}) {\n  const cls =\n    'flex h-[52px] flex-col items-center justify-center gap-1 rounded-xl border text-3xs font-medium';\n  const style = {\n    borderColor: 'var(--mb-accent-edge)',\n    background: 'var(--mb-accent-wash)',\n    color: 'var(--mb-text-secondary)',\n  };\n  if (href) {\n    return (\n      <a\n        href={href}\n        target={external ? '_blank' : undefined}\n        rel={external ? 'noopener noreferrer' : undefined}\n        className={cls}\n        style={style}\n      >\n        <Icon className=\"h-4 w-4\" />\n        {label}\n      </a>\n    );\n  }\n  return (\n    <button type=\"button\" onClick={onClick} className={cls} style={style}>\n      <Icon className=\"h-4 w-4\" />\n      {label}\n    </button>\n  );\n}\n\nexport function MobileStoreScreen({\n  workspaceName,\n  storefrontUrl,\n  storefrontHost,\n  isPublished,\n  logoUrl,\n  onShare,\n  onShowQr,\n  showPlanSection = true,\n  showFulfillment = true,\n  showCalendarSync = false,\n  showHours = false,\n  showBlog = false,\n}: MobileStoreScreenProps) {\n  return (\n    /* The frame owns the app row, the sheet, the title and the tab bar. This\n       screen used to draw all four itself — as did the twelve other native\n       screens, each with its own copy of the same root div, the same\n       `env(safe-area-inset-top)`, the same `<h1>` and the same\n       `<BottomTabBar/>`, already disagreeing on padding and title size. */\n    <MobileScreenFrame title=\"Store\">\n      {/* Store identity card */}\n      <section\n        className=\"mt-6 rounded-3xl border p-4\"\n        style={{\n          borderColor: 'var(--mb-accent-edge)',\n          background: 'var(--mb-accent-wash)',\n        }}\n      >\n        <div className=\"flex items-center gap-3\">\n          {logoUrl ? (\n            // eslint-disable-next-line @next/next/no-img-element\n            <img\n              src={logoUrl}\n              alt={workspaceName}\n              className=\"h-14 w-14 rounded-2xl object-cover\"\n              style={{ background: 'var(--mb-elevated)' }}\n            />\n          ) : (\n            <div\n              className=\"flex h-14 w-14 items-center justify-center rounded-2xl\"\n              style={{\n                background: 'var(--mb-accent)',\n                color: 'var(--mb-accent-fg)',\n              }}\n            >\n              <StoreIcon className=\"size-6\" />\n            </div>\n          )}\n          <div className=\"min-w-0 flex-1\">\n            <p\n              className=\"truncate text-base font-semibold\"\n              style={{ color: 'var(--mb-text)' }}\n            >\n              {workspaceName}\n            </p>\n            <p\n              className=\"truncate text-2xs\"\n              style={{\n                color:\n                  'color-mix(in srgb, var(--mb-accent) 80%, var(--mb-text))',\n              }}\n            >\n              {storefrontHost} · {isPublished ? 'Live' : 'Draft'}\n            </p>\n          </div>\n        </div>\n\n        {/* Closing early is a standing-up job — a power cut, an emergency —\n              so it belongs on the shopfront screen, not four taps into Hours. */}\n        <div\n          className=\"mt-4 rounded-2xl border p-4\"\n          style={{\n            borderColor: 'var(--mb-border)',\n            background: 'var(--mb-card)',\n          }}\n        >\n          <CloseEarly />\n        </div>\n\n        <div className=\"mt-4 grid grid-cols-3 gap-2\">\n          <IdentityAction icon={Share2} label=\"Share\" onClick={onShare} />\n          <IdentityAction\n            icon={Globe}\n            label=\"Open\"\n            href={\n              storefrontUrl && storefrontUrl !== '#' ? storefrontUrl : undefined\n            }\n            external\n          />\n          <IdentityAction icon={Camera} label=\"QR code\" onClick={onShowQr} />\n        </div>\n      </section>\n\n      {/* Plan & operate */}\n      {showPlanSection && (\n        <section className=\"mt-6 space-y-2\">\n          <Caption>Plan & operate</Caption>\n          <ListRow\n            icon={CalendarDays}\n            label=\"Calendar\"\n            href=\"/dashboard/bookings?view=calendar\"\n          />\n          {showHours && (\n            <ListRow\n              icon={AlarmClock}\n              label=\"Hours\"\n              href=\"/dashboard/settings/hours\"\n            />\n          )}\n          <ListRow\n            icon={Layers}\n            label=\"Resources\"\n            href=\"/dashboard/resources\"\n          />\n          {showCalendarSync && (\n            <ListRow\n              icon={CalendarRange}\n              label=\"Calendar sync\"\n              hint=\"Google Calendar\"\n              href=\"/dashboard/calendar-sync\"\n            />\n          )}\n        </section>\n      )}\n\n      {/* Manage business */}\n      <section className=\"mt-6 space-y-2\">\n        <Caption>Manage business</Caption>\n        <ListRow\n          icon={ChartNoAxesCombined}\n          label=\"Insights\"\n          href=\"/dashboard/analytics\"\n        />\n        <ListRow icon={Wallet} label=\"Money\" href=\"/dashboard/payments\" />\n        <ListRow\n          icon={Megaphone}\n          label=\"Marketing\"\n          href=\"/dashboard/marketing\"\n        />\n        <ListRow icon={Gift} label=\"Loyalty\" href=\"/dashboard/loyalty\" />\n        <ListRow icon={Users} label=\"Customers\" href=\"/dashboard/customers\" />\n      </section>\n\n      {/* Catalog tools */}\n      <section className=\"mt-6 space-y-2\">\n        <Caption>Catalog tools</Caption>\n        <ListRow\n          icon={FolderTree}\n          label=\"Collections\"\n          href=\"/dashboard/collections\"\n        />\n        <ListRow\n          icon={Tag}\n          label=\"Discounts\"\n          href=\"/dashboard/marketing/promotions?view=discounts\"\n        />\n        {showBlog && (\n          <ListRow icon={BookOpen} label=\"Blog\" href=\"/dashboard/blog\" />\n        )}\n      </section>\n\n      {/* Configure */}\n      <section className=\"mt-6 space-y-2\">\n        <Caption>Configure</Caption>\n        <ListRow\n          icon={Globe}\n          label=\"Site & domain\"\n          hint={storefrontHost}\n          href=\"/dashboard/business/domains\"\n        />\n        {/* Payments hidden from Store — lives under Money. */}\n        {showFulfillment && (\n          <>\n            <ListRow\n              icon={Truck}\n              label={DELIVERY_NAV.label}\n              href=\"/dashboard/settings/shipping\"\n            />\n          </>\n        )}\n        <ListRow\n          icon={Receipt}\n          label=\"Taxes\"\n          href=\"/dashboard/business/checkout?tab=taxes\"\n        />\n        <ListRow\n          icon={Receipt}\n          label=\"Policies\"\n          href=\"/dashboard/settings/policies\"\n        />\n        <ListRow\n          icon={Wand2}\n          label=\"Appearance & template\"\n          href=\"/dashboard/appearance\"\n        />\n      </section>\n\n      {/* Account */}\n      <section className=\"mt-6 space-y-2\">\n        <Caption>Account</Caption>\n        {process.env.NEXT_PUBLIC_BOX_HIDE_BILLING !== 'true' && (\n          <ListRow\n            icon={Wallet}\n            label=\"Billing\"\n            href=\"/dashboard/settings/billing\"\n          />\n        )}\n        <ListRow icon={Users} label=\"Team\" href={TEAM_PAGE} />\n        <ListRow\n          icon={Shield}\n          label=\"Roles & permissions\"\n          href=\"/dashboard/settings/roles\"\n        />\n        {/* Apps & integrations hidden — deferred until integrations catalog ships. */}\n        <ListRow\n          icon={MessageSquare}\n          label=\"Help & support\"\n          href=\"/dashboard/help\"\n        />\n      </section>\n    </MobileScreenFrame>\n  );\n}\n"],"mappings":";AAwFM,SAiMI,UA1LF,KAPF;AAvFN,SAAS,oBAAoB;AAW7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,SAAS,eAAe;AACjC,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AA4B1B,SAAS,eAAe;AAAA,EACtB,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,QAAM,MACJ;AACF,QAAM,QAAQ;AAAA,IACZ,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AACA,MAAI,MAAM;AACR,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,QAAQ,WAAW,WAAW;AAAA,QAC9B,KAAK,WAAW,wBAAwB;AAAA,QACxC,WAAW;AAAA,QACX;AAAA,QAEA;AAAA,8BAAC,QAAK,WAAU,WAAU;AAAA,UACzB;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACA,SACE,qBAAC,YAAO,MAAK,UAAS,SAAkB,WAAW,KAAK,OACtD;AAAA,wBAAC,QAAK,WAAU,WAAU;AAAA,IACzB;AAAA,KACH;AAEJ;AAEO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,mBAAmB;AAAA,EACnB,YAAY;AAAA,EACZ,WAAW;AACb,GAA2B;AACzB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAME,qBAAC,qBAAkB,OAAM,SAEvB;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO;AAAA,YACL,aAAa;AAAA,YACb,YAAY;AAAA,UACd;AAAA,UAEA;AAAA,iCAAC,SAAI,WAAU,2BACZ;AAAA;AAAA;AAAA,gBAEC;AAAA,kBAAC;AAAA;AAAA,oBACC,KAAK;AAAA,oBACL,KAAK;AAAA,oBACL,WAAU;AAAA,oBACV,OAAO,EAAE,YAAY,qBAAqB;AAAA;AAAA,gBAC5C;AAAA,kBAEA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,YAAY;AAAA,oBACZ,OAAO;AAAA,kBACT;AAAA,kBAEA,8BAAC,aAAU,WAAU,UAAS;AAAA;AAAA,cAChC;AAAA,cAEF,qBAAC,SAAI,WAAU,kBACb;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAU;AAAA,oBACV,OAAO,EAAE,OAAO,iBAAiB;AAAA,oBAEhC;AAAA;AAAA,gBACH;AAAA,gBACA;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAU;AAAA,oBACV,OAAO;AAAA,sBACL,OACE;AAAA,oBACJ;AAAA,oBAEC;AAAA;AAAA,sBAAe;AAAA,sBAAI,cAAc,SAAS;AAAA;AAAA;AAAA,gBAC7C;AAAA,iBACF;AAAA,eACF;AAAA,YAIA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO;AAAA,kBACL,aAAa;AAAA,kBACb,YAAY;AAAA,gBACd;AAAA,gBAEA,8BAAC,cAAW;AAAA;AAAA,YACd;AAAA,YAEA,qBAAC,SAAI,WAAU,+BACb;AAAA,kCAAC,kBAAe,MAAM,QAAQ,OAAM,SAAQ,SAAS,SAAS;AAAA,cAC9D;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAM;AAAA,kBACN,OAAM;AAAA,kBACN,MACE,iBAAiB,kBAAkB,MAAM,gBAAgB;AAAA,kBAE3D,UAAQ;AAAA;AAAA,cACV;AAAA,cACA,oBAAC,kBAAe,MAAM,QAAQ,OAAM,WAAU,SAAS,UAAU;AAAA,eACnE;AAAA;AAAA;AAAA,MACF;AAAA,MAGC,mBACC,qBAAC,aAAQ,WAAU,kBACjB;AAAA,4BAAC,WAAQ,4BAAc;AAAA,QACvB;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,OAAM;AAAA,YACN,MAAK;AAAA;AAAA,QACP;AAAA,QACC,aACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,OAAM;AAAA,YACN,MAAK;AAAA;AAAA,QACP;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,OAAM;AAAA,YACN,MAAK;AAAA;AAAA,QACP;AAAA,QACC,oBACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,OAAM;AAAA,YACN,MAAK;AAAA,YACL,MAAK;AAAA;AAAA,QACP;AAAA,SAEJ;AAAA,MAIF,qBAAC,aAAQ,WAAU,kBACjB;AAAA,4BAAC,WAAQ,6BAAe;AAAA,QACxB;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,OAAM;AAAA,YACN,MAAK;AAAA;AAAA,QACP;AAAA,QACA,oBAAC,WAAQ,MAAM,QAAQ,OAAM,SAAQ,MAAK,uBAAsB;AAAA,QAChE;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,OAAM;AAAA,YACN,MAAK;AAAA;AAAA,QACP;AAAA,QACA,oBAAC,WAAQ,MAAM,MAAM,OAAM,WAAU,MAAK,sBAAqB;AAAA,QAC/D,oBAAC,WAAQ,MAAM,OAAO,OAAM,aAAY,MAAK,wBAAuB;AAAA,SACtE;AAAA,MAGA,qBAAC,aAAQ,WAAU,kBACjB;AAAA,4BAAC,WAAQ,2BAAa;AAAA,QACtB;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,OAAM;AAAA,YACN,MAAK;AAAA;AAAA,QACP;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,OAAM;AAAA,YACN,MAAK;AAAA;AAAA,QACP;AAAA,QACC,YACC,oBAAC,WAAQ,MAAM,UAAU,OAAM,QAAO,MAAK,mBAAkB;AAAA,SAEjE;AAAA,MAGA,qBAAC,aAAQ,WAAU,kBACjB;AAAA,4BAAC,WAAQ,uBAAS;AAAA,QAClB;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,OAAM;AAAA,YACN,MAAM;AAAA,YACN,MAAK;AAAA;AAAA,QACP;AAAA,QAEC,mBACC,gCACE;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,OAAO,aAAa;AAAA,YACpB,MAAK;AAAA;AAAA,QACP,GACF;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,OAAM;AAAA,YACN,MAAK;AAAA;AAAA,QACP;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,OAAM;AAAA,YACN,MAAK;AAAA;AAAA,QACP;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,OAAM;AAAA,YACN,MAAK;AAAA;AAAA,QACP;AAAA,SACF;AAAA,MAGA,qBAAC,aAAQ,WAAU,kBACjB;AAAA,4BAAC,WAAQ,qBAAO;AAAA,QACf,QAAQ,IAAI,iCAAiC,UAC5C;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,OAAM;AAAA,YACN,MAAK;AAAA;AAAA,QACP;AAAA,QAEF,oBAAC,WAAQ,MAAM,OAAO,OAAM,QAAO,MAAM,WAAW;AAAA,QACpD;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,OAAM;AAAA,YACN,MAAK;AAAA;AAAA,QACP;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,OAAM;AAAA,YACN,MAAK;AAAA;AAAA,QACP;AAAA,SACF;AAAA,OACF;AAAA;AAEJ;","names":[]}

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

@@ -0,0 +1,31 @@
+/**
+ * Mobile screen — Plans and subscribers.
+ *
+ * Route: /dashboard/subscriptions (mobile)
+ *
+ * Every comparable list in the dashboard has a mobile screen and this one did
+ * not, so a membership business checking who is paying — at a desk, in a gym,
+ * on a phone — got the desktop layout: a tab strip and a table.
+ *
+ * The two tabs are the two questions a membership business asks. What am I
+ * selling, and who is paying for it. `attention` leads the second, because a
+ * failed payment is the only state on this screen that needs a person.
+ */
+import React from 'react';
+import type { CustomerSubscription, MerchantPlan } from '@withpotter/lib/api/types';
+export type MobileSubscriptionsTab = 'plans' | 'subscribers';
+export interface MobileSubscriptionsScreenProps {
+    title: string;
+    activeTab: MobileSubscriptionsTab;
+    onTabChange: (tab: MobileSubscriptionsTab) => void;
+    plans: MerchantPlan[];
+    subscriptions: CustomerSubscription[];
+    loading: boolean;
+    search: string;
+    onSearchChange: (value: string) => void;
+    formatCurrency: (amount: number, currency?: string) => string;
+    onNewPlan: () => void;
+    onOpenPlan: (plan: MerchantPlan) => void;
+    onOpenSubscriber: (subscription: CustomerSubscription) => void;
+}
+export declare function MobileSubscriptionsScreen({ title, activeTab, onTabChange, plans, subscriptions, loading, search, onSearchChange, formatCurrency, onNewPlan, onOpenPlan, onOpenSubscriber, }: MobileSubscriptionsScreenProps): React.JSX.Element;

package/dist/mobile/screens/subscriptions.js

@@ -0,0 +1,242 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertCircle, ChevronRight, Plus } from "lucide-react";
+import { SearchField } from "@withpotter/components/mobile/primitives";
+import { MobileScreenFrame } from "@withpotter/components/mobile/screen-frame-host";
+import { Button } from "@withpotter/ui-kit/button";
+import { formatInterval } from "@withpotter/pages-finance/dashboard/(finance)/subscriptions/_components/helpers";
+const STATUS_LABEL = {
+  active: "Active",
+  non_renewing: "Non-renewing",
+  attention: "Needs attention",
+  cancelled: "Cancelled",
+  completed: "Completed"
+};
+function intervalLabel(plan) {
+  return formatInterval(plan.interval, plan.intervalCount).toLowerCase();
+}
+function MobileSubscriptionsScreen({
+  title,
+  activeTab,
+  onTabChange,
+  plans,
+  subscriptions,
+  loading,
+  search,
+  onSearchChange,
+  formatCurrency,
+  onNewPlan,
+  onOpenPlan,
+  onOpenSubscriber
+}) {
+  const needingAttention = subscriptions.filter(
+    (s) => s.status === "attention"
+  ).length;
+  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,
+        actions: /* @__PURE__ */ jsxs(Button, { size: "sm", onClick: onNewPlan, children: [
+          /* @__PURE__ */ jsx(Plus, {}),
+          "Plan"
+        ] }),
+        children: [
+          needingAttention > 0 && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => onTabChange("subscribers"),
+              className: "mt-4 flex w-full items-center gap-2 rounded-2xl border px-3.5 py-3 text-left",
+              style: {
+                borderColor: "var(--mb-warn)",
+                background: "color-mix(in srgb, var(--mb-warn) 10%, transparent)"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  AlertCircle,
+                  {
+                    className: "size-4 shrink-0",
+                    style: { color: "var(--mb-warn)" }
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { className: "text-sm", style: { color: "var(--mb-text)" }, children: [
+                  needingAttention,
+                  " payment",
+                  needingAttention === 1 ? "" : "s",
+                  " failed"
+                ] }),
+                /* @__PURE__ */ jsx(
+                  ChevronRight,
+                  {
+                    className: "ml-auto size-4",
+                    style: { color: "var(--mb-text-tertiary)" }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "mt-4 flex gap-2", children: ["plans", "subscribers"].map((tab) => {
+            const isActive = tab === activeTab;
+            return /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "secondary",
+                className: "shrink-0 text-2xs",
+                onClick: () => onTabChange(tab),
+                style: {
+                  borderColor: isActive ? "var(--mb-accent)" : "var(--mb-border)",
+                  background: isActive ? "color-mix(in srgb, var(--mb-accent) 14%, transparent)" : "var(--mb-card)",
+                  color: isActive ? "var(--mb-accent)" : "var(--mb-text-secondary)"
+                },
+                children: tab === "plans" ? "Plans" : "Members"
+              },
+              tab
+            );
+          }) }),
+          activeTab === "subscribers" && /* @__PURE__ */ jsx(
+            SearchField,
+            {
+              className: "mt-3",
+              placeholder: "Search members",
+              value: search,
+              onChange: onSearchChange
+            }
+          ),
+          loading ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "mt-6 text-sm",
+              style: { color: "var(--mb-text-tertiary)" },
+              children: "Loading\u2026"
+            }
+          ) : activeTab === "plans" ? /* @__PURE__ */ jsxs("ul", { className: "mt-3 space-y-2", children: [
+            plans.length === 0 && /* @__PURE__ */ jsx(
+              "li",
+              {
+                className: "rounded-2xl border px-3.5 py-6 text-center text-sm",
+                style: {
+                  borderColor: "var(--mb-border)",
+                  color: "var(--mb-text-tertiary)"
+                },
+                children: "No plans yet."
+              }
+            ),
+            plans.map((plan) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => onOpenPlan(plan),
+                className: "flex w-full items-center gap-3 rounded-2xl border px-3.5 py-3 text-left",
+                style: {
+                  borderColor: "var(--mb-border)",
+                  background: "var(--mb-card)"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "block truncate text-sm font-medium",
+                        style: { color: "var(--mb-text)" },
+                        children: plan.name
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      "span",
+                      {
+                        className: "block text-xs",
+                        style: { color: "var(--mb-text-tertiary)" },
+                        children: [
+                          plan.pricingKind === "sum-of-items" ? "Varies" : formatCurrency(plan.amount / 100, plan.currency),
+                          " ",
+                          "\xB7 ",
+                          intervalLabel(plan)
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    ChevronRight,
+                    {
+                      className: "size-4 shrink-0",
+                      style: { color: "var(--mb-text-tertiary)" }
+                    }
+                  )
+                ]
+              }
+            ) }, plan.id))
+          ] }) : /* @__PURE__ */ jsxs("ul", { className: "mt-3 space-y-2", children: [
+            subscriptions.length === 0 && /* @__PURE__ */ jsx(
+              "li",
+              {
+                className: "rounded-2xl border px-3.5 py-6 text-center text-sm",
+                style: {
+                  borderColor: "var(--mb-border)",
+                  color: "var(--mb-text-tertiary)"
+                },
+                children: "Nobody has joined yet."
+              }
+            ),
+            subscriptions.map((subscription) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => onOpenSubscriber(subscription),
+                className: "flex w-full items-center gap-3 rounded-2xl border px-3.5 py-3 text-left",
+                style: {
+                  borderColor: subscription.status === "attention" ? "var(--mb-warn)" : "var(--mb-border)",
+                  background: "var(--mb-card)"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "block truncate text-sm font-medium",
+                        style: { color: "var(--mb-text)" },
+                        children: subscription.customerEmail
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      "span",
+                      {
+                        className: "block text-xs",
+                        style: {
+                          color: subscription.status === "attention" ? "var(--mb-warn)" : "var(--mb-text-tertiary)"
+                        },
+                        children: [
+                          STATUS_LABEL[subscription.status] ?? subscription.status,
+                          " \xB7 ",
+                          formatCurrency(
+                            subscription.amount / 100,
+                            subscription.currency
+                          )
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    ChevronRight,
+                    {
+                      className: "size-4 shrink-0",
+                      style: { color: "var(--mb-text-tertiary)" }
+                    }
+                  )
+                ]
+              }
+            ) }, subscription.id))
+          ] })
+        ]
+      }
+    )
+  );
+}
+export {
+  MobileSubscriptionsScreen
+};
+//# sourceMappingURL=subscriptions.js.map

package/dist/mobile/screens/subscriptions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/mobile/screens/subscriptions.tsx"],"sourcesContent":["'use client';\n\n/**\n * Mobile screen — Plans and subscribers.\n *\n * Route: /dashboard/subscriptions (mobile)\n *\n * Every comparable list in the dashboard has a mobile screen and this one did\n * not, so a membership business checking who is paying — at a desk, in a gym,\n * on a phone — got the desktop layout: a tab strip and a table.\n *\n * The two tabs are the two questions a membership business asks. What am I\n * selling, and who is paying for it. `attention` leads the second, because a\n * failed payment is the only state on this screen that needs a person.\n */\n\nimport React from 'react';\nimport { AlertCircle, ChevronRight, Plus } from 'lucide-react';\nimport { SearchField } from '@withpotter/components/mobile/primitives';\nimport { MobileScreenFrame } from '@withpotter/components/mobile/screen-frame-host';\nimport { Button } from '@withpotter/ui-kit/button';\nimport type { CustomerSubscription, MerchantPlan } from '@withpotter/lib/api/types';\nimport { formatInterval } from '@withpotter/pages-finance/dashboard/(finance)/subscriptions/_components/helpers';\n\nexport type MobileSubscriptionsTab = 'plans' | 'subscribers';\n\nexport interface MobileSubscriptionsScreenProps {\n  title: string;\n  activeTab: MobileSubscriptionsTab;\n  onTabChange: (tab: MobileSubscriptionsTab) => void;\n  plans: MerchantPlan[];\n  subscriptions: CustomerSubscription[];\n  loading: boolean;\n  search: string;\n  onSearchChange: (value: string) => void;\n  formatCurrency: (amount: number, currency?: string) => string;\n  onNewPlan: () => void;\n  onOpenPlan: (plan: MerchantPlan) => void;\n  onOpenSubscriber: (subscription: CustomerSubscription) => void;\n}\n\n/** The merchant's word for each state, and which of them is loud. */\nconst STATUS_LABEL: Record<string, string> = {\n  active: 'Active',\n  non_renewing: 'Non-renewing',\n  attention: 'Needs attention',\n  cancelled: 'Cancelled',\n  completed: 'Completed',\n};\n\n/**\n * The same sentence the desktop card prints. This was `every 2 monthly` — the\n * count in front of the raw enum, so a fortnightly plan read as an adjective\n * with a number bolted on.\n */\nfunction intervalLabel(plan: MerchantPlan): string {\n  return formatInterval(plan.interval, plan.intervalCount).toLowerCase();\n}\n\nexport function MobileSubscriptionsScreen({\n  title,\n  activeTab,\n  onTabChange,\n  plans,\n  subscriptions,\n  loading,\n  search,\n  onSearchChange,\n  formatCurrency,\n  onNewPlan,\n  onOpenPlan,\n  onOpenSubscriber,\n}: MobileSubscriptionsScreenProps) {\n  const needingAttention = subscriptions.filter(\n    (s) => s.status === 'attention',\n  ).length;\n\n  return (\n    /* The frame owns the app row, the sheet, the title and the tab bar. Every\n       native screen used to draw all four itself — the same root div, the same\n       `env(safe-area-inset-top)`, the same title, the same `<BottomTabBar/>`,\n       thirteen times and already disagreeing on padding and title size. */\n    <MobileScreenFrame\n      title={title}\n      actions={\n        <Button size=\"sm\" onClick={onNewPlan}>\n          <Plus />\n          Plan\n        </Button>\n      }\n    >\n      {/* The one state that needs a person, said before anything else. */}\n      {needingAttention > 0 && (\n        <button\n          type=\"button\"\n          onClick={() => onTabChange('subscribers')}\n          className=\"mt-4 flex w-full items-center gap-2 rounded-2xl border px-3.5 py-3 text-left\"\n          style={{\n            borderColor: 'var(--mb-warn)',\n            background: 'color-mix(in srgb, var(--mb-warn) 10%, transparent)',\n          }}\n        >\n          <AlertCircle\n            className=\"size-4 shrink-0\"\n            style={{ color: 'var(--mb-warn)' }}\n          />\n          <span className=\"text-sm\" style={{ color: 'var(--mb-text)' }}>\n            {needingAttention} payment\n            {needingAttention === 1 ? '' : 's'} failed\n          </span>\n          <ChevronRight\n            className=\"ml-auto size-4\"\n            style={{ color: 'var(--mb-text-tertiary)' }}\n          />\n        </button>\n      )}\n\n      <div className=\"mt-4 flex gap-2\">\n        {(['plans', 'subscribers'] as const).map((tab) => {\n          const isActive = tab === activeTab;\n          return (\n            <Button\n              key={tab}\n              variant=\"secondary\"\n              className=\"shrink-0 text-2xs\"\n              onClick={() => onTabChange(tab)}\n              style={{\n                borderColor: isActive ? 'var(--mb-accent)' : 'var(--mb-border)',\n                background: isActive\n                  ? 'color-mix(in srgb, var(--mb-accent) 14%, transparent)'\n                  : 'var(--mb-card)',\n                color: isActive\n                  ? 'var(--mb-accent)'\n                  : 'var(--mb-text-secondary)',\n              }}\n            >\n              {tab === 'plans' ? 'Plans' : 'Members'}\n            </Button>\n          );\n        })}\n      </div>\n\n      {activeTab === 'subscribers' && (\n        <SearchField\n          className=\"mt-3\"\n          placeholder=\"Search members\"\n          value={search}\n          onChange={onSearchChange}\n        />\n      )}\n\n      {loading ? (\n        <p\n          className=\"mt-6 text-sm\"\n          style={{ color: 'var(--mb-text-tertiary)' }}\n        >\n          Loading…\n        </p>\n      ) : activeTab === 'plans' ? (\n        <ul className=\"mt-3 space-y-2\">\n          {plans.length === 0 && (\n            <li\n              className=\"rounded-2xl border px-3.5 py-6 text-center text-sm\"\n              style={{\n                borderColor: 'var(--mb-border)',\n                color: 'var(--mb-text-tertiary)',\n              }}\n            >\n              No plans yet.\n            </li>\n          )}\n          {plans.map((plan) => (\n            <li key={plan.id}>\n              <button\n                type=\"button\"\n                onClick={() => onOpenPlan(plan)}\n                className=\"flex w-full items-center gap-3 rounded-2xl border px-3.5 py-3 text-left\"\n                style={{\n                  borderColor: 'var(--mb-border)',\n                  background: 'var(--mb-card)',\n                }}\n              >\n                <span className=\"min-w-0 flex-1\">\n                  <span\n                    className=\"block truncate text-sm font-medium\"\n                    style={{ color: 'var(--mb-text)' }}\n                  >\n                    {plan.name}\n                  </span>\n                  <span\n                    className=\"block text-xs\"\n                    style={{ color: 'var(--mb-text-tertiary)' }}\n                  >\n                    {/* 0 is the placeholder a sum-of-items plan stores, not\n                          a price. It read as free here too. */}\n                    {plan.pricingKind === 'sum-of-items'\n                      ? 'Varies'\n                      : formatCurrency(plan.amount / 100, plan.currency)}{' '}\n                    · {intervalLabel(plan)}\n                  </span>\n                </span>\n                <ChevronRight\n                  className=\"size-4 shrink-0\"\n                  style={{ color: 'var(--mb-text-tertiary)' }}\n                />\n              </button>\n            </li>\n          ))}\n        </ul>\n      ) : (\n        <ul className=\"mt-3 space-y-2\">\n          {subscriptions.length === 0 && (\n            <li\n              className=\"rounded-2xl border px-3.5 py-6 text-center text-sm\"\n              style={{\n                borderColor: 'var(--mb-border)',\n                color: 'var(--mb-text-tertiary)',\n              }}\n            >\n              Nobody has joined yet.\n            </li>\n          )}\n          {subscriptions.map((subscription) => (\n            <li key={subscription.id}>\n              <button\n                type=\"button\"\n                onClick={() => onOpenSubscriber(subscription)}\n                className=\"flex w-full items-center gap-3 rounded-2xl border px-3.5 py-3 text-left\"\n                style={{\n                  borderColor:\n                    subscription.status === 'attention'\n                      ? 'var(--mb-warn)'\n                      : 'var(--mb-border)',\n                  background: 'var(--mb-card)',\n                }}\n              >\n                <span className=\"min-w-0 flex-1\">\n                  <span\n                    className=\"block truncate text-sm font-medium\"\n                    style={{ color: 'var(--mb-text)' }}\n                  >\n                    {subscription.customerEmail}\n                  </span>\n                  <span\n                    className=\"block text-xs\"\n                    style={{\n                      color:\n                        subscription.status === 'attention'\n                          ? 'var(--mb-warn)'\n                          : 'var(--mb-text-tertiary)',\n                    }}\n                  >\n                    {STATUS_LABEL[subscription.status] ?? subscription.status}\n                    {' · '}\n                    {formatCurrency(\n                      subscription.amount / 100,\n                      subscription.currency,\n                    )}\n                  </span>\n                </span>\n                <ChevronRight\n                  className=\"size-4 shrink-0\"\n                  style={{ color: 'var(--mb-text-tertiary)' }}\n                />\n              </button>\n            </li>\n          ))}\n        </ul>\n      )}\n    </MobileScreenFrame>\n  );\n}\n"],"mappings":"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","names":[]}