import FormNavigation from 'components/CommonKit/FormNavigation/FormNavigation' import FormProgress from 'components/CommonKit/FormProgress/FormProgress' import Content from 'components/Content/Content' import CozyBar from 'components/Header/CozyBar' import Header from 'components/Header/Header' import useKonnectorAuth from 'components/Hooks/useKonnectorAuth' import useUserInstanceSettings from 'components/Hooks/useUserInstanceSettings' import { FluidType } from 'enums' import { AccountGRDFData } from 'models' import React, { useCallback, useEffect, useState } from 'react' import { useNavigate } from 'react-router-dom' import { useAppSelector } from 'store/hooks' import '../connection.scss' import StepConsent from './StepConsent' import { StepIdentity } from './StepIdentity' export enum GrdfStep { Identity, Consent, } export const GrdfConnectView = () => { const navigate = useNavigate() const { data: instanceSettings } = useUserInstanceSettings() const { fluidStatus } = useAppSelector(state => state.ecolyo.global) const currentFluidStatus = fluidStatus[FluidType.GAS] const account = currentFluidStatus.connection.account const [launchConnection, setLaunchConnection] = useState(false) const [currentStep, setCurrentStep] = useState<GrdfStep>(GrdfStep.Identity) const [formData, setFormData] = useState<AccountGRDFData>({ lastname: '', firstname: '', email: '', postalCode: '', pce: '', }) const [formConsent, setFormConsent] = useState({ dataConsent: false, pceConfirm: false, }) // TODO move this in GrdfInit ? const [connect, update] = useKonnectorAuth(FluidType.GAS, { grdfAuthData: formData, }) useEffect(() => { setFormData(prev => ({ ...prev, email: instanceSettings.email ?? '' })) }, [instanceSettings]) useEffect(() => { async function launchConnect() { if (launchConnection) { if (!account) { await connect() } else { await update() } setLaunchConnection(false) navigate('/consumption/gas') } } launchConnect() }, [account, connect, launchConnection, navigate, update]) const isNextValid = useCallback(() => { if (currentStep === GrdfStep.Identity) { return ( formData.firstname !== '' && formData.lastname !== '' && formData.postalCode !== '' && formData.email.includes('@') && formData.pce.length === 14 ) } else if (currentStep === GrdfStep.Consent) { return formConsent.dataConsent && formConsent.pceConfirm } return false }, [ currentStep, formConsent.dataConsent, formConsent.pceConfirm, formData.email, formData.firstname, formData.lastname, formData.pce, formData.postalCode, ]) const handleNext = useCallback(() => { if (!isNextValid()) return if (currentStep < GrdfStep.Consent) { setCurrentStep(prev => prev + 1) } if (currentStep === GrdfStep.Consent) { setLaunchConnection(true) } }, [currentStep, isNextValid]) const handlePrev = () => { setCurrentStep(prev => prev - 1) } const renderStep = (step: GrdfStep) => { if (step === GrdfStep.Identity) { return <StepIdentity formData={formData} setFormData={setFormData} /> } else { return ( <StepConsent formConsent={formConsent} setFormConsent={setFormConsent} /> ) } } return ( <> <CozyBar titleKey="common.title_gas_connect" displayBackArrow={true} /> <Header desktopTitleKey="common.title_gas_connect" displayBackArrow={true} /> <Content> <div className="connectView"> <div className="stepContainer"> <FormProgress currentStep={currentStep} totalSteps={Object.keys(GrdfStep).length / 2} /> {renderStep(currentStep)} </div> <FormNavigation handlePrevious={handlePrev} handleNext={handleNext} isLoading={false} disableNextButton={!isNextValid()} disablePrevButton={currentStep === GrdfStep.Identity} isLastStep={currentStep === GrdfStep.Consent} /> </div> </Content> </> ) }