import React from 'react' import { Head, Link, router, useForm } from '@inertiajs/react' import { HiCheck, HiChevronLeft, HiQuestionMarkCircle } from 'react-icons/hi2' import { formatIDR } from '@/utils' import { CASH_DEPOSIT } from '@/Customer/utils' import CustomerLayout from '@/Layouts/CustomerLayout' import Alert from '@/Components/Alert' import FormInputNumeric from '@/Components/FormInputNumeric' export default function Topup({ payments }) { const { data, setData, post, processing, errors, reset, clearErrors } = useForm({ amount: '', payment: '', }) const amounts = [20000, 50000, 100000, 200000, 300000, 500000] const isActiveAmount = (amount) => { return `px-3 py-3 border shadow-sm rounded ${ +amount === +data.amount ? 'bg-blue-700 text-white' : '' }` } const setAmount = (amount) => { setData('amount', amount) } const isActivePayment = (payment) => { return `p-2 border shadow rounded flex flex-row items-center space-x-5 h-14 ${ payment === data.payment ? 'bg-blue-600 text-white' : '' }` } const isActivePaymentAdminFee = (payment) => { return `text-xs ${ payment === data.payment ? 'text-white' : 'text-gray-400' }` } const handleSetPayment = (payment) => { setData('payment', payment.name) } const handleSubmit = () => { if (processing) { return } post(route('transactions.deposit.topup')) } return (
{ router.get(route('transactions.deposit.index')) }} >
Pilih Nominal
{amounts.map((amount) => (
setAmount(amount)} > {formatIDR(amount)}
))}
ATAU
setData('amount', e.target.value)} error={errors.amount} />
Metode Pembayaran
{errors.payment && ( Pilih metode pembayaran )}
{payments.length <= 0 && ( Sistem pembayaran non-aktif{' '} )} {payments.map((payment) => (
handleSetPayment(payment)} > {payment.name === data.payment ? (
) : (
)}
{payment.logo === null ? (

{payment.display_name}

) : ( )} {+payment.admin_fee !== 0 && (

biaya admin:{' '} {formatIDR(payment.admin_fee)}

)}
{payment.name === CASH_DEPOSIT && (
Daftar lokasi pembayaran
ada disini
)}
))}
{payments.length > 0 && (
Bayar
)}
) }