1 files changed, 68 insertions, 19 deletions

diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx
index b7d3401e..c565682f 100644
--- a/src-migrate/modules/product-detail/components/Information.tsx
+++ b/src-migrate/modules/product-detail/components/Information.tsx
@@ -9,6 +9,7 @@ import style from '../styles/information.module.css';
 import dynamic from 'next/dynamic';
 import Link from 'next/link';
 import { useEffect, useRef, useState } from 'react';
+import axios from 'axios'; // <--- 1. TAMBAHAN IMPORT AXIOS
 
 import currencyFormat from '@/core/utils/currencyFormat';
 import { InputGroup, InputRightElement, SimpleGrid, Flex, Text, Box } from '@chakra-ui/react';
@@ -44,6 +45,44 @@ const Information = ({ product }: Props) => {
   const variantId = selectedVariant?.id;
   const { slaVariant, isLoading } = useVariant({ variantId });
 
+  const [warranties, setWarranties] = useState<Record<string, string>>({});
+  const [loadingWarranty, setLoadingWarranty] = useState(false);
+
+  useEffect(() => {
+    const fetchWarrantyDirectly = async () => {
+       if (!product?.variants || product.variants.length === 0) return;
+
+       setLoadingWarranty(true);
+       try {
+         // Ambil semua SKU untuk dikirim ke API
+         const skus = product.variants.map((v) => v.id).join(',');
+         const mainSku = product.variants[0].id;
+         console.log("Fetching warranties for SKUs:", skus);
+         console.log("Main SKU:", mainSku);
+
+         // Panggil API magento-product
+         const res = await axios.get('/api/magento-product', {
+             params: { skus, main_sku: mainSku }
+         });
+
+         // Simpan hasil ke state lokal
+         if (res.data && res.data.warranties) {
+             setWarranties(res.data.warranties);
+         }
+         console.log("Warranties API Response:", res);
+         console.log("Warranties fetched:", res.data.warranties);
+       } catch (error) {
+         console.error("Gagal ambil garansi:", error);
+       } finally {
+         setLoadingWarranty(false);
+       }
+    };
+
+    fetchWarrantyDirectly();
+  }, [product]);
+  // ======================================================
+
+
   useEffect(() => {
     if (selectedVariant) {
       setInputValue(
@@ -64,23 +103,20 @@ const Information = ({ product }: Props) => {
     }
   }, [slaVariant, isLoading, setSla]);
 
-  const handleOnChange = (vals: any) => {
-    setDisableFilter(true);
-    let code = vals.replace(/\s-\s.*$/, '').trim();
-    let variant = variantOptions.find((item) => item.code === code);
-    setSelectedVariant(variant);
-    setInputValue(
-      variant?.code +
-        (variant?.attributes[0] ? ' - ' + variant?.attributes[0] : '')
-    );
+const handleOnChange = (vals: any) => {
+    setDisableFilter(true);
+    let code = vals.replace(/\s-\s.*$/, '').trim();
+    let variant = product?.variants.find((item) => item.code === code);
+    
     if (variant) {
-      const filteredOptions = product?.variants.filter(
-        (item) => item !== variant
-      );
-      const newOptions = [variant, ...filteredOptions];
-      setVariantOptions(newOptions);
-    }
-  };
+      setSelectedVariant(variant);
+      setInputValue(
+        variant?.code +
+          (variant?.attributes[0] ? ' - ' + variant?.attributes[0] : '')
+      );
+      setVariantOptions(product?.variants); 
+    }
+  };
 
   const handleOnKeyUp = (e: any) => {
     setDisableFilter(false);
@@ -127,7 +163,11 @@ const Information = ({ product }: Props) => {
           </InputGroup>
 
           <AutoCompleteList>
-            {variantOptions.map((option, cid) => (
+            {variantOptions
+              .sort((a: any, b: any) => {
+                return a.code.localeCompare(b.code, undefined, { numeric: true, sensitivity: 'base' });
+              })
+              .map((option, cid) => (
               <AutoCompleteItem
                 key={`option-${cid}`}
                 value={
@@ -239,7 +279,6 @@ const Information = ({ product }: Props) => {
       <div className="mt-6 border-t pt-4">
         <h2 className="font-bold text-gray-800 text-sm mb-4">Detail Informasi Produk</h2>
         
-        {/* Perubahan: Spacing diperbesar menjadi 10 agar estimasi bergeser ke kanan */}
         <SimpleGrid columns={{ base: 1, md: 3 }} spacing={10}>
             {/* 1. Distributor Resmi */}
             <Flex align="center" className="gap-3">
@@ -282,7 +321,17 @@ const Information = ({ product }: Props) => {
                 />
                 <Box>
                     <Text fontSize="11px" color="gray.500" lineHeight="short" mb="1px">Garansi Produk</Text>
-                    <Text fontSize="12px" fontWeight="bold" color="gray.800" lineHeight="short">24 Bulan</Text>
+                    
+                    {/* Menggunakan Loading State & Data dari 'warranties' */}
+                    {loadingWarranty ? (
+                         <Skeleton height="12px" width="80px" mt="2px" />
+                    ) : (
+                        <Text fontSize="12px" fontWeight="bold" color="gray.800" lineHeight="short">
+                            {selectedVariant && warranties[selectedVariant.id] 
+                                ? warranties[selectedVariant.id] 
+                                : '-'}
+                        </Text>
+                    )}
                 </Box>
             </Flex>
         </SimpleGrid>