Feature Request: Email Template

Open ArakTaiRoth opened this issue 2 years ago • 1 comments

Info

Multiple teams have been requesting an email template that's managed by the Design System Team.

We may need to look into a CDN to host the CSS for this purpose, or use strictly inline CSS (which might be the only option for certain email clients).

We are waiting on receiving code for this template from Taryn as her team has already developed a template that we can leverage. Changes may need to be made to match our Figma version, and after testing.

Acceptance Criteria:

We have an email template
- It needs to be tested:
  - Outlook for Web
  - Outlook 365
  - Mozilla Thunderbird
  - Gmail (both web and mobile versions)
  - Windows Mail
  - Mac Mail
We have a page showcasing the email template (under Patterns and Layouts)
We may need a CDN to host the CSS

Figma design

Mar 27 '24 21:03 ArakTaiRoth

Email template being used by Taryn's team, might give us a starting place:

export const ENV_URL_PLACE_HOLDER = /\{ENV_URL\}/g;
export const ADMIN_SIGN_UP_EMAIL_TEMPLATE = `
<html>
<head>
  <link rel="stylesheet" href="https://{ENV_URL}/assets/abgov-design-tokens/tokens.css" />
  <style>
    body {
      margin: 0;
      font-family: var(--goa-font-family-sans);
    }
    a {
      color: var(--goa-color-interactive-default);
      text-decoration: none;
      cursor: pointer;
    }
    button {
      cursor: pointer;
    }
    header {
      margin-bottom: var(--goa-space-xl);
    }
    footer {
      margin-top: var(--goa-space-xl);
      padding-top: var(--goa-space-xl);
    }
    
    .disclaimer {
      color: var(--goa-color-greyscale-400);
    }
  </style>
</head>
<body>
  <header>
    <img
      src="data:image/png;base64,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" />
  Metis Settlements Land Registry
    <hr/>
  </header>
  <main>
    <p>Hello,</p>
    <p>Complete your account registration with the following details:</p>
    <p><b>Email:</b> {username}</p>
    <p><b>Password:</b> {####}</p>
    <p>To proceed with the sign-up process visit the MSLR DS or click on the link provided.</p>
    <p><a href="https://{ENV_URL}/sign-in">https://{ENV_URL}/sign-in</a></p>
    <p>Thank you,</p>
    <p>The MSLR Team</p>
  </main>
  <footer>
    <hr/>
    <p>Please do not reply to this email. For assistance, contact us at:</p>
    <p><a href="mailto:[email protected]" target="blank">[email protected]</a></p>
    <p class="disclaimer">
      This email was sent from the Metis Settlements Land Registry and any files transmitted with it are confidential
      and intended solely for the use of the individual or entity to whom they are addressed. If you have received this
      email in error please notify the system manager. This message contains confidential information and is intended
      only for the individual named. If you are not the named addressee you should not disseminate, distribute or copy
      this e-mail.
    </p>
  </footer>
</body>
</html>
`;

May 06 '24 22:05 ArakTaiRoth