blob: fd0e0b3c12fc46df25c8f69698b6e28a0ff69f5f (
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
|
import style from '../styles/information.module.css'
import React from 'react'
import dynamic from 'next/dynamic'
import Link from 'next/link'
import { useQuery } from 'react-query'
import { IProductDetail } from '~/types/product'
import { IProductVariantSLA } from '~/types/productVariant'
import { createSlug } from '~/libs/slug'
import { getVariantSLA } from '~/services/productVariant'
const Skeleton = dynamic(() => import('@chakra-ui/react').then((mod) => mod.Skeleton))
type Props = {
product: IProductDetail
}
const Information = ({ product }: Props) => {
const querySLA = useQuery<IProductVariantSLA>({
queryKey: ['variant-sla', product.variants[0].id],
queryFn: () => getVariantSLA(product.variants[0].id),
enabled: product.variant_total === 1
})
const sla = querySLA?.data
return (
<div className={style['wrapper']}>
<div className={style['row']}>
<div className={style['label']}>SKU Number</div>
<div className={style['value']}>SKU-{product.id}</div>
</div>
{/* <div className={style['row']}>
<div className={style['label']}>Part Number</div>
<div className={style['value']}>{product.code || '-'}</div>
</div> */}
<div className={style['row']}>
<div className={style['label']}>Manufacture</div>
<div className={style['value']}>
{!!product.manufacture.name ? (
<Link
href={createSlug('/shop/brands/', product.manufacture.name, product.manufacture.id.toString())}
className='text-danger-500 hover:underline'
>
{product.manufacture.name}
</Link>
) : '-'}
</div>
</div>
{/* <div className={style['row']}>
<div className={style['label']}>Preparation Time</div>
<div className={style['value']}>
{product.variant_total > 1 && 'Lihat Variant'}
{product.variant_total === 1 && (
<Skeleton isLoaded={querySLA.isSuccess} w={querySLA.isSuccess ? '100%' : '40px'} h='100%'>
{sla?.sla_date}
</Skeleton>
)}
</div>
</div>
<div className={style['row']}>
<div className={style['label']}>Stock</div>
<div className={style['value']}>
{product.variant_total > 1 && 'Lihat Variant'}
{product.variant_total === 1 && (
<Skeleton isLoaded={querySLA.isSuccess} w={querySLA.isSuccess ? '100%' : '10px'} h='100%'>
{sla?.qty && sla.qty > 0 ? sla?.qty : '-'}
</Skeleton>
)}
</div>
</div>
<div className={style['row']}>
<div className={style['label']}>Weight</div>
<div className={style['value']}>
{product.variant_total > 1 && 'Lihat Variant'}
{product.variant_total === 1 && (product.weight > 0 ? `${product.weight} kg` : '-')}
</div>
</div> */}
</div>
)
}
export default Information
|
