import React from 'react' import { Head, router, useForm } from '@inertiajs/react' import { HiChevronLeft } from 'react-icons/hi2' import CustomerLayout from '@/Layouts/CustomerLayout' import FormInput from '@/Components/FormInput' import Alert from '@/Components/Alert' import { formatIDR } from '@/utils' 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 handleSubmit = () => { if (processing) { return } post(route('customer.deposit.topup')) } return (

{ router.get(route('customer.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.map((payment) => (

setData('payment', payment.name)} > {payment.logo === null ? (

{payment.display_name}

) : (

)}

))}

Bayar

) }