✨ add figures for emails, finish initial implementation section

figures/email-src-hbs.tex

@@ -0,0 +1,42 @@
+\begin{figure}
+  \begin{lstlisting}[language=hbs, numbers=none, backgroundcolor=\color{bgColor}, breaklines=true, basicstyle=\small]
+{{#>mint.main}}
+  {{#>mint.title}}
+    Bienvenue [[surname]] [[name]]
+  {{/mint.title}}
+
+  {{#>mint.text.normal}}
+    {{#println both="true"}}
+      Nous sommes heureux de vous accompagner lors de votre séjour en vous proposant du divertissement.
+    {{/println}}
+  {{/mint.text.normal}}
+
+  {{#>mint.text.normal}}
+    {{>mint.credentials.intro colors=colors}}
+  {{/mint.text.normal}}
+
+  {{println}}
+
+  {{#>mint.text.important}}
+    {{>mint.credentials.button username="[[username]]" password="[[password]]"}}
+  {{/mint.text.important}}
+
+  {{println}}
+
+  {{>mint.button href=login_url text="Je me connecte"}}
+
+  {{println}}
+
+  {{#>mint.text.secondary}}
+    <p margin="50px 0" style="margin: 50px 0">
+      {{#print both="true"}}Si vous avez besoin d'aide pour vous connecter, {{/print}}<br>
+      {{#println both="true"}}vous pouvez vous rapprocher de l'Admission.{{/println}}
+    </p>
+  {{/mint.text.secondary}}
+
+  {{>mint.signature.noreply}}
+{{/mint.main}}
+  \end{lstlisting}
+  \caption{Email sous format Handlebars}
+  \label{emailsrchbs}
+\end{figure}

figures/email-src-mjml.tex

@@ -0,0 +1,30 @@
+\begin{figure}
+  \begin{lstlisting}[language=xml, numbers=none, backgroundcolor=\color{bgColor}, breaklines=true, basicstyle=\small, showstringspaces=false]
+<mjml>
+<mj-head>
+  <!-- ... -->
+</mj-head>
+<mj-body width="600px">
+  <mj-section padding="0 0 25px 0">
+    <mj-column
+      background-color="#4ea0cc"
+      padding-bottom="30px"
+      padding-top="10px"
+      css-class="header"
+    >
+      <mj-image width="200px" height="51px" align="center" src="/mailing-assets/images/mint/moment-care-logo.png" alt="Logo Clinique"></mj-image>
+    </mj-column>
+  </mj-section>
+  <mj-section padding="8px 0 13px 0">
+    <mj-column>
+      <mj-text align="center" font-family="Poppins, sans-serif" font-size="26px" font-weight="600">
+        Bienvenue [[surname]] [[name]]
+      </mj-text>
+    </mj-column>
+  </mj-section>
+  <!-- ... -->
+</mj-body>
+</mjml>
+  \end{lstlisting}
+  \caption{Email sous format MJML, compilé à partir de l'email sous format Handlebars}
+\end{figure}

figures/email.tex

@@ -0,0 +1,40 @@
+\begin{figure}[H]
+  \begin{subfigure}[t]{0.45\textwidth}
+    \includegraphics[width=\textwidth]{email-1.png}
+    \caption{Email sous format HTML}
+  \end{subfigure}
+  \hfill
+  \begin{subfigure}[t]{0.45\textwidth}
+    \includegraphics[width=\textwidth]{email-2.png}
+    \caption{Email sous format HTML, avec les différents composants surlignés}
+  \end{subfigure}
+
+  \begin{subfigure}[t]{\textwidth}
+    \begin{lstlisting}[language=hbs, numbers=none, backgroundcolor=\color{bgColor}, breaklines=true, basicstyle=\small]
+Bienvenue Paul Durant
+
+Nous sommes heureux de vous accompagner lors de votre séjour en vous proposant du divertissement.
+
+Veuillez trouver ci-dessous vos accès personnels pour vous connecter à votre espace de divertissement.
+Vous pouvez commencer à en profiter: dès le 06/11/2022 à 15h05.
+Identifiant: dpaul
+Mot de passe: d0615p$
+
+[ Je me connecte ]( https://ginger.moment.tech/ )
+
+Si vous avez besoin d'aide pour vous connecter, vous pouvez vous rapprocher de l'Admission.
+
+— La Clinique
+
+Veuillez ne pas répondre à cet e-mail. Si vous avez besoin d'aide, vous pouvez vous rapprocher de l'Admission.
+
+-----
+
+La Clinique
+3 bvd Richard-Lenoir, 75011 Paris
+Tél: +33 1 00 00 00 00
+    \end{lstlisting}
+    \caption{Email sous format texte}
+  \end{subfigure}
+  \caption{Email d'identifiants, rendu avec l'application de preview d'emails\label{email}}
+\end{figure}

references.bib

@@ -167,3 +167,19 @@
     howpublished="\url{https://nextjs.org/}",
     note="[En ligne; accédé le 05 Février 2023]"
 }
+
+@article{oberloemailclients,
+    title={Most Used Email Clients Worldwide},
+    author={Oberlo},
+    year={2023},
+    month={01},
+    howpublished="\url{https://www.oberlo.com/statistics/most-used-email-clients}",
+    note="[En ligne; accédé le 06 Février 2023]"
+}
+
+@misc{mjml,
+    title={MJML - The Responsive Email Framework},
+    author={Mailjet},
+    howpublished="\url{https://mjml.io/}",
+    note="[En ligne; accédé le 06 Février 2023]"
+}

report.tex

@@ -90,8 +90,8 @@
 \newfontfamily{\SourceSans}{Source Sans Pro}
 % Looks like the font from google fonts has a different case,
 % so I'm stuck with scanning for existing fonts
-\IfFontExistsTF{Source Sans Pro Semibold}{
+\IfFontExistsTF{Source Sans Pro SemiBold}{
-  \newfontfamily{\SourceSansSB}[UprightFont={* Semibold}]{Source Sans Pro}
+  \newfontfamily{\SourceSansSB}[UprightFont={* SemiBold}]{Source Sans Pro}
 }{
   \newfontfamily{\SourceSansSB}[UprightFont={* Semi-Bold}]{Source Sans Pro}
 }
@@ -569,7 +569,7 @@ Puis, j'ai créé et implémenté une librairie Nest.JS nommée \texttt{mailing-
   \item Charger les composants et les emails depuis un dossier donné
   \item Transformer ceux-cis avec \texttt{handlebars-generator} en HTML et en texte
   \item Mettre en ligne des \term{templates} pour utiliser le service d'envoi d'emails personalisés d'\entity{Amazon}
-  \item Envoyer les \term{templates} avec les informations de l'utilisateur dedans
+  \item Envoyer les \term{templates} avec les informations de l'utilisateur dedans avec \entity{Amazon SES}
 \end{itemize}
 
 Afin de pouvoir tester le fonctionnement de la librairie \texttt{mailing-nest},
@@ -589,7 +589,15 @@ de convertir les entités de \entity{Mint Service} au format attendu par les ema
   \caption{Organisation initiale du système d'envoi de mail dans Mint-Service}
 \end{figure}
 
-% mjml
+Avec le système de mail en place, j'ai pu implémenter la première template d'email, qui était celle pour l'envoi d'identifiants au patients.
+Très rapidement, j'ai pu voir sur \url{caniemail.com} que la quasi-totalités des fonctionnalités HTML5 modernes n'étaient pas supportés par \entity{Microsoft Outlook},
+ce qui nous forcerait à utiliser des \texttt{<table>} dans l'entièreté des emails pour pouvoir supporter \entity{Microsoft Outlook},
+qui est à ce jour le 3ème client email le plus utilisé du monde \cite{oberloemailclients}.
+
+Une solution à ce problème est d'utiliser une librairie assurant la compatibilité avec \entity{Outlook}.
+J'ai choisi la librairie \entity{MJML} \cite{mjml}, qui utilise un langage ressemblant au html, qui est ensuite compilé en HTML compatible avec \entity{Outlook}:
+
+\inputfig{email}
 
 \subsection{Refactor du système de mails}
 
@@ -631,6 +639,8 @@ de convertir les entités de \entity{Mint Service} au format attendu par les ema
 
 \inputfig{nestjs1}
 \inputfig{nestjs2}
+\inputfig{email-src-hbs}
+\inputfig{email-src-mjml}
 
 \bibliographystyle{plain}
 \bibliography{references}{}