You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

260 lines
11 KiB
JavaScript

import React, { useState, useEffect } from 'react'
import { router, useForm, usePage } from '@inertiajs/react'
import { HiOutlineClipboardDocumentList } from 'react-icons/hi2'
import { isEmpty } from 'lodash'
import { toastSuccess } from '@/Customer/utils'
import { formatIDR } from '@/utils'
import FormFile from '@/Components/FormFile'
import Alert from '@/Components/Alert'
export const FormUploadManual = () => {
const {
props: { accounts, deposit, flash, bank_admin_fee },
} = usePage()
const [imageUrl, setImageUrl] = useState(deposit.image_prove_url)
const [account, setAccount] = useState(null)
const { data, setData, errors, processing, post } = useForm({
account_id: '',
image: null,
image_url: deposit.image_prove_url,
})
const handleSelectAccount = (id) => {
if (id === '') {
setData('account_id', '')
setAccount(null)
return
}
const account = accounts.find((acc) => acc.id === id)
setData('account_id', account.id)
setAccount(account)
}
const handleCopyToClipboard = (text) => {
toastSuccess('copied to clipboard')
navigator.clipboard.writeText(text)
}
const handleSubmit = () => {
if (processing) {
return
}
post(route('transactions.deposit.update', deposit), {
replace: true,
preserveState: true,
onSuccess: () =>
setTimeout(
() => router.get(route(route().current(), deposit)),
500
),
})
}
useEffect(() => {
if (deposit.account !== null) {
handleSelectAccount(deposit.account.id)
}
}, [deposit])
if (isEmpty(imageUrl) == false) {
return (
<div className="px-5 mt-2">
<div className="font-bold">Bukti Transfer</div>
<img
src={`${imageUrl}`}
loading="lazy"
className="w-full object-contain h-[calc(50dvh)] mb-1"
alt="bukti transfer"
/>
<div
className="mt-10 w-full px-4 py-2 border rounded-full bg-blue-600 text-white hover:bg-white hover:text-black"
onClick={() => setImageUrl(null)}
>
Ubah Bukti Transfer
</div>
</div>
)
}
return (
<div className="px-5 mt-4">
<div className="my-4">
<Alert type={flash.message.type}>
<span className="font-semibold">
{flash.message.message}
</span>
</Alert>
<div className="mb-1 font-bold">Bank</div>
{account !== null ? (
<div className="flex flex-row w-full gap-2">
<div
className="px-3 py-2 border rounded-md flex-1 flex flex-row items-center gap-1 shadow-md hover:bg-gray-100"
onClick={() => handleSelectAccount(account.id)}
>
<div className="w-1/3">
<img
src={account.logo_url}
alt="logo bank"
className="h-10"
loading="lazy"
/>
</div>
<div>
{account.name} - {account.bank_name}
</div>
</div>
<div
className="text-center border flex flex-row rounded-md shadow-md items-center justify-center px-3 py-2 hover:bg-gray-100"
onClick={() => handleSelectAccount('')}
>
<div>Ubah</div>
</div>
</div>
) : (
<div className="flex flex-col gap-2">
{accounts.map((account) => (
<div
key={account.id}
className="px-3 py-2 border rounded-md flex flex-row w-full items-center gap-1 shadow-md hover:bg-gray-100"
onClick={() => handleSelectAccount(account.id)}
>
<div className="w-1/3">
<img
src={account.logo_url}
alt="logo bank"
className="h-10"
loading="lazy"
/>
</div>
<div>
{account.name} - {account.bank_name}
</div>
</div>
))}
</div>
)}
</div>
{account !== null && (
<>
<div className="my-5">
<div className="bg-blue-50 text-blue-700 p-3 border rounded-md">
<div>
<span className="font-bold">
{account.bank_name}
</span>
</div>
<div>
Atas Nama :{' '}
<span className="font-bold">
{account.holder_name}
</span>
</div>
<div
className="flex flex-row items-center space-x-1"
onClick={() =>
handleCopyToClipboard(
account.account_number
)
}
>
<div>Nomor Rekening : </div>
<div className="font-bold pr-2">
{account.account_number}
</div>
<HiOutlineClipboardDocumentList className=" w-5 h-5 text-blue-600" />
</div>
<div className="font-bold mt-5">Rincian</div>
<table className="w-full">
<tbody>
<tr>
<td className="w-1/3">
Jumlah Deposit
</td>
<td>: </td>
<td className="text-right">
<span className="font-bold">
{deposit.amount}
</span>
</td>
<td className="w-5" />
</tr>
<tr>
<td>Biaya Admin</td>
<td>: </td>
<td className="text-right">
<span className="font-bold">
{+bank_admin_fee === 0 ? (
'Gratis'
) : (
<>
Rp.{' '}
{formatIDR(
+bank_admin_fee
)}
</>
)}
</span>
</td>
<td className="w-5" />
</tr>
<tr
onClick={() =>
handleCopyToClipboard(
+bank_admin_fee + +deposit.debit
)
}
>
<td>Total Transfer</td>
<td> : </td>
<td className="text-right">
<span className="font-bold">
Rp.{' '}
{formatIDR(
+bank_admin_fee +
+deposit.debit
)}
</span>
</td>
<td className="w-5">
<HiOutlineClipboardDocumentList className=" w-5 h-5 text-blue-600" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div className="-mb-3">
<div className="font-bold">Bukti Transfer</div>
{isEmpty(data.image_url) == false && (
<img
src={`${data.image_url}`}
className="w-full h-52 mb-1"
alt="bukti transfer"
loading="lazy"
/>
)}
</div>
<FormFile
onChange={(e) => setData('image', e.target.files[0])}
error={errors.image}
/>
<div className="mb-1 -mt-4 text-sm font-medium text-gray-500">
upload gambar dalam ekstensi jpg, png, jpeg
</div>
<div
className="mt-10 w-full px-4 py-2 border rounded-full bg-blue-600 text-white hover:bg-white hover:text-black"
onClick={() => handleSubmit()}
>
Upload
</div>
</>
)}
</div>
)
}