SgeConnectView.tsx

import Content from 'components/Content/Content'
import FormNavigation from 'components/FormGlobal/FormNavigation'
import FormProgress from 'components/FormGlobal/FormProgress'
import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
import { SgeStep } from 'enum/sgeStep.enum'
import { SgeStore } from 'models/sgeStore.model'
import React, { useCallback, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { AppStore } from 'store'
import { updateSgeStore } from 'store/global/global.actions'
import './SgeConnect.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: React.FC = () => {
  const [headerHeight, setHeaderHeight] = useState<number>(0)
  const { sgeConnect } = useSelector((state: AppStore) => state.ecolyo.global)
  const dispatch = useDispatch()
  const [currentStep, setCurrentStep] = useState<SgeStep>(
    sgeConnect.currentStep
  )
  const [currentSgeState, setCurrentSgeState] = useState<SgeStore>(sgeConnect)
  const defineHeaderHeight = useCallback((height: number) => {
    setHeaderHeight(height)
  }, [])
  const [isLoading, setIsLoading] = useState(false)

  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 && isNextValid()) {
      setCurrentStep(prev => prev + 1)
      dispatch(updateSgeStore(currentSgeState))
    }
    if (currentStep === SgeStep.Consent && isNextValid() && !isLoading) {
      setIsLoading(true)
      const updatedState = {
        ...currentSgeState,
        city: currentSgeState.city.trim(),
        shouldLaunchAccount: true,
      }
      setCurrentSgeState(updatedState)
      dispatch(updateSgeStore(updatedState))
    }
  }, [currentSgeState, currentStep, dispatch, isNextValid, isLoading])

  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 === '' ||
        (/[0-9]/.test(value.toString()) && value.toString().length <= maxLength)
      ) {
        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}
        backFunction={() =>
          dispatch(updateSgeStore({ ...sgeConnect, openSGEForm: false }))
        }
      />
      <Header
        setHeaderHeight={defineHeaderHeight}
        desktopTitleKey={'common.title_sge_connect'}
        displayBackArrow={true}
        backFunction={() =>
          dispatch(updateSgeStore({ ...sgeConnect, openSGEForm: false }))
        }
      ></Header>
      <Content height={headerHeight}>
        <div className="sge-view">
          <div className="sge-container">
            <FormProgress step={currentStep} formType={'sge'} />
            {renderStep(currentStep)}
          </div>
          <FormNavigation
            step={currentStep}
            handlePrevious={handlePrev}
            handleNext={handleNext}
            isLoading={isLoading}
            disableNextButton={!isNextValid() || isLoading}
            disablePrevButton={currentStep === SgeStep.IdentityAndPDL}
            isLastConnectStep={currentStep === SgeStep.Consent}
            isEcogesture={false}
          />
        </div>
      </Content>
    </>
  )
}

export default SgeConnectView