diff options
Diffstat (limited to 'src-migrate/modules/product-detail/components/ProductDetail.tsx')
| -rw-r--r-- | src-migrate/modules/product-detail/components/ProductDetail.tsx | 95 |
1 files changed, 80 insertions, 15 deletions
diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx index fab5ecf3..f06f958a 100644 --- a/src-migrate/modules/product-detail/components/ProductDetail.tsx +++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx @@ -49,6 +49,9 @@ import SimilarBottom from './SimilarBottom'; import SimilarSide from './SimilarSide'; import dynamic from 'next/dynamic'; +// 1. IMPORT MODAL (Baru) +import ProductComparisonModal from './ProductComparisonModal'; + import { gtagProductDetail } from '@/core/utils/googleTag'; type Props = { @@ -74,6 +77,9 @@ const ProductDetail = ({ product }: Props) => { const [loadingSpecs, setLoadingSpecs] = useState(false); + // 2. STATE MODAL COMPARE (Baru) + const [isCompareOpen, setCompareOpen] = useState(false); + useEffect(() => { try { setAuth(getAuth() ?? null); @@ -322,6 +328,13 @@ const ProductDetail = ({ product }: Props) => { return ( <> + {/* 3. MODAL POPUP DIRENDER DISINI */} + {/* Render di luar layout utama agar tidak tertutup elemen lain */} + <ProductComparisonModal + isOpen={isCompareOpen} + onClose={() => setCompareOpen(false)} + /> + <div className='relative'> {isDesktop && !hasPrice && ( <div className='absolute inset-0 z-[20] flex items-center justify-center pointer-events-none select-none'> @@ -406,9 +419,9 @@ const ProductDetail = ({ product }: Props) => { size={18} className='text-red-600 shrink-0 mx-2' /> - <div className='text-red-600 font-normal text-h-sm p-2'> + <h1 className='text-red-600 font-normal text-h-sm'> Maaf untuk saat ini Produk yang anda cari tidak tersedia - </div> + </h1> </div> )} <div className='h-6 md:h-0' /> @@ -426,9 +439,9 @@ const ProductDetail = ({ product }: Props) => { size={18} className='text-red-600 shrink-0 mx-2' /> - <div className='text-red-600 font-normal text-h-sm p-2'> + <h1 className='text-red-600 font-normal text-h-sm'> Maaf untuk saat ini Produk yang anda cari tidak tersedia - </div> + </h1> </div> )} <h1 className={style['title']}>{product.name}</h1> @@ -448,7 +461,10 @@ const ProductDetail = ({ product }: Props) => { <div className='h-4 md:h-10' /> {!!activeVariantId && !isApproval && ( - <ProductPromoSection product={product} productId={activeVariantId} /> + <ProductPromoSection + product={product} + productId={activeVariantId} + /> )} <div className='h-0 md:h-6' /> @@ -457,25 +473,49 @@ const ProductDetail = ({ product }: Props) => { <div className={style['section-card']}> <Tabs variant="unstyled"> <TabList borderBottom="1px solid" borderColor="gray.200"> - <Tab _selected={{ color: 'red.600', borderColor: 'red.600', borderBottomWidth: '3px', fontWeight: 'bold', marginBottom: '-1.5px' }} color="gray.500" fontWeight="medium" fontSize="sm" px={4} py={3}>Deskripsi</Tab> - <Tab _selected={{ color: 'red.600', borderColor: 'red.600', borderBottomWidth: '3px', fontWeight: 'bold', marginBottom: '-1.5px' }} color="gray.500" fontWeight="medium" fontSize="sm" px={4} py={3}>Spesifikasi</Tab> - <Tab _selected={{ color: 'red.600', borderColor: 'red.600', borderBottomWidth: '3px', fontWeight: 'bold', marginBottom: '-1.5px' }} color="gray.500" fontWeight="medium" fontSize="sm" px={4} py={3}>Detail Lainnya</Tab> + <Tab + _selected={{ color: 'red.600', borderColor: 'red.600', borderBottomWidth: '3px', fontWeight: 'bold', marginBottom: '-1.5px' }} + color="gray.500" fontWeight="medium" fontSize="sm" px={4} py={3} + > + Deskripsi + </Tab> + <Tab + _selected={{ color: 'red.600', borderColor: 'red.600', borderBottomWidth: '3px', fontWeight: 'bold', marginBottom: '-1.5px' }} + color="gray.500" fontWeight="medium" fontSize="sm" px={4} py={3} + > + Spesifikasi + </Tab> + <Tab + _selected={{ color: 'red.600', borderColor: 'red.600', borderBottomWidth: '3px', fontWeight: 'bold', marginBottom: '-1.5px' }} + color="gray.500" fontWeight="medium" fontSize="sm" px={4} py={3} + > + Detail Lainnya + </Tab> </TabList> <TabPanels> {/* DESKRIPSI */} <TabPanel px={0} py={6}> <div className='overflow-x-auto text-sm text-gray-700'> - <div className={style['description']} dangerouslySetInnerHTML={{ __html: !product.description || product.description === '<p><br></p>' ? '<p>Lorem ipsum dolor sit amet.</p>' : product.description, }} /> + <div + className={style['description']} + dangerouslySetInnerHTML={{ + __html: + !product.description || product.description === '<p><br></p>' + ? '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>' + : product.description, + }} + /> </div> </TabPanel> - {/* SPESIFIKASI (LOGIKA GROUPING + RATA TENGAH) */} + {/* SPESIFIKASI (MATRIKS & SPLIT PIPA) */} <TabPanel px={0} py={2}> <Box border="1px solid" borderColor="gray.200" borderRadius="sm" overflowX="auto"> {loadingSpecs ? ( <Center py={6}><Spinner color='red.500' /></Center> ) : specsMatrix.length > 0 ? ( + // Cek Single vs Multi Variant (() => { const isSingleVariant = product.variants.length === 1; const globalAlign = isSingleVariant ? "left" : "center"; @@ -484,11 +524,27 @@ const ProductDetail = ({ product }: Props) => { <Table variant="simple" size="md"> <Thead bg="red.600"> <Tr> - <Th width={isSingleVariant ? "30%" : "20%"} borderColor="whiteAlpha.300" color="white" fontSize="sm" textTransform="none" verticalAlign="middle"> + <Th + width={isSingleVariant ? "30%" : "20%"} + borderColor="whiteAlpha.300" + color="white" + fontSize="sm" + textTransform="none" + verticalAlign="middle" + > Spesifikasi </Th> + {product.variants.map(v => ( - <Th key={v.id} borderColor="whiteAlpha.300" color="white" textAlign={globalAlign} fontSize="sm" textTransform="none" verticalAlign="middle"> + <Th + key={v.id} + borderColor="whiteAlpha.300" + color="white" + textAlign={globalAlign} + fontSize="sm" + textTransform="none" + verticalAlign="middle" + > {isSingleVariant ? 'Detail' : (v.attributes && v.attributes.length > 0 ? v.attributes.join(' - ') : v.code)} </Th> ))} @@ -563,13 +619,22 @@ const ProductDetail = ({ product }: Props) => { </div> </div> - {/* ... (Bagian Sidebar & Bottom SAMA) ... */} {isDesktop && ( <div className='md:w-3/12'> - <PriceAction product={product} /> + {/* 4. INTEGRASI: PASSING HANDLER MODAL KE PRICE ACTION */} + <PriceAction + product={product} + onCompare={() => setCompareOpen(true)} + /> + <div className='flex gap-x-5 items-center justify-center py-4'> - {/* ... Buttons ... */} + <Button as={Link} href={askAdminUrl} variant='link' target='_blank' colorScheme='gray' leftIcon={<MessageCircleIcon size={18} />} isDisabled={!hasPrice}>Ask Admin</Button> + <span>|</span> + <div className={hasPrice ? '' : 'opacity-40 pointer-events-none'}><AddToWishlist productId={product.id} /></div> + <span>|</span> + {canShare && (<RWebShare data={{ text: 'Check out this product', title: `${product.name} - Indoteknik.com`, url: (process.env.NEXT_PUBLIC_SELF_HOST || '') + (router?.asPath || '/'), }}><Button variant='link' colorScheme='gray' leftIcon={<Share2Icon size={18} />} isDisabled={!hasPrice}>Share</Button></RWebShare>)} </div> + <div className='h-6' /> <div className={style['heading']}>Produk Serupa</div> <div className='h-4' /> |