Change le rendu du bouton CTA dans les mails transactionnels

incubateur-ademe · Jun 12, 2024 · a7dd3e4 · a7dd3e4
1 parent 9ef0d7a
commit a7dd3e4
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 28 deletions.
diff --git a/packages/auth/app/invite/route.ts b/packages/auth/app/invite/route.ts
@@ -66,33 +66,36 @@ export async function OPTIONS(request: NextRequest) {
 const mailTemplate = ({from, collectivite, url, urlType}: Invitation) => {
   const {email, nom, prenom} = from;
 
-  return `<h2>Territoires en Transitions</h2>
-  <p>Bonjour,</p>
+  return `<html>
+<body>
+    <h2>Territoires en Transitions</h2>
+    <p>Bonjour,</p>
 
-<p>${prenom} ${nom} (${email}) vous invite à contribuer pour ${collectivite} sur Territoires en Transitions.</p> 
+  <p>${prenom} ${nom} (${email}) vous invite à contribuer pour ${collectivite} sur Territoires en Transitions.</p> 
+  <a href="${url}"
+    style="font-size: 1rem; font-weight: 700; border: 1px solid #6A6AF4; border-radius: 8px; text-align: center; padding: 1rem 2rem; margin: 1rem; display: block; max-width: fit-content; background-color: #6A6AF4; color: white; text-decoration: none;"
+    >${
+      urlType === 'invitation'
+        ? 'Je rejoins la collectivité'
+        : 'Je lance Territoires en transitions !'
+    }</a
+  >
 
-<a href="${url}"
-  style="font-size: 1rem; font-weight: 600; border: 1px solid #6A6AF4; border-radius: 8px; text-align: center; padding: 1rem 2rem; margin: 1rem; display: block; max-width: fit-content;"
-  >${
+  ${
     urlType === 'invitation'
-      ? 'Je rejoins la collectivité'
-      : 'Je lance Territoires en transitions !'
-  }</a
->
-
-${
-  urlType === 'invitation'
-    ? '<p><i>Envie d’en savoir plus sur la plateforme ? RDV sur : <a href="https://www.territoiresentransitions.fr/outil-numerique">https://www.territoiresentransitions.fr/outil-numerique</a></p>'
-    : ''
-}
+      ? '<p><i>Envie d’en savoir plus sur la plateforme ? RDV sur : <a href="https://www.territoiresentransitions.fr/outil-numerique">https://www.territoiresentransitions.fr/outil-numerique</a></p>'
+      : ''
+  }
 
-<p>À bientôt sur la plateforme !</p>
+  <p>À bientôt sur la plateforme !</p>
 
-<p>
-Un problème ? Contactez-nous à <br /><a
-    href="mailto:contact@territoiresentransitions.fr"
-    >contact@territoiresentransitions.fr</a
-  >
-</p>
+  <p>
+  Un problème ? Contactez-nous à <br /><a
+      href="mailto:contact@territoiresentransitions.fr"
+      >contact@territoiresentransitions.fr</a
+    >
+  </p>
+</body>
+</html>
 `;
 };
diff --git a/supabase/templates/confirmation.html b/supabase/templates/confirmation.html
@@ -6,8 +6,8 @@ <h2>Territoires en Transitions</h2>
 
 <p>Sinon, suivez le lien ci-dessous</p>
 <a href="http://localhost:3003/signup?view=etape2&email={{.Email}}&otp={{ .Token }}&redirect_to={{ .RedirectTo }}"
-  style="font-size: 1rem; font-weight: 600; border: 1px solid #6A6AF4; border-radius: 8px; text-align: center; padding: 1rem; display: block;"
-  >Valider mon inscription</a
+  style="font-size: 1rem; font-weight: 700; border: 1px solid #6A6AF4; border-radius: 8px; text-align: center; padding: 1rem 2rem; margin: 1rem; display: block; max-width: fit-content; background-color: #6A6AF4; color: white; text-decoration: none;"
+>Valider mon inscription</a
 >
 
 <p>

diff --git a/supabase/templates/magic_link.html b/supabase/templates/magic_link.html
@@ -6,8 +6,8 @@ <h2>Territoires en Transitions</h2>
 
 <p>Sinon, suivez le lien ci-dessous</p>
 <a href="http://localhost:3003/login?view=verify&email={{.Email}}&otp={{ .Token }}&redirect_to={{ .RedirectTo }}"
-  style="font-size: 1rem; font-weight: 600; border: 1px solid #6A6AF4; border-radius: 8px; text-align: center; padding: 1rem; display: block;"
-  >Me connecter</a
+  style="font-size: 1rem; font-weight: 700; border: 1px solid #6A6AF4; border-radius: 8px; text-align: center; padding: 1rem 2rem; margin: 1rem; display: block; max-width: fit-content; background-color: #6A6AF4; color: white; text-decoration: none;"
+>Me connecter</a
 >
 <p>
   et entrez le code suivant : <b id="otp">{{ .Token }}</b> pour vous connecter.

diff --git a/supabase/templates/recovery.html b/supabase/templates/recovery.html
@@ -12,7 +12,7 @@ <h2>Territoires en Transitions</h2>
 <p>Sinon, suivez le lien ci-dessous</p>
 <a
   href="http://localhost:3003/login?view=recover&email={{.Email}}&otp={{ .Token }}&redirect_to={{ .RedirectTo }}"
-  style="font-size: 1rem; font-weight: 600; border: 1px solid #6A6AF4; border-radius: 8px; text-align: center; padding: 1rem; display: block;"
+  style="font-size: 1rem; font-weight: 700; border: 1px solid #6A6AF4; border-radius: 8px; text-align: center; padding: 1rem 2rem; margin: 1rem; display: block; max-width: fit-content; background-color: #6A6AF4; color: white; text-decoration: none;"
   >Réinitialiser mon mot de passe</a
 >
 <p>