From 825d86bb50f48f9a21d740d474c0dddee858dffb Mon Sep 17 00:00:00 2001 From: FIN-IT_AndriFP Date: Mon, 1 Dec 2025 11:31:30 +0700 Subject: (andri) show upsells product from magento in similarbottom product --- .../product-detail/components/ProductDetail.tsx | 183 +++++++++------------ .../product-detail/components/SimilarBottom.tsx | 55 +++++-- src-migrate/services/product.ts | 38 +++++ src/pages/api/magento-product.ts | 35 +++- 4 files changed, 187 insertions(+), 124 deletions(-) diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx index b0950194..5f930117 100644 --- a/src-migrate/modules/product-detail/components/ProductDetail.tsx +++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx @@ -22,11 +22,13 @@ import { Text } from '@chakra-ui/react'; +// Import Icons import { AlertTriangle, MessageCircleIcon, Share2Icon, } from 'lucide-react'; + import { LazyLoadComponent } from 'react-lazy-load-image-component'; import useDevice from '@/core/hooks/useDevice'; @@ -62,8 +64,9 @@ const ProductDetail = ({ product }: Props) => { const router = useRouter(); const [auth, setAuth] = useState(null); - // State untuk Spesifikasi dari Magento - const [specs, setSpecs] = useState<{ label: string; value: string }[]>([]); + // State Data dari Magento + const [specs, setSpecs] = useState<{ code: string; label: string; value: string }[]>([]); + const [upsellIds, setUpsellIds] = useState([]); const [loadingSpecs, setLoadingSpecs] = useState(false); const [errorSpecs, setErrorSpecs] = useState(false); @@ -105,6 +108,9 @@ const ProductDetail = ({ product }: Props) => { setAskAdminUrl(createdAskUrl); }, [router.asPath, product.manufacture.name, product.name, setAskAdminUrl]); + // ========================================================================= + // LOGIC INISIALISASI VARIANT (HANDLE NAVIGASI) + // ========================================================================= useEffect(() => { if (typeof auth === 'object') { setIsApproval(auth?.feature?.soApproval); @@ -112,60 +118,95 @@ const ProductDetail = ({ product }: Props) => { const variantInit = product?.variants?.find((variant) => variant.is_in_bu) || product?.variants?.[0]; + setSelectedVariant(variantInit); - }, []); + + // Reset data Magento saat produk berubah + setSpecs([]); + setUpsellIds([]); + + }, [product, auth]); // ========================================================================= - // LOGIC FETCH: MENGGUNAKAN ID VARIANT + // LOGIC FETCH: SPECS & UPSELLS // ========================================================================= useEffect(() => { - const fetchMagentoSpecs = async () => { - // MENGGUNAKAN ID VARIANT SESUAI REQUEST - const skuToFetch = selectedVariant?.id; + const fetchMagentoData = async () => { + // Gunakan ID Variant (SKU Odoo) + const idToFetch = selectedVariant?.id; - if (!skuToFetch) return; + if (!idToFetch) return; setLoadingSpecs(true); setErrorSpecs(false); try { - console.log("Fetching Magento specs via Proxy for Variant ID:", skuToFetch); + console.log("Fetching Magento data via Proxy for ID:", idToFetch); - // Pastikan dikonversi ke string - const endpoint = `/api/magento-product?sku=${encodeURIComponent(String(skuToFetch))}`; + const endpoint = `/api/magento-product?sku=${encodeURIComponent(String(idToFetch))}`; const response = await fetch(endpoint, { method: 'GET', - headers: { - 'Content-Type': 'application/json', - } + headers: { 'Content-Type': 'application/json' } }); if (!response.ok) { - console.warn(`Spec API status: ${response.status}`); + console.warn(`Magento API status: ${response.status}`); setSpecs([]); + setUpsellIds([]); return; } const data = await response.json(); + // 1. Simpan Data Spesifikasi if (data.specs && Array.isArray(data.specs)) { setSpecs(data.specs); } else { setSpecs([]); } + // 2. Simpan Data Up-Sells (ID) + if (data.upsell_ids && Array.isArray(data.upsell_ids)) { + setUpsellIds(data.upsell_ids); + } else { + setUpsellIds([]); + } + } catch (error) { - console.error("Gagal mengambil data spesifikasi:", error); + console.error("Gagal mengambil data Magento:", error); setErrorSpecs(true); setSpecs([]); + setUpsellIds([]); } finally { setLoadingSpecs(false); } }; - fetchMagentoSpecs(); - }, [selectedVariant]); + fetchMagentoData(); + }, [selectedVariant, product.id]); + + + // ========================================================================= + // HELPER: RENDER SPEC VALUE (SIMPLE TEXT/HTML ONLY) + // ========================================================================= + const renderSpecValue = (item: { code: string; label: string; value: string }) => { + const val = item.value; + if (!val) return '-'; + + // Cek apakah mengandung tag HTML sederhana (

, ,