fix(konnector): prevent modal to show success message when login success event...

fix(konnector): prevent modal to show success message when login success event and show form in background while loading data

src/components/Konnector/KonnectorModal.tsx

@@ -5,7 +5,11 @@ import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import Lottie from 'react-lottie'
 import * as loadingData from 'assets/anims/bounceloading.json'
 
-import { ERROR_EVENT } from 'cozy-harvest-lib/dist/models/flowEvents'
+import {
+  ERROR_EVENT,
+  SUCCESS_EVENT,
+  LOGIN_SUCCESS_EVENT,
+} from 'cozy-harvest-lib/dist/models/flowEvents'
 import { FluidType } from 'enum/fluid.enum'
 
 import Icon from 'cozy-ui/transpiled/react/Icon'
@@ -127,7 +131,33 @@ const KonnectorModal: React.FC<KonnectorModalProps> = ({
         ) : (
           <>
             <div className="kmodal-info">
-              {state === ERROR_EVENT ? (
+              {state === LOGIN_SUCCESS_EVENT && (
+                <>
+                  <Lottie
+                    options={loadingOptions}
+                    height={50}
+                    width={50}
+                    speed={2}
+                  />
+                  <div className="kc-wait text-16-bold">
+                    {t(`konnector_modal.loading_data`)}
+                  </div>
+                  <div className="kmodal-waiting-text text-18-italic">
+                    {shuffledWaitingTexts.map((text, idx) => (
+                      <div
+                        key={idx}
+                        className={classNames('waiting-text', {
+                          ['show']: idx === index % shuffledWaitingTexts.length,
+                        })}
+                      >
+                        <p>{text.first}</p>
+                        <p>{text.second}</p>
+                      </div>
+                    ))}
+                  </div>
+                </>
+              )}
+              {state === ERROR_EVENT && (
                 <>
                   {error === 'LOGIN_FAILED' ? (
                     <div className="konnector-config">
@@ -162,7 +192,8 @@ const KonnectorModal: React.FC<KonnectorModalProps> = ({
                     </div>
                   )}
                 </>
-              ) : (
+              )}
+              {state === SUCCESS_EVENT && (
                 <div className="konnector-config">
                   <Icon icon={successIcon} size={48} />
                   <div className="kcs-picto-txt text-20-bold">
@@ -175,16 +206,18 @@ const KonnectorModal: React.FC<KonnectorModalProps> = ({
                   )}
                 </div>
               )}
-              <Button
-                aria-label={t('konnector_modal.accessibility.button_close')}
-                onClick={() => handleCloseClick()}
-                classes={{
-                  root: 'btn-highlight',
-                  label: 'text-16-bold',
-                }}
-              >
-                <div>{t('konnector_modal.button_validate')}</div>
-              </Button>
+              {state !== LOGIN_SUCCESS_EVENT && (
+                <Button
+                  aria-label={t('konnector_modal.accessibility.button_close')}
+                  onClick={() => handleCloseClick()}
+                  classes={{
+                    root: 'btn-highlight',
+                    label: 'text-16-bold',
+                  }}
+                >
+                  <div>{t('konnector_modal.button_validate')}</div>
+                </Button>
+              )}
             </div>
           </>
         )}

src/components/Konnector/KonnectorViewerCard.tsx

@@ -189,7 +189,11 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
   const getConnectionCard = useCallback(() => {
     if (fluidState === FluidState.KONNECTOR_NOT_FOUND && !isUpdating) {
       return <ConnectionNotFound konnectorSlug={fluidSlug} />
-    } else if (account && fluidState !== FluidState.ERROR_LOGIN_FAILED) {
+    } else if (
+      account &&
+      fluidState !== FluidState.ERROR_LOGIN_FAILED &&
+      fluidStatus.status !== FluidState.NOT_CONNECTED
+    ) {
       return (
         <ConnectionResult
           fluidStatus={fluidStatus}
@@ -204,8 +208,9 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
     fluidState,
     isUpdating,
     account,
-    fluidSlug,
+    openModal,
     fluidStatus,
+    fluidSlug,
     handleAccountDeletion,
     fluidType,
   ])