@startsimpli/ui 0.4.5 → 0.4.7

package/src/components/email-dialogs/template-picker.tsx

@@ -0,0 +1,225 @@
+'use client'
+
+import { useState, useEffect, useMemo, useCallback } from 'react'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '../ui/dialog'
+import { Button } from '../ui/button'
+import { Badge } from '../ui/badge'
+import { ScrollArea } from '../ui/scroll-area'
+import { Input } from '../ui/input'
+import { FileText, Loader2, Search } from 'lucide-react'
+
+export interface EmailTemplate {
+  id: string
+  name: string
+  description: string | null
+  subject: string
+  blocks: string | null
+  category: string | null
+  isDefault: boolean
+  useCount: number
+  /** Alternative field name for subject */
+  subjectTemplate?: string
+  /** Alternative field name for body */
+  bodyTemplate?: string
+}
+
+interface TemplatePickerProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onSelectTemplate: (template: EmailTemplate) => void
+  /** Fetch templates from the API. Should return an array of templates. */
+  onLoadTemplates: () => Promise<EmailTemplate[]>
+  /** Optional callback to seed/create default templates when none exist */
+  onSeedTemplates?: () => Promise<void>
+  /** Optional category filter -- when set, only templates matching this category are shown */
+  categoryFilter?: string
+}
+
+// Normalize API response to ensure subject/blocks fields are populated
+function normalizeTemplates(raw: EmailTemplate[]): EmailTemplate[] {
+  return raw.map((t) => ({
+    ...t,
+    subject: t.subject || t.subjectTemplate || '',
+    blocks: t.blocks || t.bodyTemplate || null,
+  }))
+}
+
+export function TemplatePicker({
+  open,
+  onOpenChange,
+  onSelectTemplate,
+  onLoadTemplates,
+  onSeedTemplates,
+  categoryFilter,
+}: TemplatePickerProps) {
+  const [templates, setTemplates] = useState<EmailTemplate[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [search, setSearch] = useState('')
+
+  const fetchTemplates = useCallback(async () => {
+    try {
+      setLoading(true)
+      setError(null)
+
+      const data = await onLoadTemplates()
+
+      // If no templates and a seed function is provided, try seeding
+      if ((!data || data.length === 0) && onSeedTemplates) {
+        await onSeedTemplates()
+        const retryData = await onLoadTemplates()
+        setTemplates(normalizeTemplates(retryData || []))
+        return
+      }
+
+      setTemplates(normalizeTemplates(data || []))
+    } catch (err) {
+      console.error('Error fetching templates:', err)
+      setError('Failed to load templates')
+    } finally {
+      setLoading(false)
+    }
+  }, [onLoadTemplates, onSeedTemplates])
+
+  useEffect(() => {
+    if (open) {
+      fetchTemplates()
+      setSearch('')
+    }
+  }, [open, fetchTemplates])
+
+  const filteredTemplates = useMemo(() => {
+    let result = templates
+    if (categoryFilter) {
+      result = result.filter((t) => t.category === categoryFilter)
+    }
+    if (search.trim()) {
+      const q = search.toLowerCase()
+      result = result.filter(
+        (t) =>
+          t.name.toLowerCase().includes(q) ||
+          (t.description && t.description.toLowerCase().includes(q)) ||
+          t.subject.toLowerCase().includes(q)
+      )
+    }
+    return result
+  }, [templates, categoryFilter, search])
+
+  const handleSelect = useCallback((template: EmailTemplate) => {
+    onSelectTemplate(template)
+    onOpenChange(false)
+  }, [onSelectTemplate, onOpenChange])
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[600px]">
+        <DialogHeader>
+          <DialogTitle>Choose a Template</DialogTitle>
+          <DialogDescription>
+            Start with a pre-built template to save time
+          </DialogDescription>
+        </DialogHeader>
+
+        {loading ? (
+          <div className="flex items-center justify-center py-8" role="status" aria-label="Loading templates">
+            <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" aria-hidden="true" />
+            <span className="ml-2 text-muted-foreground">Loading templates...</span>
+          </div>
+        ) : error ? (
+          <div className="text-center py-8">
+            <p className="text-red-600">{error}</p>
+            <Button onClick={fetchTemplates} variant="outline" className="mt-2">
+              Retry
+            </Button>
+          </div>
+        ) : templates.length === 0 ? (
+          <div className="text-center py-8">
+            <FileText className="h-12 w-12 mx-auto text-muted-foreground mb-2" />
+            <p className="text-muted-foreground">No templates available</p>
+            {onSeedTemplates && (
+              <Button
+                onClick={async () => {
+                  await onSeedTemplates()
+                  fetchTemplates()
+                }}
+                variant="outline"
+                className="mt-2"
+              >
+                Create Default Templates
+              </Button>
+            )}
+          </div>
+        ) : (
+          <>
+            {/* Search */}
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder="Search templates..."
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                className="pl-9"
+              />
+            </div>
+
+            <ScrollArea className="h-[350px] pr-4" role="region" aria-label="Template list">
+              <div className="space-y-3" role="listbox" aria-label="Available templates">
+                {filteredTemplates.map((template) => (
+                  <button
+                    key={template.id}
+                    onClick={() => handleSelect(template)}
+                    className="w-full text-left p-4 rounded-lg border hover:border-primary hover:bg-accent/50 transition-colors"
+                    role="option"
+                    aria-label={`Select ${template.name} template`}
+                  >
+                    <div className="flex items-start justify-between">
+                      <div className="flex items-center gap-2">
+                        <FileText className="h-4 w-4 text-muted-foreground" />
+                        <span className="font-medium">{template.name}</span>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        {template.isDefault && (
+                          <Badge variant="secondary" className="text-xs">
+                            Default
+                          </Badge>
+                        )}
+                      </div>
+                    </div>
+                    {template.description && (
+                      <p className="text-sm text-muted-foreground mt-1">
+                        {template.description}
+                      </p>
+                    )}
+                    <p className="text-sm text-muted-foreground mt-2 font-mono">
+                      Subject: {template.subject}
+                    </p>
+                  </button>
+                ))}
+                {filteredTemplates.length === 0 && (
+                  <p className="text-center py-6 text-muted-foreground">
+                    No templates match your search
+                  </p>
+                )}
+              </div>
+            </ScrollArea>
+
+            <div className="flex justify-between items-center pt-4 border-t">
+              <p className="text-xs text-muted-foreground">
+                {filteredTemplates.length} template{filteredTemplates.length !== 1 ? 's' : ''} available
+              </p>
+              <Button variant="ghost" onClick={() => onOpenChange(false)}>
+                Cancel
+              </Button>
+            </div>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/email-dialogs/test-send-dialog.tsx

@@ -0,0 +1,188 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../ui/dialog'
+import { Button } from '../ui/button'
+import { Input } from '../ui/input'
+import { Label } from '../ui/label'
+import { Checkbox } from '../ui/checkbox'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select'
+import { Loader2, Send, AlertCircle } from 'lucide-react'
+import { useToast } from '../toast'
+
+interface TestSendRecipient {
+  id: string
+  name: string
+  email?: string | null
+}
+
+interface TestSendPayload {
+  testEmail: string
+  selectedRecipientId: string | undefined
+  includeTracking: boolean
+}
+
+interface TestSendDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  subject: string
+  /** Sample recipients whose data can be used for merge field substitution */
+  recipients?: TestSendRecipient[]
+  /** Default sample option label shown when no specific recipient is chosen */
+  defaultSampleLabel?: string
+  /** Callback to send the test email. Receives the test send configuration. */
+  onSendTest: (payload: TestSendPayload) => Promise<void>
+  /** Merge field help text */
+  mergeFieldHint?: string
+}
+
+export function TestSendDialog({
+  open,
+  onOpenChange,
+  subject,
+  recipients = [],
+  defaultSampleLabel = 'Sample Data (John Smith)',
+  onSendTest,
+  mergeFieldHint = 'Merge fields like {{recipient.firstName}} will use this recipient\'s data',
+}: TestSendDialogProps) {
+  const { toast } = useToast()
+  const [sending, setSending] = useState(false)
+  const [testEmail, setTestEmail] = useState('')
+  const [selectedRecipientId, setSelectedRecipientId] = useState<string>('sample')
+  const [includeTracking, setIncludeTracking] = useState(false)
+
+  const handleSendTest = async () => {
+    if (!testEmail) {
+      toast({ description: 'Please enter a test email address', variant: 'destructive' })
+      return
+    }
+
+    setSending(true)
+    try {
+      await onSendTest({
+        testEmail,
+        selectedRecipientId: selectedRecipientId !== 'sample' ? selectedRecipientId : undefined,
+        includeTracking,
+      })
+
+      toast({
+        description: `Test email sent to ${testEmail}`,
+      })
+      onOpenChange(false)
+    } catch (error) {
+      console.error('Error sending test:', error)
+      toast({
+        description: error instanceof Error ? error.message : 'Failed to send test email',
+        variant: 'destructive'
+      })
+    } finally {
+      setSending(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Send Test Email</DialogTitle>
+          <DialogDescription>
+            Send a test version to yourself to preview how it will look in your inbox.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          {/* Subject preview */}
+          <div className="p-3 bg-muted rounded-lg">
+            <Label className="text-xs text-muted-foreground">Subject</Label>
+            <p className="text-sm font-medium mt-1">[TEST] {subject || '(no subject)'}</p>
+          </div>
+
+          {/* Test email input */}
+          <div className="space-y-2">
+            <Label htmlFor="test-email">Send to</Label>
+            <Input
+              id="test-email"
+              type="email"
+              value={testEmail}
+              onChange={(e) => setTestEmail(e.target.value)}
+              placeholder="your-email@example.com"
+            />
+          </div>
+
+          {/* Sample recipient data for merge fields */}
+          <div className="space-y-2">
+            <Label>Use data from</Label>
+            <Select value={selectedRecipientId} onValueChange={setSelectedRecipientId}>
+              <SelectTrigger>
+                <SelectValue placeholder="Select recipient for merge fields" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="sample">{defaultSampleLabel}</SelectItem>
+                {recipients.map(r => (
+                  <SelectItem key={r.id} value={r.id}>
+                    {r.name} {r.email ? `(${r.email})` : ''}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <p className="text-xs text-muted-foreground">
+              {mergeFieldHint}
+            </p>
+          </div>
+
+          {/* Tracking option */}
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="include-tracking"
+              checked={includeTracking}
+              onCheckedChange={(checked) => setIncludeTracking(checked as boolean)}
+            />
+            <Label htmlFor="include-tracking" className="text-sm font-normal">
+              Include tracking pixel and link tracking
+            </Label>
+          </div>
+
+          {/* Warning */}
+          <div className="flex items-start gap-2 p-3 bg-amber-50 border border-amber-200 rounded-lg text-amber-800">
+            <AlertCircle className="h-4 w-4 mt-0.5 flex-shrink-0" />
+            <p className="text-sm">
+              Test emails are marked with [TEST] in the subject and include a banner indicating it&apos;s a test.
+            </p>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={sending}>
+            Cancel
+          </Button>
+          <Button onClick={handleSendTest} disabled={sending || !testEmail}>
+            {sending ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Sending...
+              </>
+            ) : (
+              <>
+                <Send className="mr-2 h-4 w-4" />
+                Send Test
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/email-editor/add-block-menu.tsx

@@ -0,0 +1,151 @@
+'use client'
+
+import * as React from 'react'
+import { BlockType } from './types'
+import { Button } from '../ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../ui/dropdown-menu'
+import {
+  Plus,
+  Type,
+  BarChart3,
+  Minus,
+  MousePointerClick,
+  ImageIcon,
+  ArrowUpDown,
+  Share2,
+  Building2,
+  FileText,
+} from 'lucide-react'
+
+interface BlockOption {
+  type: BlockType
+  label: string
+  icon: React.ReactNode
+  description: string
+  category: 'content' | 'layout' | 'preset'
+}
+
+const BLOCK_OPTIONS: BlockOption[] = [
+  // Content blocks
+  { type: 'text', label: 'Text', icon: <Type className="h-4 w-4" />, description: 'Rich text content', category: 'content' },
+  { type: 'image', label: 'Image', icon: <ImageIcon className="h-4 w-4" />, description: 'Image with caption', category: 'content' },
+  { type: 'cta', label: 'Button', icon: <MousePointerClick className="h-4 w-4" />, description: 'Call to action button', category: 'content' },
+  { type: 'metrics', label: 'Metrics', icon: <BarChart3 className="h-4 w-4" />, description: 'KPI grid', category: 'content' },
+
+  // Layout blocks
+  { type: 'divider', label: 'Divider', icon: <Minus className="h-4 w-4" />, description: 'Visual separator', category: 'layout' },
+  { type: 'spacer', label: 'Spacer', icon: <ArrowUpDown className="h-4 w-4" />, description: 'Vertical spacing', category: 'layout' },
+
+  // Preset blocks
+  { type: 'header', label: 'Header', icon: <Building2 className="h-4 w-4" />, description: 'Logo + company name', category: 'preset' },
+  { type: 'footer', label: 'Footer', icon: <FileText className="h-4 w-4" />, description: 'Unsubscribe + address', category: 'preset' },
+  { type: 'social', label: 'Social Links', icon: <Share2 className="h-4 w-4" />, description: 'Social media icons', category: 'preset' },
+]
+
+interface AddBlockMenuProps {
+  onAdd: (type: BlockType) => void
+  variant?: 'default' | 'small' | 'inline'
+}
+
+export function AddBlockMenu({ onAdd, variant = 'default' }: AddBlockMenuProps) {
+  const contentBlocks = BLOCK_OPTIONS.filter((b) => b.category === 'content')
+  const layoutBlocks = BLOCK_OPTIONS.filter((b) => b.category === 'layout')
+  const presetBlocks = BLOCK_OPTIONS.filter((b) => b.category === 'preset')
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        {variant === 'small' ? (
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-6 w-6 rounded-full border-dashed"
+          >
+            <Plus className="h-3 w-3" />
+          </Button>
+        ) : variant === 'inline' ? (
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-8 gap-1 text-muted-foreground hover:text-foreground"
+          >
+            <Plus className="h-3 w-3" />
+            <span className="text-xs">Add block</span>
+          </Button>
+        ) : (
+          <Button variant="outline" size="sm" className="gap-2">
+            <Plus className="h-4 w-4" />
+            Add Block
+          </Button>
+        )}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="center" className="w-56">
+        <DropdownMenuLabel className="text-xs text-muted-foreground">
+          Content
+        </DropdownMenuLabel>
+        {contentBlocks.map((option) => (
+          <DropdownMenuItem
+            key={option.type}
+            onClick={() => onAdd(option.type)}
+            className="flex items-center gap-3"
+          >
+            {option.icon}
+            <div>
+              <div className="text-sm font-medium">{option.label}</div>
+              <div className="text-xs text-muted-foreground">
+                {option.description}
+              </div>
+            </div>
+          </DropdownMenuItem>
+        ))}
+
+        <DropdownMenuSeparator />
+        <DropdownMenuLabel className="text-xs text-muted-foreground">
+          Layout
+        </DropdownMenuLabel>
+        {layoutBlocks.map((option) => (
+          <DropdownMenuItem
+            key={option.type}
+            onClick={() => onAdd(option.type)}
+            className="flex items-center gap-3"
+          >
+            {option.icon}
+            <div>
+              <div className="text-sm font-medium">{option.label}</div>
+              <div className="text-xs text-muted-foreground">
+                {option.description}
+              </div>
+            </div>
+          </DropdownMenuItem>
+        ))}
+
+        <DropdownMenuSeparator />
+        <DropdownMenuLabel className="text-xs text-muted-foreground">
+          Presets
+        </DropdownMenuLabel>
+        {presetBlocks.map((option) => (
+          <DropdownMenuItem
+            key={option.type}
+            onClick={() => onAdd(option.type)}
+            className="flex items-center gap-3"
+          >
+            {option.icon}
+            <div>
+              <div className="text-sm font-medium">{option.label}</div>
+              <div className="text-xs text-muted-foreground">
+                {option.description}
+              </div>
+            </div>
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/src/components/email-editor/block-toolbar.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+import { Button } from '../ui/button'
+import {
+  Trash2,
+  Copy,
+  ChevronUp,
+  ChevronDown,
+} from 'lucide-react'
+
+interface BlockToolbarProps {
+  onDelete: () => void
+  onDuplicate: () => void
+  onMoveUp: () => void
+  onMoveDown: () => void
+  canMoveUp: boolean
+  canMoveDown: boolean
+}
+
+export function BlockToolbar({
+  onDelete,
+  onDuplicate,
+  onMoveUp,
+  onMoveDown,
+  canMoveUp,
+  canMoveDown,
+}: BlockToolbarProps) {
+  return (
+    <div className="absolute right-1 top-1 flex items-center gap-0.5 z-20">
+      <div className="bg-background border rounded-md shadow-sm p-0.5 flex items-center gap-0.5">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-6 w-6"
+          onClick={onMoveUp}
+          disabled={!canMoveUp}
+          title="Move up"
+        >
+          <ChevronUp className="h-3.5 w-3.5" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-6 w-6"
+          onClick={onMoveDown}
+          disabled={!canMoveDown}
+          title="Move down"
+        >
+          <ChevronDown className="h-3.5 w-3.5" />
+        </Button>
+        <div className="w-px h-4 bg-border" />
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-6 w-6"
+          onClick={onDuplicate}
+          title="Duplicate"
+        >
+          <Copy className="h-3.5 w-3.5" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-6 w-6 text-destructive hover:text-destructive"
+          onClick={onDelete}
+          title="Delete"
+        >
+          <Trash2 className="h-3.5 w-3.5" />
+        </Button>
+      </div>
+    </div>
+  )
+}

package/src/components/email-editor/blocks/button-block.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import * as React from 'react'
+import { CTABlock as CTABlockType } from '../types'
+
+interface ButtonBlockProps {
+  block: CTABlockType
+  onChange: (block: CTABlockType) => void
+  isEditing?: boolean
+}
+
+export function ButtonBlockEditor({ block, onChange, isEditing = true }: ButtonBlockProps) {
+  const buttonColor = block.buttonColor || '#2563eb'
+  const textColor = block.textColor || '#ffffff'
+  const borderRadius = block.borderRadius ?? 6
+  const paddingH = block.paddingH ?? 24
+  const paddingV = block.paddingV ?? 12
+
+  const alignClass =
+    block.alignment === 'left'
+      ? 'text-left'
+      : block.alignment === 'right'
+        ? 'text-right'
+        : 'text-center'
+
+  const buttonStyle: React.CSSProperties = {
+    display: 'inline-block',
+    padding: `${paddingV}px ${paddingH}px`,
+    backgroundColor: buttonColor,
+    color: textColor,
+    borderRadius: `${borderRadius}px`,
+    textDecoration: 'none',
+    fontWeight: 500,
+    fontSize: 14,
+    cursor: isEditing ? 'default' : 'pointer',
+    border: 'none',
+  }
+
+  return (
+    <div className={`py-4 ${alignClass}`}>
+      <span style={buttonStyle}>{block.text || 'Button'}</span>
+    </div>
+  )
+}