f3f44638-1a2f-4ab0-962d-3f21eca73642

Build # f3f44638-1a2f-4ab0-962d-3f21eca73642

Build Type

push

circleci

Committed by GitHub

Commit Message

MNTOR-1004 backend work for v2 settings (#2773)

Run Details

282 of 1245 branches covered (22.65%)

Branch coverage included in aggregate %.

77 of 77 new or added lines in 4 files covered. (100.0%)

959 of 3372 relevant lines covered (28.44%)

4.62 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/src/views/email-2022.js

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

import { getMessage } from '../utils/fluent.js'

const companyAddress = '2 Harrison St. #175, San Francisco, California 94105 USA'
const links = (data) => ({
  faq: 'https://support.mozilla.org/kb/firefox-monitor-faq',
  hibp: 'https://haveibeenpwned.com/',
  legal: `https://www.mozilla.org/about/legal?utm_source=fx-monitor&utm_medium=email&utm_campaign=${data.utmCampaign}&utm_content=email-footer-link`,
  termsAndPrivacy: `https://www.mozilla.org/privacy/firefox-monitor?utm_source=fx-monitor&utm_medium=email&utm_campaign=${data.utmCampaign}&utm_content=email-footer-link`
})

const images = {
  header: 'images/person-at-desk.webp',
  footer: 'images/mozilla-logo-bw.webp',
  logoDark: 'images/monitor-logo-transparent-dark-mode.webp',
  logoLight: 'images/monitor-logo-bg-light.webp'
}

const bodyStyle = `
  color: black;
  font: normal 16px/1.2 sans-serif;
`

const tableStyle = `
  margin: auto;
  max-width: 1080px;
  text-align: center;
  width: 100%;
`

const headeLogoStyle = `
  background-size: 240px 50px;
  background: #f9f9fa url('${images.logoLight}')
  height: 100px;
  no-repeat 50%;
`

const headeTableStyle = `
  background-color: #321c64;
  color: white;
  height: 331px;
  text-align: left;
  width: 100%;
`

const headerImageContainerStyle = `
  vertical-align: bottom;
  width: 50%;
`

const headerImageStyle = `
  display: block;
  margin-left: auto;
  max-width: 100%;
  object-fit: cover;
  object-position: left;
`

const footerContainerStyle = `
  background: #f9f9fa;
  border-top: 1px solid #dddddd;
  padding: 24px 0;
`

const footerImageStyle = `
  display: block;
  margin: 24px auto 0;
`

const emailHeader = (data) => `
  <tr class='logo'>
    <td
      height='100'
      style='${headeLogoStyle}'
    ></td>
  </tr>
  <tr class='header'>
    <td>
      <table
        border='0'
        cellpadding='0'
        cellspacing='0'
        role='presentation'
        style='${headeTableStyle}'
      >
        <tr>
          <td>
            <h1>
              ${getMessage(data.heading)}
            </h1>
            <p>
              ${getMessage(data.subhead)}
            </p>
          </td>
          <td
            background-color: #321c64;
            class='header-image'
            style='${headerImageContainerStyle}'
          >
            <img
              alt=''
              height='331'
              src='${images.header}'
              style='${headerImageStyle}'
              width='476'
            >
          </td>
        </tr>
      </table>
    </td>
  </tr>
`

const emailFooter = (data) => `
  <tr class='footer'>
    <td style='${footerContainerStyle}'>
      <p>
        ${getEmailFooterCopy(data)}
      </p>
      <p>
        ${getMessage('email-2022-hibp-attribution', {
          'hibp-link-attr': `href='${links(data).hibp}' rel='noopener'`
        })}
      </p>
      <img
        alt='${getMessage('mozilla')}'
        src='${images.footer}'
        style='${footerImageStyle}'
        width='130px'
      >
      <p>
        ${companyAddress}
      </p>
      <p>
        <a href='${links(data).legal}'>
          ${getMessage('legal')}
        </a>
        ${' • '}
        <a href='${links(data).termsAndPrivacy}'>
          ${getMessage('terms-and-privacy')}
        </a>
      </p>
    </td>
  </tr>
`

function getEmailFooterCopy (data) {
  const unsubLink = `
    <a href='${data.unsubscribeUrl}'>
      ${getMessage('email-unsub-link')}
    </a>
  `
  const faqLink = `
    <a href='${links(data).faq}'>${getMessage('frequently-asked-questions')}</a>
  `

  return getMessage('email-footer-blurb', {
    unsubLink,
    faqLink
  })
}

const getTemplate = (data, partial) => `
  <!doctype html>
  <html>
    <head>
      <meta name='viewport' content='width=device-width, initial-scale=1.0' />
      <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />

      <title>
        ${getMessage('brand-fx-monitor')}
      </title>

      <style>
        * {
          margin: 0;
          padding: 0;
        }

        body {
          color: black;
          font: normal 16px/1.2 sans-serif;
        }

        h1,
        p {
          margin: 12px auto;
          max-width: 600px;
          padding: 0 24px;
        }

        a {
          color: #592acb;
          text-decoration: none;
        }

        table {
          table-layout: fixed;
        }

        @media screen and (max-width:600px) {
          .header-image {
            display: none;
          }
        }

        @media (prefers-color-scheme: dark) {
          .logo > td {
            background-image: url('${images.logoDark}')
          }
        }
      </style>
    </head>

    <body style='${bodyStyle}'>
      <table
        border='0'
        cellpadding='0'
        cellspacing='0'
        role='presentation'
        style='${tableStyle}'
      >
        ${emailHeader({
          heading: 'email-verify-heading',
          subhead: 'email-verify-subhead'
        })}
        ${partial}
        ${emailFooter(data)}
      </table>
    </body>
  </html>
`

export { getTemplate }

1	/* This Source Code Form is subject to the terms of the Mozilla Public
2	* License, v. 2.0. If a copy of the MPL was not distributed with this
3	* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
4
5	import { getMessage } from '../utils/fluent.js'
6
7	const companyAddress = '2 Harrison St. #175, San Francisco, California 94105 USA'	×
8	const links = (data) => ({	×
9	faq: 'https://support.mozilla.org/kb/firefox-monitor-faq',
10	hibp: 'https://haveibeenpwned.com/',
11	legal: `https://www.mozilla.org/about/legal?utm_source=fx-monitor&utm_medium=email&utm_campaign=${data.utmCampaign}&utm_content=email-footer-link`,
12	termsAndPrivacy: `https://www.mozilla.org/privacy/firefox-monitor?utm_source=fx-monitor&utm_medium=email&utm_campaign=${data.utmCampaign}&utm_content=email-footer-link`
13	})
14
15	const images = {	×
16	header: 'images/person-at-desk.webp',
17	footer: 'images/mozilla-logo-bw.webp',
18	logoDark: 'images/monitor-logo-transparent-dark-mode.webp',
19	logoLight: 'images/monitor-logo-bg-light.webp'
20	}
21
22	const bodyStyle = `	×
23	color: black;
24	font: normal 16px/1.2 sans-serif;
25	`
26
27	const tableStyle = `	×
28	margin: auto;
29	max-width: 1080px;
30	text-align: center;
31	width: 100%;
32	`
33
34	const headeLogoStyle = `	×
35	background-size: 240px 50px;
36	background: #f9f9fa url('${images.logoLight}')
37	height: 100px;
38	no-repeat 50%;
39	`
40
41	const headeTableStyle = `	×
42	background-color: #321c64;
43	color: white;
44	height: 331px;
45	text-align: left;
46	width: 100%;
47	`
48
49	const headerImageContainerStyle = `	×
50	vertical-align: bottom;
51	width: 50%;
52	`
53
54	const headerImageStyle = `	×
55	display: block;
56	margin-left: auto;
57	max-width: 100%;
58	object-fit: cover;
59	object-position: left;
60	`
61
62	const footerContainerStyle = `	×
63	background: #f9f9fa;
64	border-top: 1px solid #dddddd;
65	padding: 24px 0;
66	`
67
68	const footerImageStyle = `	×
69	display: block;
70	margin: 24px auto 0;
71	`
72
73	const emailHeader = (data) => `	×
74	<tr class='logo'>
75	<td
76	height='100'
77	style='${headeLogoStyle}'
78	></td>
79	</tr>
80	<tr class='header'>
81	<td>
82	<table
83	border='0'
84	cellpadding='0'
85	cellspacing='0'
86	role='presentation'
87	style='${headeTableStyle}'
88	>
89	<tr>
90	<td>
91	<h1>
92	${getMessage(data.heading)}
93	</h1>
94	<p>
95	${getMessage(data.subhead)}
96	</p>
97	</td>
98	<td
99	background-color: #321c64;
100	class='header-image'
101	style='${headerImageContainerStyle}'
102	>
103	<img
104	alt=''
105	height='331'
106	src='${images.header}'
107	style='${headerImageStyle}'
108	width='476'
109	>
110	</td>
111	</tr>
112	</table>
113	</td>
114	</tr>
115	`
116
117	const emailFooter = (data) => `	×
118	<tr class='footer'>
119	<td style='${footerContainerStyle}'>
120	<p>
121	${getEmailFooterCopy(data)}
122	</p>
123	<p>
124	${getMessage('email-2022-hibp-attribution', {
125	'hibp-link-attr': `href='${links(data).hibp}' rel='noopener'`
126	})}
127	</p>
128	<img
129	alt='${getMessage('mozilla')}'
130	src='${images.footer}'
131	style='${footerImageStyle}'
132	width='130px'
133	>
134	<p>
135	${companyAddress}
136	</p>
137	<p>
138	<a href='${links(data).legal}'>
139	${getMessage('legal')}
140	</a>
141	${' • '}
142	<a href='${links(data).termsAndPrivacy}'>
143	${getMessage('terms-and-privacy')}
144	</a>
145	</p>
146	</td>
147	</tr>
148	`
149
150	function getEmailFooterCopy (data) {
151	const unsubLink = `	×
152	<a href='${data.unsubscribeUrl}'>
153	${getMessage('email-unsub-link')}
154	</a>
155	`
156	const faqLink = `	×
157	<a href='${links(data).faq}'>${getMessage('frequently-asked-questions')}</a>
158	`
159
160	return getMessage('email-footer-blurb', {	×
161	unsubLink,
162	faqLink
163	})
164	}
165
166	const getTemplate = (data, partial) => `	×
167	<!doctype html>
168	<html>
169	<head>
170	<meta name='viewport' content='width=device-width, initial-scale=1.0' />
171	<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
172
173	<title>
174	${getMessage('brand-fx-monitor')}
175	</title>
176
177	<style>
178	* {
179	margin: 0;
180	padding: 0;
181	}
182
183	body {
184	color: black;
185	font: normal 16px/1.2 sans-serif;
186	}
187
188	h1,
189	p {
190	margin: 12px auto;
191	max-width: 600px;
192	padding: 0 24px;
193	}
194
195	a {
196	color: #592acb;
197	text-decoration: none;
198	}
199
200	table {
201	table-layout: fixed;
202	}
203
204	@media screen and (max-width:600px) {
205	.header-image {
206	display: none;
207	}
208	}
209
210	@media (prefers-color-scheme: dark) {
211	.logo > td {
212	background-image: url('${images.logoDark}')
213	}
214	}
215	</style>
216	</head>
217
218	<body style='${bodyStyle}'>
219	<table
220	border='0'
221	cellpadding='0'
222	cellspacing='0'
223	role='presentation'
224	style='${tableStyle}'
225	>
226	${emailHeader({
227	heading: 'email-verify-heading',
228	subhead: 'email-verify-subhead'
229	})}
230	${partial}
231	${emailFooter(data)}
232	</table>
233	</body>
234	</html>
235	`
236
237	export { getTemplate }

mozilla / blurts-server / f3f44638-1a2f-4ab0-962d-3f21eca73642

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous