Merge pull request #69 from buggregator/hotfix/67

Fixes problem when render non-HTML emails

assets/vue3-tabs-component.scss

@@ -24,4 +24,8 @@
 
 .tabs-component-panel {
 
-}
+}
+
+.preview-tab-badge {
+  @apply bg-red-800 ml-2 text-2xs px-2 py-1 rounded text-white uppercase;
+}

components/SmtpPage/SmtpPage.stories.ts

@@ -1,6 +1,8 @@
 import { Meta, Story } from "@storybook/vue3";
 import { normalizeSMTPEvent } from "~/utils/normalize-event";
-import smtpEventMock from '~/mocks/smtp-welcome.json'
+import smtpEventWelcomeMock from '~/mocks/smtp-welcome.json'
+import smtpEventOrderMock from '~/mocks/smtp-order.json'
+import smtpEventTextMock from '~/mocks/smtp-text.json'
 import SmtpPage from "~/components/SmtpPage/SmtpPage.vue";
 
 export default {
@@ -18,11 +20,24 @@ const Template: Story = (args) => ({
   template: `<SmtpPage v-bind="args" />`,
 });
 
+const normalizeEventWelcome = normalizeSMTPEvent(smtpEventWelcomeMock)
+const normalizeEventOrder = normalizeSMTPEvent(smtpEventOrderMock)
+const normalizeEventText = normalizeSMTPEvent(smtpEventTextMock)
+
 export const Default = Template.bind({});
+Default.args = {
+  event: normalizeEventWelcome,
+  htmlSource: normalizeEventWelcome.payload.html
+};
 
-const normalizeEvent = normalizeSMTPEvent(smtpEventMock)
+export const Order = Template.bind({});
+Order.args = {
+  event: normalizeEventOrder,
+  htmlSource: normalizeEventOrder.payload.html
+};
 
-Default.args = {
-  event: normalizeEvent,
-  htmlSource: normalizeEvent.payload.html
+export const Text = Template.bind({});
+Text.args = {
+  event: normalizeEventText,
+  htmlSource: normalizeEventText.payload.html
 };

components/SmtpPage/SmtpPage.vue

@@ -31,18 +31,37 @@
 
       <section class="smtp-page__body">
         <Tabs :options="{ useUrlFragment: false }">
-          <Tab name="Preview">
+          <Tab id="html-preview" name="Preview" suffix="<span class='preview-tab-badge'>HTML</span>" v-if="isHtml">
             <SmtpPagePreview device="tablet">
               <div v-html="htmlSource" />
             </SmtpPagePreview>
           </Tab>
-          <Tab name="HTML">
+          <Tab name="HTML" v-if="isHtml">
             <CodeSnippet
               language="html"
               class="max-w-full"
               :code="event.payload.html"
             />
           </Tab>
+          <Tab name="Text" v-if="isText">
+            <CodeSnippet
+              language="html"
+              class="max-w-full"
+              :code="event.payload.text"
+            />
+          </Tab>
+          <Tab name="Attachments" :suffix="`<span class='preview-tab-badge'>${attachments.length}</span>`" v-if="attachments.length">
+            <section class="mb-5">
+              <div class="flex gap-x-3">
+                <SmtpAttachment
+                  v-for="a in attachments"
+                  :key="a.id"
+                  :event="event"
+                  :attachment="a"
+                />
+              </div>
+            </section>
+          </Tab>
           <Tab name="Raw">
             <CodeSnippet language="html" :code="event.payload.raw" />
           </Tab>
@@ -76,21 +95,6 @@
                 </EventTableRow>
               </EventTable>
             </section>
-
-            <section v-if="attachments.length">
-              <h3 class="mt-3 mb-3 font-bold">
-                Attachments ({{ attachments.length }})
-              </h3>
-
-              <div class="flex gap-x-3">
-                <SmtpAttachment
-                  v-for="a in attachments"
-                  :key="a.id"
-                  :event="event"
-                  :attachment="a"
-                />
-              </div>
-            </section>
           </Tab>
         </Tabs>
       </section>
@@ -128,7 +132,11 @@ export default defineComponent({
     },
     htmlSource: {
       type: String,
-      required: true,
+      required: false,
+    },
+    textSource: {
+      type: String,
+      required: false,
     },
   },
   data() {
@@ -158,6 +166,12 @@ export default defineComponent({
     };
   },
   computed: {
+    isHtml(): boolean {
+      return this.event.payload.html !== null && this.event.payload.html !== "";
+    },
+    isText(): boolean {
+      return this.event.payload.text !== null && this.event.payload.text !== "";
+    },
     mail() {
       return this.event.payload;
     },

mocks/smtp-text.json

@@ -0,0 +1,37 @@
+{
+  "uuid":"a68e1262-39d4-4ecc-bdc1-ef5298f312a7",
+  "type":"smtp",
+  "payload":{
+    "id":"[email protected]",
+    "from":[
+      {
+        "email":"[email protected]",
+        "name":"Site"
+      }
+    ],
+    "reply_to":[
+
+    ],
+    "subject":"Reset YourPassword",
+    "to":[
+      {
+        "name":"",
+        "email":"[email protected]"
+      }
+    ],
+    "cc":[
+
+    ],
+    "bcc":[
+
+    ],
+    "text":"<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <style>\r\n        body {\r\n            font-family: Arial, sans-serif;\r\n            padding: 20px;\r\n            background-color: #f6f6f6;\r\n            color: #333;\r\n        }\r\n\r\n        .container {\r\n            max-width: 600px;\r\n            margin: auto;\r\n            background-color: #ffffff;\r\n            padding: 20px;\r\n            border-radius: 5px;\r\n            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);\r\n        }\r\n\r\n        .btn {\r\n            display: inline-block;\r\n            padding: 12px 24px;\r\n            font-size: 16px;\r\n            font-weight: bold;\r\n            color: #fff;\r\n            background-color: #3498db;\r\n            border: none;\r\n            border-radius: 5px;\r\n            text-decoration: none;\r\n            text-align: center;\r\n        }\r\n    </style>\r\n</head>\r\n<body>\r\n<div class=\"container\">\r\n    <p>Hello Flavie Welch,</p>\r\n    <p>To complete the password reset process, visit the following link:</p>\r\n    <a href=\"http://localhost//password/reset?email=pm%site.com&expires=1700228845&signature=be270e0cca28cfe90ce7e11afa9dcece116610fdc64a1ece4d0cf2a79726189e\" class=\"btn\">Reset Password</a>\r\n    <p>If you didn’t request this, please ignore this email.</p>\r\n\r\n    <ul>\r\n        <li>Email: [email protected]</li>\r\n    </ul>\r\n    <p>Best Regards,</p>\r\n    <p>Site Team</p>\r\n</div>\r\n</body>\r\n</html>\r\n",
+    "html":"",
+    "raw":"To: [email protected]\r\nSubject: Reset Your Password\r\nFrom: Site <[email protected]>\r\nMessage-ID: <[email protected]>\r\nMIME-Version: 1.0\r\nDate: Thu, 16 Nov 2023 13:47:25 +0000\r\nContent-Type: text/plain; charset=utf-8\r\nContent-Transfer-Encoding: quoted-printable\r\n\r\n<!DOCTYPE html>\r\n<html lang=3D\"en\">\r\n<head>\r\n    <style>\r\n        body {\r\n            font-family: Arial, sans-serif;\r\n            padding: 20px;\r\n            background-color: #f6f6f6;\r\n            color: #333;\r\n        }\r\n\r\n        .container {\r\n            max-width: 600px;\r\n            margin: auto;\r\n            background-color: #ffffff;\r\n            padding: 20px;\r\n            border-radius: 5px;\r\n            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);\r\n        }\r\n\r\n        .btn {\r\n            display: inline-block;\r\n            padding: 12px 24px;\r\n            font-size: 16px;\r\n            font-weight: bold;\r\n            color: #fff;\r\n            background-color: #3498db;\r\n            border: none;\r\n            border-radius: 5px;\r\n            text-decoration: none;\r\n            text-align: center;\r\n        }\r\n    </style>\r\n</head>\r\n<body>\r\n<div class=3D\"container\">\r\n    <p>Hello Flavie Welch,</p>\r\n    <p>To complete the password reset process, visit the following link:</p=\r\n>\r\n    <a href=3D\"http://localhost//password/reset?email=3Dpm%site.com=\r\nm&expires=3D1700228845&signature=3Dbe270e0cca28cfe90ce7e11afa9dcece116610fd=\r\nc64a1ece4d0cf2a79726189e\" class=3D\"btn\">Reset Password</a>\r\n    <p>If you didn=E2=80=99t request this, please ignore this email.</p>\r\n\r\n    <ul>\r\n        <li>Email: [email protected]</li>\r\n    </ul>\r\n    <p>Best Regards,</p>\r\n    <p>Site Team</p>\r\n</div>\r\n</body>\r\n</html>\r\n",
+    "attachments":[
+
+    ]
+  },
+  "timestamp":1700142445,
+  "project_id":null
+}