diff options
Diffstat (limited to 'src-migrate/modules/product-detail/components/Information.tsx')
| -rw-r--r-- | src-migrate/modules/product-detail/components/Information.tsx | 114 |
1 files changed, 82 insertions, 32 deletions
diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx index a7a58cbc..b7d3401e 100644 --- a/src-migrate/modules/product-detail/components/Information.tsx +++ b/src-migrate/modules/product-detail/components/Information.tsx @@ -11,12 +11,11 @@ import Link from 'next/link'; import { useEffect, useRef, useState } from 'react'; import currencyFormat from '@/core/utils/currencyFormat'; -import { InputGroup, InputRightElement, Spinner } from '@chakra-ui/react'; +import { InputGroup, InputRightElement, SimpleGrid, Flex, Text, Box } from '@chakra-ui/react'; import { ChevronDownIcon } from '@heroicons/react/24/outline'; import Image from 'next/image'; import { formatToShortText } from '~/libs/formatNumber'; import { createSlug } from '~/libs/slug'; -import { getVariantSLA } from '~/services/productVariant'; import { IProductDetail } from '~/types/product'; import { useProductDetail } from '../stores/useProductDetail'; import useVariant from '../hook/useVariant'; @@ -30,7 +29,7 @@ type Props = { }; const Information = ({ product }: Props) => { - const { selectedVariant, setSelectedVariant, setSla, setActive, sla } = + const { selectedVariant, setSelectedVariant, setSla, sla } = useProductDetail(); const [inputValue, setInputValue] = useState<string | null>( @@ -45,15 +44,6 @@ const Information = ({ product }: Props) => { const variantId = selectedVariant?.id; const { slaVariant, isLoading } = useVariant({ variantId }); - // let variantOptions = product?.variants; - - // const querySLA = useQuery<IProductVariantSLA>({ - // queryKey: ['variant-sla', selectedVariant?.id], - // queryFn: () => getVariantSLA(selectedVariant?.id), - // enabled: !!selectedVariant?.id, - // }); - // const sla = querySLA?.data; - useEffect(() => { if (selectedVariant) { setInputValue( @@ -66,14 +56,13 @@ const Information = ({ product }: Props) => { }, [selectedVariant]); useEffect(() => { - if (isLoading){ + if (isLoading) { setSla(null); } if (slaVariant) { setSla(slaVariant); } - }, [slaVariant, isLoading]); - + }, [slaVariant, isLoading, setSla]); const handleOnChange = (vals: any) => { setDisableFilter(true); @@ -98,6 +87,15 @@ const Information = ({ product }: Props) => { setInputValue(e.target.value); }; + // STYLE CUSTOM UNTUK BARIS (Item Code, dll) + const rowStyle = { + backgroundColor: '#ffffff', + fontSize: '13px', + borderBottom: '1px dashed #e2e8f0', + padding: '8px 0', + marginBottom: '0px' + }; + return ( <div className={style['wrapper']}> <div className='realtive mb-5'> @@ -183,12 +181,15 @@ const Information = ({ product }: Props) => { </AutoComplete> </div> - <div className={style['row']}> - <div className={style['label']}>Item Code</div> + {/* ITEM CODE */} + <div className={style['row']} style={rowStyle}> + <div className={style['label']} style={{ color: '#6b7280' }}>Item Code</div> <div className={style['value']}>{selectedVariant?.code}</div> </div> - <div className={style['row']}> - <div className={style['label']}>Manufacture</div> + + {/* MANUFACTURE */} + <div className={style['row']} style={rowStyle}> + <div className={style['label']} style={{ color: '#6b7280' }}>Manufacture</div> <div className={style['value']}> {!!product.manufacture.name ? ( <Link @@ -217,29 +218,78 @@ const Information = ({ product }: Props) => { )} </div> </div> - <div className={style['row']}> - <div className={style['label']}>Berat Barang</div> + + {/* BERAT BARANG */} + <div className={style['row']} style={rowStyle}> + <div className={style['label']} style={{ color: '#6b7280' }}>Berat Barang</div> <div className={style['value']}> {selectedVariant?.weight > 0 ? `${selectedVariant?.weight} Kg` : '-'} </div> </div> - <div className={style['row']}> - <div className={style['label']}>Terjual</div> + + {/* TERJUAL */} + <div className={style['row']} style={{ ...rowStyle, borderBottom: 'none' }}> + <div className={style['label']} style={{ color: '#6b7280' }}>Terjual</div> <div className={style['value']}> {product.qty_sold > 0 ? formatToShortText(product.qty_sold) : '-'} </div> </div> - <div className={style['row']}> - <div className={style['label']}>Persiapan Barang</div> - {isLoading && ( - <div className={style['value']}> - <Skeleton height={5} width={100} /> - </div> - )} - {!isLoading && <div className={style['value']}>{sla?.sla_date}</div>} + + {/* === DETAIL INFORMASI PRODUK (Updated Layout) === */} + <div className="mt-6 border-t pt-4"> + <h2 className="font-bold text-gray-800 text-sm mb-4">Detail Informasi Produk</h2> + + {/* Perubahan: Spacing diperbesar menjadi 10 agar estimasi bergeser ke kanan */} + <SimpleGrid columns={{ base: 1, md: 3 }} spacing={10}> + {/* 1. Distributor Resmi */} + <Flex align="center" className="gap-3"> + <img + src="/images/produk_asli.svg" + alt="Distributor Resmi" + className="w-10 h-10 shrink-0" + /> + <Box> + <Text fontSize="11px" color="gray.500" lineHeight="short" mb="1px">Distributor Resmi</Text> + <Text fontSize="12px" fontWeight="bold" color="gray.800" lineHeight="short">Jaminan Produk Asli</Text> + </Box> + </Flex> + + {/* 2. Estimasi Penyiapan */} + <Flex align="center" className="gap-3"> + <img + src="/images/estimasi.svg" + alt="Estimasi Penyiapan" + className="w-9 h-9 shrink-0" + /> + <Box> + <Text fontSize="11px" color="gray.500" lineHeight="short" mb="1px">Estimasi Penyiapan</Text> + {isLoading ? ( + <Skeleton height="12px" width="60px" mt="2px" /> + ) : ( + <Text fontSize="12px" fontWeight="bold" color="gray.800" lineHeight="short"> + {sla?.sla_date || '3 - 7 Hari'} + </Text> + )} + </Box> + </Flex> + + {/* 3. Garansi Produk */} + <Flex align="center" className="gap-3"> + <img + src="/images/garansi.svg" + alt="Garansi Produk" + className="w-10 h-10 shrink-0" + /> + <Box> + <Text fontSize="11px" color="gray.500" lineHeight="short" mb="1px">Garansi Produk</Text> + <Text fontSize="12px" fontWeight="bold" color="gray.800" lineHeight="short">24 Bulan</Text> + </Box> + </Flex> + </SimpleGrid> </div> + </div> ); }; -export default Information; +export default Information;
\ No newline at end of file |