(andri) fix view mobile compare

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>
   );
 };