Add paying member opt-in to volunteer onboarding step

[Wituareard]

Summary

Adds an optional "I want to become a paying member" checkbox to the volunteer step (step 3) of the onboarding flow. When checked, submitting the volunteer form opens the Stripe donation page in a new tab and the user advances to the volunteer confirmation step (step 4) as usual, staying within the flow. After completing payment, Stripe redirects the popup to a new /close route that closes the tab automatically (with a fallback message if the browser blocks the close).

Context

This opt-in existed in the legacy Tally volunteer form (which redirected to /submitted → Stripe with prefilled_email and client_reference_id params) but was lost when the onboarding flow was migrated to the custom OnboardingFlow.svelte component. Adding it back was approved on Discord.

Changes

• src/lib/components/onboarding/OnboardingFlow.svelte
  • Added a becomePayingMember state flag and a STRIPE_PAYMENT_LINK constant (same link as /submitted uses).
  • Added an optional checkbox to the volunteer form, after the Code of Conduct agreement. It is not required, so it doesn't gate the submit button.
  • Extended submitWith to take (onStart, onSuccess): onStart runs synchronously during the user's submit gesture and its return value is passed to onSuccess. This lets callers do gesture-gated work (like opening a popup) before the async fetch resolves.
  • The volunteer form's onStart opens a blank popup synchronously (window.open('', '_blank')) during the gesture — satisfying iOS Safari and Chrome on iOS, which only allow window.open during a user gesture. onSuccess then navigates the already-opened popup to the final Stripe URL (with prefilled_email from basics.email and client_reference_id from the Airtable recordId captured by submitWith, replacing Tally's submission id), and advances to step 4 regardless.
  • The two existing submitWith call sites were updated to the new signature with a no-op onStart.
  • The /submitted route is left untouched — it remains for the legacy Tally form only.
• src/routes/close/+page.svelte (new) — Stripe success redirect target. Calls window.close() on mount; because the tab was script-opened by window.open(), the browser permits it to close itself. If the user navigated here manually (or the browser blocks the close), a fallback "✓ Thanks for your donation! / You can close this tab now." message is shown. The Stripe success URL must be configured to https://pauseai.info/close.
• src/lib/components/onboarding/messages.ts — added the onboarding_become_paying_member message to the OnboardingMessages interface and both the en and de locales.
• docs/join-form-flow.md — documented the new becomePayingMember state, updated the step-machine state diagram and submission flowchart to include the Stripe → /close path, and added a "Paying member opt-in (volunteer step)" section plus a "Stripe success redirect (/close)" section explaining the auto-close behavior and the required Stripe success URL.
• docs/ONBOARDING_EMBED.md — noted the opt-in is not prefillable via embed URL.

TODO

• iOS popup navigation: Opening the popup synchronously during the submit gesture works (no confirmation prompt), but navigating the already-opened popup to the final Stripe URL after the async submission resolves does not work under iOS Safari / Chrome on iOS. Needs an alternative approach (e.g. render a Stripe link on the confirmation step that the user taps directly, or pre-build the URL before opening the popup). Resolved: This was a false alarm.
• Configure Stripe for the new setup — the Stripe tab now closes automatically when payment is done, via the new /close success-redirect route. Action required: set the Stripe payment link's success URL to https://pauseai.info/close.
• Update PauseAI/pauseai-automation to accept Airtable record ID as customer reference instead of Tally submission ID.

How to test

1. Go to /join (or /embed/onboarding-form).
2. Complete step 1 (basic info) and step 2 (pick "I want to volunteer regularly").
3. On the volunteer step, fill in the required fields and check "I want to become a paying member".
4. Submit — a new tab should open to the Stripe donation page with the email prefilled, and the form should advance to the volunteer confirmation screen.
5. Submit again without the checkbox — should advance to the confirmation screen with no new tab.
6. (Stripe success redirect) Complete a test payment in the Stripe tab. Stripe should redirect to /close, which auto-closes the tab. To test the fallback, navigate to /close directly in a non-script-opened tab — you should see "✓ Thanks for your donation!" instead of the tab closing.

[netlify]

✅ Deploy Preview for pauseai ready!

Name	Link
🔨 Latest commit	37ca3ec
🔍 Latest deploy log	https://app.netlify.com/projects/pauseai/deploys/6a58c753787aca2013c65193
😎 Deploy Preview	https://deploy-preview-980--pauseai.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 57 (🟢 up 3 from production) Accessibility: 89 (no change from production) Best Practices: 100 (no change from production) SEO: 82 (no change from production) PWA: - View the detailed breakdown and full score reports
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[hturnbull93]

LGTM. I presume we have a webhook in stripe to add the boolean in airtable once they have done that?

[Wituareard]

Yup, the webhooks handler lives in PauseAI/pauseai-automation