diff --git a/src/components/Connection/ConnectionInfoCreationEnedisAccountModal.tsx b/src/components/Connection/ConnectionInfoCreationEnedisAccountModal.tsx
index c7cea4b73c69c816f017a21d007846bd0542b163..c6f08e7c51a74bd575eb37fa57873b76b5795798 100644
--- a/src/components/Connection/ConnectionInfoCreationEnedisAccountModal.tsx
+++ b/src/components/Connection/ConnectionInfoCreationEnedisAccountModal.tsx
@@ -10,13 +10,13 @@ import CloseIcon from 'assets/icons/ico/close.svg'
interface ConnectionInfoCreationEnedisAccountModalProps {
open: boolean
handleCloseClick: () => void
- handleValidateClick: () => void
+ handleSubmit: () => void
}
const ConnectionInfoCreationEnedisAccountModal: React.FC<ConnectionInfoCreationEnedisAccountModalProps> = ({
open,
handleCloseClick,
- handleValidateClick,
+ handleSubmit,
}: ConnectionInfoCreationEnedisAccountModalProps) => {
const { t } = useI18n()
@@ -33,51 +33,48 @@ const ConnectionInfoCreationEnedisAccountModal: React.FC<ConnectionInfoCreationE
}}
>
<div id={'accessibility-title'}>
- {t(
- 'connection_info_creation_enedis_account.accessibility.window_title'
- )}
+ {t('auth.enedisgrandlyon.infoModal.accessibility.window_title')}
</div>
<IconButton
aria-label={t(
- 'connection_info_creation_enedis_account.accessibility.button_close'
+ 'auth.enedisgrandlyon.infoModal.accessibility.button_close'
)}
className="modal-paper-close-button"
onClick={handleCloseClick}
>
<Icon icon={CloseIcon} size={16} />
</IconButton>
- <div className="infoCreationEnedisAccountModal">
- <div className="info-creation-content">
- <div className="line">
- {t('connection_info_creation_enedis_account.content.part_1')}
- </div>
- <div className="line">
- {t('connection_info_creation_enedis_account.content.part_2')}
- </div>
- <div className="line">
- {t('connection_info_creation_enedis_account.content.part_3')}
- </div>
- <div className="line">
- {t('connection_info_creation_enedis_account.content.part_4')}
- </div>
- <div className="line">
- {t('connection_info_creation_enedis_account.content.part_5')}
- </div>
- <div className="endline">
- {t('connection_info_creation_enedis_account.content.part_6')}
- </div>
- </div>
+ <div className="enedisInfoModal">
+ <p className="text-16-normal">
+ {t('auth.enedisgrandlyon.infoModal.text1')}
+ <br />
+ {t('auth.enedisgrandlyon.infoModal.text2')}
+ </p>
+ <p className="text-16-normal">
+ {t('auth.enedisgrandlyon.infoModal.text3')}
+ </p>
+ <p className="text-16-normal">
+ {t('auth.enedisgrandlyon.infoModal.text4')}
+ </p>
+ <p className="text-16-normal">
+ {t('auth.enedisgrandlyon.infoModal.text5')}
+ </p>
+ <p className="text-16-normal">
+ {t('auth.enedisgrandlyon.infoModal.text6')}
+ <br />
+ {t('auth.enedisgrandlyon.infoModal.text7')}
+ </p>
<Button
aria-label={t(
- 'connection_info_creation_enedis_account.accessibility.button_validate'
+ 'auth.enedisgrandlyon.infoModal.accessibility.buttonText'
)}
- onClick={handleValidateClick}
+ onClick={handleSubmit}
classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
+ root: 'btn-highlight',
+ label: 'text-16-bold',
}}
>
- {t('connection_info_creation_enedis_account.button_validate')}
+ {t('auth.enedisgrandlyon.infoModal.buttonText')}
</Button>
</div>
</Dialog>
diff --git a/src/components/Connection/connectionInfoCreationEnedisAccountModal.scss b/src/components/Connection/connectionInfoCreationEnedisAccountModal.scss
index 822fc597eed27751b0b7804b525a4e11a386e296..f98ab8bc880cb2c0f9b0adaf631a852cbbd87cbc 100644
--- a/src/components/Connection/connectionInfoCreationEnedisAccountModal.scss
+++ b/src/components/Connection/connectionInfoCreationEnedisAccountModal.scss
@@ -1,43 +1,20 @@
-@import '../../styles/base/typo-variables';
+@import 'src/styles/base/color';
-.infoCreationEnedisAccountModal {
- padding: 1rem;
+.enedisInfoModal {
+ padding: 0 0.5rem;
- .info-creation-title {
- text-transform: uppercase;
- font-size: 1.8rem;
- color: white;
- font-family: $text-font;
- margin: 0.5rem auto;
- text-align: center;
+ p {
+ color: white
}
- .info-creation-content {
- font-size: 1.1rem;
- color: white;
- font-family: $text-font;
- text-align: center;
- .line {
- margin-bottom: 1em;
- }
-
- .endline{
- margin-bottom: 0px
- }
- }
- button.btn-secondary-negative {
- display: block;
- text-align: center;
- margin: auto;
- margin-top: 3.5rem;
- margin-bottom: 0;
- }
-}
-.infocreationenedis-portal {
- .modal-overlay {
- .modal-box {
- max-width: 21rem;
- }
+ button.btn-highlight {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-evenly;
+ margin: 1.5rem 0 1rem;
+ padding: 1rem 2rem;
+ transition: all 300ms ease;
}
}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 18ed7c41ddb13bd0de297e09a65dd094b341f509..6110d48b38b45298c02e703e238fa65f5d943f2a 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -110,7 +110,22 @@
"title": "Pas de compte Enedis ?",
"text": "Vous pouvez le créer en vous munissant d'une facture d'électricité."
},
- "create_account": "Je crée mon compte Enedis"
+ "create_account": "Je crée mon compte Enedis",
+ "infoModal": {
+ "text1": "Vous allez devoir créer un compte Enedis !",
+ "text2": "Un zeste de patience et quelques conseils vous seront utiles :",
+ "text3": "Munissez-vous d'une facture d'électricité.",
+ "text4": "Si vous avez France Connect, utilisez ce mode d'identification sauf si le contrat d'électricité n'est pas à votre nom !",
+ "text5": "Sinon, munissez-vous de la pièce d'identité du titulaire du contrat d'électricité, le titulaire du compte Enedis doit avoir le même nom que le titulaire du contrat.",
+ "text6": "Promis, vous n'aurez à effectuer cette démarche qu'une seule fois au début !",
+ "text7": "Une fois votre compte créé, revenez sur Ecolyo vous connecter.",
+ "buttonText" : "J'ai compris",
+ "accessibility" : {
+ "window_title": "Fenêtre d'information",
+ "buttonText": "Valider",
+ "button_close": "Fermer la fenêtre"
+ }
+ }
},
"grdfgrandlyon": {
"connect": {
@@ -203,22 +218,6 @@
"button_validate": "Valider"
}
},
- "connection_info_creation_enedis_account": {
- "content": {
- "part_1": "Vous allez devoir créer un compte Enedis !",
- "part_2": "Un zeste de patience et quelques conseils vous seront utiles :",
- "part_3": "Munissez-vous d'une facture d'électricité.",
- "part_4": "Si vous avez France Connect, utilisez ce mode d'identification sauf si le contrat d'électricité n'est pas à votre nom !",
- "part_5": "Sinon, munissez-vous de la pièce d'identité du titulaire du contrat d'électricité, le titulaire du compte Enedis doit avoir le même nom que le titulaire du contrat.",
- "part_6": "Promis, vous n'aurez à effectuer cette démarche qu'une seule fois au début ! Une fois votre compte créé, revenez sur Ecolyo vous connecter."
- },
- "button_validate": "J'ai compris",
- "accessibility" : {
- "window_title": "Fenêtre d'information",
- "button_validate": "Valider",
- "button_close": "Fermer la fenêtre"
- }
- },
"consumption": {
"display_last_data": "Voir mes dernières consos",
"accessibility": {