import React from 'react' import { Head, Link, router, useForm, usePage } from '@inertiajs/react' import { HiCheck, HiChevronLeft } from 'react-icons/hi2' import { formatIDR } from '@/utils' import { useModalState } from '@/hooks' import { CASH_DEPOSIT } from '@/Customer/utils' import CustomerLayout from '@/Layouts/CustomerLayout' import Alert from '@/Components/Alert' import FormInputNumericWith from '@/Components/FormInputNumericWith' import BottomSheet from '../Components/BottomSheet' const PaymentInfoBottomSheet = ({ state }) => { const { props: { payments }, } = usePage() return ( state.toggle()}>
{payments.map((payment) => (
{payment.display_name}
{payment.open_hours}
{payment.name === CASH_DEPOSIT && (
Sesuai lokasi Setor Tunai
(Lihat)
)}
))}
) } export default function Topup({ payments }) { const paymentInfoModal = useModalState() const { data, setData, post, processing, errors } = 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 my-1 ${ 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)} > Rp{formatIDR(amount)}
))}
ATAU
setData('amount', e.target.value)} error={errors.amount} className={'pl-10'} leftItem={
Rp
} />
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: Rp{' '} {formatIDR(payment.admin_fee)}

) : (

Biaya admin: Gratis

)}
{payment.name === CASH_DEPOSIT && (
Info lokasi Setor Tunai
(Lihat)
)}
))}
paymentInfoModal.toggle()} >
Info Aktif Metode Pembayaran
(Lihat)
{payments.length > 0 && (
Lanjutkan Pembayaran
)}
) }