@startsimpli/ui 0.4.6 → 0.4.8

package/src/components/email-dialogs/__tests__/email-dialogs.test.tsx

@@ -0,0 +1,982 @@
+import { render, screen, fireEvent, waitFor, act } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { ScheduleDialog } from '../schedule-dialog'
+import { TemplatePicker, EmailTemplate } from '../template-picker'
+import {
+  MergeFieldsMenu,
+  MergeFieldPreview,
+  replaceMergeFields,
+} from '../merge-fields'
+import { PreviewDialog } from '../preview-dialog'
+
+// ---------------------------------------------------------------------------
+// Shared mocks
+// ---------------------------------------------------------------------------
+
+// Render Radix portals inline so dialog content is queryable
+jest.mock('@radix-ui/react-dialog', () => {
+  const actual = jest.requireActual('@radix-ui/react-dialog')
+  return {
+    ...actual,
+    Portal: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  }
+})
+
+// Render Radix dropdown portal inline
+jest.mock('@radix-ui/react-dropdown-menu', () => {
+  const actual = jest.requireActual('@radix-ui/react-dropdown-menu')
+  return {
+    ...actual,
+    Portal: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  }
+})
+
+// Render Radix select portal inline
+jest.mock('@radix-ui/react-select', () => {
+  const actual = jest.requireActual('@radix-ui/react-select')
+  return {
+    ...actual,
+    Portal: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  }
+})
+
+// Render Radix popover portal inline
+jest.mock('@radix-ui/react-popover', () => {
+  const actual = jest.requireActual('@radix-ui/react-popover')
+  return {
+    ...actual,
+    Portal: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  }
+})
+
+// Mock useToast so we can assert toast calls without real toast state
+const mockToast = jest.fn()
+jest.mock('../../toast', () => ({
+  useToast: () => ({ toast: mockToast }),
+}))
+
+// ---------------------------------------------------------------------------
+// ScheduleDialog
+// ---------------------------------------------------------------------------
+
+describe('ScheduleDialog', () => {
+  const defaultProps = {
+    open: true,
+    onOpenChange: jest.fn(),
+    onSchedule: jest.fn().mockResolvedValue(undefined),
+    summaryItems: [
+      { label: 'Subject', value: 'Q1 Update' },
+      { label: 'Recipients', value: '150 contacts' },
+    ],
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    jest.useFakeTimers()
+    jest.setSystemTime(new Date('2026-01-01T08:00:00.000Z'))
+  })
+
+  afterEach(() => {
+    jest.runOnlyPendingTimers()
+    jest.useRealTimers()
+  })
+
+  it('renders the default title', () => {
+    render(<ScheduleDialog {...defaultProps} />)
+    expect(screen.getByRole('heading', { name: 'Schedule Send' })).toBeInTheDocument()
+  })
+
+  it('renders the default description', () => {
+    render(<ScheduleDialog {...defaultProps} />)
+    expect(screen.getByText('Choose when to send this email')).toBeInTheDocument()
+  })
+
+  it('renders a custom title and description', () => {
+    render(
+      <ScheduleDialog
+        {...defaultProps}
+        title="Schedule Campaign"
+        description="Pick a delivery time"
+      />
+    )
+    expect(screen.getByRole('heading', { name: 'Schedule Campaign' })).toBeInTheDocument()
+    expect(screen.getByText('Pick a delivery time')).toBeInTheDocument()
+  })
+
+  it('renders summary item labels and values', () => {
+    render(<ScheduleDialog {...defaultProps} />)
+    expect(screen.getByText('Subject:')).toBeInTheDocument()
+    expect(screen.getByText('Q1 Update')).toBeInTheDocument()
+    expect(screen.getByText('Recipients:')).toBeInTheDocument()
+    expect(screen.getByText('150 contacts')).toBeInTheDocument()
+  })
+
+  it('renders all four quick schedule option buttons', () => {
+    render(<ScheduleDialog {...defaultProps} />)
+    expect(screen.getByRole('button', { name: 'Tomorrow 9 AM' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Tomorrow 2 PM' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Monday 9 AM' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Next week' })).toBeInTheDocument()
+  })
+
+  it('renders Date and Time labels', () => {
+    render(<ScheduleDialog {...defaultProps} />)
+    expect(screen.getByText('Date')).toBeInTheDocument()
+    expect(screen.getByText('Time')).toBeInTheDocument()
+  })
+
+  it('renders Cancel and Schedule Send buttons', () => {
+    render(<ScheduleDialog {...defaultProps} />)
+    expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /schedule send/i })).toBeInTheDocument()
+  })
+
+  it('calls onOpenChange(false) when Cancel is clicked', () => {
+    render(<ScheduleDialog {...defaultProps} />)
+    fireEvent.click(screen.getByRole('button', { name: /cancel/i }))
+    expect(defaultProps.onOpenChange).toHaveBeenCalledWith(false)
+  })
+
+  it('Schedule Send button is enabled when default date is in the future', () => {
+    // System time = 2026-01-01T08:00:00Z. Default date = addDays(now, 1) at 09:00 — valid.
+    render(<ScheduleDialog {...defaultProps} />)
+    expect(screen.getByRole('button', { name: /schedule send/i })).not.toBeDisabled()
+  })
+
+  it('calls onSchedule with an ISO date string when Schedule Send is clicked', async () => {
+    render(<ScheduleDialog {...defaultProps} />)
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: /schedule send/i }))
+    })
+    await waitFor(() => {
+      expect(defaultProps.onSchedule).toHaveBeenCalledTimes(1)
+    })
+    const calledWith: string = defaultProps.onSchedule.mock.calls[0][0]
+    expect(typeof calledWith).toBe('string')
+    expect(isNaN(Date.parse(calledWith))).toBe(false)
+  })
+
+  it('calls onSaveDraft before onSchedule when hasUnsavedChanges is true', async () => {
+    const onSaveDraft = jest.fn().mockResolvedValue(undefined)
+    const onSchedule = jest.fn().mockResolvedValue(undefined)
+    render(
+      <ScheduleDialog
+        {...defaultProps}
+        onSchedule={onSchedule}
+        onSaveDraft={onSaveDraft}
+        hasUnsavedChanges
+      />
+    )
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: /schedule send/i }))
+    })
+    await waitFor(() => {
+      expect(onSaveDraft).toHaveBeenCalled()
+      expect(onSchedule).toHaveBeenCalled()
+    })
+    expect(onSaveDraft.mock.invocationCallOrder[0]).toBeLessThan(
+      onSchedule.mock.invocationCallOrder[0]
+    )
+  })
+
+  it('does not call onSaveDraft when hasUnsavedChanges is false', async () => {
+    const onSaveDraft = jest.fn().mockResolvedValue(undefined)
+    const onSchedule = jest.fn().mockResolvedValue(undefined)
+    render(
+      <ScheduleDialog
+        {...defaultProps}
+        onSchedule={onSchedule}
+        onSaveDraft={onSaveDraft}
+        hasUnsavedChanges={false}
+      />
+    )
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: /schedule send/i }))
+    })
+    await waitFor(() => expect(onSchedule).toHaveBeenCalled())
+    expect(onSaveDraft).not.toHaveBeenCalled()
+  })
+
+  it('calls onPrepareRecipients before onSchedule when provided', async () => {
+    const onPrepareRecipients = jest.fn().mockResolvedValue(undefined)
+    const onSchedule = jest.fn().mockResolvedValue(undefined)
+    render(
+      <ScheduleDialog
+        {...defaultProps}
+        onSchedule={onSchedule}
+        onPrepareRecipients={onPrepareRecipients}
+      />
+    )
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: /schedule send/i }))
+    })
+    await waitFor(() => {
+      expect(onPrepareRecipients).toHaveBeenCalled()
+      expect(onSchedule).toHaveBeenCalled()
+    })
+    expect(onPrepareRecipients.mock.invocationCallOrder[0]).toBeLessThan(
+      onSchedule.mock.invocationCallOrder[0]
+    )
+  })
+
+  it('shows a success toast and closes dialog after successful scheduling', async () => {
+    const onOpenChange = jest.fn()
+    render(<ScheduleDialog {...defaultProps} onOpenChange={onOpenChange} />)
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: /schedule send/i }))
+    })
+    await waitFor(() => {
+      expect(mockToast).toHaveBeenCalledWith(
+        expect.objectContaining({ description: expect.stringContaining('Scheduled for') })
+      )
+      expect(onOpenChange).toHaveBeenCalledWith(false)
+    })
+  })
+
+  it('shows a destructive toast when onSchedule throws', async () => {
+    const onSchedule = jest.fn().mockRejectedValue(new Error('Network error'))
+    render(<ScheduleDialog {...defaultProps} onSchedule={onSchedule} />)
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: /schedule send/i }))
+    })
+    await waitFor(() => {
+      expect(mockToast).toHaveBeenCalledWith(
+        expect.objectContaining({
+          description: 'Network error',
+          variant: 'destructive',
+        })
+      )
+    })
+  })
+
+  it('shows scheduled preview after clicking a quick option', async () => {
+    render(<ScheduleDialog {...defaultProps} />)
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: 'Next week' }))
+    })
+    expect(screen.getByText(/Scheduled for:/)).toBeInTheDocument()
+  })
+
+  it('renders custom scheduledInfoMessage in the preview box', async () => {
+    render(
+      <ScheduleDialog
+        {...defaultProps}
+        scheduledInfoMessage="Remember to review before send."
+      />
+    )
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: 'Next week' }))
+    })
+    expect(screen.getByText('Remember to review before send.')).toBeInTheDocument()
+  })
+
+  it('does not render when open is false', () => {
+    render(<ScheduleDialog {...defaultProps} open={false} />)
+    expect(screen.queryByRole('heading', { name: 'Schedule Send' })).not.toBeInTheDocument()
+  })
+})
+
+// ---------------------------------------------------------------------------
+// TemplatePicker
+// ---------------------------------------------------------------------------
+
+const SAMPLE_TEMPLATES: EmailTemplate[] = [
+  {
+    id: '1',
+    name: 'Welcome Email',
+    description: 'Onboarding welcome message',
+    subject: 'Welcome to our platform!',
+    blocks: null,
+    category: 'onboarding',
+    isDefault: true,
+    useCount: 10,
+  },
+  {
+    id: '2',
+    name: 'Follow Up',
+    description: 'Post-demo follow up',
+    subject: 'Great talking with you',
+    blocks: null,
+    category: 'sales',
+    isDefault: false,
+    useCount: 5,
+  },
+  {
+    id: '3',
+    name: 'Newsletter',
+    description: null,
+    subject: 'Monthly updates',
+    blocks: null,
+    category: 'marketing',
+    isDefault: false,
+    useCount: 0,
+  },
+]
+
+describe('TemplatePicker', () => {
+  const defaultProps = {
+    open: true,
+    onOpenChange: jest.fn(),
+    onSelectTemplate: jest.fn(),
+    onLoadTemplates: jest.fn().mockResolvedValue(SAMPLE_TEMPLATES),
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    defaultProps.onLoadTemplates.mockResolvedValue(SAMPLE_TEMPLATES)
+  })
+
+  it('shows a loading state while templates are being fetched', async () => {
+    let resolve!: (v: EmailTemplate[]) => void
+    const onLoadTemplates = jest.fn(
+      () => new Promise<EmailTemplate[]>((res) => { resolve = res })
+    )
+    render(<TemplatePicker {...defaultProps} onLoadTemplates={onLoadTemplates} />)
+    expect(screen.getByRole('status', { name: /loading/i })).toBeInTheDocument()
+    await act(async () => { resolve([]) })
+  })
+
+  it('renders all templates after loading', async () => {
+    render(<TemplatePicker {...defaultProps} />)
+    await waitFor(() => {
+      expect(screen.getByText('Welcome Email')).toBeInTheDocument()
+      expect(screen.getByText('Follow Up')).toBeInTheDocument()
+      expect(screen.getByText('Newsletter')).toBeInTheDocument()
+    })
+  })
+
+  it('renders template descriptions when present', async () => {
+    render(<TemplatePicker {...defaultProps} />)
+    await waitFor(() => {
+      expect(screen.getByText('Onboarding welcome message')).toBeInTheDocument()
+      expect(screen.getByText('Post-demo follow up')).toBeInTheDocument()
+    })
+  })
+
+  it('renders template subjects', async () => {
+    render(<TemplatePicker {...defaultProps} />)
+    await waitFor(() => {
+      expect(screen.getByText(/Welcome to our platform!/)).toBeInTheDocument()
+    })
+  })
+
+  it('renders a "Default" badge for default templates', async () => {
+    render(<TemplatePicker {...defaultProps} />)
+    await waitFor(() => {
+      expect(screen.getByText('Default')).toBeInTheDocument()
+    })
+  })
+
+  it('shows available template count', async () => {
+    render(<TemplatePicker {...defaultProps} />)
+    await waitFor(() => {
+      expect(screen.getByText('3 templates available')).toBeInTheDocument()
+    })
+  })
+
+  it('renders the search input', async () => {
+    render(<TemplatePicker {...defaultProps} />)
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText('Search templates...')).toBeInTheDocument()
+    })
+  })
+
+  it('filters templates by name when searching', async () => {
+    render(<TemplatePicker {...defaultProps} />)
+    await waitFor(() => screen.getByPlaceholderText('Search templates...'))
+
+    fireEvent.change(screen.getByPlaceholderText('Search templates...'), {
+      target: { value: 'follow' },
+    })
+
+    expect(screen.getByText('Follow Up')).toBeInTheDocument()
+    expect(screen.queryByText('Welcome Email')).not.toBeInTheDocument()
+    expect(screen.queryByText('Newsletter')).not.toBeInTheDocument()
+  })
+
+  it('filters templates by subject when searching', async () => {
+    render(<TemplatePicker {...defaultProps} />)
+    await waitFor(() => screen.getByPlaceholderText('Search templates...'))
+
+    fireEvent.change(screen.getByPlaceholderText('Search templates...'), {
+      target: { value: 'monthly' },
+    })
+
+    expect(screen.getByText('Newsletter')).toBeInTheDocument()
+    expect(screen.queryByText('Welcome Email')).not.toBeInTheDocument()
+  })
+
+  it('filters templates by description when searching', async () => {
+    render(<TemplatePicker {...defaultProps} />)
+    await waitFor(() => screen.getByPlaceholderText('Search templates...'))
+
+    fireEvent.change(screen.getByPlaceholderText('Search templates...'), {
+      target: { value: 'onboarding' },
+    })
+
+    expect(screen.getByText('Welcome Email')).toBeInTheDocument()
+    expect(screen.queryByText('Follow Up')).not.toBeInTheDocument()
+  })
+
+  it('shows "No templates match your search" when no results', async () => {
+    render(<TemplatePicker {...defaultProps} />)
+    await waitFor(() => screen.getByPlaceholderText('Search templates...'))
+
+    fireEvent.change(screen.getByPlaceholderText('Search templates...'), {
+      target: { value: 'xyzzy-no-match' },
+    })
+
+    expect(screen.getByText('No templates match your search')).toBeInTheDocument()
+  })
+
+  it('updates count as search filters results', async () => {
+    render(<TemplatePicker {...defaultProps} />)
+    await waitFor(() => screen.getByPlaceholderText('Search templates...'))
+
+    fireEvent.change(screen.getByPlaceholderText('Search templates...'), {
+      target: { value: 'follow' },
+    })
+
+    expect(screen.getByText('1 template available')).toBeInTheDocument()
+  })
+
+  it('calls onSelectTemplate with the clicked template and closes the dialog', async () => {
+    const onSelectTemplate = jest.fn()
+    const onOpenChange = jest.fn()
+    render(
+      <TemplatePicker
+        {...defaultProps}
+        onSelectTemplate={onSelectTemplate}
+        onOpenChange={onOpenChange}
+      />
+    )
+    await waitFor(() => screen.getByText('Follow Up'))
+
+    fireEvent.click(screen.getByRole('option', { name: /select follow up template/i }))
+
+    expect(onSelectTemplate).toHaveBeenCalledTimes(1)
+    expect(onSelectTemplate).toHaveBeenCalledWith(
+      expect.objectContaining({ id: '2', name: 'Follow Up' })
+    )
+    expect(onOpenChange).toHaveBeenCalledWith(false)
+  })
+
+  it('filters by categoryFilter prop', async () => {
+    render(<TemplatePicker {...defaultProps} categoryFilter="sales" />)
+    await waitFor(() => {
+      expect(screen.getByText('Follow Up')).toBeInTheDocument()
+      expect(screen.queryByText('Welcome Email')).not.toBeInTheDocument()
+      expect(screen.queryByText('Newsletter')).not.toBeInTheDocument()
+    })
+  })
+
+  it('shows error state when onLoadTemplates rejects', async () => {
+    const onLoadTemplates = jest.fn().mockRejectedValue(new Error('API down'))
+    render(<TemplatePicker {...defaultProps} onLoadTemplates={onLoadTemplates} />)
+    await waitFor(() => {
+      expect(screen.getByText('Failed to load templates')).toBeInTheDocument()
+    })
+  })
+
+  it('shows Retry button on error and retries on click', async () => {
+    const onLoadTemplates = jest.fn()
+      .mockRejectedValueOnce(new Error('API down'))
+      .mockResolvedValueOnce(SAMPLE_TEMPLATES)
+
+    render(<TemplatePicker {...defaultProps} onLoadTemplates={onLoadTemplates} />)
+    await waitFor(() => screen.getByText('Retry'))
+
+    fireEvent.click(screen.getByText('Retry'))
+
+    await waitFor(() => {
+      expect(screen.getByText('Welcome Email')).toBeInTheDocument()
+    })
+  })
+
+  it('shows empty state when no templates are returned', async () => {
+    const onLoadTemplates = jest.fn().mockResolvedValue([])
+    render(<TemplatePicker {...defaultProps} onLoadTemplates={onLoadTemplates} />)
+    await waitFor(() => {
+      expect(screen.getByText('No templates available')).toBeInTheDocument()
+    })
+  })
+
+  it('shows "Create Default Templates" button in empty state when onSeedTemplates is provided', async () => {
+    const onLoadTemplates = jest.fn().mockResolvedValue([])
+    const onSeedTemplates = jest.fn().mockResolvedValue(undefined)
+    render(
+      <TemplatePicker
+        {...defaultProps}
+        onLoadTemplates={onLoadTemplates}
+        onSeedTemplates={onSeedTemplates}
+      />
+    )
+    await waitFor(() => {
+      expect(screen.getByText('Create Default Templates')).toBeInTheDocument()
+    })
+  })
+
+  it('normalizes templates using subjectTemplate when subject is empty', async () => {
+    const rawTemplates = [
+      {
+        id: '99',
+        name: 'Alt Template',
+        description: null,
+        subject: '',
+        blocks: null,
+        category: null,
+        isDefault: false,
+        useCount: 0,
+        subjectTemplate: 'Fallback Subject',
+      },
+    ]
+    const onLoadTemplates = jest.fn().mockResolvedValue(rawTemplates)
+    render(<TemplatePicker {...defaultProps} onLoadTemplates={onLoadTemplates} />)
+    await waitFor(() => {
+      expect(screen.getByText(/Fallback Subject/)).toBeInTheDocument()
+    })
+  })
+
+  it('calls onOpenChange(false) when Cancel is clicked', async () => {
+    const onOpenChange = jest.fn()
+    render(<TemplatePicker {...defaultProps} onOpenChange={onOpenChange} />)
+    await waitFor(() => screen.getByText('Cancel'))
+    fireEvent.click(screen.getByText('Cancel'))
+    expect(onOpenChange).toHaveBeenCalledWith(false)
+  })
+
+  it('does not render content when open is false', () => {
+    render(<TemplatePicker {...defaultProps} open={false} />)
+    expect(screen.queryByText('Choose a Template')).not.toBeInTheDocument()
+  })
+
+  it('resets search when dialog is reopened', async () => {
+    const { rerender } = render(<TemplatePicker {...defaultProps} />)
+    await waitFor(() => screen.getByPlaceholderText('Search templates...'))
+
+    fireEvent.change(screen.getByPlaceholderText('Search templates...'), {
+      target: { value: 'follow' },
+    })
+    expect(screen.queryByText('Welcome Email')).not.toBeInTheDocument()
+
+    rerender(<TemplatePicker {...defaultProps} open={false} />)
+    rerender(<TemplatePicker {...defaultProps} open={true} />)
+
+    await waitFor(() => {
+      expect(screen.getByText('Welcome Email')).toBeInTheDocument()
+    })
+  })
+})
+
+// ---------------------------------------------------------------------------
+// MergeFieldsMenu
+// ---------------------------------------------------------------------------
+
+describe('MergeFieldsMenu', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('renders the "Insert Merge Field" trigger button by default', () => {
+    render(<MergeFieldsMenu onInsert={jest.fn()} />)
+    expect(screen.getByRole('button', { name: /insert merge field/i })).toBeInTheDocument()
+  })
+
+  it('renders a compact trigger button when variant is "compact"', () => {
+    render(<MergeFieldsMenu onInsert={jest.fn()} variant="compact" />)
+    expect(screen.getByText('Merge')).toBeInTheDocument()
+  })
+
+  it('opens the dropdown menu when trigger is clicked', async () => {
+    const user = userEvent.setup()
+    render(<MergeFieldsMenu onInsert={jest.fn()} />)
+    await user.click(screen.getByRole('button', { name: /insert merge field/i }))
+    await waitFor(() => {
+      expect(screen.getByText('Recipient')).toBeInTheDocument()
+    })
+  })
+
+  it('renders all default category labels after opening', async () => {
+    const user = userEvent.setup()
+    render(<MergeFieldsMenu onInsert={jest.fn()} />)
+    await user.click(screen.getByRole('button', { name: /insert merge field/i }))
+    await waitFor(() => {
+      expect(screen.getByText('Recipient')).toBeInTheDocument()
+      // 'Organization' appears as both a category label and a field label —
+      // assert at least one instance is present
+      expect(screen.getAllByText('Organization').length).toBeGreaterThanOrEqual(1)
+      expect(screen.getByText('Sender')).toBeInTheDocument()
+      expect(screen.getByText('Date')).toBeInTheDocument()
+    })
+  })
+
+  it('renders field labels from default fields after opening', async () => {
+    const user = userEvent.setup()
+    render(<MergeFieldsMenu onInsert={jest.fn()} />)
+    await user.click(screen.getByRole('button', { name: /insert merge field/i }))
+    await waitFor(() => {
+      expect(screen.getByText('First Name')).toBeInTheDocument()
+      expect(screen.getByText('Last Name')).toBeInTheDocument()
+    })
+  })
+
+  it('renders example values for each field', async () => {
+    const user = userEvent.setup()
+    render(<MergeFieldsMenu onInsert={jest.fn()} />)
+    await user.click(screen.getByRole('button', { name: /insert merge field/i }))
+    await waitFor(() => {
+      expect(screen.getByText('John')).toBeInTheDocument()
+      expect(screen.getByText('Acme Corp')).toBeInTheDocument()
+    })
+  })
+
+  it('calls onInsert with the field key when a merge field item is clicked', async () => {
+    const user = userEvent.setup()
+    const onInsert = jest.fn()
+    render(<MergeFieldsMenu onInsert={onInsert} />)
+    await user.click(screen.getByRole('button', { name: /insert merge field/i }))
+    await waitFor(() => screen.getByText('First Name'))
+
+    await user.click(screen.getByText('First Name'))
+
+    expect(onInsert).toHaveBeenCalledTimes(1)
+    expect(onInsert).toHaveBeenCalledWith('{{recipient.firstName}}')
+  })
+
+  it('calls onInsert with sender.name key when "Your Company" is clicked', async () => {
+    const user = userEvent.setup()
+    const onInsert = jest.fn()
+    render(<MergeFieldsMenu onInsert={onInsert} />)
+    await user.click(screen.getByRole('button', { name: /insert merge field/i }))
+    await waitFor(() => screen.getByText('Your Company'))
+
+    await user.click(screen.getByText('Your Company'))
+
+    expect(onInsert).toHaveBeenCalledWith('{{sender.name}}')
+  })
+
+  it('renders custom category labels when provided', async () => {
+    const user = userEvent.setup()
+    const customFields = [
+      { key: '{{custom.field}}', label: 'Custom Field', example: 'Value', category: 'custom' },
+    ]
+    const customCategories = [{ name: 'custom', label: 'Custom' }]
+
+    render(
+      <MergeFieldsMenu
+        onInsert={jest.fn()}
+        fields={customFields}
+        categories={customCategories}
+      />
+    )
+    await user.click(screen.getByRole('button', { name: /insert merge field/i }))
+    await waitFor(() => {
+      expect(screen.getByText('Custom')).toBeInTheDocument()
+      expect(screen.getByText('Custom Field')).toBeInTheDocument()
+    })
+  })
+
+  it('calls onInsert with the custom field key', async () => {
+    const user = userEvent.setup()
+    const onInsert = jest.fn()
+    const customFields = [
+      { key: '{{custom.field}}', label: 'My Field', example: 'ex', category: 'custom' },
+    ]
+    const customCategories = [{ name: 'custom', label: 'Custom' }]
+
+    render(
+      <MergeFieldsMenu
+        onInsert={onInsert}
+        fields={customFields}
+        categories={customCategories}
+      />
+    )
+    await user.click(screen.getByRole('button', { name: /insert merge field/i }))
+    await waitFor(() => screen.getByText('My Field'))
+
+    await user.click(screen.getByText('My Field'))
+
+    expect(onInsert).toHaveBeenCalledWith('{{custom.field}}')
+  })
+})
+
+// ---------------------------------------------------------------------------
+// MergeFieldPreview (pure function)
+// ---------------------------------------------------------------------------
+
+describe('MergeFieldPreview', () => {
+  it('replaces known merge field tokens with default sample data', () => {
+    const result = MergeFieldPreview({ content: 'Hello {{recipient.firstName}}' })
+    expect(result).toBe('Hello John')
+  })
+
+  it('replaces multiple tokens in a single string', () => {
+    const result = MergeFieldPreview({
+      content: '{{recipient.firstName}} from {{organization.name}}',
+    })
+    expect(result).toBe('John from Acme Corp')
+  })
+
+  it('overrides default sample data with provided sampleData', () => {
+    const result = MergeFieldPreview({
+      content: 'Hi {{recipient.firstName}}',
+      sampleData: { '{{recipient.firstName}}': 'Alice' },
+    })
+    expect(result).toBe('Hi Alice')
+  })
+
+  it('returns content unchanged when no tokens match', () => {
+    const result = MergeFieldPreview({ content: 'Hello world' })
+    expect(result).toBe('Hello world')
+  })
+
+  it('handles empty string content', () => {
+    const result = MergeFieldPreview({ content: '' })
+    expect(result).toBe('')
+  })
+
+  it('replaces sender name token', () => {
+    const result = MergeFieldPreview({
+      content: 'From: {{sender.name}}',
+      sampleData: { '{{sender.name}}': 'My Biz' },
+    })
+    expect(result).toBe('From: My Biz')
+  })
+})
+
+// ---------------------------------------------------------------------------
+// replaceMergeFields (pure utility)
+// ---------------------------------------------------------------------------
+
+describe('replaceMergeFields', () => {
+  it('replaces recipient firstName token', () => {
+    const result = replaceMergeFields('Hi {{recipient.firstName}}', { firstName: 'Alice' })
+    expect(result).toBe('Hi Alice')
+  })
+
+  it('replaces recipient fullName using the name field when firstName/lastName absent', () => {
+    const result = replaceMergeFields('{{recipient.fullName}}', { name: 'Bob Jones' })
+    expect(result).toBe('Bob Jones')
+  })
+
+  it('derives firstName from name when not explicitly provided', () => {
+    const result = replaceMergeFields('{{recipient.firstName}}', { name: 'Bob Jones' })
+    expect(result).toBe('Bob')
+  })
+
+  it('replaces organization name token', () => {
+    const result = replaceMergeFields('{{organization.name}}', {}, { name: 'Acme Corp' })
+    expect(result).toBe('Acme Corp')
+  })
+
+  it('replaces sender tokens', () => {
+    const result = replaceMergeFields(
+      '{{sender.name}} / {{sender.contactName}}',
+      {},
+      undefined,
+      { name: 'My Biz', contactName: 'Jane' }
+    )
+    expect(result).toBe('My Biz / Jane')
+  })
+
+  it('replaces recipient email token', () => {
+    const result = replaceMergeFields('{{recipient.email}}', { email: 'bob@example.com' })
+    expect(result).toBe('bob@example.com')
+  })
+
+  it('replaces recipient title token', () => {
+    const result = replaceMergeFields('{{recipient.title}}', { title: 'CTO' })
+    expect(result).toBe('CTO')
+  })
+
+  it('replaces title with empty string when not provided', () => {
+    const result = replaceMergeFields('Title: {{recipient.title}}', {})
+    expect(result).toBe('Title: ')
+  })
+
+  it('returns content unchanged when there are no tokens', () => {
+    const result = replaceMergeFields('No tokens here', { firstName: 'X' })
+    expect(result).toBe('No tokens here')
+  })
+
+  it('replaces all occurrences of the same token', () => {
+    const result = replaceMergeFields(
+      '{{recipient.firstName}} and {{recipient.firstName}}',
+      { firstName: 'Alice' }
+    )
+    expect(result).toBe('Alice and Alice')
+  })
+
+  it('replaces organization type token', () => {
+    const result = replaceMergeFields('{{organization.type}}', {}, { type: 'Enterprise' })
+    expect(result).toBe('Enterprise')
+  })
+})
+
+// ---------------------------------------------------------------------------
+// PreviewDialog
+// ---------------------------------------------------------------------------
+
+describe('PreviewDialog', () => {
+  const defaultProps = {
+    open: true,
+    onOpenChange: jest.fn(),
+    subject: 'Hello {{recipient.firstName}}',
+    bodyHtml: '<p>Welcome to our platform!</p>',
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('renders the "Preview Email" heading', () => {
+    render(<PreviewDialog {...defaultProps} />)
+    expect(screen.getByRole('heading', { name: 'Preview Email' })).toBeInTheDocument()
+  })
+
+  it('renders the resolved subject line with merge fields substituted', () => {
+    render(<PreviewDialog {...defaultProps} />)
+    // Default sample recipient has firstName = 'John'
+    expect(screen.getByText('Hello John')).toBeInTheDocument()
+  })
+
+  it('renders Desktop, Mobile, and HTML toggle tabs', () => {
+    render(<PreviewDialog {...defaultProps} />)
+    expect(screen.getByRole('tab', { name: /desktop/i })).toBeInTheDocument()
+    expect(screen.getByRole('tab', { name: /mobile/i })).toBeInTheDocument()
+    expect(screen.getByRole('tab', { name: /html/i })).toBeInTheDocument()
+  })
+
+  it('defaults to desktop view with an email iframe', () => {
+    render(<PreviewDialog {...defaultProps} />)
+    expect(screen.getByTitle('Email preview')).toBeInTheDocument()
+  })
+
+  it('switches to mobile view when Mobile tab is clicked', async () => {
+    const user = userEvent.setup()
+    const { container } = render(<PreviewDialog {...defaultProps} />)
+    await user.click(screen.getByRole('tab', { name: /mobile/i }))
+    const allDivs = Array.from(container.querySelectorAll('div'))
+    const mobileContainer = allDivs.find(d => d.className.includes('max-w-[375px]'))
+    expect(mobileContainer).toBeTruthy()
+  })
+
+  it('switches back to desktop view when Desktop tab is clicked after mobile', async () => {
+    const user = userEvent.setup()
+    const { container } = render(<PreviewDialog {...defaultProps} />)
+    await user.click(screen.getByRole('tab', { name: /mobile/i }))
+    await user.click(screen.getByRole('tab', { name: /desktop/i }))
+    const allDivs = Array.from(container.querySelectorAll('div'))
+    const mobileContainer = allDivs.find(d => d.className.includes('max-w-[375px]'))
+    expect(mobileContainer).toBeFalsy()
+    expect(screen.getByTitle('Email preview')).toBeInTheDocument()
+  })
+
+  it('switches to HTML source view when HTML tab is clicked', async () => {
+    const user = userEvent.setup()
+    const { container } = render(<PreviewDialog {...defaultProps} />)
+    await user.click(screen.getByRole('tab', { name: /html/i }))
+    const pre = container.querySelector('pre')
+    expect(pre).toBeInTheDocument()
+    expect(pre?.textContent).toContain('<!DOCTYPE html>')
+  })
+
+  it('renders the body HTML inside the iframe src document', async () => {
+    const user = userEvent.setup()
+    const { container } = render(<PreviewDialog {...defaultProps} />)
+    await user.click(screen.getByRole('tab', { name: /html/i }))
+    const pre = container.querySelector('pre')
+    expect(pre?.textContent).toContain('Welcome to our platform!')
+  })
+
+  it('renders the unsubscribe text in HTML source by default', async () => {
+    const user = userEvent.setup()
+    const { container } = render(<PreviewDialog {...defaultProps} />)
+    await user.click(screen.getByRole('tab', { name: /html/i }))
+    const pre = container.querySelector('pre')
+    expect(pre?.textContent).toContain('Unsubscribe from these updates')
+  })
+
+  it('omits unsubscribe block when unsubscribeText is null', async () => {
+    const user = userEvent.setup()
+    const { container } = render(<PreviewDialog {...defaultProps} unsubscribeText={null} />)
+    await user.click(screen.getByRole('tab', { name: /html/i }))
+    const pre = container.querySelector('pre')
+    expect(pre?.textContent).not.toContain('Unsubscribe')
+  })
+
+  it('renders custom unsubscribe text in HTML source', async () => {
+    const user = userEvent.setup()
+    const { container } = render(<PreviewDialog {...defaultProps} unsubscribeText="Opt out" />)
+    await user.click(screen.getByRole('tab', { name: /html/i }))
+    const pre = container.querySelector('pre')
+    expect(pre?.textContent).toContain('Opt out')
+  })
+
+  it('renders the select trigger with the default sample recipient name', () => {
+    render(<PreviewDialog {...defaultProps} />)
+    // The select trigger shows the currently selected recipient name
+    expect(screen.getByText('John Smith')).toBeInTheDocument()
+  })
+
+  it('applies recipient merge data to the subject preview', () => {
+    const recipients = [
+      {
+        id: 'r1',
+        name: 'Alice',
+        mergeData: { '{{recipient.firstName}}': 'Alice' },
+      },
+    ]
+    render(<PreviewDialog {...defaultProps} recipients={recipients} />)
+    expect(screen.getByText('Hello Alice')).toBeInTheDocument()
+  })
+
+  it('uses the first custom recipient label for merge field substitution', () => {
+    const recipients = [
+      {
+        id: 'r1',
+        name: 'Alice',
+        label: 'Alice (alice@example.com)',
+        mergeData: { '{{recipient.firstName}}': 'Alice' },
+      },
+      {
+        id: 'r2',
+        name: 'Bob',
+        label: 'Bob (bob@example.com)',
+        mergeData: { '{{recipient.firstName}}': 'Bob' },
+      },
+    ]
+    render(<PreviewDialog {...defaultProps} recipients={recipients} />)
+    // The first recipient is selected by default — subject shows Alice's firstName
+    expect(screen.getByText('Hello Alice')).toBeInTheDocument()
+  })
+
+  it('calls onOpenChange(false) when the Close button is clicked', () => {
+    const onOpenChange = jest.fn()
+    render(<PreviewDialog {...defaultProps} onOpenChange={onOpenChange} />)
+    // There are two "Close" text occurrences: the visible button and an sr-only span
+    // on the dialog's X button. Click the one that is a visible button element.
+    const closeButtons = screen.getAllByText('Close')
+    const visibleButton = closeButtons.find(
+      (el) => el.tagName === 'BUTTON' && !el.classList.contains('sr-only')
+    )
+    expect(visibleButton).toBeTruthy()
+    fireEvent.click(visibleButton!)
+    expect(onOpenChange).toHaveBeenCalledWith(false)
+  })
+
+  it('does not render when open is false', () => {
+    render(<PreviewDialog {...defaultProps} open={false} />)
+    expect(screen.queryByRole('heading', { name: 'Preview Email' })).not.toBeInTheDocument()
+  })
+
+  it('shows "Subject" label', () => {
+    render(<PreviewDialog {...defaultProps} />)
+    expect(screen.getByText('Subject')).toBeInTheDocument()
+  })
+
+  it('shows "Preview as" label', () => {
+    render(<PreviewDialog {...defaultProps} />)
+    expect(screen.getByText('Preview as')).toBeInTheDocument()
+  })
+})