blackcanyontickets/reactrebuild0825/tests/publish-flow.spec.ts

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

test.describe('Publish Event Flow', () => {
  test.beforeEach(async ({ page }) => {
    // Navigate to login and authenticate as organizer
    await page.goto('/login');
    
    // Fill login form with organizer credentials
    await page.fill('[data-testid="email-input"]', 'organizer@example.com');
    await page.fill('[data-testid="password-input"]', 'password');
    await page.click('[data-testid="login-button"]');
    
    // Wait for dashboard to load
    await expect(page.locator('[data-testid="dashboard-page"]')).toBeVisible();
  });

  test('should block publish when payments not connected', async ({ page }) => {
    // Navigate to events page
    await page.goto('/events');
    await expect(page.locator('[data-testid="events-page"]')).toBeVisible();

    // Find and click on an event to view details
    await page.click('[data-testid^="event-card-"]');
    await expect(page.locator('[data-testid="event-detail-page"]')).toBeVisible();

    // Verify payment banner is visible since organizer account is not connected
    await expect(page.locator('[data-testid="payment-banner"]')).toBeVisible();

    // Click Publish Event button
    await page.click('[data-testid="publish-event-button"]');

    // Verify publish modal opens
    await expect(page.locator('text=Publish Event')).toBeVisible();

    // Check that payment connection requirement is failing
    const paymentCheck = page.locator('text=Payment Processing').locator('..');
    await expect(paymentCheck.locator('[aria-label="Failed"]')).toBeVisible();

    // Verify publish button is disabled
    const publishButton = page.locator('button:has-text("Publish Event")');
    await expect(publishButton).toBeDisabled();

    // Close modal
    await page.click('button:has-text("Cancel")');
  });

  test('should allow publish when all requirements are met', async ({ page }) => {
    // First, mock the payment connection by updating the auth context
    // This simulates an organization with connected Stripe
    await page.evaluate(() => {
      // Access the auth context and update the user's organization payment status
      const authData = JSON.parse(localStorage.getItem('bct-auth') || '{}');
      if (authData.user?.organization) {
        authData.user.organization.payment = {
          provider: 'stripe',
          connected: true,
          stripe: {
            accountId: 'acct_test_connected',
            detailsSubmitted: true,
            chargesEnabled: true,
            businessName: 'Test Connected Org'
          }
        };
        localStorage.setItem('bct-auth', JSON.stringify(authData));
      }
    });

    // Reload page to apply the payment connection change
    await page.reload();
    await expect(page.locator('[data-testid="dashboard-page"]')).toBeVisible();

    // Navigate to events page
    await page.goto('/events');
    await expect(page.locator('[data-testid="events-page"]')).toBeVisible();

    // Find and click on an event to view details
    await page.click('[data-testid^="event-card-"]');
    await expect(page.locator('[data-testid="event-detail-page"]')).toBeVisible();

    // Verify payment banner is NOT visible since payments are now connected
    await expect(page.locator('[data-testid="payment-banner"]')).not.toBeVisible();

    // Ensure the event has at least one active ticket type
    // First check if there are any ticket types
    const ticketTypesExist = await page.locator('[data-testid="add-ticket-type-button"]').isVisible();
    
    if (ticketTypesExist) {
      // Add a ticket type first
      await page.click('[data-testid="add-ticket-type-button"]');
      
      // Fill out ticket type form
      await page.fill('[data-testid="ticket-name-input"]', 'General Admission');
      await page.fill('[data-testid="ticket-price-input"]', '50.00');
      await page.fill('[data-testid="ticket-quantity-input"]', '100');
      await page.fill('[data-testid="ticket-description-input"]', 'Standard event ticket');
      
      // Submit ticket type
      await page.click('[data-testid="create-ticket-type-button"]');
      
      // Wait for modal to close and page to update
      await expect(page.locator('text=Create Ticket Type')).not.toBeVisible();
    }

    // Now try to publish the event
    await page.click('[data-testid="publish-event-button"]');

    // Verify publish modal opens
    await expect(page.locator('text=Publish Event')).toBeVisible();

    // Verify all requirements are now passing
    const ticketCheck = page.locator('text=Active Ticket Types').locator('..');
    await expect(ticketCheck.locator('[aria-label="Passed"]')).toBeVisible();

    const dateCheck = page.locator('text=Valid Event Dates').locator('..');
    await expect(dateCheck.locator('[aria-label="Passed"]')).toBeVisible();

    const paymentCheck = page.locator('text=Payment Processing').locator('..');
    await expect(paymentCheck.locator('[aria-label="Passed"]')).toBeVisible();

    // Verify publish button is enabled
    const publishButton = page.locator('button:has-text("Publish Event")');
    await expect(publishButton).toBeEnabled();

    // Click publish
    await publishButton.click();

    // Wait for success state
    await expect(page.locator('text=Event Published Successfully!')).toBeVisible();

    // Wait for modal to auto-close
    await expect(page.locator('text=Publish Event')).not.toBeVisible({ timeout: 5000 });

    // Verify event status changed to published
    await expect(page.locator('[data-testid="event-status-badge"]:has-text("published")')).toBeVisible();

    // Verify publish button is no longer visible (since event is published)
    await expect(page.locator('[data-testid="publish-event-button"]')).not.toBeVisible();
  });

  test('should navigate to payment settings when connect payments clicked', async ({ page }) => {
    // Navigate to events page
    await page.goto('/events');
    await expect(page.locator('[data-testid="events-page"]')).toBeVisible();

    // Find and click on an event to view details
    await page.click('[data-testid^="event-card-"]');
    await expect(page.locator('[data-testid="event-detail-page"]')).toBeVisible();

    // Click on Connect Stripe Account button in payment banner
    await page.click('[data-testid="payment-banner"] button:has-text("Connect Stripe Account")');

    // Should navigate to payment settings page
    await expect(page.locator('text=Payment Settings')).toBeVisible();
    await expect(page.locator('text=Connect your Stripe account')).toBeVisible();
  });

  test('should show connect payments action in publish modal', async ({ page }) => {
    // Navigate to events page
    await page.goto('/events');
    await expect(page.locator('[data-testid="events-page"]')).toBeVisible();

    // Find and click on an event to view details
    await page.click('[data-testid^="event-card-"]');
    await expect(page.locator('[data-testid="event-detail-page"]')).toBeVisible();

    // Click Publish Event button
    await page.click('[data-testid="publish-event-button"]');

    // Verify publish modal opens
    await expect(page.locator('text=Publish Event')).toBeVisible();

    // Find the payment processing requirement and click its action button
    const paymentSection = page.locator('text=Payment Processing').locator('..');
    const connectButton = paymentSection.locator('button:has-text("Connect Payments")');
    await expect(connectButton).toBeVisible();

    // Click the connect payments button
    await connectButton.click();

    // Should navigate to payment settings and close modal
    await expect(page.locator('text=Payment Settings')).toBeVisible();
    await expect(page.locator('text=Publish Event')).not.toBeVisible();
  });

  test('should add ticket type from publish modal', async ({ page }) => {
    // Navigate to events page
    await page.goto('/events');
    await expect(page.locator('[data-testid="events-page"]')).toBeVisible();

    // Find and click on an event to view details
    await page.click('[data-testid^="event-card-"]');
    await expect(page.locator('[data-testid="event-detail-page"]')).toBeVisible();

    // Click Publish Event button
    await page.click('[data-testid="publish-event-button"]');

    // Verify publish modal opens
    await expect(page.locator('text=Publish Event')).toBeVisible();

    // Check if there's an "Add Ticket Type" action button and click it
    const ticketSection = page.locator('text=Active Ticket Types').locator('..');
    const addTicketButton = ticketSection.locator('button:has-text("Add Ticket Type")');
    
    if (await addTicketButton.isVisible()) {
      await addTicketButton.click();

      // Should open create ticket type modal and close publish modal
      await expect(page.locator('text=Create Ticket Type')).toBeVisible();
      await expect(page.locator('text=Publish Event')).not.toBeVisible();
    }
  });
});