@tokenoftrust/storefront-runner 1.3.2 → 1.3.4-rc.2

package/apps/storefront/src/components/admin/AdminSubscriptionsTab.astro

@@ -0,0 +1,613 @@
+---
+/**
+ * Subscriptions tab - read-only v1. Catalog purchase options are the source of
+ * truth; lifecycle actions require a later subscription API and audit gates.
+ */
+import { getSubscriptionsViewModel } from "@/lib/admin/services/mock";
+import type { AdminTenantEnvelope } from "@/lib/admin/envelope";
+import type {
+  SubscriptionAttentionRow,
+  SubscriptionProgramReadiness,
+  SubscriptionRenewalState,
+  SubscriptionSubscriberStatus,
+} from "@/lib/admin/viewmodels/subscriptions";
+
+interface Props {
+  envelope: AdminTenantEnvelope;
+}
+
+const { envelope } = Astro.props;
+const cspNonce = Astro.locals.cspNonce;
+const vm = getSubscriptionsViewModel(envelope);
+const defaultProgram = vm.programs.find((row) => row.needsAttentionCount > 0) ?? vm.programs[0] ?? null;
+
+const READINESS_LABEL: Record<SubscriptionProgramReadiness, string> = {
+  ready: "Ready",
+  needs_setup: "Needs setup",
+  blocked: "Blocked",
+};
+
+const READINESS_TONE: Record<SubscriptionProgramReadiness, string> = {
+  ready: "green",
+  needs_setup: "amber",
+  blocked: "red",
+};
+
+const STATUS_LABEL: Record<SubscriptionSubscriberStatus, string> = {
+  active: "Active",
+  paused: "Paused",
+  payment_attention: "Payment attention",
+  verification_hold: "Verification hold",
+};
+
+const STATUS_TONE: Record<SubscriptionSubscriberStatus, string> = {
+  active: "green",
+  paused: "",
+  payment_attention: "amber",
+  verification_hold: "red",
+};
+
+const RENEWAL_TONE: Record<SubscriptionRenewalState, string> = {
+  scheduled: "green",
+  attention: "amber",
+  held: "red",
+};
+
+const ATTENTION_KIND_LABEL: Record<SubscriptionAttentionRow["kind"], string> = {
+  setup_gap: "Setup gap",
+  verification_hold: "Verification hold",
+  payment_attention: "Payment attention",
+  product_blocker: "Product blocker",
+};
+
+function formatMoney(value: number): string {
+  return `$${value.toFixed(2)}`;
+}
+
+function formatDate(iso: string): string {
+  return new Date(iso).toLocaleDateString([], { month: "short", day: "numeric", year: "numeric" });
+}
+---
+
+<section
+  id="subscriptions"
+  class="band subscriptions-tab"
+  aria-labelledby="admin-tab-subscriptions subscriptions-title"
+  data-admin-panel
+  data-agent-scope="subscriptions"
+  role="tabpanel"
+  data-subscriptions-target-tenant={vm.targetTenant}
+  data-admin-selected-id={defaultProgram?.id ?? ""}
+>
+  <div class="section-title">
+    <div>
+      <h2 id="subscriptions-title">Subscriptions</h2>
+      <p>Recurring purchase options, subscriber readiness, renewal attention, and checkout payload evidence.</p>
+    </div>
+    <div class="actions">
+      <button class="btn" type="button"><svg><use href="#i-export"></use></svg>Export</button>
+      <button class="btn" type="button"><svg><use href="#i-refresh"></use></svg>Refresh</button>
+      <button class="btn primary" type="button"><svg><use href="#i-check"></use></svg>Review setup</button>
+    </div>
+  </div>
+
+  <div class="grid cols-4">
+    <div class="metric"><span>Subscription products</span><strong>{vm.summary.subscriptionProducts}</strong><small>Catalog purchase options</small></div>
+    <div class="metric"><span>Active subscribers</span><strong>{vm.summary.activeSubscribers}</strong><small>Across available programs</small></div>
+    <div class="metric"><span>Upcoming renewal value</span><strong>{formatMoney(vm.summary.upcomingRenewalValue)}</strong><small>Scheduled renewals</small></div>
+    <div class="metric"><span>Needs attention</span><strong>{vm.summary.needsAttention}</strong><small>Setup, payment, or verification</small></div>
+  </div>
+
+  {vm.attention.length > 0 && (
+    <div class="panel subscriptions-attention-panel">
+      <div class="panel-head subscriptions-panel-head">
+        <h3><svg><use href="#i-alert"></use></svg>Attention Queue</h3>
+        <span class="chip amber">{vm.attention.length} item{vm.attention.length === 1 ? "" : "s"}</span>
+      </div>
+      <div class="panel-body">
+        <div class="subscriptions-attention-grid">
+          {vm.attention.slice(0, 4).map((row) => {
+            const program = vm.detailsById[row.programId];
+            return (
+              <div class:list={["subscriptions-attention-card", row.blocking ? "blocking" : ""]}>
+                <div>
+                  <span class:list={["chip", row.tone]}>{ATTENTION_KIND_LABEL[row.kind]}</span>
+                  <strong>{row.label}</strong>
+                  <p>{row.detail}</p>
+                </div>
+                <button class="btn" type="button" data-subscriptions-select-row={row.programId}>
+                  {program ? program.productName : "Open"}
+                </button>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  )}
+
+  <div class="subscriptions-workspace">
+    <div class="panel subscriptions-list-panel">
+      <div class="panel-head subscriptions-panel-head">
+        <h3><svg><use href="#i-refresh"></use></svg>Programs</h3>
+        <span class="chip teal">{vm.programs.length} recurring option{vm.programs.length === 1 ? "" : "s"}</span>
+      </div>
+      <div class="panel-body grid">
+        <div class="subscriptions-toolbar" aria-label="Subscription controls">
+          <label class="subscriptions-search">
+            <span>Search</span>
+            <input type="search" placeholder="Search products, options, frequency" aria-label="Search subscription programs" data-subscriptions-search />
+          </label>
+          <label>
+            <span>Readiness</span>
+            <select aria-label="Filter by readiness" data-subscriptions-readiness-select>
+              <option value="">Any readiness</option>
+              <option value="ready">Ready</option>
+              <option value="needs_setup">Needs setup</option>
+              <option value="blocked">Blocked</option>
+            </select>
+          </label>
+        </div>
+
+        <div class="table-wrap">
+          <table class="subscriptions-table">
+            <thead>
+              <tr>
+                <th>Program</th>
+                <th>Frequency</th>
+                <th>Savings</th>
+                <th>Readiness</th>
+                <th>Subscribers</th>
+                <th>Renewal value</th>
+                <th class="action">Action</th>
+              </tr>
+            </thead>
+            <tbody data-subscriptions-tbody>
+              {vm.programs.map((row) => (
+                <tr
+                  class:list={[{ selected: row.id === defaultProgram?.id }]}
+                  data-subscriptions-row
+                  data-program-id={row.id}
+                  data-readiness={row.readiness}
+                  data-search-haystack={`${row.productName} ${row.optionLabel} ${row.frequency}`.toLowerCase()}
+                >
+                  <td><strong>{row.productName}</strong><span class="subtle">{row.optionLabel}</span></td>
+                  <td><strong>{row.frequency}</strong></td>
+                  <td><strong>{row.savingsLabel ?? "None"}</strong>{row.priceAdjustmentLabel && <span class="subtle">{row.priceAdjustmentLabel}</span>}</td>
+                  <td>
+                    <span class:list={["chip", READINESS_TONE[row.readiness]]}>{READINESS_LABEL[row.readiness]}</span>
+                    {row.needsAttentionCount > 0 && <span class="subtle">{row.needsAttentionCount} attention</span>}
+                  </td>
+                  <td><strong>{row.subscriberCount}</strong></td>
+                  <td><strong>{formatMoney(row.upcomingRenewalValue)}</strong></td>
+                  <td class="action"><button type="button" class="btn" data-subscriptions-select-row={row.id}>Open</button></td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+          <p class="subscriptions-empty-state" data-subscriptions-empty hidden>No subscription programs match the current filters.</p>
+        </div>
+      </div>
+    </div>
+
+    <aside class="panel subscriptions-detail-panel" aria-labelledby="subscriptions-detail-title" data-subscriptions-detail-root>
+      {vm.programs.map((row) => {
+        const detail = vm.detailsById[row.id]!;
+        return (
+          <div class="subscriptions-detail-record" data-subscriptions-detail-record={row.id} hidden={row.id !== defaultProgram?.id}>
+            <div class="panel-head subscriptions-panel-head">
+              <h3 id={row.id === defaultProgram?.id ? "subscriptions-detail-title" : undefined}><svg><use href="#i-file"></use></svg>{row.optionLabel}</h3>
+              <span class:list={["chip", READINESS_TONE[row.readiness]]}>{READINESS_LABEL[row.readiness]}</span>
+            </div>
+            <div class="panel-body grid">
+              <div class="subscriptions-detail-meta">
+                <div><span class="eyebrow">Product</span><strong>{row.productName}</strong></div>
+                <div><span class="eyebrow">Frequency</span><strong>{row.frequency}</strong></div>
+                <div><span class="eyebrow">Subscribers</span><strong>{row.subscriberCount}</strong></div>
+              </div>
+
+              {detail.attention.length > 0 && (
+                <div class="subscriptions-check-list">
+                  {detail.attention.map((attention) => (
+                    <div class:list={["subscriptions-check-row", attention.blocking ? "blocking" : ""]}>
+                      <div><b>{attention.label}</b><p>{attention.detail}</p></div>
+                      <span class:list={["chip", attention.tone]}>{ATTENTION_KIND_LABEL[attention.kind]}</span>
+                    </div>
+                  ))}
+                </div>
+              )}
+
+              <details class="detail-section" open>
+                <summary class="detail-section-head"><h4>Checkout payload preview</h4><span class="chip">{detail.checkoutFields.length}</span></summary>
+                <div class="mini-table" role="table" aria-label="Checkout payload preview">
+                  {detail.checkoutFields.map((field) => (
+                    <div class="mini-row payload-row" role="row">
+                      <div role="cell"><span class="eyebrow">Field</span><strong>{field.name}</strong></div>
+                      <div role="cell"><span class="eyebrow">Value</span><strong>{field.value}</strong></div>
+                    </div>
+                  ))}
+                </div>
+              </details>
+
+              <details class="detail-section" open={detail.subscribers.length > 0}>
+                <summary class="detail-section-head"><h4>Linked subscribers</h4><span class="chip">{detail.subscribers.length}</span></summary>
+                {detail.subscribers.length > 0 ? (
+                  <div class="mini-table" role="table" aria-label="Linked subscribers">
+                    {detail.subscribers.map((subscriber) => (
+                      <div class="mini-row subscriber-row" role="row">
+                        <div role="cell"><strong>{subscriber.customerName}</strong><span class="subtle">{subscriber.email}</span></div>
+                        <div role="cell"><span class:list={["chip", STATUS_TONE[subscriber.status]]}>{STATUS_LABEL[subscriber.status]}</span></div>
+                        <div role="cell"><span class="eyebrow">Next renewal</span><strong>{formatDate(subscriber.nextRenewalAt)}</strong></div>
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <p class="subscriptions-note">No active subscriber records are linked to this program.</p>
+                )}
+              </details>
+
+              <details class="detail-section" open={detail.upcomingRenewals.length > 0}>
+                <summary class="detail-section-head"><h4>Upcoming renewals</h4><span class="chip">{detail.upcomingRenewals.length}</span></summary>
+                <div class="subscriptions-renewal-list">
+                  {detail.upcomingRenewals.map((renewal) => (
+                    <div>
+                      <time>{formatDate(renewal.at)}</time>
+                      <div>
+                        <b>{renewal.customerName}</b>
+                        <p>{formatMoney(renewal.amount)} renewal</p>
+                      </div>
+                      <span class:list={["chip", RENEWAL_TONE[renewal.state]]}>{renewal.state}</span>
+                    </div>
+                  ))}
+                </div>
+              </details>
+
+              <details class="detail-section">
+                <summary class="detail-section-head"><h4>Evidence timeline</h4><span class="chip">{detail.evidenceTimeline.length}</span></summary>
+                <div class="subscriptions-activity-list">
+                  {detail.evidenceTimeline.map((event) => (
+                    <div>
+                      <time>{formatDate(event.at)}</time>
+                      <div><b>{event.title}</b><p>{event.detail}</p></div>
+                    </div>
+                  ))}
+                </div>
+              </details>
+            </div>
+          </div>
+        );
+      })}
+    </aside>
+  </div>
+</section>
+
+<script is:inline nonce={cspNonce}>
+  (() => {
+    const root = document.querySelector("[data-subscriptions-target-tenant]");
+    if (!root) return;
+    const rows = Array.from(root.querySelectorAll("[data-subscriptions-row]"));
+    const detailRecords = Array.from(root.querySelectorAll("[data-subscriptions-detail-record]"));
+    const emptyState = root.querySelector("[data-subscriptions-empty]");
+    const searchInput = root.querySelector("[data-subscriptions-search]");
+    const readinessSelect = root.querySelector("[data-subscriptions-readiness-select]");
+
+    const selectProgram = (programId) => {
+      root.dataset.adminSelectedId = programId;
+      rows.forEach((row) => row.classList.toggle("selected", row.dataset.programId === programId));
+      detailRecords.forEach((record) => {
+        record.hidden = record.dataset.subscriptionsDetailRecord !== programId;
+      });
+    };
+
+    const applyFilters = () => {
+      const query = String(searchInput?.value ?? "").trim().toLowerCase();
+      const readiness = String(readinessSelect?.value ?? "");
+      let visible = 0;
+      rows.forEach((row) => {
+        const matchesSearch = !query || String(row.dataset.searchHaystack ?? "").includes(query);
+        const matchesReadiness = !readiness || row.dataset.readiness === readiness;
+        const show = matchesSearch && matchesReadiness;
+        row.hidden = !show;
+        if (show) visible += 1;
+      });
+      if (emptyState) emptyState.hidden = visible !== 0;
+    };
+
+    root.querySelectorAll("[data-subscriptions-select-row]").forEach((button) => {
+      button.addEventListener("click", () => {
+        const programId = button.dataset.subscriptionsSelectRow;
+        if (programId) selectProgram(programId);
+      });
+    });
+
+    rows.forEach((row) => {
+      row.addEventListener("click", (event) => {
+        if (event.target instanceof Element && event.target.closest("[data-subscriptions-select-row]")) return;
+        const programId = row.dataset.programId;
+        if (programId) selectProgram(programId);
+      });
+    });
+
+    searchInput?.addEventListener("input", applyFilters);
+    readinessSelect?.addEventListener("change", applyFilters);
+    applyFilters();
+  })();
+</script>
+
+<style>
+  .subscriptions-tab {
+    --subscriptions-sideout-width: minmax(370px, 0.42fr);
+  }
+
+  .subscriptions-panel-head {
+    align-items: center;
+  }
+
+  .subscriptions-attention-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 10px;
+  }
+
+  .subscriptions-attention-card {
+    display: flex;
+    justify-content: space-between;
+    gap: 12px;
+    min-width: 0;
+    padding: 12px;
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius);
+    background: var(--admin-surface-soft);
+  }
+
+  .subscriptions-attention-card.blocking {
+    border-color: #f2c778;
+    background: #fff8ea;
+  }
+
+  .subscriptions-attention-card strong,
+  .subscriptions-attention-card p {
+    display: block;
+    margin: 6px 0 0;
+  }
+
+  .subscriptions-attention-card p,
+  .subscriptions-note,
+  .subscriptions-activity-list p,
+  .subscriptions-renewal-list p,
+  .subscriptions-check-row p {
+    color: var(--admin-muted);
+    font-size: 12px;
+  }
+
+  .subscriptions-workspace {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) var(--subscriptions-sideout-width);
+    gap: 14px;
+    align-items: start;
+  }
+
+  .subscriptions-detail-panel {
+    position: sticky;
+    top: 0;
+  }
+
+  .subscriptions-toolbar {
+    display: grid;
+    grid-template-columns: minmax(220px, 1fr) minmax(150px, 0.28fr);
+    gap: 10px;
+  }
+
+  .subscriptions-toolbar label {
+    display: grid;
+    gap: 5px;
+    min-width: 0;
+  }
+
+  .subscriptions-toolbar span,
+  .eyebrow {
+    color: var(--admin-muted);
+    font-size: 11px;
+    font-weight: 760;
+    text-transform: uppercase;
+  }
+
+  .subscriptions-toolbar input,
+  .subscriptions-toolbar select {
+    min-width: 0;
+    width: 100%;
+    min-height: 38px;
+    padding: 0 10px;
+    border: 1px solid var(--admin-line-strong);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-surface);
+    color: var(--admin-ink);
+  }
+
+  .subscriptions-table {
+    min-width: 980px;
+  }
+
+  .subscriptions-table tbody tr {
+    cursor: pointer;
+  }
+
+  .subscriptions-table tr.selected td {
+    background: #eef9f6;
+  }
+
+  .subscriptions-empty-state {
+    margin: 0;
+    padding: 24px 14px;
+    color: var(--admin-muted);
+    font-size: 13px;
+    text-align: center;
+  }
+
+  .subscriptions-detail-meta {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 10px;
+  }
+
+  .subscriptions-detail-meta > div {
+    min-width: 0;
+    padding-bottom: 10px;
+    border-bottom: 1px solid var(--admin-line);
+  }
+
+  .subscriptions-detail-meta strong,
+  .mini-row strong {
+    display: block;
+    margin-top: 3px;
+    overflow-wrap: anywhere;
+  }
+
+  .subscriptions-check-list,
+  .subscriptions-activity-list,
+  .subscriptions-renewal-list {
+    display: grid;
+    gap: 10px;
+  }
+
+  .subscriptions-check-row {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 12px;
+    align-items: center;
+    padding: 11px 12px;
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius);
+    background: var(--admin-surface-soft);
+  }
+
+  .subscriptions-check-row.blocking {
+    border-color: #f2c778;
+    background: #fff8ea;
+  }
+
+  .subscriptions-check-row b,
+  .subscriptions-renewal-list b,
+  .subscriptions-activity-list b {
+    display: block;
+  }
+
+  .detail-section {
+    display: grid;
+    gap: 10px;
+    padding-top: 2px;
+  }
+
+  .detail-section + .detail-section {
+    padding-top: 12px;
+    border-top: 1px solid var(--admin-line);
+  }
+
+  .detail-section-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    cursor: pointer;
+    list-style: none;
+  }
+
+  .detail-section-head::-webkit-details-marker {
+    display: none;
+  }
+
+  .detail-section-head h4 {
+    margin: 0;
+    font-size: 13px;
+  }
+
+  .mini-table {
+    display: grid;
+    margin-top: 10px;
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius);
+    overflow: hidden;
+  }
+
+  .mini-row {
+    display: grid;
+    grid-template-columns: minmax(130px, 1.25fr) minmax(120px, 1fr) 110px;
+    gap: 10px;
+    align-items: center;
+    min-height: 58px;
+    padding: 9px 10px;
+    border-bottom: 1px solid var(--admin-line);
+  }
+
+  .mini-row:last-child {
+    border-bottom: 0;
+  }
+
+  .payload-row {
+    grid-template-columns: minmax(130px, 0.8fr) minmax(0, 1fr);
+  }
+
+  .subscriptions-renewal-list > div {
+    display: grid;
+    grid-template-columns: 92px minmax(0, 1fr) auto;
+    gap: 10px;
+    align-items: center;
+  }
+
+  .subscriptions-activity-list > div {
+    display: grid;
+    grid-template-columns: 92px minmax(0, 1fr);
+    gap: 10px;
+  }
+
+  .subscriptions-renewal-list time,
+  .subscriptions-activity-list time {
+    color: var(--admin-muted);
+    font-size: 12px;
+  }
+
+  @media (max-width: 1180px) {
+    .subscriptions-workspace {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .subscriptions-detail-panel {
+      position: static;
+    }
+  }
+
+  @media (max-width: 920px) {
+    .subscriptions-tab .section-title,
+    .subscriptions-tab .panel-head {
+      align-items: flex-start;
+      flex-direction: column;
+    }
+
+    .subscriptions-tab .grid.cols-4,
+    .subscriptions-attention-grid {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @media (max-width: 640px) {
+    .subscriptions-tab .grid.cols-4,
+    .subscriptions-attention-grid,
+    .subscriptions-toolbar,
+    .subscriptions-detail-meta,
+    .mini-row,
+    .payload-row,
+    .subscriptions-renewal-list > div,
+    .subscriptions-activity-list > div,
+    .subscriptions-check-row {
+      grid-template-columns: 1fr;
+    }
+
+    .subscriptions-tab .actions {
+      width: 100%;
+    }
+
+    .subscriptions-tab .actions .btn {
+      flex: 1 1 150px;
+    }
+  }
+</style>

package/apps/storefront/src/components/admin/orders/OrdersWorkspace.astro

@@ -24,7 +24,7 @@ import {
   parseOrderFilters,
   type OrdersLoadStatus,
 } from "@/lib/admin/services/orders";
-import { createFoxyOrderClient, orderApiBaseUrl } from "@/lib/admin/orderClient";
+import { createCheckoutOrderClient, orderApiBaseUrl } from "@/lib/admin/orderClient";
 import { readEnv } from "@/lib/env";
 import { ORDER_SHIP_STATE_LABEL, type OrderRow } from "@/lib/admin/viewmodels/orders";
 import type { AdminTenantEnvelope } from "@/lib/admin/envelope";
@@ -38,7 +38,7 @@ interface Props {
 const { envelope } = Astro.props;
 const cspNonce = Astro.locals.cspNonce;
 
-// Real orders (U3): fetch this tenant's orders from tot-foxycart via U2's client
+// Real orders (U3): fetch this tenant's checkout orders via U2's client
 // and map to the view model. The per-tenant bearer is a server-side Worker secret;
 // absent (or any upstream error) → an empty-but-valid model so the tab still
 // renders (rich empty/error UX is U5). Live data is gated on the ToT-core orders
@@ -51,7 +51,7 @@ const orderFilters = parseOrderFilters(Astro.url.searchParams);
 const ordersResult = orderBearer
   ? await getOrdersViewModelResult({
       targetTenant: envelope.targetTenant,
-      client: createFoxyOrderClient({
+      client: createCheckoutOrderClient({
         baseUrl: orderApiBaseUrl(Astro.locals.customizationEnv),
         appDomain: envelope.targetTenant,
         bearer: orderBearer,

package/apps/storefront/src/components/chrome/SiteHeader.astro

@@ -10,9 +10,8 @@
  * lives here now, as explicit props — the caller (Layout.astro) resolves
  * session/feature/theme state and passes it down; this component stays pure.
  *
- * COMMERCE BOUNDARY: the cart is a LINK only (cart/checkout is FoxyCart, Phase 2)
- * — no cart state, no add-to-cart. The count is a static affordance the FoxyCart
- * layer hydrates later.
+ * COMMERCE BOUNDARY: the cart is a LINK only — no cart state, no add-to-cart.
+ * The count is a static affordance the managed cart can hydrate later.
  */
 import type { ChromeNavItem, ChromeLogo, ChromeCta } from "@/lib/chrome/model";
 import MegaMenu from "@/components/chrome/MegaMenu.astro";
@@ -37,7 +36,7 @@ interface Props {
   savedItemsHref?: string;
   /** Marketing conversion CTAs (non-commerce tenants), shown alongside search/saved. */
   headerCtas?: ChromeCta[];
-  /** Cart link target (FoxyCart, Phase 2). Omit to hide the cart affordance. */
+  /** Cart link target. Omit to hide the cart affordance. */
   cartHref?: string;
   cartCount?: number;
   /** A brand-fixed "dark" header bar (e.g. a navy bar with a light logo) vs. the default light bar. */