${previewSubject}

'use client' import { useState } from 'react' import { Dialog, DialogContent, DialogHeader, DialogTitle, } from '../ui/dialog' import { Button } from '../ui/button' import { Label } from '../ui/label' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../ui/select' import { Tabs, TabsList, TabsTrigger } from '../ui/tabs' import { Monitor, Smartphone, Code } from 'lucide-react' import { MergeFieldPreview } from './merge-fields' import { cn } from '../../utils/cn' export interface PreviewRecipient { id: string name: string label?: string /** Sample data for merge field substitution, keyed by merge field token (e.g. "{{recipient.firstName}}") */ mergeData?: Record } interface PreviewDialogProps { open: boolean onOpenChange: (open: boolean) => void subject: string /** * Pre-rendered email body HTML. The component will wrap this in an email * shell with proper styling for preview. */ bodyHtml: string /** Recipients available for merge field preview */ recipients?: PreviewRecipient[] /** Additional merge field sample data applied on top of recipient data */ sampleData?: Record /** Unsubscribe link text. Set to null to hide. */ unsubscribeText?: string | null } // Default sample recipient for preview const DEFAULT_RECIPIENT: PreviewRecipient = { id: 'sample', name: 'John Smith', mergeData: { '{{recipient.firstName}}': 'John', '{{recipient.lastName}}': 'Smith', '{{recipient.fullName}}': 'John Smith', '{{recipient.email}}': 'john@example.com', }, } export function PreviewDialog({ open, onOpenChange, subject, bodyHtml, recipients = [], sampleData, unsubscribeText = 'Unsubscribe from these updates', }: PreviewDialogProps) { const [viewMode, setViewMode] = useState<'desktop' | 'mobile' | 'html'>('desktop') const [selectedRecipientId, setSelectedRecipientId] = useState('sample') const previewRecipients = recipients.length > 0 ? recipients : [DEFAULT_RECIPIENT] const selectedRecipient = previewRecipients.find(r => r.id === selectedRecipientId) || previewRecipients[0] // Build merge data from selected recipient + any extra sample data const mergeDataForPreview: Record = { ...selectedRecipient.mergeData, '{{date.today}}': new Date().toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }), '{{date.month}}': new Date().toLocaleDateString('en-US', { month: 'long' }), '{{date.quarter}}': `Q${Math.ceil((new Date().getMonth() + 1) / 3)} ${new Date().getFullYear()}`, '{{date.year}}': new Date().getFullYear().toString(), ...sampleData, } const previewSubject = MergeFieldPreview({ content: subject, sampleData: mergeDataForPreview }) const previewBody = MergeFieldPreview({ content: bodyHtml, sampleData: mergeDataForPreview }) const fullEmailHtml = ` ${previewSubject}

${previewBody}

${unsubscribeText ? `

${unsubscribeText}

` : ''}

`.trim() return (