EpglConnectModal.tsx

import { Button, Dialog, IconButton } from '@material-ui/core'
import CloseIcon from 'assets/icons/ico/close.svg'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Icon from 'cozy-ui/transpiled/react/Icon'
import React, { useEffect, useState } from 'react'
import './PartnerConnectModal.scss'
import { StepContent } from './StepContent.interface'
import EpglCreateAccount from './Steps/EpglCreateAccount'
import EpglDoYouHaveAccount from './Steps/EpglDoYouHaveAccount'

enum StepEnum {
  DoYouHaveAccount,
  CreateAccount,
}

interface EpglConnectModalProps {
  open: boolean
  handleCloseClick: () => void
  setShowForm: (value: boolean) => void
  goToPartnerSite: () => void
  setHasCreatedAccount: (value: boolean) => void
}

const EpglConnectModal = ({
  open,
  handleCloseClick,
  setShowForm,
  goToPartnerSite,
  setHasCreatedAccount,
}: EpglConnectModalProps) => {
  const { t } = useI18n()
  const [currentStep, setCurrentStep] = useState(StepEnum.DoYouHaveAccount)
  useEffect(() => {
    if (open) {
      setCurrentStep(0)
    }
  }, [open])

  const handleGoToPartnerSite = () => {
    goToPartnerSite()
    setHasCreatedAccount(true)
    setShowForm(true)
    handleCloseClick()
  }

  const handleShowForm = () => {
    setShowForm(true)
    handleCloseClick()
  }

  const steps: Record<StepEnum, StepContent> = {
    [StepEnum.DoYouHaveAccount]: {
      content: <EpglDoYouHaveAccount />,
      leftButton: (
        <Button
          onClick={() => setCurrentStep(StepEnum.CreateAccount)}
          classes={{
            root: 'btn-profile-back',
            label: 'text-16-bold',
          }}
        >
          {t('auth.button_create_account')}
        </Button>
      ),
      rightButton: (
        <Button
          onClick={handleShowForm}
          classes={{
            root: 'btn-profile-next',
            label: 'text-16-bold',
          }}
        >
          {t('auth.button_connect')}
        </Button>
      ),
    },
    [StepEnum.CreateAccount]: {
      content: <EpglCreateAccount />,
      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.eglgrandlyon.button_go_to_partner_site')}
        </Button>
      ),
    },
  }

  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}
      >
        <Icon 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 EpglConnectModal