index.jsx

<ModalCustomerDetails isOpen={isOpenFullDetails} onClose={onCloseFullDetails} id={customerId} />

ModalCustomerDetails.jsx

import { Modal } from '@/components/Common/Modal/Modal'
import { EssentialInformations, PaymentDetail } from './components'
import { useFetchCustomerDetail } from '../../hooks'
import { useEffect } from 'react'
import { useToast } from '@chakra-ui/react'

export const ModalCustomerDetails = ({ isOpen, onClose, id }) => {
  const toast = useToast()
  const { dataCustomer, errorCustomer, fetchCustomer, loadingCustomer } = useFetchCustomerDetail()

  useEffect(() => {
    if (!id || !isOpen) return
    fetchCustomer(id)
  }, [id])

  useEffect(() => {
    if (!errorCustomer) return
    toast({
      description: 'Erro ao exibir detalhes do Cliente.',
      status: 'error',
      duration: 2000,
      isClosable: true,
      position: 'top-right',
    })
    onClose()
  }, [errorCustomer])

  return (
    <Modal.Root isOpen={isOpen} onClose={onClose} size='6xl'>
      <Modal.Header text={dataCustomer && dataCustomer.customerName} />
      <Modal.Body loading={loadingCustomer}>
        <main className='px-3 flex flex-col gap-3'>
          <EssentialInformations customer={dataCustomer} />
          {/* <CareerPath complete={complete} nextGraduation='Titan Sky Black' numberGraduation={3} /> */}
          <PaymentDetail customer={dataCustomer} />
          {/* <DepositTable /> */}
          {/* <Network customers={dataCustomer && dataCustomer.network} /> */}
        </main>
      </Modal.Body>
    </Modal.Root>
  )
}