Commit 7818e59d authored by Guilhem CARRON's avatar Guilhem CARRON
Browse files

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
parent 06db2d08
......@@ -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>
</>
)}
......
......@@ -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,
])
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment