fix: lbac 2115: update mails (#1302)

* fix: lbac 2115: update mails * fix: revert ajout address * fix: review * fix: suppression des liens self dans les mails * fix: alt sur une image * fix: liens dans les relances des offres en expiration * fix: gras sur les puces * fix: mail confirmation email * fix: image candidature * fix: bouton voir mon offre * fix: revue marion * fix: update talisman * fix: update talisman * fix: revue claire * fix: relance width * fix: font family arial * fix: condition message * fix: update mailto * fix: copier coller * fix: mailto subjects * fix: revue mailto * fix: footer du mail de bienvenue * fix: merge
mission-apprentissage · Jul 2, 2024 · d5a4d53 · d5a4d53
1 parent 820d480
commit d5a4d53
Showing 20 changed files with 1,501 additions and 422 deletions.
diff --git a/.talismanrc b/.talismanrc
@@ -52,7 +52,7 @@ fileignoreconfig:
 - filename: server/src/http/routes/auth/password.controller.ts
   checksum: 0eb3948d875508edf6d31f0ffe1290aac0cc02c9c80c913bcb04a312edd062cc
 - filename: server/src/http/sentry.ts
-  checksum: 8ddfde7f7badf7aaedff6d91b8805c236775e9ce422b20e934f2a2f31ea930fa
+  checksum: 4e555f9ed2542b3852a3d8e27cf7805375b78dbd724b20f337be186f754144c0
 - filename: server/src/jobs/database/obfuscateCollections.ts
   checksum: e00973a1dcdd3af56c176f07d642b18956d21c2034ca49f1b0e3d670ed09782b
 - filename: server/src/jobs/job.actions.ts
@@ -134,7 +134,9 @@ fileignoreconfig:
 - filename: ui/components/Ressources/conseilsEtAstuces.tsx
   checksum: b9f16607c1fb319c2940223e7e9ce5acc48b8b5a5b519e2bb79210e3f0feaf17
 - filename: ui/components/Ressources/misesEnSituation.tsx
-  checksum: 40d3b51d46662db192ae3b8a5ecd5090445008dd7842425f34f7f4058482f3d0
+  checksum: 5730ed3668f818b36384d28402889e6489c3ac15b4ae2213493a3b91cf8e4f31
+- filename: ui/components/Ressources/ressourcesRecruteur.tsx
+  checksum: f08a2cc9fa85ea184ed2b6f93b1b423c2774fc9bb18447249c80134c428194dd
 - filename: ui/components/SearchForTrainingsAndJobs/services/handleSessionStorage.ts
   checksum: c3c1aceede1040a9001bdc27cebbec7b3aeb0bb251b8b4264bb9d33da074af60
 - filename: ui/components/espace_pro/Admin/utilisateurs/UserList.tsx

diff --git a/cypress/.eslintrc.cjs b/cypress/.eslintrc.cjs
@@ -4,7 +4,7 @@ module.exports = {
     "import/no-extraneous-dependencies": [
       "error",
       {
-        devDependencies: ["cypress/e2e/*.cy.ts"],
+        devDependencies: ["cypress/e2e/**/*.cy.ts"],
         optionalDependencies: false,
       },
     ],

diff --git a/cypress/api/loginClient.ts b/cypress/api/loginClient.ts
@@ -1,13 +1,22 @@
 import { smtpClient } from "./smtpClient"
 
 export const loginClient = {
+  loginAsAdmin() {
+    return this.login("[email protected]").then(() => {
+      cy.contains("Gestion des recruteurs")
+    })
+  },
   login(email: string) {
-    cy.request("POST", `${Cypress.env("server")}/api/login/magiclink`, { email })
+    return cy
+      .request("POST", `${Cypress.env("server")}/api/login/magiclink`, { email })
       .then(() => {
         return smtpClient.getMail(email, "Lien de connexion")
       })
       .then((mailContent) => {
-        const url = new RegExp("(http[^ ]+token=[a-zA-Z0-9.-]+)", "g").exec(mailContent)?.at(1)
+        const url = new RegExp("(http[^ ]+token=[a-zA-Z0-9.\\-_]+)", "g").exec(mailContent)[1]
+        if (!url) {
+          throw new Error("could not find url")
+        }
         cy.visit(url)
       })
   },

diff --git a/cypress/e2e/manual/create-recruiter-account-manual-validation-no-offer.cy.ts b/cypress/e2e/manual/create-recruiter-account-manual-validation-no-offer.cy.ts
@@ -0,0 +1,33 @@
+import { slowCypressDown } from "cypress-slow-down"
+
+import { loginClient } from "../../api/loginClient"
+import { FlowCreationEntreprise } from "../../pages/FlowCreationEntreprise"
+import { generateRandomString } from "../../utils/generateRandomString"
+
+slowCypressDown(200)
+
+describe("create-recruiter-account-manual-validation-no-offer", () => {
+  it.skip("tests create-recruiter-account-manual-validation-no-offer", () => {
+    cy.viewport(1271, 721)
+
+    const email = `cypress-manual-validation-${generateRandomString()}@mail.com`
+    const siret = Cypress.env("ENTREPRISE_AUTOVALIDE_SIRET")
+    const firstName = "John"
+    const lastName = "Doe"
+
+    FlowCreationEntreprise.siretPage.goTo()
+    FlowCreationEntreprise.siretPage.fillSiret(siret)
+    FlowCreationEntreprise.siretPage.submit()
+
+    FlowCreationEntreprise.personalInfosPage.fillForm({
+      firstName,
+      lastName,
+      phone: "0700000000",
+      email,
+    })
+    FlowCreationEntreprise.personalInfosPage.submit()
+    FlowCreationEntreprise.personalInfosPage.confirmAccountCreation()
+    FlowCreationEntreprise.offerPage.assertUrl()
+    loginClient.loginAsAdmin()
+  })
+})
diff --git a/cypress/e2e/manual/entreprise-create-offre.cy.ts b/cypress/e2e/manual/entreprise-create-offre.cy.ts
@@ -0,0 +1,33 @@
+import { slowCypressDown } from "cypress-slow-down"
+
+import { loginClient } from "../../api/loginClient"
+import { FlowCreationEntreprise } from "../../pages/FlowCreationEntreprise"
+import { generateRandomString } from "../../utils/generateRandomString"
+
+slowCypressDown(300)
+
+describe("entreprise-create-offre", () => {
+  it.skip("test entreprise-create-offre", () => {
+    cy.viewport(1271, 721)
+
+    const emailDomain = Cypress.env("ENTREPRISE_AUTOVALIDE_EMAIL_DOMAIN")
+    const email = `${generateRandomString()}@${emailDomain}`
+    const siret = Cypress.env("ENTREPRISE_AUTOVALIDE_SIRET")
+    const firstName = `John-${generateRandomString()}`
+    const lastName = `Doe-${generateRandomString()}`
+
+    FlowCreationEntreprise.siretPage.goTo()
+    FlowCreationEntreprise.siretPage.fillSiret(siret)
+    FlowCreationEntreprise.siretPage.submit()
+
+    FlowCreationEntreprise.personalInfosPage.fillForm({
+      firstName,
+      lastName,
+      phone: "0700000000",
+      email,
+    })
+    FlowCreationEntreprise.personalInfosPage.submit()
+
+    loginClient.login(email)
+  })
+})
diff --git a/cypress/e2e/manual/login-admin.cy.ts b/cypress/e2e/manual/login-admin.cy.ts
@@ -0,0 +1,9 @@
+import { loginClient } from "../../api/loginClient"
+
+describe("login-admin", () => {
+  it.skip("login-admin", () => {
+    cy.viewport(1271, 721)
+
+    loginClient.loginAsAdmin()
+  })
+})
diff --git a/server/src/jobs/lba_recruteur/formulaire/relanceFormulaire.ts b/server/src/jobs/lba_recruteur/formulaire/relanceFormulaire.ts
@@ -7,12 +7,12 @@ import { getStaticFilePath } from "@/common/utils/getStaticFilePath"
 import { getDbCollection } from "@/common/utils/mongodbUtils"
 import { sentryCaptureException } from "@/common/utils/sentryUtils"
 import { userWithAccountToUserForToken } from "@/security/accessTokenService"
+import { createAuthMagicLink, createCancelJobLink, createProvidedJobLink } from "@/services/appLinks.service"
 
 import { logger } from "../../../common/logger"
 import { asyncForEach } from "../../../common/utils/asyncUtils"
 import { notifyToSlack } from "../../../common/utils/slackUtils"
 import config from "../../../config"
-import { createCancelJobLink, createProvidedJobLink } from "../../../services/appLinks.service"
 import dayjs from "../../../services/dayjs.service"
 import mailer, { sanitizeForEmail } from "../../../services/mailer.service"
 
@@ -69,6 +69,7 @@ export const relanceFormulaire = async (threshold: number /* number of days to e
         data: {
           images: {
             logoLba: `${config.publicUrl}/images/emails/logo_LBA.png?raw=true`,
+            logoRf: `${config.publicUrl}/images/emails/logo_rf.png?raw=true`,
             logoFooter: `${config.publicUrl}/assets/logo-republique-francaise.png?raw=true`,
           },
           last_name: sanitizeForEmail(contactUser.last_name),
@@ -84,7 +85,7 @@ export const relanceFormulaire = async (threshold: number /* number of days to e
             pourvue: createProvidedJobLink(userWithAccountToUserForToken(contactUser), job._id.toString()),
           })),
           threshold,
-          url: `${config.publicUrl}/espace-pro/authentification`,
+          connectionUrl: createAuthMagicLink(userWithAccountToUserForToken(contactUser)),
         },
       })
     } catch (err) {

diff --git a/server/src/services/application.service.ts b/server/src/services/application.service.ts
@@ -54,6 +54,7 @@ const images: object = {
     check: `${imagePath}icone_check.png`,
     enveloppe: `${imagePath}icone_enveloppe.png`,
     bin: `${imagePath}icone_bin.png`,
+    recuCandidature: `${imagePath}recu-candidature.png`,
   },
 }
 
@@ -283,7 +284,7 @@ export const sendApplicationV2 = async ({
       mailer.sendEmail({
         to: application.company_email,
         subject: type === LBA_ITEM_TYPE.RECRUTEURS_LBA ? `Candidature spontanée en alternance ${application.company_name}` : `Candidature en alternance - ${application.job_title}`,
-        template: getEmailTemplate("mail-candidature"),
+        template: getEmailTemplate(type === LBA_ITEM_TYPE.RECRUTEURS_LBA ? "mail-candidature-spontanee" : "mail-candidature"),
         data: {
           ...sanitizeApplicationForEmail(application),
           ...images,
@@ -416,9 +417,9 @@ const buildRecruiterEmailUrls = async (application: IApplication) => {
       user = await getUser2ManagingOffer(getJobFromRecruiter(recruiter, application.job_id))
     }
   }
-
   const userForToken = buildUserForToken(application, user)
   const urls = {
+    jobUrl: "",
     meetCandidateUrl: buildReplyLink(application, ApplicantIntention.ENTRETIEN, userForToken),
     waitCandidateUrl: buildReplyLink(application, ApplicantIntention.NESAISPAS, userForToken),
     refuseCandidateUrl: buildReplyLink(application, ApplicantIntention.REFUS, userForToken),
@@ -434,6 +435,9 @@ const buildRecruiterEmailUrls = async (application: IApplication) => {
     urls.jobProvidedUrl = createProvidedJobLink(userForToken, application.job_id, utmRecruiterData)
     urls.cancelJobUrl = createCancelJobLink(userForToken, application.job_id, utmRecruiterData)
   }
+  if (application.job_id) {
+    urls.jobUrl = `${config.publicUrl}/recherche-apprentissage?display=list&page=fiche&type=matcha&itemId=${application.job_id}${utmRecruiterData}`
+  }
 
   return urls
 }

diff --git a/server/src/services/etablissement.service.ts b/server/src/services/etablissement.service.ts
@@ -856,6 +856,7 @@ export const sendEmailConfirmationEntreprise = async (
       data: {
         images: {
           logoLba: `${config.publicUrl}/images/emails/logo_LBA.png?raw=true`,
+          logoRf: `${config.publicUrl}/images/emails/logo_rf.png?raw=true`,
         },
         nom: sanitizeForEmail(user.last_name),
         prenom: sanitizeForEmail(user.first_name),
@@ -866,6 +867,7 @@ export const sendEmailConfirmationEntreprise = async (
           job_type: offre.job_type,
           job_level_label: offre.job_level_label,
           job_start_date: dayjs(offre.job_start_date).format("DD/MM/YY"),
+          delegations: offre.delegations,
         },
         isUserAwaiting,
       },

diff --git a/server/src/services/formulaire.service.ts b/server/src/services/formulaire.service.ts
@@ -230,7 +230,12 @@ export const createJobDelegations = async ({ jobId, etablissementCatalogueIds }:
       etablissement_gestionnaire_courriel: { $nin: [null, ""] },
       catalogue_published: true,
     },
-    { etablissement_gestionnaire_courriel: 1, etablissement_formateur_siret: 1, etablissement_gestionnaire_id: 1, etablissement_formateur_id: 1 }
+    {
+      etablissement_gestionnaire_courriel: 1,
+      etablissement_formateur_siret: 1,
+      etablissement_gestionnaire_id: 1,
+      etablissement_formateur_id: 1,
+    }
   )
 
   await Promise.all(
@@ -683,6 +688,7 @@ export async function sendMailNouvelleOffre(recruiter: IRecruiter, job: IJob, co
     data: {
       images: {
         logoLba: `${config.publicUrl}/images/emails/logo_LBA.png?raw=true`,
+        logoRf: `${config.publicUrl}/images/emails/logo_rf.png?raw=true`,
       },
       nom: sanitizeForEmail(is_delegated ? contactCFA?.last_name : last_name),
       prenom: sanitizeForEmail(is_delegated ? contactCFA?.first_name : first_name),

diff --git a/server/src/services/userRecruteur.service.ts b/server/src/services/userRecruteur.service.ts
@@ -354,10 +354,16 @@ export const sendWelcomeEmailToUserRecruteur = async (user: IUserWithAccount) =>
   if (!organization) {
     throw Boom.internal(`inattendu : pas d'organization pour user id=${user._id} et role id=${role._id}`)
   }
+  const recruiter = await getDbCollection("recruiters").findOne({ managed_by: user._id.toString() })
+  if (!recruiter) {
+    throw Boom.internal(`inattendu : pas de recruiter pour user id=${user._id} et role id=${role._id}`)
+  }
+  const hasJobs = Boolean(recruiter.jobs.length)
+
   await mailer.sendEmail({
     to: email,
     subject: "Bienvenue sur La bonne alternance",
-    template: getStaticFilePath("./templates/mail-bienvenue.mjml.ejs"),
+    template: getStaticFilePath(!hasJobs && !isCfa ? "./templates/mail-bienvenue-entreprise-sans-offre.mjml.ejs" : "./templates/mail-bienvenue.mjml.ejs"),
     data: {
       images: {
         logoLba: `${config.publicUrl}/images/emails/logo_LBA.png?raw=true`,

diff --git a/server/static/templates/mail-bienvenue-entreprise-sans-offre.mjml.ejs b/server/static/templates/mail-bienvenue-entreprise-sans-offre.mjml.ejs
@@ -0,0 +1,165 @@
+<mjml>
+  <mj-head>
+    <mj-preview></mj-preview>
+    <mj-breakpoint width="480px"></mj-breakpoint>
+    <mj-attributes>
+      <mj-all padding="0"></mj-all>
+    </mj-attributes>
+    <mj-style>
+      @media only screen and (max-width: 799px) {
+        .text > div {
+            text-align: inherit !important;
+        }
+
+        .wrapper > table > tbody > tr > td {
+            padding-left: 0px !important;
+            padding-right: 0px !important;
+        }
+
+        .section > table > tbody > tr > td {
+            padding-left: 20px !important;
+            padding-right: 20px !important;
+        }
+
+        .column > table > tbody > tr > td {
+            padding-left: 0px !important;
+            padding-right: 0px !important;
+        }
+
+        .padB40 {
+            padding-bottom: 40px !important;
+        }
+
+        .image {
+            padding-left: 0px !important;
+            padding-right: 0px !important;
+        }
+
+        .image > table {
+            text-align: center !important;
+            margin: 0 auto !important;
+        }
+
+        .divider {
+            padding-left: 0px !important;
+            padding-right: 0px !important;
+        }
+
+        .button > table {
+            width: 100% !important;
+        }
+
+        .button > table > tbody > tr > td > a {
+            width: 80% !important;
+        }
+    }
+    </mj-style>
+    <mj-style inline="inline">
+      .column > table { border-collapse: separate; }
+    </mj-style>
+    <mj-font href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@700&display=swap" name="Public Sans"></mj-font>
+  </mj-head>
+  <mj-body background-color="#f5f5fe" name="Entreprise - notif compte validé" width="800px">
+    <mj-wrapper border-radius="0px" css-class="wrapper" padding="32px 100px 32px 100px">
+      <mj-section border-radius="0px" css-class="section" name="mj-section_group">
+        <mj-group>
+          <mj-column border-radius="0px" css-class="column" vertical-align="middle" width="14.83%">
+            <mj-image align="left" alt="Image" css-class="image" src="<%= data.images.logoRf %>" width="89px">
+
+            </mj-image>
+          </mj-column>
+          <mj-column border-radius="0px" css-class="column" padding="0px 24px 0px 24px" vertical-align="middle" width="34.83%">
+            <mj-image align="left" alt="Image" css-class="image" padding="17px 0px 17px 0px" src="<%= data.images.logoLba %>" width="160px">
+
+            </mj-image>
+          </mj-column>
+          <mj-column border-radius="0px" css-class="column" vertical-align="top" width="50.33%">
+
+          </mj-column>
+        </mj-group>
+      </mj-section>
+      <mj-spacer height="24px">
+
+      </mj-spacer>
+      <mj-section background-color="#ffffff" border-radius="4px" border="1px solid #e3e3fd" css-class="section" name="mj-section_group" padding="23px 23px 23px 23px">
+        <mj-group>
+          <mj-column border-radius="0px" css-class="column" vertical-align="middle" width="-99.28000000000002%">
+            <mj-text align="left" color="#161616" css-class="text" font-family="Arial, Helvetica, Verdana, sans-serif" font-size="16px" font-weight="400" line-height="24px" padding="0px 0px 24px 0px">
+              Bonjour <%= data.first_name %> <%= data.last_name %>,
+<br/>
+            </mj-text>
+            <mj-text align="left" color="#161616" css-class="text" font-family="Arial, Helvetica, Verdana, sans-serif" font-size="16px" font-weight="400" line-height="24px" padding="0px 0px 24px 0px">
+              Félicitations, votre votre compte La bonne alternance est créé pour l’entreprise :
+<br/>
+            </mj-text>
+            <mj-text align="left" color="#161616" css-class="text" font-family="Arial, Helvetica, Verdana, sans-serif" font-size="16px" font-weight="700" line-height="24px" padding="0px 0px 24px 0px">
+              <%= data.establishment_name %>
+<br/>
+            </mj-text>
+            <mj-text align="left" color="#161616" css-class="text" font-family="Arial, Helvetica, Verdana, sans-serif" font-size="16px" font-weight="400" line-height="24px">
+              Accédez à votre espace et publiez vos offres en quelques clics afin de les diffuser auprès des jeunes sur les sites : Parcoursup, Affelnet, 1jeune1solution, et La bonne alternance.
+<br/>
+            </mj-text>
+          </mj-column>
+          <mj-column border-radius="0px" css-class="column" padding="0px 0px 0px 0px" vertical-align="middle" width="99.64%">
+            <mj-text align="left" color="#161616" css-class="text" font-family="Arial, Helvetica, Verdana, sans-serif" font-size="16px" font-weight="400" line-height="24px" padding="12px 0px 0px 0px">
+              Votre identifiant :
+<br/>
+            </mj-text>
+            <mj-text align="left" color="#161616" css-class="text" font-family="Arial, Helvetica, Verdana, sans-serif" font-size="16px" font-weight="700" line-height="24px" padding="0px 0px 12px 0px">
+              <%= data.email %>
+<br/>
+            </mj-text>
+          </mj-column>
+          <mj-column border-radius="0px" css-class="column" vertical-align="middle" width="99.64%">
+            <mj-text align="left" color="#161616" css-class="text" font-family="Arial, Helvetica, Verdana, sans-serif" font-size="14px" font-style="italic" font-weight="400" line-height="24px" padding="0px 0px 24px 0px">
+              Pas besoin de mot de passe avec La bonne alternance. Pour vous connecter, renseignez votre adresse mail afin de recevoir un lien de connexion sécurisé. 
+<br/>
+            </mj-text>
+            <mj-button href="<%= data.confirmation_url %>" align="center" background-color="#000091" border-radius="0px" color="#ffffff" css-class="button" font-family="Arial, Helvetica, Verdana, sans-serif" font-size="14px" font-weight="700" inner-padding="4px 0px 4px 0px" line-height="24px" padding="0px 0px 24px 0px" width="152px">
+              Déposer une offre
+            </mj-button>
+            <mj-text align="left" color="#161616" css-class="text" font-family="Arial, Helvetica, Verdana, sans-serif" font-size="14px" font-weight="400" line-height="22px">
+              Si le bouton ne fonctionne pas, copiez le lien suivant dans votre navigateur :
+<br/><%= data.confirmation_url %>
+<br/>
+            </mj-text>
+          </mj-column>
+        </mj-group>
+      </mj-section>
+      <mj-spacer height="24px">
+
+      </mj-spacer>
+      <mj-section border-radius="4px" css-class="section" name="mj-section_group">
+        <mj-group>
+          <mj-column border-radius="0px" css-class="column" vertical-align="middle" width="100%">
+            <mj-text align="left" color="#666666" css-class="text" font-family="Arial, Helvetica, Verdana, sans-serif" font-size="14px" font-weight="400" line-height="24px">
+              Ce courriel est généré automatiquement, vous ne pouvez pas y répondre.
+<br/>Pour toute question, consultez notre <a href="https://labonnealternance.apprentissage.beta.gouv.fr/faq" style="text-decoration: underline; color: inherit;">FAQ</a> ou écrivez-nous à <a href="mailto:labonnealternance@apprentissage.beta.gouv.fr" style="text-decoration: underline; color: inherit;">labonnealternance@apprentissage.beta.gouv.fr</a>
+<br/>
+            </mj-text>
+          </mj-column>
+        </mj-group>
+      </mj-section>
+      <mj-spacer height="24px">
+
+      </mj-spacer>
+      <mj-section border-radius="4px" css-class="section" name="mj-section_group">
+        <mj-group>
+          <mj-column border-radius="0px" css-class="column" vertical-align="middle" width="100%">
+            <mj-text align="left" color="#666666" css-class="text" font-family="Arial, Helvetica, Verdana, sans-serif" font-size="14px" font-weight="400" line-height="24px">
+              La bonne alternance est un site développé par la Mission interministérielle pour l'apprentissage, au sein de l’État, conformément aux missions d’intérêt public du ministère du Travail, du Plein emploi et de l’Insertion.
+<br/>
+<br/>Nous vous contactons car vous avez créé un compte entreprise pour déposer des offres d'emploi en alternance. 
+<br/>
+<br/>Nous ne faisons aucune utilisation commerciale de vos adresses e-mail. Vous bénéficiez d’un droit d’opposition que vous pouvez utiliser à tout moment via l’adresse <a href="mailto:labonnealternance@apprentissage.beta.gouv.fr?subject=Droit%20opposition" style="font-family: Arial, Helvetica, Verdana, sans-serif; font-weight: 400; text-decoration: underline; color: inherit;">labonnealternance@apprentissage.beta.gouv.fr</a>
+<br/>
+<br/>Si vos droits ne sont pas respectés, vous pouvez à tout moment introduire une réclamation auprès de la CNIL. Pour plus d’informations sur le traitement de vos données, vous pouvez vous rendre sur la <a href="https://labonnealternance.apprentissage.beta.gouv.fr/politique-de-confidentialite" style="font-family: Arial, Helvetica, Verdana, sans-serif; font-weight: 400; text-decoration: underline; color: inherit;">politique de confidentialité</a> de La bonne alternance.
+<br/>
+            </mj-text>
+          </mj-column>
+        </mj-group>
+      </mj-section>
+    </mj-wrapper>
+  </mj-body>
+</mjml>
diff --git a/server/static/templates/mail-bienvenue.mjml.ejs b/server/static/templates/mail-bienvenue.mjml.ejs
@@ -65,12 +65,12 @@
       <mj-section border-radius="0px" css-class="section" name="mj-section_group">
         <mj-group>
           <mj-column border-radius="0px" css-class="column" vertical-align="middle" width="14.83%">
-            <mj-image align="left" alt="Image" css-class="image" href="#" src="<%= data.images.logoRf %>" width="89px">
+            <mj-image align="left" alt="Image" css-class="image" src="<%= data.images.logoRf %>" width="89px">
 
             </mj-image>
           </mj-column>
           <mj-column border-radius="0px" css-class="column" padding="0px 24px 0px 24px" vertical-align="middle" width="34.83%">
-            <mj-image align="left" alt="Image" css-class="image" href="#" padding="17px 0px 17px 0px" src="<%= data.images.logoLba %>" width="160px">
+            <mj-image align="left" alt="Image" css-class="image" padding="17px 0px 17px 0px" src="<%= data.images.logoLba %>" width="160px">
 
             </mj-image>
           </mj-column>
@@ -113,7 +113,7 @@
               Pas besoin de mot de passe avec La bonne alternance. Pour vous connecter, renseignez votre adresse mail afin de recevoir un lien de connexion sécurisé. 
 <br/>
             </mj-text>
-            <mj-button href="<%= data.confirmation_url %>" align="center" background-color="#000091" border-radius="0px" border="1px solid #000091" color="#ffffff" css-class="button" font-family="Arial, Helvetica, Verdana, sans-serif" font-size="14px" font-weight="700" href="#" inner-padding="4px 0px 4px 0px" line-height="24px" padding="0px 0px 12px 0px" width="184px">
+            <mj-button href="<%= data.confirmation_url %>" align="center" background-color="#000091" border-radius="0px" border="1px solid #000091" color="#ffffff" css-class="button" font-family="Arial, Helvetica, Verdana, sans-serif" font-size="14px" font-weight="700" inner-padding="4px 0px 4px 0px" line-height="24px" padding="0px 0px 12px 0px" width="184px">
               Accéder à mon espace
             </mj-button>
           </mj-column>
@@ -123,7 +123,7 @@
 <br/>
             </mj-text>
             <mj-text align="left" color="#161616" css-class="text" font-family="Arial, Helvetica, Verdana, sans-serif" font-size="14px" font-weight="400" line-height="22px" padding="0px 0px 12px 0px">
-              Si le lien ne fonctionne pas, copier coller le lien suivant dans votre navigateur :
+              Si le lien ne fonctionne pas, copiez le lien suivant dans votre navigateur :
 <br/><%= data.confirmation_url %>
 <br/>
             </mj-text>
@@ -137,20 +137,36 @@
         <mj-group>
         <mj-column border-radius="0px" css-class="column" vertical-align="middle"
         width="100%">
-        <mj-text align="left" color="#666666" css-class="text" font-
-        family="Arial, Helvetica, Verdana, sans-serif" font-size="14px" font-weight="400"
+        <mj-text align="left" color="#666666" css-class="text" font-family="Arial, Helvetica, Verdana, sans-serif" font-size="14px" font-weight="400"
         line-height="24px">
         Ce courriel est généré automatiquement, vous ne pouvez pas y
         répondre.
         <br/>Pour toute question, consultez notre <a
         href="https://labonnealternance.apprentissage.beta.gouv.fr/faq" style="text-decoration: underline; color: inherit;">FAQ</a> ou écrivez-nous à <a
-        href="mailto:labonnealternance@apprentissage.beta.gouv.fr?subject=Page%20Contact"
+        href="mailto:labonnealternance@apprentissage.beta.gouv.fr"
         style="text-decoration: underline; color: inherit;">labonnealternance@apprentissage.beta.gouv.fr</a>
         <br/>
         </mj-text>
         </mj-column>
         </mj-group>
         </mj-section>
+        <mj-spacer height="24px"></mj-spacer>
+        <mj-section border-radius="4px" css-class="section" name="mj-section_group">
+          <mj-group>
+            <mj-column border-radius="0px" css-class="column" vertical-align="middle" width="100%">
+              <mj-text align="left" color="#666666" css-class="text" font-family="Arial, Helvetica, Verdana, sans-serif" font-size="14px" font-weight="400" line-height="24px">
+                La bonne alternance est un site développé par la Mission interministérielle pour l'apprentissage, au sein de l’État, conformément aux missions d’intérêt public du ministère du Travail, du Plein emploi et de l’Insertion.
+  <br/>
+  <br/>Nous vous contactons car vous avez créé un compte entreprise pour déposer des offres d'emploi en alternance.
+  <br/>
+  <br/>Nous ne faisons aucune utilisation commerciale de vos adresses e-mail. Vous bénéficiez d’un droit d’opposition que vous pouvez utiliser à tout moment via l’adresse <a href="mailto:labonnealternance@apprentissage.beta.gouv.fr?subject=Droit%20opposition" style="font-family: Arial, Helvetica, Verdana, sans-serif; font-weight: 400; text-decoration: underline; color: inherit;">labonnealternance@apprentissage.beta.gouv.fr</a>
+  <br/>
+  <br/>Si vos droits ne sont pas respectés, vous pouvez à tout moment introduire une réclamation auprès de la CNIL. Pour plus d’informations sur le traitement de vos données, vous pouvez vous rendre sur la <a href="https://labonnealternance.apprentissage.beta.gouv.fr/politique-de-confidentialite" style="font-family: Arial, Helvetica, Verdana, sans-serif; font-weight: 400; text-decoration: underline; color: inherit;">politique de confidentialité</a> de La bonne alternance.
+  <br/>
+              </mj-text>
+            </mj-column>
+          </mj-group>
+        </mj-section>
     </mj-wrapper>
   </mj-body>
 </mjml>
diff --git a/server/static/templates/mail-candidature-spontanee.mjml.ejs b/server/static/templates/mail-candidature-spontanee.mjml.ejs
diff --git a/server/static/templates/mail-candidature.mjml.ejs b/server/static/templates/mail-candidature.mjml.ejs
diff --git a/server/static/templates/mail-confirmation-email.mjml.ejs b/server/static/templates/mail-confirmation-email.mjml.ejs
@@ -21,7 +21,7 @@
         <mj-text>Il ne reste plus qu'une étape avant de pouvoir utiliser votre compte : la vérification de votre adresse mail, en cliquant sur le lien ci-dessous :</mj-text>
 
         <mj-button color="#ffffff" background-color="#000091" href="<%= data.confirmation_url %>"> Vérifier mon adresse mail </mj-button>
-        <mj-text>Si le lien ne fonctionne pas, copier le lien suivant dans le navigateur :</mj-text>
+        <mj-text>Si le lien ne fonctionne pas, copiez le lien suivant dans le navigateur :</mj-text>
         <mj-text><%= data.confirmation_url %></mj-text>
         <mj-text>
           L'équipe La bonne alternance, <br />

diff --git a/server/static/templates/mail-expiration-offres.mjml.ejs b/server/static/templates/mail-expiration-offres.mjml.ejs
@@ -1,67 +1,182 @@
 <% var dansXjours = data.threshold === 1 ? 'demain' : 'dans '+data.threshold+' jours' %>
+<% var offre = data.offres[0] %>
 <mjml>
   <mj-head>
-    <mj-title>Expiration prochaine de vos offres</mj-title>
-    <mj-font name="Work Sans" href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;700&display=swap" />
-    <mj-style inline="inline"> .grey {color: #1E1E1E;} </mj-style>
+    <mj-preview></mj-preview>
+    <mj-breakpoint width="480px"></mj-breakpoint>
     <mj-attributes>
-      <mj-text color="#242424" font-family="Work Sans, Arial" font-size="16px" line-height="24px" />
-      <mj-button font-size="16px" line-height="24px" padding="8px 24px" font-family="Work Sans, Arial" height="40px" />
+      <mj-all padding="0"></mj-all>
     </mj-attributes>
-  </mj-head>
-  <mj-body background-color="#E5E5E5">
-    <mj-section>
-      <mj-column>
-        <mj-image src="<%= data.images.logoLba %>" width="150px" alt="Logo du site La bonne alternance" />
-      </mj-column>
-    </mj-section>
+    <mj-style>
+      @media only screen and (max-width: 799px) {
+        .text > div {
+            text-align: inherit !important;
+        }
+
+        .wrapper > table > tbody > tr > td {
+            padding-left: 0px !important;
+            padding-right: 0px !important;
+        }
+
+        .section > table > tbody > tr > td {
+            padding-left: 20px !important;
+            padding-right: 20px !important;
+        }
+
+        .column > table > tbody > tr > td {
+            padding-left: 0px !important;
+            padding-right: 0px !important;
+        }
+
+        .padB40 {
+            padding-bottom: 40px !important;
+        }
 
-    <mj-section padding-top="0">
-      <mj-column width="600px" background-color="#FFFFFF" border-radius="4px" border="1px solid #FFFFFF" padding="20px 10px">
-        <mj-text> Bonjour <%= data.first_name %> <%= data.last_name %>, </mj-text>
-        <% if(data.is_delegated){ %>
-        <mj-text>L'offre d'alternance que vous avez publiée pour <%= data.establishment_raison_sociale %> expire <%= dansXjours %></mj-text>
-        <% } else { %>
-        <mj-text> La diffusion de votre offre d'alternance expire <%= dansXjours %> et ne sera bientôt plus visible par les jeunes. </mj-text>
-        <% } %>
+        .image {
+            padding-left: 0px !important;
+            padding-right: 0px !important;
+        }
 
-        <mj-text>Dîtes-nous où vous en êtes de votre recrutement.</mj-text>
+        .image > table {
+            text-align: center !important;
+            margin: 0 auto !important;
+        }
+
+        .divider {
+            padding-left: 0px !important;
+            padding-right: 0px !important;
+        }
+
+        .button > table {
+            width: 100% !important;
+        }
+
+        .button > table > tbody > tr > td > a {
+            width: 80% !important;
+        }
+    }
+    </mj-style>
+    <mj-style inline="inline">
+      .column > table { border-collapse: separate; }
+    </mj-style>
+    <mj-font href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@700&display=swap" name="Public Sans"></mj-font>
+  </mj-head>
+  <mj-body background-color="#f5f5fe" name="Entreprise - Rappel " width="800px">
+    <mj-wrapper border-radius="0px" css-class="wrapper" padding="32px 100px 32px 100px">
+      <mj-section border-radius="0px" css-class="section" name="mj-section_group">
+        <mj-group>
+          <mj-column border-radius="0px" css-class="column" vertical-align="middle" width="14.83%">
+            <mj-image align="left" alt="" css-class="image" src="<%= data.images.logoRf %>" width="89px">
 
-        <mj-text font-weight="700" padding-bottom="24px">Rappel de vos offres :</mj-text>
+            </mj-image>
+          </mj-column>
+          <mj-column border-radius="0px" css-class="column" padding="0px 24px 0px 24px" vertical-align="middle" width="34.83%">
+            <mj-image align="left" alt="" css-class="image" padding="17px 0px 17px 0px" src="<%= data.images.logoLba %>" width="160px">
 
-        <% data.offres.forEach((offre) => { %>
+            </mj-image>
+          </mj-column>
+          <mj-column border-radius="0px" css-class="column" vertical-align="top" width="50.33%">
 
-        <mj-wrapper padding="0px 0px 12px 0px">
-          <mj-column width="548px" padding="10px 0px" background-color="#F6F6F6">
-            <mj-text padding-bottom="0px">Métier: <b><%= offre.rome_appellation_label %></b> </mj-text>
-            <mj-text padding-bottom="0px" padding-top="0px">Type de contrat: <b><%= offre.job_type %></b> </mj-text>
-            <mj-text padding-bottom="0px" padding-top="0px">Niveau de formation: <b><%= offre.job_level_label %></b> </mj-text>
-            <mj-text padding-top="0px">Date de début: <b><%= offre.job_start_date %></b> </mj-text>
-            <mj-text padding-top="0" padding-bottom="0"><a href="<%= offre.pourvue %>">L'offre est pourvue</a></mj-text>
-            <mj-text padding-top="0"><a href="<%= offre.supprimer %>">Supprimer l'offre</a></mj-text>
           </mj-column>
-        </mj-wrapper>
+        </mj-group>
+      </mj-section>
+      <mj-spacer height="24px">
 
-        <% }); %>
+      </mj-spacer>
+      <mj-section background-color="#ffffff" border-radius="4px" border="1px solid #e3e3fd" css-class="section" name="mj-section_group" padding="23px 23px 23px 23px">
+        <mj-group>
+          <mj-column border-radius="0px" css-class="column" vertical-align="middle" width="99.64%">
+            <mj-text align="left" color="#161616" css-class="text" font-family="Arial, Helvetica, Verdana, sans-serif" font-size="16px" font-weight="400" line-height="24px" padding="0px 0px 16px 0px">
+              Bonjour <%= data.first_name %> <%= data.last_name %>,
+<br/>
+            </mj-text>
+            <mj-text align="left" color="#161616" css-class="text" font-family="Arial, Helvetica, Verdana, sans-serif" font-size="16px" font-weight="400" line-height="24px" padding="0px 0px 16px 0px">
+              <span style="color: #161616;">L’offre d’alternance que vous avez publiée pour</span><span style="font-family: Arial, Helvetica, Verdana, sans-serif; font-weight: 700; color: #161616;"> <%= data.establishment_raison_sociale %> </span><span style="color: #161616;">expire <%= dansXjours %>.</span>
+<br/>
+            </mj-text>
+            <mj-text align="left" color="#161616" css-class="text" font-family="Arial, Helvetica, Verdana, sans-serif" font-size="16px" font-weight="400" line-height="24px" padding="0px 0px 16px 0px">
+              Connectez-vous à votre espace afin de gérer vos offres :
+<br/>
+            </mj-text>
+            <mj-button href="<%= data.connectionUrl %>" align="center" background-color="#000091" border-radius="0px" border="1px solid #000091" color="#ffffff" css-class="button" font-family="Arial, Helvetica, Verdana, sans-serif" font-size="14px" font-weight="700" inner-padding="4px 0px 4px 0px" line-height="24px" padding="0px 0px 0px 0px" width="123px">
+              Me connecter
+            </mj-button>
+          </mj-column>
+        </mj-group>
+      </mj-section>
+      <mj-spacer height="24px">
 
-        <mj-text padding-top="24px">Connectez-vous à votre espace pour gérer l’intégralité de vos offres :</mj-text>
-        <mj-button color="#ffffff" background-color="#000091" href="<%= data.url %>" padding-bottom="24px"> Se connecter </mj-button>
+      </mj-spacer>
+      <mj-section background-color="#ffffff" border-radius="4px" border="1px solid #e3e3fd" css-class="section" name="mj-section_group" padding="11px 23px 11px 23px">
+        <mj-group>
+          <mj-column border-radius="0px" css-class="column" padding="0px 0px 0px 0px" vertical-align="middle" width="-198.92000000000002%">
+            <mj-text align="left" color="#000091" css-class="text" font-family="Arial, Helvetica, Verdana, sans-serif" font-size="20px" font-weight="700" line-height="22px" padding="10px 0px 10px 0px">
+              Rappel de l’offre
+<br/>
+            </mj-text>
+          </mj-column>
+          <mj-column border-radius="0px" css-class="column" padding="0px 0px 0px 0px" vertical-align="middle" width="99.64%">
+            <mj-text align="left" color="#161616" css-class="text" font-family="Arial, Helvetica, Verdana, sans-serif" font-size="16px" font-weight="400" line-height="24px" padding="10px 0px 0px 0px">
+              Métier :
+<br/>
+            </mj-text>
+            <mj-text align="left" color="#161616" css-class="text" font-family="Arial, Helvetica, Verdana, sans-serif" font-size="16px" font-weight="700" line-height="24px" padding="0px 0px 10px 0px">
+              <%= offre.rome_appellation_label %>
+<br/>
+            </mj-text>
+          </mj-column>
+          <mj-column border-radius="0px" css-class="column" padding="0px 0px 0px 0px" vertical-align="middle" width="99.64%">
+            <mj-text align="left" color="#161616" css-class="text" font-family="Arial, Helvetica, Verdana, sans-serif" font-size="16px" font-weight="400" line-height="24px" padding="10px 0px 0px 0px">
+              Type :
+<br/>
+            </mj-text>
+            <mj-text align="left" color="#161616" css-class="text" font-family="Arial, Helvetica, Verdana, sans-serif" font-size="16px" font-weight="700" line-height="24px" padding="0px 0px 10px 0px">
+              <%= offre.job_type %>
+<br/>
+            </mj-text>
+          </mj-column>
+          <mj-column border-radius="0px" css-class="column" padding="0px 478px 0px 0px" vertical-align="top" width="100%">
+            <mj-text align="left" color="#161616" css-class="text" font-family="Arial, Helvetica, Verdana, sans-serif" font-size="16px" font-weight="400" line-height="24px" padding="10px 0px 10px 0px" text-decoration="underline">
+              <a href="<%= offre.supprimer %>" style="text-decoration: underline; color: inherit;">
+                Supprimer
+              </a>
+<br/>
+            </mj-text>
+          </mj-column>
+        </mj-group>
+      </mj-section>
+      <mj-spacer height="24px">
 
-        <mj-section padding="0px">
-          <mj-column>
-            <mj-divider border-width="1px" border-color="#E3E3FD" />
+      </mj-spacer>
+      <mj-section border-radius="4px" css-class="section" name="mj-section_group">
+        <mj-group>
+          <mj-column border-radius="0px" css-class="column" vertical-align="middle" width="100%">
+            <mj-text align="left" color="#666666" css-class="text" font-family="Arial, Helvetica, Verdana, sans-serif" font-size="14px" font-weight="400" line-height="24px">
+              Ce courriel est généré automatiquement, vous ne pouvez pas y répondre.
+<br/>Pour toute question, consultez notre <a href="https://labonnealternance.apprentissage.beta.gouv.fr/faq" style="text-decoration: underline; color: inherit;">FAQ</a> ou écrivez-nous à <a href="mailto:labonnealternance@apprentissage.beta.gouv.fr" style="text-decoration: underline; color: inherit;">labonnealternance@apprentissage.beta.gouv.fr</a>
+<br/>
+            </mj-text>
+          </mj-column>
+        </mj-group>
+      </mj-section>
+      <mj-spacer height="24px">
+      </mj-spacer>
+      <mj-section border-radius="4px" css-class="section" name="mj-section_group">
+        <mj-group>
+          <mj-column border-radius="0px" css-class="column" vertical-align="middle" width="100%">
+            <mj-text align="left" color="#666666" css-class="text" font-family="Arial, Helvetica, Verdana, sans-serif" font-size="14px" font-weight="400" line-height="24px">
+              La bonne alternance est un site développé par la Mission interministérielle pour l'apprentissage, au sein de l’État, conformément aux missions d’intérêt public du ministère du Travail, du Plein emploi et de l’Insertion.
+<br/>
+<br/>Nous vous contactons car vous avez déposé une offre d'emploi en alternance.
+<br/>
+<br/>Nous ne faisons aucune utilisation commerciale de vos adresses e-mail. Vous bénéficiez d’un droit d’opposition que vous pouvez utiliser à tout moment via l’adresse <a href="mailto:labonnealternance@apprentissage.beta.gouv.fr?subject=Droit%20opposition" style="font-family: Arial, Helvetica, Verdana, sans-serif; font-weight: 400; text-decoration: underline; color: inherit;">labonnealternance@apprentissage.beta.gouv.fr</a>
+<br/>
+<br/>Si vos droits ne sont pas respectés, vous pouvez à tout moment introduire une réclamation auprès de la CNIL. Pour plus d’informations sur le traitement de vos données, vous pouvez vous rendre sur la <a href="https://labonnealternance.apprentissage.beta.gouv.fr/politique-de-confidentialite" style="font-family: Arial, Helvetica, Verdana, sans-serif; font-weight: 400; text-decoration: underline; color: inherit;">politique de confidentialité</a> de La bonne alternance.
+<br/>
+            </mj-text>
           </mj-column>
-        </mj-section>
-        <mj-text>
-          L'équipe La bonne alternance, <br />
-          Mission interministérielle pour l'apprentissage
-        </mj-text>
-      </mj-column>
-    </mj-section>
-    <mj-section padding-top="30px">
-      <mj-column>
-        <mj-image src="<%= data.images.logoFooter %>" width="200px" align="left"></mj-image>
-      </mj-column>
-    </mj-section>
+        </mj-group>
+      </mj-section>
+    </mj-wrapper>
   </mj-body>
 </mjml>
diff --git a/server/static/templates/mail-nouvelle-offre-depot-simplifie.mjml.ejs b/server/static/templates/mail-nouvelle-offre-depot-simplifie.mjml.ejs
diff --git a/server/static/templates/mail-nouvelle-offre.mjml.ejs b/server/static/templates/mail-nouvelle-offre.mjml.ejs
diff --git a/ui/public/images/emails/recu-candidature.png b/ui/public/images/emails/recu-candidature.png