import React, { useEffect, useState, useRef } from 'react' import { Head, useForm } from '@inertiajs/react' import { isEmpty } from 'lodash' import { HiXCircle } from 'react-icons/hi2' import { Spinner } from 'flowbite-react' import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout' import FormInput from '@/Components/FormInput' import FormInputWith from '@/Components/FormInputWith' import TextArea from '@/Components/TextArea' import FormFile from '@/Components/FormFile' import Button from '@/Components/Button' import FormInputNumeric from '@/Components/FormInputNumeric' export default function Form(props) { const { customer, statuses, levels, csrf_token } = props const [uploadIndex, setUploadIndex] = useState(null) const [loading, setLoading] = useState(false) const generalUploadRef = useRef() const { data, setData, post, processing, errors } = useForm({ email: '', username: '', password: '', name: '', fullname: '', address: '', phone: '', identity_image: null, identity_image_url: '', image: null, image_url: '', status: 0, level: '', paylater_limit: '', day_deadline: '', id_number: '', job: '', image_selfie: null, image_selfie_url: '', file_statement: null, file_statement_url: '', file_agreement: null, file_agreement_url: '', items: [], locations: [], }) const addItem = () => { setData( 'items', data.items.concat({ name: '', type: 'text', value: '', }) ) } const removeItem = (index) => { setData( 'items', data.items.filter((_, i) => i !== index) ) } const changeValueItem = (index, e) => { setData( 'items', data.items.map((item, i) => { if (i === index) { item[e.target.name] = e.target.value } return item }) ) } const handleClickUpload = (index) => { setUploadIndex(index) generalUploadRef.current.click() } const handleFileUpload = (e) => { const body = new FormData() body.append('_token', csrf_token) body.append('image', e.target.files[0]) setLoading(true) fetch(route('post.upload'), { method: 'post', body: body, headers: { 'accept-content': 'application/json', 'X-CSSRF-TOKEN': csrf_token, }, credentials: 'include', }) .then((res) => res.json()) .then((res) => { changeValueItem(uploadIndex, { target: { name: 'value', value: res.url }, }) }) .catch((err) => { alert(err) }) .finally(() => { setLoading(false) }) } const handleOnChange = (event) => { setData( event.target.name, event.target.type === 'checkbox' ? event.target.checked ? 1 : 0 : event.target.value ) } const handleSubmit = () => { if (isEmpty(customer) === false) { post(route('mitra.update', customer)) return } post(route('mitra.store')) } useEffect(() => { if (isEmpty(customer) === false) { let items = [] if (isEmpty(customer.partner) == false) { items = JSON.parse(customer.partner.additional_json) } setData({ email: customer.email, username: customer.username, password: customer.password, name: customer.name, fullname: customer.fullname, address: customer.address, phone: customer.phone, status: customer.status, image_url: customer.image_url, identity_image_url: customer.identity_image_url, level: customer.level.key, paylater_limit: customer.paylater.limit, day_deadline: customer.paylater.day_deadline, id_number: customer?.partner?.id_number, job: customer?.partner?.job, image_selfie_url: customer?.partner?.image_selfie_url, file_statement_url: customer?.partner?.file_statement_url, file_agreement_url: customer?.partner?.file_agreement_url, items: items, }) } }, [customer]) return (
Mitra WBB
+62
} name="phone" value={data.phone} onChange={handleOnChange} error={errors.phone} formClassName={'pl-10'} label="Whatsapp" />