#13087

pending completion

Build # #13087

Build Type

push

circleci

Committed by

web-flow

Commit Message

Merge pull request #2960 from mozilla/MNTOR-1496-Fix-report-email-breach-icons

Use cached logos and fallback icons for breach email

Run Details

282 of 1603 branches covered (17.59%)

Branch coverage included in aggregate %.

12 of 12 new or added lines in 5 files covered. (100.0%)

959 of 4331 relevant lines covered (22.14%)

1.85 hits per line

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

0.0

/src/views/emails/email-signup-report.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 { breachCardPartial } from './email-breach-card.js'
import { getMessage } from '../../utils/fluent.js'

const emailStyle = `
  color: black;
  background: #f9f9fa;
  padding: 36px 0 24px;
`

const breachSummaryTableStyle = `
  margin: auto;
  max-width: 600px;
`

const breachSummaryCardStyle = `
  background: #eeeeee;
  border-radius: 6px;
  margin: 12px auto;
  padding: 12px;
  table-layout: auto;
  width: 100%;
`

const statNumberStyle = `
  font-size: 48px;
  font-weight: bold;
  width: 72px;
`

const statTitleStyle = `
  text-align: left;
`

const ctaStyle = `
  background-color: #0060DF;
  border-radius: 4px;
  color: white;
  display: inline-block;
  margin: 24px 0;
  padding: 12px 24px;
`

const signupReportEmailPartial = data => {
  const {
    breachedEmail,
    breachLogos,
    emailBreachStats,
    unsafeBreachesForEmail
  } = data

  return `
    <tr>
      <td style='${emailStyle}'>
        <p>
          ${
            unsafeBreachesForEmail?.length
              ? getMessage('email-breach-detected', {
                  'email-address': `<strong>${breachedEmail}</strong>`
                })
              : getMessage('fxm-warns-you-no-breaches')
          }
        </p>
        ${
          emailBreachStats?.length
            ? `
                <table style='${breachSummaryTableStyle}'>
                  <tr>
                    <td>
                      ${emailBreachStats.map(breachStat => `
                        <table style='${breachSummaryCardStyle}'>
                          <tr>
                            <td style='${statNumberStyle}'>
                              ${breachStat.statNumber}
                            </td>
                            <td style=${statTitleStyle}>
                              ${breachStat.statTitle}
                            </td>
                          </tr>
                        </table>
                      `).join('')}
                    </td>
                  </tr>
                </table>
              `
            : ''
        }
        ${
          unsafeBreachesForEmail?.length
            ? unsafeBreachesForEmail.map(unsafeBreach => (
                breachCardPartial(unsafeBreach, breachLogos)
              )).join('')
            : ''
        }
        <a
          href='${data.ctaHref}'
          style='${ctaStyle}'
        >
          ${getMessage('email-dashboard-cta')}
        </a>
      </td>
    </tr>
  `
}

export { signupReportEmailPartial }

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 { breachCardPartial } from './email-breach-card.js'
6	import { getMessage } from '../../utils/fluent.js'
7
8	const emailStyle = `	×
9	color: black;
10	background: #f9f9fa;
11	padding: 36px 0 24px;
12	`
13
14	const breachSummaryTableStyle = `	×
15	margin: auto;
16	max-width: 600px;
17	`
18
19	const breachSummaryCardStyle = `	×
20	background: #eeeeee;
21	border-radius: 6px;
22	margin: 12px auto;
23	padding: 12px;
24	table-layout: auto;
25	width: 100%;
26	`
27
28	const statNumberStyle = `	×
29	font-size: 48px;
30	font-weight: bold;
31	width: 72px;
32	`
33
34	const statTitleStyle = `	×
35	text-align: left;
36	`
37
38	const ctaStyle = `	×
39	background-color: #0060DF;
40	border-radius: 4px;
41	color: white;
42	display: inline-block;
43	margin: 24px 0;
44	padding: 12px 24px;
45	`
46
47	const signupReportEmailPartial = data => {	×
48	const {
49	breachedEmail,
50	breachLogos,
51	emailBreachStats,
52	unsafeBreachesForEmail
53	} = data	×
54
55	return `	×
56	<tr>
57	<td style='${emailStyle}'>
58	<p>
59	${
60	unsafeBreachesForEmail?.length	×
61	? getMessage('email-breach-detected', {
62	'email-address': `<strong>${breachedEmail}</strong>`
63	})
64	: getMessage('fxm-warns-you-no-breaches')
65	}
66	</p>
67	${
68	emailBreachStats?.length	×
69	? `
70	<table style='${breachSummaryTableStyle}'>
71	<tr>
72	<td>
73	${emailBreachStats.map(breachStat => `	×
74	<table style='${breachSummaryCardStyle}'>
75	<tr>
76	<td style='${statNumberStyle}'>
77	${breachStat.statNumber}
78	</td>
79	<td style=${statTitleStyle}>
80	${breachStat.statTitle}
81	</td>
82	</tr>
83	</table>
84	`).join('')}
85	</td>
86	</tr>
87	</table>
88	`
89	: ''
90	}
91	${
92	unsafeBreachesForEmail?.length	×
93	? unsafeBreachesForEmail.map(unsafeBreach => (
94	breachCardPartial(unsafeBreach, breachLogos)	×
95	)).join('')
96	: ''
97	}
98	<a
99	href='${data.ctaHref}'
100	style='${ctaStyle}'
101	>
102	${getMessage('email-dashboard-cta')}
103	</a>
104	</td>
105	</tr>
106	`
107	}
108
109	export { signupReportEmailPartial }

mozilla / blurts-server / #13087

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