308 lines
13 KiB
TypeScript
308 lines
13 KiB
TypeScript
import {
|
|
Button,
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
ConfirmDialog,
|
|
IconSpinner,
|
|
Input,
|
|
Label,
|
|
StickySaveBar,
|
|
} from '@plunk/ui';
|
|
import type {Template} from '@plunk/db';
|
|
import {DashboardLayout} from '../../components/DashboardLayout';
|
|
import {EmailSettings} from '../../components/EmailSettings';
|
|
import {EmailEditor} from '../../components/EmailEditor';
|
|
import {network} from '../../lib/network';
|
|
import {useChangeTracking} from '../../lib/hooks/useChangeTracking';
|
|
import {ArrowLeft, Save, Trash2, TriangleAlert} from 'lucide-react';
|
|
import Link from 'next/link';
|
|
import {NextSeo} from 'next-seo';
|
|
import {useRouter} from 'next/router';
|
|
import {useEffect, useState} from 'react';
|
|
import {toast} from 'sonner';
|
|
import useSWR from 'swr';
|
|
import {TemplateSchemas, detectUnsubscribeSignal} from '@plunk/shared';
|
|
import {useActiveProject} from '../../lib/contexts/ActiveProjectProvider';
|
|
|
|
export default function TemplateEditorPage() {
|
|
const router = useRouter();
|
|
const {id} = router.query;
|
|
const {activeProject} = useActiveProject();
|
|
|
|
const {data: template, mutate} = useSWR<Template>(id ? `/templates/${id}` : null, {
|
|
revalidateOnFocus: false,
|
|
});
|
|
|
|
const [editedTemplate, setEditedTemplate] = useState<Partial<Template>>({});
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [hasChanges, setHasChanges] = useState(false);
|
|
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
|
|
|
|
// Initialize edit fields when template loads
|
|
useEffect(() => {
|
|
if (template && Object.keys(editedTemplate).length === 0) {
|
|
setEditedTemplate({
|
|
name: template.name,
|
|
description: template.description || '',
|
|
subject: template.subject,
|
|
body: template.body,
|
|
from: template.from,
|
|
fromName: template.fromName || '',
|
|
replyTo: template.replyTo || '',
|
|
type: template.type,
|
|
});
|
|
// Reset hasChanges when loading fresh data
|
|
setHasChanges(false);
|
|
}
|
|
}, [template, editedTemplate]);
|
|
|
|
// Track changes
|
|
useEffect(() => {
|
|
if (!template || Object.keys(editedTemplate).length === 0) return;
|
|
|
|
const changed =
|
|
editedTemplate.name !== template.name ||
|
|
(editedTemplate.description || '') !== (template.description || '') ||
|
|
editedTemplate.subject !== template.subject ||
|
|
editedTemplate.body !== template.body ||
|
|
editedTemplate.from !== template.from ||
|
|
(editedTemplate.fromName || '') !== (template.fromName || '') ||
|
|
(editedTemplate.replyTo || '') !== (template.replyTo || '') ||
|
|
editedTemplate.type !== template.type;
|
|
|
|
setHasChanges(changed);
|
|
}, [editedTemplate, template]);
|
|
|
|
// Warn before leaving page with unsaved changes
|
|
useChangeTracking(hasChanges);
|
|
|
|
const handleSave = async (e?: React.FormEvent) => {
|
|
if (e) e.preventDefault();
|
|
setIsSubmitting(true);
|
|
|
|
try {
|
|
await network.fetch<Template, typeof TemplateSchemas.update>('PATCH', `/templates/${id}`, {
|
|
name: editedTemplate.name,
|
|
description: editedTemplate.description || undefined,
|
|
subject: editedTemplate.subject,
|
|
body: editedTemplate.body,
|
|
from: editedTemplate.from,
|
|
fromName: editedTemplate.fromName || null,
|
|
replyTo: editedTemplate.replyTo || null,
|
|
type: editedTemplate.type,
|
|
});
|
|
|
|
// Silent save - no toast notification
|
|
setHasChanges(false);
|
|
void mutate();
|
|
} catch (error) {
|
|
toast.error(error instanceof Error ? error.message : 'Failed to save template');
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
const handleDelete = async () => {
|
|
try {
|
|
await network.fetch('DELETE', `/templates/${id}`);
|
|
toast.success('Template deleted successfully');
|
|
void router.push('/templates');
|
|
} catch (error) {
|
|
toast.error(error instanceof Error ? error.message : 'Failed to delete template');
|
|
}
|
|
};
|
|
|
|
if (!template || Object.keys(editedTemplate).length === 0) {
|
|
return (
|
|
<DashboardLayout>
|
|
<div className="flex items-center justify-center min-h-[400px]">
|
|
<IconSpinner />
|
|
</div>
|
|
</DashboardLayout>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<DashboardLayout>
|
|
<NextSeo title={template.name} />
|
|
<form onSubmit={handleSave} className={`max-w-5xl mx-auto space-y-6 ${hasChanges ? 'pb-32' : ''}`}>
|
|
{/* Header */}
|
|
<div className="space-y-4">
|
|
<div className="flex items-center gap-3 sm:gap-4">
|
|
<Button asChild variant="ghost" size="sm">
|
|
<Link href="/templates"><ArrowLeft className="h-4 w-4" /></Link>
|
|
</Button>
|
|
<div className="flex-1 min-w-0">
|
|
<h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Edit Template</h1>
|
|
<p className="text-neutral-500 mt-1 text-sm sm:text-base">Make changes to your email template</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col sm:flex-row sm:items-center gap-3">
|
|
<div className="flex-1">
|
|
{!hasChanges && !isSubmitting && (
|
|
<span className="text-xs sm:text-sm text-neutral-500">All changes saved</span>
|
|
)}
|
|
{hasChanges && !isSubmitting && (
|
|
<span className="text-xs sm:text-sm text-amber-600">Unsaved changes</span>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
type="button"
|
|
variant="destructive"
|
|
onClick={() => setShowDeleteDialog(true)}
|
|
className="flex-1 sm:flex-none"
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
<span className="hidden sm:inline">Delete</span>
|
|
</Button>
|
|
<Button type="submit" disabled={!hasChanges || isSubmitting} className="flex-1 sm:flex-none">
|
|
<Save className="h-4 w-4" />
|
|
<span className="hidden sm:inline">{isSubmitting ? 'Saving...' : 'Save Changes'}</span>
|
|
<span className="sm:hidden">{isSubmitting ? 'Saving...' : 'Save'}</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Template Editor */}
|
|
<div className="space-y-6">
|
|
{/* Template Settings */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Template Settings</CardTitle>
|
|
<CardDescription>Configure the basic settings for your template</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div>
|
|
<Label htmlFor="name">Template Name *</Label>
|
|
<Input
|
|
id="name"
|
|
type="text"
|
|
value={editedTemplate.name || ''}
|
|
onChange={e => setEditedTemplate({...editedTemplate, name: e.target.value})}
|
|
required
|
|
placeholder="Welcome Email"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="description">Description</Label>
|
|
<Input
|
|
id="description"
|
|
type="text"
|
|
value={editedTemplate.description || ''}
|
|
onChange={e => setEditedTemplate({...editedTemplate, description: e.target.value})}
|
|
placeholder="Sent to new subscribers"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label>Type *</Label>
|
|
<div className="flex flex-col gap-2 mt-2">
|
|
{([
|
|
{value: 'MARKETING', label: 'Marketing', description: 'Subscribed contacts, includes unsubscribe link'} ,
|
|
{value: 'TRANSACTIONAL', label: 'Transactional', description: 'All contacts, no subscription check or footer'},
|
|
{value: 'HEADLESS', label: 'Headless', description: 'Subscribed contacts, no Plunk footer'},
|
|
] as const).map(({value, label, description}) => (
|
|
<button
|
|
key={value}
|
|
type="button"
|
|
onClick={() => setEditedTemplate({...editedTemplate, type: value})}
|
|
className={`flex items-center justify-between w-full min-h-[44px] px-4 py-3 rounded-lg border-2 text-left transition-colors ${
|
|
editedTemplate.type === value
|
|
? 'border-neutral-900 bg-neutral-50'
|
|
: 'border-neutral-200 hover:border-neutral-300'
|
|
}`}
|
|
>
|
|
<span className="font-medium text-sm text-neutral-900 shrink-0">{label}</span>
|
|
<span className="text-xs text-neutral-500 ml-4 text-right">{description}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
{editedTemplate.type === 'HEADLESS' && !detectUnsubscribeSignal(editedTemplate.body ?? '') && (
|
|
<div className="mt-2 rounded-lg border border-amber-200 bg-amber-50 overflow-hidden">
|
|
<div className="flex items-center gap-2 border-b border-amber-200 bg-amber-100/60 px-3 py-2">
|
|
<TriangleAlert className="h-3.5 w-3.5 text-amber-600 shrink-0" />
|
|
<p className="text-xs font-semibold text-amber-900">No unsubscribe link detected</p>
|
|
</div>
|
|
<div className="px-3 py-2.5 space-y-2">
|
|
<p className="text-xs text-amber-800 leading-relaxed">
|
|
You are responsible for providing recipients a way to opt out. Use the Plunk variables below to build your own footer.
|
|
</p>
|
|
<div className="flex flex-wrap gap-1.5">
|
|
<code className="inline-flex items-center rounded bg-amber-100 border border-amber-200 px-1.5 py-0.5 font-mono text-[11px] text-amber-900">
|
|
{'{{unsubscribeUrl}}'}
|
|
</code>
|
|
<code className="inline-flex items-center rounded bg-amber-100 border border-amber-200 px-1.5 py-0.5 font-mono text-[11px] text-amber-900">
|
|
{'{{manageUrl}}'}
|
|
</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="subject">Subject Line *</Label>
|
|
<Input
|
|
id="subject"
|
|
type="text"
|
|
value={editedTemplate.subject || ''}
|
|
onChange={e => setEditedTemplate({...editedTemplate, subject: e.target.value})}
|
|
required
|
|
placeholder="Welcome to our platform!"
|
|
/>
|
|
<p className="text-xs text-neutral-500 mt-1">Use {'{{variableName}}'} for dynamic content</p>
|
|
</div>
|
|
|
|
<EmailSettings
|
|
from={editedTemplate.from || ''}
|
|
fromName={editedTemplate.fromName || ''}
|
|
replyTo={editedTemplate.replyTo || ''}
|
|
onFromChange={value => setEditedTemplate({...editedTemplate, from: value})}
|
|
onFromNameChange={value => setEditedTemplate({...editedTemplate, fromName: value})}
|
|
onReplyToChange={value => setEditedTemplate({...editedTemplate, replyTo: value})}
|
|
fromNamePlaceholder={activeProject?.name || 'Your Company'}
|
|
showFromNameHelpText
|
|
layout="vertical"
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Email Body */}
|
|
<Card className="overflow-visible">
|
|
<CardHeader>
|
|
<CardTitle>Email Body</CardTitle>
|
|
<CardDescription>Create your email using the visual editor or paste custom HTML</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<EmailEditor
|
|
value={editedTemplate.body || ''}
|
|
onChange={body => setEditedTemplate({...editedTemplate, body})}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</form>
|
|
|
|
{/* Sticky Save Bar */}
|
|
<StickySaveBar hasChanges={hasChanges} isSubmitting={isSubmitting} onSave={handleSave} />
|
|
|
|
{/* Delete Template Confirmation */}
|
|
<ConfirmDialog
|
|
open={showDeleteDialog}
|
|
onOpenChange={setShowDeleteDialog}
|
|
onConfirm={handleDelete}
|
|
title="Delete Template"
|
|
description="Are you sure you want to delete this template? This action cannot be undone."
|
|
confirmText="Delete Template"
|
|
variant="destructive"
|
|
/>
|
|
</DashboardLayout>
|
|
);
|
|
}
|