diff options
Diffstat (limited to 'src-migrate/modules/product-detail/components/AddToQuotation.tsx')
| -rw-r--r-- | src-migrate/modules/product-detail/components/AddToQuotation.tsx | 91 |
1 files changed, 59 insertions, 32 deletions
diff --git a/src-migrate/modules/product-detail/components/AddToQuotation.tsx b/src-migrate/modules/product-detail/components/AddToQuotation.tsx index 3e811330..e26e271f 100644 --- a/src-migrate/modules/product-detail/components/AddToQuotation.tsx +++ b/src-migrate/modules/product-detail/components/AddToQuotation.tsx @@ -1,7 +1,7 @@ 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 { ScaleIcon } from '@heroicons/react/24/outline'; // Tidak perlu lagi import product from 'next-seo/lib/jsonld/product'; import { useRouter } from 'next/router'; import { useEffect, useState } from 'react'; @@ -17,12 +17,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; }; type Status = 'idle' | 'loading' | 'success'; @@ -32,6 +35,7 @@ const AddToQuotation = ({ quantity = 1, source = 'add_to_cart', products, + onCompare }: Props) => { const auth = getAuth(); const router = useRouter(); @@ -106,37 +110,60 @@ 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'> + + {/* 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} + 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" + > + {/* UPDATE ICON DISINI */} + <ImageNext src="/images/logo-bandingkan.svg" width={15} height={15} alt="bandingkan" /> + 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} + > + <ImageNext src="/images/doc_red.svg" width={20} height={20} alt="penawaran" /> + Penawaran + </Button> + </div> + </DesktopView> + + {/* TAMPILAN MOBILE */} + <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 |
