Merge branch 'feat/411-egl_credentials_error' into 'dev'

411 - egl credentials error now display in modal

See merge request web-et-numerique/llle_project/ecolyo!382

src/components/Konnector/KonnectorModal.tsx

@@ -30,6 +30,7 @@ interface KonnectorModalProps {
   open: boolean
   isUpdating: boolean
   state: string | null
+  error: string | null
   fluidType: FluidType
   handleCloseClick: () => void
 }
@@ -38,6 +39,7 @@ const KonnectorModal: React.FC<KonnectorModalProps> = ({
   open,
   isUpdating,
   state,
+  error,
   fluidType,
   handleCloseClick,
 }: KonnectorModalProps) => {
@@ -127,20 +129,38 @@ const KonnectorModal: React.FC<KonnectorModalProps> = ({
           <>
             <div className="kmodal-info">
               {state === ERROR_EVENT ? (
-                <div className="konnector-config">
-                  <Icon icon={errorIcon} size={48} />
-                  <div className="kce-picto-txt text-20-bold">
-                    {t('konnector_modal.error_txt')}
-                  </div>
-                  <div>
-                    {t(
-                      `konnector_modal.error_data_${
-                        isUpdating ? 'update_' : ''
-                      }${fluidName.toLowerCase()}`
-                    )}
-                  </div>
-                  <div>{t('konnector_modal.error_data_2')}</div>
-                </div>
+                <>
+                  {error === 'LOGIN_FAILED' ? (
+                    <div className="konnector-config">
+                      <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>
+                    </div>
+                  ) : (
+                    <div className="konnector-config">
+                      <Icon icon={errorIcon} size={48} />
+                      <div className="kce-picto-txt text-20-bold">
+                        {t('konnector_modal.error_txt')}
+                      </div>
+                      <div>
+                        {t(
+                          `konnector_modal.error_data_${
+                            isUpdating ? 'update_' : ''
+                          }${fluidName.toLowerCase()}`
+                        )}
+                      </div>
+                      <div>{t('konnector_modal.error_data_2')}</div>
+                    </div>
+                  )}
+                </>
               ) : (
                 <div className="konnector-config">
                   <Icon icon={successIcon} size={48} />

src/components/Konnector/KonnectorViewerCard.tsx

@@ -73,6 +73,9 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
   const [active, setActive] = useState<boolean>(false)
   const [openModal, setOpenModal] = useState(false)
   const [isUpdating, setIsUpdating] = useState(false)
+  const [konnectorErrorDescription, setKonnectorErrorDescription] = useState<
+    string | null
+  >(null)
   const [konnectorState, setKonnectorState] = useState<string | null>(null)
   const [updatedFluidStatus, setUpdatedFluidStatus] = useState<FluidStatus[]>(
     []
@@ -139,6 +142,7 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
     setActive(false)
     setOpenModal(false)
     setKonnectorState(null)
+    setKonnectorErrorDescription(null)
     if (updatedFluidStatus.length > 0) {
       dispatch(setFluidStatus(updatedFluidStatus))
     }
@@ -206,8 +210,10 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
         const connectionFlow = new ConnectionFlow(client, trigger, konnector)
         await connectionFlow.launch()
         connectionFlow.jobWatcher.on(ERROR_EVENT, () => {
+          setKonnectorErrorDescription(connectionFlow.jobWatcher.on()._error)
           callbackResponse(ERROR_EVENT)
         })
+
         // When LOGIN SUCESS EVENT is triggered, the status retrieve from the trigger is still running
         // connectionFlow.jobWatcher.on(LOGIN_SUCCESS_EVENT, () => {
         //   callbackResponse(LOGIN_SUCCESS_EVENT)
@@ -312,6 +318,7 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
         open={openModal}
         isUpdating={isUpdating}
         state={konnectorState}
+        error={konnectorErrorDescription}
         fluidType={fluidStatus.fluidType}
         handleCloseClick={handleConnectionEnd}
       />

src/locales/fr.json

@@ -504,6 +504,7 @@
     "error_txt": "Aïe !",
     "error_data_electricity": "Un problème est survenu. Vos données de consommation d’électricité ne seront pas chargées.",
     "error_data_water": "Un problème est survenu. Vos données de consommation d’eau ne seront pas chargées.",
+    "error_credentials_water": "Une erreur s'est glissée dans vos identifiants de connexion. Veuillez vérifier ces éléments et tenter de vous reconnecter. L'identifiant est un numéro à 7 chiffres (différent de votre numéro de contrat).",
     "error_data_gas": "Un problème est survenu. Vos données de consommmation de gaz ne seront pas chargées.",
     "error_data_update_electricity": "Un problème est survenu. Vos données de consommation d’électricité n’ont pas été mises à jour.",
     "error_data_update_water": "Un problème est survenu. Vos données de consommation d’eau n’ont pas été mises à jour.",