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.

120 lines
4.6 KiB
JavaScript

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 (
<CustomerLayout>
<Head title="Top Up" />
<div className="flex flex-col min-h-[calc(95dvh)]">
<div
className="w-full px-5 py-5"
onClick={() => {
router.get(route('customer.deposit.index'))
}}
>
<HiChevronLeft className="font-bold h-5 w-5" />
</div>
<div className="w-full px-5">
<div className="mb-2 font-bold">Pilih Nominal</div>
<div className="w-full grid grid-cols-3 gap-2 text-center">
{amounts.map((amount) => (
<div
key={amount}
className={isActiveAmount(amount)}
onClick={() => setAmount(amount)}
>
{formatIDR(amount)}
</div>
))}
</div>
</div>
<div className="flex flex-row items-center space-x-2 justify-between w-full px-5 py-5">
<div className="border-b flex-1"></div>
<div>ATAU</div>
<div className="border-b flex-1"></div>
</div>
<div className="w-full px-5">
<FormInputNumeric
placeholder="masukan nominal, minimal 10.000"
value={data.amount}
onChange={(e) => setData('amount', e.target.value)}
error={errors.amount}
/>
</div>
<div className="w-full px-5 mt-10 flex flex-col">
<div className="font-bold mb-2">Metode Pembayaran</div>
{errors.payment && (
<Alert type="error">Pilih metode pembayaran</Alert>
)}
<div className="mb-2" />
<div className="w-full flex flex-col space-y-2">
{payments.map((payment) => (
<div
key={payment.name}
className={isActivePayment(payment.name)}
onClick={() => setData('payment', payment.name)}
>
<input type="radio" />
{payment.logo === null ? (
<p>{payment.display_name}</p>
) : (
<img
src={payment.logo}
className="h-7 object-cover"
/>
)}
</div>
))}
</div>
</div>
</div>
<div className="fixed bottom-20 right-0 w-full">
<div
onClick={handleSubmit}
className="border bg-blue-700 text-white px-5 py-2 mx-auto rounded-full hover:text-black hover:bg-white max-w-sm"
>
Bayar
</div>
</div>
</CustomerLayout>
)
}