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.

128 lines
4.3 KiB
React

import { formatIDR } from '@/utils'
1 year ago
import { router, usePage } from '@inertiajs/react'
import { HiMinusCircle, HiPlusCircle, HiTrash } from 'react-icons/hi2'
1 year ago
export default function VoucherCard({ item, onRemove, onChangeQty }) {
const {
props: {
auth: { user },
},
} = usePage()
const { location_profile, quantity } = item
const handleDelete = () => {
1 year ago
onRemove(item)
fetch(
route('api.cart.store', {
profile: location_profile,
param: 'delete',
}),
{
method: 'POST',
credentials: 'include',
headers: {
'Content-Type': 'application/json',
user: user.id,
},
}
)
}
const handleAdd = () => {
1 year ago
const qty = +quantity + 1
onChangeQty(item, qty)
fetch(
route('api.cart.store', {
profile: location_profile,
param: 'add',
}),
{
method: 'POST',
credentials: 'include',
headers: {
'Content-Type': 'application/json',
user: user.id,
},
}
)
}
const handleSub = () => {
1 year ago
const qty = +quantity - 1
if (qty <= 0) {
return
}
onChangeQty(item, qty)
fetch(
route('api.cart.store', {
profile: location_profile,
param: 'sub',
}),
{
method: 'POST',
credentials: 'include',
headers: {
'Content-Type': 'application/json',
user: user.id,
},
}
)
}
return (
<div className="px-3 py-1 shadow-md rounded border border-gray-100">
<div className="text-base font-bold">
{location_profile.location.name}
</div>
<div className="w-full border border-dashed"></div>
<div className="flex flex-row justify-between items-center">
<div>
<div className="text-xs text-gray-400 py-1">
{location_profile.display_note}
</div>
<div className="text-xl font-bold">
Rp {formatIDR(location_profile.validate_price)}
</div>
{+location_profile.discount !== 0 && (
<div className="flex flex-row space-x-2 items-center text-xs pb-2">
<div className="bg-red-300 text-red-600 px-1 py-0.5 font-bold rounded">
{location_profile.discount}%
</div>
<div className="text-gray-400 line-through">
{formatIDR(
location_profile.validate_display_price
)}
</div>
</div>
)}
</div>
1 year ago
<div className="flex flex-col justify-end text-right">
<div className="text-3xl font-bold">
{location_profile.quota}
</div>
<div className="text-gray-400">
{location_profile.display_expired}
</div>
</div>
</div>
<div className="w-full border border-dashed"></div>
<div className="w-full flex flex-row justify-end items-center space-x-2 py-2">
<HiTrash
className="text-red-700 w-6 h-6 rounded-full border mr-4 hover:bg-red-700"
onClick={handleDelete}
/>
<HiMinusCircle
className="text-gray-400 w-6 h-6 rounded-full border hover:bg-gray-400"
onClick={handleSub}
/>
<div>{quantity}</div>
<HiPlusCircle
className="text-gray-400 w-6 h-6 rounded-full border hover:bg-gray-400"
onClick={handleAdd}
/>
</div>
</div>
)
}