@startsimpli/ui 0.4.6 → 0.4.8

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

@@ -0,0 +1,297 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../ui/dialog'
+import { Button } from '../ui/button'
+import { Label } from '../ui/label'
+import { Calendar } from '../ui/calendar'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '../ui/popover'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select'
+import { Loader2, CalendarIcon, Clock } from 'lucide-react'
+import { useToast } from '../toast'
+import { format, addDays, setHours, setMinutes, isBefore, startOfDay } from 'date-fns'
+import { cn } from '../../utils/cn'
+
+interface SummaryItem {
+  label: string
+  value: string
+}
+
+interface ScheduleDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  /** Summary items displayed at the top of the dialog (e.g. subject, recipient count) */
+  summaryItems: SummaryItem[]
+  /** Called to schedule the message. Receives the ISO date string for the scheduled time. */
+  onSchedule: (scheduledAt: string) => Promise<void>
+  /** Called to save draft before scheduling when there are unsaved changes */
+  onSaveDraft?: () => Promise<void>
+  /** Called to prepare recipients (e.g. expand contact tags) before scheduling */
+  onPrepareRecipients?: () => Promise<void>
+  /** Whether there are unsaved changes that need saving before scheduling */
+  hasUnsavedChanges?: boolean
+  /** Dialog title. Defaults to "Schedule Send" */
+  title?: string
+  /** Dialog description. Defaults to "Choose when to send this email" */
+  description?: string
+  /** Info message shown after confirming schedule time */
+  scheduledInfoMessage?: string
+}
+
+// Generate time options in 30-minute increments
+const generateTimeOptions = () => {
+  const options: { value: string; label: string }[] = []
+  for (let hour = 0; hour < 24; hour++) {
+    for (const minute of [0, 30]) {
+      const h = hour.toString().padStart(2, '0')
+      const m = minute.toString().padStart(2, '0')
+      const period = hour < 12 ? 'AM' : 'PM'
+      const displayHour = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour
+      options.push({
+        value: `${h}:${m}`,
+        label: `${displayHour}:${m.padStart(2, '0')} ${period}`,
+      })
+    }
+  }
+  return options
+}
+
+const TIME_OPTIONS = generateTimeOptions()
+
+// Quick schedule options
+const QUICK_OPTIONS = [
+  { label: 'Tomorrow 9 AM', getValue: () => setHours(setMinutes(addDays(new Date(), 1), 0), 9) },
+  { label: 'Tomorrow 2 PM', getValue: () => setHours(setMinutes(addDays(new Date(), 1), 0), 14) },
+  { label: 'Monday 9 AM', getValue: () => {
+    const today = new Date()
+    const daysUntilMonday = (8 - today.getDay()) % 7 || 7
+    return setHours(setMinutes(addDays(today, daysUntilMonday), 0), 9)
+  }},
+  { label: 'Next week', getValue: () => setHours(setMinutes(addDays(new Date(), 7), 0), 9) },
+]
+
+export function ScheduleDialog({
+  open,
+  onOpenChange,
+  summaryItems,
+  onSchedule,
+  onSaveDraft,
+  onPrepareRecipients,
+  hasUnsavedChanges = false,
+  title = 'Schedule Send',
+  description = 'Choose when to send this email',
+  scheduledInfoMessage = 'You can cancel or edit this scheduled send from the messages list.',
+}: ScheduleDialogProps) {
+  const { toast } = useToast()
+  const [scheduling, setScheduling] = useState(false)
+  const [selectedDate, setSelectedDate] = useState<Date | undefined>(addDays(new Date(), 1))
+  const [selectedTime, setSelectedTime] = useState('09:00')
+
+  const getScheduledDateTime = (): Date | null => {
+    if (!selectedDate) return null
+    const [hours, minutes] = selectedTime.split(':').map(Number)
+    return setMinutes(setHours(selectedDate, hours), minutes)
+  }
+
+  const isValidScheduleTime = (): boolean => {
+    const scheduledTime = getScheduledDateTime()
+    if (!scheduledTime) return false
+    // Must be at least 5 minutes in the future
+    return scheduledTime.getTime() > Date.now() + 5 * 60 * 1000
+  }
+
+  const handleQuickSelect = (getValue: () => Date) => {
+    const date = getValue()
+    setSelectedDate(startOfDay(date))
+    const hours = date.getHours().toString().padStart(2, '0')
+    const minutes = date.getMinutes().toString().padStart(2, '0')
+    setSelectedTime(`${hours}:${minutes}`)
+  }
+
+  const handleSchedule = async () => {
+    const scheduledDateTime = getScheduledDateTime()
+    if (!scheduledDateTime) {
+      toast({ description: 'Please select a date and time', variant: 'destructive' })
+      return
+    }
+
+    if (!isValidScheduleTime()) {
+      toast({ description: 'Scheduled time must be at least 5 minutes in the future', variant: 'destructive' })
+      return
+    }
+
+    setScheduling(true)
+    try {
+      // Save any pending changes first
+      if (hasUnsavedChanges && onSaveDraft) {
+        await onSaveDraft()
+      }
+
+      // Prepare recipients if needed
+      if (onPrepareRecipients) {
+        await onPrepareRecipients()
+      }
+
+      // Delegate scheduling to the caller
+      await onSchedule(scheduledDateTime.toISOString())
+
+      toast({
+        description: `Scheduled for ${format(scheduledDateTime, 'PPP')} at ${format(scheduledDateTime, 'p')}`,
+      })
+      onOpenChange(false)
+    } catch (error) {
+      console.error('Error scheduling:', error)
+      toast({
+        description: error instanceof Error ? error.message : 'Failed to schedule',
+        variant: 'destructive',
+      })
+    } finally {
+      setScheduling(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-6 py-4">
+          {/* Summary */}
+          <div className="p-4 bg-muted rounded-lg space-y-2">
+            {summaryItems.map((item) => (
+              <div key={item.label} className="flex justify-between text-sm">
+                <span className="text-muted-foreground">{item.label}:</span>
+                <span className="font-medium truncate ml-4">{item.value}</span>
+              </div>
+            ))}
+          </div>
+
+          {/* Quick options */}
+          <div className="space-y-2">
+            <Label className="text-sm text-muted-foreground">Quick schedule</Label>
+            <div className="grid grid-cols-2 gap-2">
+              {QUICK_OPTIONS.map((option) => (
+                <Button
+                  key={option.label}
+                  variant="outline"
+                  size="sm"
+                  onClick={() => handleQuickSelect(option.getValue)}
+                  className="justify-start"
+                >
+                  {option.label}
+                </Button>
+              ))}
+            </div>
+          </div>
+
+          {/* Date/Time picker */}
+          <div className="space-y-4">
+            <Label className="text-sm text-muted-foreground">Or pick a specific date and time</Label>
+
+            <div className="flex gap-4">
+              {/* Date picker */}
+              <div className="flex-1 space-y-2">
+                <Label htmlFor="date">Date</Label>
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      className={cn(
+                        'w-full justify-start text-left font-normal',
+                        !selectedDate && 'text-muted-foreground'
+                      )}
+                    >
+                      <CalendarIcon className="mr-2 h-4 w-4" />
+                      {selectedDate ? format(selectedDate, 'PPP') : 'Pick a date'}
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-auto p-0" align="start">
+                    <Calendar
+                      mode="single"
+                      selected={selectedDate}
+                      onSelect={setSelectedDate}
+                      disabled={(date) => isBefore(date, startOfDay(new Date()))}
+                      initialFocus
+                    />
+                  </PopoverContent>
+                </Popover>
+              </div>
+
+              {/* Time picker */}
+              <div className="w-[140px] space-y-2">
+                <Label htmlFor="time">Time</Label>
+                <Select value={selectedTime} onValueChange={setSelectedTime}>
+                  <SelectTrigger>
+                    <Clock className="mr-2 h-4 w-4" />
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent className="max-h-[300px]">
+                    {TIME_OPTIONS.map((option) => (
+                      <SelectItem key={option.value} value={option.value}>
+                        {option.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          </div>
+
+          {/* Preview scheduled time */}
+          {selectedDate && isValidScheduleTime() && (
+            <div className="p-3 bg-blue-50 border border-blue-200 rounded-lg text-blue-800 text-sm">
+              <p>
+                <strong>Scheduled for:</strong>{' '}
+                {format(getScheduledDateTime()!, 'PPPP')} at {format(getScheduledDateTime()!, 'p')}
+              </p>
+              {scheduledInfoMessage && (
+                <p className="text-xs mt-1 text-blue-600">
+                  {scheduledInfoMessage}
+                </p>
+              )}
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={scheduling}>
+            Cancel
+          </Button>
+          <Button onClick={handleSchedule} disabled={scheduling || !isValidScheduleTime()}>
+            {scheduling ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Scheduling...
+              </>
+            ) : (
+              <>
+                <CalendarIcon className="mr-2 h-4 w-4" />
+                Schedule Send
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

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>
+  )
+}