docs: add comprehensive roadmap for email service improvements
This commit is contained in:
Unchained
@@ -0,0 +1,287 @@
|
||||
import Handlebars from "handlebars";
|
||||
|
||||
// Translations for Order Created emails
|
||||
const translations = {
|
||||
en: {
|
||||
subject: "Order {{orderNumber}} Confirmed",
|
||||
title: "Order Confirmed",
|
||||
greeting: "Dear {{customerName}},",
|
||||
body: "Thank you for your order! We have received it and it is now being processed.",
|
||||
orderLabel: "Order:",
|
||||
dateLabel: "Date:",
|
||||
statusLabel: "Status:",
|
||||
itemsLabel: "Items",
|
||||
subtotalLabel: "Subtotal:",
|
||||
shippingLabel: "Shipping:",
|
||||
taxLabel: "Tax:",
|
||||
totalLabel: "Total:",
|
||||
shippingAddressLabel: "Shipping Address",
|
||||
phoneLabel: "Phone:",
|
||||
phoneNotProvided: "Not provided",
|
||||
viewOrderButton: "View Order",
|
||||
thankYou: "Thank you!",
|
||||
companyName: "ManoonOils",
|
||||
footerText: "support@manoonoils.com"
|
||||
},
|
||||
sr: {
|
||||
subject: "Porudžbina {{orderNumber}} Potvrđena",
|
||||
title: "Porudžbina Potvrđena",
|
||||
greeting: "Poštovani {{customerName}},",
|
||||
body: "Hvala vam na porudžbini! Primili smo je i sada je obrađujemo.",
|
||||
orderLabel: "Porudžbina:",
|
||||
dateLabel: "Datum:",
|
||||
statusLabel: "Status:",
|
||||
itemsLabel: "Artikli",
|
||||
subtotalLabel: "Međuzbir:",
|
||||
shippingLabel: "Dostava:",
|
||||
taxLabel: "Porez:",
|
||||
totalLabel: "Ukupno:",
|
||||
shippingAddressLabel: "Adresa za Dostavu",
|
||||
phoneLabel: "Telefon:",
|
||||
phoneNotProvided: "Nije navedeno",
|
||||
viewOrderButton: "Pogledaj Porudžbinu",
|
||||
thankYou: "Hvala vam!",
|
||||
companyName: "ManoonOils",
|
||||
footerText: "support@manoonoils.com"
|
||||
},
|
||||
de: {
|
||||
subject: "Bestellung {{orderNumber}} Bestätigt",
|
||||
title: "Bestellung Bestätigt",
|
||||
greeting: "Sehr geehrte/r {{customerName}},",
|
||||
body: "Vielen Dank für Ihre Bestellung! Wir haben sie erhalten und bearbeiten sie jetzt.",
|
||||
orderLabel: "Bestellung:",
|
||||
dateLabel: "Datum:",
|
||||
statusLabel: "Status:",
|
||||
itemsLabel: "Artikel",
|
||||
subtotalLabel: "Zwischensumme:",
|
||||
shippingLabel: "Versand:",
|
||||
taxLabel: "Steuer:",
|
||||
totalLabel: "Gesamt:",
|
||||
shippingAddressLabel: "Lieferadresse",
|
||||
phoneLabel: "Telefon:",
|
||||
phoneNotProvided: "Nicht angegeben",
|
||||
viewOrderButton: "Bestellung Ansehen",
|
||||
thankYou: "Vielen Dank!",
|
||||
companyName: "ManoonOils",
|
||||
footerText: "support@manoonoils.com"
|
||||
},
|
||||
fr: {
|
||||
subject: "Commande {{orderNumber}} Confirmée",
|
||||
title: "Commande Confirmée",
|
||||
greeting: "Cher/Chère {{customerName}},",
|
||||
body: "Merci pour votre commande! Nous l'avons reçue et elle est en cours de traitement.",
|
||||
orderLabel: "Commande:",
|
||||
dateLabel: "Date:",
|
||||
statusLabel: "Statut:",
|
||||
itemsLabel: "Articles",
|
||||
subtotalLabel: "Sous-total:",
|
||||
shippingLabel: "Livraison:",
|
||||
taxLabel: "Taxe:",
|
||||
totalLabel: "Total:",
|
||||
shippingAddressLabel: "Adresse de Livraison",
|
||||
phoneLabel: "Téléphone:",
|
||||
phoneNotProvided: "Non fourni",
|
||||
viewOrderButton: "Voir la Commande",
|
||||
thankYou: "Merci!",
|
||||
companyName: "ManoonOils",
|
||||
footerText: "support@manoonoils.com"
|
||||
}
|
||||
};
|
||||
|
||||
// Customer email template
|
||||
const customerEmailTemplate = `
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body style="font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#f6f6f6;margin:0;padding:20px;">
|
||||
<div style="max-width:600px;margin:0 auto;background:white;padding:40px 20px;">
|
||||
<div style="text-align:center;margin-bottom:30px;">
|
||||
<img src="https://minio-api.nodecrew.me/manoon-media/2024/09/cropped-manoon-logo_256x-1-1.png" width="150" alt="{{companyName}}">
|
||||
</div>
|
||||
|
||||
<h1 style="font-size:24px;font-weight:bold;color:#1a1a1a;margin-bottom:20px;">{{title}}</h1>
|
||||
|
||||
<p style="font-size:16px;color:#333;margin-bottom:10px;">{{greeting}}</p>
|
||||
<p style="font-size:14px;color:#666;margin-bottom:20px;">{{body}}</p>
|
||||
|
||||
<div style="background:#f9f9f9;padding:15px;border-radius:8px;margin-bottom:20px;">
|
||||
<p style="font-size:14px;color:#333;margin:0 0 8px 0;"><strong>{{orderLabel}}</strong> {{orderNumber}}</p>
|
||||
<p style="font-size:14px;color:#333;margin:0 0 8px 0;"><strong>{{dateLabel}}</strong> {{orderDate}}</p>
|
||||
<p style="font-size:14px;color:#333;margin:0;"><strong>{{statusLabel}}</strong> {{orderStatus}}</p>
|
||||
</div>
|
||||
|
||||
<p style="font-size:16px;font-weight:bold;color:#1a1a1a;margin-bottom:10px;">{{itemsLabel}}</p>
|
||||
<div style="margin-bottom:20px;">
|
||||
{{#each items}}
|
||||
<p style="font-size:14px;color:#333;margin:0 0 4px 0;">{{quantity}}x {{name}} - {{price}}</p>
|
||||
{{/each}}
|
||||
</div>
|
||||
|
||||
<div style="background:#f9f9f9;padding:15px;border-radius:8px;margin-bottom:20px;">
|
||||
<p style="font-size:14px;color:#333;margin:0 0 8px 0;"><strong>{{subtotalLabel}}</strong> {{subtotal}}</p>
|
||||
<p style="font-size:14px;color:#333;margin:0 0 8px 0;"><strong>{{shippingLabel}}</strong> {{shipping}}</p>
|
||||
<p style="font-size:14px;color:#333;margin:0 0 8px 0;"><strong>{{taxLabel}}</strong> {{tax}}</p>
|
||||
<hr style="border-color:#e0e0e0;margin:10px 0;">
|
||||
<p style="font-size:16px;font-weight:bold;color:#1a1a1a;margin:0;"><strong>{{totalLabel}}</strong> {{total}}</p>
|
||||
</div>
|
||||
|
||||
{{#if shippingAddress}}
|
||||
<div style="margin-bottom:20px;">
|
||||
<p style="font-size:16px;font-weight:bold;color:#1a1a1a;margin-bottom:10px;">{{shippingAddressLabel}}</p>
|
||||
<p style="font-size:14px;color:#666;margin:0;white-space:pre-line;">{{shippingAddress}}</p>
|
||||
<p style="font-size:14px;color:#666;margin:8px 0 0 0;"><strong>{{phoneLabel}}</strong> {{#if phone}}{{phone}}{{else}}{{phoneNotProvided}}{{/if}}</p>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div style="text-align:center;margin:20px 0;">
|
||||
<a href="https://manoonoils.com" style="display:inline-block;background:#000;color:white;padding:12px 30px;border-radius:4px;text-decoration:none;font-size:14px;font-weight:bold;">{{viewOrderButton}}</a>
|
||||
</div>
|
||||
|
||||
<p style="font-size:14px;color:#666;margin-bottom:10px;">{{footerText}}</p>
|
||||
<p style="font-size:14px;font-weight:bold;color:#1a1a1a;">{{thankYou}}</p>
|
||||
|
||||
<div style="margin-top:40px;padding-top:20px;border-top:1px solid #e0e0e0;text-align:center;color:#666;font-size:12px;">
|
||||
<p>{{companyName}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
|
||||
// Admin email template
|
||||
const adminEmailTemplate = `
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body style="font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#f6f6f6;margin:0;padding:20px;">
|
||||
<div style="max-width:600px;margin:0 auto;background:white;padding:40px 20px;">
|
||||
<h1 style="font-size:24px;font-weight:bold;color:#1a1a1a;margin-bottom:20px;">{{adminTitle}}</h1>
|
||||
|
||||
<div style="background:#f9f9f9;padding:15px;border-radius:8px;margin-bottom:20px;">
|
||||
<h3 style="font-size:16px;font-weight:bold;color:#1a1a1a;margin:0 0 10px 0;">{{adminOrderLabel}} #{{orderNumber}}</h3>
|
||||
<p style="font-size:14px;color:#333;margin:0 0 8px 0;"><strong>{{dateLabel}}</strong> {{orderDate}}</p>
|
||||
<p style="font-size:14px;color:#333;margin:0 0 8px 0;"><strong>{{statusLabel}}</strong> {{orderStatus}}</p>
|
||||
<p style="font-size:14px;color:#333;margin:0;"><strong>{{paymentLabel}}</strong> {{paymentMethod}}</p>
|
||||
</div>
|
||||
|
||||
<div style="background:#f9f9f9;padding:15px;border-radius:8px;margin-bottom:20px;">
|
||||
<h3 style="font-size:16px;font-weight:bold;color:#1a1a1a;margin:0 0 10px 0;">{{customerLabel}}</h3>
|
||||
<p style="font-size:14px;color:#333;margin:0 0 8px 0;"><strong>{{nameLabel}}</strong> {{customerName}}</p>
|
||||
<p style="font-size:14px;color:#333;margin:0 0 8px 0;"><strong>{{emailLabel}}</strong> {{customerEmail}}</p>
|
||||
<p style="font-size:14px;color:#333;margin:0;"><strong>{{phoneLabel}}</strong> {{#if phone}}{{phone}}{{else}}{{phoneNotProvided}}{{/if}}</p>
|
||||
</div>
|
||||
|
||||
<p style="font-size:16px;font-weight:bold;color:#1a1a1a;margin-bottom:10px;">{{itemsLabel}}</p>
|
||||
<div style="margin-bottom:20px;">
|
||||
{{#each items}}
|
||||
<p style="font-size:14px;color:#333;margin:0 0 4px 0;">{{quantity}}x {{name}} - {{price}}</p>
|
||||
{{/each}}
|
||||
</div>
|
||||
|
||||
<div style="background:#f9f9f9;padding:15px;border-radius:8px;margin-bottom:20px;">
|
||||
<p style="font-size:14px;color:#333;margin:0 0 8px 0;"><strong>{{subtotalLabel}}</strong> {{subtotal}}</p>
|
||||
<p style="font-size:14px;color:#333;margin:0 0 8px 0;"><strong>{{shippingLabel}}</strong> {{shipping}}</p>
|
||||
<p style="font-size:14px;color:#333;margin:0 0 8px 0;"><strong>{{taxLabel}}</strong> {{tax}}</p>
|
||||
<hr style="border-color:#e0e0e0;margin:10px 0;">
|
||||
<p style="font-size:16px;font-weight:bold;color:#1a1a1a;margin:0;"><strong>{{totalLabel}}</strong> {{total}}</p>
|
||||
</div>
|
||||
|
||||
{{#if shippingAddress}}
|
||||
<div style="margin-bottom:20px;">
|
||||
<p style="font-size:16px;font-weight:bold;color:#1a1a1a;margin-bottom:10px;">{{shippingAddressLabel}}</p>
|
||||
<p style="font-size:14px;color:#666;margin:0;white-space:pre-line;">{{shippingAddress}}</p>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div style="text-align:center;margin:20px 0;">
|
||||
<a href="https://dashboard.manoonoils.com/orders" style="display:inline-block;background:#000;color:white;padding:12px 30px;border-radius:4px;text-decoration:none;font-size:14px;font-weight:bold;">Dashboard</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
|
||||
// Compile templates
|
||||
const compileCustomerEmail = Handlebars.compile(customerEmailTemplate);
|
||||
const compileAdminEmail = Handlebars.compile(adminEmailTemplate);
|
||||
|
||||
// Admin translations (always in English)
|
||||
const adminTranslations = {
|
||||
adminTitle: "New Order! 🎉",
|
||||
adminOrderLabel: "Order",
|
||||
customerLabel: "Customer",
|
||||
paymentLabel: "Payment:",
|
||||
paymentMethod: "Card"
|
||||
};
|
||||
|
||||
export function getOrderCreatedEmails(order: any) {
|
||||
// Detect language
|
||||
const lang = order.languageCode?.toLowerCase() || "en";
|
||||
const t = translations[lang as keyof typeof translations] || translations.en;
|
||||
|
||||
// Format data
|
||||
const customerName = order.shippingAddress?.firstName
|
||||
? `${order.shippingAddress.firstName} ${order.shippingAddress.lastName || ""}`.trim()
|
||||
: order.userEmail?.split("@")[0] || "Customer";
|
||||
|
||||
const currency = order.total?.gross?.currency || "EUR";
|
||||
|
||||
const items = (order.lines || []).map((line: any) => ({
|
||||
name: line.variant?.product?.name || line.variant?.name || "Product",
|
||||
quantity: line.quantity || 0,
|
||||
price: `${line.totalPrice?.gross?.amount?.toFixed(2) || "0.00"} ${currency}`
|
||||
}));
|
||||
|
||||
const shippingAddress = order.shippingAddress
|
||||
? `${order.shippingAddress.firstName || ""} ${order.shippingAddress.lastName || ""}\n${order.shippingAddress.streetAddress1 || ""}\n${order.shippingAddress.city || ""}, ${order.shippingAddress.postalCode || ""}\n${order.shippingAddress.country?.country || ""}`
|
||||
: "";
|
||||
|
||||
const orderDate = order.created
|
||||
? new Date(order.created).toLocaleString(lang === "sr" ? "sr-RS" : lang === "de" ? "de-DE" : lang === "fr" ? "fr-FR" : "en-US")
|
||||
: new Date().toLocaleString();
|
||||
|
||||
// Customer email data
|
||||
const customerData = {
|
||||
...t,
|
||||
orderNumber: order.number || order.id,
|
||||
customerName,
|
||||
orderDate,
|
||||
orderStatus: order.status || "unfulfilled",
|
||||
items,
|
||||
subtotal: `${order.subtotal?.gross?.amount?.toFixed(2) || "0.00"} ${currency}`,
|
||||
shipping: `${order.shippingPrice?.gross?.amount?.toFixed(2) || "0.00"} ${currency}`,
|
||||
tax: `${order.total?.tax?.amount?.toFixed(2) || "0.00"} ${currency}`,
|
||||
total: `${order.total?.gross?.amount?.toFixed(2) || "0.00"} ${currency}`,
|
||||
shippingAddress,
|
||||
phone: order.shippingAddress?.phone || ""
|
||||
};
|
||||
|
||||
// Admin email data (English)
|
||||
const adminData = {
|
||||
...t,
|
||||
...adminTranslations,
|
||||
orderNumber: order.number || order.id,
|
||||
customerName,
|
||||
customerEmail: order.userEmail || "",
|
||||
orderDate,
|
||||
orderStatus: order.status || "unfulfilled",
|
||||
items,
|
||||
subtotal: `${order.subtotal?.gross?.amount?.toFixed(2) || "0.00"} ${currency}`,
|
||||
shipping: `${order.shippingPrice?.gross?.amount?.toFixed(2) || "0.00"} ${currency}`,
|
||||
tax: `${order.total?.tax?.amount?.toFixed(2) || "0.00"} ${currency}`,
|
||||
total: `${order.total?.gross?.amount?.toFixed(2) || "0.00"} ${currency}`,
|
||||
shippingAddress,
|
||||
phone: order.shippingAddress?.phone || ""
|
||||
};
|
||||
|
||||
return {
|
||||
customerSubject: Handlebars.compile(t.subject)({ orderNumber: order.number || order.id }),
|
||||
customerHtml: compileCustomerEmail(customerData),
|
||||
adminSubject: `New Order! 🎉 #${order.number || order.id}`,
|
||||
adminHtml: compileAdminEmail(adminData)
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user