SgeConnectView.tsx

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 { FluidType, SgeStep } from 'enums'
import { SgeStore } from 'models'
import React, { useCallback, useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import {
  setShouldRefreshConsent,
  updateSgeStore,
} from 'store/global/global.slice'
import { useAppDispatch, useAppSelector } from 'store/hooks'
import '../connection.scss'
import StepAddress from './StepAddress'
import StepConsent from './StepConsent'
import StepIdentityAndPdl from './StepIdentityAndPdl'

export type SGEKeysForm =
  | 'firstName'
  | 'lastName'
  | 'pdl'
  | 'address'
  | 'zipCode'
  | 'city'
  | 'dataConsent'
  | 'pdlConfirm'

const SgeConnectView = () => {
  const navigate = useNavigate()
  const dispatch = useAppDispatch()
  const { sgeConnect } = useAppSelector(state => state.ecolyo.global)
  const [isLoading, setIsLoading] = useState(false)
  const [currentSgeState, setCurrentSgeState] = useState<SgeStore>(sgeConnect)
  const [currentStep, setCurrentStep] = useState<SgeStep>(
    SgeStep.IdentityAndPDL
  )
  const { fluidStatus } = useAppSelector(state => state.ecolyo.global)
  const currentFluidStatus = fluidStatus[FluidType.ELECTRICITY]
  const account = currentFluidStatus.connection.account

  const [connect, update] = useKonnectorAuth(FluidType.ELECTRICITY, {
    sgeAuthData: sgeConnect,
  })

  useEffect(() => {
    async function launchConnect() {
      if (sgeConnect.shouldLaunchAccount) {
        dispatch(updateSgeStore({ ...sgeConnect, shouldLaunchAccount: false }))
        dispatch(setShouldRefreshConsent(false))
        if (!account) {
          await connect()
        } else {
          await update()
        }
        navigate('/consumption/electricity')
      }
    }
    launchConnect()
  }, [account, connect, dispatch, navigate, sgeConnect, update])

  const isNextValid = useCallback(() => {
    switch (currentStep) {
      case SgeStep.IdentityAndPDL:
        return (
          currentSgeState.firstName !== '' &&
          currentSgeState.lastName !== '' &&
          currentSgeState.pdl !== null &&
          currentSgeState.pdl.toString().length === 14
        )
      case SgeStep.Address:
        return (
          currentSgeState.address !== '' &&
          currentSgeState.city !== '' &&
          currentSgeState.zipCode !== null &&
          currentSgeState.zipCode.toString().length === 5
        )
      case SgeStep.Consent:
        return currentSgeState.dataConsent && currentSgeState.pdlConfirm
      default:
        return false
    }
  }, [
    currentSgeState.address,
    currentSgeState.city,
    currentSgeState.dataConsent,
    currentSgeState.firstName,
    currentSgeState.lastName,
    currentSgeState.pdl,
    currentSgeState.pdlConfirm,
    currentSgeState.zipCode,
    currentStep,
  ])

  const handleNext = useCallback(() => {
    if (currentStep < SgeStep.Consent) {
      setCurrentStep(prev => prev + 1)
      dispatch(updateSgeStore(currentSgeState))
    }
    if (currentStep === SgeStep.Consent && !isLoading) {
      setIsLoading(true)
      const updatedState = {
        ...currentSgeState,
        city: currentSgeState.city.trim(),
        shouldLaunchAccount: true,
      }
      setCurrentSgeState(updatedState)
      dispatch(updateSgeStore(updatedState))
    }
  }, [currentStep, isLoading, dispatch, currentSgeState])

  const handlePrev = useCallback(() => {
    if (currentStep !== SgeStep.IdentityAndPDL) {
      setCurrentStep(prev => prev - 1)
    }
    dispatch(updateSgeStore(currentSgeState))
  }, [currentSgeState, currentStep, dispatch])

  const onChange = useCallback(
    (
      key: SGEKeysForm,
      value: string | boolean | number,
      maxLength?: number
    ) => {
      if (maxLength && value.toString().length > maxLength) return

      const updatedState = {
        ...currentSgeState,
        [key]: value,
      }
      setCurrentSgeState(updatedState)
    },
    [currentSgeState]
  )

  const renderStep = (step: SgeStep) => {
    switch (step) {
      case SgeStep.Address:
        return <StepAddress sgeState={currentSgeState} onChange={onChange} />
      case SgeStep.Consent:
        return <StepConsent sgeState={currentSgeState} onChange={onChange} />
      case SgeStep.IdentityAndPDL:
      default:
        return (
          <StepIdentityAndPdl sgeState={currentSgeState} onChange={onChange} />
        )
    }
  }

  return (
    <>
      <CozyBar titleKey="common.title_sge_connect" displayBackArrow={true} />
      <Header
        desktopTitleKey="common.title_sge_connect"
        displayBackArrow={true}
      />
      <Content>
        <div className="connectView">
          <div className="stepContainer">
            <FormProgress
              currentStep={currentStep}
              totalSteps={Object.values(SgeStep).length / 2}
            />
            {renderStep(currentStep)}
          </div>
          <FormNavigation
            handlePrevious={handlePrev}
            handleNext={handleNext}
            isLoading={isLoading}
            disablePrevButton={currentStep === SgeStep.IdentityAndPDL}
            disableNextButton={!isNextValid() || isLoading}
            isLastStep={currentStep === SgeStep.Consent}
          />
        </div>
      </Content>
    </>
  )
}

export default SgeConnectView