From 825d86bb50f48f9a21d740d474c0dddee858dffb Mon Sep 17 00:00:00 2001
From: FIN-IT_AndriFP <andrifebriyadiputra@gmail.com>
Date: Mon, 1 Dec 2025 11:31:30 +0700
Subject: (andri) show upsells product from magento in similarbottom product

---
 .../product-detail/components/SimilarBottom.tsx    | 55 ++++++++++++++++++----
 1 file changed, 45 insertions(+), 10 deletions(-)

(limited to 'src-migrate/modules/product-detail/components/SimilarBottom.tsx')

diff --git a/src-migrate/modules/product-detail/components/SimilarBottom.tsx b/src-migrate/modules/product-detail/components/SimilarBottom.tsx
index 40d4dd82..d3957f4b 100644
--- a/src-migrate/modules/product-detail/components/SimilarBottom.tsx
+++ b/src-migrate/modules/product-detail/components/SimilarBottom.tsx
@@ -1,23 +1,58 @@
 import { Skeleton } from '@chakra-ui/react'
-import useProductSimilar from '~/modules/product-similar/hooks/useProductSimilar'
+import { useQuery } from 'react-query'
 import ProductSlider from '~/modules/product-slider'
+import { getProductSimilar, getProductsByIds } from '~/services/product'
 import { IProductDetail } from '~/types/product'
 
 type Props = {
-  product: IProductDetail
+  product: IProductDetail;
+  upsellIds?: number[];
 }
 
-const SimilarBottom = ({ product }: Props) => {
-  const productSimilar = useProductSimilar({
-    name: product.name,
-    except: { productId: product.id }
-  })
+const SimilarBottom = ({ product, upsellIds = [] }: Props) => {
+  
+  const hasUpsell = upsellIds.length > 0;
 
-  const products = productSimilar.data?.products || []
+  // Query 1: Upsell
+  const upsellQuery = useQuery({
+    queryKey: ['product-upsell', upsellIds],
+    queryFn: () => getProductsByIds({ ids: upsellIds }),
+    enabled: hasUpsell, 
+    staleTime: 1000 * 60 * 5,
+  });
+
+  // Query 2: Similar Biasa
+  const similarQuery = useQuery({
+    queryKey: ['product-similar', product.name],
+    queryFn: () => getProductSimilar({ 
+        name: product.name, 
+        except: { productId: product.id } 
+    }),
+    enabled: !hasUpsell, 
+    staleTime: 1000 * 60 * 5,
+  });
+
+  let products = [];
+  let isLoading = false;
+
+  // ==========================================
+  // PERBAIKAN DI SINI
+  // ==========================================
+  if (hasUpsell) {
+      // Salah: products = upsellQuery.data || [];
+      // Benar: Ambil properti .products di dalamnya
+      products = (upsellQuery.data as any)?.products || [];
+      isLoading = upsellQuery.isLoading;
+  } else {
+      products = similarQuery.data?.products || []; 
+      isLoading = similarQuery.isLoading;
+  }
+
+  if (!isLoading && products.length === 0) return null;
 
   return (
     <Skeleton
-      isLoaded={!productSimilar.isLoading}
+      isLoaded={!isLoading}
       rounded='lg'
       className='h-[350px]'
     >
@@ -26,4 +61,4 @@ const SimilarBottom = ({ product }: Props) => {
   );
 }
 
-export default SimilarBottom
\ No newline at end of file
+export default SimilarBottom;
\ No newline at end of file
-- 
cgit v1.2.3