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.

100 lines
3.9 KiB
React

1 year ago
import React, { useState } from 'react'
import { Head, router } from '@inertiajs/react'
1 year ago
import { formatIDR } from '@/utils'
import CustomerLayout from '@/Layouts/CustomerLayout'
import VoucherCard from './VoucherCard'
1 year ago
import EmptyHere from './IndexPartials/EmptyHere'
import { useModalState } from '@/hooks'
import Payment from './IndexPartials/Payment'
1 year ago
export default function Index({ carts: items, total, allow_process }) {
const [carts, setCarts] = useState(items)
1 year ago
const paymentModal = useModalState()
1 year ago
const removeCart = (cart) => {
setCarts(carts.filter((c) => c.id !== cart.id))
}
console.log(carts)
const changeQty = (cart, qty) => {
setCarts(
carts.map((c) => {
if (c.id === cart.id) {
return {
...c,
quantity: qty,
}
}
return c
})
)
}
1 year ago
const handlePayment = () => {
paymentModal.toggle()
}
const handleTopUp = () => {
router.get(route('transactions.deposit.topup'))
}
return (
<CustomerLayout>
<Head title="Cart" />
<div className="flex flex-col min-h-[calc(95dvh)]">
<div className="py-5 text-2xl px-5 font-bold">Keranjang</div>
{carts.length > 0 ? (
<>
1 year ago
<div className="w-full px-2 flex flex-col space-y-2 pb-28">
{carts.map((item) => (
1 year ago
<VoucherCard
key={item.id}
item={item}
onRemove={removeCart}
onChangeQty={changeQty}
/>
))}
</div>
1 year ago
<div className="fixed bottom-12 w-full bg-white py-5 px-2 shadow-lg border-t max-w-md mx-auto">
<div className="flex flex-row justify-between px-5">
<div className="flex flex-col">
<div className="text-gray-400">
Total Harga
</div>
<div className="font-bold text-lg">
Rp. {formatIDR(total)}
1 year ago
</div>
</div>
1 year ago
{allow_process ? (
<div
onClick={handlePayment}
className="font-bold h-11 border bg-blue-700 text-white px-5 py-2 rounded-full hover:text-black hover:bg-white"
>
Bayar
</div>
1 year ago
) : (
<div
onClick={handleTopUp}
1 year ago
className="font-bold h-11 border bg-blue-700 text-white px-5 py-2 rounded-full hover:text-black hover:bg-white"
>
Top Up
</div>
1 year ago
)}
</div>
{allow_process === false && (
<div className="-mt-2 px-5 text-right text-sm text-gray-500">
saldo tidak cukup
</div>
)}
</div>
</>
) : (
<EmptyHere />
)}
</div>
1 year ago
<Payment state={paymentModal} />
</CustomerLayout>
)
}