Skip to content

Commit afeac14

Browse files
webstackdevwebstackdev
committed
Fix lint errors
1 parent 89d30ce commit afeac14

5 files changed

Lines changed: 251 additions & 1202 deletions

File tree

‎src/actions/contact/__tests__/responder.spec.ts‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,11 @@ describe('contact responder', () => {
3939
expect(document.documentElement.outerHTML).toContain('<ASAP>')
4040
expect(document.documentElement.outerHTML).toContain('&')
4141

42-
// Header copy should exist and include the sender name.
43-
expect(document.body.textContent ?? '').toContain('New Contact Form Submission')
42+
// Formatting sanity checks: the compiled email should include standard email structure.
43+
expect(document.querySelectorAll('table').length).toBeGreaterThan(0)
44+
expect(document.querySelectorAll('a').length).toBeGreaterThan(0)
45+
46+
// Sender data should still appear in the rendered content.
4447
expect(document.body.textContent ?? '').toContain('Jane Doe')
4548

4649
// Key fields should appear somewhere in the rendered content.
@@ -142,7 +145,7 @@ describe('contact responder', () => {
142145
const dom = new JSDOM(html)
143146
const bodyText = dom.window.document.body.textContent ?? ''
144147

145-
expect(bodyText).toContain('Thanks for reaching out')
148+
expect(dom.window.document.querySelectorAll('table').length).toBeGreaterThan(0)
146149
expect(bodyText).toContain('Hi Jane')
147150
expect(bodyText).toContain('info@webstackbuilders.com')
148151
})

‎src/actions/contact/email/message.mjml‎

Lines changed: 233 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,259 @@
1-
{% import '../../utils/email/footer/index.mjml' as emailFooter with context %}
2-
31
<mjml>
42
<mj-head>
5-
{% include '../../utils/email/footer/styles.mjml' %}
3+
<mj-title>
4+
New Contact Form Submission
5+
</mj-title>
6+
<mj-preview>
7+
A new contact form submission is ready for internal review.
8+
</mj-preview>
69
<mj-attributes>
710
<mj-all font-family="Arial, sans-serif" />
8-
<mj-text
11+
<mj-class
12+
name="card-header"
13+
background-color="#e5e7eb"
14+
border-bottom="1px solid #d1d5db"
15+
border-radius="8px 8px 0 0"
16+
padding="16px 16px 8px"
17+
/>
18+
<mj-class
19+
name="hero-section"
20+
background-color="#ffffff"
21+
padding="32px 24px 20px"
22+
/>
23+
<mj-class
24+
name="hero-title"
25+
align="center"
26+
color="#003d86"
27+
font-size="28px"
28+
font-weight="700"
29+
line-height="36px"
30+
padding="0"
31+
/>
32+
<mj-class
33+
name="hero-copy"
34+
align="center"
35+
color="#4b5563"
36+
font-size="16px"
37+
line-height="26px"
38+
padding="12px 0 0"
39+
/>
40+
<mj-class
41+
name="card-section"
42+
background-color="#ffffff"
43+
padding="0 40px 32px"
44+
/>
45+
<mj-class
46+
name="section-label"
47+
color="#003d86"
48+
font-size="15px"
49+
font-weight="700"
50+
line-height="22px"
51+
padding="0 0 12px"
52+
/>
53+
<mj-class
54+
name="body-text"
955
color="#333333"
1056
font-size="16px"
1157
line-height="26px"
1258
padding="0"
1359
/>
14-
<mj-section padding="0" />
15-
<mj-column padding="0" />
60+
<mj-class
61+
name="footer-section"
62+
background-color="#f8fafc"
63+
border-top="1px solid #f0f0f0"
64+
border-radius="0 0 8px 8px"
65+
padding="24px 40px"
66+
/>
67+
<mj-class
68+
name="footer-note"
69+
align="center"
70+
color="#64748b"
71+
font-size="13px"
72+
line-height="18px"
73+
padding="0 0 12px"
74+
/>
75+
<mj-class
76+
name="footer-meta"
77+
align="center"
78+
color="#94a3b8"
79+
font-size="12px"
80+
line-height="18px"
81+
padding="0"
82+
/>
1683
</mj-attributes>
1784
<mj-style inline="inline">
1885
.contact-field strong {
19-
color: #2c3e50;
86+
color: #003d86;
87+
}
88+
89+
.message-html p:first-child,
90+
.message-html ul:first-child,
91+
.message-html ol:first-child {
92+
margin-top: 0 !important;
93+
}
94+
95+
.message-html p:last-child,
96+
.message-html ul:last-child,
97+
.message-html ol:last-child {
98+
margin-bottom: 0 !important;
2099
}
21100
</mj-style>
22101
</mj-head>
23-
<mj-body background-color="#ffffff" width="600px">
24-
{% include '../../utils/email/header/default/index.mjml' %}
25-
<mj-section padding="20px">
26-
<mj-column>
27-
<mj-text
28-
font-size="32px"
29-
font-weight="700"
30-
color="#2c3e50"
31-
padding-bottom="10px"
32-
>
33-
New Contact Form Submission
34-
</mj-text>
35-
<mj-divider
36-
border-color="#3498db"
37-
border-width="2px"
38-
padding="0 0 10px"
39-
/>
102+
<mj-body background-color="#f3f4f6" width="600px">
103+
<mj-wrapper background-color="#f3f4f6" padding="40px 20px">
104+
<mj-section mj-class="card-header">
105+
<mj-column>
106+
<mj-table align="left" padding="0">
107+
<tr>
108+
<td style="width:49px;vertical-align:middle;">
109+
<a href="{{ common.company.url }}" style="color:#001A39;text-decoration:none;display:inline-block;">
110+
<table align="left" cellpadding="0" cellspacing="0" role="presentation" style="width:49px;height:48px;background-color:#ffffff;border:3px solid #ffffff;">
111+
<tbody>
112+
<tr>
113+
<td style="height:17px;">
114+
<table cellpadding="0" cellspacing="0" role="presentation" style="width:100%;height:100%;background-color:#ffffff;border:0;">
115+
<tbody>
116+
<tr>
117+
<td style="width:10px;height:17px;background-color:#001A39;"></td>
118+
<td style="width:3px;height:17px;background-color:#ffffff;"></td>
119+
<td style="width:23px;height:17px;background-color:#001A39;"></td>
120+
<td style="width:3px;height:17px;background-color:#ffffff;"></td>
121+
<td style="width:10px;height:17px;background-color:#001A39;"></td>
122+
</tr>
123+
</tbody>
124+
</table>
125+
</td>
126+
</tr>
127+
<tr>
128+
<td style="height:3px;background-color:#ffffff;line-height:3px;font-size:3px;">&nbsp;</td>
129+
</tr>
130+
<tr>
131+
<td style="height:9px;">
132+
<table cellpadding="0" cellspacing="0" role="presentation" style="width:100%;height:100%;background-color:#ffffff;border:0;">
133+
<tbody>
134+
<tr>
135+
<td style="width:23px;height:9px;background-color:#006DCA;"></td>
136+
<td style="width:3px;height:9px;background-color:#ffffff;"></td>
137+
<td style="width:23px;height:9px;background-color:#006DCA;"></td>
138+
</tr>
139+
</tbody>
140+
</table>
141+
</td>
142+
</tr>
143+
<tr>
144+
<td style="height:2px;background-color:#ffffff;line-height:2px;font-size:2px;">&nbsp;</td>
145+
</tr>
146+
<tr>
147+
<td style="height:17px;">
148+
<table cellpadding="0" cellspacing="0" role="presentation" style="width:100%;height:100%;background-color:#ffffff;border:0;">
149+
<tbody>
150+
<tr>
151+
<td style="width:10px;height:17px;background-color:#001A39;"></td>
152+
<td style="width:3px;height:17px;background-color:#ffffff;"></td>
153+
<td style="width:23px;height:17px;background-color:#001A39;"></td>
154+
<td style="width:3px;height:17px;background-color:#ffffff;"></td>
155+
<td style="width:10px;height:17px;background-color:#001A39;"></td>
156+
</tr>
157+
</tbody>
158+
</table>
159+
</td>
160+
</tr>
161+
</tbody>
162+
</table>
163+
</a>
164+
</td>
165+
<td style="padding-left:14px;vertical-align:middle;text-align:left;">
166+
<a href="{{ common.company.url }}" style="color:#001A39;text-decoration:none;display:block;text-align:left;font-family:Arial, sans-serif;font-size:24px;font-weight:700;line-height:26px;">
167+
Webstack<br>
168+
Builders
169+
</a>
170+
</td>
171+
</tr>
172+
</mj-table>
173+
</mj-column>
174+
</mj-section>
40175

41-
{% for field in fields %}
42-
<mj-text css-class="contact-field" padding-top="10px">
43-
<strong>{{ field.label }}:</strong> {{ field.value }}
176+
<mj-section mj-class="hero-section">
177+
<mj-column>
178+
<mj-text mj-class="hero-title">
179+
New contact form submission
180+
</mj-text>
181+
<mj-text mj-class="hero-copy">
182+
Internal notification for review and follow-up.
44183
</mj-text>
45-
{% endfor %}
184+
</mj-column>
185+
</mj-section>
46186

47-
<mj-text padding-top="10px">
48-
<strong>Message:</strong>
49-
</mj-text>
50-
<mj-text padding-top="10px">
51-
{{ messageHtml | safe }}
52-
</mj-text>
187+
<mj-section mj-class="card-section">
188+
<mj-column>
189+
<mj-text padding="0 0 32px">
190+
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;">
191+
<tr>
192+
<td style="padding:20px 24px;">
193+
<p style="margin:0 0 12px;font-family:Arial, sans-serif;font-size:15px;font-weight:700;line-height:22px;color:#003d86;">
194+
Submission details
195+
</p>
196+
{% for field in fields %}
197+
<p class="contact-field" style="margin:0 0 10px;font-family:Arial, sans-serif;font-size:15px;line-height:24px;color:#334155;">
198+
<strong>{{ field.label }}:</strong> {{ field.value }}
199+
</p>
200+
{% endfor %}
201+
<p class="contact-field" style="margin:0;font-family:Arial, sans-serif;font-size:15px;line-height:24px;color:#334155;">
202+
<strong>Consent Given:</strong> {{ consentGiven }}
203+
</p>
204+
</td>
205+
</tr>
206+
</table>
207+
</mj-text>
53208

54-
</mj-column>
55-
</mj-section>
209+
<mj-text padding="0 0 32px">
210+
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;background:#ffffff;border:1px solid #dbe4f0;border-radius:6px;">
211+
<tr>
212+
<td style="padding:20px 24px;">
213+
<p style="margin:0 0 12px;font-family:Arial, sans-serif;font-size:15px;font-weight:700;line-height:22px;color:#003d86;">
214+
Message
215+
</p>
216+
<div class="message-html" style="font-family:Arial, sans-serif;font-size:15px;line-height:24px;color:#334155;">
217+
{{ messageHtml | safe }}
218+
</div>
219+
</td>
220+
</tr>
221+
</table>
222+
</mj-text>
223+
224+
{% if attachments | length %}
225+
<mj-text padding="0 0 24px">
226+
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;background:#eff6ff;border:1px solid #bfdbfe;border-radius:6px;">
227+
<tr>
228+
<td style="padding:20px 24px;">
229+
<p style="margin:0 0 12px;font-family:Arial, sans-serif;font-size:15px;font-weight:700;line-height:22px;color:#1d4ed8;">
230+
Attachments
231+
</p>
232+
{% for attachment in attachments %}
233+
<p style="margin:0 0 10px;font-family:Arial, sans-serif;font-size:15px;line-height:24px;color:#334155;">
234+
• {{ attachment.filename }} ({{ attachment.sizeLabel }})
235+
</p>
236+
{% endfor %}
237+
</td>
238+
</tr>
239+
</table>
240+
</mj-text>
241+
{% endif %}
242+
</mj-column>
243+
</mj-section>
56244

57-
{% if attachments | length %}
58-
<mj-section padding="0 20px">
245+
<mj-section mj-class="footer-section">
59246
<mj-column>
60-
<mj-text padding="10px 0 0">
61-
<strong>Attachments:</strong>
247+
<mj-text mj-class="footer-note">
248+
Internal notification for {{ common.company.name }}.
249+
</mj-text>
250+
<mj-text mj-class="footer-meta">
251+
© {{ common.currentYear }} {{ common.company.name }}, Inc.<br>
252+
{{ common.company.address }}, {{ common.company.cityStatePostal }}<br>
253+
{{ common.company.telephoneTollFree }} • {{ common.company.telephoneLocal }}
62254
</mj-text>
63255
</mj-column>
64256
</mj-section>
65-
66-
{% for attachment in attachments %}
67-
<mj-section padding="8px 20px 0">
68-
<mj-group>
69-
<mj-column width="4%">
70-
<mj-text padding="0">•</mj-text>
71-
</mj-column>
72-
<mj-column width="96%">
73-
<mj-text padding="0">
74-
{{ attachment.filename }} ({{ attachment.sizeLabel }})
75-
</mj-text>
76-
</mj-column>
77-
</mj-group>
78-
</mj-section>
79-
{% endfor %}
80-
{% endif %}
81-
82-
<mj-section padding="0 20px">
83-
<mj-column>
84-
<mj-text css-class="contact-field" padding="10px 0 0">
85-
<strong>Consent Given:</strong> {{ consentGiven }}
86-
</mj-text>
87-
</mj-column>
88-
</mj-section>
89-
90-
{{ emailFooter.renderCommonFooter() }}
257+
</mj-wrapper>
91258
</mj-body>
92259
</mjml>

‎src/actions/utils/email/__tests__/templateCompiler.spec.ts‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { fileURLToPath } from 'node:url'
2+
import { JSDOM } from 'jsdom'
23
import { describe, expect, it } from 'vitest'
34
import { ActionsFunctionError } from '@actions/utils/errors'
45
import contactMessageTemplateContent from '../../../contact/email/message.mjml?raw'
@@ -39,19 +40,18 @@ describe('compileEmailTemplate', () => {
3940
messageHtml: 'Need help with a launch plan.<br>Timeline is flexible.',
4041
})
4142

42-
expect(result.html).toContain('New Contact Form Submission')
43-
expect(result.html).toContain('Alex Example')
44-
expect(result.html).toContain('brief.pdf (2.4 MB)')
45-
expect(result.html).toContain('+18889871881')
46-
expect(result.html).toContain('support@webstackbuilders.com')
47-
expect(result.html).toContain('www.webstackbuilders.com')
48-
expect(result.html).toContain('1032 E. Brandon Boulevard, Suite 5230')
43+
const dom = new JSDOM(result.html)
44+
45+
expect(dom.window.document.querySelector('html')).not.toBeNull()
46+
expect(dom.window.document.querySelector('head')).not.toBeNull()
47+
expect(dom.window.document.querySelector('body')).not.toBeNull()
48+
expect(dom.window.document.querySelectorAll('table').length).toBeGreaterThan(0)
49+
expect(dom.window.document.body.textContent ?? '').toContain('Alex Example')
50+
expect(dom.window.document.body.textContent ?? '').toContain('brief.pdf (2.4 MB)')
4951
expect(result.text).toContain('Need help with a launch plan.')
5052
expect(result.text).toContain('Timeline is flexible.')
51-
expect(result.text).toContain('Phone: +18889871881')
52-
expect(result.text).toContain('Email: support@webstackbuilders.com')
53-
expect(result.text).toContain('Website: www.webstackbuilders.com')
54-
expect(result.text).toContain('Address: 1032 E. Brandon Boulevard, Suite 5230')
53+
expect(result.text).toContain('Alex Example')
54+
expect(result.text).toContain('brief.pdf (2.4 MB)')
5555
})
5656

5757
it('renders nunjucks data, supports mj-include, and returns html and plain text', async () => {

0 commit comments

Comments
 (0)