blob: 48e568e09208d8c04c07f88e73c9d589f9408fd6 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
import style from '../styles/item.module.css'
import Image from 'next/image'
import React from 'react'
import { Skeleton, SkeletonProps, Tooltip } from '@chakra-ui/react'
import { InfoIcon } from 'lucide-react'
import { PROMO_CATEGORY } from '~/constants/promotion'
import formatCurrency from '~/libs/formatCurrency'
import { CartItem as CartItemProps } from '~/types/cart'
import CartItemPromo from './ItemPromo'
import CartItemAction from './ItemAction'
import CartItemSelect from './ItemSelect'
type Props = {
item: CartItemProps
editable?: boolean
}
const CartItem = ({ item, editable = true }: Props) => {
const image = item?.image || item?.parent?.image
return (
<div className={style.wrapper}>
{item.cart_type === 'promotion' && (
<div className={style.header}>
{item.promotion_type?.value && (
<Tooltip label={PROMO_CATEGORY[item.promotion_type?.value].description} placement="top" bgColor='red.600' p={2} rounded={6}>
<div className={style.badgeType}>
Paket {PROMO_CATEGORY[item.promotion_type?.value].alias}
<InfoIcon size={14} />
</div>
</Tooltip>
)}
<div className='w-2' />
<div>
Selamat! Pembelian anda lebih hemat {' '}
<span className={style.savingAmt}>
Rp{formatCurrency((item.package_price || 0) * item.quantity - item.subtotal)}
</span>
</div>
</div>
)}
<div className={style.mainProdWrapper}>
{editable && <CartItemSelect item={item} />}
<div className='w-4' />
<div className={style.image}>
{image && <Image src={image} alt={item.name} width={128} height={128} />}
{!image && <div className={style.noImage}>No Image</div>}
</div>
<div className={style.details}>
<div className={style.name}>{item.name}</div>
<div className='mt-2 flex justify-between w-full'>
<div className='flex flex-col gap-y-1'>
{item.cart_type === 'promotion' && (
<div className={style.discPriceSection}>
<span className={style.priceBefore}>
Rp {formatCurrency((item.package_price || 0))}
</span>
<span className={style.price}>
Rp {formatCurrency(item.price.price)}
</span>
</div>
)}
{item.cart_type === 'product' && (
<>
<div className={style.price}>
{item.price.price > 0 && `Rp ${formatCurrency(item.price.price)}`}
{item.price.price === 0 && '-'}
</div>
<div>{item.code}</div>
</>
)}
<div>
{item.weight} Kg
</div>
</div>
{editable && <CartItemAction item={item} />}
{!editable && <div className={style.quantity}>{item.quantity}</div>}
</div>
</div>
</div>
<div className="flex flex-col">
{item.products?.map((product) => <CartItemPromo key={product.id} product={product} />)}
{item.free_products?.map((product) => <CartItemPromo key={product.id} product={product} />)}
</div>
</div>
)
}
CartItem.Skeleton = function CartItemSkeleton(props: SkeletonProps & { count: number }) {
return Array.from({ length: props.count }).map((_, index) => (
<Skeleton key={index}
height='100px'
width='100%'
rounded='md'
{...props}
/>
))
}
export default CartItem
|
