GrdfInit.tsx

import GrdfConnectModal from 'components/Connection/PartnerConnectModal/GrdfConnectModal'
import { useClient } from 'cozy-client'
import { FluidType, UsageEventType } from 'enums'
import { FluidConnection, Konnector, Trigger } from 'models'
import React, { useCallback, useState } from 'react'
import AccountService from 'services/account.service'
import TriggerService from 'services/triggers.service'
import UsageEventService from 'services/usageEvent.service'
import { updateFluidConnection } from 'store/global/global.slice'
import { useAppDispatch, useAppSelector } from 'store/hooks'
import { openConnectionModal } from 'store/modal/modal.slice'
import '../connection.scss'
import GrdfBill from './GrdfBill'
import GrdfForm from './GrdfForm'

const GrdfInit = ({ onSuccess }: { onSuccess: () => Promise<void> }) => {
  const client = useClient()
  const dispatch = useAppDispatch()
  const {
    modal: { isConnectionModalOpen },
    global: { fluidStatus },
  } = useAppSelector(state => state.ecolyo)

  const [showForm, setShowForm] = useState(false)

  const currentFluidStatus = fluidStatus[FluidType.GAS]
  const konnectorSlug: string =
    currentFluidStatus.connection.konnectorConfig.slug
  const siteLink: string =
    currentFluidStatus.connection.konnectorConfig.siteLink
  const konnector: Konnector | null = currentFluidStatus.connection.konnector

  const handleSuccess = useCallback(
    async (accountId: string) => {
      if (konnector) {
        const accountService = new AccountService(client)
        const account = await accountService.getAccount(accountId)
        if (!account) {
          const updatedConnection: FluidConnection = {
            ...currentFluidStatus.connection,
            account: null,
            trigger: null,
          }
          dispatch(
            updateFluidConnection({
              fluidType: currentFluidStatus.fluidType,
              fluidConnection: updatedConnection,
            })
          )
          await UsageEventService.addEvent(client, {
            type: UsageEventType.KONNECTOR_CONNECT_EVENT,
            target: konnectorSlug,
            result: 'error',
          })
        } else {
          const triggersServices = new TriggerService(client)
          const trigger: Trigger = await triggersServices.createTrigger(
            account,
            konnector
          )
          const updatedConnection: FluidConnection = {
            ...currentFluidStatus.connection,
            account: account,
            trigger: trigger,
          }
          dispatch(
            updateFluidConnection({
              fluidType: currentFluidStatus.fluidType,
              fluidConnection: updatedConnection,
            })
          )
          onSuccess()
        }
      }
    },
    [
      client,
      konnector,
      dispatch,
      currentFluidStatus.fluidType,
      currentFluidStatus.connection,
      onSuccess,
      konnectorSlug,
    ]
  )

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

  return (
    <>
      {!showForm ? <GrdfBill /> : <GrdfForm />}
      <GrdfConnectModal
        open={isConnectionModalOpen}
        showForm={showForm}
        handleCloseClick={() => dispatch(openConnectionModal(false))}
        setShowForm={setShowForm}
        goToPartnerSite={goToPartnerSite}
        handleSuccess={handleSuccess}
      />
    </>
  )
}

export default GrdfInit