GrdfConnectView.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 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>
    </>
  )
}