mail.md

# Mail

## Explanation

Two templating libraries are used, they allow easy editing and responsive :

- [Handlebars](https://handlebarsjs.com/) is used as a semantic template motor. It allow us to split email template in order to reuse some parts (header, footer ...)

- [MJML](https://mjml.io/) 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-)

## Bounce token

A bounce token stored in the profile of each user is sent in email. It allows us to track if user clicks on links.

## Unsubscribe

A user can unsubscribe to our newsletter by a link in each mails. It **does not** require authentication. This link is built with a `sharecode` token that contains specific permissions to turn of the `sendAnalysisNotification` property in the user profile.