@volter/twin-stripe 2.0.33 → 2.0.35

package/client/stripe-mirror.css

@@ -273,3 +273,5 @@ h1 .pill { font-size: 13px; height: 22px; }
 .popover-item:hover { background: var(--hover); }
 .popover-radio { width: 14px; height: 14px; border-radius: 50%; border: 1px solid #a3acba; flex: none; }
 .popover-item.checked .popover-radio { border: 4px solid var(--brand); }
+.show-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 6px; color: var(--text); font-size: 13px; }
+.show-note button { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 2px; }

package/client/stripe-mirror.tsx

@@ -1494,14 +1494,39 @@ export function Page({ route, search, go }: { route: string[]; search: string; g
   return <div className="page"><EmptyState title="Page not found" body="This page doesn’t exist in the Dashboard." /></div>;
 }
 
+/** A record a World's console asks to see (`?show=<type>:<id>`, docs/contributing/architecture.md "Screens"): where the
+ *  Dashboard shows it. The console names a record, never a Stripe path. A type with no page of its own opens its list,
+ *  and one with no list stays on Home; either says so, never showing another page as if it were the record. */
+const SHOW_AT: Record<string, (id: string) => string> = { customer: (id) => `customers/${id}`, payment_intent: (id) => `payments/${id}`, charge: (id) => `payments/${id}`, subscription: (id) => `subscriptions/${id}`, invoice: (id) => `invoices/${id}` };
+/** The sections the Dashboard routes to, by the object type their rows are (a section's key is Stripe's plural). */
+const LISTED: Record<string, { path: string; label: string }> = {
+  product: { path: 'products', label: 'Products' },
+  // (not `accounts`: Connect lists connected accounts, never the platform's own account record)
+  ...Object.fromEntries(SECTIONS.filter((s) => s.page && s.key !== 'accounts').map((s) => [s.key.replace(/s$/, '').replace(/\//g, '.'), { path: s.path, label: s.label }])),
+};
+function shown(search: string): { to: string; note?: string } | null {
+  const asked = new URLSearchParams(search).get('show'); if (!asked) return null;
+  const at = asked.indexOf(':'); const type = asked.slice(0, at); const id = asked.slice(at + 1);
+  if (at <= 0 || !id) return null;
+  const words = type.replace(/[._]/g, ' ');
+  if (SHOW_AT[type]) return { to: hrefOf(SHOW_AT[type](id)) };
+  if (LISTED[type]) return { to: hrefOf(LISTED[type].path), note: `These screens have no page for one ${words} yet; ${LISTED[type].label.toLowerCase()} are listed here. Look for ${id}.` };
+  return { to: hrefOf('dashboard'), note: `These screens have no page for ${words} records yet, so ${id} can't be shown here.` };
+}
 export function App() {
-  const [loc, setLoc] = useState(() => ({ path: window.location.pathname, search: window.location.search }));
+  const [asked] = useState(() => shown(window.location.search));
+  const [note, setNote] = useState(asked?.note ?? '');
+  const [loc, setLoc] = useState(() => {
+    if (asked) { window.history.replaceState(null, '', asked.to); const u = new URL(asked.to, window.location.origin); return { path: u.pathname, search: u.search }; }
+    return { path: window.location.pathname, search: window.location.search };
+  });
   useEffect(() => {
     const onPop = () => setLoc({ path: window.location.pathname, search: window.location.search });
     window.addEventListener('popstate', onPop);
     return () => window.removeEventListener('popstate', onPop);
   }, []);
   const go: Go = useCallback((to) => {
+    setNote('');
     const href = hrefOf(to);
     window.history.pushState(null, '', href);
     const u = new URL(href, window.location.origin);
@@ -1522,7 +1547,7 @@ export function App() {
         <SideNav route={route} go={go} />
         <div className="main">
           <TopBar go={go} />
-          <main className="content"><Page route={route} search={loc.search} go={go} /></main>
+          <main className="content">{note ? <div className="show-note" role="status"><span>{note}</span><button type="button" aria-label="Dismiss" onClick={() => setNote('')}><Icon name="x" size={12} /></button></div> : null}<Page route={route} search={loc.search} go={go} /></main>
         </div>
       </div>
     </div>