GrdfConnectModal.tsx

import { Button, Dialog, IconButton } from '@material-ui/core'
import CloseIcon from 'assets/icons/ico/close.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import GrdfFormOAuth from 'components/Connection/PartnerConnectModal/Steps/GrdfFormOAuth'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import React, { useEffect, useState } from 'react'
import './PartnerConnectModal.scss'
import { StepContent } from './StepContent.interface'
import GrdfCreateAccount from './Steps/GrdfCreateAccount'
import GrdfDoYouHaveAccount from './Steps/GrdfDoYouHaveAccount'
import GrdfGiveConsent from './Steps/GrdfGiveConsent'

enum StepEnum {
  DoYouHaveAccount,
  CreateAccount,
  GiveConsent,
}

interface GrdfConnectModalProps {
  open: boolean
  showForm: boolean
  handleCloseClick: () => void
  setShowForm: (value: boolean) => void
  goToPartnerSite: () => void
  handleSuccess: (accountId: string) => Promise<void>
}

const GrdfConnectModal = ({
  open,
  showForm,
  handleCloseClick,
  setShowForm,
  goToPartnerSite,
  handleSuccess,
}: GrdfConnectModalProps) => {
  const { t } = useI18n()
  const [currentStep, setCurrentStep] = useState(StepEnum.DoYouHaveAccount)

  useEffect(() => {
    if (open) {
      showForm
        ? setCurrentStep(StepEnum.GiveConsent)
        : setCurrentStep(StepEnum.DoYouHaveAccount)
    }
  }, [showForm, open])

  const handleGoToPartnerSite = () => {
    goToPartnerSite()
    setShowForm(true)
    handleCloseClick()
  }
  const handleGiveConsentPrevious = () => {
    showForm ? handleCloseClick() : setCurrentStep(StepEnum.DoYouHaveAccount)
  }

  const steps: Record<StepEnum, StepContent> = {
    [StepEnum.DoYouHaveAccount]: {
      content: <GrdfDoYouHaveAccount />,
      leftButton: (
        <Button
          onClick={() => setCurrentStep(StepEnum.CreateAccount)}
          classes={{
            root: 'btn-profile-back',
            label: 'text-16-bold',
          }}
        >
          {t('auth.button_create_account')}
        </Button>
      ),
      rightButton: (
        <Button
          onClick={() => setCurrentStep(StepEnum.GiveConsent)}
          classes={{
            root: 'btn-profile-next',
            label: 'text-16-bold',
          }}
        >
          {t('auth.button_has_account')}
        </Button>
      ),
    },
    [StepEnum.CreateAccount]: {
      content: <GrdfCreateAccount />,
      leftButton: (
        <Button
          onClick={() => setCurrentStep(StepEnum.DoYouHaveAccount)}
          classes={{
            root: 'btn-profile-back',
            label: 'text-16-bold',
          }}
        >
          {`< ${t('auth.button_previous')}`}
        </Button>
      ),
      rightButton: (
        <Button
          onClick={handleGoToPartnerSite}
          classes={{
            root: 'btn-profile-next',
            label: 'text-16-bold',
          }}
        >
          {t('auth.grdfgrandlyon.button_go_to_partner_site')}
        </Button>
      ),
    },
    [StepEnum.GiveConsent]: {
      content: <GrdfGiveConsent />,
      leftButton: (
        <Button
          onClick={handleGiveConsentPrevious}
          classes={{
            root: 'btn-profile-back',
            label: 'text-16-bold',
          }}
        >
          {`< ${t('auth.button_previous')}`}
        </Button>
      ),
      rightButton: <GrdfFormOAuth onSuccess={handleSuccess} />,
    },
  }

  return (
    <Dialog
      open={open}
      onClose={handleCloseClick}
      classes={{
        root: 'modal-root',
        paper: 'modal-paper',
      }}
    >
      <IconButton
        aria-label={t('auth.accessibility.button_close')}
        className="modal-paper-close-button"
        onClick={handleCloseClick}
      >
        <StyledIcon icon={CloseIcon} size={16} />
      </IconButton>
      <div className="partners-connection-step-content">
        {steps[currentStep].content}
      </div>
      <div className="partners-connection-step-navigation">
        {steps[currentStep].leftButton}
        {steps[currentStep].rightButton}
      </div>
    </Dialog>
  )
}

export default GrdfConnectModal