@tokenoftrust/storefront-runner 2.0.1 → 2.0.3

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

@@ -1,611 +0,0 @@
----
-/**
- * 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 { formatDate } from "@/lib/format";
-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)}`;
-}
-
----
-
-<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>