feat: ability to create new campaigns based on templates or previous campaigns
This commit is contained in:
Dries Augustyns
@@ -0,0 +1,424 @@
|
|||||||
|
import {
|
||||||
|
Badge,
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardDescription,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
Checkbox,
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
Label,
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@plunk/ui';
|
||||||
|
import type {Campaign} from '@plunk/db';
|
||||||
|
import {CampaignStatus} from '@plunk/db';
|
||||||
|
import {ArrowLeft, Calendar, Mail, Users} from 'lucide-react';
|
||||||
|
import {useState} from 'react';
|
||||||
|
import useSWR from 'swr';
|
||||||
|
|
||||||
|
interface PaginatedCampaigns {
|
||||||
|
campaigns: Campaign[];
|
||||||
|
total: number;
|
||||||
|
page: number;
|
||||||
|
pageSize: number;
|
||||||
|
totalPages: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CampaignSelectionDialogProps {
|
||||||
|
open: boolean;
|
||||||
|
onOpenChange: (open: boolean) => void;
|
||||||
|
onSelectCampaign: (campaign: Campaign, selectedFields: SelectedFields) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SelectedFields {
|
||||||
|
subject: boolean;
|
||||||
|
body: boolean;
|
||||||
|
from: boolean;
|
||||||
|
fromName: boolean;
|
||||||
|
replyTo: boolean;
|
||||||
|
audience: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CampaignSelectionDialog({open, onOpenChange, onSelectCampaign}: CampaignSelectionDialogProps) {
|
||||||
|
const [page, setPage] = useState(1);
|
||||||
|
const [statusFilter, setStatusFilter] = useState<string>('ALL');
|
||||||
|
const [step, setStep] = useState<'select' | 'configure'>('select');
|
||||||
|
const [selectedCampaign, setSelectedCampaign] = useState<Campaign | null>(null);
|
||||||
|
const [selectedFields, setSelectedFields] = useState<SelectedFields>({
|
||||||
|
subject: true,
|
||||||
|
body: true,
|
||||||
|
from: true,
|
||||||
|
fromName: true,
|
||||||
|
replyTo: true,
|
||||||
|
audience: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
const {data, isLoading} = useSWR<PaginatedCampaigns>(
|
||||||
|
open
|
||||||
|
? `/campaigns?page=${page}&pageSize=10${statusFilter !== 'ALL' ? `&status=${statusFilter}` : ''}`
|
||||||
|
: null,
|
||||||
|
{revalidateOnFocus: false},
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleCampaignClick = (campaign: Campaign) => {
|
||||||
|
setSelectedCampaign(campaign);
|
||||||
|
setStep('configure');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBack = () => {
|
||||||
|
setStep('select');
|
||||||
|
setSelectedCampaign(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleConfirm = () => {
|
||||||
|
if (selectedCampaign) {
|
||||||
|
onSelectCampaign(selectedCampaign, selectedFields);
|
||||||
|
onOpenChange(false);
|
||||||
|
// Reset state
|
||||||
|
setPage(1);
|
||||||
|
setStatusFilter('ALL');
|
||||||
|
setStep('select');
|
||||||
|
setSelectedCampaign(null);
|
||||||
|
setSelectedFields({
|
||||||
|
subject: true,
|
||||||
|
body: true,
|
||||||
|
from: true,
|
||||||
|
fromName: true,
|
||||||
|
replyTo: true,
|
||||||
|
audience: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleField = (field: keyof SelectedFields) => {
|
||||||
|
setSelectedFields(prev => ({...prev, [field]: !prev[field]}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusBadge = (status: CampaignStatus) => {
|
||||||
|
const variants: Record<
|
||||||
|
CampaignStatus,
|
||||||
|
{variant: 'default' | 'secondary' | 'destructive' | 'outline'; label: string; className?: string}
|
||||||
|
> = {
|
||||||
|
DRAFT: {variant: 'secondary', label: 'Draft', className: 'bg-neutral-100 text-neutral-700'},
|
||||||
|
SCHEDULED: {variant: 'default', label: 'Scheduled', className: 'bg-blue-100 text-blue-700'},
|
||||||
|
SENDING: {variant: 'default', label: 'Sending', className: 'bg-purple-100 text-purple-700'},
|
||||||
|
SENT: {variant: 'default', label: 'Sent', className: 'bg-green-100 text-green-700'},
|
||||||
|
CANCELLED: {variant: 'destructive', label: 'Cancelled', className: 'bg-red-100 text-red-700'},
|
||||||
|
};
|
||||||
|
|
||||||
|
const config = variants[status];
|
||||||
|
return (
|
||||||
|
<Badge variant={config.variant} className={config.className}>
|
||||||
|
{config.label}
|
||||||
|
</Badge>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getAudienceLabel = (campaign: Campaign) => {
|
||||||
|
if (campaign.audienceType === 'ALL') {
|
||||||
|
return 'All Contacts';
|
||||||
|
} else if (campaign.audienceType === 'SEGMENT') {
|
||||||
|
return `Segment (${campaign.totalRecipients.toLocaleString()} contacts)`;
|
||||||
|
} else {
|
||||||
|
return `Filtered (${campaign.totalRecipients.toLocaleString()} contacts)`;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||||
|
<DialogContent className="max-w-3xl max-h-[80vh] overflow-hidden flex flex-col">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle className="flex items-center gap-2">
|
||||||
|
{step === 'configure' && (
|
||||||
|
<Button variant="ghost" size="sm" onClick={handleBack} className="h-8 w-8 p-0">
|
||||||
|
<ArrowLeft className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
{step === 'select' ? 'Select a Campaign' : 'Choose What to Copy'}
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
{step === 'select'
|
||||||
|
? 'Choose a previous campaign to use as a starting point'
|
||||||
|
: 'Select which parts of the campaign you want to use'}
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
{step === 'select' ? (
|
||||||
|
<div className="space-y-4 flex-1 overflow-hidden flex flex-col">
|
||||||
|
{/* Status Filter */}
|
||||||
|
<div className="space-y-3">
|
||||||
|
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="All Statuses" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="ALL">All Campaigns</SelectItem>
|
||||||
|
<SelectItem value="DRAFT">Draft</SelectItem>
|
||||||
|
<SelectItem value="SCHEDULED">Scheduled</SelectItem>
|
||||||
|
<SelectItem value="SENDING">Sending</SelectItem>
|
||||||
|
<SelectItem value="SENT">Sent</SelectItem>
|
||||||
|
<SelectItem value="CANCELLED">Cancelled</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Campaigns List */}
|
||||||
|
<div className="flex-1 overflow-y-auto space-y-3">
|
||||||
|
{isLoading && (
|
||||||
|
<div className="flex items-center justify-center py-12">
|
||||||
|
<div className="text-center">
|
||||||
|
<svg
|
||||||
|
className="h-8 w-8 animate-spin mx-auto text-neutral-900"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||||||
|
<path
|
||||||
|
className="opacity-75"
|
||||||
|
fill="currentColor"
|
||||||
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<p className="mt-2 text-sm text-neutral-500">Loading campaigns...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!isLoading && data?.campaigns.length === 0 && (
|
||||||
|
<div className="text-center py-12">
|
||||||
|
<Mail className="h-12 w-12 text-neutral-400 mx-auto mb-4" />
|
||||||
|
<h3 className="text-lg font-medium text-neutral-900 mb-2">No campaigns found</h3>
|
||||||
|
<p className="text-neutral-500">
|
||||||
|
{statusFilter !== 'ALL' ? 'Try adjusting your filter' : 'Create your first campaign to get started'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{data?.campaigns.map(campaign => (
|
||||||
|
<Card
|
||||||
|
key={campaign.id}
|
||||||
|
className="cursor-pointer hover:border-primary/50 hover:shadow-md transition-all"
|
||||||
|
onClick={() => handleCampaignClick(campaign)}
|
||||||
|
>
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<div className="flex items-start justify-between gap-3">
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center gap-2 mb-1">
|
||||||
|
<CardTitle className="text-base truncate">{campaign.name}</CardTitle>
|
||||||
|
{getStatusBadge(campaign.status)}
|
||||||
|
</div>
|
||||||
|
{campaign.description && (
|
||||||
|
<CardDescription className="text-xs line-clamp-1">{campaign.description}</CardDescription>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="pt-0">
|
||||||
|
<div className="space-y-2 text-xs">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Mail className="h-3.5 w-3.5 text-neutral-500" />
|
||||||
|
<span className="text-neutral-500">Subject:</span>
|
||||||
|
<span className="font-medium text-neutral-900 truncate">{campaign.subject}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Users className="h-3.5 w-3.5 text-neutral-500" />
|
||||||
|
<span className="text-neutral-500">Audience:</span>
|
||||||
|
<span className="text-neutral-700">{getAudienceLabel(campaign)}</span>
|
||||||
|
</div>
|
||||||
|
{campaign.scheduledFor && (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Calendar className="h-3.5 w-3.5 text-neutral-500" />
|
||||||
|
<span className="text-neutral-500">Scheduled:</span>
|
||||||
|
<span className="text-neutral-700">
|
||||||
|
{new Date(campaign.scheduledFor).toLocaleDateString()}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Pagination */}
|
||||||
|
{data && data.totalPages > 1 && (
|
||||||
|
<div className="flex items-center justify-between pt-3 border-t">
|
||||||
|
<p className="text-sm text-neutral-500">
|
||||||
|
Page {page} of {data.totalPages}
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Button variant="outline" size="sm" onClick={() => setPage(p => p - 1)} disabled={page === 1}>
|
||||||
|
Previous
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setPage(p => p + 1)}
|
||||||
|
disabled={page === data.totalPages}
|
||||||
|
>
|
||||||
|
Next
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex-1 flex flex-col overflow-hidden">
|
||||||
|
{/* Scrollable Content */}
|
||||||
|
<div className="flex-1 overflow-y-auto space-y-6 pr-2">
|
||||||
|
{/* Campaign Preview */}
|
||||||
|
{selectedCampaign && (
|
||||||
|
<Card className="bg-neutral-50">
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<div className="flex items-start justify-between gap-3">
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center gap-2 mb-1">
|
||||||
|
<CardTitle className="text-base">{selectedCampaign.name}</CardTitle>
|
||||||
|
{getStatusBadge(selectedCampaign.status)}
|
||||||
|
</div>
|
||||||
|
{selectedCampaign.description && (
|
||||||
|
<CardDescription className="text-xs">{selectedCampaign.description}</CardDescription>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Field Selection */}
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div
|
||||||
|
className="flex items-center space-x-3 p-3 rounded-lg border border-neutral-200 hover:bg-neutral-50 transition-colors cursor-pointer"
|
||||||
|
onClick={() => toggleField('subject')}
|
||||||
|
>
|
||||||
|
<Checkbox
|
||||||
|
id="subject"
|
||||||
|
checked={selectedFields.subject}
|
||||||
|
onCheckedChange={() => toggleField('subject')}
|
||||||
|
/>
|
||||||
|
<div className="flex-1">
|
||||||
|
<Label htmlFor="subject" className="text-sm font-medium cursor-pointer">
|
||||||
|
Email Subject
|
||||||
|
</Label>
|
||||||
|
{selectedCampaign?.subject && (
|
||||||
|
<p className="text-xs text-neutral-500 mt-0.5">{selectedCampaign.subject}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="flex items-center space-x-3 p-3 rounded-lg border border-neutral-200 hover:bg-neutral-50 transition-colors cursor-pointer"
|
||||||
|
onClick={() => toggleField('body')}
|
||||||
|
>
|
||||||
|
<Checkbox id="body" checked={selectedFields.body} onCheckedChange={() => toggleField('body')} />
|
||||||
|
<div className="flex-1">
|
||||||
|
<Label htmlFor="body" className="text-sm font-medium cursor-pointer">
|
||||||
|
Email Body
|
||||||
|
</Label>
|
||||||
|
<p className="text-xs text-neutral-500 mt-0.5">The full email content and design</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="flex items-center space-x-3 p-3 rounded-lg border border-neutral-200 hover:bg-neutral-50 transition-colors cursor-pointer"
|
||||||
|
onClick={() => toggleField('from')}
|
||||||
|
>
|
||||||
|
<Checkbox id="from" checked={selectedFields.from} onCheckedChange={() => toggleField('from')} />
|
||||||
|
<div className="flex-1">
|
||||||
|
<Label htmlFor="from" className="text-sm font-medium cursor-pointer">
|
||||||
|
From Email
|
||||||
|
</Label>
|
||||||
|
{selectedCampaign?.from && (
|
||||||
|
<p className="text-xs text-neutral-500 mt-0.5">{selectedCampaign.from}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="flex items-center space-x-3 p-3 rounded-lg border border-neutral-200 hover:bg-neutral-50 transition-colors cursor-pointer"
|
||||||
|
onClick={() => toggleField('fromName')}
|
||||||
|
>
|
||||||
|
<Checkbox
|
||||||
|
id="fromName"
|
||||||
|
checked={selectedFields.fromName}
|
||||||
|
onCheckedChange={() => toggleField('fromName')}
|
||||||
|
/>
|
||||||
|
<div className="flex-1">
|
||||||
|
<Label htmlFor="fromName" className="text-sm font-medium cursor-pointer">
|
||||||
|
From Name
|
||||||
|
</Label>
|
||||||
|
{selectedCampaign?.fromName && (
|
||||||
|
<p className="text-xs text-neutral-500 mt-0.5">{selectedCampaign.fromName}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="flex items-center space-x-3 p-3 rounded-lg border border-neutral-200 hover:bg-neutral-50 transition-colors cursor-pointer"
|
||||||
|
onClick={() => toggleField('replyTo')}
|
||||||
|
>
|
||||||
|
<Checkbox
|
||||||
|
id="replyTo"
|
||||||
|
checked={selectedFields.replyTo}
|
||||||
|
onCheckedChange={() => toggleField('replyTo')}
|
||||||
|
/>
|
||||||
|
<div className="flex-1">
|
||||||
|
<Label htmlFor="replyTo" className="text-sm font-medium cursor-pointer">
|
||||||
|
Reply-To Email
|
||||||
|
</Label>
|
||||||
|
{selectedCampaign?.replyTo && (
|
||||||
|
<p className="text-xs text-neutral-500 mt-0.5">{selectedCampaign.replyTo}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="flex items-center space-x-3 p-3 rounded-lg border border-neutral-200 hover:bg-neutral-50 transition-colors cursor-pointer"
|
||||||
|
onClick={() => toggleField('audience')}
|
||||||
|
>
|
||||||
|
<Checkbox
|
||||||
|
id="audience"
|
||||||
|
checked={selectedFields.audience}
|
||||||
|
onCheckedChange={() => toggleField('audience')}
|
||||||
|
/>
|
||||||
|
<div className="flex-1">
|
||||||
|
<Label htmlFor="audience" className="text-sm font-medium cursor-pointer">
|
||||||
|
Audience Settings
|
||||||
|
</Label>
|
||||||
|
{selectedCampaign && (
|
||||||
|
<p className="text-xs text-neutral-500 mt-0.5">{getAudienceLabel(selectedCampaign)}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Fixed Action Buttons */}
|
||||||
|
<div className="flex gap-3 pt-4 border-t mt-4">
|
||||||
|
<Button variant="outline" onClick={handleBack} className="flex-1">
|
||||||
|
Back
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={handleConfirm}
|
||||||
|
className="flex-1"
|
||||||
|
disabled={!Object.values(selectedFields).some(v => v)}
|
||||||
|
>
|
||||||
|
Create Campaign
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,427 @@
|
|||||||
|
import {
|
||||||
|
Badge,
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardDescription,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
Checkbox,
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
Input,
|
||||||
|
Label,
|
||||||
|
} from '@plunk/ui';
|
||||||
|
import type {Template} from '@plunk/db';
|
||||||
|
import {network} from '../lib/network';
|
||||||
|
import {ArrowLeft, FileText, Search} from 'lucide-react';
|
||||||
|
import {useState} from 'react';
|
||||||
|
import useSWR from 'swr';
|
||||||
|
|
||||||
|
interface PaginatedTemplates {
|
||||||
|
templates: Template[];
|
||||||
|
total: number;
|
||||||
|
page: number;
|
||||||
|
pageSize: number;
|
||||||
|
totalPages: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface TemplateSelectionDialogProps {
|
||||||
|
open: boolean;
|
||||||
|
onOpenChange: (open: boolean) => void;
|
||||||
|
onSelectTemplate: (template: Template, selectedFields: SelectedFields) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SelectedFields {
|
||||||
|
subject: boolean;
|
||||||
|
body: boolean;
|
||||||
|
from: boolean;
|
||||||
|
fromName: boolean;
|
||||||
|
replyTo: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function TemplateSelectionDialog({open, onOpenChange, onSelectTemplate}: TemplateSelectionDialogProps) {
|
||||||
|
const [search, setSearch] = useState('');
|
||||||
|
const [searchInput, setSearchInput] = useState('');
|
||||||
|
const [page, setPage] = useState(1);
|
||||||
|
const [typeFilter, setTypeFilter] = useState<'ALL' | 'TRANSACTIONAL' | 'MARKETING'>('ALL');
|
||||||
|
const [step, setStep] = useState<'select' | 'configure'>('select');
|
||||||
|
const [selectedTemplate, setSelectedTemplate] = useState<Template | null>(null);
|
||||||
|
const [selectedFields, setSelectedFields] = useState<SelectedFields>({
|
||||||
|
subject: true,
|
||||||
|
body: true,
|
||||||
|
from: true,
|
||||||
|
fromName: true,
|
||||||
|
replyTo: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
const {data, isLoading} = useSWR<PaginatedTemplates>(
|
||||||
|
open
|
||||||
|
? `/templates?page=${page}&pageSize=10${search ? `&search=${search}` : ''}${typeFilter !== 'ALL' ? `&type=${typeFilter}` : ''}`
|
||||||
|
: null,
|
||||||
|
{revalidateOnFocus: false},
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleSearch = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setSearch(searchInput);
|
||||||
|
setPage(1);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleTemplateClick = (template: Template) => {
|
||||||
|
setSelectedTemplate(template);
|
||||||
|
setStep('configure');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBack = () => {
|
||||||
|
setStep('select');
|
||||||
|
setSelectedTemplate(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleConfirm = () => {
|
||||||
|
if (selectedTemplate) {
|
||||||
|
onSelectTemplate(selectedTemplate, selectedFields);
|
||||||
|
onOpenChange(false);
|
||||||
|
// Reset state
|
||||||
|
setSearch('');
|
||||||
|
setSearchInput('');
|
||||||
|
setPage(1);
|
||||||
|
setTypeFilter('ALL');
|
||||||
|
setStep('select');
|
||||||
|
setSelectedTemplate(null);
|
||||||
|
setSelectedFields({
|
||||||
|
subject: true,
|
||||||
|
body: true,
|
||||||
|
from: true,
|
||||||
|
fromName: true,
|
||||||
|
replyTo: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleField = (field: keyof SelectedFields) => {
|
||||||
|
setSelectedFields(prev => ({...prev, [field]: !prev[field]}));
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||||
|
<DialogContent className="max-w-3xl max-h-[80vh] overflow-hidden flex flex-col">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle className="flex items-center gap-2">
|
||||||
|
{step === 'configure' && (
|
||||||
|
<Button variant="ghost" size="sm" onClick={handleBack} className="h-8 w-8 p-0">
|
||||||
|
<ArrowLeft className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
{step === 'select' ? 'Select a Template' : 'Choose What to Copy'}
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
{step === 'select'
|
||||||
|
? 'Choose a template to start your campaign with'
|
||||||
|
: 'Select which parts of the template you want to use'}
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
{step === 'select' ? (
|
||||||
|
<div className="space-y-4 flex-1 overflow-hidden flex flex-col">
|
||||||
|
{/* Search & Filters */}
|
||||||
|
<div className="space-y-3">
|
||||||
|
<form onSubmit={handleSearch} className="flex gap-2">
|
||||||
|
<div className="relative flex-1">
|
||||||
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-neutral-500" />
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search templates..."
|
||||||
|
value={searchInput}
|
||||||
|
onChange={e => setSearchInput(e.target.value)}
|
||||||
|
className="pl-10"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Button type="submit" size="sm">
|
||||||
|
Search
|
||||||
|
</Button>
|
||||||
|
{search && (
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => {
|
||||||
|
setSearch('');
|
||||||
|
setSearchInput('');
|
||||||
|
setPage(1);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Clear
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</form>
|
||||||
|
|
||||||
|
{/* Type Filter */}
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
onClick={() => {
|
||||||
|
setTypeFilter('ALL');
|
||||||
|
setPage(1);
|
||||||
|
}}
|
||||||
|
variant={typeFilter === 'ALL' ? 'default' : 'secondary'}
|
||||||
|
size="sm"
|
||||||
|
>
|
||||||
|
All Templates
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
onClick={() => {
|
||||||
|
setTypeFilter('MARKETING');
|
||||||
|
setPage(1);
|
||||||
|
}}
|
||||||
|
variant={typeFilter === 'MARKETING' ? 'default' : 'secondary'}
|
||||||
|
size="sm"
|
||||||
|
>
|
||||||
|
Marketing
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
onClick={() => {
|
||||||
|
setTypeFilter('TRANSACTIONAL');
|
||||||
|
setPage(1);
|
||||||
|
}}
|
||||||
|
variant={typeFilter === 'TRANSACTIONAL' ? 'default' : 'secondary'}
|
||||||
|
size="sm"
|
||||||
|
>
|
||||||
|
Transactional
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Templates List */}
|
||||||
|
<div className="flex-1 overflow-y-auto space-y-3">
|
||||||
|
{isLoading && (
|
||||||
|
<div className="flex items-center justify-center py-12">
|
||||||
|
<div className="text-center">
|
||||||
|
<svg
|
||||||
|
className="h-8 w-8 animate-spin mx-auto text-neutral-900"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||||||
|
<path
|
||||||
|
className="opacity-75"
|
||||||
|
fill="currentColor"
|
||||||
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<p className="mt-2 text-sm text-neutral-500">Loading templates...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!isLoading && data?.templates.length === 0 && (
|
||||||
|
<div className="text-center py-12">
|
||||||
|
<FileText className="h-12 w-12 text-neutral-400 mx-auto mb-4" />
|
||||||
|
<h3 className="text-lg font-medium text-neutral-900 mb-2">No templates found</h3>
|
||||||
|
<p className="text-neutral-500">
|
||||||
|
{search ? 'Try adjusting your search terms' : 'Create a template first to use this feature'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{data?.templates.map(template => (
|
||||||
|
<Card
|
||||||
|
key={template.id}
|
||||||
|
className="cursor-pointer hover:border-primary/50 hover:shadow-md transition-all"
|
||||||
|
onClick={() => handleTemplateClick(template)}
|
||||||
|
>
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<div className="flex items-start justify-between gap-3">
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center gap-2 mb-1">
|
||||||
|
<CardTitle className="text-base truncate">{template.name}</CardTitle>
|
||||||
|
<Badge className="capitalize" variant={template.type === 'MARKETING' ? 'info' : 'success'}>
|
||||||
|
{template.type.toLowerCase()}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
{template.description && (
|
||||||
|
<CardDescription className="text-xs line-clamp-1">{template.description}</CardDescription>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="pt-0">
|
||||||
|
<div className="space-y-2 text-xs">
|
||||||
|
<div>
|
||||||
|
<span className="text-neutral-500">Subject:</span>{' '}
|
||||||
|
<span className="font-medium text-neutral-900">{template.subject}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-neutral-500">From:</span>{' '}
|
||||||
|
<span className="text-neutral-700">{template.from}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Pagination */}
|
||||||
|
{data && data.totalPages > 1 && (
|
||||||
|
<div className="flex items-center justify-between pt-3 border-t">
|
||||||
|
<p className="text-sm text-neutral-500">
|
||||||
|
Page {page} of {data.totalPages}
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Button variant="outline" size="sm" onClick={() => setPage(p => p - 1)} disabled={page === 1}>
|
||||||
|
Previous
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setPage(p => p + 1)}
|
||||||
|
disabled={page === data.totalPages}
|
||||||
|
>
|
||||||
|
Next
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex-1 flex flex-col overflow-hidden">
|
||||||
|
{/* Scrollable Content */}
|
||||||
|
<div className="flex-1 overflow-y-auto space-y-6 pr-2">
|
||||||
|
{/* Template Preview */}
|
||||||
|
{selectedTemplate && (
|
||||||
|
<Card className="bg-neutral-50">
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<div className="flex items-start justify-between gap-3">
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center gap-2 mb-1">
|
||||||
|
<CardTitle className="text-base">{selectedTemplate.name}</CardTitle>
|
||||||
|
<Badge
|
||||||
|
className="capitalize"
|
||||||
|
variant={selectedTemplate.type === 'MARKETING' ? 'info' : 'success'}
|
||||||
|
>
|
||||||
|
{selectedTemplate.type.toLowerCase()}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
{selectedTemplate.description && (
|
||||||
|
<CardDescription className="text-xs">{selectedTemplate.description}</CardDescription>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Field Selection */}
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div
|
||||||
|
className="flex items-center space-x-3 p-3 rounded-lg border border-neutral-200 hover:bg-neutral-50 transition-colors cursor-pointer"
|
||||||
|
onClick={() => toggleField('subject')}
|
||||||
|
>
|
||||||
|
<Checkbox
|
||||||
|
id="subject"
|
||||||
|
checked={selectedFields.subject}
|
||||||
|
onCheckedChange={() => toggleField('subject')}
|
||||||
|
/>
|
||||||
|
<div className="flex-1">
|
||||||
|
<Label htmlFor="subject" className="text-sm font-medium cursor-pointer">
|
||||||
|
Email Subject
|
||||||
|
</Label>
|
||||||
|
{selectedTemplate?.subject && (
|
||||||
|
<p className="text-xs text-neutral-500 mt-0.5">{selectedTemplate.subject}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="flex items-center space-x-3 p-3 rounded-lg border border-neutral-200 hover:bg-neutral-50 transition-colors cursor-pointer"
|
||||||
|
onClick={() => toggleField('body')}
|
||||||
|
>
|
||||||
|
<Checkbox id="body" checked={selectedFields.body} onCheckedChange={() => toggleField('body')} />
|
||||||
|
<div className="flex-1">
|
||||||
|
<Label htmlFor="body" className="text-sm font-medium cursor-pointer">
|
||||||
|
Email Body
|
||||||
|
</Label>
|
||||||
|
<p className="text-xs text-neutral-500 mt-0.5">The full email content and design</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="flex items-center space-x-3 p-3 rounded-lg border border-neutral-200 hover:bg-neutral-50 transition-colors cursor-pointer"
|
||||||
|
onClick={() => toggleField('from')}
|
||||||
|
>
|
||||||
|
<Checkbox id="from" checked={selectedFields.from} onCheckedChange={() => toggleField('from')} />
|
||||||
|
<div className="flex-1">
|
||||||
|
<Label htmlFor="from" className="text-sm font-medium cursor-pointer">
|
||||||
|
From Email
|
||||||
|
</Label>
|
||||||
|
{selectedTemplate?.from && (
|
||||||
|
<p className="text-xs text-neutral-500 mt-0.5">{selectedTemplate.from}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="flex items-center space-x-3 p-3 rounded-lg border border-neutral-200 hover:bg-neutral-50 transition-colors cursor-pointer"
|
||||||
|
onClick={() => toggleField('fromName')}
|
||||||
|
>
|
||||||
|
<Checkbox
|
||||||
|
id="fromName"
|
||||||
|
checked={selectedFields.fromName}
|
||||||
|
onCheckedChange={() => toggleField('fromName')}
|
||||||
|
/>
|
||||||
|
<div className="flex-1">
|
||||||
|
<Label htmlFor="fromName" className="text-sm font-medium cursor-pointer">
|
||||||
|
From Name
|
||||||
|
</Label>
|
||||||
|
{selectedTemplate?.fromName && (
|
||||||
|
<p className="text-xs text-neutral-500 mt-0.5">{selectedTemplate.fromName}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="flex items-center space-x-3 p-3 rounded-lg border border-neutral-200 hover:bg-neutral-50 transition-colors cursor-pointer"
|
||||||
|
onClick={() => toggleField('replyTo')}
|
||||||
|
>
|
||||||
|
<Checkbox
|
||||||
|
id="replyTo"
|
||||||
|
checked={selectedFields.replyTo}
|
||||||
|
onCheckedChange={() => toggleField('replyTo')}
|
||||||
|
/>
|
||||||
|
<div className="flex-1">
|
||||||
|
<Label htmlFor="replyTo" className="text-sm font-medium cursor-pointer">
|
||||||
|
Reply-To Email
|
||||||
|
</Label>
|
||||||
|
{selectedTemplate?.replyTo && (
|
||||||
|
<p className="text-xs text-neutral-500 mt-0.5">{selectedTemplate.replyTo}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Fixed Action Buttons */}
|
||||||
|
<div className="flex gap-3 pt-4 border-t mt-4">
|
||||||
|
<Button variant="outline" onClick={handleBack} className="flex-1">
|
||||||
|
Back
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={handleConfirm}
|
||||||
|
className="flex-1"
|
||||||
|
disabled={!Object.values(selectedFields).some(v => v)}
|
||||||
|
>
|
||||||
|
Create Campaign
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -391,18 +391,33 @@ export default function CampaignDetailsPage() {
|
|||||||
<ChevronDown className="h-4 w-4 sm:ml-1" />
|
<ChevronDown className="h-4 w-4 sm:ml-1" />
|
||||||
</Button>
|
</Button>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
<DropdownMenuContent align="end">
|
<DropdownMenuContent align="end" className="w-72">
|
||||||
<DropdownMenuItem onClick={() => setIsTestEmailDialogOpen(true)}>
|
<DropdownMenuItem onClick={() => setIsTestEmailDialogOpen(true)} className="py-3 cursor-pointer">
|
||||||
<TestTube className="h-4 w-4 mr-2" />
|
<div className="flex items-start gap-3">
|
||||||
Send Test Email
|
<TestTube className="h-4 w-4 mt-0.5 text-neutral-700" />
|
||||||
|
<div className="flex flex-col gap-0.5 flex-1">
|
||||||
|
<span className="font-medium text-sm">Send Test Email</span>
|
||||||
|
<span className="text-xs text-neutral-500 leading-snug">Preview in your inbox before sending</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
<DropdownMenuItem onClick={() => setShowSendDialog(true)}>
|
<DropdownMenuItem onClick={() => setShowSendDialog(true)} className="py-3 cursor-pointer">
|
||||||
<Send className="h-4 w-4 mr-2" />
|
<div className="flex items-start gap-3">
|
||||||
Send Now
|
<Send className="h-4 w-4 mt-0.5 text-neutral-700" />
|
||||||
|
<div className="flex flex-col gap-0.5 flex-1">
|
||||||
|
<span className="font-medium text-sm">Send Now</span>
|
||||||
|
<span className="text-xs text-neutral-500 leading-snug">Send immediately to all recipients</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
<DropdownMenuItem onClick={() => setIsScheduleDialogOpen(true)}>
|
<DropdownMenuItem onClick={() => setIsScheduleDialogOpen(true)} className="py-3 cursor-pointer">
|
||||||
<Calendar className="h-4 w-4 mr-2" />
|
<div className="flex items-start gap-3">
|
||||||
Schedule for Later
|
<Calendar className="h-4 w-4 mt-0.5 text-neutral-700" />
|
||||||
|
<div className="flex flex-col gap-0.5 flex-1">
|
||||||
|
<span className="font-medium text-sm">Schedule for Later</span>
|
||||||
|
<span className="text-xs text-neutral-500 leading-snug">Choose a specific date and time</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
</DropdownMenuContent>
|
</DropdownMenuContent>
|
||||||
</DropdownMenu>
|
</DropdownMenu>
|
||||||
|
|||||||
@@ -25,7 +25,7 @@ import {EmailFormValidator} from '../../lib/validation';
|
|||||||
import {ArrowLeft, Save, Users} from 'lucide-react';
|
import {ArrowLeft, Save, Users} from 'lucide-react';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import {useRouter} from 'next/router';
|
import {useRouter} from 'next/router';
|
||||||
import {useState} from 'react';
|
import {useEffect, useState} from 'react';
|
||||||
import {toast} from 'sonner';
|
import {toast} from 'sonner';
|
||||||
import useSWR from 'swr';
|
import useSWR from 'swr';
|
||||||
import {useActiveProject} from '../../lib/contexts/ActiveProjectProvider';
|
import {useActiveProject} from '../../lib/contexts/ActiveProjectProvider';
|
||||||
@@ -43,9 +43,92 @@ export default function CreateCampaignPage() {
|
|||||||
const [audienceType, setAudienceType] = useState<CampaignAudienceType>(CampaignAudienceType.ALL);
|
const [audienceType, setAudienceType] = useState<CampaignAudienceType>(CampaignAudienceType.ALL);
|
||||||
const [segmentId, setSegmentId] = useState('');
|
const [segmentId, setSegmentId] = useState('');
|
||||||
const [saving, setSaving] = useState(false);
|
const [saving, setSaving] = useState(false);
|
||||||
|
const [loadingTemplate, setLoadingTemplate] = useState(false);
|
||||||
|
|
||||||
const {data: segments} = useSWR<Segment[]>('/segments', {revalidateOnFocus: false});
|
const {data: segments} = useSWR<Segment[]>('/segments', {revalidateOnFocus: false});
|
||||||
|
|
||||||
|
// Load template or campaign data if provided in query params
|
||||||
|
useEffect(() => {
|
||||||
|
const loadData = async () => {
|
||||||
|
const {
|
||||||
|
templateId,
|
||||||
|
campaignId,
|
||||||
|
name: queryName,
|
||||||
|
subject: querySubject,
|
||||||
|
from: queryFrom,
|
||||||
|
fromName: queryFromName,
|
||||||
|
replyTo: queryReplyTo,
|
||||||
|
audienceType: queryAudienceType,
|
||||||
|
segmentId: querySegmentId,
|
||||||
|
} = router.query;
|
||||||
|
|
||||||
|
// Handle template loading
|
||||||
|
if (templateId && typeof templateId === 'string') {
|
||||||
|
setLoadingTemplate(true);
|
||||||
|
try {
|
||||||
|
// Fetch the full template to get the body content
|
||||||
|
const template = await network.fetch<{data: {body: string}}>('GET', `/templates/${templateId}`);
|
||||||
|
|
||||||
|
// Pre-fill form with template data
|
||||||
|
if (queryName && typeof queryName === 'string') setName(queryName);
|
||||||
|
if (querySubject && typeof querySubject === 'string') setSubject(querySubject);
|
||||||
|
if (queryFrom && typeof queryFrom === 'string') setFrom(queryFrom);
|
||||||
|
if (queryFromName && typeof queryFromName === 'string') setFromName(queryFromName);
|
||||||
|
if (queryReplyTo && typeof queryReplyTo === 'string') setReplyTo(queryReplyTo);
|
||||||
|
setBody(template.data.body);
|
||||||
|
|
||||||
|
toast.success('Template loaded successfully');
|
||||||
|
} catch (error) {
|
||||||
|
toast.error('Failed to load template');
|
||||||
|
} finally {
|
||||||
|
setLoadingTemplate(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Handle campaign loading
|
||||||
|
else if (campaignId && typeof campaignId === 'string') {
|
||||||
|
setLoadingTemplate(true);
|
||||||
|
try {
|
||||||
|
// Fetch the full campaign to get the body content
|
||||||
|
const campaign = await network.fetch<{data: {body: string}}>('GET', `/campaigns/${campaignId}`);
|
||||||
|
|
||||||
|
// Pre-fill form with campaign data
|
||||||
|
if (queryName && typeof queryName === 'string') setName(queryName);
|
||||||
|
if (querySubject && typeof querySubject === 'string') setSubject(querySubject);
|
||||||
|
if (queryFrom && typeof queryFrom === 'string') setFrom(queryFrom);
|
||||||
|
if (queryFromName && typeof queryFromName === 'string') setFromName(queryFromName);
|
||||||
|
if (queryReplyTo && typeof queryReplyTo === 'string') setReplyTo(queryReplyTo);
|
||||||
|
if (queryAudienceType && typeof queryAudienceType === 'string') {
|
||||||
|
setAudienceType(queryAudienceType as CampaignAudienceType);
|
||||||
|
}
|
||||||
|
if (querySegmentId && typeof querySegmentId === 'string') setSegmentId(querySegmentId);
|
||||||
|
setBody(campaign.data.body);
|
||||||
|
|
||||||
|
toast.success('Campaign loaded successfully');
|
||||||
|
} catch (error) {
|
||||||
|
toast.error('Failed to load campaign');
|
||||||
|
} finally {
|
||||||
|
setLoadingTemplate(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Handle query params without template/campaign ID (direct field values)
|
||||||
|
else {
|
||||||
|
if (queryName && typeof queryName === 'string') setName(queryName);
|
||||||
|
if (querySubject && typeof querySubject === 'string') setSubject(querySubject);
|
||||||
|
if (queryFrom && typeof queryFrom === 'string') setFrom(queryFrom);
|
||||||
|
if (queryFromName && typeof queryFromName === 'string') setFromName(queryFromName);
|
||||||
|
if (queryReplyTo && typeof queryReplyTo === 'string') setReplyTo(queryReplyTo);
|
||||||
|
if (queryAudienceType && typeof queryAudienceType === 'string') {
|
||||||
|
setAudienceType(queryAudienceType as CampaignAudienceType);
|
||||||
|
}
|
||||||
|
if (querySegmentId && typeof querySegmentId === 'string') setSegmentId(querySegmentId);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (router.isReady) {
|
||||||
|
void loadData();
|
||||||
|
}
|
||||||
|
}, [router.isReady, router.query]);
|
||||||
|
|
||||||
const handleSubmit = async (e: React.FormEvent) => {
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
@@ -94,6 +177,26 @@ export default function CreateCampaignPage() {
|
|||||||
<>
|
<>
|
||||||
<NextSeo title="Create Campaign" />
|
<NextSeo title="Create Campaign" />
|
||||||
<DashboardLayout>
|
<DashboardLayout>
|
||||||
|
{loadingTemplate && (
|
||||||
|
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center">
|
||||||
|
<div className="bg-white rounded-lg p-6 text-center">
|
||||||
|
<svg
|
||||||
|
className="h-8 w-8 animate-spin mx-auto text-neutral-900 mb-3"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||||||
|
<path
|
||||||
|
className="opacity-75"
|
||||||
|
fill="currentColor"
|
||||||
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<p className="text-sm text-neutral-700">Loading template...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="flex items-center gap-3 sm:gap-4">
|
<div className="flex items-center gap-3 sm:gap-4">
|
||||||
|
|||||||
@@ -7,19 +7,26 @@ import {
|
|||||||
CardHeader,
|
CardHeader,
|
||||||
CardTitle,
|
CardTitle,
|
||||||
ConfirmDialog,
|
ConfirmDialog,
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuTrigger,
|
||||||
Select,
|
Select,
|
||||||
SelectContent,
|
SelectContent,
|
||||||
SelectItem,
|
SelectItem,
|
||||||
SelectTrigger,
|
SelectTrigger,
|
||||||
SelectValue,
|
SelectValue,
|
||||||
} from '@plunk/ui';
|
} from '@plunk/ui';
|
||||||
import type {Campaign} from '@plunk/db';
|
import type {Campaign, Template} from '@plunk/db';
|
||||||
import {CampaignStatus} from '@plunk/db';
|
import {CampaignStatus} from '@plunk/db';
|
||||||
import {DashboardLayout} from '../../components/DashboardLayout';
|
import {DashboardLayout} from '../../components/DashboardLayout';
|
||||||
|
import {TemplateSelectionDialog} from '../../components/TemplateSelectionDialog';
|
||||||
|
import {CampaignSelectionDialog} from '../../components/CampaignSelectionDialog';
|
||||||
import {network} from '../../lib/network';
|
import {network} from '../../lib/network';
|
||||||
import {Calendar, Copy, Info, Mail, Plus, Trash2, Users} from 'lucide-react';
|
import {Calendar, ChevronDown, Copy, FileText, Info, Mail, Plus, RefreshCw, Trash2, Users} from 'lucide-react';
|
||||||
import {NextSeo} from 'next-seo';
|
import {NextSeo} from 'next-seo';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
|
import {useRouter} from 'next/router';
|
||||||
import {useState} from 'react';
|
import {useState} from 'react';
|
||||||
import {toast} from 'sonner';
|
import {toast} from 'sonner';
|
||||||
import useSWR from 'swr';
|
import useSWR from 'swr';
|
||||||
@@ -33,12 +40,15 @@ interface PaginatedCampaigns {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function CampaignsPage() {
|
export default function CampaignsPage() {
|
||||||
|
const router = useRouter();
|
||||||
const [page, setPage] = useState(1);
|
const [page, setPage] = useState(1);
|
||||||
const [statusFilter, setStatusFilter] = useState<string>('ALL');
|
const [statusFilter, setStatusFilter] = useState<string>('ALL');
|
||||||
const [showCancelDialog, setShowCancelDialog] = useState(false);
|
const [showCancelDialog, setShowCancelDialog] = useState(false);
|
||||||
const [campaignToCancel, setCampaignToCancel] = useState<string | null>(null);
|
const [campaignToCancel, setCampaignToCancel] = useState<string | null>(null);
|
||||||
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
|
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
|
||||||
const [campaignToDelete, setCampaignToDelete] = useState<string | null>(null);
|
const [campaignToDelete, setCampaignToDelete] = useState<string | null>(null);
|
||||||
|
const [showTemplateDialog, setShowTemplateDialog] = useState(false);
|
||||||
|
const [showCampaignDialog, setShowCampaignDialog] = useState(false);
|
||||||
|
|
||||||
const {data, mutate, isLoading} = useSWR<PaginatedCampaigns>(
|
const {data, mutate, isLoading} = useSWR<PaginatedCampaigns>(
|
||||||
`/campaigns?page=${page}&pageSize=20${statusFilter !== 'ALL' ? `&status=${statusFilter}` : ''}`,
|
`/campaigns?page=${page}&pageSize=20${statusFilter !== 'ALL' ? `&status=${statusFilter}` : ''}`,
|
||||||
@@ -103,6 +113,93 @@ export default function CampaignsPage() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleSelectTemplate = (
|
||||||
|
template: Template,
|
||||||
|
selectedFields: {
|
||||||
|
subject: boolean;
|
||||||
|
body: boolean;
|
||||||
|
from: boolean;
|
||||||
|
fromName: boolean;
|
||||||
|
replyTo: boolean;
|
||||||
|
},
|
||||||
|
) => {
|
||||||
|
// Navigate to create page with template data as query params
|
||||||
|
const query: Record<string, string> = {
|
||||||
|
name: `${template.name}`,
|
||||||
|
};
|
||||||
|
|
||||||
|
// Only include templateId if body is selected (needed to fetch body content)
|
||||||
|
if (selectedFields.body) {
|
||||||
|
query.templateId = template.id;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add selected fields to query params
|
||||||
|
if (selectedFields.subject) {
|
||||||
|
query.subject = template.subject;
|
||||||
|
}
|
||||||
|
if (selectedFields.from) {
|
||||||
|
query.from = template.from;
|
||||||
|
}
|
||||||
|
if (selectedFields.fromName && template.fromName) {
|
||||||
|
query.fromName = template.fromName;
|
||||||
|
}
|
||||||
|
if (selectedFields.replyTo && template.replyTo) {
|
||||||
|
query.replyTo = template.replyTo;
|
||||||
|
}
|
||||||
|
|
||||||
|
void router.push({
|
||||||
|
pathname: '/campaigns/create',
|
||||||
|
query,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSelectCampaign = (
|
||||||
|
campaign: Campaign,
|
||||||
|
selectedFields: {
|
||||||
|
subject: boolean;
|
||||||
|
body: boolean;
|
||||||
|
from: boolean;
|
||||||
|
fromName: boolean;
|
||||||
|
replyTo: boolean;
|
||||||
|
audience: boolean;
|
||||||
|
},
|
||||||
|
) => {
|
||||||
|
// Navigate to create page with campaign data as query params
|
||||||
|
const query: Record<string, string> = {
|
||||||
|
name: `${campaign.name}`,
|
||||||
|
};
|
||||||
|
|
||||||
|
// Only include campaignId if body is selected (needed to fetch body content)
|
||||||
|
if (selectedFields.body) {
|
||||||
|
query.campaignId = campaign.id;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add selected fields to query params
|
||||||
|
if (selectedFields.subject) {
|
||||||
|
query.subject = campaign.subject;
|
||||||
|
}
|
||||||
|
if (selectedFields.from) {
|
||||||
|
query.from = campaign.from;
|
||||||
|
}
|
||||||
|
if (selectedFields.fromName && campaign.fromName) {
|
||||||
|
query.fromName = campaign.fromName;
|
||||||
|
}
|
||||||
|
if (selectedFields.replyTo && campaign.replyTo) {
|
||||||
|
query.replyTo = campaign.replyTo;
|
||||||
|
}
|
||||||
|
if (selectedFields.audience) {
|
||||||
|
query.audienceType = campaign.audienceType;
|
||||||
|
if (campaign.segmentId) {
|
||||||
|
query.segmentId = campaign.segmentId;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
void router.push({
|
||||||
|
pathname: '/campaigns/create',
|
||||||
|
query,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<NextSeo title="Campaigns" />
|
<NextSeo title="Campaigns" />
|
||||||
@@ -116,13 +213,51 @@ export default function CampaignsPage() {
|
|||||||
Send one-time email broadcasts to your contacts. {data?.total ? `${data.total} total campaigns` : ''}
|
Send one-time email broadcasts to your contacts. {data?.total ? `${data.total} total campaigns` : ''}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<Link href="/campaigns/create" className="w-full sm:w-auto">
|
<DropdownMenu>
|
||||||
<Button className="w-full sm:w-auto">
|
<DropdownMenuTrigger asChild>
|
||||||
<Plus className="h-4 w-4" />
|
<Button className="w-full sm:w-auto">
|
||||||
<span className="hidden sm:inline">Create Campaign</span>
|
<Plus className="h-4 w-4" />
|
||||||
<span className="sm:hidden">Create</span>
|
<span className="hidden sm:inline">Create Campaign</span>
|
||||||
</Button>
|
<span className="sm:hidden">Create</span>
|
||||||
</Link>
|
<ChevronDown className="h-4 w-4 ml-1" />
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="end" className="w-80">
|
||||||
|
<DropdownMenuItem asChild className="py-3 cursor-pointer">
|
||||||
|
<Link href="/campaigns/create" className="flex items-start gap-3">
|
||||||
|
<Mail className="h-4 w-4 mt-0.5 text-neutral-700" />
|
||||||
|
<div className="flex flex-col gap-0.5 flex-1">
|
||||||
|
<span className="font-medium text-sm">Empty Campaign</span>
|
||||||
|
<span className="text-xs text-neutral-500 leading-snug">
|
||||||
|
Start from scratch with a blank canvas
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem onClick={() => setShowTemplateDialog(true)} className="py-3 cursor-pointer">
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<FileText className="h-4 w-4 mt-0.5 text-neutral-700" />
|
||||||
|
<div className="flex flex-col gap-0.5 flex-1">
|
||||||
|
<span className="font-medium text-sm">From Template</span>
|
||||||
|
<span className="text-xs text-neutral-500 leading-snug">
|
||||||
|
Use an existing template as a starting point
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem onClick={() => setShowCampaignDialog(true)} className="py-3 cursor-pointer">
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<RefreshCw className="h-4 w-4 mt-0.5 text-neutral-700" />
|
||||||
|
<div className="flex flex-col gap-0.5 flex-1">
|
||||||
|
<span className="font-medium text-sm">From Previous Campaign</span>
|
||||||
|
<span className="text-xs text-neutral-500 leading-snug">
|
||||||
|
Copy content and settings from an existing campaign
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Filters */}
|
{/* Filters */}
|
||||||
@@ -171,12 +306,60 @@ export default function CampaignsPage() {
|
|||||||
? 'Try adjusting your filters or create a new campaign.'
|
? 'Try adjusting your filters or create a new campaign.'
|
||||||
: 'Create your first campaign to send emails to your contacts.'}
|
: 'Create your first campaign to send emails to your contacts.'}
|
||||||
</p>
|
</p>
|
||||||
<Link href="/campaigns/create">
|
{statusFilter === 'ALL' && (
|
||||||
<Button size="lg">
|
<DropdownMenu>
|
||||||
<Plus className="h-4 w-4" />
|
<DropdownMenuTrigger asChild>
|
||||||
Create Your First Campaign
|
<Button size="lg">
|
||||||
</Button>
|
<Plus className="h-4 w-4" />
|
||||||
</Link>
|
Create Your First Campaign
|
||||||
|
<ChevronDown className="h-4 w-4 ml-1" />
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="center" className="w-80">
|
||||||
|
<DropdownMenuItem asChild className="py-3 cursor-pointer">
|
||||||
|
<Link href="/campaigns/create" className="flex items-start gap-3">
|
||||||
|
<Mail className="h-4 w-4 mt-0.5 text-neutral-700" />
|
||||||
|
<div className="flex flex-col gap-0.5 flex-1">
|
||||||
|
<span className="font-medium text-sm">Empty Campaign</span>
|
||||||
|
<span className="text-xs text-neutral-500 leading-snug">
|
||||||
|
Start from scratch with a blank canvas
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem onClick={() => setShowTemplateDialog(true)} className="py-3 cursor-pointer">
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<FileText className="h-4 w-4 mt-0.5 text-neutral-700" />
|
||||||
|
<div className="flex flex-col gap-0.5 flex-1">
|
||||||
|
<span className="font-medium text-sm">From Template</span>
|
||||||
|
<span className="text-xs text-neutral-500 leading-snug">
|
||||||
|
Use an existing template as a starting point
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem onClick={() => setShowCampaignDialog(true)} className="py-3 cursor-pointer">
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<RefreshCw className="h-4 w-4 mt-0.5 text-neutral-700" />
|
||||||
|
<div className="flex flex-col gap-0.5 flex-1">
|
||||||
|
<span className="font-medium text-sm">From Previous Campaign</span>
|
||||||
|
<span className="text-xs text-neutral-500 leading-snug">
|
||||||
|
Copy content and settings from an existing campaign
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
)}
|
||||||
|
{statusFilter !== 'ALL' && (
|
||||||
|
<Link href="/campaigns/create">
|
||||||
|
<Button size="lg">
|
||||||
|
<Plus className="h-4 w-4" />
|
||||||
|
Create Campaign
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
@@ -229,9 +412,7 @@ export default function CampaignsPage() {
|
|||||||
{campaign.totalRecipients > 0 && campaign.status !== 'DRAFT' && (
|
{campaign.totalRecipients > 0 && campaign.status !== 'DRAFT' && (
|
||||||
<p className="text-xs text-blue-700 mt-1">{deliveryProgress.toFixed(0)}% sent</p>
|
<p className="text-xs text-blue-700 mt-1">{deliveryProgress.toFixed(0)}% sent</p>
|
||||||
)}
|
)}
|
||||||
{campaign.status === 'DRAFT' && (
|
{campaign.status === 'DRAFT' && <p className="text-xs text-blue-600 mt-1">Estimated</p>}
|
||||||
<p className="text-xs text-blue-600 mt-1">Estimated</p>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Open Rate */}
|
{/* Open Rate */}
|
||||||
@@ -367,6 +548,18 @@ export default function CampaignsPage() {
|
|||||||
confirmText="Delete Campaign"
|
confirmText="Delete Campaign"
|
||||||
variant="destructive"
|
variant="destructive"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<TemplateSelectionDialog
|
||||||
|
open={showTemplateDialog}
|
||||||
|
onOpenChange={setShowTemplateDialog}
|
||||||
|
onSelectTemplate={handleSelectTemplate}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<CampaignSelectionDialog
|
||||||
|
open={showCampaignDialog}
|
||||||
|
onOpenChange={setShowCampaignDialog}
|
||||||
|
onSelectCampaign={handleSelectCampaign}
|
||||||
|
/>
|
||||||
</DashboardLayout>
|
</DashboardLayout>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user