feat(mail): ajout lien #1492

SocialGouv · Jun 28, 2021 · 1d982c5 · 1d982c5
1 parent cbbe14d
commit 1d982c5
Show file tree

Hide file tree

Showing 20 changed files with 403 additions and 101 deletions.
diff --git a/packages/backend/src/_static/email-templates/admin-batchs-error-report/test.ref.html b/packages/backend/src/_static/email-templates/admin-batchs-error-report/test.ref.html
@@ -105,6 +105,14 @@
     background-color: #bb2f15 !important;
     border-color: #bb2f15 !important;
   }
+
+  .text-primary {
+    color: #3956d9 !important;
+  }
+
+  .text-danger {
+    color: #bb2f15 !important;
+  }
 }
 </style>
 

diff --git a/packages/backend/src/_static/email-templates/base-tailwind-helpers.css b/packages/backend/src/_static/email-templates/base-tailwind-helpers.css
@@ -145,13 +145,21 @@
 
 /* https://tailwindcss.com/docs/text-color */
 .text-red-600 {
-  color: rgba(220, 38, 38, 1);
+  color: rgb(220, 38, 38);
 }
 .text-blue-800 {
-  color: rgba(30, 64, 175, 1);
+  color: rgb(30, 64, 175);
+}
+.text-gray-600 {
+  color: rgb(75, 85, 99);
 }
 
 /* https://tailwindcss.com/docs/text-transform */
 .uppercase {
   text-transform: uppercase;
 }
+
+/* https://tailwindcss.com/docs/font-style#italics */
+.italic {
+  font-style: italic;
+}
diff --git a/packages/backend/src/_static/email-templates/base.css b/packages/backend/src/_static/email-templates/base.css
@@ -171,7 +171,7 @@ a {
   margin: 0;
   padding: 12px 25px;
   text-decoration: none;
-  text-transform: capitalize;
+  text-transform: uppercase;
 }
 
 .btn-primary table td {
@@ -329,4 +329,11 @@ hr {
     background-color: #bb2f15 !important;
     border-color: #bb2f15 !important;
   }
+
+  .text-primary {
+    color: #3956d9 !important;
+  }
+  .text-danger {
+    color: #bb2f15 !important;
+  }
 }
diff --git a/packages/backend/src/_static/email-templates/delete-structure/html.nunjucks b/packages/backend/src/_static/email-templates/delete-structure/html.nunjucks
@@ -49,7 +49,7 @@
    </ul>
    </p>
 
-   {{ helpers.button("danger", lien_suppression, "Confirmer la suppression") }}
+   {{ helpers.button("danger", lien_suppression, "Confirmer la suppression", true) }}
 
    {{ helpers.redirectedMessage(toSkipString) }}
 

diff --git a/packages/backend/src/_static/email-templates/delete-structure/test.ref.html b/packages/backend/src/_static/email-templates/delete-structure/test.ref.html
@@ -105,6 +105,14 @@
     background-color: #bb2f15 !important;
     border-color: #bb2f15 !important;
   }
+
+  .text-primary {
+    color: #3956d9 !important;
+  }
+
+  .text-danger {
+    color: #bb2f15 !important;
+  }
 }
 </style>
 
@@ -187,21 +195,46 @@
    <p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;"></p>
 
 
-<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="btn btn-danger mt-8 mb-12" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; box-sizing: border-box; width: 100%; margin-top: 32px; margin-bottom: 48px;" width="100%">
+<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="btn btn-danger mt-8" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; box-sizing: border-box; width: 100%; margin-top: 32px;" width="100%">
      <tbody>
      <tr>
      <td align="center" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;">
-          <table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
-          <tbody>
-               <tr>
-                    <td align="center" class="text-center" style="font-family: sans-serif; font-size: 14px; vertical-align: top; border-radius: 5px; text-align: center; background-color: #ff5b3d;"> <a href="https://domifa/delete/confirm" target="_blank" rel="noopener noreferrer" style="border: solid 1px #3e61ff; border-radius: 5px; box-sizing: border-box; cursor: pointer; display: inline-block; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-decoration: none; text-transform: capitalize; background-color: #ff5b3d; border-color: #ff5b3d; color: #ffffff;">Confirmer la suppression</a> </td>
-               </tr>
-          </tbody>
-          </table>
+     <table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
+     <tbody>
+     <tr>
+     <td align="center" class="text-center" style="font-family: sans-serif; font-size: 14px; vertical-align: top; border-radius: 5px; text-align: center; background-color: #ff5b3d;">
+          <a href="https://domifa/delete/confirm" target="_blank" rel="noopener noreferrer" style="border: solid 1px #3e61ff; border-radius: 5px; box-sizing: border-box; cursor: pointer; display: inline-block; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-decoration: none; text-transform: uppercase; background-color: #ff5b3d; border-color: #ff5b3d; color: #ffffff;">Confirmer la suppression</a>
+     </td>
+     </tr>
+     </tbody>
+     </table>
      </td>
      </tr>
      </tbody>
 </table>
+<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="mb-12" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; margin-bottom: 48px;" width="100%">
+     <tbody>
+
+     <tr>
+     <td align="left" style="font-family: sans-serif; font-size: 14px; vertical-align: top;">
+     <table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%">
+     <tbody>
+     <tr>
+     <td align="left" class="text-left" style="font-family: sans-serif; font-size: 14px; vertical-align: top; text-align: left;">
+          <p class="my-1" style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">
+               <b class="text-danger">Note:</b> <span class="text-gray-600 italic" style="color: rgb(75, 85, 99); font-style: italic;">si le bouton ci-dessus ne fonctionne pas correctement, vous pouvez aussi copier/coller le lien suivant dans votre navigateur:</span>
+          </p>
+          <p class="my-1" style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;"></p><pre>https://domifa/delete/confirm</pre><p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;"></p>
+     </td>
+     </tr>
+     </tbody>
+     </table>
+     </td>
+     </tr>
+
+     </tbody>
+</table>
+
 
 
 

diff --git a/packages/backend/src/_static/email-templates/guide-import/html.nunjucks b/packages/backend/src/_static/email-templates/guide-import/html.nunjucks
@@ -15,7 +15,7 @@
           Réalisez dès à présent l’import de vos données afin de pouvoir utiliser DomiFa. 
      </p>
 
-     {{ helpers.button("primary", lienImport, "Importer mes domiciliés") }}
+     {{ helpers.button("primary", lienImport, "Importer mes domiciliés", true) }}
 
      <p>
                En cas de question n’hésitez pas à consulter notre <a href="{{ lienGuide }}" target="_blank" rel="noopener noreferrer">guide pratique</a> et notre <a href="{{ lienFaq }}" target="_blank" rel="noopener noreferrer">FAQ</a>. 

diff --git a/packages/backend/src/_static/email-templates/guide-import/test.ref.html b/packages/backend/src/_static/email-templates/guide-import/test.ref.html
@@ -105,6 +105,14 @@
     background-color: #bb2f15 !important;
     border-color: #bb2f15 !important;
   }
+
+  .text-primary {
+    color: #3956d9 !important;
+  }
+
+  .text-danger {
+    color: #bb2f15 !important;
+  }
 }
 </style>
 
@@ -153,21 +161,46 @@
      </p>
 
 
-<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="btn btn-primary mt-8 mb-12" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; box-sizing: border-box; width: 100%; margin-top: 32px; margin-bottom: 48px;" width="100%">
+<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="btn btn-primary mt-8" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; box-sizing: border-box; width: 100%; margin-top: 32px;" width="100%">
      <tbody>
      <tr>
      <td align="center" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;">
-          <table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
-          <tbody>
-               <tr>
-                    <td align="center" class="text-center" style="font-family: sans-serif; font-size: 14px; vertical-align: top; border-radius: 5px; text-align: center; background-color: #3e61ff;"> <a href="https://domifa/import" target="_blank" rel="noopener noreferrer" style="border: solid 1px #3e61ff; border-radius: 5px; box-sizing: border-box; cursor: pointer; display: inline-block; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-decoration: none; text-transform: capitalize; background-color: #3e61ff; border-color: #3e61ff; color: #ffffff;">Importer mes domiciliés</a> </td>
-               </tr>
-          </tbody>
-          </table>
+     <table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
+     <tbody>
+     <tr>
+     <td align="center" class="text-center" style="font-family: sans-serif; font-size: 14px; vertical-align: top; border-radius: 5px; text-align: center; background-color: #3e61ff;">
+          <a href="https://domifa/import" target="_blank" rel="noopener noreferrer" style="border: solid 1px #3e61ff; border-radius: 5px; box-sizing: border-box; cursor: pointer; display: inline-block; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-decoration: none; text-transform: uppercase; background-color: #3e61ff; border-color: #3e61ff; color: #ffffff;">Importer mes domiciliés</a>
+     </td>
+     </tr>
+     </tbody>
+     </table>
      </td>
      </tr>
      </tbody>
 </table>
+<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="mb-12" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; margin-bottom: 48px;" width="100%">
+     <tbody>
+
+     <tr>
+     <td align="left" style="font-family: sans-serif; font-size: 14px; vertical-align: top;">
+     <table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%">
+     <tbody>
+     <tr>
+     <td align="left" class="text-left" style="font-family: sans-serif; font-size: 14px; vertical-align: top; text-align: left;">
+          <p class="my-1" style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">
+               <b class="text-primary">Note:</b> <span class="text-gray-600 italic" style="color: rgb(75, 85, 99); font-style: italic;">si le bouton ci-dessus ne fonctionne pas correctement, vous pouvez aussi copier/coller le lien suivant dans votre navigateur:</span>
+          </p>
+          <p class="my-1" style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;"></p><pre>https://domifa/import</pre><p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;"></p>
+     </td>
+     </tr>
+     </tbody>
+     </table>
+     </td>
+     </tr>
+
+     </tbody>
+</table>
+
 
 
      <p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">

diff --git a/packages/backend/src/_static/email-templates/guide-utilisateur/html.nunjucks b/packages/backend/src/_static/email-templates/guide-utilisateur/html.nunjucks
@@ -15,7 +15,7 @@
           Afin de vous accompagner dans l’utilisation de la plateforme, <span class="font-bold">vous trouverez ci-dessous un guide utilisateur détaillé</span> qui vous permettra de découvrir les différentes fonctionnalités disponibles. 
      </p>
 
-     {{ helpers.button("primary", lienGuide, "Télécharger le guide utilisateur") }}
+     {{ helpers.button("primary", lienGuide, "Télécharger le guide utilisateur", true) }}
 
      <p>
           À bientôt,

diff --git a/packages/backend/src/_static/email-templates/guide-utilisateur/test.ref.html b/packages/backend/src/_static/email-templates/guide-utilisateur/test.ref.html
@@ -105,6 +105,14 @@
     background-color: #bb2f15 !important;
     border-color: #bb2f15 !important;
   }
+
+  .text-primary {
+    color: #3956d9 !important;
+  }
+
+  .text-danger {
+    color: #bb2f15 !important;
+  }
 }
 </style>
 
@@ -153,21 +161,46 @@
      </p>
 
 
-<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="btn btn-primary mt-8 mb-12" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; box-sizing: border-box; width: 100%; margin-top: 32px; margin-bottom: 48px;" width="100%">
+<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="btn btn-primary mt-8" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; box-sizing: border-box; width: 100%; margin-top: 32px;" width="100%">
      <tbody>
      <tr>
      <td align="center" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;">
-          <table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
-          <tbody>
-               <tr>
-                    <td align="center" class="text-center" style="font-family: sans-serif; font-size: 14px; vertical-align: top; border-radius: 5px; text-align: center; background-color: #3e61ff;"> <a href="https://domifa/guide" target="_blank" rel="noopener noreferrer" style="border: solid 1px #3e61ff; border-radius: 5px; box-sizing: border-box; cursor: pointer; display: inline-block; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-decoration: none; text-transform: capitalize; background-color: #3e61ff; border-color: #3e61ff; color: #ffffff;">Télécharger le guide utilisateur</a> </td>
-               </tr>
-          </tbody>
-          </table>
+     <table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
+     <tbody>
+     <tr>
+     <td align="center" class="text-center" style="font-family: sans-serif; font-size: 14px; vertical-align: top; border-radius: 5px; text-align: center; background-color: #3e61ff;">
+          <a href="https://domifa/guide" target="_blank" rel="noopener noreferrer" style="border: solid 1px #3e61ff; border-radius: 5px; box-sizing: border-box; cursor: pointer; display: inline-block; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-decoration: none; text-transform: uppercase; background-color: #3e61ff; border-color: #3e61ff; color: #ffffff;">Télécharger le guide utilisateur</a>
+     </td>
+     </tr>
+     </tbody>
+     </table>
      </td>
      </tr>
      </tbody>
 </table>
+<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="mb-12" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; margin-bottom: 48px;" width="100%">
+     <tbody>
+
+     <tr>
+     <td align="left" style="font-family: sans-serif; font-size: 14px; vertical-align: top;">
+     <table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%">
+     <tbody>
+     <tr>
+     <td align="left" class="text-left" style="font-family: sans-serif; font-size: 14px; vertical-align: top; text-align: left;">
+          <p class="my-1" style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">
+               <b class="text-primary">Note:</b> <span class="text-gray-600 italic" style="color: rgb(75, 85, 99); font-style: italic;">si le bouton ci-dessus ne fonctionne pas correctement, vous pouvez aussi copier/coller le lien suivant dans votre navigateur:</span>
+          </p>
+          <p class="my-1" style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;"></p><pre>https://domifa/guide</pre><p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;"></p>
+     </td>
+     </tr>
+     </tbody>
+     </table>
+     </td>
+     </tr>
+
+     </tbody>
+</table>
+
 
 
      <p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">

diff --git a/packages/backend/src/_static/email-templates/hard-reset/test.ref.html b/packages/backend/src/_static/email-templates/hard-reset/test.ref.html
@@ -105,6 +105,14 @@
     background-color: #bb2f15 !important;
     border-color: #bb2f15 !important;
   }
+
+  .text-primary {
+    color: #3956d9 !important;
+  }
+
+  .text-danger {
+    color: #bb2f15 !important;
+  }
 }
 </style>
 
@@ -148,15 +156,15 @@
           Vous avez demandé la suppression des usagers de votre structure.
      </p>
 
-     <p class="my-3 font-bold text-red-600" style="font-family: sans-serif; font-size: 14px; margin: 0; margin-top: 12px; margin-bottom: 12px; font-weight: 700; color: rgba(220, 38, 38, 1);">
+     <p class="my-3 font-bold text-red-600" style="font-family: sans-serif; font-size: 14px; margin: 0; margin-top: 12px; margin-bottom: 12px; font-weight: 700; color: rgb(220, 38, 38);">
           Pour rappel, vous n'aurez aucun moyen de restaurer les dossiers effacés.
      </p>  
 
      <p class="mt-8 mb-4 text-center font-bold" style="font-family: sans-serif; font-size: 14px; margin: 0; text-align: center; margin-top: 32px; margin-bottom: 16px; font-weight: 700;">
                CODE DE CONFIRMATION
      </p>
 
-     <p class="mt-8 mb-12 text-center font-bold text-3xl text-blue-800" style="font-family: sans-serif; margin: 0; text-align: center; font-size: 30px; line-height: 36px; margin-top: 32px; margin-bottom: 48px; font-weight: 700; color: rgba(30, 64, 175, 1);">
+     <p class="mt-8 mb-12 text-center font-bold text-3xl text-blue-800" style="font-family: sans-serif; margin: 0; text-align: center; font-size: 30px; line-height: 36px; margin-top: 32px; margin-bottom: 48px; font-weight: 700; color: rgb(30, 64, 175);">
           ABCD
      </p>
 

diff --git a/packages/backend/src/_static/email-templates/helpers.nunjucks b/packages/backend/src/_static/email-templates/helpers.nunjucks
@@ -1,19 +1,44 @@
-{% macro button(type, lien, text) %}
-<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="btn btn-{{ type }} mt-8 mb-12">
+{% macro button(type, lien, text, displayFullLink) %}
+<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="btn btn-{{ type }} mt-8">
      <tbody>
      <tr>
      <td align="center">
-          <table role="presentation" border="0" cellpadding="0" cellspacing="0">
-          <tbody>
-               <tr>
-                    <td align="center" class="text-center"> <a href="{{ lien }}" target="_blank" rel="noopener noreferrer">{{ text }}</a> </td>
-               </tr>
-          </tbody>
-          </table>
+     <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+     <tbody>
+     <tr>
+     <td align="center" class="text-center">
+          <a href="{{ lien }}" target="_blank" rel="noopener noreferrer">{{ text }}</a>
+     </td>
+     </tr>
+     </tbody>
+     </table>
+     </td>
+     </tr>
+     </tbody>
+</table>
+<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="mb-12">
+     <tbody>
+{% if displayFullLink %}
+     <tr>
+     <td align="left">
+     <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+     <tbody>
+     <tr>
+     <td align="left" class="text-left">
+          <p class="my-1">
+               <b class="text-{{ type }}">Note:</b> <span class="text-gray-600 italic">si le bouton ci-dessus ne fonctionne pas correctement, vous pouvez aussi copier/coller le lien suivant dans votre navigateur:</span>
+          </p>
+          <p class="my-1"><pre>{{ lien }}</pre></p>
      </td>
      </tr>
      </tbody>
+     </table>
+     </td>
+     </tr>
+{% endif %}
+     </tbody>
 </table>
+
 {% endmacro %}
 
 {% macro redirectedMessage(toSkipString) %}

diff --git a/packages/backend/src/_static/email-templates/new-structure/html.nunjucks b/packages/backend/src/_static/email-templates/new-structure/html.nunjucks
@@ -60,8 +60,8 @@
    </ul>
    </p>
 
-   {{ helpers.button("primary", lien_confirmation, "Valider le compte") }}
-   {{ helpers.button("danger", lien_suppression, "Supprimer le compte") }}
+   {{ helpers.button("primary", lien_confirmation, "Valider le compte", true) }}
+   {{ helpers.button("danger", lien_suppression, "Supprimer le compte", true) }}
 
    {{ helpers.redirectedMessage(toSkipString) }}
-Original file line number
+Diff line change
@@ Expand Up / @@ -49,7 +49,7 @@ @@
        </ul>
        </p>
-       {{ helpers.button("danger", lien_suppression, "Confirmer la suppression") }}
+       {{ helpers.button("danger", lien_suppression, "Confirmer la suppression", true) }}
        {{ helpers.redirectedMessage(toSkipString) }}
@@ Expand Down @@