(andri) fix keranjang + beli sekarang modal

1 files changed, 62 insertions, 12 deletions

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>
       );