@startsimpli/ui 0.4.6 → 0.4.8

package/src/components/email-dialogs/index.ts

@@ -0,0 +1,14 @@
+export { ScheduleDialog } from './schedule-dialog'
+export { TestSendDialog } from './test-send-dialog'
+export { PreviewDialog } from './preview-dialog'
+export type { PreviewRecipient } from './preview-dialog'
+export { TemplatePicker } from './template-picker'
+export type { EmailTemplate } from './template-picker'
+export {
+  MergeFieldsMenu,
+  MergeFieldPreview,
+  replaceMergeFields,
+  DEFAULT_MERGE_FIELDS,
+  DEFAULT_CATEGORIES,
+} from './merge-fields'
+export type { MergeField, MergeFieldCategory } from './merge-fields'

package/src/components/email-dialogs/merge-fields.tsx

@@ -0,0 +1,196 @@
+'use client'
+
+import { Button } from '../ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../ui/dropdown-menu'
+import { Braces } from 'lucide-react'
+
+export interface MergeField {
+  key: string
+  label: string
+  example: string
+  category: string
+}
+
+export interface MergeFieldCategory {
+  name: string
+  label: string
+}
+
+/** Default merge field categories for email composition */
+export const DEFAULT_CATEGORIES: MergeFieldCategory[] = [
+  { name: 'recipient', label: 'Recipient' },
+  { name: 'organization', label: 'Organization' },
+  { name: 'sender', label: 'Sender' },
+  { name: 'date', label: 'Date' },
+]
+
+/** Default merge fields for email composition */
+export const DEFAULT_MERGE_FIELDS: MergeField[] = [
+  // Recipient fields
+  { key: '{{recipient.firstName}}', label: 'First Name', example: 'John', category: 'recipient' },
+  { key: '{{recipient.lastName}}', label: 'Last Name', example: 'Smith', category: 'recipient' },
+  { key: '{{recipient.fullName}}', label: 'Full Name', example: 'John Smith', category: 'recipient' },
+  { key: '{{recipient.email}}', label: 'Email', example: 'john@example.com', category: 'recipient' },
+  { key: '{{recipient.title}}', label: 'Title', example: 'Partner', category: 'recipient' },
+
+  // Organization fields
+  { key: '{{organization.name}}', label: 'Organization', example: 'Acme Corp', category: 'organization' },
+  { key: '{{organization.type}}', label: 'Type', example: 'Enterprise', category: 'organization' },
+
+  // Sender fields
+  { key: '{{sender.name}}', label: 'Your Company', example: 'My Company', category: 'sender' },
+  { key: '{{sender.contactName}}', label: 'Your Name', example: 'Jane Doe', category: 'sender' },
+
+  // Date fields
+  { key: '{{date.today}}', label: 'Today', example: 'December 8, 2024', category: 'date' },
+  { key: '{{date.month}}', label: 'Current Month', example: 'December', category: 'date' },
+  { key: '{{date.quarter}}', label: 'Current Quarter', example: 'Q4 2024', category: 'date' },
+  { key: '{{date.year}}', label: 'Current Year', example: '2024', category: 'date' },
+]
+
+interface MergeFieldsMenuProps {
+  onInsert: (field: string) => void
+  variant?: 'default' | 'compact'
+  /** Custom merge fields to display. Defaults to DEFAULT_MERGE_FIELDS. */
+  fields?: MergeField[]
+  /** Custom categories for grouping. Defaults to DEFAULT_CATEGORIES. */
+  categories?: MergeFieldCategory[]
+}
+
+export function MergeFieldsMenu({
+  onInsert,
+  variant = 'default',
+  fields = DEFAULT_MERGE_FIELDS,
+  categories = DEFAULT_CATEGORIES,
+}: MergeFieldsMenuProps) {
+  const fieldsByCategory = categories.map((cat) => ({
+    ...cat,
+    fields: fields.filter((f) => f.category === cat.name),
+  }))
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        {variant === 'compact' ? (
+          <Button variant="ghost" size="sm" className="h-8 gap-1">
+            <Braces className="h-4 w-4" />
+            <span className="text-xs">Merge</span>
+          </Button>
+        ) : (
+          <Button variant="outline" size="sm">
+            <Braces className="mr-2 h-4 w-4" />
+            Insert Merge Field
+          </Button>
+        )}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-64">
+        {fieldsByCategory.map((cat, idx) => (
+          <div key={cat.name}>
+            {idx > 0 && <DropdownMenuSeparator />}
+            <DropdownMenuLabel>{cat.label}</DropdownMenuLabel>
+            {cat.fields.map((field) => (
+              <MergeFieldItem key={field.key} field={field} onInsert={onInsert} />
+            ))}
+          </div>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+function MergeFieldItem({ field, onInsert }: { field: MergeField; onInsert: (field: string) => void }) {
+  return (
+    <DropdownMenuItem onClick={() => onInsert(field.key)} className="flex justify-between">
+      <span>{field.label}</span>
+      <span className="text-xs text-muted-foreground">{field.example}</span>
+    </DropdownMenuItem>
+  )
+}
+
+// Preview component to show merge fields as visual tokens
+interface MergeFieldPreviewProps {
+  content: string
+  sampleData?: Record<string, string>
+}
+
+/** Replace merge field tokens in content with sample data for previewing */
+export function MergeFieldPreview({ content, sampleData }: MergeFieldPreviewProps) {
+  const defaultSampleData: Record<string, string> = {
+    '{{recipient.firstName}}': 'John',
+    '{{recipient.lastName}}': 'Smith',
+    '{{recipient.fullName}}': 'John Smith',
+    '{{recipient.email}}': 'john@example.com',
+    '{{recipient.title}}': 'Partner',
+    '{{organization.name}}': 'Acme Corp',
+    '{{organization.type}}': 'Enterprise',
+    '{{sender.name}}': 'My Company',
+    '{{sender.contactName}}': 'Jane Doe',
+    '{{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(),
+  }
+
+  const data = { ...defaultSampleData, ...sampleData }
+
+  let preview = content
+  for (const [key, value] of Object.entries(data)) {
+    preview = preview.replace(new RegExp(key.replace(/[{}]/g, '\\$&'), 'g'), value)
+  }
+
+  return preview
+}
+
+/** Replace merge fields in content with actual recipient data for sending */
+export function replaceMergeFields(
+  content: string,
+  recipient: {
+    firstName?: string | null
+    lastName?: string | null
+    name?: string | null
+    email?: string | null
+    title?: string | null
+  },
+  organization?: {
+    name?: string | null
+    type?: string | null
+  },
+  sender?: {
+    name?: string | null
+    contactName?: string | null
+  }
+): string {
+  const firstName = recipient.firstName || recipient.name?.split(' ')[0] || ''
+  const lastName = recipient.lastName || recipient.name?.split(' ').slice(1).join(' ') || ''
+  const fullName = recipient.name || `${firstName} ${lastName}`.trim()
+
+  const replacements: Record<string, string> = {
+    '{{recipient.firstName}}': firstName,
+    '{{recipient.lastName}}': lastName,
+    '{{recipient.fullName}}': fullName,
+    '{{recipient.email}}': recipient.email || '',
+    '{{recipient.title}}': recipient.title || '',
+    '{{organization.name}}': organization?.name || '',
+    '{{organization.type}}': organization?.type || '',
+    '{{sender.name}}': sender?.name || '',
+    '{{sender.contactName}}': sender?.contactName || '',
+    '{{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(),
+  }
+
+  let result = content
+  for (const [key, value] of Object.entries(replacements)) {
+    result = result.replace(new RegExp(key.replace(/[{}]/g, '\\$&'), 'g'), value)
+  }
+
+  return result
+}

package/src/components/email-dialogs/preview-dialog.tsx

@@ -0,0 +1,194 @@
+'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<string, string>
+}
+
+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<string, string>
+  /** 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<string>('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<string, string> = {
+    ...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 = `
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${previewSubject}</title>
+</head>
+<body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f3f4f6;">
+  <div style="max-width: 600px; margin: 0 auto; padding: 24px;">
+    <div style="background: white; border-radius: 8px; padding: 32px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
+      ${previewBody}
+    </div>
+    ${unsubscribeText ? `
+    <div style="text-align: center; padding: 24px; font-size: 12px; color: #6b7280;">
+      <a href="#" style="color: #6b7280;">${unsubscribeText}</a>
+    </div>
+    ` : ''}
+  </div>
+</body>
+</html>
+  `.trim()
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-4xl max-h-[90vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle>Preview Email</DialogTitle>
+        </DialogHeader>
+
+        <div className="flex items-center justify-between gap-4 pb-4 border-b">
+          <div className="flex items-center gap-4">
+            <div className="space-y-1">
+              <Label className="text-xs text-muted-foreground">Preview as</Label>
+              <Select value={selectedRecipientId} onValueChange={setSelectedRecipientId}>
+                <SelectTrigger className="w-[200px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {previewRecipients.map(r => (
+                    <SelectItem key={r.id} value={r.id}>
+                      {r.label || r.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <Tabs value={viewMode} onValueChange={(v) => setViewMode(v as typeof viewMode)}>
+            <TabsList>
+              <TabsTrigger value="desktop" className="gap-2">
+                <Monitor className="h-4 w-4" />
+                Desktop
+              </TabsTrigger>
+              <TabsTrigger value="mobile" className="gap-2">
+                <Smartphone className="h-4 w-4" />
+                Mobile
+              </TabsTrigger>
+              <TabsTrigger value="html" className="gap-2">
+                <Code className="h-4 w-4" />
+                HTML
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
+        </div>
+
+        <div className="flex-1 overflow-auto">
+          {/* Subject line preview */}
+          <div className="p-4 bg-muted/50 rounded-lg mb-4">
+            <Label className="text-xs text-muted-foreground">Subject</Label>
+            <p className="font-medium mt-1">{previewSubject}</p>
+          </div>
+
+          {viewMode === 'html' ? (
+            <div className="bg-muted rounded-lg p-4 overflow-auto">
+              <pre className="text-xs whitespace-pre-wrap font-mono">{fullEmailHtml}</pre>
+            </div>
+          ) : (
+            <div
+              className={cn(
+                'bg-gray-100 rounded-lg p-4 mx-auto transition-all',
+                viewMode === 'mobile' ? 'max-w-[375px]' : 'max-w-full'
+              )}
+            >
+              <div className="bg-white rounded-lg shadow-sm overflow-hidden">
+                <iframe
+                  srcDoc={fullEmailHtml}
+                  className="w-full border-0"
+                  style={{ height: viewMode === 'mobile' ? '500px' : '400px' }}
+                  title="Email preview"
+                />
+              </div>
+            </div>
+          )}
+        </div>
+
+        <div className="flex justify-end gap-2 pt-4 border-t">
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Close
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}