diff --git a/src/components/Home/ConsumptionView.tsx b/src/components/Home/ConsumptionView.tsx index d6d41e519c4f686117b614a5e32cab199c657a13..d2ff3c66ed11f6960bcde245341bc141d15827f8 100644 --- a/src/components/Home/ConsumptionView.tsx +++ b/src/components/Home/ConsumptionView.tsx @@ -33,7 +33,9 @@ import ProfileService from 'services/profile.service' import { useClient } from 'cozy-client' import ExpiredConsentModal from 'components/Connection/ExpiredConsentModal' import CustomPopupModal from 'components/CustomPopup/CustomPopupModal' +import KonnectorModal from 'components/Konnector/KonnectorModal' +import { KonnectorError } from 'enum/konnectorError.enum' interface ConsumptionViewProps { fluidType: FluidType } diff --git a/src/components/Konnector/KonnectorModal.tsx b/src/components/Konnector/KonnectorModal.tsx index 7ee3ebb18605d9b363ba94ac7138073d03af244f..d5d9c11b1cab3e60bd2e846f0318ccfcfe78e5c5 100644 --- a/src/components/Konnector/KonnectorModal.tsx +++ b/src/components/Konnector/KonnectorModal.tsx @@ -67,6 +67,7 @@ const KonnectorModal: React.FC<KonnectorModalProps> = ({ const firstConnectionWaitingTexts = firstConnectionWaitingText.concat( ...shuffledWaitingTexts ) + const [showCommonErrors, setShowCommonErrors] = useState(false) const getUpdatingText = useCallback((): JSX.Element => { return ( @@ -119,6 +120,70 @@ const KonnectorModal: React.FC<KonnectorModalProps> = ({ } }, [open, state]) + return ( + <Dialog + open={open} + disableEscapeKeyDown + onClose={(event, reason): void => { + event && + reason !== 'backdropClick' && + handleCloseClick(state === SUCCESS_EVENT) + }} + aria-labelledby={'accessibility-title'} + classes={{ + root: 'modal-root', + paper: 'modal-paper', + }} + > + <div id={'accessibility-title'}> + {t('konnector_modal.accessibility.window_title')} + </div> + <div className="kmodal-content"> + <div className="kmodal-info"> + <div className="konnector-config"> + {console.log('errortype', error)} + <Icon icon={errorIcon} size={48} /> + <div className="kce-picto-txt text-20-bold"> + {t('konnector_modal.error_txt')} + </div> + <div> + {t( + `konnector_modal.error_credentials_${ + isUpdating ? 'update_' : '' + }${fluidName.toLowerCase()}` + )} + </div> + {/* Show common errors */} + {!showCommonErrors && ( + <span + className="commonErrors" + onClick={() => setShowCommonErrors(true)} + > + {t('konnector_modal.show_common_error')} + </span> + )} + {showCommonErrors && ( + <div + dangerouslySetInnerHTML={{ + __html: t('konnector_modal.show_common_error_list'), + }} + /> + )} + </div> + <KonnectorModalFooter + state={state} + error={error} + fluidType={fluidType} + handleCloseClick={handleCloseClick} + handleAccountDeletion={handleAccountDeletion} + account={account} + isUpdating={isUpdating} + /> + </div> + </div> + </Dialog> + ) + return ( <Dialog open={open} @@ -179,6 +244,22 @@ const KonnectorModal: React.FC<KonnectorModalProps> = ({ )} </div> )} + {/* Show common errors */} + {!showCommonErrors && ( + <span + className="commonErrors" + onClick={() => setShowCommonErrors(true)} + > + {t('konnector_modal.show_common_error')} + </span> + )} + {showCommonErrors && ( + <div + dangerouslySetInnerHTML={{ + __html: t('konnector_modal.show_common_error_list'), + }} + /> + )} </div> )} {error === KonnectorError.USER_ACTION_NEEDED && @@ -236,6 +317,7 @@ const KonnectorModal: React.FC<KonnectorModalProps> = ({ <div className="err-data-2"> {t('konnector_modal.error_data_2')} </div> + pwet </div> )} </> diff --git a/src/components/Konnector/konnectorModal.scss b/src/components/Konnector/konnectorModal.scss index 8b054b37a5a872fa25da6a6508bc5101b0f8e9ed..c1fde2e65af2bbb353e2bec261aa83f470d23ebe 100644 --- a/src/components/Konnector/konnectorModal.scss +++ b/src/components/Konnector/konnectorModal.scss @@ -79,6 +79,12 @@ color: $multi-color; margin: 1.25rem; } + + .commonErrors { + text-decoration: underline; + cursor: pointer; + margin: 1rem auto 0.5rem; + } } } } diff --git a/src/locales/fr.json b/src/locales/fr.json index ff9ba2aefa6e305c9ac4e1a3294956232c3ebdd0..def3431a439f1b427be1976b2f3a1180f669aba9 100644 --- a/src/locales/fr.json +++ b/src/locales/fr.json @@ -790,6 +790,8 @@ "button_validate": "Ok", "button_understood": "J'ai compris", "button_come_back_later": "Revenir plus tard", + "show_common_error": "Voir les erreurs récurrentes", + "show_common_error_list": "Le problème peut provenir des cas suivants : <ul style=\"text-align:left;\"><li>Vous avez un co-titulaire sur votre contrat. Veillez à bien entrer le nom du <span style=\"color:#E3B82A; font-weight:700;\">titulaire du contrat</span> et non le co-titulaire.</li><li> Votre nom comporte un tiret ? Tentez sans le tiret.</li><li> Entrez bien le nom de votre commune de résidence en entier (tirets et accents inclus)</li><li> Avez-vous bien entré le <span style=\"color:#E3B82A; font-weight:700;\">numéro de votre compteur</span> (PDL) ? Tout autre numéro (de contrat, de client) ne fonctionne pas.</li></ul><p style=\"text-align:center; font-style: italic; font-weight:400; font-size: 0.9rem;\">Si vous rencontrez toujours des difficultés, contactez notre service d'aide </p><div style=\"text-align:center; font-weight:700;\">Avez-vous pensez à vérifier ces informations ?</div>", "accessibility": { "window_title": "Fenêtre d'attente de connexion", "button_close": "Fermer la fenêtre"