Feat: Nouveau Modal coop (#688)

* message coop

* resolve lint

* rectif wording

src/components/anonymous/Login.js

@@ -36,6 +36,9 @@ function Login() {
   const errorCheckEmail = useSelector(state => state.checkMotDePasseOublie?.error);
   const messageCodeVerified = useSelector(state => state.authentication?.messageCodeVerified);
   const formatRole = role => role?.replace(/(^\w{1})|([\s,-]+\w{1})/g, letter => letter.toUpperCase());
+  const urlFaq = import.meta.env.VITE_APP_AIDE_URL;
+  const urlNouvelleVersionCoop =
+  'https://lesbases.anct.gouv.fr/ressources/l-espace-coop-devient-la-coop-de-la-mediation-numerique-quels-changements-quelles-nouveautes';
 
   useEffect(() => {
     dispatch(userActions.logout());
@@ -154,6 +157,20 @@ function Login() {
       {/* Start content */}
       <div className="fr-container" style={{ backgroundColor: '#2a2a2a', margin: '0px', maxWidth: 'unset' }}>
         <div className="fr-grid-row fr-grid-row--gutters fr-py-xs-1w fr-py-md-8w" style={{ marginBottom: 0 }}>
+          <div className="fr-callout fr-icon-information-line">
+            <h3 className="fr-callout__title">Votre Espace Coop fait peau neuve !</h3>
+            <p className="fr-callout__text">
+              A partir du 15.11.2024, l&lsquo;espace coop cèdera sa place à un nouvel outil : La Coop de la médiation.
+              Retrouvez les nouveautés de cette nouvelle version <a href={urlNouvelleVersionCoop}>ici</a>.
+              <br /><br />
+              Pour que le transfert de votre compte soit effectif, nous vous invitons à renseigner votre adresse e-mail
+              professionnelle dans la rubrique &quot;Mes informations&quot;.
+              L&lsquo;adresse e-mail renseignée vous permettra de vous connecter à la Coop de la médiation dès le 15.11.2024.
+              Pour plus d&lsquo;informations, consultez le <a
+                href={`${urlFaq}/article/fin-de-la-messagerie-conseiller-numeriquefr-mettre-a-jour-mon-adresse-professionnelle-15v1vlk/`}>
+                tutoriel</a>.
+            </p>
+          </div>
           <div className="margeLeft"></div>
           {/* Title */}
           <div className="fr-col-xs-12 fr-col-sm-12 fr-col-md-5 fr-mt-xs-1w fr-mt-md-8w">