Feature/mjml mails

[Samuelfaure]

fix https://linear.app/pole-api/issue/API-757/permettre-a-dorine-de-pre-visualiser-les-emails
fix https://linear.app/pole-api/issue/API-756/migrer-les-mails-api-entreprise-vers-admin

Review: commit-par-commit

Reste:

• PR very_ansible pour installer Node et le package NPM au déploiement => https://github.com/etalab/very_ansible/pull/437
• Tester les mails
• Manager ce comment Feature/mjml mails #1255 (comment)
• Review

A réparer post tests sandbox:

• images
• police

[linear]

API-756 Migrer les mails API Entreprise vers admin

Il s'agit de rapatrier tous les modèles de mailjet dans le code en erb/html/mjml (à voir loic.delmairebeta.gouv.fr un avis ?)

réutiliser au maximum le code (il y a de nombreux modules/sections réutilisées)

API-757 Permettre à Dorine de pré-visualiser les emails

lors du développement dorine.lambinetbeta.gouv.fr doit pouvoir visualiser les emails sur lesquels elle travaille via :

Conception via : https://demo.mailjet.com/

Visualisation via Rails tout simplement http://localhost:3000/rails/mailers

Visualisation sur une PR, on clonera en local la branche et on check à la main

[skelz0r]

Oui c'est good pour moi.

Enjoy pour la suite :}

[Un3x]

Je suis ok, j'admets avoir relu un peu de travers cela dit.

[skelz0r]

C’est un peu indigeste à lire, parce qu’il y a pas mal de choses qui:

1. Ne servent pas
2. Ne sont pas DRY

D’ailleurs des erreurs se sont glissés certainement à cause de ça:

• Des différences de styles (http://localhost:3000/rails/mailers/api_entreprise/authorization_request_mailer/embarquement_modifications_demandees et http://localhost:3000/rails/mailers/api_entreprise/authorization_request_mailer/embarquement_demande_refusee )
• Des listing potentiellement en double ( http://localhost:3000/rails/mailers/api_entreprise/authorization_request_mailer/embarquement_valide_to_demandeur_not_tech )

Il faut que cela soit maintenable et iso avec les autres vues, pour cela il faut:

1. Introduire des composants et des classes
2. Introduire du i18n

Je te conseille de d’abord faire 1. (sur une vue), puis sur toutes les vues, puis 2. viendra tout seul (si tu supprime les trucs dégueu avec du span qui changent seulement la taille de police)

Pour les composants, on voit qu’il y a de commun:

• Un subheader (qui change de couleur en fonction du type)
• Du texte raw
• Des CtA (2 types, pourquoi d’ailleurs ..? imo faut simplifier)
• Du bloc fond gris
• La liste des scopes

Tu peux ici faire des partials avec yield (ex: https://stackoverflow.com/questions/2951105/rails-render-partial-with-block)

Pour les classes, je t’invite à lire https://documentation.mjml.io/#mj-style

Pour ce qui ne sert pas, liste non exhaustive:

• Les padding 0
• Les data-testid
• Les class

Au passage, les vues que tu as migrés en mjml sont peu lisibles, faudrait espacer/fixer des polices/normaliser (mais avec mjml-style global ça devrait aller mieux tout de suite).

[Samuelfaure]

@skelz0r OK je pensais qu'on voulait se contenter d'exporter les mails et utiliser tels quels modulo la factorisation des grosses parties communes (header etc)

Je reprend du coup pour intégrer en composants plus finement

[skelz0r]

@skelz0r OK je pensais qu'on voulait se contenter d'exporter les mails et utiliser tels quels modulo la factorisation des grosses parties communes (header etc)

Je reprend du coup pour intégrer en composants plus finement

Oui c'est ce qu'on veut, mais cela n'empêche pas de rendre ça maintenable: le code on l'écrit une fois on le lit 100 fois. Clairement là chaque itération sera painfull as fuck, on ne veut clairement pas ça (tout du moins moi je ne veux pas ça, no matter what j'ouvre ça je vois que c'est pas DRY je refactor, autant que tu le fasses direct plutôt que de laisser du code comme ça).

[skelz0r]

GG, sacré morceau 😅

J'ai fait des suggestions sur les br dans les titles (clairement ça va rendre n'importe quoi dans les clients emails. Déjà que c'est pas ouf dans un navigateur 🙄) mais globalement le code est OK pour moi.

L'étape d'après ici c'est de tester des vrais envois pour voir la gueule des emails. là où il faut faire attention:

1. Les br dans les titles
2. Les images attachments: je ne suis pas sûr que ça fonctionne.

Si tu fais des tests hésite pas à m'en envoyer btw.

[skelz0r]

simple remarque, entity_type aurait été mieux, entity on s'attend à un modèle.

Honnêtement ce n'est pas très grave, ça pourra se scout commiter au besoin

[skelz0r]

Et au fait j'ai approved, mais tant qu'un email n'est pas parti de la sandbox il ne faut pas merger imo

[Un3x]

Franchement bien joué c'est quand même un gros morceaux que tu viens de pondre là.

[Samuelfaure]

@skelz0r les font ne fonctionnent pas -_- tu aurais une idée de pourquoi?

(les images non plus mais je vais faire des attachments)

[skelz0r]

@skelz0r les font ne fonctionnent pas -_- tu aurais une idée de pourquoi?

(les images non plus mais je vais faire des attachments)

Dans un de mes templates (le principal:

<mjml>
  <mj-head>
    <mj-font name="Open Sans" href="https://fonts.googleapis.com/css?family=Open+Sans:wght@300;400;500;600;700;800&display=swap'" />

je sais pas si ça marche mais personne ne s'est plaint 🤷

[skelz0r]

J'ai ça aussi dans mon template:

      <mj-all
        color="#1e1e1e"
        align="left"
        font-family="Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif"
        font-size="14px"
      />

dans le head

[skelz0r]

Autre piste: reprend un des templates mailjet et voit comment ils ont fait