GrdfInit.tsx

import GrdfConnectModal from 'components/Connection/PartnerConnectModal/GrdfConnectModal'
import { useClient } from 'cozy-client'
import { UsageEventType } from 'enum/usageEvent.enum'
import { FluidConnection, FluidStatus, Konnector, Trigger } from 'models'
import React, { useCallback, useState } from 'react'
import { useDispatch } from 'react-redux'
import AccountService from 'services/account.service'
import TriggerService from 'services/triggers.service'
import UsageEventService from 'services/usageEvent.service'
import { updatedFluidConnection } from 'store/global/global.actions'
import '../connection.scss'
import GrdfBill from './GrdfBill'
import GrdfForm from './GrdfForm'

interface GrdfInitProps {
  fluidStatus: FluidStatus
  onSuccess: Function
}

const GrdfInit: React.FC<GrdfInitProps> = ({
  fluidStatus,
  onSuccess,
}: GrdfInitProps) => {
  const client = useClient()
  const dispatch = useDispatch()

  const [openModal, setOpenModal] = useState(false)
  const [showForm, setShowForm] = useState(false)

  const konnectorSlug: string = fluidStatus.connection.konnectorConfig.slug
  const siteLink: string = fluidStatus.connection.konnectorConfig.siteLink
  const konnector: Konnector | null = fluidStatus.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 = {
            ...fluidStatus.connection,
            account: null,
            trigger: null,
          }
          dispatch(
            updatedFluidConnection(fluidStatus.fluidType, 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 = {
            ...fluidStatus.connection,
            account: account,
            trigger: trigger,
          }
          dispatch(
            updatedFluidConnection(fluidStatus.fluidType, updatedConnection)
          )
          onSuccess()
        }
      }
    },
    [
      client,
      konnector,
      dispatch,
      fluidStatus.fluidType,
      fluidStatus.connection,
      onSuccess,
      konnectorSlug,
    ]
  )

  const toggleModal = useCallback(() => {
    setOpenModal((prev: boolean) => !prev)
  }, [])

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

  return (
    <>
      {!showForm ? (
        <GrdfBill togglePartnerConnectionModal={toggleModal} />
      ) : (
        <GrdfForm togglePartnerConnectionModal={toggleModal} />
      )}
      <GrdfConnectModal
        open={openModal}
        showForm={showForm}
        konnector={konnector}
        fluidStatus={fluidStatus}
        handleCloseClick={toggleModal}
        setShowForm={setShowForm}
        goToPartnerSite={goToPartnerSite}
        handleSuccess={handleSuccess}
      />
    </>
  )
}

export default GrdfInit