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
112
113
114
115
116
117
|
import style from '../styles/variant-list.module.css'
import React from 'react'
import { Button, Skeleton } from '@chakra-ui/react'
import formatCurrency from '~/libs/formatCurrency'
import clsxm from '~/libs/clsxm'
import { IProductVariantDetail, IProductVariantSLA } from '~/types/productVariant'
import { useProductDetail } from '../stores/useProductDetail'
import { LazyLoadComponent } from 'react-lazy-load-image-component';
import { getVariantSLA } from '~/services/productVariant'
import { useQuery } from 'react-query'
import useDevice from '@/core/hooks/useDevice'
type Props = {
variants: IProductVariantDetail[]
}
const VariantList = ({ variants }: Props) => {
return (
<div className='overflow-auto'>
<div className={style['wrapper']}>
<div className={style['header']}>
<div className="w-2/12">Part Number</div>
<div className="w-2/12">Variant</div>
<div className="w-1/12">Stock</div>
<div className="w-2/12">Masa Persiapan</div>
<div className="w-1/12">Berat</div>
<div className="w-3/12">Harga</div>
<div className='w-1/12 sticky right-0 bg-gray-200'></div>
</div>
{variants.map((variant) => (
<LazyLoadComponent key={variant.id}>
<Row variant={variant} />
</LazyLoadComponent>
))}
</div>
</div>
)
}
const Row = ({ variant }: { variant: IProductVariantDetail }) => {
const { isMobile } = useDevice()
const { activeVariantId, setActive } = useProductDetail()
const querySLA = useQuery<IProductVariantSLA>({
queryKey: ['variant-sla', variant.id],
queryFn: () => getVariantSLA(variant.id),
refetchOnWindowFocus: false,
})
const sla = querySLA?.data
const handleSelect = (variant: IProductVariantDetail) => {
const priceSectionEl = document.getElementById('price-section')
if (isMobile && priceSectionEl) {
window.scrollTo({
top: priceSectionEl.offsetTop - 120,
behavior: 'smooth'
})
}
setActive(variant)
}
return (
<div className={style['row']}>
<div className='w-2/12'>{variant.code}</div>
<div className='w-2/12'>{variant.attributes.join(', ') || '-'}</div>
<div className='w-1/12'>
<Skeleton isLoaded={querySLA.isSuccess} h='21px' w={16}>
{sla?.qty !== undefined && (
<div className={clsxm('text-center rounded-md', {
[style['stock-empty']]: sla.qty == 0,
[style['stock-ready']]: sla.qty > 0,
})}
>
{sla.qty > 0 && sla.qty}
{sla.qty == 0 && '-'}
</div>
)}
</Skeleton>
</div>
<div className='w-2/12'>
<Skeleton isLoaded={querySLA.isSuccess} h='21px' w={16}>
{sla?.sla_date}
</Skeleton>
</div>
<div className='w-1/12'>
{variant.weight > 0 ? `${variant.weight} Kg` : '-'}
</div>
<div className='w-3/12'>
{variant.price.discount_percentage > 0 && (
<div className='flex items-center gap-x-1'>
<div className={style['disc-badge']}>{Math.floor(variant.price.discount_percentage)}%</div>
<div className={style['disc-price']}>Rp {formatCurrency(variant.price.price)}</div>
</div>
)}
{variant.price.price_discount > 0 && `Rp ${formatCurrency(variant.price.price_discount)}`}
{variant.price.price_discount === 0 && '-'}
</div>
<div className='w-1/12 sticky right-0 bg-white md:bg-transparent'>
<Button
onClick={() => handleSelect(variant)}
size='sm'
w='100%'
className={clsxm(style['select-btn'], {
[style['select-btn--active']]: variant.id === activeVariantId
})}
>
Pilih
</Button>
</div>
</div>
)
}
export default VariantList
|
