From d2fb20c30fa3440369807c05d01897eb19483f4c Mon Sep 17 00:00:00 2001
From: FIN-IT_AndriFP <andrifebriyadiputra@gmail.com>
Date: Mon, 8 Dec 2025 14:55:49 +0700
Subject: (andri) modal compare without data

---
 .../product-detail/components/AddToQuotation.tsx   | 93 ++++++++++++++--------
 1 file changed, 60 insertions(+), 33 deletions(-)

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

diff --git a/src-migrate/modules/product-detail/components/AddToQuotation.tsx b/src-migrate/modules/product-detail/components/AddToQuotation.tsx
index 3e811330..0ea88830 100644
--- a/src-migrate/modules/product-detail/components/AddToQuotation.tsx
+++ b/src-migrate/modules/product-detail/components/AddToQuotation.tsx
@@ -1,7 +1,8 @@
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
 import style from '../styles/price-action.module.css';
-import { Button, Link, useToast } from '@chakra-ui/react';
-import { ArrowDownTrayIcon } from '@heroicons/react/24/outline';
+import { Button, Link, useToast, Icon } from '@chakra-ui/react';
+// Pastikan icon ini ada (atau ganti dengan text sementara jika error)
+import { ScaleIcon } from '@heroicons/react/24/outline'; 
 import product from 'next-seo/lib/jsonld/product';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
@@ -17,12 +18,15 @@ import { createSlug } from '~/libs/slug';
 import formatCurrency from '~/libs/formatCurrency';
 import { useProductDetail } from '../stores/useProductDetail';
 import useDevice from '@/core/hooks/useDevice';
+import DesktopView from '@/core/components/views/DesktopView';
+import MobileView from '@/core/components/views/MobileView';
 
 type Props = {
   variantId: number | null;
   quantity?: number;
   source?: 'buy' | 'add_to_cart';
   products: IProductDetail;
+  onCompare?: () => void; // <--- 1. Tambah Props
 };
 
 type Status = 'idle' | 'loading' | 'success';
@@ -32,6 +36,7 @@ const AddToQuotation = ({
   quantity = 1,
   source = 'add_to_cart',
   products,
+  onCompare // <--- 2. Tangkap Props
 }: Props) => {
   const auth = getAuth();
   const router = useRouter();
@@ -106,37 +111,59 @@ const AddToQuotation = ({
       }, 3000);
   }, [status]);
 
-  const btnConfig = {
-    add_to_cart: {
-      colorScheme: 'red',
-      variant: 'outline',
-      text: 'Keranjang',
-    },
-    buy: {
-      colorScheme: 'red',
-      variant: 'solid',
-      text: 'Beli',
-    },
-  };
-
   return (
-    <div className='w-full'>
-      <Button
-        onClick={handleButton}
-        color={'red'}
-        colorScheme='white'
-        className='w-full border-2 p-2 gap-1 hover:bg-slate-100 flex items-center'
-        isDisabled={!hasPrice}
-      >
-        <ImageNext
-          src={isDesktop ? '/images/doc_red.svg' : '/images/doc.svg'}
-          alt='penawaran instan'
-          className=''
-          width={25}
-          height={25}
-        />
-        {isDesktop ? 'Penawaran Harga Instan' : ''}
-      </Button>
+    <div className='w-full flex flex-col gap-3'> {/* Ganti div biasa jadi Flex Column gap 3 */}
+      
+      {/* 3. TAMPILAN DESKTOP: GRID 2 KOLOM (Bandingkan & Penawaran) */}
+      <DesktopView>
+        <div className="grid grid-cols-2 gap-3 w-full">
+            {/* Tombol Kiri: Bandingkan */}
+            <Button
+                onClick={onCompare} // <--- Jalankan Modal Compare
+                variant="outline"
+                colorScheme="gray"
+                className="w-full border border-gray-300 p-2 gap-2 flex items-center justify-center text-gray-600 hover:text-red-600 hover:border-red-600 transition-all font-normal text-sm"
+            >
+                <Icon as={ScaleIcon} w={5} h={5} /> 
+                Bandingkan
+            </Button>
+
+            {/* Tombol Kanan: Penawaran (Link WA) */}
+            <Button
+                as={Link}
+                href={askAdminUrl}
+                target='_blank'
+                variant="outline"
+                colorScheme="gray"
+                className="w-full border border-gray-300 p-2 gap-2 flex items-center justify-center text-gray-600 hover:text-red-600 hover:border-red-600 transition-all font-normal text-sm"
+                _hover={{ textDecoration: 'none' }}
+                onClick={handleButton} // Opsional: Jalankan handleButton jika ingin fungsi tombol ini tetap jalan
+            >
+                <ImageNext src="/images/doc_red.svg" width={20} height={20} alt="penawaran" />
+                Penawaran
+            </Button>
+        </div>
+      </DesktopView>
+
+      {/* TAMPILAN MOBILE (Tetap seperti semula - hanya icon Penawaran) */}
+      <MobileView>
+          <Button
+            onClick={handleButton}
+            color={'red'}
+            colorScheme='white'
+            className='w-full border-2 p-2 gap-1 hover:bg-slate-100 flex items-center'
+            isDisabled={!hasPrice}
+          >
+            <ImageNext
+              src='/images/doc.svg'
+              alt='penawaran instan'
+              className=''
+              width={25}
+              height={25}
+            />
+          </Button>
+      </MobileView>
+
       <BottomPopup
         className='!container'
         title='Berhasil Ditambahkan'
@@ -243,4 +270,4 @@ const AddToQuotation = ({
   );
 };
 
-export default AddToQuotation;
+export default AddToQuotation;
\ No newline at end of file
-- 
cgit v1.2.3