Skip to content
Snippets Groups Projects
Commit 58980ef1 authored by Nicolas PAGNY's avatar Nicolas PAGNY
Browse files

change modal model

parent d8811875
No related branches found
No related tags found
1 merge request!346Features/us418 popup enedis
Hide whitespace changes
Inline Side-by-side
src/components/Connection/ConnectionInfoCreationEnedisAccountModal.tsx
+ 29
− 32
View file @ 58980ef1
......@@ -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>
......
src/components/Connection/connectionInfoCreationEnedisAccountModal.scss
+ 13
− 36
View file @ 58980ef1
@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;
}
}
......
src/locales/fr.json
+ 16
− 17
View file @ 58980ef1
......@@ -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": {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment