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.

55 lines
1.6 KiB
React

1 year ago
import React, { useState } from 'react'
import { usePage, router } from '@inertiajs/react'
import BottomSheet from '@/Customer/Components/BottomSheet'
const Payment = ({ state }) => {
const {
props: { payments },
} = usePage()
const [processing, setProcessing] = useState(false)
const isEnable = (enable) => {
if (enable) {
return 'font-semibold h-11 border bg-blue-700 text-white px-5 py-2 rounded-full hover:text-black hover:bg-white'
}
return 'font-semibold h-11 border bg-gray-400 text-white px-5 py-2 rounded-full'
}
const pay = (payment) => {
if (processing) {
return
}
router.post(
route('cart.purchase'),
{
payed_with: payment,
},
{
onBefore: () => setProcessing(true),
onFinish: () => setProcessing(false),
}
)
}
return (
<BottomSheet isOpen={state.isOpen} toggle={() => state.toggle()}>
<div className="w-full flex flex-col pt-5 pb-28 px-4 gap-2">
<div className="mb-2 font-bold text-lg">Opsi Pembayaran</div>
{payments.map((payment) => (
<div
key={payment.name}
className={isEnable(payment.is_enable)}
onClick={() => pay(payment.name)}
>
{payment.display_name}
</div>
))}
</div>
</BottomSheet>
)
}
export default Payment