diff options
Diffstat (limited to 'src-migrate/modules/product-detail/components/Information.tsx')
| -rw-r--r-- | src-migrate/modules/product-detail/components/Information.tsx | 95 |
1 files changed, 53 insertions, 42 deletions
diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx index 6e2c930e..f3abe0c7 100644 --- a/src-migrate/modules/product-detail/components/Information.tsx +++ b/src-migrate/modules/product-detail/components/Information.tsx @@ -12,15 +12,21 @@ import { useEffect, useRef, useState } from 'react'; import axios from 'axios'; import currencyFormat from '@/core/utils/currencyFormat'; -import { InputGroup, InputRightElement, SimpleGrid, Flex, Text, Box, Center } from '@chakra-ui/react'; +import { InputGroup, InputRightElement, SimpleGrid, Flex, Text, Box, Center, Icon } from '@chakra-ui/react'; import { ChevronDownIcon } from '@heroicons/react/24/outline'; -import Image from 'next/image'; +import ImageNext from 'next/image'; import { formatToShortText } from '~/libs/formatNumber'; import { createSlug } from '~/libs/slug'; import { IProductDetail } from '~/types/product'; import { useProductDetail } from '../stores/useProductDetail'; import useVariant from '../hook/useVariant'; +// Import View Components +import MobileView from '@/core/components/views/MobileView'; // Pastikan path import benar + +// Import Modal Compare +import ProductComparisonModal from './ProductComparisonModal'; + const Skeleton = dynamic(() => import('@chakra-ui/react').then((mod) => mod.Skeleton) ); @@ -30,8 +36,7 @@ type Props = { }; const Information = ({ product }: Props) => { - const { selectedVariant, setSelectedVariant, setSla, sla } = - useProductDetail(); + const { selectedVariant, setSelectedVariant, setSla, sla } = useProductDetail(); const [inputValue, setInputValue] = useState<string | null>( selectedVariant?.code + ' - ' + selectedVariant?.attributes[0] @@ -48,6 +53,9 @@ const Information = ({ product }: Props) => { const [warranties, setWarranties] = useState<Record<string, string>>({}); const [loadingWarranty, setLoadingWarranty] = useState(false); + // State untuk Modal Compare + const [isCompareOpen, setIsCompareOpen] = useState(false); + useEffect(() => { const fetchWarrantyDirectly = async () => { if (!product?.variants || product.variants.length === 0) return; @@ -166,9 +174,7 @@ const Information = ({ product }: Props) => { } _selected={ option.id === selectedVariant?.id - ? { - bg: 'gray.300', - } + ? { bg: 'gray.300' } : undefined } textTransform='capitalize' @@ -183,13 +189,7 @@ const Information = ({ product }: Props) => { ? ' - ' + option?.attributes[0] : '')} </div> - <div - className={ - option?.price?.discount_percentage - ? 'flex gap-x-4 items-center justify-between' - : '' - } - > + <div className={option?.price?.discount_percentage ? 'flex gap-x-4 items-center justify-between' : ''}> {option?.price?.discount_percentage > 0 && ( <> <div className='badge-solid-red text-xs'> @@ -209,6 +209,38 @@ const Information = ({ product }: Props) => { ))} </AutoCompleteList> </AutoComplete> + + {/* === TOMBOL BANDINGKAN PRODUK (HANYA MOBILE) === */} + <MobileView> + <div + className="flex items-center justify-between py-3 px-4 mt-4 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors group" + onClick={() => setIsCompareOpen(true)} + > + <div className="flex items-center gap-3"> + <div className="bg-red-50 p-2 rounded-full group-hover:bg-red-100 transition-colors"> + <ImageNext src="/images/logo-bandingkan.svg" width={15} height={15} alt="bandingkan" /> + </div> + <div className="flex flex-col"> + <span className="text-sm font-bold text-gray-800">Bandingkan Produk</span> + <span className="text-xs text-gray-500">Coba bandingkan dengan produk lainnya</span> + </div> + </div> + <div className="flex items-center gap-2"> + <span className="bg-red-600 text-white text-[10px] font-bold px-2 py-0.5 rounded-full">Baru</span> + <Icon as={ChevronDownIcon} className="w-4 h-4 text-gray-400 transform -rotate-90" /> + </div> + </div> + </MobileView> + + {/* Render Modal (Logic open/close ada di dalam component) */} + {isCompareOpen && ( + <ProductComparisonModal + isOpen={isCompareOpen} + onClose={() => setIsCompareOpen(false)} + mainProduct={product} + selectedVariant={selectedVariant} + /> + )} </div> {/* ITEM CODE */} @@ -230,7 +262,7 @@ const Information = ({ product }: Props) => { )} > {product?.manufacture.logo ? ( - <Image + <ImageNext height={50} width={100} src={product.manufacture.logo} @@ -265,45 +297,33 @@ const Information = ({ product }: Props) => { </div> </div> - {/* === DETAIL INFORMASI PRODUK (Horizontal Minimalis) === */} + {/* === DETAIL INFORMASI PRODUK === */} <div className="mt-6 border-t pt-4"> <h2 className="hidden md:block font-bold text-gray-800 text-sm mb-4"> Detail Informasi Produk </h2> - {/* Mobile: 3 Kolom, Spacing Kecil. Desktop: 3 Kolom, Spacing Besar */} <SimpleGrid columns={{ base: 3, md: 3 }} spacing={{ base: 2, md: 10 }}> - - {/* 1. Distributor Resmi */} <Flex direction={{ base: 'column', md: 'row' }} align="center" textAlign={{ base: 'center', md: 'left' }} gap={{ base: 2, md: 3 }} > - <img - src="/images/produk_asli.svg" - alt="Distributor Resmi" - className="w-8 h-8 md:w-10 md:h-10 shrink-0" - /> + <img src="/images/produk_asli.svg" alt="Distributor Resmi" className="w-8 h-8 md:w-10 md:h-10 shrink-0" /> <Box> <Text fontSize={{ base: "10px", md: "11px" }} color="gray.500" lineHeight="short" mb="1px">Distributor Resmi</Text> <Text fontSize={{ base: "10px", md: "12px" }} fontWeight="bold" color="gray.800" lineHeight="1.2">Jaminan Produk Asli</Text> </Box> </Flex> - {/* 2. Estimasi Penyiapan */} <Flex direction={{ base: 'column', md: 'row' }} align="center" textAlign={{ base: 'center', md: 'left' }} gap={{ base: 2, md: 3 }} > - <img - src="/images/estimasi.svg" - alt="Estimasi Penyiapan" - className="w-8 h-8 md:w-9 md:h-9 shrink-0" - /> + <img src="/images/estimasi.svg" alt="Estimasi Penyiapan" className="w-8 h-8 md:w-9 md:h-9 shrink-0" /> <Box> <Text fontSize={{ base: "10px", md: "11px" }} color="gray.500" lineHeight="short" mb="1px">Estimasi Penyiapan</Text> {isLoading ? ( @@ -316,35 +336,26 @@ const Information = ({ product }: Props) => { </Box> </Flex> - {/* 3. Garansi Produk */} <Flex direction={{ base: 'column', md: 'row' }} align="center" textAlign={{ base: 'center', md: 'left' }} gap={{ base: 2, md: 3 }} > - <img - src="/images/garansi.svg" - alt="Garansi Produk" - className="w-8 h-8 md:w-10 md:h-10 shrink-0" - /> + <img src="/images/garansi.svg" alt="Garansi Produk" className="w-8 h-8 md:w-10 md:h-10 shrink-0" /> <Box> <Text fontSize={{ base: "10px", md: "11px" }} color="gray.500" lineHeight="short" mb="1px">Garansi Produk</Text> - {loadingWarranty ? ( - <Center><Skeleton height="10px" width="50px" mt="2px" /></Center> + <Center><Skeleton height="10px" width="50px" mt="2px" /></Center> ) : ( <Text fontSize={{ base: "10px", md: "12px" }} fontWeight="bold" color="gray.800" lineHeight="1.2"> - {selectedVariant && warranties[selectedVariant.id] - ? warranties[selectedVariant.id] - : '-'} + {selectedVariant && warranties[selectedVariant.id] ? warranties[selectedVariant.id] : '-'} </Text> )} </Box> </Flex> </SimpleGrid> </div> - </div> ); }; |