blob: 70d50bff449e03ffe78d3f4a0a39484cf6714f02 (
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
|
import Image from 'next/image'
import React from 'react'
import formatCurrency from '~/common/libs/formatCurrency'
import { CartItem as CartItemProps } from '~/common/types/cart'
import ProductPromo from './ProductPromo'
import { Skeleton, SkeletonProps } from '@chakra-ui/react'
import style from '../styles/CartItem.module.css'
import CartItemAction from '../components/CartItemAction'
import CartItemSelect from '../components/CartItemSelect'
type Props = {
item: CartItemProps
}
const CartItem = ({ item }: Props) => {
const image = item?.image || item?.parent?.image
return (
<div className={style.wrapper}>
<div className={style.mainProdWrapper}>
<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={style.spacing2} />
{item.cart_type === 'promotion' && (
<div className={style.discPriceSection}>
<span className={style.priceBefore}>
Rp {formatCurrency((item.package_price || 0))}
</span>
<span className={style.savingAmt}>
Hemat Rp {formatCurrency((item.package_price || 0) - item.subtotal)}
</span>
<span className={style.price}>
Rp {formatCurrency(item.subtotal)}
</span>
</div>
)}
{item.cart_type === 'product' && (
<>
<div className={style.price}>
Rp {formatCurrency(item.price.price)}
</div>
<div>{item.code}</div>
</>
)}
<div>
<span className={style.weightLabel}>Berat barang: </span>
{item.weight} Kg
</div>
</div>
<CartItemAction item={item} />
</div>
<div className="flex flex-col">
{item.products?.map((product) => <ProductPromo key={product.id} product={product} />)}
{item.free_products?.map((product) => <ProductPromo 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
|
