From e9df5f0387c711543396331850deed0ce49c44b2 Mon Sep 17 00:00:00 2001
From: Dorine Lambinet <dorine.lambinet@gmail.com>
Date: Fri, 27 Oct 2023 15:23:47 +0200
Subject: [PATCH] Mise en forme de l'email
 embarquement_valide_to_demandeur_not_tech

---
 .../_banner_demande_valide.html.mjml          | 20 +++---
 .../_button_login.html.mjml                   |  2 +-
 .../_list_scopes.html.mjml                    |  6 +-
 ...ent_valide_to_demandeur_not_tech.html.mjml | 63 +++++++++++--------
 app/views/layouts/mailer.html.mjml            |  5 +-
 config/locales/mailers.fr.yml                 |  2 +-
 6 files changed, 55 insertions(+), 43 deletions(-)

diff --git a/app/views/api_entreprise/authorization_request_mailer/_banner_demande_valide.html.mjml b/app/views/api_entreprise/authorization_request_mailer/_banner_demande_valide.html.mjml
index 81d21a9f5..4f35564b7 100644
--- a/app/views/api_entreprise/authorization_request_mailer/_banner_demande_valide.html.mjml
+++ b/app/views/api_entreprise/authorization_request_mailer/_banner_demande_valide.html.mjml
@@ -4,16 +4,14 @@
     <mj-text>
       <h1>
         <b>
-        <% if entity == "editeur" %>
-          Votre demande d'accès en tant qu'éditeur a été validée ✅
-        <% elsif entity == "contact_metier" || entity == "contact_technique" %>
-          Votre service a désormais accès à l'API Entreprise  ✅
-        <% else %>
-          Votre demande d'accès a été validée ✅
-        <% end %>
-      </b>
-      </h1>
-      <h2>
+          <% if entity == "editeur" %>
+            Votre demande d'accès en tant qu'éditeur a été validée ✅
+          <% elsif entity == "contact_metier" || entity == "contact_technique" %>
+            Votre service a désormais accès à l'API Entreprise  ✅
+          <% else %>
+            Votre demande d'accès a été validée ✅
+          <% end %>
+        </b>
         <% if entity == "contact_metier"%>
           Vous avez été désigné contact métier.
         <% elsif entity == "contact_technique"%>
@@ -21,7 +19,7 @@
         <% else %>
           Votre clé d'accès est disponible 🔑
         <% end %>
-      </h2>
+      </h1>
     </mj-text>
   </mj-column>
 </mj-section>
diff --git a/app/views/api_entreprise/authorization_request_mailer/_button_login.html.mjml b/app/views/api_entreprise/authorization_request_mailer/_button_login.html.mjml
index f88d38e9b..68a90d723 100644
--- a/app/views/api_entreprise/authorization_request_mailer/_button_login.html.mjml
+++ b/app/views/api_entreprise/authorization_request_mailer/_button_login.html.mjml
@@ -6,7 +6,7 @@
   au compte API Entreprise <% end %>
 </mj-button>
 <mj-text>
-  <p>
+  <p style="font-size: 12px; margin-top: 0px; padding-top: 0px; text-align: center;">
     <a target="_blank" href="<%= login_url %>"><%= login_url %></a>
   </p>
 </mj-text>
diff --git a/app/views/api_entreprise/authorization_request_mailer/_list_scopes.html.mjml b/app/views/api_entreprise/authorization_request_mailer/_list_scopes.html.mjml
index e7aa30065..20c3aa28a 100644
--- a/app/views/api_entreprise/authorization_request_mailer/_list_scopes.html.mjml
+++ b/app/views/api_entreprise/authorization_request_mailer/_list_scopes.html.mjml
@@ -1,7 +1,7 @@
 <mj-text mj-class="section-block">
-  <p>
-    🔐 <b>Vous avez désormais accès aux données suivantes&nbsp;:</b>
-  </p>
+  <h2>
+    🔐 Avec cette habilitation, <b>vous avez désormais accès aux données suivantes&nbsp;:</b>
+  </h2>
   <ul>
     <% @all_scopes.each do |scope_key, scope_label| %>
       <% if @authorization_request_scopes.include?(scope_key) %>
diff --git a/app/views/api_entreprise/authorization_request_mailer/embarquement_valide_to_demandeur_not_tech.html.mjml b/app/views/api_entreprise/authorization_request_mailer/embarquement_valide_to_demandeur_not_tech.html.mjml
index 8a4cffd47..52750f360 100644
--- a/app/views/api_entreprise/authorization_request_mailer/embarquement_valide_to_demandeur_not_tech.html.mjml
+++ b/app/views/api_entreprise/authorization_request_mailer/embarquement_valide_to_demandeur_not_tech.html.mjml
@@ -2,35 +2,46 @@
 <mj-section mj-class="section-main">
   <mj-column>
     <mj-text>
-      <p>
-        Votre demande d’habilitation n°<%= @authorization_request.external_id %> a bien été validée par notre service
-        juridique !
-      </p>
-    </mj-text>
-  </mj-column>
-</mj-section>
-<mj-section mj-class="section-main">
+      <%= render partial: "greetings", locals: { entity: "demandeur" } %>
+      <mj-text>
+        <p>
+          Votre demande d’habilitation n°<%= @authorization_request.external_id %> a bien été validée par notre service
+          juridique !
+        </p>
+      </mj-text>
+        </mj-text>
+          </mj-column>
+        </mj-section>
+      <mj-section mj-class="section-block-gris">
+        <mj-column>
+          <mj-text>
+            <h2>
+              <b>Votre équipe technique peut commencer à intégrer l'API Entreprise&nbsp;:</b>
+            </h2>
+            <p>
+              ☑️
+              <b>Le contact technique indiqué dans votre habilitation a accès au compte API Entreprise</b>,
+              il peut récupérer le jeton en toute autonomie.
+            </p>
+            <p>
+              ☑️
+              <b>Vous avez également accès à cet espace</b>
+              avec la possibilité de transmettre votre jeton si cela est nécessaire pour l'intégration. Utilisez le bouton
+              "Transmettre le jeton à mon équipe technique". <br /><span class="warning-red">⚠️&nbsp;
+              Ce jeton ne doit jamais être relayé autrement que par cette fonctionnalité.</span>
+            </p>
+          </mj-text>
+          <%= render partial: "button_login", locals: { entity: 'demandeur' }  %> 
+        </mj-column>
+      </mj-section>
+  <mj-section mj-class="section-main">
   <mj-column>
+
+
     <mj-text>
-      <%= render partial: "greetings", locals: { entity: "demandeur" } %>
-      <h2>
-        <b>Votre équipe technique peut commencer à intégrer l'API Entreprise&nbsp;:</b>
-      </h2>
-      <p>
-        ☑️
-        <b>Le contact technique indiqué dans votre habilitation a accès au compte API Entreprise</b>
-        il peut récupérer le jeton en toute autonomie.
-      </p>
-      <p>
-        ☑️
-        <b>Vous avez également accès à cet espace</b>
-        avec la possibilité de transmettre votre jeton si cela est nécessaire pour l'intégration. Utilisez le bouton
-        "Transmettre le jeton à mon équipe technique". ⚠️ &nbsp;
-        <br />
-        Ce jeton ne doit jamais être relayé autrement que par cette fonctionnalité.
-      </p>
+    <%= render partial: "list_scopes" %> 
+    <%= render partial: "embarquement_valide_welcome" %>
     </mj-text>
-    <%= render partial: "button_login", locals: { entity: 'demandeur' } %> <%= render partial: "list_scopes" %> <%= render partial: "embarquement_valide_welcome" %>
   </mj-column>
 </mj-section>
 <%= render partial: "block_subscribed_newsletter" %> <%= render partial: "block_questions" %> <%= render partial: "footer" %>
diff --git a/app/views/layouts/mailer.html.mjml b/app/views/layouts/mailer.html.mjml
index 1599a16bc..aee1ae70f 100644
--- a/app/views/layouts/mailer.html.mjml
+++ b/app/views/layouts/mailer.html.mjml
@@ -17,7 +17,6 @@
         background-color="#000091"
         border-radius="3px"
         color="#ffffff"
-        container-background-color="#ffffff"
         font-size="16px"
         font-weight="bold"
         inner-padding="10px 25px 10px 25px"
@@ -26,6 +25,7 @@
       <mj-class name="section-banner" padding="0px 0px 0px 20px" />
       <mj-class name="section-main" padding="10px 20px 10px 20px" />
       <mj-class name="section-block" background-color="#ffffff" padding="0px 40px 30px 40px" />
+      <mj-class name="section-block-gris" background-color="#ededf2" padding="10px 20px 10px 20px" />
       <mj-class name="block-beige" container-background-color="#f0f0f0" padding="20px 30px 20px 30px" />
       <mj-class name="block-blue" container-background-color="#d5dbef" padding="20px 30px 20px 30px" />
       <mj-class name="button-secondary" color="#000091" font-weight="normal" color="#ffffff" background-color="transparent" border="2px solid #000091" />
@@ -42,6 +42,9 @@
       .footer-list li a {
         color: #000000; font-weight: bold;
       }
+      .warning-red {
+        color: #c9191e;
+      }
       h1 {
         font-size: 30px; line-height: 40px; margin-top: 20px; margin-bottom: 20px; font-weight: normal;
       }
diff --git a/config/locales/mailers.fr.yml b/config/locales/mailers.fr.yml
index 667b356e2..0cfb2bad6 100644
--- a/config/locales/mailers.fr.yml
+++ b/config/locales/mailers.fr.yml
@@ -20,7 +20,7 @@ fr:
       embarquement_valide_to_metier_cc_demandeur_tech:
         subject: Découvrez les données auxquelles vous avez accès suite à la demande d'accès d'un service de votre organisation a été validée.
       embarquement_valide_to_demandeur_not_tech:
-        subject: Pour utiliser l'API Entreprise, transmettez votre jeton d'accès 🔑 à votre équipe technique depuis votre tableau de bord !
+        subject:  ✅ Demande validée ! Transmettez maintenant votre clé d'accès 🔑 à l'équipe technique !
       embarquement_valide_to_demandeur_tech_not_metier:
         subject: Pour utiliser l'API Entreprise, récupérez votre jeton d'accès 🔑 depuis votre tableau de bord !
       embarquement_valide_to_tech_cc_demandeur_metier: