Skip to content

Commit cf3cf9d

Browse files
butschsterbutschster
authored
Merge pull request #69 from buggregator/hotfix/67
Fixes problem when render non-HTML emails
2 parents ff53578 + 1bc6179 commit cf3cf9d

File tree

4 files changed

+94
-24
lines changed

4 files changed

+94
-24
lines changed

‎assets/vue3-tabs-component.scss‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,8 @@
2424

2525
.tabs-component-panel {
2626

27-
}
27+
}
28+
29+
.preview-tab-badge {
30+
@apply bg-red-800 ml-2 text-2xs px-2 py-1 rounded text-white uppercase;
31+
}

‎components/SmtpPage/SmtpPage.stories.ts‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { Meta, Story } from "@storybook/vue3";
22
import { normalizeSMTPEvent } from "~/utils/normalize-event";
3-
import smtpEventMock from '~/mocks/smtp-welcome.json'
3+
import smtpEventWelcomeMock from '~/mocks/smtp-welcome.json'
4+
import smtpEventOrderMock from '~/mocks/smtp-order.json'
5+
import smtpEventTextMock from '~/mocks/smtp-text.json'
46
import SmtpPage from "~/components/SmtpPage/SmtpPage.vue";
57

68
export default {
@@ -18,11 +20,24 @@ const Template: Story = (args) => ({
1820
template: `<SmtpPage v-bind="args" />`,
1921
});
2022

23+
const normalizeEventWelcome = normalizeSMTPEvent(smtpEventWelcomeMock)
24+
const normalizeEventOrder = normalizeSMTPEvent(smtpEventOrderMock)
25+
const normalizeEventText = normalizeSMTPEvent(smtpEventTextMock)
26+
2127
export const Default = Template.bind({});
28+
Default.args = {
29+
event: normalizeEventWelcome,
30+
htmlSource: normalizeEventWelcome.payload.html
31+
};
2232

23-
const normalizeEvent = normalizeSMTPEvent(smtpEventMock)
33+
export const Order = Template.bind({});
34+
Order.args = {
35+
event: normalizeEventOrder,
36+
htmlSource: normalizeEventOrder.payload.html
37+
};
2438

25-
Default.args = {
26-
event: normalizeEvent,
27-
htmlSource: normalizeEvent.payload.html
39+
export const Text = Template.bind({});
40+
Text.args = {
41+
event: normalizeEventText,
42+
htmlSource: normalizeEventText.payload.html
2843
};

‎components/SmtpPage/SmtpPage.vue‎

Lines changed: 32 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -31,18 +31,37 @@
3131

3232
<section class="smtp-page__body">
3333
<Tabs :options="{ useUrlFragment: false }">
34-
<Tab name="Preview">
34+
<Tab id="html-preview" name="Preview" suffix="<span class='preview-tab-badge'>HTML</span>" v-if="isHtml">
3535
<SmtpPagePreview device="tablet">
3636
<div v-html="htmlSource" />
3737
</SmtpPagePreview>
3838
</Tab>
39-
<Tab name="HTML">
39+
<Tab name="HTML" v-if="isHtml">
4040
<CodeSnippet
4141
language="html"
4242
class="max-w-full"
4343
:code="event.payload.html"
4444
/>
4545
</Tab>
46+
<Tab name="Text" v-if="isText">
47+
<CodeSnippet
48+
language="html"
49+
class="max-w-full"
50+
:code="event.payload.text"
51+
/>
52+
</Tab>
53+
<Tab name="Attachments" :suffix="`<span class='preview-tab-badge'>${attachments.length}</span>`" v-if="attachments.length">
54+
<section class="mb-5">
55+
<div class="flex gap-x-3">
56+
<SmtpAttachment
57+
v-for="a in attachments"
58+
:key="a.id"
59+
:event="event"
60+
:attachment="a"
61+
/>
62+
</div>
63+
</section>
64+
</Tab>
4665
<Tab name="Raw">
4766
<CodeSnippet language="html" :code="event.payload.raw" />
4867
</Tab>
@@ -76,21 +95,6 @@
7695
</EventTableRow>
7796
</EventTable>
7897
</section>
79-
80-
<section v-if="attachments.length">
81-
<h3 class="mt-3 mb-3 font-bold">
82-
Attachments ({{ attachments.length }})
83-
</h3>
84-
85-
<div class="flex gap-x-3">
86-
<SmtpAttachment
87-
v-for="a in attachments"
88-
:key="a.id"
89-
:event="event"
90-
:attachment="a"
91-
/>
92-
</div>
93-
</section>
9498
</Tab>
9599
</Tabs>
96100
</section>
@@ -128,7 +132,11 @@ export default defineComponent({
128132
},
129133
htmlSource: {
130134
type: String,
131-
required: true,
135+
required: false,
136+
},
137+
textSource: {
138+
type: String,
139+
required: false,
132140
},
133141
},
134142
data() {
@@ -158,6 +166,12 @@ export default defineComponent({
158166
};
159167
},
160168
computed: {
169+
isHtml(): boolean {
170+
return this.event.payload.html !== null && this.event.payload.html !== "";
171+
},
172+
isText(): boolean {
173+
return this.event.payload.text !== null && this.event.payload.text !== "";
174+
},
161175
mail() {
162176
return this.event.payload;
163177
},

‎mocks/smtp-text.json‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"uuid":"a68e1262-39d4-4ecc-bdc1-ef5298f312a7",
3+
"type":"smtp",
4+
"payload":{
5+
"id":"[email protected]",
6+
"from":[
7+
{
8+
"email":"[email protected]",
9+
"name":"Site"
10+
}
11+
],
12+
"reply_to":[
13+
14+
],
15+
"subject":"Reset YourPassword",
16+
"to":[
17+
{
18+
"name":"",
19+
"email":"[email protected]"
20+
}
21+
],
22+
"cc":[
23+
24+
],
25+
"bcc":[
26+
27+
],
28+
"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",
29+
"html":"",
30+
"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",
31+
"attachments":[
32+
33+
]
34+
},
35+
"timestamp":1700142445,
36+
"project_id":null
37+
}

0 commit comments

Comments
 (0)