Skip to main content

First-time pastor completes Pro Website setup wizard

Persona​

A pastor or office admin who just purchased their Pro Website ($14.95–$19.95/mo). Low-to-moderate tech comfort, wants a polished church presence quickly. They care about looking professional to their congregation and first-time visitors, not technical minutiae. They have 15–60 minutes.

Entry points​

  1. Welcome email magic link — pastor clicks "Set Up Your Website" → /admin/[admin_token]?onboarded=1
  2. Checkout redirect — after Stripe payment, redirected to /admin/[token] with Setup Guide auto-displayed
  3. Return visit — pastor bookmarks the magic link, returns later to continue

Click-through flow​

Steps​

  1. Step 1 — Website Design (Hero Video Picker) — Modal "Step 1 of 8." Photo gallery grid of ~8 denomination-themed hero video options. Select 1–2. Saved to premium_churches.hero_video_keys. Modal advances to Step 2.

  2. Step 2 — Church Profile — Church Name (pre-filled, editable), Logo upload (drag-and-drop, <2MB), Description (1–500 chars, optional). Logo uploaded to Supabase Storage churches/{churchId}/logo. Stored in premium_churches.logo_url and premium_churches.custom_description. Public site re-renders within 10 seconds.

  3. Step 3 — Office Hours & Timezone — Timezone picker (defaults to browser TZ). Service Times table (required, min 1). Office Hours table (optional). Stored in premium_churches.service_times and premium_churches.office_hours. At least one service time is required — form shows inline error if skipped.

  4. Step 4 — Notification Email — Pre-filled with admin email from signup. Optional CC fields. Saved to premium_churches.notification_emails. At least one valid email required.

  5. Step 5 — Theology & Tradition — 17-option dropdown. Live badge shows selected tradition + 1–2 sentence description. Critical: dropdown pick is DRAFT ONLY — does NOT save until "Save tradition" button is clicked (2026-04-18 regression fix). On save, amber label turns green "Saved" for 700ms, modal advances to Step 6.

  6. Step 6 — Staff & Ministries (Navigate to Training tab) — Slide-over closes. Router navigates to #training-church-knowledge. Pastor fills staff fields (Name required, Role, Photo optional, Bio optional). Changes auto-save on blur to premium_churches.staff. Pastor then manually clicks Step 7 card on Overview to continue — intentional design (auto-jump caused confusion, 2026-04-18 regression).

  7. Step 7 — What to Expect — Textarea (1–500 chars, optional): parking info, dress code, accessibility. Saved to premium_churches.what_to_expect. Appears on public site above service times.

  8. Step 8 — Share Your Website — Preview link to [vanity_slug].john316.church (opens new tab). QR code. Pre-written social media copy (editable). "Copy Share Link" and "I've Shared It" buttons. On "I've Shared It": handleStepSaved() detects no remaining steps → Celebration screen with confetti.

Acceptance spec​

Canonical: knowledge/acceptance/pro-website-setup-wizard.md

8 non-negotiable steps verified in spec. Regression patterns explicitly covered: theology auto-save, auto-navigation after Step 5, gold ring sync, celebration trigger.

Success criteria​

  • Each step has a short, obvious action.
  • After each step, the main-page card updates immediately (green checkmark).
  • After Step 5 (Theology), pastor stays in modal — no auto-jump to another tab.
  • Website live at [vanity_slug].john316.church with service times and staff visible.
  • Celebration screen appears after completing all 8 steps.
  • Setup Guide shows "Complete" on page refresh.

Known failure modes​

  • Oversized logo. Add 2MB check before upload attempt with inline suggestion to compress.

  • Service times skipped. Inline validation required on Step 3: "Please add at least one service time." Do not allow step skip.

  • Theology auto-saves on dropdown pick. Dropdown pick alone must NOT fire /api/admin/theology. Playwright spec: test('Save on slide-over does not auto-nav when next is NAVIGATE').

  • Gold ring doesn't follow the step. useEffect should watch openStepId, scroll matching card into view, and apply ring-2 ring-[#D4AF37] class.

  • Celebration doesn't render. Verify handleStepSaved() correctly detects no remaining incomplete steps and triggers confetti component.