2 files changed, 85 insertions, 14 deletions

diff --git a/src-migrate/modules/product-detail/components/AddToCart.tsx b/src-migrate/modules/product-detail/components/AddToCart.tsx
index 0dc39c1c..18f90012 100644
--- a/src-migrate/modules/product-detail/components/AddToCart.tsx
+++ b/src-migrate/modules/product-detail/components/AddToCart.tsx
@@ -1,6 +1,6 @@
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
 import style from '../styles/price-action.module.css';
-import { Button, color, Link, useToast } from '@chakra-ui/react';
+import { Button, ButtonProps, Link, useToast } from '@chakra-ui/react';
 import product from 'next-seo/lib/jsonld/product';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
@@ -26,6 +26,9 @@ type Props = {
   quantity?: number;
   source?: 'buy' | 'add_to_cart';
   products: IProductDetail;
+
+  buttonProps?: ButtonProps;
+  children?: (props: { onClick: () => Promise<void>; isLoading: boolean }) => React.ReactNode;
 };
 
 type Status = 'idle' | 'loading' | 'success';
@@ -35,6 +38,9 @@ const AddToCart = ({
   quantity = 1,
   source = 'add_to_cart',
   products,
+
+  buttonProps,
+  children,
 }: Props) => {
   let auth = getAuth();
   const router = useRouter();
@@ -140,7 +146,10 @@ const AddToCart = ({
     });
     setStatus('idle');
     setRefreshCart(true);
-    setAddCartAlert(true);
+    
+    if (!children) {
+        setAddCartAlert(true);
+    }
 
     gtagAddToCart(activeVariant, quantity);
 
@@ -164,6 +173,14 @@ const AddToCart = ({
       }, 3000);
   }, [status]);
 
+  if (children) {
+    return (
+      <div className='w-full'>
+        {children({ onClick: handleButton, isLoading: status === 'loading' })}
+      </div>
+    );
+  }
+
   const btnConfig = {
     add_to_cart: {
       colorScheme: 'red',
@@ -186,6 +203,8 @@ const AddToCart = ({
           variant={btnConfig[source].variant}
           className='w-full'
           isDisabled={!hasPrice || status === 'loading'}
+
+          {...buttonProps}
         >
           {btnConfig[source].text}
         </Button>
@@ -198,6 +217,8 @@ const AddToCart = ({
           variant={btnConfig[source].variant}
           className='w-full'
           isDisabled={!hasPrice || status === 'loading'}
+
+          {...buttonProps}
         >
           {btnConfig[source].text}
         </Button>
diff --git a/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx b/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx
index 736cfa02..ee5b01d9 100644
--- a/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx
+++ b/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx
@@ -47,6 +47,8 @@ import {
 
 import { Search, Trash2, ChevronDown, X, Plus } from 'lucide-react';
 
+import AddToCart from './AddToCart';
+
 // --- HELPER FORMATTING ---
 const formatPrice = (price: number) => {
   return new Intl.NumberFormat('id-ID', {
@@ -450,7 +452,15 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant
   const renderProductSlot = (product: any, index: number) => {
     let content;
     if (product) {
-      // TAMPILAN TERISI
+      
+      const productPayload = {
+        ...mainProduct,
+        id: product.id,
+        name: product.name,
+        price: product.price,
+        image: product.image
+      };
+      
       content = (
         <VStack align="stretch" spacing={3} h="100%">
           {index !== 0 && (
@@ -531,17 +541,57 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant
             </AutoComplete>
           </Box>
 
-          <HStack spacing={2}>
-            <IconButton
-              aria-label="Cart"
-              icon={<Image src="/images/keranjang.svg" w="15px" h="15px" objectFit="contain" />}
-              variant="outline"
-              colorScheme="red"
-              size="sm"
-            />
-            <Button as="a" href={`/product/${product.id}`} target="_blank" colorScheme="red" size="sm" flex={1} fontSize="xs">
-              Beli Sekarang
-            </Button>
+{/* [UBAH BAGIAN TOMBOL ACTION INI] */}
+          <HStack spacing={2} w="100%" pt={2}>
+            
+            {/* 1. TOMBOL KERANJANG */}
+            {/* Bungkus dengan Box w="auto" agar ukurannya pas mengikuti icon */}
+            <Box w="auto">
+                <AddToCart 
+                    products={productPayload}
+                    variantId={product.id}
+                    quantity={1}
+                >
+                    {({ onClick, isLoading }) => (
+                        <IconButton
+                            aria-label="Cart"
+                            icon={<Image src="/images/keranjang.svg" w="15px" h="15px" objectFit="contain" />}
+                            variant="outline"
+                            colorScheme="red"
+                            size="sm"
+                            onClick={onClick}
+                            isLoading={isLoading}
+                            isDisabled={!product.price}
+                        />
+                    )}
+                </AddToCart>
+            </Box>
+
+            {/* 2. TOMBOL BELI SEKARANG */}
+            {/* Bungkus dengan Box flex={1} agar mengisi sisa ruang (Sesuai kode lama) */}
+            <Box flex={1}>
+                <AddToCart 
+                    source="buy"
+                    products={productPayload}
+                    variantId={product.id}
+                    quantity={1}
+                >
+                    {({ onClick, isLoading }) => (
+                        <Button 
+                            colorScheme="red" 
+                            size="sm" 
+                            fontSize="xs"
+                            w="100%" // Paksa lebar 100% mengikuti parent Box
+                            onClick={onClick}
+                            isLoading={isLoading}
+                            isDisabled={!product.price}
+                        >
+                            Beli Sekarang
+                        </Button>
+                    )}
+                </AddToCart>
+            </Box>
+
           </HStack>
         </VStack>
       );