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 FormInput from '@/Components/FormInput' import FormInputDate from '@/Components/FormInputDate' import BottomSheet from '../Components/BottomSheet' import FormInputNumericWith from '@/Components/FormInputNumericWith' 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 Repay({ payments, amount, auth: { user } }) { const paymentInfoModal = useModalState() const { data, setData, post, processing, errors } = useForm({ amount: amount, payment: '', not_fullpayment_reason: '', next_payment: '', }) const amounts = [amount] 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 isNotFullPayment = +user.paylater.usage !== +data.amount const handleSubmit = () => { if (processing) { return } post(route('customer.paylater.repay')) } return (
{ router.get(route('customer.paylater.index')) }} >
Nominal Tagihan
{amounts.map((amount) => (
setAmount(amount)} > Rp{formatIDR(amount)}
))}
ATAU
setData('amount', e.target.value)} error={errors.amount} className={'pl-10'} leftItem={
Rp
} />
{isNotFullPayment && (
setData( 'not_fullpayment_reason', e.target.value ) } error={errors.not_fullpayment_reason} /> setData('next_payment', date)} error={errors.next_payment} />
)}
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
)}
) }