EpglInit.tsx

import EpglConnectModal from 'components/Connection/PartnerConnectModal/EpglConnectModal'
import { FluidType } from 'enums'
import React, { useCallback, useState } from 'react'
import { useAppDispatch, useAppSelector } from 'store/hooks'
import { openConnectionModal } from 'store/modal/modal.slice'
import '../connection.scss'
import EpglBill from './EpglBill'
import EpglForm from './EpglForm'

const EpglInit = () => {
  const dispatch = useAppDispatch()
  const {
    modal: { isConnectionModalOpen },
    global: { fluidStatus },
  } = useAppSelector(state => state.ecolyo)
  const currentFluidStatus = fluidStatus[FluidType.WATER]
  const siteLink: string =
    currentFluidStatus.connection.konnectorConfig.siteLink

  const [showForm, setShowForm] = useState(false)
  const [hasCreatedAccount, setHasCreatedAccount] = useState(false)

  const goToPartnerSite = useCallback(() => {
    window.open(siteLink, '_blank')
  }, [siteLink])

  return (
    <>
      {!showForm ? (
        <EpglBill />
      ) : (
        <EpglForm hasCreatedAccount={hasCreatedAccount} />
      )}
      <EpglConnectModal
        open={isConnectionModalOpen}
        handleCloseClick={() => dispatch(openConnectionModal(false))}
        setShowForm={setShowForm}
        goToPartnerSite={goToPartnerSite}
        setHasCreatedAccount={setHasCreatedAccount}
      />
    </>
  )
}

export default EpglInit