mail.md

Explenation

A templating system was needed for the app. In order to make it easy to use and also responsive, two libs has been used :

• Handelbars
• MJML

Handlebars is used as a semantic template motor. It allow us to split email template in order to reuse some parts (header, footer ...)

Mjml is a lib providing a syntax allowing developpers to easly build responsive templates.

Usage

Scaffolding

Mails templates can be found inside src/notifications. All reusable parts can be found in base folder.

All stylesheet must be include inside style.hbs.

Create your template

Simply create your template file : template.hbs inside the notifications folder.

<mj-hero background-color="radial-gradient(96.2% 96.2% at 50% 3.8%, #343641 0%, #1B1C22 100%)" padding="17px">
  <mj-text align="center" color="white" padding-top="20px" font-size="24px" font-family="Lato" font-weight="normal">
    <img style="vertical-align: middle; margin-right: 12px" src="https://ecolyo.com/assets/ecolyo-icon.svg" alt="Ecolyo"/>
  {{title}}
  </mj-text>
</mj-hero>

How to use it ?

Inside a cozy service

1. Import the mjml lib in order to compile the template.

import mjml2html from 'mjml'

2. Link all the info mandatory to render your email :

 const template = monthlyReportTemplate({
    title: 'Du nouveau dans votre espace Ecolyo !',
  })

3. Build the email and send it:

  const mailData = {
    mode: 'noreply',
    subject: '[Ecolyo] - Votre bilan mensuel',
    parts: [
      {
        type: 'text/html',
        body: mjml2html(template).html,
      },
    ],
  }
  mailService.SendMail(client, mailData)