chatbot / addons / automator / src / components / email-builder / EmailTemplateList.jsx

EmailTemplateList.jsx in WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services 8.8.0, at addons/automator/src/components/email-builder/EmailTemplateList.jsx

165 lines 6.8 KB

Raw Download Zip

1	import React from 'react';
2	import { Plus, Mail, Pencil, Trash2, Lock } from 'lucide-react';
3
4	const EmailTemplateList = ({ templates, onCreateNew, onEdit, onDelete, isProActive, freeLimit }) => {
5	const [searchTerm, setSearchTerm] = React.useState('');
6
7	const atFreeLimit = !isProActive && templates.length >= freeLimit;
8
9	const filteredTemplates = (Array.isArray(templates) ? templates : []).filter(t =>
10	t.name && t.name.toLowerCase().includes(searchTerm.toLowerCase())
11	);
12
13	if (!Array.isArray(templates)) {
14	return null;
15	}
16
17	const handleDelete = async (id) => {
18	if (!window.confirm('Are you sure you want to delete this template?')) return;
19
20	try {
21	const response = await fetch(`${window.wpbotAutomator.apiUrl}/email-templates/${id}`, {
22	method: 'DELETE',
23	headers: {
24	'X-WP-Nonce': window.wpbotAutomator.nonce,
25	},
26	});
27	const data = await response.json();
28	if (data.success) {
29	onDelete();
30	} else {
31	alert('Failed to delete template.');
32	}
33	} catch (error) {
34	console.error('Error deleting template:', error);
35	}
36	};
37
38	return (
39	<div>
40	<div className="flex justify-between items-center mb-8">
41	<div>
42	<h1 className="text-3xl font-bold tracking-tight">Email Templates</h1>
43	<p className="text-muted-foreground mt-1">Manage and design your transactional and automated emails.</p>
44	</div>
45
46	<div className="flex flex-col items-end gap-2">
47	{atFreeLimit ? (
48	<>
49	<div className="flex items-center space-x-2 px-6 py-2.5 bg-muted text-muted-foreground rounded-lg border border-border font-medium cursor-not-allowed select-none">
50	<Lock className="w-4 h-4" />
51	<span>Create New Template</span>
52	<span className="ml-1 text-xs font-semibold bg-amber-100 text-amber-700 border border-amber-300 rounded px-1.5 py-0.5">PRO</span>
53	</div>
54	<p className="text-xs text-muted-foreground">
55	Free plan includes {freeLimit} templates.{' '}
56	<a
57	href="https://wpbot.pro"
58	target="_blank"
59	rel="noopener noreferrer"
60	className="text-primary hover:underline font-medium"
61	>
62	Upgrade to Pro
63	</a>{' '}
64	for unlimited.
65	</p>
66	</>
67	) : (
68	<div className="flex flex-col items-end gap-1">
69	<button
70	onClick={onCreateNew}
71	className="flex items-center space-x-2 px-6 py-2.5 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-all shadow-sm font-medium"
72	>
73	<Plus className="w-5 h-5" />
74	<span>Create New Template</span>
75	</button>
76	{!isProActive && (
77	<p className="text-xs text-muted-foreground">
78	{templates.length} / {freeLimit} free templates used
79	</p>
80	)}
81	</div>
82	)}
83	</div>
84	</div>
85
86	<div className="bg-card border border-border rounded-xl shadow-sm overflow-hidden">
87	<div className="p-4 border-b border-border bg-muted/30 flex items-center">
88	<div className="relative flex-1 max-w-sm">
89	<input
90	type="text"
91	placeholder="Search templates..."
92	value={searchTerm}
93	onChange={(e) => setSearchTerm(e.target.value)}
94	className="w-full pl-10 pr-4 py-2 border border-border rounded-md bg-background focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all text-sm"
95	/>
96	</div>
97	</div>
98
99	{filteredTemplates.length === 0 ? (
100	<div className="py-20 text-center">
101	<div className="w-16 h-16 bg-muted rounded-full flex items-center justify-center mx-auto mb-4">
102	<Mail className="w-8 h-8 text-muted-foreground opacity-50" />
103	</div>
104	<h3 className="text-lg font-medium">No templates found</h3>
105	<p className="text-muted-foreground max-w-xs mx-auto mt-1">
106	{searchTerm ? `No templates matching "${searchTerm}"` : "You haven't created any email templates yet."}
107	</p>
108	{!searchTerm && !atFreeLimit && (
109	<button
110	onClick={onCreateNew}
111	className="mt-6 text-primary hover:underline text-sm font-medium"
112	>
113	Create your first template
114	</button>
115	)}
116	</div>
117	) : (
118	<div className="divide-y divide-border">
119	{filteredTemplates.map((template) => (
120	<div
121	key={template.id}
122	className="p-6 flex items-center justify-between hover:bg-muted/30 transition-colors group"
123	>
124	<div className="flex items-center space-x-4">
125	<div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center text-primary">
126	<Mail className="w-6 h-6" />
127	</div>
128	<div>
129	<h3 className="font-semibold text-lg hover:text-primary cursor-pointer transition-colors" onClick={() => onEdit(template)}>
130	{template.name}
131	</h3>
132	<p className="text-sm text-muted-foreground flex items-center mt-0.5">
133	<span className="inline-block w-2 h-2 rounded-full bg-emerald-500 mr-2"></span>
134	ID: {template.id}
135	</p>
136	</div>
137	</div>
138
139	<div className="flex items-center space-x-2 opacity-0 group-hover:opacity-100 transition-opacity">
140	<button
141	onClick={() => onEdit(template)}
142	className="p-2.5 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors border border-transparent hover:border-blue-100"
143	title="Edit Template"
144	>
145	<Pencil className="w-5 h-5" />
146	</button>
147	<button
148	onClick={() => handleDelete(template.id)}
149	className="p-2.5 text-rose-600 hover:bg-rose-50 rounded-lg transition-colors border border-transparent hover:border-rose-100"
150	title="Delete Template"
151	>
152	<Trash2 className="w-5 h-5" />
153	</button>
154	</div>
155	</div>
156	))}
157	</div>
158	)}
159	</div>
160	</div>
161	);
162	};
163
164	export default EmailTemplateList;
165