From ad37df7a088e5909fea4984310b0e10fd21fcb4f Mon Sep 17 00:00:00 2001 From: Luna McNulty Date: Thu, 12 Dec 2024 16:32:06 -0500 Subject: [PATCH] Update email template for mailersend with clean HTML (#3218) * wip * wip * wip * Make test email script configurable * Add comment explaining how to run script on its own * Fix broken links * Update all templates --------- Co-authored-by: Cesar Varela --- .../emails/templates/EntityIncidentUpdated.ts | 317 +++++------------ .../server/emails/templates/IncidentUpdate.ts | 300 ++++------------- .../emails/templates/NewEntityIncident.ts | 318 +++++------------- .../server/emails/templates/NewIncident.ts | 316 +++++------------ .../templates/NewReportAddedToAnIncident.ts | 304 ++++------------- .../emails/templates/SubmissionApproved.ts | 294 ++++------------ .../server/emails/templates/shared.ts | 94 ++++++ site/gatsby-site/src/scripts/sendEmailTest.js | 37 ++ 8 files changed, 596 insertions(+), 1384 deletions(-) create mode 100644 site/gatsby-site/server/emails/templates/shared.ts create mode 100644 site/gatsby-site/src/scripts/sendEmailTest.js diff --git a/site/gatsby-site/server/emails/templates/EntityIncidentUpdated.ts b/site/gatsby-site/server/emails/templates/EntityIncidentUpdated.ts index 750a5f344f..9dd89ba5fa 100644 --- a/site/gatsby-site/server/emails/templates/EntityIncidentUpdated.ts +++ b/site/gatsby-site/server/emails/templates/EntityIncidentUpdated.ts @@ -1,233 +1,84 @@ -export default ` - - - - - - - - - - - - - - -
-
- - - - -
- - - - -
- - - - -
- - - - - -
- - - - - - - - - -
AI INCIDENT DATABASE
- - - - - -
Greetings {{email}},
-

- An incident involving {{entityName}} has just been updated within the AI Incident Database.
-

-
Incident Number: {{incidentId}}
-
Incident Title: {{incidentTitle}}
-
Incident Description: {{incidentDescription}}
-
Incident Date: {{incidentDate}}
-

-
Alleged: {{developers}} developed an AI system deployed by {{deployers}}, which harmed {{entitiesHarmed}}. Implicated AI system(s): {{implicatedSystems}}.
-

-
Sincerely,
-
Responsible AI Collaborative
- - - - - -
- - - - - - -
-
- - - - - -
- - -
-
- - - - - -
- -
-
-
-
-
- - `; \ No newline at end of file +import { + ignoreWhitespace, + insertContent, + bodyStyle, + wrapperStyle, + headerStyle, + headerTitleStyle, + mainActionLink, +} from './shared' + +const getEmailTemplate = () => { + + // Styles in this function should be unique to this template. + // They get inlined at the appropriate places + // (better supported across email clients than - - - - - - -
-
- - - - -
- - - - -
- - - - -
- - - - - -
- - - - - - - - - -
AI INCIDENT DATABASE
- - - - - -
Greetings {{email}},
-

- Incident {{incidentId}}: "{{incidentTitle}}" was updated.
-

- -

-
Sincerely,
-
Responsible AI Collaborative
- - - - - -
- - - - - - -
-
- - - - - -
- - -
-
- - - - - -
- -
-
-
-
-
- - `; \ No newline at end of file +import { + ignoreWhitespace, + insertContent, + bodyStyle, + wrapperStyle, + headerStyle, + headerTitleStyle, + mainActionLink, +} from './shared' + +const getEmailTemplate = () => { + + // Styles in this function should be unique to this template. + // They get inlined at the appropriate places + // (better supported across email clients than - - - - - - -
-
- - - - -
- - - - -
- - - - -
- - - - - -
- - - - - - - - - -
AI INCIDENT DATABASE
- - - - - -
Greetings {{email}},
-

-
A new incident has just been added to the AI Incident Database for an entity you monitor.
-
- Entity: {{entityName}}
- Incident Number: {{incidentId}}
- Incident Title: {{incidentTitle}}
- Incident Description: {{incidentDescription}}
- Incident Date: {{incidentDate}}
-

-
Alleged: {{developers}} developed an AI system deployed by {{deployers}}, which harmed {{entitiesHarmed}}. Implicated AI system(s): {{implicatedSystems}}.
-

-
Sincerely,
-
Responsible AI Collaborative
- - - - - -
- - - - - - -
-
- - - - - -
- - -
-
- - - - - -
- -
-
-
-
-
- - `; \ No newline at end of file +import { + ignoreWhitespace, + insertContent, + bodyStyle, + wrapperStyle, + headerStyle, + headerTitleStyle, + mainActionLink, +} from './shared' + +const getEmailTemplate = () => { + + // Styles in this function should be unique to this template. + // They get inlined at the appropriate places + // (better supported across email clients than - - - - - - -
-
- - - - -
- - - - -
- - - - -
- - - - - -
- - - - - - - - - -
AI INCIDENT DATABASE
- - - - - -
Greetings {{email}},
-

-
A new incident has just been added to the AI Incident Database.
-
- Incident Number: {{incidentId}}
- Incident Title: {{incidentTitle}}
- Incident Description: {{incidentDescription}}
- Incident Date: {{incidentDate}}
-

-
Alleged: {{developers}} developed an AI system deployed by {{deployers}}, which harmed {{entitiesHarmed}}. Implicated AI system(s): {{implicatedSystems}}.
-

-
Sincerely,
-
Responsible AI Collaborative
- - - - - -
- - - - - - -
-
- - - - - -
- - -
-
- - - - - -
- -
-
-
-
-
- - `; \ No newline at end of file +import { + ignoreWhitespace, + insertContent, + bodyStyle, + wrapperStyle, + headerStyle, + headerTitleStyle, + mainActionLink, +} from './shared' + +const getEmailTemplate = () => { + + // Styles in this function should be unique to this template. + // They get inlined at the appropriate places + // (better supported across email clients than - - - - - - -
-
- - - - -
- - - - -
- - - - -
- - - - - -
- - - - - - - - - -
AI INCIDENT DATABASE
- - - - - -
Greetings {{email}},
-

- Incident {{incidentId}}: "{{incidentTitle}}" was updated.
-

- -

- -

-
Sincerely,
-
Responsible AI Collaborative
- - - - - -
- - - - - - -
-
- - - - - -
- - -
-
- - - - - -
- -
-
-
-
-
- - `; \ No newline at end of file +import { + ignoreWhitespace, + insertContent, + bodyStyle, + wrapperStyle, + headerStyle, + headerTitleStyle, + mainActionLink, +} from './shared' + +const getEmailTemplate = () => { + + // Styles in this function should be unique to this template. + // They get inlined at the appropriate places + // (better supported across email clients than - - - - - - -
-
- - - - -
- - - - -
- - - - -
- - - - - -
- - - - - - - - - -
AI INCIDENT DATABASE
- - - - - -
Greetings,
-

-
Your submission to the AIID has been approved!
-
You can view the new incident: {{incidentTitle}}
-

-
Sincerely,
-
Responsible AI Collaborative
- - - - - -
- - - - - - -
-
- - - - - -
- - -
-
- -
-
-
-
-
- - `; \ No newline at end of file +import { + ignoreWhitespace, + insertContent, + bodyStyle, + wrapperStyle, + headerStyle, + headerTitleStyle, + mainActionLink, +} from './shared' + +const getEmailTemplate = () => { + + // Styles in this function should be unique to this template. + // They get inlined at the appropriate places + // (better supported across email clients than + + +
+
+ AIID +
+ AI INCIDENT DATABASE +
+
+
+ ${content} +
+
+ + + `.replace(/\n\t/g, '\n').trim(); +} + +// These styles will be used across multiple email templates, +// so they get defined outside the getTemplate function. +const bodyStyle: string = ignoreWhitespace(` + font-family: karla; + padding: 16px; +`); + +const wrapperStyle: string = ignoreWhitespace(` + max-width: 800px; + line-height: 1.5; + margin: auto; +`); + +const headerStyle: string = ignoreWhitespace(` + padding: 16px; + height: 100px; + text-align: center; + margin-bottom: 16px; +`); + +const headerTitleStyle: string = ignoreWhitespace(` + line-height: 70px; + vertical-align: top; + font-size: 125%; + font-weight: 400; +`); + +const mainActionLink: string = ignoreWhitespace(` + display: block; + margin: 16px; + padding: 32px; + text-align: center; + border-radius: 16px; + background-color: #1c57db; + color: white; + text-decoration: none; + font-size: 120%; +`); + +export { + ignoreWhitespace, + insertContent, + bodyStyle, + wrapperStyle, + headerStyle, + headerTitleStyle, + mainActionLink, +}; diff --git a/site/gatsby-site/src/scripts/sendEmailTest.js b/site/gatsby-site/src/scripts/sendEmailTest.js new file mode 100644 index 0000000000..73b7fecc29 --- /dev/null +++ b/site/gatsby-site/src/scripts/sendEmailTest.js @@ -0,0 +1,37 @@ +import { sendEmail } from '../../server/fields/common.ts'; + +// from site/gatsby-site, run with +// TEST_EMAIL_TO_ADDRESS=
dotenv run /npx ts-node src/scripts/sendEmailTest.js + +const email = process.env.TEST_EMAIL_TO_ADDRESS; + +if (!email) { + console.log('Must specify environment variable TEST_EMAIL_TO_ADDRESS'); +} else { + const sendEmailArguments = { + recipients: [{ email: email, userId: 'testId' }], + subject: 'New Incident', + dynamicData: { + incidentId: '741', + incidentTitle: "Robin Williams's Voice Deepfaked Without Consent", + incidentUrl: 'https://incidentdatabase.ai/cite/741', + incidentDescription: + "Zelda Williams, the daughter of the late Robin Williams, condemned the misuse of her father's voice in AI-generated productions, having cited some instances where his voice had been deepfaked, along with the potential for further misuse, as such instances do not involve consent.", + incidentDate: '2023-10-02', + developers: 'Unknown deepfake creators', + deployers: 'Unknown deepfake creators', + entitiesHarmed: 'Zelda Williams , Robin Williams and Family of Robin Williams', + entityUrl: 'https://incidentdatabase.ai/entities/unknown-deepfake-creators/', + entityName: 'Unknown deepfake creators', + }, + + // Possible values: + // 'NewReportAddedToAnIncident' 'NewIncident' 'EntityIncidentUpdated' + // 'NewEntityIncident' 'SubmissionApproved' 'IncidentUpdate' + templateId: process.env.TEST_EMAIL_TEMPLATE_ID || 'NewIncident', + }; + + console.log(JSON.stringify(sendEmailArguments, null, 2)); + + sendEmail(sendEmailArguments); +}