diff options
Diffstat (limited to 'src-migrate/modules/product-detail/components/ProductDetail.tsx')
| -rw-r--r-- | src-migrate/modules/product-detail/components/ProductDetail.tsx | 363 |
1 files changed, 231 insertions, 132 deletions
diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx index 192e1dc3..79921e22 100644 --- a/src-migrate/modules/product-detail/components/ProductDetail.tsx +++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx @@ -2,7 +2,7 @@ import style from '../styles/product-detail.module.css'; import Link from 'next/link'; import { useRouter } from 'next/router'; -import { useEffect, useState } from 'react'; +import { useEffect, useRef, useState, UIEvent } from 'react'; import { Button } from '@chakra-ui/react'; import { MessageCircleIcon, Share2Icon } from 'lucide-react'; @@ -35,6 +35,7 @@ const ProductDetail = ({ product }: Props) => { const { isDesktop, isMobile } = useDevice(); const router = useRouter(); const auth = getAuth(); + const { setAskAdminUrl, askAdminUrl, @@ -71,179 +72,277 @@ const ProductDetail = ({ product }: Props) => { product?.variants?.find((variant) => variant.is_in_bu) || product?.variants?.[0]; setSelectedVariant(selectedVariant); - // setSelectedVariant(product?.variants[0]) }, []); // Gabungkan semua gambar produk (utama + tambahan) - const allImages = product.image_carousel ? [...product.image_carousel] : []; - - if (product.image) { - allImages.unshift(product.image); // Tambahkan gambar utama di awal array - } - console.log(product); + const allImages = (() => { + const arr: string[] = []; + if (product?.image) arr.push(product.image); // selalu masukkan utama, baik mobile maupun desktop + if ( + Array.isArray(product?.image_carousel) && + product.image_carousel.length + ) { + // hindari duplikat jika image utama juga ada di carousel + const set = new Set(arr); + for (const img of product.image_carousel) { + if (!set.has(img)) { + arr.push(img); + set.add(img); + } + } + } + return arr; + })(); const [mainImage, setMainImage] = useState(allImages[0] || ''); - return ( - <> - <div className='md:flex md:flex-wrap'> - <div className='w-full mb-4 md:mb-0 px-4 md:px-0'> - <Breadcrumb id={product.id} name={product.name} /> - </div> - <div className='md:w-9/12 md:flex md:flex-col md:pr-4 md:pt-6'> - <div className='md:flex md:flex-wrap'> - <div className='md:w-4/12'> - <ProductImage product={{ ...product, image: mainImage }} /> - - {/* Carousel horizontal */} - {allImages.length > 0 && ( - <div className='mt-4 overflow-x-auto'> - <div className='flex space-x-3 pb-3'> - {allImages.map((img, index) => ( + useEffect(() => { + // update mainImage jika sumber gambar berubah dan mainImage tidak ada di daftar + if (!allImages.includes(mainImage)) { + setMainImage(allImages[0] || ''); + } + }, [allImages]); // eslint-disable-line react-hooks/exhaustive-deps + + // ===== Slider mobile (tanpa dependency) ===== + const sliderRef = useRef<HTMLDivElement | null>(null); + const [currentIdx, setCurrentIdx] = useState(0); + + const handleMobileScroll = (e: UIEvent<HTMLDivElement>) => { + const el = e.currentTarget; + if (!el) return; + const idx = Math.round(el.scrollLeft / el.clientWidth); + if (idx !== currentIdx) { + setCurrentIdx(idx); + setMainImage(allImages[idx] || ''); + } + }; + + const scrollToIndex = (i: number) => { + const el = sliderRef.current; + if (!el) return; + el.scrollTo({ left: i * el.clientWidth, behavior: 'smooth' }); + setCurrentIdx(i); + setMainImage(allImages[i] || ''); + }; + // ============================================ + +return ( + <> + <div className='md:flex md:flex-wrap'> + <div className='w-full mb-4 md:mb-0 px-4 md:px-0'> + <Breadcrumb id={product.id} name={product.name} /> + </div> + + <div className='md:w-9/12 md:flex md:flex-col md:pr-4 md:pt-6'> + <div className='md:flex md:flex-wrap'> + {/* ===== Kolom kiri: gambar ===== */} + <div className='md:w-4/12'> + {/* === MOBILE: Slider swipeable, tanpa thumbnail carousel === */} + {isMobile ? ( + <div className='relative'> + <div + ref={sliderRef} + onScroll={handleMobileScroll} + className='flex overflow-x-auto snap-x snap-mandatory scroll-smooth no-scrollbar' + style={{ + scrollBehavior: 'smooth', + msOverflowStyle: 'none', + scrollbarWidth: 'none', + }} + > + {allImages.length > 0 ? ( + allImages.map((img, i) => ( + // slide tetap selebar viewport untuk snap mulus <div - key={index} - className={`flex-shrink-0 w-16 h-16 cursor-pointer border-2 rounded-md transition-colors ${ - mainImage === img - ? 'border-red-500 ring-2 ring-red-200' - : 'border-gray-200 hover:border-gray-300' - }`} - onClick={() => setMainImage(img)} + key={i} + className='w-full flex-shrink-0 snap-center flex justify-center items-center' > + {/* gambar diperkecil */} <img src={img} - alt={`Thumbnail ${index + 1}`} - className='w-full h-full object-cover rounded-sm' - loading='lazy' + alt={`Gambar ${i + 1}`} + className='w-[85%] aspect-square object-contain' onError={(e) => { (e.target as HTMLImageElement).src = '/path/to/fallback-image.jpg'; }} /> </div> - ))} - </div> + )) + ) : ( + <div className='w-full flex-shrink-0 snap-center flex justify-center items-center'> + <img + src={mainImage || '/path/to/fallback-image.jpg'} + alt='Gambar produk' + className='w-[85%] aspect-square object-contain' + /> + </div> + )} </div> - )} - </div> - - <div className='md:w-8/12 px-4 md:pl-6'> - <div className='h-6 md:h-0' /> - - <h1 className={style['title']}>{product.name}</h1> - - <div className='h-3 md:h-0' /> - - <Information product={product} /> - - <div className='h-6' /> - </div> - </div> - <div className='h-full'> - {isMobile && ( - <div className='px-4 pt-6'> - <PriceAction product={product} /> + {/* Dots indicator */} + {allImages.length > 1 && ( + <div className='absolute bottom-2 left-0 right-0 flex justify-center gap-2'> + {allImages.map((_, i) => ( + <button + key={i} + aria-label={`Ke slide ${i + 1}`} + className={`w-2 h-2 rounded-full ${ + currentIdx === i ? 'bg-gray-800' : 'bg-gray-300' + }`} + onClick={() => scrollToIndex(i)} + /> + ))} + </div> + )} </div> + ) : ( + <> + {/* === DESKTOP: Tetap seperti sebelumnya === */} + <ProductImage product={{ ...product, image: mainImage }} /> + + {/* Carousel horizontal (thumbnail) – hanya desktop */} + {allImages.length > 0 && ( + <div className='mt-4 overflow-x-auto'> + <div className='flex space-x-3 pb-3'> + {allImages.map((img, index) => ( + <div + key={index} + className={`flex-shrink-0 w-16 h-16 cursor-pointer border-2 rounded-md transition-colors ${ + mainImage === img + ? 'border-red-500 ring-2 ring-red-200' + : 'border-gray-200 hover:border-gray-300' + }`} + onClick={() => setMainImage(img)} + > + <img + src={img} + alt={`Thumbnail ${index + 1}`} + className='w-full h-full object-cover rounded-sm' + loading='lazy' + onError={(e) => { + (e.target as HTMLImageElement).src = + '/path/to/fallback-image.jpg'; + }} + /> + </div> + ))} + </div> + </div> + )} + </> )} + </div> + {/* <<=== TUTUP kolom kiri */} + + {/* ===== Kolom kanan: info ===== */} + <div className='md:w-8/12 px-4 md:pl-6'> + <div className='h-6 md:h-0' /> + <h1 className={style['title']}>{product.name}</h1> + <div className='h-3 md:h-0' /> + <Information product={product} /> + <div className='h-6' /> + </div> + </div> - <div className='h-4 md:h-10' /> - {!!activeVariantId && !isApproval && ( - <ProductPromoSection - product={product} - productId={activeVariantId} - /> - )} + <div className='h-full'> + {isMobile && ( + <div className='px-4 pt-6'> + <PriceAction product={product} /> + </div> + )} - {/* <div className={style['section-card']}> - <h2 className={style['heading']}> - Variant ({product.variant_total}) - </h2> - <div className='h-4' /> - <VariantList variants={product.variants} /> - </div> */} + <div className='h-4 md:h-10' /> + {!!activeVariantId && !isApproval && ( + <ProductPromoSection + product={product} + productId={activeVariantId} + /> + )} - <div className='h-0 md:h-6' /> + <div className='h-0 md:h-6' /> - <div className={style['section-card']}> - <h2 className={style['heading']}>Informasi Produk</h2> - <div className='h-4' /> - <div className='overflow-x-auto'> - <div - className={style['description']} - dangerouslySetInnerHTML={{ - __html: - !product.description || - product.description == '<p><br></p>' - ? 'Belum ada deskripsi' - : product.description, - }} - /> - </div> + <div className={style['section-card']}> + <h2 className={style['heading']}>Informasi Produk</h2> + <div className='h-4' /> + <div className='overflow-x-auto'> + <div + className={style['description']} + dangerouslySetInnerHTML={{ + __html: + !product.description || product.description == '<p><br></p>' + ? 'Belum ada deskripsi' + : product.description, + }} + /> </div> </div> </div> + </div> - {isDesktop && ( - <div className='md:w-3/12'> - <PriceAction product={product} /> - <div className='flex gap-x-5 items-center justify-center'> + {isDesktop && ( + <div className='md:w-3/12'> + <PriceAction product={product} /> + <div className='flex gap-x-5 items-center justify-center'> + <Button + as={Link} + href={askAdminUrl} + variant='link' + target='_blank' + colorScheme='gray' + leftIcon={<MessageCircleIcon size={18} />} + > + Ask Admin + </Button> + + <span>|</span> + + <AddToWishlist productId={product.id} /> + + <span>|</span> + + <RWebShare + data={{ + text: 'Check out this product', + title: `${product.name} - Indoteknik.com`, + url: SELF_HOST + router.asPath, + }} + > <Button - as={Link} - href={askAdminUrl} variant='link' - target='_blank' colorScheme='gray' - leftIcon={<MessageCircleIcon size={18} />} + leftIcon={<Share2Icon size={18} />} > - Ask Admin + Share </Button> + </RWebShare> + </div> - <span>|</span> - - <AddToWishlist productId={product.id} /> - - <span>|</span> + <div className='h-6' /> + <div className={style['heading']}>Produk Serupa</div> - <RWebShare - data={{ - text: 'Check out this product', - title: `${product.name} - Indoteknik.com`, - url: SELF_HOST + router.asPath, - }} - > - <Button - variant='link' - colorScheme='gray' - leftIcon={<Share2Icon size={18} />} - > - Share - </Button> - </RWebShare> - </div> + <div className='h-4' /> - <div className='h-6' /> - <div className={style['heading']}>Produk Serupa</div> + <SimilarSide product={product} /> + </div> + )} - <div className='h-4' /> + <div className='md:w-full pt-4 md:py-10 px-4 md:px-0'> + <div className={style['heading']}>Kamu Mungkin Juga Suka</div> - <SimilarSide product={product} /> - </div> - )} + <div className='h-6' /> - <div className='md:w-full pt-4 md:py-10 px-4 md:px-0'> - <div className={style['heading']}>Kamu Mungkin Juga Suka</div> + <LazyLoadComponent> + <SimilarBottom product={product} /> + </LazyLoadComponent> + </div> - <div className='h-6' /> + <div className='h-6 md:h-0' /> + </div> + </> +); - <LazyLoadComponent> - <SimilarBottom product={product} /> - </LazyLoadComponent> - </div> - <div className='h-6 md:h-0' /> - </div> - </> - ); }; export default ProductDetail; |