ghostguild-org/e2e/join-flow.spec.js

import { test, expect } from '@playwright/test'

// Mock Helcim API responses for join flow (avoids dependency on external API)
function mockHelcimAPIs(page, { failCustomer = false } = {}) {
  // Mock Helcim customer creation
  page.route('**/api/helcim/customer', async (route) => {
    if (failCustomer) {
      return route.fulfill({
        status: 409,
        contentType: 'application/json',
        body: JSON.stringify({
          statusCode: 409,
          statusMessage: 'A member with this email already exists',
          message: 'A member with this email already exists'
        })
      })
    }
    return route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify({
        success: true,
        customerId: 'test-cust-123',
        customerCode: 'CUST-TEST-001'
      })
    })
  })

  // Mock subscription creation
  page.route('**/api/helcim/subscription', async (route) => {
    return route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify({
        success: true,
        subscription: { id: 'test-sub-123', status: 'ACTIVE' }
      })
    })
  })
}

test.describe('Join page — member signup flow', () => {
  test('join form loads with all fields', async ({ page }) => {
    await page.goto('/join')
    await page.waitForLoadState('networkidle')

    await expect(page.locator('#join-name')).toBeVisible()
    await expect(page.locator('#join-email')).toBeVisible()
    await expect(page.locator('#circle-community')).toBeAttached()
    await expect(page.locator('#circle-founder')).toBeAttached()
    await expect(page.locator('#circle-practitioner')).toBeAttached()
    await expect(page.locator('#join-contribution')).toBeVisible()
    await expect(page.locator('.form-submit')).toBeVisible()
  })

  test('submit button disabled when form incomplete', async ({ page }) => {
    await page.goto('/join')
    await page.waitForLoadState('networkidle')

    // Clear name and email — circle defaults to community, contribution defaults to $15
    await page.locator('#join-name').fill('')
    await page.locator('#join-email').fill('')

    // Button should be disabled with empty required fields
    await expect(page.locator('.form-submit')).toBeDisabled()

    // Fill only name — still incomplete
    await page.locator('#join-name').fill('Test User')
    await expect(page.locator('.form-submit')).toBeDisabled()

    // Fill email — agreement still unchecked, so still disabled
    await page.locator('#join-email').fill('incomplete-test@example.com')
    await expect(page.locator('.form-submit')).toBeDisabled()

    // Check the Community Guidelines agreement — now all required fields satisfied
    await page.getByRole('checkbox', { name: /Community Guidelines/ }).check()
    await expect(page.locator('.form-submit')).toBeEnabled()
  })

  test('fill and submit free tier', async ({ page }) => {
    const uniqueEmail = `test-e2e-${Date.now()}@example.com`

    await page.goto('/join')
    await page.waitForLoadState('networkidle')

    // Fill in the form
    await page.locator('#join-name').fill('E2E Test User')
    await page.locator('#join-email').fill(uniqueEmail)
    await page.locator('#circle-community').check({ force: true })
    // Contribution is now a numeric input with preset chips, not a select
    await page.locator('#join-contribution').fill('0')
    await page.getByRole('checkbox', { name: /Community Guidelines/ }).check()

    await expect(page.locator('.form-submit')).toBeEnabled()

    // Mock Helcim APIs before submitting
    await mockHelcimAPIs(page)

    await page.locator('.form-submit').click()

    // Free tier flips the SignupFlowOverlay into its success state
    await expect(
      page.getByRole('heading', { name: 'Welcome to Ghost Guild!' })
    ).toBeVisible({ timeout: 15000 })
  })

  test('duplicate email shows error', async ({ page }) => {
    const duplicateEmail = `test-e2e-dup-${Date.now()}@example.com`

    await page.goto('/join')
    await page.waitForLoadState('networkidle')

    // Mock customer endpoint to return 409 (email already exists)
    await mockHelcimAPIs(page, { failCustomer: true })

    await page.locator('#join-name').fill('Dup Test User')
    await page.locator('#join-email').fill(duplicateEmail)
    await page.locator('#circle-community').check({ force: true })
    await page.locator('#join-contribution').fill('0')
    await page.getByRole('checkbox', { name: /Community Guidelines/ }).check()
    await page.locator('.form-submit').click()

    // Helcim 409 puts SignupFlowOverlay into its error state
    const overlayError = page.locator('.signup-flow-overlay .error-box')
    await expect(overlayError).toBeVisible({ timeout: 10000 })
    await expect(overlayError).toContainText(/already/i)
  })
})