mail.md

# Mail

## Explanation

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

- [Handlebars](https://handlebarsjs.com/)
- [MJML](https://mjml.io/)

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 developers to easily 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.

```xml
<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.

```js
import mjml2html from 'mjml'
```

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

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

3) Build the email and send it:

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

#### Inside the app

It's very similar to service usage, but because we use react, the app rendering is done in the user browser. That's why we need to change the import for mjml lib into :

```js
const mjml2html = require('mjml-browser')
```

### Useful links

- [Mjml live editor](https://mjml.io/try-it-live/bohYnxKkCq-)