From 537256116761d5a0e07e215e501817e20289edca Mon Sep 17 00:00:00 2001
From: Michael Bromley <michael@michaelbromley.co.uk>
Date: Mon, 1 Jun 2020 12:41:45 +0200
Subject: [PATCH] fix(email-plugin): Fix dev mailbox when trailing slash
 omitted

Fixes #355
---
 packages/email-plugin/dev-mailbox.html | 85 +++++++++++++-------------
 1 file changed, 44 insertions(+), 41 deletions(-)
diff --git a/packages/email-plugin/dev-mailbox.html b/packages/email-plugin/dev-mailbox.html
index e2485b597c..148e65a8e7 100644
--- a/packages/email-plugin/dev-mailbox.html
+++ b/packages/email-plugin/dev-mailbox.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" />
     <title>Vendure Development Inbox</title>
     <style>
         body {
@@ -37,7 +37,9 @@
             display: flex;
             justify-content: flex-end;
         }
-        input, select, button {
+        input,
+        select,
+        button {
             padding: 6px;
             border-radius: 3px;
             border: 1px solid #0b384b;
@@ -108,27 +110,28 @@
     <h1 class="heading">Vendure Dev Mailbox</h1>
     <div class="generate-controls">
         <select id="type-selector"></select>
-        <input id="language-code" value="en" type="text">
+        <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 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('./types')
-        .then(res => res.json())
-        .then(res => {
-            res.forEach(type => {
+    fetch(normalizePath('types'))
+        .then((res) => res.json())
+        .then((res) => {
+            res.forEach((type) => {
                 const option = document.createElement('option');
                 option.value = type;
                 option.text = type;
@@ -138,24 +141,24 @@ <h1 class="heading">Vendure Dev Mailbox</h1>
 
     const languageCodeInput = document.querySelector('#language-code');
     const generateTestButton = document.querySelector('#generate-test');
-    generateTestButton.addEventListener('click', e => {
-        fetch(`./generate/${typeSelect.value}/${languageCodeInput.value}`)
-            .then(() => new Promise(resolve => setTimeout(resolve, 500)))
+    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('./list')
-            .then(res => res.json())
-            .then(res => renderList(res));
+        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 rows = items.forEach((item) => {
             const row = document.createElement('div');
             row.classList.add('row');
             row.dataset.id = item.fileName;
@@ -168,9 +171,9 @@ <h1 class="heading">Vendure Dev Mailbox</h1>
 
             row.addEventListener('click', (e) => {
                 selectedId = item.fileName;
-                fetch('./item/' + item.fileName)
-                    .then(res => res.json())
-                    .then(res => renderEmail(res))
+                fetch(normalizePath('item/' + item.fileName))
+                    .then((res) => res.json())
+                    .then((res) => renderEmail(res))
                     .then(() => highlightSelectedRow());
             });
             list.appendChild(row);
@@ -179,7 +182,7 @@ <h1 class="heading">Vendure Dev Mailbox</h1>
     }
 
     function highlightSelectedRow() {
-        document.querySelectorAll('.list .row').forEach(row => {
+        document.querySelectorAll('.list .row').forEach((row) => {
             row.classList.remove('selected');
             if (row.dataset.id === selectedId) {
                 row.classList.add('selected');
@@ -189,24 +192,24 @@ <h1 class="heading">Vendure Dev Mailbox</h1>
 
     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>
-        `;
+    <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;
     }
