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
JavaScript
55 lines
1.6 KiB
JavaScript
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
|