import React, { useState, useEffect } from 'react' import { Head, router, useForm, usePage } from '@inertiajs/react' import { HiChevronLeft, HiClipboard, HiClipboardDocumentList, } from 'react-icons/hi2' import CustomerLayout from '@/Layouts/CustomerLayout' import { formatIDR } from '@/utils' import FormFile from '@/Components/FormFile' import { isEmpty } from 'lodash' import Alert from '@/Components/Alert' import { toast } from 'react-toastify' const PayButton = () => { const { props: { deposit, midtrans_client_key, is_production, direct, flash }, } = usePage() const [loading, setLoading] = useState(false) const handleResult = (result) => { fetch(route('api.midtrans.payment', deposit), { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ result }), }).finally(() => { router.get(route(route().current(), deposit)) }) } const onClickPay = () => { if (loading) { return } setLoading(true) window.snap.pay(deposit.payment_token, { // Optional onSuccess: function (result) { console.log(result) handleResult(result) setLoading(false) }, // Optional onPending: function (result) { console.log(result) handleResult(result) setLoading(false) }, // Optional onError: function (result) { console.log(result) handleResult(result) setLoading(false) }, onClose: function () { setLoading(false) }, }) } useEffect(() => { //change this to the script source you want to load, for example this is snap.js sandbox env let midtransScriptUrl = 'https://app.sandbox.midtrans.com/snap/snap.js' if (is_production) { midtransScriptUrl = 'https://app.midtrans.com/snap/snap.js' } //change this according to your client-key let scriptTag = document.createElement('script') scriptTag.src = midtransScriptUrl // optional if you want to set script attribute // for example snap.js have data-client-key attribute scriptTag.setAttribute('data-client-key', midtrans_client_key) document.body.appendChild(scriptTag) if (direct === 'true') { setTimeout(() => { onClickPay() }, 1000) } return () => { document.body.removeChild(scriptTag) } }, []) return (
{flash.message.message}
Bayar
) } const FormUpload = () => { const { props: { accounts, deposit, flash }, } = usePage() 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) } const account = accounts.find((acc) => acc.id === id) setData('account_id', account.id) setAccount(account) } const handleCopyToClipboard = (text) => { toast.success('copied to clipboard') navigator.clipboard.writeText(account.account_number) } const handleSubmit = () => { if (processing) { return } post(route('customer.deposit.update', deposit), { onSuccess: () => setTimeout( () => router.get(route(route().current(), deposit)), 3000 ), }) } return (
{flash.message.message}
Bank
{data.account_id !== '' && ( <>
Silahkan transfer nominal di atas ke
{account.bank_name}
Atas Nama :{' '} {account.holder_name}
handleCopyToClipboard( account.account_number ) } >
Nomor Rekening :
{account.account_number}
setData('image', e.target.files[0])} error={errors.image} preview={ isEmpty(data.image_url) == false && ( bukti transfer ) } />
handleSubmit()} > Upload
)}
) } const ActionSection = ({ deposit }) => { return (
{deposit.payment_channel === 'MIDTRANS' ? ( ) : ( )}
) } export default function Detail({ deposit }) { return (
{ router.get(route('customer.deposit.index')) }} >
{/* detail */}
{deposit.description}
Rp {formatIDR(deposit.amount)}
{deposit.format_created_at}
{deposit.status.text}
{/* action */} {deposit.is_valid !== 0 && }
) }