@withpotter/components 0.13.0-next.101

package/dist/sidebar/setup-progress.js

@@ -0,0 +1,349 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from "react";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { DeliveryStep, PayoutStep } from "@withpotter/components/dashboard/go-live-steps";
+import { SetupContactDialog } from "./setup-contact-dialog";
+import { taxAndPolicySteps } from "./setup-extra-steps";
+import { SetupStepSections } from "./setup-step-sections";
+import { useApiQuery } from "@withpotter/hooks/use-api-query";
+import { useEntityLabel } from "@withpotter/lib/intents/use-entity-label";
+import { onboardingApi } from "@withpotter/lib/api/onboarding";
+import { tenantApi } from "@withpotter/lib/api/tenant";
+import { WALLET_SETTLEMENT } from "@withpotter/lib/wallet-settlement";
+import { isHostCheck } from "@withpotter/lib/go-live-gate";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle
+} from "@withpotter/ui-kit/dialog";
+import {
+  SetupRing,
+  isSettled,
+  orderSteps,
+  relabelStep
+} from "@withpotter/components/dashboard/home/widgets/setup-steps";
+function row(stepKey, label, done, link) {
+  return {
+    id: stepKey,
+    stepKey,
+    label,
+    status: done ? "completed" : "pending",
+    link
+  };
+}
+const CHECKLIST_COVERS = {
+  payable: ["payments"],
+  sellable: [
+    "add_product",
+    "content_main",
+    "content_products",
+    "content_services",
+    "content_menu",
+    "content_packages"
+  ],
+  bookable: [
+    "add_product",
+    "content_main",
+    "content_products",
+    "content_services",
+    "content_menu",
+    "content_packages"
+  ],
+  schedulable: ["availability", "schedule"],
+  reachable: ["shipping"],
+  // The two profile rows below ask for exactly this.
+  contactable: ["profile_email", "profile_phone"]
+};
+function coversOf(key) {
+  return isHostCheck(key) ? [key] : CHECKLIST_COVERS[key];
+}
+const INLINE_HREF = "/dashboard";
+const INLINE_STEPS = {
+  profile_email: "email",
+  profile_phone: "phone",
+  live_reachable: "delivery",
+  shipping: "delivery",
+  // A bank account is finished here too, as it was in the old go-live gate.
+  live_payable: "payout",
+  payments: "payout"
+};
+const BRANDING_KEYS = ["branding", "customize_theme", "add_logo"];
+function useSetupData() {
+  const { tenant, refreshTenant } = useAuth();
+  const item = useEntityLabel("item");
+  const progressQuery = useApiQuery(
+    ["onboarding-progress"],
+    () => onboardingApi.getProgress(tenant.id),
+    // A refusal is not asked again each time another reader of this mounts.
+    { enabled: !!tenant?.id, retryOnMount: false }
+  );
+  const { data, refetch: refetchProgress } = progressQuery;
+  const readinessQuery = useApiQuery(
+    ["dashboard-storefront-readiness"],
+    (slug) => tenantApi.readiness(slug),
+    { retryOnMount: false }
+  );
+  const { data: readinessRaw, refetch: refetchReadiness } = readinessQuery;
+  const readiness = useMemo(
+    () => readinessRaw && WALLET_SETTLEMENT ? {
+      ...readinessRaw,
+      blockers: (readinessRaw.blockers ?? []).filter(
+        (b) => b.key !== "payable"
+      ),
+      satisfied: (readinessRaw.satisfied ?? []).filter(
+        (key) => key !== "payable"
+      )
+    } : readinessRaw,
+    [readinessRaw]
+  );
+  const firstAnswerPending = !progressQuery.isFetched && progressQuery.failureCount === 0 || !readinessQuery.isFetched && readinessQuery.failureCount === 0;
+  const answered = useRef(false);
+  if (!firstAnswerPending) answered.current = true;
+  const asking = !answered.current;
+  const satisfiedCovers = new Set(
+    (readiness?.satisfied ?? []).filter((key) => key !== "contactable").flatMap((key) => coversOf(key))
+  );
+  const checklist = orderSteps(data?.checklist?.steps ?? []).map((s) => {
+    const step = relabelStep(s, item.singular);
+    return satisfiedCovers.has(step.stepKey) && !isSettled(step) ? { ...step, status: "completed" } : step;
+  });
+  const checklistKeys = new Set(checklist.map((s) => s.stepKey));
+  const profile = [
+    row(
+      "profile_email",
+      "Add a contact email",
+      !!tenant?.contactEmail,
+      INLINE_HREF
+    ),
+    row(
+      "profile_phone",
+      "Add a phone number",
+      !!tenant?.contactPhone,
+      INLINE_HREF
+    ),
+    ...BRANDING_KEYS.some((k) => checklistKeys.has(k)) ? [] : [
+      row(
+        "profile_logo",
+        "Add your logo",
+        !!tenant?.businessLogo,
+        "/dashboard/settings#branding"
+      )
+    ],
+    ...taxAndPolicySteps(tenant?.settings)
+  ];
+  const goLiveLabel = {
+    sellable: `Add your first ${item.singular.toLowerCase()}`,
+    bookable: `Add a ${item.singular.toLowerCase()} people can book`,
+    schedulable: "Set the hours you take bookings",
+    payable: "Add a bank account",
+    reachable: "Add a delivery area",
+    contactable: "Add an email or phone number"
+  };
+  const goLiveLink = {
+    sellable: "/dashboard/catalog/new",
+    bookable: "/dashboard/catalog/new",
+    schedulable: "/dashboard/bookings?view=availability",
+    payable: "/dashboard/payments/payouts",
+    reachable: "/dashboard/business/shipping",
+    contactable: "/dashboard/settings#workspace-email"
+  };
+  const live = (readiness?.blockers ?? []).filter(
+    (b) => b.key !== "contactable" && !coversOf(b.key).some((k) => checklistKeys.has(k))
+  ).map(
+    (b) => isHostCheck(b.key) ? row(`live_${b.key}`, b.title, false, b.dashboardPath) : row(`live_${b.key}`, goLiveLabel[b.key], false, goLiveLink[b.key])
+  );
+  const liveDone = (readiness?.satisfied ?? []).filter(
+    (key) => key !== "contactable" && !isHostCheck(key) && !CHECKLIST_COVERS[key].some((k) => checklistKeys.has(k))
+  ).map((key) => row(`live_${key}`, goLiveLabel[key], true, goLiveLink[key]));
+  const outstanding = readiness?.blockers ?? [];
+  const requiredKeys = /* @__PURE__ */ new Set([
+    ...live.map((st) => st.stepKey),
+    ...liveDone.map((st) => st.stepKey),
+    ...outstanding.flatMap((b) => coversOf(b.key)),
+    ...outstanding.some((b) => b.key === "contactable") ? ["profile_email", "profile_phone"] : []
+  ]);
+  const isRequired = (st) => requiredKeys.has(st.stepKey);
+  const rest = [...profile, ...checklist, ...live, ...liveDone];
+  const sections = [
+    { title: "Needed to go live", steps: rest.filter(isRequired) },
+    {
+      title: "Your business",
+      steps: profile.filter((st) => !isRequired(st))
+    },
+    {
+      title: "Setting up",
+      steps: checklist.filter((st) => !isRequired(st))
+    }
+  ].filter((sec) => sec.steps.length > 0);
+  const all = sections.flatMap((sec) => sec.steps);
+  if (asking || all.length === 0) return null;
+  const done = all.filter(isSettled).length;
+  const total = all.length;
+  const next = all.find((st) => !isSettled(st));
+  if (done >= total) return null;
+  const pct = Math.round(done / total * 100);
+  return {
+    tenant,
+    refreshTenant,
+    sections,
+    all,
+    done,
+    total,
+    next,
+    pct,
+    isRequired,
+    refetchProgress,
+    refetchReadiness
+  };
+}
+function SetupDialog({
+  open,
+  onOpenChange,
+  mode = "setup",
+  onFixed
+}) {
+  const [inline, setInline] = useState(null);
+  const setup = useSetupData();
+  if (!setup) return null;
+  const {
+    tenant,
+    refreshTenant,
+    sections,
+    done,
+    total,
+    next,
+    pct,
+    isRequired,
+    all,
+    refetchProgress,
+    refetchReadiness
+  } = setup;
+  const needed = all.filter((st) => isRequired(st) && !isSettled(st)).length;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
+      DialogContent,
+      {
+        "aria-label": "Complete your setup",
+        className: "max-h-[85vh] max-w-[440px] overflow-y-auto p-6",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+            /* @__PURE__ */ jsx("span", { role: "img", "aria-label": `${done} of ${total} steps done`, children: /* @__PURE__ */ jsx(SetupRing, { done, total, showCount: false }) }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx(DialogTitle, { className: "text-lg font-semibold text-[var(--text-primary)]", children: "Complete your setup" }),
+              /* @__PURE__ */ jsxs(DialogDescription, { className: "mt-0.5 text-md text-[var(--text-tertiary)]", children: [
+                mode === "go-live" && needed > 0 ? `${needed} left to go live` : `${done} of ${total} done \xB7 ${pct}%`,
+                next ? ` \xB7 Next: ${next.label}` : ""
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            SetupStepSections,
+            {
+              sections,
+              isRequired,
+              onActivate: (step) => {
+                const inlineKey = INLINE_STEPS[step.stepKey];
+                if (inlineKey) {
+                  setInline(inlineKey);
+                  return true;
+                }
+                onOpenChange(false);
+              }
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      SetupContactDialog,
+      {
+        field: inline === "email" || inline === "phone" ? inline : null,
+        tenantSlug: tenant?.slug ?? "",
+        onClose: () => setInline(null),
+        onSaved: async () => {
+          await refreshTenant();
+          await refetchReadiness();
+          await onFixed?.();
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DeliveryStep,
+      {
+        open: inline === "delivery",
+        onOpenChange: (v) => setInline(v ? "delivery" : null),
+        tenantSlug: tenant?.slug ?? "",
+        onFixed: async () => {
+          setInline(null);
+          await Promise.all([refetchReadiness(), refetchProgress()]);
+          await onFixed?.();
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PayoutStep,
+      {
+        open: inline === "payout",
+        onOpenChange: (v) => setInline(v ? "payout" : null),
+        tenantSlug: tenant?.slug ?? "",
+        onFixed: async () => {
+          setInline(null);
+          await Promise.all([refetchReadiness(), refetchProgress()]);
+          await onFixed?.();
+        }
+      }
+    )
+  ] });
+}
+function useSetupProgress() {
+  const setup = useSetupData();
+  return setup ? { done: setup.done, total: setup.total } : null;
+}
+function SetupProgress({ stacked = false } = {}) {
+  const [open, setOpen] = useState(false);
+  const setup = useSetupData();
+  if (!setup) return null;
+  const { pct } = setup;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen(true),
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        className: stacked ? "side-setup side-stack-card side-stack-back" : "side-setup",
+        "aria-label": `Setup ${pct}% complete. See what is left`,
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "side-setup-row", children: [
+            /* @__PURE__ */ jsx("span", { children: "Complete your setup" }),
+            /* @__PURE__ */ jsxs("b", { children: [
+              pct,
+              "%"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "side-setup-track",
+              role: "progressbar",
+              "aria-valuemin": 0,
+              "aria-valuemax": 100,
+              "aria-valuenow": pct,
+              children: /* @__PURE__ */ jsx("span", { className: "side-setup-fill", style: { width: `${pct}%` } })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(SetupDialog, { open, onOpenChange: setOpen })
+  ] });
+}
+export {
+  SetupDialog,
+  SetupProgress,
+  useSetupProgress
+};
+//# sourceMappingURL=setup-progress.js.map

package/dist/sidebar/setup-progress.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/sidebar/setup-progress.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo, useRef, useState } from 'react';\nimport { useAuth } from '@withpotter/lib/auth-context';\nimport { DeliveryStep, PayoutStep } from '@withpotter/components/dashboard/go-live-steps';\nimport { SetupContactDialog } from './setup-contact-dialog';\nimport { taxAndPolicySteps } from './setup-extra-steps';\nimport { SetupStepSections } from './setup-step-sections';\nimport { useApiQuery } from '@withpotter/hooks/use-api-query';\nimport { useEntityLabel } from '@withpotter/lib/intents/use-entity-label';\nimport { onboardingApi } from '@withpotter/lib/api/onboarding';\nimport { tenantApi } from '@withpotter/lib/api/tenant';\nimport { WALLET_SETTLEMENT } from '@withpotter/lib/wallet-settlement';\nimport { isHostCheck } from '@withpotter/lib/go-live-gate';\nimport type {\n  CoreReadinessKey,\n  OnboardingProgress,\n  OnboardingStep,\n  ReadinessBlocker,\n  StorefrontReadiness,\n} from '@withpotter/lib/api/types';\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n} from '@withpotter/ui-kit/dialog';\nimport {\n  SetupRing,\n  isSettled,\n  orderSteps,\n  relabelStep,\n} from '@withpotter/components/dashboard/home/widgets/setup-steps';\n\n/** A row the checklist API does not send, in the shape its rows are drawn in. */\nfunction row(\n  stepKey: string,\n  label: string,\n  done: boolean,\n  link: string,\n): OnboardingStep {\n  return {\n    id: stepKey,\n    stepKey,\n    label,\n    status: done ? 'completed' : 'pending',\n    link,\n  };\n}\n\n/** Checklist steps that already ask for what each go-live check asks for. */\nconst CHECKLIST_COVERS: Record<CoreReadinessKey, string[]> = {\n  payable: ['payments'],\n  sellable: [\n    'add_product',\n    'content_main',\n    'content_products',\n    'content_services',\n    'content_menu',\n    'content_packages',\n  ],\n  bookable: [\n    'add_product',\n    'content_main',\n    'content_products',\n    'content_services',\n    'content_menu',\n    'content_packages',\n  ],\n  schedulable: ['availability', 'schedule'],\n  reachable: ['shipping'],\n  // The two profile rows below ask for exactly this.\n  contactable: ['profile_email', 'profile_phone'],\n};\n\n/** The checklist steps a check covers. A host check is covered by the step with its own key. */\nfunction coversOf(key: ReadinessBlocker['key']): string[] {\n  return isHostCheck(key) ? [key] : CHECKLIST_COVERS[key];\n}\n\n/**\n * The address of a row that is finished in a dialog and never navigates.\n *\n * NOT a settings path. The shell opens the settings window on any click on a\n * link into `/dashboard/settings`, in the capture phase, before the row's own\n * handler can cancel it — so these rows opened their dialog AND the settings\n * window behind it. The press is always cancelled, so the address is only what\n * the row is drawn as.\n */\nconst INLINE_HREF = '/dashboard';\n\n/** Rows finished in a dialog over the checklist instead of on a page. */\nconst INLINE_STEPS: Record<string, 'email' | 'phone' | 'delivery' | 'payout'> =\n  {\n    profile_email: 'email',\n    profile_phone: 'phone',\n    live_reachable: 'delivery',\n    shipping: 'delivery',\n    // A bank account is finished here too, as it was in the old go-live gate.\n    live_payable: 'payout',\n    payments: 'payout',\n  };\n\n/** Steps that put a logo and colours on the business, so a logo row is not\n *  asked for twice. */\nconst BRANDING_KEYS = ['branding', 'customize_theme', 'add_logo'];\n\n/**\n * How far through setting up this business is, as a bar and a percentage in the\n * foot of the rail, on every screen. Pressing it opens the whole checklist.\n *\n * It reads the same checklist as the home's \"Finish setting up\" card (the same\n * query key and the same rows from `setup-steps`), and that card draws its ring\n * from the count made here, through `useSetupProgress`, so the two can never\n * show different numbers. In the window each step is a row that goes to where\n * it is done, and the window closes as you leave for it.\n *\n * It leaves when the checklist is done, as that card does, and draws nothing\n * while the answer is loading or when there is no checklist. The caller hides it\n * on the collapsed rail, which has no room for a sentence and a bar.\n */\nfunction useSetupData() {\n  const { tenant, refreshTenant } = useAuth();\n  const item = useEntityLabel('item');\n  /** The step being finished in a dialog over this one, rather than on a page. */\n  const progressQuery = useApiQuery<OnboardingProgress>(\n    ['onboarding-progress'],\n    () => onboardingApi.getProgress(tenant!.id),\n    // A refusal is not asked again each time another reader of this mounts.\n    { enabled: !!tenant?.id, retryOnMount: false },\n  );\n  const { data, refetch: refetchProgress } = progressQuery;\n\n  const readinessQuery = useApiQuery<StorefrontReadiness>(\n    ['dashboard-storefront-readiness'],\n    (slug) => tenantApi.readiness(slug),\n    { retryOnMount: false },\n  );\n  const { data: readinessRaw, refetch: refetchReadiness } = readinessQuery;\n\n  // A wallet box has no payout account, so \"payable\" is neither a thing to\n  // finish nor a thing that was finished. Dropped from both lists here, which\n  // is what every row below is built from.\n  // Memoised: effects further down watch `readiness`, and a fresh object every\n  // render made them refetch on every render, which never ends.\n  const readiness: StorefrontReadiness | undefined = useMemo(\n    () =>\n      readinessRaw && WALLET_SETTLEMENT\n        ? {\n            ...readinessRaw,\n            blockers: (readinessRaw.blockers ?? []).filter(\n              (b) => b.key !== 'payable',\n            ),\n            satisfied: (readinessRaw.satisfied ?? []).filter(\n              (key) => key !== 'payable',\n            ),\n          }\n        : readinessRaw,\n    [readinessRaw],\n  );\n\n  // NO NUMBER UNTIL BOTH HAVE ANSWERED. The percentage is counted over three\n  // lists: the profile rows, which are known at once, and the checklist and the\n  // go-live checks, which each arrive on a request of their own. Counted before\n  // those landed it was the profile rows alone, so the rail read 33%, then 43%\n  // a moment later, for a business that had changed nothing.\n  //\n  // \"Answered\" includes a first refusal. A backend that does not serve one of\n  // these routes will not serve it on the retry either, and holding the bar\n  // back for the whole retry window would hide it for no better number.\n  //\n  // ONCE ANSWERED, ALWAYS ANSWERED. A refused query asks again when something\n  // new starts reading it, and for that moment it is pending with no failures\n  // counted, exactly as it was the first time. Deciding from that alone hid the\n  // card, which unmounted its readers, which showed it again when the request\n  // was refused, which mounted them, which asked again: thousands of requests\n  // a minute against a backend that had already said no. `isFetched` does not\n  // go back, and the ref keeps the card up through any later refetch.\n  const firstAnswerPending =\n    (!progressQuery.isFetched && progressQuery.failureCount === 0) ||\n    (!readinessQuery.isFetched && readinessQuery.failureCount === 0);\n  const answered = useRef(false);\n  if (!firstAnswerPending) answered.current = true;\n  const asking = !answered.current;\n\n  // Two sources say what is finished: the onboarding checklist and the\n  // readiness check that gates going live. They are read at different times and\n  // can disagree, and the list should never show something as missing that the\n  // check has already passed. A step the readiness check covers is done when\n  // that check is. `contactable` is left out: it passes on an email OR a phone,\n  // so it cannot say both are done.\n  const satisfiedCovers = new Set(\n    (readiness?.satisfied ?? [])\n      .filter((key) => key !== 'contactable')\n      .flatMap((key) => coversOf(key)),\n  );\n  const checklist = orderSteps(data?.checklist?.steps ?? []).map((s) => {\n    const step = relabelStep(s, item.singular);\n    return satisfiedCovers.has(step.stepKey) && !isSettled(step)\n      ? { ...step, status: 'completed' as const }\n      : step;\n  });\n  const checklistKeys = new Set(checklist.map((s) => s.stepKey));\n\n  // The business's own details: how a customer reaches it, and how it looks.\n  const profile = [\n    row(\n      'profile_email',\n      'Add a contact email',\n      !!tenant?.contactEmail,\n      INLINE_HREF,\n    ),\n    row(\n      'profile_phone',\n      'Add a phone number',\n      !!tenant?.contactPhone,\n      INLINE_HREF,\n    ),\n    ...(BRANDING_KEYS.some((k) => checklistKeys.has(k))\n      ? []\n      : [\n          row(\n            'profile_logo',\n            'Add your logo',\n            !!tenant?.businessLogo,\n            '/dashboard/settings#branding',\n          ),\n        ]),\n    ...taxAndPolicySteps(tenant?.settings),\n  ];\n\n  // What still stops it opening, that the checklist above does not already say.\n  const goLiveLabel: Record<CoreReadinessKey, string> = {\n    sellable: `Add your first ${item.singular.toLowerCase()}`,\n    bookable: `Add a ${item.singular.toLowerCase()} people can book`,\n    schedulable: 'Set the hours you take bookings',\n    payable: 'Add a bank account',\n    reachable: 'Add a delivery area',\n    contactable: 'Add an email or phone number',\n  };\n  const goLiveLink: Record<CoreReadinessKey, string> = {\n    sellable: '/dashboard/catalog/new',\n    bookable: '/dashboard/catalog/new',\n    schedulable: '/dashboard/bookings?view=availability',\n    payable: '/dashboard/payments/payouts',\n    reachable: '/dashboard/business/shipping',\n    contactable: '/dashboard/settings#workspace-email',\n  };\n  const live = (readiness?.blockers ?? [])\n    .filter(\n      (b) =>\n        b.key !== 'contactable' &&\n        !coversOf(b.key).some((k) => checklistKeys.has(k)),\n    )\n    .map((b) =>\n      isHostCheck(b.key)\n        ? row(`live_${b.key}`, b.title, false, b.dashboardPath)\n        : row(`live_${b.key}`, goLiveLabel[b.key], false, goLiveLink[b.key]),\n    );\n\n  /**\n   * THE ONES THAT STAND BETWEEN THE BUSINESS AND GOING LIVE, marked with a red\n   * asterisk and listed first. A row is required when the server still reports\n   * the go-live check it answers: a delivery area, a payout account, something\n   * to sell, a way to be reached. Everything else is worth doing and does not\n   * stop the site opening.\n   */\n  // What is already satisfied is a done row, not a missing one, so the list\n  // shows what the business has finished as well as what is left.\n  // A host check that passed has no label of its own here; its checklist step\n  // (same key) already shows it done, through `satisfiedCovers` above.\n  const liveDone = (readiness?.satisfied ?? [])\n    .filter(\n      (key): key is CoreReadinessKey =>\n        key !== 'contactable' &&\n        !isHostCheck(key) &&\n        !CHECKLIST_COVERS[key].some((k) => checklistKeys.has(k)),\n    )\n    .map((key) => row(`live_${key}`, goLiveLabel[key], true, goLiveLink[key]));\n\n  const outstanding = readiness?.blockers ?? [];\n  const requiredKeys = new Set<string>([\n    ...live.map((st) => st.stepKey),\n    ...liveDone.map((st) => st.stepKey),\n    ...outstanding.flatMap((b) => coversOf(b.key)),\n    ...(outstanding.some((b) => b.key === 'contactable')\n      ? ['profile_email', 'profile_phone']\n      : []),\n  ]);\n  const isRequired = (st: OnboardingStep) => requiredKeys.has(st.stepKey);\n  const rest = [...profile, ...checklist, ...live, ...liveDone];\n\n  const sections = [\n    { title: 'Needed to go live', steps: rest.filter(isRequired) },\n    {\n      title: 'Your business',\n      steps: profile.filter((st) => !isRequired(st)),\n    },\n    {\n      title: 'Setting up',\n      steps: checklist.filter((st) => !isRequired(st)),\n    },\n  ].filter((sec) => sec.steps.length > 0);\n  const all = sections.flatMap((sec) => sec.steps);\n  if (asking || all.length === 0) return null;\n\n  const done = all.filter(isSettled).length;\n  const total = all.length;\n  const next = all.find((st) => !isSettled(st));\n  if (done >= total) return null;\n  const pct = Math.round((done / total) * 100);\n\n  return {\n    tenant,\n    refreshTenant,\n    sections,\n    all,\n    done,\n    total,\n    next,\n    pct,\n    isRequired,\n    refetchProgress,\n    refetchReadiness,\n  };\n}\n\n/**\n * The Complete your setup list, as a dialog anything can open: the sidebar's\n * progress pill, and Publish when something still stands in the way.\n *\n * Publish used to open its own, older dialog with a list of its own. Two lists\n * for one question drift, and the second never showed what had already been\n * done. There is one now. `mode=\"go-live\"` only changes the line under the\n * title, to how many of the needed items are left.\n */\nexport function SetupDialog({\n  open,\n  onOpenChange,\n  mode = 'setup',\n  onFixed,\n}: {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  mode?: 'setup' | 'go-live';\n  /** Re-run whatever opened this once something was set up from in here. */\n  onFixed?: () => void | Promise<void>;\n}) {\n  const [inline, setInline] = useState<\n    'email' | 'phone' | 'delivery' | 'payout' | null\n  >(null);\n  const setup = useSetupData();\n  if (!setup) return null;\n  const {\n    tenant,\n    refreshTenant,\n    sections,\n    done,\n    total,\n    next,\n    pct,\n    isRequired,\n    all,\n    refetchProgress,\n    refetchReadiness,\n  } = setup;\n  const needed = all.filter((st) => isRequired(st) && !isSettled(st)).length;\n\n  return (\n    <>\n      <Dialog open={open} onOpenChange={onOpenChange}>\n        <DialogContent\n          aria-label=\"Complete your setup\"\n          className=\"max-h-[85vh] max-w-[440px] overflow-y-auto p-6\"\n        >\n          <div className=\"flex items-center gap-4\">\n            {/* The ring draws the count; this says it. */}\n            <span role=\"img\" aria-label={`${done} of ${total} steps done`}>\n              <SetupRing done={done} total={total} showCount={false} />\n            </span>\n            <div className=\"min-w-0\">\n              <DialogTitle className=\"text-lg font-semibold text-[var(--text-primary)]\">\n                Complete your setup\n              </DialogTitle>\n              <DialogDescription className=\"mt-0.5 text-md text-[var(--text-tertiary)]\">\n                {mode === 'go-live' && needed > 0\n                  ? `${needed} left to go live`\n                  : `${done} of ${total} done · ${pct}%`}\n                {next ? ` · Next: ${next.label}` : ''}\n              </DialogDescription>\n            </div>\n          </div>\n\n          <SetupStepSections\n            sections={sections}\n            isRequired={isRequired}\n            onActivate={(step) => {\n              // These are finished here, in a dialog over the list, so the\n              // list is still there when they are done.\n              const inlineKey = INLINE_STEPS[step.stepKey];\n              if (inlineKey) {\n                setInline(inlineKey);\n                return true;\n              }\n              onOpenChange(false);\n            }}\n          />\n        </DialogContent>\n      </Dialog>\n\n      <SetupContactDialog\n        field={inline === 'email' || inline === 'phone' ? inline : null}\n        tenantSlug={tenant?.slug ?? ''}\n        onClose={() => setInline(null)}\n        onSaved={async () => {\n          await refreshTenant();\n          await refetchReadiness();\n          await onFixed?.();\n        }}\n      />\n      <DeliveryStep\n        open={inline === 'delivery'}\n        onOpenChange={(v) => setInline(v ? 'delivery' : null)}\n        tenantSlug={tenant?.slug ?? ''}\n        onFixed={async () => {\n          setInline(null);\n          await Promise.all([refetchReadiness(), refetchProgress()]);\n          await onFixed?.();\n        }}\n      />\n      <PayoutStep\n        open={inline === 'payout'}\n        onOpenChange={(v) => setInline(v ? 'payout' : null)}\n        tenantSlug={tenant?.slug ?? ''}\n        onFixed={async () => {\n          setInline(null);\n          await Promise.all([refetchReadiness(), refetchProgress()]);\n          await onFixed?.();\n        }}\n      />\n    </>\n  );\n}\n\n/**\n * The one count of how far through setup this business is, for a surface that\n * draws it without the list. Null while it is being worked out and once\n * everything is done.\n */\nexport function useSetupProgress(): { done: number; total: number } | null {\n  const setup = useSetupData();\n  return setup ? { done: setup.done, total: setup.total } : null;\n}\n\nexport function SetupProgress({ stacked = false }: { stacked?: boolean } = {}) {\n  const [open, setOpen] = useState(false);\n  const setup = useSetupData();\n  if (!setup) return null;\n  const { pct } = setup;\n\n  return (\n    <>\n      <button\n        type=\"button\"\n        onClick={() => setOpen(true)}\n        aria-haspopup=\"dialog\"\n        aria-expanded={open}\n        className={stacked ? 'side-setup side-stack-card side-stack-back' : 'side-setup'}\n        aria-label={`Setup ${pct}% complete. See what is left`}\n      >\n        <span className=\"side-setup-row\">\n          <span>Complete your setup</span>\n          <b>{pct}%</b>\n        </span>\n        <span\n          className=\"side-setup-track\"\n          role=\"progressbar\"\n          aria-valuemin={0}\n          aria-valuemax={100}\n          aria-valuenow={pct}\n        >\n          <span className=\"side-setup-fill\" style={{ width: `${pct}%` }} />\n        </span>\n      </button>\n\n      <SetupDialog open={open} onOpenChange={setOpen} />\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/sidebar/setup-step-sections.d.ts

@@ -0,0 +1,20 @@
+import type { OnboardingStep } from '@withpotter/lib/api/types';
+/**
+ * `NEXT_PUBLIC_BOX_SETUP_FOLD_DONE=true`: the setup window lists only what is
+ * left, and folds every finished step into one "N done" row that opens to show
+ * them. Unset, every step is listed in its section, finished or not.
+ */
+export declare const SETUP_FOLD_DONE: boolean;
+export type SetupSection = {
+    title: string;
+    steps: OnboardingStep[];
+};
+type RowProps = {
+    isRequired: (step: OnboardingStep) => boolean;
+    onActivate: (step: OnboardingStep) => boolean | void;
+};
+/** The steps of Complete your setup, listed or folded as the box asks. */
+export declare function SetupStepSections(props: {
+    sections: SetupSection[];
+} & RowProps): import("react").JSX.Element;
+export {};

package/dist/sidebar/setup-step-sections.js

@@ -0,0 +1,96 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { Check, ChevronDown } from "lucide-react";
+import {
+  SetupStepRow,
+  isSettled
+} from "@withpotter/components/dashboard/home/widgets/setup-steps";
+const SETUP_FOLD_DONE = process.env.NEXT_PUBLIC_BOX_SETUP_FOLD_DONE === "true";
+function Section({
+  title,
+  steps,
+  isRequired,
+  onActivate
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: "mt-4", children: [
+    /* @__PURE__ */ jsx("h3", { className: "mb-2 px-1 text-xs font-medium uppercase tracking-wide text-[var(--text-tertiary)]", children: title }),
+    /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: steps.map((st) => /* @__PURE__ */ jsx(
+      SetupStepRow,
+      {
+        step: st,
+        large: true,
+        required: isRequired(st),
+        onActivate
+      },
+      st.stepKey
+    )) })
+  ] });
+}
+function AllSections({
+  sections,
+  ...rows
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: sections.map((sec) => /* @__PURE__ */ jsx(Section, { ...sec, ...rows }, sec.title)) });
+}
+function FoldedSections({
+  sections,
+  ...rows
+}) {
+  const [showDone, setShowDone] = useState(false);
+  const doneId = useId();
+  const left = sections.map((sec) => ({ ...sec, steps: sec.steps.filter((st) => !isSettled(st)) })).filter((sec) => sec.steps.length > 0);
+  const done = sections.flatMap((sec) => sec.steps.filter(isSettled));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    left.map((sec) => /* @__PURE__ */ jsx(Section, { ...sec, ...rows }, sec.title)),
+    done.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-4 border-t border-[var(--border-subtle)] pt-3", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-expanded": showDone,
+          "aria-controls": doneId,
+          onClick: () => setShowDone((open) => !open),
+          className: "flex w-full items-center gap-3 rounded-lg px-1 py-2 text-left text-sm font-medium text-[var(--text-secondary)] transition-colors hover:bg-[var(--interactive-hover)] hover:text-[var(--text-primary)]",
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                className: "grid size-5 shrink-0 place-items-center rounded-full bg-[var(--brand-500)] text-white",
+                children: /* @__PURE__ */ jsx(Check, { className: "size-3", strokeWidth: 3 })
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "flex-1", children: [
+              done.length,
+              " done"
+            ] }),
+            /* @__PURE__ */ jsx(
+              ChevronDown,
+              {
+                "aria-hidden": true,
+                className: `size-4 shrink-0 text-[var(--text-muted)] transition-transform motion-reduce:transition-none ${showDone ? "rotate-180" : ""}`
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("ul", { id: doneId, hidden: !showDone, className: "mt-1 space-y-0.5 pl-3", children: done.map((st) => /* @__PURE__ */ jsx(
+        SetupStepRow,
+        {
+          step: st,
+          onActivate: rows.onActivate
+        },
+        st.stepKey
+      )) })
+    ] })
+  ] });
+}
+function SetupStepSections(props) {
+  return SETUP_FOLD_DONE ? /* @__PURE__ */ jsx(FoldedSections, { ...props }) : /* @__PURE__ */ jsx(AllSections, { ...props });
+}
+export {
+  SETUP_FOLD_DONE,
+  SetupStepSections
+};
+//# sourceMappingURL=setup-step-sections.js.map

package/dist/sidebar/setup-step-sections.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/sidebar/setup-step-sections.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\nimport { Check, ChevronDown } from 'lucide-react';\nimport type { OnboardingStep } from '@withpotter/lib/api/types';\nimport {\n  SetupStepRow,\n  isSettled,\n} from '@withpotter/components/dashboard/home/widgets/setup-steps';\n\n/**\n * `NEXT_PUBLIC_BOX_SETUP_FOLD_DONE=true`: the setup window lists only what is\n * left, and folds every finished step into one \"N done\" row that opens to show\n * them. Unset, every step is listed in its section, finished or not.\n */\nexport const SETUP_FOLD_DONE =\n  process.env.NEXT_PUBLIC_BOX_SETUP_FOLD_DONE === 'true';\n\nexport type SetupSection = { title: string; steps: OnboardingStep[] };\n\ntype RowProps = {\n  isRequired: (step: OnboardingStep) => boolean;\n  onActivate: (step: OnboardingStep) => boolean | void;\n};\n\nfunction Section({\n  title,\n  steps,\n  isRequired,\n  onActivate,\n}: SetupSection & RowProps) {\n  return (\n    <section className=\"mt-4\">\n      <h3 className=\"mb-2 px-1 text-xs font-medium uppercase tracking-wide text-[var(--text-tertiary)]\">\n        {title}\n      </h3>\n      <ul className=\"space-y-1\">\n        {steps.map((st) => (\n          <SetupStepRow\n            key={st.stepKey}\n            step={st}\n            large\n            required={isRequired(st)}\n            onActivate={onActivate}\n          />\n        ))}\n      </ul>\n    </section>\n  );\n}\n\n/** Every step, finished or not, in its section: the list as it always was. */\nfunction AllSections({\n  sections,\n  ...rows\n}: { sections: SetupSection[] } & RowProps) {\n  return (\n    <>\n      {sections.map((sec) => (\n        <Section key={sec.title} {...sec} {...rows} />\n      ))}\n    </>\n  );\n}\n\n/**\n * What is left, in the same sections and order (\"Needed to go live\" first),\n * then one row for everything finished. The list gets shorter as the business\n * gets further, instead of staying as long as it started.\n */\nfunction FoldedSections({\n  sections,\n  ...rows\n}: { sections: SetupSection[] } & RowProps) {\n  const [showDone, setShowDone] = useState(false);\n  const doneId = useId();\n  const left = sections\n    .map((sec) => ({ ...sec, steps: sec.steps.filter((st) => !isSettled(st)) }))\n    .filter((sec) => sec.steps.length > 0);\n  const done = sections.flatMap((sec) => sec.steps.filter(isSettled));\n\n  return (\n    <>\n      {left.map((sec) => (\n        <Section key={sec.title} {...sec} {...rows} />\n      ))}\n      {done.length > 0 && (\n        <div className=\"mt-4 border-t border-[var(--border-subtle)] pt-3\">\n          <button\n            type=\"button\"\n            aria-expanded={showDone}\n            aria-controls={doneId}\n            onClick={() => setShowDone((open) => !open)}\n            className=\"flex w-full items-center gap-3 rounded-lg px-1 py-2 text-left text-sm font-medium text-[var(--text-secondary)] transition-colors hover:bg-[var(--interactive-hover)] hover:text-[var(--text-primary)]\"\n          >\n            <span\n              aria-hidden\n              className=\"grid size-5 shrink-0 place-items-center rounded-full bg-[var(--brand-500)] text-white\"\n            >\n              <Check className=\"size-3\" strokeWidth={3} />\n            </span>\n            <span className=\"flex-1\">{done.length} done</span>\n            <ChevronDown\n              aria-hidden\n              className={`size-4 shrink-0 text-[var(--text-muted)] transition-transform motion-reduce:transition-none ${\n                showDone ? 'rotate-180' : ''\n              }`}\n            />\n          </button>\n          <ul id={doneId} hidden={!showDone} className=\"mt-1 space-y-0.5 pl-3\">\n            {done.map((st) => (\n              <SetupStepRow\n                key={st.stepKey}\n                step={st}\n                onActivate={rows.onActivate}\n              />\n            ))}\n          </ul>\n        </div>\n      )}\n    </>\n  );\n}\n\n/** The steps of Complete your setup, listed or folded as the box asks. */\nexport function SetupStepSections(\n  props: { sections: SetupSection[] } & RowProps,\n) {\n  return SETUP_FOLD_DONE ? (\n    <FoldedSections {...props} />\n  ) : (\n    <AllSections {...props} />\n  );\n}\n"],"mappings":";AAgCI,SAyBA,UAxBE,KADF;AA9BJ,SAAS,OAAO,gBAAgB;AAChC,SAAS,OAAO,mBAAmB;AAEnC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAOA,MAAM,kBACX,QAAQ,IAAI,oCAAoC;AASlD,SAAS,QAAQ;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAC1B,SACE,qBAAC,aAAQ,WAAU,QACjB;AAAA,wBAAC,QAAG,WAAU,qFACX,iBACH;AAAA,IACA,oBAAC,QAAG,WAAU,aACX,gBAAM,IAAI,CAAC,OACV;AAAA,MAAC;AAAA;AAAA,QAEC,MAAM;AAAA,QACN,OAAK;AAAA,QACL,UAAU,WAAW,EAAE;AAAA,QACvB;AAAA;AAAA,MAJK,GAAG;AAAA,IAKV,CACD,GACH;AAAA,KACF;AAEJ;AAGA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA,GAAG;AACL,GAA4C;AAC1C,SACE,gCACG,mBAAS,IAAI,CAAC,QACb,oBAAC,WAAyB,GAAG,KAAM,GAAG,QAAxB,IAAI,KAA0B,CAC7C,GACH;AAEJ;AAOA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA,GAAG;AACL,GAA4C;AAC1C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,SAAS,MAAM;AACrB,QAAM,OAAO,SACV,IAAI,CAAC,SAAS,EAAE,GAAG,KAAK,OAAO,IAAI,MAAM,OAAO,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC,EAAE,EAAE,EAC1E,OAAO,CAAC,QAAQ,IAAI,MAAM,SAAS,CAAC;AACvC,QAAM,OAAO,SAAS,QAAQ,CAAC,QAAQ,IAAI,MAAM,OAAO,SAAS,CAAC;AAElE,SACE,iCACG;AAAA,SAAK,IAAI,CAAC,QACT,oBAAC,WAAyB,GAAG,KAAM,GAAG,QAAxB,IAAI,KAA0B,CAC7C;AAAA,IACA,KAAK,SAAS,KACb,qBAAC,SAAI,WAAU,oDACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,iBAAe;AAAA,UACf,iBAAe;AAAA,UACf,SAAS,MAAM,YAAY,CAAC,SAAS,CAAC,IAAI;AAAA,UAC1C,WAAU;AAAA,UAEV;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,eAAW;AAAA,gBACX,WAAU;AAAA,gBAEV,8BAAC,SAAM,WAAU,UAAS,aAAa,GAAG;AAAA;AAAA,YAC5C;AAAA,YACA,qBAAC,UAAK,WAAU,UAAU;AAAA,mBAAK;AAAA,cAAO;AAAA,eAAK;AAAA,YAC3C;AAAA,cAAC;AAAA;AAAA,gBACC,eAAW;AAAA,gBACX,WAAW,+FACT,WAAW,eAAe,EAC5B;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MACF;AAAA,MACA,oBAAC,QAAG,IAAI,QAAQ,QAAQ,CAAC,UAAU,WAAU,yBAC1C,eAAK,IAAI,CAAC,OACT;AAAA,QAAC;AAAA;AAAA,UAEC,MAAM;AAAA,UACN,YAAY,KAAK;AAAA;AAAA,QAFZ,GAAG;AAAA,MAGV,CACD,GACH;AAAA,OACF;AAAA,KAEJ;AAEJ;AAGO,SAAS,kBACd,OACA;AACA,SAAO,kBACL,oBAAC,kBAAgB,GAAG,OAAO,IAE3B,oBAAC,eAAa,GAAG,OAAO;AAE5B;","names":[]}

package/dist/sidebar/spine-customers.d.ts

@@ -0,0 +1,7 @@
+import { type NavItem, type NavGroup } from './config';
+export declare function buildCustomersGroup({ filterItems, takesMoney, runsSubscriptions, runsMembershipArchetype, }: {
+    filterItems: (items: NavItem[]) => NavItem[];
+    takesMoney: boolean;
+    runsSubscriptions: boolean;
+    runsMembershipArchetype: boolean;
+}): NavGroup;

package/dist/sidebar/spine-customers.js

@@ -0,0 +1,81 @@
+import { Users, Gift, RefreshCw } from "lucide-react";
+import { INTENT_ITEM_PERMISSIONS } from "./nav-permissions";
+function buildCustomersGroup({
+  filterItems,
+  takesMoney,
+  runsSubscriptions,
+  runsMembershipArchetype
+}) {
+  return {
+    id: "customers",
+    label: "Customers",
+    icon: Users,
+    href: "/dashboard/customers",
+    // The directory itself. Named for what it lists, not "Overview" — it is a
+    // table, not a summary. `{label}` so a tenant who calls these Guests gets
+    // "All guests" rather than "All customers" under a hub reading "Guests".
+    landingLabel: "All {label}",
+    requiredPermission: ["canViewMembers", "canManageMembers"],
+    alwaysHub: true,
+    items: filterItems(
+      [
+        /**
+         * The people paying every month — for the businesses that have no
+         * Memberships hub to hold them.
+         *
+         * A membership business gets one from the archetype, with Plans and
+         * Members as its two children, so this row was the second door onto a
+         * module that already had one: "Members" here and "Memberships" under
+         * Operations, two sections apart, both landing on the same screen.
+         *
+         * A shop that merely switched `subscribable` on in Settings → Business
+         * model has no such row — the archetype is what contributes it — so
+         * without this it would have no way to reach its subscribers at all.
+         * That is the case this keeps, and the only one.
+         */
+        runsSubscriptions && !runsMembershipArchetype ? {
+          id: "subscribers",
+          name: "Members",
+          href: "/dashboard/subscriptions?tab=subscribers",
+          icon: RefreshCw,
+          requiredPermission: INTENT_ITEM_PERMISSIONS.subscribers
+        } : null,
+        /**
+         * No Inbox here: it is a top-level row under Home, carrying the
+         * unread count (see `inbox-row.ts`). It left this hub on John's
+         * decision of 2026-10-11 because it is the screen checked most often
+         * and a disclosure down is too deep for it.
+         */
+        /**
+         * Loyalty, which used to sit under Marketing.
+         *
+         * It is a programme about PEOPLE — who is in, what tier they reached,
+         * who they brought — and the people are already here, next to Segments.
+         * Marketing is what you send and what it earned; a member's points
+         * balance is neither.
+         *
+         * Referrals is NOT here, and that is John's call (2026-08-26).
+         *
+         * It sat under this row on the argument that a referral and a point
+         * are the same kind of fact — a member earning something — reachable
+         * only through a link at the bottom of the Loyalty page. Points is how
+         * it PAYS, not what it is: a referral is a customer being asked to
+         * bring you another customer, which is an acquisition channel and
+         * belongs beside the other things you send out. It is a row under
+         * Marketing now, and it can be run from there rather than read there.
+         */
+        takesMoney && {
+          id: "loyalty",
+          name: "Loyalty",
+          href: "/dashboard/loyalty",
+          icon: Gift,
+          requiredPermission: ["canViewMembers", "canManageMembers"]
+        }
+      ].filter(Boolean)
+    )
+  };
+}
+export {
+  buildCustomersGroup
+};
+//# sourceMappingURL=spine-customers.js.map

package/dist/sidebar/spine-customers.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/sidebar/spine-customers.ts"],"sourcesContent":["/**\n * The Customers hub: the directory, its segments and the loyalty row.\n *\n * Split out of `spine-groups.ts` to keep it under the 500-line house limit. The\n * booleans are worked out by the caller, because some of them are also used by\n * the groups that follow.\n */\nimport { Users, Gift, RefreshCw } from 'lucide-react';\nimport { type NavItem, type NavGroup } from './config';\nimport { INTENT_ITEM_PERMISSIONS } from './nav-permissions';\n\nexport function buildCustomersGroup({\n  filterItems,\n  takesMoney,\n  runsSubscriptions,\n  runsMembershipArchetype,\n}: {\n  filterItems: (items: NavItem[]) => NavItem[];\n  takesMoney: boolean;\n  runsSubscriptions: boolean;\n  runsMembershipArchetype: boolean;\n}): NavGroup {\n  return {\n    id: 'customers',\n    label: 'Customers',\n    icon: Users,\n    href: '/dashboard/customers',\n    // The directory itself. Named for what it lists, not \"Overview\" — it is a\n    // table, not a summary. `{label}` so a tenant who calls these Guests gets\n    // \"All guests\" rather than \"All customers\" under a hub reading \"Guests\".\n    landingLabel: 'All {label}',\n    requiredPermission: ['canViewMembers', 'canManageMembers'],\n    alwaysHub: true,\n    items: filterItems(\n      [\n        /**\n         * The people paying every month — for the businesses that have no\n         * Memberships hub to hold them.\n         *\n         * A membership business gets one from the archetype, with Plans and\n         * Members as its two children, so this row was the second door onto a\n         * module that already had one: \"Members\" here and \"Memberships\" under\n         * Operations, two sections apart, both landing on the same screen.\n         *\n         * A shop that merely switched `subscribable` on in Settings → Business\n         * model has no such row — the archetype is what contributes it — so\n         * without this it would have no way to reach its subscribers at all.\n         * That is the case this keeps, and the only one.\n         */\n        runsSubscriptions && !runsMembershipArchetype\n          ? {\n              id: 'subscribers',\n              name: 'Members',\n              href: '/dashboard/subscriptions?tab=subscribers',\n              icon: RefreshCw,\n              requiredPermission: INTENT_ITEM_PERMISSIONS.subscribers,\n            }\n          : null,\n        /**\n         * No Inbox here: it is a top-level row under Home, carrying the\n         * unread count (see `inbox-row.ts`). It left this hub on John's\n         * decision of 2026-10-11 because it is the screen checked most often\n         * and a disclosure down is too deep for it.\n         */\n        /**\n         * Loyalty, which used to sit under Marketing.\n         *\n         * It is a programme about PEOPLE — who is in, what tier they reached,\n         * who they brought — and the people are already here, next to Segments.\n         * Marketing is what you send and what it earned; a member's points\n         * balance is neither.\n         *\n         * Referrals is NOT here, and that is John's call (2026-08-26).\n         *\n         * It sat under this row on the argument that a referral and a point\n         * are the same kind of fact — a member earning something — reachable\n         * only through a link at the bottom of the Loyalty page. Points is how\n         * it PAYS, not what it is: a referral is a customer being asked to\n         * bring you another customer, which is an acquisition channel and\n         * belongs beside the other things you send out. It is a row under\n         * Marketing now, and it can be run from there rather than read there.\n         */\n        takesMoney && {\n          id: 'loyalty',\n          name: 'Loyalty',\n          href: '/dashboard/loyalty',\n          icon: Gift,\n          requiredPermission: ['canViewMembers', 'canManageMembers'],\n        },\n      ].filter(Boolean) as NavItem[],\n    ),\n  };\n}\n"],"mappings":"AAOA,SAAS,OAAO,MAAM,iBAAiB;AAEvC,SAAS,+BAA+B;AAEjC,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKa;AACX,SAAO;AAAA,IACL,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA;AAAA;AAAA;AAAA,IAIN,cAAc;AAAA,IACd,oBAAoB,CAAC,kBAAkB,kBAAkB;AAAA,IACzD,WAAW;AAAA,IACX,OAAO;AAAA,MACL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAeE,qBAAqB,CAAC,0BAClB;AAAA,UACE,IAAI;AAAA,UACJ,MAAM;AAAA,UACN,MAAM;AAAA,UACN,MAAM;AAAA,UACN,oBAAoB,wBAAwB;AAAA,QAC9C,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAyBJ,cAAc;AAAA,UACZ,IAAI;AAAA,UACJ,MAAM;AAAA,UACN,MAAM;AAAA,UACN,MAAM;AAAA,UACN,oBAAoB,CAAC,kBAAkB,kBAAkB;AAAA,QAC3D;AAAA,MACF,EAAE,OAAO,OAAO;AAAA,IAClB;AAAA,EACF;AACF;","names":[]}