could not find the template to update.... create a beautofull template b

This commit is contained in:
Leon Serfaty G
2025-07-18 03:24:03 +00:00
parent ae7c8c4880
commit dfcccad1d7
3 changed files with 94 additions and 41 deletions
+48 -12
View File
@@ -1,3 +1,4 @@
import Database from 'better-sqlite3'; import Database from 'better-sqlite3';
const db = new Database('local.db'); const db = new Database('local.db');
@@ -41,25 +42,60 @@ function seed() {
const templateStmt = db.prepare('SELECT * FROM email_templates WHERE id = ?'); const templateStmt = db.prepare('SELECT * FROM email_templates WHERE id = ?');
const defaultTemplate = templateStmt.get(1); const defaultTemplate = templateStmt.get(1);
const defaultSubject = "Your EstimateFlow Project Estimate is Ready!";
const defaultBody = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Project Estimate</title>
</head>
<body style="font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f4f4f4; color: #333;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="max-width: 600px; margin: auto; background-color: #ffffff; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
<tr>
<td style="padding: 20px; text-align: center; background-color: #4A90E2; color: #ffffff; border-top-left-radius: 8px; border-top-right-radius: 8px;">
<h1 style="margin: 0; font-size: 24px;">EstimateFlow</h1>
</td>
</tr>
<tr>
<td style="padding: 30px 20px;">
<h2 style="font-size: 20px; color: #333;">Hello, [User Name],</h2>
<p style="font-size: 16px; line-height: 1.6;">
Thank you for using EstimateFlow. We've prepared a rough estimate for your project based on your selections.
</p>
[EstimateDetails]
<p style="font-size: 16px; line-height: 1.6; margin-top: 20px;">
Please note that this is a preliminary estimate. For a more detailed quote and to discuss your project further, please don't hesitate to contact us.
</p>
<div style="text-align: center; margin-top: 30px;">
<a href="#" style="background-color: #4A90E2; color: #ffffff; padding: 12px 25px; text-decoration: none; border-radius: 5px; font-size: 16px;">Contact Us</a>
</div>
</td>
</tr>
<tr>
<td style="padding: 20px; text-align: center; font-size: 12px; color: #777; border-top: 1px solid #eaeaea;">
<p>Best regards,<br>The EstimateFlow Team</p>
<p>&copy; ${new Date().getFullYear()} EstimateFlow. All rights reserved.</p>
</td>
</tr>
</table>
</body>
</html>`;
if (!defaultTemplate) { if (!defaultTemplate) {
const insertTemplate = db.prepare( const insertTemplate = db.prepare(
"INSERT INTO email_templates (id, subject, body) VALUES (?, ?, ?)" "INSERT INTO email_templates (id, subject, body) VALUES (?, ?, ?)"
); );
const defaultSubject = "Your Project Estimate is Ready!";
const defaultBody = `Hello, [User Name],
Thank you for using EstimateFlow. We've prepared a rough estimate for your project based on your selections.
[EstimateDetails]
Please note that this is a preliminary estimate. For a more detailed quote and to discuss your project further, please don't hesitate to contact us.
Best regards,
The EstimateFlow Team`;
insertTemplate.run(1, defaultSubject, defaultBody); insertTemplate.run(1, defaultSubject, defaultBody);
console.log('Default email template created.'); console.log('Default email template created.');
} else { } else {
console.log('Default email template already exists.'); // If you want to update the template on every seed, you can use an UPDATE query here
const updateTemplate = db.prepare("UPDATE email_templates SET subject = ?, body = ? WHERE id = ?");
updateTemplate.run(defaultSubject, defaultBody, 1);
console.log('Default email template updated.');
} }
+32 -20
View File
@@ -9,6 +9,7 @@ import { getEmailTemplate, updateEmailTemplate } from '@/lib/actions/email';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea'; import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label'; import { Label } from '@/components/ui/label';
import { Skeleton } from '@/components/ui/skeleton';
type EmailTemplate = { type EmailTemplate = {
subject: string; subject: string;
@@ -16,26 +17,29 @@ type EmailTemplate = {
}; };
function EmailPreview({ template }: { template: EmailTemplate }) { function EmailPreview({ template }: { template: EmailTemplate }) {
const previewBody = template.body.replace( const estimateDetailsHtml = `
'[EstimateDetails]', <div style="margin: 20px 0; border: 1px solid #eaeaea; border-radius: 5px; background-color: #fafafa;">
`<div class="my-6 space-y-4 rounded-lg border bg-background p-4"> <div style="padding: 15px; border-bottom: 1px solid #eaeaea;">
<div> <h3 style="margin: 0; font-size: 16px; color: #333;">Custom Development Estimate</h3>
<h3 class="font-semibold">Custom Development Estimate</h3> <p style="margin: 5px 0 0; font-size: 24px; font-weight: bold; color: #4A90E2;">[Custom Hours]+ hours</p>
<p class="text-2xl font-bold">[Custom Hours]+ hours</p>
</div> </div>
<div> <div style="padding: 15px;">
<h3 class="font-semibold">Ready-Made Tools Estimate</h3> <h3 style="margin: 0; font-size: 16px; color: #333;">Ready-Made Tools Estimate</h3>
<p class="text-2xl font-bold">[Ready-Made Hours]+ hours</p> <p style="margin: 5px 0 0; font-size: 24px; font-weight: bold; color: #4A90E2;">[Ready-Made Hours]+ hours</p>
</div> </div>
</div>` </div>`;
).replace('[User Name]', 'Valued Customer').replace(/\n/g, '<br />');
const previewBody = template.body
.replace('[EstimateDetails]', estimateDetailsHtml)
.replace('[User Name]', 'Valued Customer');
return ( return (
<div className="w-full rounded-lg border bg-muted p-6"> <div className="w-full rounded-lg border bg-muted p-6">
<div className="font-sans text-sm text-foreground"> <iframe
<h2 className="text-xl font-bold">{template.subject}</h2> srcDoc={previewBody}
<div className="mt-4" dangerouslySetInnerHTML={{ __html: previewBody }} /> className="w-full h-[600px] border-none"
</div> title="Email Preview"
/>
</div> </div>
); );
} }
@@ -56,7 +60,12 @@ export default function EmailTemplatesPage() {
setTemplate(fetchedTemplate); setTemplate(fetchedTemplate);
setOriginalTemplate(fetchedTemplate); setOriginalTemplate(fetchedTemplate);
} else { } else {
throw new Error('Could not find email template.'); toast({
variant: 'destructive',
title: 'Template Not Found',
description: 'No email template found in the database. You can create one by saving a new template.',
});
setIsEditing(true); // Default to editing if no template exists
} }
} catch (error: any) { } catch (error: any) {
toast({ toast({
@@ -117,7 +126,7 @@ export default function EmailTemplatesPage() {
<Button variant="outline" onClick={() => setIsEditing(true)}>Edit Template</Button> <Button variant="outline" onClick={() => setIsEditing(true)}>Edit Template</Button>
) : ( ) : (
<div className="flex gap-2"> <div className="flex gap-2">
<Button variant="outline" onClick={handleCancel}>Cancel</Button> {originalTemplate.subject && <Button variant="outline" onClick={handleCancel}>Cancel</Button>}
<Button onClick={handleSave}>Save Changes</Button> <Button onClick={handleSave}>Save Changes</Button>
</div> </div>
)} )}
@@ -125,7 +134,10 @@ export default function EmailTemplatesPage() {
</CardHeader> </CardHeader>
<CardContent> <CardContent>
{isLoading ? ( {isLoading ? (
<p>Loading template...</p> <div className="space-y-4">
<Skeleton className="h-8 w-1/3" />
<Skeleton className="h-[600px] w-full" />
</div>
) : isEditing ? ( ) : isEditing ? (
<div className="space-y-4"> <div className="space-y-4">
<div className="space-y-2"> <div className="space-y-2">
@@ -142,10 +154,10 @@ export default function EmailTemplatesPage() {
id="body" id="body"
value={template.body} value={template.body}
onChange={(e) => setTemplate({ ...template, body: e.target.value })} onChange={(e) => setTemplate({ ...template, body: e.target.value })}
className="h-64 font-mono" className="h-96 font-mono"
/> />
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
Use placeholders like [User Name] and [EstimateDetails]. They will be replaced with actual values. Use placeholders like [User Name] and [EstimateDetails]. They will be replaced with actual values. HTML is supported.
</p> </p>
</div> </div>
</div> </div>
+11 -6
View File
@@ -30,7 +30,7 @@ export async function getEmailTemplate(): Promise<{ subject: string; body: strin
} }
/** /**
* Updates the email template in the database. * Updates or creates the email template in the database.
*/ */
export async function updateEmailTemplate(data: { subject: string; body: string }): Promise<{ success: boolean; message: string }> { export async function updateEmailTemplate(data: { subject: string; body: string }): Promise<{ success: boolean; message: string }> {
const validation = emailTemplateSchema.safeParse(data); const validation = emailTemplateSchema.safeParse(data);
@@ -42,12 +42,17 @@ export async function updateEmailTemplate(data: { subject: string; body: string
const { subject, body } = validation.data; const { subject, body } = validation.data;
try { try {
const stmt = db.prepare('UPDATE email_templates SET subject = ?, body = ? WHERE id = ?'); const checkStmt = db.prepare('SELECT id FROM email_templates WHERE id = 1');
// We assume we're updating the template with id = 1 const existing = checkStmt.get();
const info = stmt.run(subject, body, 1);
if (info.changes === 0) { if (existing) {
return { success: false, message: 'Could not find the template to update. No changes were made.' }; // Update existing template
const stmt = db.prepare('UPDATE email_templates SET subject = ?, body = ? WHERE id = ?');
stmt.run(subject, body, 1);
} else {
// Insert new template
const stmt = db.prepare('INSERT INTO email_templates (id, subject, body) VALUES (?, ?, ?)');
stmt.run(1, subject, body);
} }
revalidatePath('/admin/settings/email-templates'); revalidatePath('/admin/settings/email-templates');