feat(orders): add branded customer-facing /orders/:id/{paid,cancel} pages

[Bytes0211]

Summary

Closes the M8 success_url 404 follow-up. Stripe Checkout was redirecting paying customers to dialtone.menu/orders/:id/{paid,cancel} — the marketing site, which has no such routes (404). The order itself flipped to paid correctly via webhook (server-to-server, independent of the redirect), but the customer-facing landing was broken.

After deciding the pages must be per-restaurant branded (a customer paying for Sui's Sushi shouldn't see DialTone Menu chrome), the landing pages moved into the admin app where the restaurant data lives. Branding is fetched via the new get_restaurant_branding(order_id) RPC (PR #3) which is granted to anon and exposes only safe brand fields.

Changes

Routes (apps/admin/src/app.tsx)

• Two PUBLIC routes added above the ProtectedRoute wrapper: /orders/:id/paid and /orders/:id/cancel. Both bypass auth so customers without a session can land on them.

Component (apps/admin/src/pages/orders/order-result-page.tsx)

• Reads :id from the URL, calls supabase.rpc('get_restaurant_branding')
• Logo block if logo_url set, else the display name styled as a wordmark in primary_color
• Tagline beneath logo if set
• Card with check/× icon, headline ("Payment received from {restaurant}"), lede, and (for paid) a "What happens next" panel tinted with secondary_color
• Loads restaurant font dynamically from Google Fonts at mount, sanitizes input first
• Falls back to neutral DialTone defaults if the RPC returns null — never show a paying customer a 404

Helpers (apps/admin/src/lib/branding.ts)

• safeFontFamily(font) — CSS-injection-safe font-family value
• googleFontHref(font) — Google Fonts CSS2 URL or null
• Constants for fallbacks
• 22 unit tests (apps/admin/test/branding.test.ts) covering null/empty/whitespace/invalid-char inputs and CSS injection attempts

Edge Functions (admin_create_manual_order, vapi_finalize_order)

• Default DIALTONE_PUBLIC_BASE_URL changed from https://dialtone.menu to https://admin.dialtone.menu so the routes resolve out of the box. Override via the secret for staging.

Test plan

• pnpm ci:fast green (210 unit tests, lint, typecheck)
• After merge + deploy: place a fresh manual card order, pay with 4242, confirm landing on the new branded paid page (not the 404)
• Confirm Sui's Sushi branding renders: #8B0000 primary, #F5C14A secondary, Playfair Display font, "Fresh sushi, made to order." tagline
• Visit /orders/<unknown-uuid>/paid to confirm fallback rendering with DialTone defaults (neutral palette, system font, no order-specific copy)
• Trigger a cancel (Stripe → expire the session) and confirm landing on the cancel page

🤖 Generated with Claude Code

Greptile Summary

This PR fixes a post-Stripe-Checkout 404 by adding two public branded landing pages (/orders/:id/paid and /orders/:id/cancel) to the admin app, along with sanitised branding helpers and a base-URL default change in the two Edge Functions. The implementation is solid — CSS injection is guarded, the RPC rejection path is handled, and hexToRgba replaces the brittle hex-alpha concatenation flagged previously.

Confidence Score: 5/5

Safe to merge — only a single P2 finding (noindex meta placement) that does not affect correctness or security.

All previously flagged P1 issues (missing rejection handler, broken hex-alpha concatenation) are addressed. The remaining finding is P2 only, which does not affect the confidence ceiling.

apps/admin/src/pages/orders/order-result-page.tsx — noindex meta needs to target

Important Files Changed

Filename	Overview
apps/admin/src/pages/orders/order-result-page.tsx	New public customer-facing Stripe landing page. Branding RPC, font injection, and error handling are well done; noindex meta is placed in the body and won't be honoured by crawlers.
apps/admin/src/lib/branding.ts	New branding helpers with good CSS-injection guards. safeFontFamily and googleFontHref use a tight character whitelist; hexToRgba replaces the fragile hex-alpha concatenation correctly.
apps/admin/src/app.tsx	Two public routes added above ProtectedRoute wrapper; React Router v6 specificity rules ensure they win over the catch-all correctly.
apps/admin/test/branding.test.ts	22 well-structured unit tests covering null/empty/whitespace/invalid-char inputs and CSS injection attempts for all three branding helpers.
supabase/functions/admin_create_manual_order/index.ts	Default base URL updated from dialtone.menu to admin.dialtone.menu to match where the /orders/:id/paid route now lives.
supabase/functions/vapi_finalize_order/index.ts	Same base URL default fix as admin_create_manual_order — one-line change, correct and consistent.

Sequence Diagram

sequenceDiagram
    participant Customer
    participant Stripe
    participant AdminApp as admin.dialtone.menu
    participant Supabase

    Customer->>Stripe: Completes / cancels checkout
    Stripe-->>AdminApp: Redirect to /orders/:id/paid (or /cancel)
    AdminApp->>Supabase: rpc('get_restaurant_branding', { p_order_id })
    Supabase-->>AdminApp: Branding row (name, logo, colors, font, tagline) or null
    AdminApp-->>Customer: Branded landing page (or DialTone defaults if null)
    Note over AdminApp: Font loaded dynamically<br/>from Google Fonts if set

Loading

_{Reviews (2): Last reviewed commit: "fix(orders): address Greptile P1+P2 — re..." | Re-trigger Greptile}

[Bytes0211]

Both Greptile findings addressed in ee59df1.

P1 — eternal spinner. The RPC's .then() had no rejection handler. Switched to two-arg .then(onFulfilled, onRejected):

void supabase
  .rpc('get_restaurant_branding', { p_order_id: orderId })
  .then(
    (res) => { /* …setLoaded(true) on success */ },
    () => { if (!cancelled) setLoaded(true); }, // belt-and-suspenders
  );

(Used the two-arg form because the Supabase query builder is a PromiseLike, not a full Promise — no .catch() exposed. Same effect.)

P2 — broken CSS for non-six-digit hex. Replaced the ${secondary}1A string concat with a new hexToRgba(hex, alpha) helper in apps/admin/src/lib/branding.ts:

hexToRgba('#F5C14A', 0.1) // → 'rgba(245, 193, 74, 0.1)'
hexToRgba('#FFC',     0.1) // → '#FFC'  (input unchanged for shorthand — opaque tint > broken CSS)
hexToRgba('rgb(...)', 0.1) // → 'rgb(...)' (input unchanged for non-#RRGGBB formats)

10 new unit tests in apps/admin/test/branding.test.ts cover six-digit / uppercase / lowercase / mixed-case hex, alpha clamping above 1 and below 0, #RGB shorthand, #RRGGBBAA already-alpha hex, rgb() strings, and malformed input.

Validated: 220 unit tests pass (210 prior + 10 new), lint + typecheck green.