feat(back-end and front-end) email

2026-03-04 14:55:51 +01:00
parent 3916f3ace6
commit 6f47d02813
8 changed files with 539 additions and 30 deletions
--- a/backend/src/main/resources/templates/email/order-shipped.html
+++ b/backend/src/main/resources/templates/email/order-shipped.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8">
+    <title th:text="${emailTitle}">Order Shipped</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f4f4f4;
+            margin: 0;
+            padding: 0;
+        }
+
+        .container {
+            max-width: 600px;
+            margin: 20px auto;
+            background-color: #ffffff;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .header {
+            text-align: center;
+            border-bottom: 1px solid #eeeeee;
+            padding-bottom: 20px;
+            margin-bottom: 20px;
+        }
+
+        .header h1 {
+            color: #333333;
+        }
+
+        .content {
+            color: #555555;
+            line-height: 1.6;
+        }
+
+        .status-box {
+            background-color: #e9f3ff;
+            border: 1px solid #a9c8ef;
+            border-radius: 5px;
+            padding: 12px;
+            margin-top: 18px;
+        }
+
+        .order-box {
+            background-color: #f9f9f9;
+            border-radius: 5px;
+            padding: 12px;
+            margin-top: 18px;
+        }
+
+        .order-box th {
+            text-align: left;
+            padding-right: 18px;
+            vertical-align: top;
+        }
+
+        .footer {
+            text-align: center;
+            font-size: 0.9em;
+            color: #999999;
+            margin-top: 30px;
+            border-top: 1px solid #eeeeee;
+            padding-top: 20px;
+        }
+    </style>
+</head>
+<body>
+<div class="container">
+    <div class="header">
+        <h1 th:text="${headlineText}">Your order #00000000 has been shipped</h1>
+    </div>
+
+    <div class="content">
+        <p th:text="${greetingText}">Hi Customer,</p>
+        <p th:text="${introText}">Good news: your package is on its way.</p>
+
+        <div class="status-box">
+            <strong th:text="${statusText}">Current status: Shipped.</strong>
+        </div>
+
+        <div class="order-box">
+            <table>
+                <tr>
+                    <th th:text="${labelOrderNumber}">Order number</th>
+                    <td th:text="${orderNumber}">00000000</td>
+                </tr>
+                <tr>
+                    <th th:text="${labelTotal}">Total</th>
+                    <td th:text="${totalCost}">CHF 0.00</td>
+                </tr>
+            </table>
+        </div>
+
+        <p>
+            <span th:text="${orderDetailsCtaText}">View order status</span>:
+            <a th:href="${orderDetailsUrl}" th:text="${orderDetailsUrl}">https://example.com/en/co/00000000-0000-0000-0000-000000000000</a>
+        </p>
+        <p th:text="${supportText}">If you need assistance, reply to this email.</p>
+    </div>
+
+    <div class="footer">
+        <p>&copy; <span th:text="${currentYear}">2026</span> 3D-Fab</p>
+        <p th:text="${footerText}">Automated message.</p>
+    </div>
+</div>
+</body>
+</html>