Revert pricing page to pre-Feb-2026 design, restore $4/$24, feature the 30-Day Pass

[rob-gordon]

Why

New subscriptions collapsed starting the week of 2026-02-10 (prod Stripe, subs created per month):

Jun–Dec 2025	Jan 26	Feb	Mar	Apr	May	Jun	Jul	Aug 1–17
79, 81, 66, 67, 54, 52, 52	43	17	14	12	9	9	4	1

That week shipped #793 (site aesthetic pass), #794 (pricing page redesign) and #796 (monthly $4→$6, annual $24→$48). PostHog: /pricing → /success ran ~3% through 2025 and ~1% since March. Stripe Checkout itself is not the leak (last 60d: 24 sessions started, 13 paid) — people stop on the pricing page. Annual was ~40% of new subs (~20/mo; 241 of 410 actives are on $24/yr) and is now 2–3/mo. Meanwhile the $9 30-Day Pass (#809) sold 4 in its first 3 weeks and is outselling the subscription in August — while sitting at the bottom of the checkout as a dashed footnote.

What

Decisions: prices back to $4/mo + $24/yr; faithful revert of the pre-#793 page (purple — accepted inconsistency with the blue header, since #793/#794 shipped the same day and can't be separated); pass as an equal third plan card.

• Pricing2.tsx — restored from 9c0ca47^ (video hero, feature slideshow, logos, FeatureBreakdown, Testimonials, FAQ, purple checkout band). Kept: Helmet meta, #pass hash handling, Tone Row cross-links (feat: cross-link other Tone Row apps (TeamSort, Docugram) #807, moved to a footer below the purple band). New: hero "or get a 30-Day Pass for $9" link + a #pass callout card, both preselect the pass and scroll to #checkout.
• Checkout.tsx — three cards: Yearly $2/mo (Save 50%), Monthly $4, 30-Day Pass $9 once (One-time badge). CTA label switches (Get Pro Access Now / Get a 30-Day Pass — $9). Selection in lib/usePricingPlanStore.ts (zustand, module-level so deep links / hero link can preselect). Single effectivePlan derivation: an active pass holder never sees the pass card and a stale "pass" selection falls back to yearly for label + request. posthog.capture("checkout_started", { plan }).
• api/create-checkout-session.ts — refuses a second pass for an active pass holder (getActivePass on the resolved customer). No webhooks exist, so this is the only server-side double-charge guard.
• FAQ.tsx — pre-Redesign pricing page #794 questions back (lazy t() kept), free-trial answer now points at the pass, pass question kept, $4/$24.
• FeatureBreakdown.tsx / Testimonials.tsx / index.css — purple accents + pricing CSS from 9c0ca47^; .feature:nth-child(2) hard-coded to the old green.300 since the green scale changed. Note: icon/avatar chips in those two components use bg-blue-*/bg-green-* and render with the current scales (tailwind config not reverted) — intentional.
• All hard-coded $6/month copy → $4/month (SandboxWarning, paywallCopy, LoadFileButton, EditWithAI, ImportDataUnauthenticatedDialog, Pricing.tsx).
• e2e pass.spec.ts (pass-plan-button + checkout-button), Checkout.test.tsx (+2 tests, store reset), locales re-extracted/translated/compiled.

⚠️ Env runbook — do this in production before merging dev → main

Consumers: api/create-checkout-session.ts and api/_lib/_validStripePrices.ts → api/customer-info.ts (a sub is Pro only if its price ID is in [STRIPE_PRICE_ID, STRIPE_PRICE_ID_YEARLY, ...OTHER_VALID_STRIPE_PRICE_IDS]). If the $6/$48 IDs are not appended to OTHER_VALID_STRIPE_PRICE_IDS, the ~31 subscribers on those prices lose Pro.

STRIPE_PRICE_ID              = price_1PNyN9K9wlDh9GkwwFCUHODZ   # $4/mo  (still active; was price_1T0BmEK9wlDh9Gkwx9dPMkay = $6)
STRIPE_PRICE_ID_YEARLY       = price_1P9WMuK9wlDh9GkwLF5Vpr2F   # $24/yr (still active; was price_1T0BmEK9wlDh9GkwRSCsKOlr = $48)
OTHER_VALID_STRIPE_PRICE_IDS = <existing 9 IDs>,price_1T0BmEK9wlDh9Gkwx9dPMkay,price_1T0BmEK9wlDh9GkwRSCsKOlr

• No spaces after commas — _validStripePrices.ts does split(",") without trim().
• Env first, then merge: env-before-deploy means the live site briefly shows $6 but charges $4 (harmless); the reverse would show $4 and charge $6.
• After deploy: start (don't finish) a checkout to see $4.00 / $24.00; confirm a $6-price subscriber still shows Pro.

Dev + preview are already done: new test-mode prices price_1U5R2IK9wlDh9GkwqMzaApvM ($4/mo) and price_1U5R2IK9wlDh9GkwzvlaqFyq ($24/yr); test $6/$48 IDs appended to dev/preview OTHER_VALID_STRIPE_PRICE_IDS (the e2e pro account is on the $48 test price and stays Pro).

Testing

• pnpm -F app check, pnpm -F api check ✅ · pnpm -F app test 25 suites / 564 passed ✅ · pnpm -F api test ✅
• e2e (chromium, vercel dev): not-logged-in.spec ✅, pass.spec all 3 CTA tests ✅ (free user → pass card → Stripe shows $9.00 / 30-Day Pass), logged-in.spec ✅. Some reruns hit the pre-existing webpack error overlay on /l (Monaco CDN worker importScripts failure in headless Chromium) — unrelated to this change.
• Verified in-browser: /pricing#pass (the paywall/sandbox deep link) preselects the pass and scrolls to the callout; hero link preselects the pass; light/dark, desktop + 390px.
• Visual-regression template suite: not applicable (no render-pipeline files touched).

After release

Watch checkout_started per day and /pricing → /success weekly. Baseline ~1%; the old page ran ~3%.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
flowchart-fun	Ready	Preview	Aug 17, 2026 2:41pm