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

style(mail): humanize email templates and remove corporate boilerplates
All checks were successful
Staging Build / build (push) Successful in 2m39s
Details

Browse Source
This commit is contained in:
DanielS
2026-07-07 00:39:06 +02:00
parent 057012e09f
commit 0ec1319753
1 changed files with 16 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,12 +11,12 @@ export function getOrderEmailTemplate(
siteUrl: string, siteUrl: string,
isUpdate: boolean = false isUpdate: boolean = false
) { ) {
const title = isUpdate ? 'Ihre Anfrage wurde aktualisiert!' : 'Vielen Dank für Ihre Anfrage!' const title = isUpdate ? 'Anfrage geändert' : 'Anfrage erhalten'
const intro = isUpdate const intro = isUpdate
? `Ihr Anfrage mit der Nummer ${details.orderNumber} wurde erfolgreich aktualisiert.` ? `Deine Anfrage ${details.orderNumber} wurde aktualisiert.`
: 'wir freuen uns sehr über Ihre Anfrage bei CASPOS Shop. Ihre Anfrage wurde erfolgreich entgegengenommen und wird nun verarbeitet.' : `Deine Anfrage ${details.orderNumber} ist bei uns eingegangen und wird bearbeitet.`
const text = `Hallo,\n\n${isUpdate ? 'ihre Anfrage wurde erfolgreich aktualisiert!' : 'vielen Dank für Ihre Anfrage bei CASPOS Shop!'}\n\n${isUpdate ? 'Neue Anfragedetails' : 'Anfragedetails'}:\n- Anfrage-Nummer: ${details.orderNumber}\n- Datum: ${details.formattedDate}\n- Endkunde: ${details.customerCompanyName}\n${details.totalDetailsText}\n\nIm Anhang dieser E-Mail finden Sie Ihre ${isUpdate ? 'aktualisierte' : ''} Anfragebestätigung als PDF-Dokument.\n\nPDF herunterladen: ${siteUrl}/api/orders/${details.orderNumber}/download\n\nViele Grüße,\nIhr CASPOS Shop-Team` const text = `Hallo,\n\n${isUpdate ? 'Deine Anfrage wurde aktualisiert.' : 'Deine Anfrage ist bei uns eingegangen.'}\n\nDetails:\n- Nummer: ${details.orderNumber}\n- Datum: ${details.formattedDate}\n- Kunde: ${details.customerCompanyName}\n${details.totalDetailsText}\n\nDeine Anfragebestätigung findest du im Anhang als PDF.\n\nPDF-Link: ${siteUrl}/api/orders/${details.orderNumber}/download\n\nViele Grüße,\nDein CASPOS Team`
const html = ` const html = `
<div style="font-family: sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; border: 1px solid #e2e8f0; border-radius: 8px;"> <div style="font-family: sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; border: 1px solid #e2e8f0; border-radius: 8px;">
@@ -24,10 +24,10 @@ export function getOrderEmailTemplate(
<p style="color: #475569; font-size: 16px; line-height: 1.5;">Hallo,</p> <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> <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;"> <div style="background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 16px; margin: 24px 0;">
<h3 style="color: #0f172a; margin-top: 0; margin-bottom: 12px;">${isUpdate ? 'Neue Anfrage-Details' : 'Anfrage-Details'}</h3> <h3 style="color: #0f172a; margin-top: 0; margin-bottom: 12px;">Details</h3>
<table style="width: 100%; border-collapse: collapse; font-size: 14px; color: #475569;"> <table style="width: 100%; border-collapse: collapse; font-size: 14px; color: #475569;">
<tr> <tr>
<td style="padding: 4px 0; font-weight: bold; width: 140px;">Anfrage-Nummer:</td> <td style="padding: 4px 0; font-weight: bold; width: 140px;">Nummer:</td>
<td style="padding: 4px 0;">${details.orderNumber}</td> <td style="padding: 4px 0;">${details.orderNumber}</td>
</tr> </tr>
<tr> <tr>
@@ -35,18 +35,17 @@ export function getOrderEmailTemplate(
<td style="padding: 4px 0;">${details.formattedDate}</td> <td style="padding: 4px 0;">${details.formattedDate}</td>
</tr> </tr>
<tr> <tr>
<td style="padding: 4px 0; font-weight: bold;">Endkunde:</td> <td style="padding: 4px 0; font-weight: bold;">Kunde:</td>
<td style="padding: 4px 0;">${details.customerCompanyName}</td> <td style="padding: 4px 0;">${details.customerCompanyName}</td>
</tr> </tr>
${details.totalDetailsHtml} ${details.totalDetailsHtml}
</table> </table>
</div> </div>
<p style="color: #475569; font-size: 16px; line-height: 1.5;">Im Anhang dieser E-Mail finden Sie Ihre ${isUpdate ? 'aktualisierte' : ''} Anfragebestätigung als PDF-Dokument.</p> <p style="color: #475569; font-size: 16px; line-height: 1.5;">Die Bestätigung liegt als PDF im Anhang.</p>
<div style="text-align: center; margin: 24px 0;"> <div style="text-align: center; margin: 24px 0;">
<a href="${siteUrl}" style="display: inline-block; background-color: #3b82f6; color: #ffffff; text-decoration: none; padding: 12px 24px; border-radius: 6px; font-weight: bold; font-size: 14px;">📄 PDF herunterladen</a> <a href="${siteUrl}" style="display: inline-block; background-color: #3b82f6; color: #ffffff; text-decoration: none; padding: 12px 24px; border-radius: 6px; font-weight: bold; font-size: 14px;">📄 PDF herunterladen</a>
</div> </div>
<p style="color: #475569; font-size: 16px; line-height: 1.5; margin-top: 24px;">Mit freundlichen Grüßen,<br>Ihr CASPOS Shop-Team</p> <p style="color: #475569; font-size: 16px; line-height: 1.5; margin-top: 24px;">Viele Grüße,<br>Dein CASPOS Team</p>
${!isUpdate ? '<hr style="border: 0; border-top: 1px solid #e2e8f0; margin: 24px 0;"><p style="color: #94a3b8; font-size: 12px; text-align: center;">Diese E-Mail wurde automatisch generiert. Bitte antworten Sie nicht darauf.</p>' : ''}
</div> </div>
` `
@@ -54,32 +53,30 @@ export function getOrderEmailTemplate(
} }
export function getStatusEmailTemplate(orderNumber: string, oldLabel: string, newLabel: string) { export function getStatusEmailTemplate(orderNumber: string, oldLabel: string, newLabel: string) {
const text = `Hallo,\n\nder Status Ihrer Bestellung mit der Nummer ${orderNumber} hat sich geändert.\n\nNeuer Status: ${newLabel} (vorher: ${oldLabel})\n\nViele Grüße,\nIhr CASPOS Shop-Team` 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 = ` const html = `
<div style="font-family: sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; border: 1px solid #e2e8f0; border-radius: 8px;"> <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 Ihrer Bestellung hat sich geändert</h2> <h2 style="color: #0f172a; 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;">Hallo,</p>
<p style="color: #475569; font-size: 16px; line-height: 1.5;">der Status Ihrer Bestellung mit der Nummer <strong>${orderNumber}</strong> wurde aktualisiert.</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;"> <div style="background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 16px; margin: 24px 0;">
<table style="width: 100%; border-collapse: collapse; font-size: 14px; color: #475569;"> <table style="width: 100%; border-collapse: collapse; font-size: 14px; color: #475569;">
<tr> <tr>
<td style="padding: 4px 0; font-weight: bold; width: 140px;">Bestellnummer:</td> <td style="padding: 4px 0; font-weight: bold; width: 140px;">Nummer:</td>
<td style="padding: 4px 0;">${orderNumber}</td> <td style="padding: 4px 0;">${orderNumber}</td>
</tr> </tr>
<tr> <tr>
<td style="padding: 4px 0; font-weight: bold;">Alter Status:</td> <td style="padding: 4px 0; font-weight: bold;">Vorher:</td>
<td style="padding: 4px 0; text-decoration: line-through; color: #94a3b8;">${oldLabel}</td> <td style="padding: 4px 0; text-decoration: line-through; color: #94a3b8;">${oldLabel}</td>
</tr> </tr>
<tr> <tr>
<td style="padding: 4px 0; font-weight: bold;">Neuer Status:</td> <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: #3b82f6;">${newLabel}</td>
</tr> </tr>
</table> </table>
</div> </div>
<p style="color: #475569; font-size: 16px; line-height: 1.5;">Viele Grüße,<br>Ihr CASPOS Shop-Team</p> <p style="color: #475569; font-size: 16px; line-height: 1.5;">Viele Grüße,<br>Dein CASPOS Team</p>
<hr style="border: 0; border-top: 1px solid #e2e8f0; margin: 24px 0;">
<p style="color: #94a3b8; font-size: 12px; text-align: center;">Diese E-Mail wurde automatisch generiert. Bitte antworten Sie nicht darauf.</p>
</div> </div>
` `