@vendure/email-plugin 3.2.0 → 3.2.2

package/LICENSE.md

@@ -1,42 +1,42 @@
-# License
-Copyright (C) Vendure GmbH
-
-This software is available under two different licenses:
-* GNU General Public License version 3 (GPLv3) as Vendure Community Edition
-* Vendure Commercial License (VCL)
-
-The default Vendure license, without a valid Vendure Commercial License agreement, is the Open-Source GPLv3 license.
-
-## GNU General Public License version 3 (GPLv3)
-
-If you decide to choose the GPLv3 license, you must comply with the following terms:
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-Additional permission under GNU GPL version 3 section 7:
-
-An additional exception under section 7 of the GPL is included in the plugin-exception.txt file,
-which allows you to distribute Vendure plugins (i.e. extensions) under a different license.
-
-## Vendure Commercial License (VCL)
-
-Alternatively, commercial and supported versions of the program - also known as
-Commercial Distributions - must be used in accordance with the terms and conditions
-contained in a separate written agreement between you and Vendure GmbH.
-For more information about the Vendure Commercial License (VCL) please contact contact@vendure.io.
-
-Please see also:
-
-- [Licensing FAQ - license-faq.md](license/license-faq.md)
-- [GNU GENERAL PUBLIC LICENSE Version 3, 29 June 2007 - gpl-3.0.txt](license/gpl-3.0.txt)
+# License
+Copyright (C) Vendure GmbH
+
+This software is available under two different licenses:
+* GNU General Public License version 3 (GPLv3) as Vendure Community Edition
+* Vendure Commercial License (VCL)
+
+The default Vendure license, without a valid Vendure Commercial License agreement, is the Open-Source GPLv3 license.
+
+## GNU General Public License version 3 (GPLv3)
+
+If you decide to choose the GPLv3 license, you must comply with the following terms:
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+Additional permission under GNU GPL version 3 section 7:
+
+An additional exception under section 7 of the GPL is included in the plugin-exception.txt file,
+which allows you to distribute Vendure plugins (i.e. extensions) under a different license.
+
+## Vendure Commercial License (VCL)
+
+Alternatively, commercial and supported versions of the program - also known as
+Commercial Distributions - must be used in accordance with the terms and conditions
+contained in a separate written agreement between you and Vendure GmbH.
+For more information about the Vendure Commercial License (VCL) please contact contact@vendure.io.
+
+Please see also:
+
+- [Licensing FAQ - license-faq.md](license/license-faq.md)
+- [GNU GENERAL PUBLIC LICENSE Version 3, 29 June 2007 - gpl-3.0.txt](license/gpl-3.0.txt)

package/README.md

@@ -1,7 +1,7 @@
-# Vendure EmailPlugin
-
-The `EmailPlugin` generates and sends emails based on Vendure server events.
-
-`npm install @vendure/email-plugin`
-
-For documentation, see [docs.vendure.io/reference/core-plugins/email-plugin/](https://docs.vendure.io/reference/core-plugins/email-plugin/)
+# Vendure EmailPlugin
+
+The `EmailPlugin` generates and sends emails based on Vendure server events.
+
+`npm install @vendure/email-plugin`
+
+For documentation, see [docs.vendure.io/reference/core-plugins/email-plugin/](https://docs.vendure.io/reference/core-plugins/email-plugin/)

package/dev-mailbox.html

@@ -1,218 +1,218 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8" />
-    <title>Vendure Development Inbox</title>
-    <style>
-        body {
-            display: flex;
-            flex-direction: column;
-            height: 100vh;
-            margin: 0;
-            font-family: Helvetica, Arial, sans-serif;
-        }
-        .top-bar {
-            padding: 12px;
-            display: flex;
-            align-items: center;
-            background-color: #2a2929;
-            color: #efefef;
-            height: 60px;
-        }
-        .heading {
-            margin: 0;
-            font-size: 22px;
-        }
-        button#refresh {
-            margin-left: 12px;
-            border-radius: 3px;
-            display: flex;
-            align-items: center;
-        }
-        button#refresh .label {
-            margin-left: 6px;
-        }
-        .generate-controls {
-            flex: 1;
-            display: flex;
-            justify-content: flex-end;
-        }
-        input,
-        select,
-        button {
-            padding: 6px;
-            border-radius: 3px;
-            border: 1px solid #0b384b;
-            margin-left: 3px;
-        }
-        button {
-            text-transform: uppercase;
-            font-size: 12px;
-            transition: background-color 0.2s;
-            padding: 0 12px;
-            height: 32px;
-        }
-        button:hover {
-            background-color: #efefef;
-        }
-        #language-code {
-            width: 32px;
-        }
-        .content {
-            display: flex;
-            flex: 1;
-            height: calc(100% - 60px);
-        }
-        .list {
-            width: 40vw;
-            min-width: 300px;
-            overflow: auto;
-        }
-        .row {
-            border-bottom: 1px dashed #ddd;
-            padding: 12px 6px;
-            cursor: pointer;
-            transition: background-color 0.2s;
-        }
-        .row.selected {
-            background-color: #d4e1e7;
-        }
-        .row:not(.selected):hover {
-            background-color: #efefef;
-        }
-        .meta {
-            display: flex;
-            justify-content: space-between;
-            color: #666;
-        }
-        .detail {
-            flex: 1;
-            border: 1px solid #999;
-            display: flex;
-            flex-direction: column;
-        }
-        .detail iframe {
-            height: 100%;
-            border: 1px solid #eee;
-            overflow: auto;
-        }
-        .metadata {
-            padding: 6px;
-            color: #333;
-            background-color: white;
-            z-index: 1;
-            box-shadow: 0px 5px 8px -7px rgba(0, 0, 0, 0.49);
-        }
-    </style>
-</head>
-<body>
-<div class="top-bar">
-    <h1 class="heading">Vendure Dev Mailbox</h1>
-    <div class="generate-controls">
-        <select id="type-selector"></select>
-        <input id="language-code" value="en" type="text" />
-        <button id="generate-test">Generate test</button>
-    </div>
-</div>
-<div class="content">
-    <div class="list"></div>
-    <div class="detail"></div>
-</div>
-<script>
-    let selectedId = '';
-    const normalizePath = (endpoint) => {
-        const pathname = location.pathname;
-        return pathname.endsWith('/') ? `${pathname}${endpoint}` : `${pathname}/${endpoint}`;
-    };
-    refreshInbox();
-    setInterval(refreshInbox, 5000);
-
-    const typeSelect = document.querySelector('#type-selector');
-    fetch(normalizePath('types'))
-        .then((res) => res.json())
-        .then((res) => {
-            res.forEach((type) => {
-                const option = document.createElement('option');
-                option.value = type;
-                option.text = type;
-                typeSelect.appendChild(option);
-            });
-        });
-
-    const languageCodeInput = document.querySelector('#language-code');
-    const generateTestButton = document.querySelector('#generate-test');
-    generateTestButton.addEventListener('click', (e) => {
-        fetch(normalizePath(`generate/${typeSelect.value}/${languageCodeInput.value}`))
-            .then(() => new Promise((resolve) => setTimeout(resolve, 500)))
-            .then(() => refreshInbox());
-    });
-
-    const list = document.querySelector('.list');
-
-    function refreshInbox() {
-        fetch(normalizePath('list'))
-            .then((res) => res.json())
-            .then((res) => renderList(res));
-    }
-
-    function renderList(items) {
-        const list = document.querySelector('.list');
-        list.innerHTML = '';
-        const rows = items.forEach((item) => {
-            const row = document.createElement('div');
-            row.classList.add('row');
-            row.dataset.id = item.fileName;
-            row.innerHTML = `
-                <div class="meta">
-                    <div class="date">${item.date}</div>
-                    <div class="recipient">${item.recipient}</div>
-                </div>
-                <div class="subject">${item.subject}</div>`;
-
-            row.addEventListener('click', (e) => {
-                selectedId = item.fileName;
-                fetch(normalizePath('item/' + item.fileName))
-                    .then((res) => res.json())
-                    .then((res) => renderEmail(res))
-                    .then(() => highlightSelectedRow());
-            });
-            list.appendChild(row);
-        });
-        highlightSelectedRow();
-    }
-
-    function highlightSelectedRow() {
-        document.querySelectorAll('.list .row').forEach((row) => {
-            row.classList.remove('selected');
-            if (row.dataset.id === selectedId) {
-                row.classList.add('selected');
-            }
-        });
-    }
-
-    function renderEmail(email) {
-        const content = `
-    <div class="metadata">
-        <table>
-            <tr>
-                <td>Recipient:</td>
-                <td>${email.recipient}</td>
-            </tr>
-            <tr>
-                <td>Subject:</td>
-                <td>${email.subject}</td>
-            </tr>
-            <tr>
-                <td>Date:</td>
-                <td>${new Date().toLocaleString()}</td>
-            </tr>
-        </table>
-    </div>
-    <iframe srcdoc="${email.body.replace(/"/g, '&quot;')}"></iframe>
-`;
-
-        document.querySelector('.detail').innerHTML = content;
-    }
-</script>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <title>Vendure Development Inbox</title>
+    <style>
+        body {
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+            margin: 0;
+            font-family: Helvetica, Arial, sans-serif;
+        }
+        .top-bar {
+            padding: 12px;
+            display: flex;
+            align-items: center;
+            background-color: #2a2929;
+            color: #efefef;
+            height: 60px;
+        }
+        .heading {
+            margin: 0;
+            font-size: 22px;
+        }
+        button#refresh {
+            margin-left: 12px;
+            border-radius: 3px;
+            display: flex;
+            align-items: center;
+        }
+        button#refresh .label {
+            margin-left: 6px;
+        }
+        .generate-controls {
+            flex: 1;
+            display: flex;
+            justify-content: flex-end;
+        }
+        input,
+        select,
+        button {
+            padding: 6px;
+            border-radius: 3px;
+            border: 1px solid #0b384b;
+            margin-left: 3px;
+        }
+        button {
+            text-transform: uppercase;
+            font-size: 12px;
+            transition: background-color 0.2s;
+            padding: 0 12px;
+            height: 32px;
+        }
+        button:hover {
+            background-color: #efefef;
+        }
+        #language-code {
+            width: 32px;
+        }
+        .content {
+            display: flex;
+            flex: 1;
+            height: calc(100% - 60px);
+        }
+        .list {
+            width: 40vw;
+            min-width: 300px;
+            overflow: auto;
+        }
+        .row {
+            border-bottom: 1px dashed #ddd;
+            padding: 12px 6px;
+            cursor: pointer;
+            transition: background-color 0.2s;
+        }
+        .row.selected {
+            background-color: #d4e1e7;
+        }
+        .row:not(.selected):hover {
+            background-color: #efefef;
+        }
+        .meta {
+            display: flex;
+            justify-content: space-between;
+            color: #666;
+        }
+        .detail {
+            flex: 1;
+            border: 1px solid #999;
+            display: flex;
+            flex-direction: column;
+        }
+        .detail iframe {
+            height: 100%;
+            border: 1px solid #eee;
+            overflow: auto;
+        }
+        .metadata {
+            padding: 6px;
+            color: #333;
+            background-color: white;
+            z-index: 1;
+            box-shadow: 0px 5px 8px -7px rgba(0, 0, 0, 0.49);
+        }
+    </style>
+</head>
+<body>
+<div class="top-bar">
+    <h1 class="heading">Vendure Dev Mailbox</h1>
+    <div class="generate-controls">
+        <select id="type-selector"></select>
+        <input id="language-code" value="en" type="text" />
+        <button id="generate-test">Generate test</button>
+    </div>
+</div>
+<div class="content">
+    <div class="list"></div>
+    <div class="detail"></div>
+</div>
+<script>
+    let selectedId = '';
+    const normalizePath = (endpoint) => {
+        const pathname = location.pathname;
+        return pathname.endsWith('/') ? `${pathname}${endpoint}` : `${pathname}/${endpoint}`;
+    };
+    refreshInbox();
+    setInterval(refreshInbox, 5000);
+
+    const typeSelect = document.querySelector('#type-selector');
+    fetch(normalizePath('types'))
+        .then((res) => res.json())
+        .then((res) => {
+            res.forEach((type) => {
+                const option = document.createElement('option');
+                option.value = type;
+                option.text = type;
+                typeSelect.appendChild(option);
+            });
+        });
+
+    const languageCodeInput = document.querySelector('#language-code');
+    const generateTestButton = document.querySelector('#generate-test');
+    generateTestButton.addEventListener('click', (e) => {
+        fetch(normalizePath(`generate/${typeSelect.value}/${languageCodeInput.value}`))
+            .then(() => new Promise((resolve) => setTimeout(resolve, 500)))
+            .then(() => refreshInbox());
+    });
+
+    const list = document.querySelector('.list');
+
+    function refreshInbox() {
+        fetch(normalizePath('list'))
+            .then((res) => res.json())
+            .then((res) => renderList(res));
+    }
+
+    function renderList(items) {
+        const list = document.querySelector('.list');
+        list.innerHTML = '';
+        const rows = items.forEach((item) => {
+            const row = document.createElement('div');
+            row.classList.add('row');
+            row.dataset.id = item.fileName;
+            row.innerHTML = `
+                <div class="meta">
+                    <div class="date">${item.date}</div>
+                    <div class="recipient">${item.recipient}</div>
+                </div>
+                <div class="subject">${item.subject}</div>`;
+
+            row.addEventListener('click', (e) => {
+                selectedId = item.fileName;
+                fetch(normalizePath('item/' + item.fileName))
+                    .then((res) => res.json())
+                    .then((res) => renderEmail(res))
+                    .then(() => highlightSelectedRow());
+            });
+            list.appendChild(row);
+        });
+        highlightSelectedRow();
+    }
+
+    function highlightSelectedRow() {
+        document.querySelectorAll('.list .row').forEach((row) => {
+            row.classList.remove('selected');
+            if (row.dataset.id === selectedId) {
+                row.classList.add('selected');
+            }
+        });
+    }
+
+    function renderEmail(email) {
+        const content = `
+    <div class="metadata">
+        <table>
+            <tr>
+                <td>Recipient:</td>
+                <td>${email.recipient}</td>
+            </tr>
+            <tr>
+                <td>Subject:</td>
+                <td>${email.subject}</td>
+            </tr>
+            <tr>
+                <td>Date:</td>
+                <td>${new Date().toLocaleString()}</td>
+            </tr>
+        </table>
+    </div>
+    <iframe srcdoc="${email.body.replace(/"/g, '&quot;')}"></iframe>
+`;
+
+        document.querySelector('.detail').innerHTML = content;
+    }
+</script>
+</body>
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vendure/email-plugin",
-    "version": "3.2.0",
+    "version": "3.2.2",
     "license": "GPL-3.0-or-later",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -9,6 +9,10 @@
         "templates/**/*",
         "dev-mailbox.html"
     ],
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/vendure-ecommerce/vendure"
+    },
     "scripts": {
         "watch": "tsc -p ./tsconfig.build.json --watch",
         "build": "rimraf lib && tsc -p ./tsconfig.build.json",
@@ -34,10 +38,10 @@
         "@types/express": "^4.17.21",
         "@types/fs-extra": "^11.0.4",
         "@types/mjml": "^4.7.4",
-        "@vendure/common": "^3.2.0",
-        "@vendure/core": "^3.2.0",
+        "@vendure/common": "3.2.2",
+        "@vendure/core": "3.2.2",
         "rimraf": "^5.0.5",
         "typescript": "5.8.2"
     },
-    "gitHead": "58c173ac0c7854ff53809d69f34a496f3eff1910"
+    "gitHead": "8729e7f8f028be556543c8e971e750228e516919"
 }

package/templates/email-address-change/body.hbs

@@ -1,20 +1,20 @@
-{{> header title="Verify Your New Email Address" }}
-
-<mj-section background-color="#fafafa">
-    <mj-column>
-        <mj-text color="#525252">
-            We received a request to change your registered email address to this one.
-            Click the button below to verify this address and complete the process:
-        </mj-text>
-
-        <mj-button font-family="Helvetica"
-                   background-color="#f45e43"
-                   color="white"
-                   href="{{ changeEmailAddressUrl }}?token={{ identifierChangeToken }}">
-            Verify Me!
-        </mj-button>
-    </mj-column>
-</mj-section>
-
-
-{{> footer }}
+{{> header title="Verify Your New Email Address" }}
+
+<mj-section background-color="#fafafa">
+    <mj-column>
+        <mj-text color="#525252">
+            We received a request to change your registered email address to this one.
+            Click the button below to verify this address and complete the process:
+        </mj-text>
+
+        <mj-button font-family="Helvetica"
+                   background-color="#f45e43"
+                   color="white"
+                   href="{{ changeEmailAddressUrl }}?token={{ identifierChangeToken }}">
+            Verify Me!
+        </mj-button>
+    </mj-column>
+</mj-section>
+
+
+{{> footer }}

package/templates/email-verification/body.hbs

@@ -1,20 +1,20 @@
-{{> header title="Verify Your Email Address" }}
-
-<mj-section background-color="#fafafa">
-    <mj-column>
-        <mj-text color="#525252">
-            Thank you for creating an account. Click the button below to verify this email address and
-            complete the registration process:
-        </mj-text>
-
-        <mj-button font-family="Helvetica"
-                   background-color="#f45e43"
-                   color="white"
-                   href="{{ verifyEmailAddressUrl }}?token={{ verificationToken }}">
-            Verify Me!
-        </mj-button>
-    </mj-column>
-</mj-section>
-
-
-{{> footer }}
+{{> header title="Verify Your Email Address" }}
+
+<mj-section background-color="#fafafa">
+    <mj-column>
+        <mj-text color="#525252">
+            Thank you for creating an account. Click the button below to verify this email address and
+            complete the registration process:
+        </mj-text>
+
+        <mj-button font-family="Helvetica"
+                   background-color="#f45e43"
+                   color="white"
+                   href="{{ verifyEmailAddressUrl }}?token={{ verificationToken }}">
+            Verify Me!
+        </mj-button>
+    </mj-column>
+</mj-section>
+
+
+{{> footer }}

package/templates/order-confirmation/body.hbs

@@ -1,133 +1,133 @@
-{{> header title="Order Receipt" }}
-
-<mj-raw>
-    <style type="text/css">
-    .callout {
-        background-color: #375a67;
-        padding: 15px 0;
-    }
-    .callout-large > div {
-        text-align: center !important;
-        color: #fff !important;
-        font-size: 16px !important;
-        font-weight: bold;
-        padding: 0;
-    }
-    .callout-small > div {
-        text-align: center !important;
-        color: #fff !important;
-        font-size: 14px !important;
-        padding: 0;
-    }
-    ul.address {
-        list-style-type: none;
-        padding: 0;
-    }
-    tr.order-row td {
-        border-bottom: 1px dashed #eee;
-    }
-    tr.order-row td:last-child {
-        text-align: center;
-    }
-    tr.total-row {
-        font-weight: bold;
-    }
-    .bg-off-white {
-        background-color: #f5f5f5;
-    }
-    </style>
-</mj-raw>
-
-<mj-section css-class="bg-off-white">
-    <mj-column>
-        <mj-text>
-            Dear {{ order.customer.firstName }} {{ order.customer.lastName }},
-        </mj-text>
-        <mj-text>
-            Thank you for your order!
-        </mj-text>
-    </mj-column>
-</mj-section>
-
-
-<mj-section css-class="callout">
-    <mj-column>
-        <mj-text css-class="callout-large"><strong>Order Code</strong></mj-text>
-        <mj-text css-class="callout-small">{{ order.code }}</mj-text>
-    </mj-column>
-    <mj-column>
-        <mj-text css-class="callout-large"><strong>Order Date</strong></mj-text>
-        <mj-text css-class="callout-small">{{ formatDate order.orderPlacedAt }}</mj-text>
-    </mj-column>
-    <mj-column>
-        <mj-text css-class="callout-large"><strong>Total Price</strong></mj-text>
-        <mj-text css-class="callout-small">{{ formatMoney order.total order.currencyCode 'en' }}</mj-text>
-    </mj-column>
-</mj-section>
-
-
-<mj-section css-class="bg-off-white">
-    <mj-column>
-        <mj-text>
-            {{#with order.shippingAddress }}
-                <h3>Shipping To: {{ fullName }}</h3>
-                <ul class="address">
-                    {{#if company}}<li>{{ company }}</li>{{/if}}
-                    {{#if streetLine1}}<li>{{ streetLine1 }}</li>{{/if}}
-                    {{#if streetLine2}}<li>{{ streetLine2 }}</li>{{/if}}
-                    {{#if city}}<li>{{ city }}</li>{{/if}}
-                    {{#if province}}<li>{{ province }}</li>{{/if}}
-                    {{#if postalCode}}<li>{{ postalCode }}</li>{{/if}}
-                    {{#if country}}<li>{{ country }}</li>{{/if}}
-                    {{#if phoneNumber}}<li>{{ phoneNumber }}</li>{{/if}}
-                </ul>
-            {{/with}}
-        </mj-text>
-    </mj-column>
-</mj-section>
-
-<mj-section>
-    <mj-column>
-        <mj-text>
-            <h3>Order Summary:</h3>
-        </mj-text>
-        <mj-table cellpadding="6px">
-            {{#each order.lines }}
-                <tr class="order-row">
-                    <td>
-                        <img alt="{{ productVariant.name }}"
-                             style="width: 50px; height: 50px;"
-                             src="{{ featuredAsset.preview }}?w=50&h=50" />
-                    </td>
-                    <td>{{ quantity }} x {{ productVariant.name }}</td>
-                    <td>{{ productVariant.quantity }}</td>
-                    <td>{{ formatMoney discountedLinePriceWithTax ../order.currencyCode 'en' }}</td>
-                </tr>
-            {{/each}}
-            {{#each order.discounts }}
-                <tr class="order-row">
-                    <td colspan="3">
-                        {{ description }}
-                    </td>
-                    <td>{{ formatMoney amount ../order.currencyCode 'en' }}</td>
-                </tr>
-            {{/each}}
-            <tr class="order-row">
-                <td colspan="3">Sub-total:</td>
-                <td>{{ formatMoney order.subTotalWithTax order.currencyCode 'en' }}</td>
-            </tr>
-            {{#each shippingLines }}
-            <tr class="order-row">
-                <td colspan="3">Shipping ({{ shippingMethod.name }}):</td>
-                <td>{{ formatMoney priceWithTax ../order.currencyCode 'en' }}</td>
-            </tr>
-            {{/each}}
-            <tr class="order-row total-row">
-                <td colspan="3">Total:</td>
-                <td>{{ formatMoney order.totalWithTax order.currencyCode 'en' }}</td>
-            </tr>
-        </mj-table>
-    </mj-column>
-</mj-section>
-
-{{> footer }}
+{{> header title="Order Receipt" }}
+
+<mj-raw>
+    <style type="text/css">
+    .callout {
+        background-color: #375a67;
+        padding: 15px 0;
+    }
+    .callout-large > div {
+        text-align: center !important;
+        color: #fff !important;
+        font-size: 16px !important;
+        font-weight: bold;
+        padding: 0;
+    }
+    .callout-small > div {
+        text-align: center !important;
+        color: #fff !important;
+        font-size: 14px !important;
+        padding: 0;
+    }
+    ul.address {
+        list-style-type: none;
+        padding: 0;
+    }
+    tr.order-row td {
+        border-bottom: 1px dashed #eee;
+    }
+    tr.order-row td:last-child {
+        text-align: center;
+    }
+    tr.total-row {
+        font-weight: bold;
+    }
+    .bg-off-white {
+        background-color: #f5f5f5;
+    }
+    </style>
+</mj-raw>
+
+<mj-section css-class="bg-off-white">
+    <mj-column>
+        <mj-text>
+            Dear {{ order.customer.firstName }} {{ order.customer.lastName }},
+        </mj-text>
+        <mj-text>
+            Thank you for your order!
+        </mj-text>
+    </mj-column>
+</mj-section>
+
+
+<mj-section css-class="callout">
+    <mj-column>
+        <mj-text css-class="callout-large"><strong>Order Code</strong></mj-text>
+        <mj-text css-class="callout-small">{{ order.code }}</mj-text>
+    </mj-column>
+    <mj-column>
+        <mj-text css-class="callout-large"><strong>Order Date</strong></mj-text>
+        <mj-text css-class="callout-small">{{ formatDate order.orderPlacedAt }}</mj-text>
+    </mj-column>
+    <mj-column>
+        <mj-text css-class="callout-large"><strong>Total Price</strong></mj-text>
+        <mj-text css-class="callout-small">{{ formatMoney order.total order.currencyCode 'en' }}</mj-text>
+    </mj-column>
+</mj-section>
+
+
+<mj-section css-class="bg-off-white">
+    <mj-column>
+        <mj-text>
+            {{#with order.shippingAddress }}
+                <h3>Shipping To: {{ fullName }}</h3>
+                <ul class="address">
+                    {{#if company}}<li>{{ company }}</li>{{/if}}
+                    {{#if streetLine1}}<li>{{ streetLine1 }}</li>{{/if}}
+                    {{#if streetLine2}}<li>{{ streetLine2 }}</li>{{/if}}
+                    {{#if city}}<li>{{ city }}</li>{{/if}}
+                    {{#if province}}<li>{{ province }}</li>{{/if}}
+                    {{#if postalCode}}<li>{{ postalCode }}</li>{{/if}}
+                    {{#if country}}<li>{{ country }}</li>{{/if}}
+                    {{#if phoneNumber}}<li>{{ phoneNumber }}</li>{{/if}}
+                </ul>
+            {{/with}}
+        </mj-text>
+    </mj-column>
+</mj-section>
+
+<mj-section>
+    <mj-column>
+        <mj-text>
+            <h3>Order Summary:</h3>
+        </mj-text>
+        <mj-table cellpadding="6px">
+            {{#each order.lines }}
+                <tr class="order-row">
+                    <td>
+                        <img alt="{{ productVariant.name }}"
+                             style="width: 50px; height: 50px;"
+                             src="{{ featuredAsset.preview }}?w=50&h=50" />
+                    </td>
+                    <td>{{ quantity }} x {{ productVariant.name }}</td>
+                    <td>{{ productVariant.quantity }}</td>
+                    <td>{{ formatMoney discountedLinePriceWithTax ../order.currencyCode 'en' }}</td>
+                </tr>
+            {{/each}}
+            {{#each order.discounts }}
+                <tr class="order-row">
+                    <td colspan="3">
+                        {{ description }}
+                    </td>
+                    <td>{{ formatMoney amount ../order.currencyCode 'en' }}</td>
+                </tr>
+            {{/each}}
+            <tr class="order-row">
+                <td colspan="3">Sub-total:</td>
+                <td>{{ formatMoney order.subTotalWithTax order.currencyCode 'en' }}</td>
+            </tr>
+            {{#each shippingLines }}
+            <tr class="order-row">
+                <td colspan="3">Shipping ({{ shippingMethod.name }}):</td>
+                <td>{{ formatMoney priceWithTax ../order.currencyCode 'en' }}</td>
+            </tr>
+            {{/each}}
+            <tr class="order-row total-row">
+                <td colspan="3">Total:</td>
+                <td>{{ formatMoney order.totalWithTax order.currencyCode 'en' }}</td>
+            </tr>
+        </mj-table>
+    </mj-column>
+</mj-section>
+
+{{> footer }}

package/templates/partials/footer.hbs

@@ -1,10 +1,10 @@
-<!--suppress ALL -->
-<mj-section background-color="#375a67">
-    <mj-column width="100%">
-        <mj-text align="center" color="#eee">
-            <span>[footer text]</span>
-        </mj-text>
-    </mj-column>
-</mj-section>
-</mj-body>
-</mjml>
+<!--suppress ALL -->
+<mj-section background-color="#375a67">
+    <mj-column width="100%">
+        <mj-text align="center" color="#eee">
+            <span>[footer text]</span>
+        </mj-text>
+    </mj-column>
+</mj-section>
+</mj-body>
+</mjml>

package/templates/partials/header.hbs

@@ -1,18 +1,18 @@
-<mjml>
-    <mj-head>
-        <mj-title>{{ title }}</mj-title>
-        <mj-style inline="inline">
-            h3 {
-                font-size: 18px;
-                color: #555;
-                font-weight: normal;
-            }
-        </mj-style>
-    </mj-head>
-
-    <mj-body>
-        <mj-section background-color="#f0f0f0">
-            <mj-column>
-                <mj-text>[company header]</mj-text>
-            </mj-column>
-        </mj-section>
+<mjml>
+    <mj-head>
+        <mj-title>{{ title }}</mj-title>
+        <mj-style inline="inline">
+            h3 {
+                font-size: 18px;
+                color: #555;
+                font-weight: normal;
+            }
+        </mj-style>
+    </mj-head>
+
+    <mj-body>
+        <mj-section background-color="#f0f0f0">
+            <mj-column>
+                <mj-text>[company header]</mj-text>
+            </mj-column>
+        </mj-section>

package/templates/password-reset/body.hbs

@@ -1,24 +1,24 @@
-{{> header title="Forgotten password reset" }}
-
-<mj-section background-color="#fafafa">
-    <mj-column>
-        <mj-text color="#525252">
-            Someone requested a new password for your account.
-        </mj-text>
-
-        <mj-button font-family="Helvetica"
-                   background-color="#f45e43"
-                   color="white"
-                   href="{{ passwordResetUrl }}?token={{ passwordResetToken }}">
-            Reset password
-        </mj-button>
-
-        <mj-text color="#525252">
-        If you didn't make this request then you can safely ignore this email - nothing has been changed on your account.
-        </mj-text>
-
-    </mj-column>
-</mj-section>
-
-
-{{> footer }}
+{{> header title="Forgotten password reset" }}
+
+<mj-section background-color="#fafafa">
+    <mj-column>
+        <mj-text color="#525252">
+            Someone requested a new password for your account.
+        </mj-text>
+
+        <mj-button font-family="Helvetica"
+                   background-color="#f45e43"
+                   color="white"
+                   href="{{ passwordResetUrl }}?token={{ passwordResetToken }}">
+            Reset password
+        </mj-button>
+
+        <mj-text color="#525252">
+        If you didn't make this request then you can safely ignore this email - nothing has been changed on your account.
+        </mj-text>
+
+    </mj-column>
+</mj-section>
+
+
+{{> footer }}