Daniel/webshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(email): add primaryColor branding param to email templates

Browse Source
This commit is contained in:
DanielS
2026-08-27 00:32:18 +02:00
parent f68d67de43
commit 0c99da2eeb
3 changed files with 25 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
shop/app/api/admin/send-test-email/route.ts
View File

@@ -43,7 +43,20 @@ export async function POST(request: Request) {
const { to, subject, text, html } = await request.json();
try {
const info = await sendMail({ to, subject, text, html });
const { data: brandData } = await supabase.from('settings').select('primary_color').eq('id', 'branding').maybeSingle();
const primaryColor = brandData?.primary_color || '#2563eb';
const testHtml = html || `
<div style="font-family: sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; border: 1px solid #e2e8f0; border-radius: 8px;">
<h2 style="color: ${primaryColor}; margin-bottom: 16px;">Test-E-Mail</h2>
<p style="color: #475569; font-size: 16px; line-height: 1.5;">${text || 'Dies ist eine automatische Test-E-Mail.'}</p>
<div style="margin-top: 24px; padding: 12px; background-color: #f8fafc; border-left: 4px solid ${primaryColor}; font-size: 14px; color: #334155;">
SMTP-Konfiguration & Branding-Farbe erfolgreich verifiziert.
</div>
</div>
`;
const info = await sendMail({ to, subject, text, html: testHtml });
return NextResponse.json({ message: 'Email sent', info });
} catch (err) {
console.error('Mail error', err);

5
shop/app/api/orders/checkout/route.ts
View File

@@ -295,6 +295,9 @@ export async function POST(request: Request) {
const itemsSection = buildEmailItemsSection(items);
const { data: brandData } = await supabase.from('settings').select('primary_color').eq('id', 'branding').maybeSingle();
const primaryColor = brandData?.primary_color || '#2563eb';
const emailTemplate = getOrderEmailTemplate({
orderNumber: order.order_number,
formattedDate,
@@ -303,7 +306,7 @@ export async function POST(request: Request) {
totalDetailsHtml,
itemsDetailsText: itemsSection.text,
itemsDetailsHtml: itemsSection.html
}, `${process.env.NEXT_PUBLIC_SITE_URL || 'https://staging.hephex.de'}`, false);
}, `${process.env.NEXT_PUBLIC_SITE_URL || 'https://staging.hephex.de'}`, false, primaryColor);
const { data: bufferData, error: downloadError } = await supabase
.storage

13
shop/lib/actions/email-templates.ts
View File

@@ -14,7 +14,8 @@ interface EmailDetails {
export function getOrderEmailTemplate(
details: EmailDetails,
siteUrl: string,
isUpdate: boolean = false
isUpdate: boolean = false,
primaryColor: string = '#2563eb'
) {
const title = isUpdate ? 'Anfrage geändert' : 'Anfrage erhalten'
const intro = isUpdate
@@ -65,7 +66,7 @@ export function getOrderEmailTemplate(
const html = `
<div style="font-family: sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; border: 1px solid #e2e8f0; border-radius: 8px;">
<h2 style="color: #0f172a; margin-bottom: 16px;">${title}</h2>
<h2 style="color: ${primaryColor}; margin-bottom: 16px;">${title}</h2>
<p style="color: #475569; font-size: 16px; line-height: 1.5;">Hallo,</p>
<p style="color: #475569; font-size: 16px; line-height: 1.5;">${intro}</p>
<div style="background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 16px; margin: 24px 0;">
@@ -90,7 +91,7 @@ export function getOrderEmailTemplate(
</div>
<p style="color: #475569; font-size: 16px; line-height: 1.5;">Die Bestätigung liegt als PDF im Anhang.</p>
<p style="color: #475569; font-size: 16px; line-height: 1.5;">
<a href="${siteUrl}/api/orders/${details.orderNumber}/download" style="color: #3b82f6; text-decoration: underline; font-weight: 500;">Anfragebestätigung PDF herunterladen</a>
<a href="${siteUrl}/api/orders/${details.orderNumber}/download" style="color: ${primaryColor}; text-decoration: underline; font-weight: 500;">Anfragebestätigung PDF herunterladen</a>
</p>
<p style="color: #475569; font-size: 16px; line-height: 1.5; margin-top: 24px;">Viele Grüße,<br>Dein CASPOS Team</p>
</div>
@@ -99,12 +100,12 @@ export function getOrderEmailTemplate(
return { text, html }
}
export function getStatusEmailTemplate(orderNumber: string, oldLabel: string, newLabel: string) {
export function getStatusEmailTemplate(orderNumber: string, oldLabel: string, newLabel: string, primaryColor: string = '#2563eb') {
const text = `Hallo,\n\nder Status deiner Anfrage ${orderNumber} hat sich geändert.\n\nStatus: ${newLabel} (vorher: ${oldLabel})\n\nViele Grüße,\nDein CASPOS Team`
const html = `
<div style="font-family: sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; border: 1px solid #e2e8f0; border-radius: 8px;">
<h2 style="color: #0f172a; margin-bottom: 16px;">Statusänderung</h2>
<h2 style="color: ${primaryColor}; margin-bottom: 16px;">Statusänderung</h2>
<p style="color: #475569; font-size: 16px; line-height: 1.5;">Hallo,</p>
<p style="color: #475569; font-size: 16px; line-height: 1.5;">der Status deiner Anfrage <strong>${orderNumber}</strong> wurde aktualisiert.</p>
<div style="background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 16px; margin: 24px 0;">
@@ -119,7 +120,7 @@ export function getStatusEmailTemplate(orderNumber: string, oldLabel: string, ne
</tr>
<tr>
<td style="padding: 4px 0; font-weight: bold;">Aktuell:</td>
<td style="padding: 4px 0; font-weight: bold; color: #3b82f6;">${newLabel}</td>
<td style="padding: 4px 0; font-weight: bold; color: ${primaryColor};">${newLabel}</td>
</tr>
</table>
</div>