(andri) try get detail product from magento

1 files changed, 102 insertions, 12 deletions

diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index 1bacd2e2..b0950194 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -4,7 +4,7 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useEffect, useRef, useState, UIEvent } from 'react';
 
-// Import komponen Chakra UI yang dibutuhkan
+// Import komponen Chakra UI
 import { 
   Button, 
   Tabs, 
@@ -16,7 +16,10 @@ import {
   Tbody, 
   Tr, 
   Td,
-  Box
+  Box,
+  Spinner,
+  Center,
+  Text
 } from '@chakra-ui/react';
 
 import {
@@ -58,6 +61,12 @@ const ProductDetail = ({ product }: Props) => {
   const { isDesktop, isMobile } = useDevice();
   const router = useRouter();
   const [auth, setAuth] = useState<any>(null);
+  
+  // State untuk Spesifikasi dari Magento
+  const [specs, setSpecs] = useState<{ label: string; value: string }[]>([]);
+  const [loadingSpecs, setLoadingSpecs] = useState(false);
+  const [errorSpecs, setErrorSpecs] = useState(false);
+
   useEffect(() => {
     try {
       setAuth(getAuth() ?? null);
@@ -74,6 +83,7 @@ const ProductDetail = ({ product }: Props) => {
     activeVariantId,
     setIsApproval,
     isApproval,
+    selectedVariant, 
     setSelectedVariant,
   } = useProductDetail();
 
@@ -99,12 +109,65 @@ const ProductDetail = ({ product }: Props) => {
     if (typeof auth === 'object') {
       setIsApproval(auth?.feature?.soApproval);
     }
-    const selectedVariant =
+    const variantInit =
       product?.variants?.find((variant) => variant.is_in_bu) ||
       product?.variants?.[0];
-    setSelectedVariant(selectedVariant);
+    setSelectedVariant(variantInit);
   }, []);
 
+  // =========================================================================
+  // LOGIC FETCH: MENGGUNAKAN ID VARIANT
+  // =========================================================================
+  useEffect(() => {
+    const fetchMagentoSpecs = async () => {
+      // MENGGUNAKAN ID VARIANT SESUAI REQUEST
+      const skuToFetch = selectedVariant?.id; 
+
+      if (!skuToFetch) return;
+
+      setLoadingSpecs(true);
+      setErrorSpecs(false);
+      
+      try {
+        console.log("Fetching Magento specs via Proxy for Variant ID:", skuToFetch);
+        
+        // Pastikan dikonversi ke string
+        const endpoint = `/api/magento-product?sku=${encodeURIComponent(String(skuToFetch))}`;
+
+        const response = await fetch(endpoint, {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+            }
+        });
+
+        if (!response.ok) {
+            console.warn(`Spec API status: ${response.status}`);
+            setSpecs([]);
+            return;
+        }
+
+        const data = await response.json();
+
+        if (data.specs && Array.isArray(data.specs)) {
+           setSpecs(data.specs);
+        } else {
+           setSpecs([]);
+        }
+
+      } catch (error) {
+        console.error("Gagal mengambil data spesifikasi:", error);
+        setErrorSpecs(true);
+        setSpecs([]);
+      } finally {
+        setLoadingSpecs(false);
+      }
+    };
+
+    fetchMagentoSpecs();
+  }, [selectedVariant]); 
+
+
   const allImages = (() => {
     const arr: string[] = [];
     if (product?.image) arr.push(product.image);
@@ -154,9 +217,6 @@ const ProductDetail = ({ product }: Props) => {
     setMainImage(allImages[i] || '');
   };
 
-  console.log('detail product render');
-  console.log('product: ', product);
-
   return (
     <>
       <div className='relative'>
@@ -192,7 +252,7 @@ const ProductDetail = ({ product }: Props) => {
           <div className='md:flex md:flex-wrap'>
             {/* ===== Kolom kiri: gambar ===== */}
             <div className='md:w-4/12'>
-              {/* === MOBILE: Slider swipeable, tanpa thumbnail carousel === */}
+              {/* === MOBILE: Slider swipeable === */}
               {isMobile ? (
                 <div className='relative'>
                   <div
@@ -233,6 +293,7 @@ const ProductDetail = ({ product }: Props) => {
                     )}
                   </div>
 
+                  {/* Dots indicator */}
                   {allImages.length > 1 && (
                     <div className='absolute bottom-2 left-0 right-0 flex justify-center gap-2'>
                       {allImages.map((_, i) => (
@@ -250,7 +311,7 @@ const ProductDetail = ({ product }: Props) => {
                 </div>
               ) : (
                 <>
-                  {/* === DESKTOP: Tetap seperti sebelumnya === */}
+                  {/* === DESKTOP === */}
                   <ProductImage product={{ ...product, image: mainImage }} />
                   {allImages.length > 0 && (
                     <div className='mt-4 overflow-x-auto'>
@@ -414,9 +475,38 @@ const ProductDetail = ({ product }: Props) => {
                     </div>
                   </TabPanel>
 
-                  {/* PANEL 2: SPESIFIKASI (Sesuai Gambar) */}
-                  <TabPanel px={0} py={6}>
-                      <p className="text-gray-500 text-sm">Informasi tambahan belum tersedia.</p>
+                  {/* PANEL 2: SPESIFIKASI DARI MAGENTO */}
+                  <TabPanel px={0} py={2}>
+                    <Box border="1px solid" borderColor="gray.200" borderRadius="sm">
+                        {loadingSpecs ? (
+                            <Center py={6}>
+                                <Spinner color='red.500' />
+                            </Center>
+                        ) : errorSpecs ? (
+                            <Box p={4} color="red.500" fontSize="sm">
+                                Gagal memuat data spesifikasi. Silakan coba lagi nanti.
+                            </Box>
+                        ) : specs.length > 0 ? (
+                            <Table variant="simple" size="md">
+                                <Tbody>
+                                    {specs.map((item, index) => (
+                                        <Tr key={index}>
+                                            <Td fontWeight="bold" width="30%" verticalAlign="top" borderColor="gray.200">
+                                                {item.label}
+                                            </Td>
+                                            <Td verticalAlign="top" borderColor="gray.200">
+                                                {item.value}
+                                            </Td>
+                                        </Tr>
+                                    ))}
+                                </Tbody>
+                            </Table>
+                        ) : (
+                            <Box p={4} color="gray.500" fontSize="sm">
+                                <Text>Spesifikasi teknis belum tersedia untuk varian ID: <b>{selectedVariant?.id}</b></Text>
+                            </Box>
+                        )}
+                    </Box>
                   </TabPanel>
                   
                    {/* PANEL 3: DETAIL LAINNYA */}