import React, { useEffect } from 'react' import Modal from '@/Components/Modal' import { useForm } from '@inertiajs/react' import Button from '@/Components/Button' import FormInput from '@/Components/FormInput' import RoleSelectionInput from '../Role/SelectionInput' import { isEmpty } from 'lodash' export default function FormModal(props) { const { modalState } = props const { data, setData, post, processing, errors, reset, clearErrors } = useForm({ amount: '', image_prove_url: '', status: '', account: { name: '', bank_name: '', holder_name: '', account_number: '', }, payment_channel: '', is_valid: 0, status_text: '', text_color: '', customer_name: '', customer_phone: '', description: '', }) const handleOnChange = (event) => { setData( event.target.name, event.target.type === 'checkbox' ? event.target.checked ? 1 : 0 : event.target.value ) } const handleReset = () => { modalState.setData(null) reset() clearErrors() } const handleClose = () => { handleReset() modalState.toggle() } const handleSubmit = () => { const deposit = modalState.data post(route('deposit.update', deposit), { onSuccess: () => handleClose(), }) } useEffect(() => { const deposit = modalState.data if (isEmpty(deposit) === false) { setData({ amount: deposit.amount, account: deposit.account, image_prove_url: deposit.image_prove_url, payment_channel: deposit.payment_channel, is_valid: deposit.is_valid, status_text: deposit.status.text, text_color: deposit.status.text_color, customer_name: `${deposit.customer.name} ( ${ deposit.customer.phone ?? deposit.customer.email } )`, description: deposit.description, }) return } }, [modalState]) return ( {data.account !== null && ( )}
Customer : {data.customer_name}
Deskripsi : {data.description}
Metode Pembayaran : {data.payment_channel}
Bank Akun : {data.account.name} ({data.account.bank_name})
Jumlah : {data.amount}
Status : {data.status_text}
{isEmpty(data.image_prove_url) === false && (
)} {+data.is_valid !== 0 && ( <>
Status
)}
) }