Skip to main content

PewSearch Pro Website — Expected Output Spec

Status: COMPLETE -- Agent-derived from codebase analysis. Flagged items require founder confirmation. Product: Pro Website | Price: $19.95/mo | Trial: None (preview mode) URL: pewsearch.com + churchname.pewsearch.com subdomains Auth: Token-based magic link | Codebase: pewsearch/web/

How to Read This Spec​

Pro Website includes everything in Premium. This spec documents only the deltas and Pro Website-specific touchpoints. For shared touchpoints (discovery, claim flow basics, admin dashboard shared tabs), refer to pewsearch-premium.md.

Where behavior differs from Premium, callouts are used:

Pro Website only: ...

User State Definition​

FieldValue
Planpro_website
Statuspreview (pre-payment) then active (paid)
Admin URLpewsearch.com/admin/[admin_token]
AuthToken-based magic link
Public URL[vanity_slug].pewsearch.com (subdomain)
ChatbotBasic chatbot included
FeaturesEverything in Premium PLUS: video hero, denomination templates, subdomain, logo, beliefs, featured sermon, giving, contact form

Feature Access (from premium-shared.ts)​

FeaturePro WebsitePremiumNotes
premium_pageYesYes
basic_chatbotYesYes
hosted_chatYesYes
pro_websiteYesNoFull template rendering
template_selectionYesNoDenomination auto-detect + override
logo_uploadYesNoCustom logo in nav/hero
featured_videoYesNoSermon video embed

A. Pre-Purchase Deltas (vs Premium)​

Touchpoint 1: Claim Page -- Pro Website Selected​

URL: https://pewsearch.com/claim/[slug]?tier=pro_website Component: pewsearch/web/src/app/claim/[slug]/page.tsx

Should See (delta from Premium claim):​

  • Pro Website tier selected in the ClaimForm
  • Feature list highlighting Pro Website additions:
    • Stunning one-page church website
    • 3 cinematic templates with video backgrounds
    • churchname.pewsearch.com URL
    • Custom logo upload
    • Featured sermon video section
    • Basic AI chatbot included
    • SEO-optimized
  • Price: $19.95/mo (vs $9.95 for Premium)

Touchpoint 2: Activation Success (Pro Website)​

URL: https://pewsearch.com/claim/[slug]?activated=true&plan=pro_website Component: pewsearch/web/src/app/claim/[slug]/page.tsx (ActivationSuccessPage)

Should See:​

  • PartyPopper icon + "Your Pro Website is now live!" heading
  • "Welcome to your new church website" subtitle
  • Admin dashboard link
  • Vanity subdomain URL (if already set): "Visit your website at [name].pewsearch.com"
  • Next steps tailored to Pro Website:
    1. Choose your video background
    2. Upload your logo
    3. Set your custom URL (churchname.pewsearch.com)

Should NOT See:​

  • Generic "You're all set" messaging (should emphasize the WEBSITE aspect)

Touchpoint 3: Pro Website Marketing Page​

URL: https://pewsearch.com/pro-website Component: pewsearch/web/src/app/pro-website/page.tsx

Should See:​

  • Dedicated marketing page for the Pro Website product
  • Visual examples of the three denomination template styles
  • Video hero preview
  • Feature breakdown
  • Pricing ($19.95/mo)
  • "Get Pro Website" CTA -> claim flow with ?tier=pro_website
  • Comparison vs Premium
  • FAQ section

B. Admin Dashboard -- Website Tab (Touchpoints 4--10)​

The Website tab is the primary Pro Website differentiator in the admin experience. Premium users do NOT see this tab.

Implementation Note: The Website tab is identified by data-testid="ps-admin-tab-website". There may also be inline "Go to Website tab" buttons elsewhere in the dashboard — selectors must use the data-testid to avoid strict mode violations. Pro Website plans do NOT include a Training tab — the Website tab replaces Training as the primary content management surface.

Touchpoint 4: Website Tab -- Overview​

URL: https://pewsearch.com/admin/[token]#website Component: pewsearch/web/src/app/admin/[token]/components/WebsiteTab.tsx

Should See:​

  • Three main sections: Design, Content, Settings
  • Link to view the live Pro Website: "View your website at [vanity_slug].pewsearch.com"

Touchpoint 5: Website Tab -- Design Section​

URL: https://pewsearch.com/admin/[token]#website (Design area) Component: WebsiteTab.tsx (design section)

Should See:​

  • Hero Video Selection: Grid of 12 hero video options from video-library.ts:
    • church-entrance, worship, kids, prayer, lobby, etc.
    • Each with label, description, mood indicator
    • Click to select, saved as hero_video_key
  • Transition Video Selection: 2+ transition video options
    • Gentle flow, warm fade
    • Saved as transition_video_key
  • Hero Slideshow: Upload/select multiple hero images (hero_slideshow_keys)
  • Logo Upload: Upload church logo (stored in Supabase Storage via /api/upload/logo)
    • Displayed in StickyNav and hero area of the Pro Website
  • Template: Auto-detected from denomination (liturgical/community/protestant)
    • Override option via website_template column (if needed)
    • Preview of the detected template style

Touchpoint 6: Website Tab -- Content Section​

URL: https://pewsearch.com/admin/[token]#website (Content area) Component: WebsiteTab.tsx (content section)

Should See:​

  • Hours Editor: Same as Training tab (shared data)
  • Staff Editor: Same as Training tab (shared data)
  • Sermons: SermonEditor -- add sermon entries (title, description, YouTube/Vimeo URL, date). JSONB array.
  • Events: Same as Training tab (shared data)
  • Beliefs: BeliefsEditor -- add belief/doctrine cards (title, description). JSONB array.
  • Giving: URL field for online giving link (giving_url)
  • Care: Toggle for Congregation Care opt-in page

Should NOT See:​

  • Content editors are the same editors available in the Training tab -- data is shared

Touchpoint 7: Website Tab -- Settings Section​

URL: https://pewsearch.com/admin/[token]#website (Settings area) Component: WebsiteTab.tsx (settings section)

Should See:​

  • Vanity Slug: Set/edit the subdomain (vanity_slug)
    • Auto-suggested from church name
    • Fully customizable
    • Accessible at [vanity_slug].pewsearch.com
  • Featured Video URL: YouTube/Vimeo URL for featured sermon (featured_video_url)
  • Contact CC Email: Additional email for contact form submissions (contact_cc_email)

Touchpoint 8: Live Pro Website -- Public View​

URL: https://[vanity_slug].pewsearch.com Component: pewsearch/web/src/app/(website)/s/[slug]/page.tsx -> UnifiedTemplate.tsx

Should See:​

  • NO PewSearch header/footer chrome (hidden by middleware x-is-subdomain header)
  • Cinematic video hero (VideoHero): autoplay, muted, looping, full-width with church name overlay
  • StickyNav: Anchor navigation bar (sticks on scroll)
  • Denomination-themed visual style:
    • Liturgical (Catholic, Episcopal, Lutheran, Orthodox): Gold/amber accent, Playfair Display headings
    • Community (Non-denom, Bible Church, Vineyard): Orange accent
    • Protestant (Baptist, Methodist, Presbyterian, Pentecostal): Navy/blue accent
  • Sections rendered conditionally based on data:
    1. About (custom description)
    2. Beliefs (if beliefs array populated)
    3. Hours (from custom_hours)
    4. What to Expect (dress code, parking, kids, music)
    5. Staff (grid with photos and bios)
    6. Ministries (cards with descriptions)
    7. Video Transition (decorative video between sections)
    8. Featured Sermon (YouTube/Vimeo embed from featured_video_url or sermons array)
    9. Events (upcoming events calendar/list)
    10. Giving Section (if giving_url set)
    11. Map Section (Leaflet map with church location)
    12. Contact Form (submissions -> contact_submissions table + email to admin)
  • Chatbot Widget: Floating button (bottom-right) if chatbot_enabled
  • Template Footer: "Powered by PewSearch" attribution, social media links, contact info

Should NOT See:​

  • PewSearch header/navigation/footer (hidden for subdomain)
  • "Claim this church" banner (church is claimed and active)
  • Generic directory listing layout
  • Sections for data that doesn't exist (empty sections are hidden, not shown empty)

Touchpoint 9: Pro Website -- Mobile View​

URL: https://[vanity_slug].pewsearch.com (mobile viewport)

Should See:​

  • Responsive layout (Tailwind breakpoints: sm/md/lg)
  • StickyNav adapts to mobile
  • Video hero plays on mobile (browser-dependent)
  • All sections stack vertically
  • Hamburger menu for navigation
  • Chatbot widget accessible

Touchpoint 10: Pro Website -- SEO​

URL: https://[vanity_slug].pewsearch.com

Should See:​

  • Schema.org/Church structured data with all available fields
  • Proper canonical URL (subdomain)
  • Title: "[Church Name] -- [City, State]"
  • Description: Custom or auto-generated from church data
  • ISR: 1-hour revalidation (revalidate = 3600)
  • Sitemap inclusion

C. Admin Dashboard Differences (vs Premium)​

Touchpoint 11: Tab Visibility​

TabPremiumPro Website
OverviewYesYes
CallsYes (if voice)Yes (if voice)
RequestsYesYes
CareIf care_enabledIf care_enabled
TrainingYesYes
WebsiteNoYes
SettingsYesYes
Status/UpgradeYesYes

The website tab is the key addition for Pro Website. All content entered in the Website tab feeds into the public Pro Website template.

Touchpoint 12: Upgrade Tab (Pro Website)​

URL: https://pewsearch.com/admin/[token]#status Component: UpgradeTab.tsx

Should See:​

  • Current plan: "Pro Website -- $19.95/mo"
  • "Manage Subscription" link -> Stripe Customer Portal
  • CWA cross-promotion for advanced AI features

Should NOT See:​

  • Upgrade option TO Pro Website (already on it)
  • Downgrade option (handled via Stripe portal)

D. Lifecycle Deltas (vs Premium)​

Touchpoint 13: Cancellation​

Should See (delta from Premium cancellation):​

  • Pro Website template stops rendering (subdomain returns 404 or redirects to free listing)
  • All data retained in premium_churches record
  • Logo, video selections, beliefs, giving URL all preserved but hidden
  • Church listing falls back to:
    • If downgrading to Premium ($9.95): enhanced listing at /churches/[slug] (no subdomain)
    • If cancelling entirely: free listing at /churches/[slug]

Touchpoint 14: Downgrade to Premium​

URL: Stripe Customer Portal

Should See:​

  • Option to switch from Pro Website ($19.95) to Premium ($9.95)
  • Takes effect at next billing period
  • Pro Website features hidden (video hero, template, subdomain, logo, beliefs, featured sermon, giving)
  • Premium features retained (photos, staff, ministries, events, verified badge, chatbot)
  • Data preserved -- re-upgrade restores everything

Touchpoint 15: Contact Form Submissions​

URL: https://[vanity_slug].pewsearch.com (Contact section) Component: pewsearch/web/src/components/templates/shared/ContactForm.tsx

Should See:​

  • Name, email, message fields
  • Submit -> stored in contact_submissions table
  • Email notification sent to admin + CC email
  • Shows in Overview metrics

Touchpoint 16: CWA Bundle Entitlement​

FLAGGED FOR FOUNDER REVIEW:​

CWA Suite includes "PewSearch Pro Website ($19.95 value free)" as a bundled benefit. CWA Pro includes "PewSearch Premium Listing ($9.95 value free)" — NOT Pro Website.

This is not yet implemented. Current state:

  • A church buying CWA Suite gets no automatic Pro Website
  • A church buying CWA Pro gets no automatic Premium Listing
  • They would need to separately claim and pay for a PewSearch listing
  • No cross-system subscription detection exists

Decisions needed:

  1. How is the entitlement delivered? (Auto-provisioned, email with claim link, manual?)
  2. What happens if they already have a paid PewSearch Premium or Pro Website subscription? (See subscription reconciliation note in pewsearch-premium.md Touchpoint 21)
  3. What happens when the CWA Suite/Pro subscription is cancelled? (Does the free Pro Website / Premium Listing also revert?)

Denomination Template Details​

Template Auto-Detection (denomination-labels.ts)​

FamilyMatched DenominationsAccent ColorStyle
liturgicalCatholic, Episcopal, Anglican, Lutheran, Orthodox (Greek, Russian, Coptic, etc.)Gold/amber (#D4AF37)Playfair Display headings, ornate
communityNon-denominational, Bible Church, Vineyard, Calvary Chapel, IndependentOrangeModern, welcoming
protestant (default)Baptist, Methodist, Presbyterian, Pentecostal, Reformed, Church of Christ, etc.Navy/blue (#1B365D)Clean, traditional

Video Library (video-library.ts)​

12 hero video options:

  • church-entrance, worship, kids, prayer, lobby, stained-glass, baptism, choir, fellowship, communion, outdoor, sunset

2+ transition videos:

  • gentle-flow, warm-fade

Each video has: key, label, description, mood, src (/videos/hero/*.mp4), posterSrc

Playwright Test Hints​

// Touchpoint 4: Website tab visible for Pro Website
test('pro website admin sees Website tab', async ({ page }) => {
  await page.goto('https://pewsearch.com/admin/[pro-website-token]');
  await expect(page.getByText('Website')).toBeVisible();
});

// Touchpoint 5: Video hero selection
test('website tab shows hero video options', async ({ page }) => {
  await page.goto('https://pewsearch.com/admin/[pro-website-token]');
  await page.getByText('Website').click();
  // Should see video selection grid
});

// Touchpoint 8: Pro Website renders with video hero
test('pro website subdomain shows video hero', async ({ page }) => {
  await page.goto('https://[test-vanity-slug].pewsearch.com');
  // Should see video element in hero
  await expect(page.locator('video')).toBeVisible();
  // Should NOT see PewSearch header
  await expect(page.locator('header').getByText('PewSearch')).not.toBeVisible();
});

// Touchpoint 8: Pro Website shows church name
test('pro website shows church name in hero', async ({ page }) => {
  await page.goto('https://[test-vanity-slug].pewsearch.com');
  await expect(page.getByRole('heading', { level: 1 })).toContainText('[Church Name]');
});

// Touchpoint 11: Premium admin does NOT see Website tab
test('premium admin does not see Website tab', async ({ page }) => {
  await page.goto('https://pewsearch.com/admin/[premium-only-token]');
  await expect(page.getByText('Website')).not.toBeVisible();
});

// Touchpoint 8: Template footer shows PewSearch attribution
test('pro website footer shows Powered by PewSearch', async ({ page }) => {
  await page.goto('https://[test-vanity-slug].pewsearch.com');
  await expect(page.getByText(/Powered by PewSearch/i)).toBeVisible();
});