<Miqdad> done product detail

3 files changed, 80 insertions, 33 deletions

diff --git a/src-migrate/modules/product-detail/components/AddToQuotation.tsx b/src-migrate/modules/product-detail/components/AddToQuotation.tsx
index ebfcef32..3e811330 100644
--- a/src-migrate/modules/product-detail/components/AddToQuotation.tsx
+++ b/src-migrate/modules/product-detail/components/AddToQuotation.tsx
@@ -60,6 +60,8 @@ const AddToQuotation = ({
     `fq=-manufacture_id_i:${product.manufacture?.id || 0}`,
   ].join('&');
   const [addCartAlert, setAddCartAlert] = useState(false);
+  const hasPrice =
+    !!product?.lowest_price && Number(product.lowest_price.price) > 0;
 
   const handleButton = async () => {
     if (typeof auth !== 'object') {
@@ -124,9 +126,10 @@ const AddToQuotation = ({
         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'}
+          src={isDesktop ? '/images/doc_red.svg' : '/images/doc.svg'}
           alt='penawaran instan'
           className=''
           width={25}
@@ -191,7 +194,20 @@ const AddToQuotation = ({
               </>
             )}
 
-            {!!product.lowest_price && product.lowest_price.price === 0 && (
+            {(!!product.lowest_price && product.lowest_price.price === 0) ||
+            product.lowest_price.price < 0 ? (
+              <span>
+                Hubungi kami untuk dapatkan harga terbaik,{' '}
+                <Link
+                  href={askAdminUrl}
+                  target='_blank'
+                  className='font-medium underline'
+                  color={'red'}
+                >
+                  klik disini
+                </Link>
+              </span>
+            ) : (
               <span>
                 Hubungi kami untuk dapatkan harga terbaik,{' '}
                 <Link
diff --git a/src-migrate/modules/product-detail/components/PriceAction.tsx b/src-migrate/modules/product-detail/components/PriceAction.tsx
index a329d2cc..510dd6a9 100644
--- a/src-migrate/modules/product-detail/components/PriceAction.tsx
+++ b/src-migrate/modules/product-detail/components/PriceAction.tsx
@@ -78,6 +78,7 @@ const PriceAction = ({ product }: Props) => {
     const validJsonString = stringVoucher.replace(/'/g, '"');
     voucherPastiHemat = JSON.parse(validJsonString);
   }
+  const hasPrice = Number(product?.lowest_price?.price) > 0;
 
   return (
     <div
@@ -145,7 +146,7 @@ const PriceAction = ({ product }: Props) => {
         </>
       )}
 
-      {!!activePrice && activePrice.price === 0 && (
+      {/* {!!activePrice && activePrice.price === 0 && (
         <span>
           Hubungi kami untuk dapatkan harga terbaik,{' '}
           <Link
@@ -156,7 +157,7 @@ const PriceAction = ({ product }: Props) => {
             klik disini
           </Link>
         </span>
-      )}
+      )} */}
 
       <DesktopView>
         <div className='h-4' />
@@ -165,27 +166,32 @@ const PriceAction = ({ product }: Props) => {
           <div className='relative flex items-center'>
             <button
               type='button'
-              className='absolute left-0 px-2 py-1 h-full text-gray-500'
+              className='absolute left-0 px-2 py-1 h-full text-gray-500 disabled:opacity-40'
               onClick={() =>
                 setQuantityInput(String(Math.max(1, Number(quantityInput) - 1)))
               }
+              disabled={!hasPrice}
             >
               -
             </button>
+
             <input
               type='number'
               id='quantity'
               min={1}
               value={quantityInput}
               onChange={(e) => setQuantityInput(e.target.value)}
-              className={style['quantity-input']}
+              className={`${style['quantity-input']} disabled:bg-gray-100 disabled:text-gray-400`}
+              disabled={!hasPrice}
             />
+
             <button
               type='button'
-              className='absolute right-0 px-2 py-1 h-full text-gray-500'
+              className='absolute right-0 px-2 py-1 h-full text-gray-500 disabled:opacity-40'
               onClick={() =>
                 setQuantityInput(String(Number(quantityInput) + 1))
               }
+              disabled={!hasPrice}
             >
               +
             </button>
@@ -196,9 +202,11 @@ const PriceAction = ({ product }: Props) => {
             <Skeleton
               isLoaded={sla}
               h='21px'
-              className={sla?.qty < 10 ? 'text-red-600 font-medium' : ''}
+              className={
+                !hasPrice || sla?.qty < 10 ? 'text-red-600 font-medium' : ''
+              }
             >
-              Stock : {sla?.qty}{' '}
+              Stock : {hasPrice ? sla?.qty : 'Habis'}
             </Skeleton>
           </div>
 
@@ -219,9 +227,9 @@ const PriceAction = ({ product }: Props) => {
             )}
           </div>
         </div>
-        <span className='text-[12px] text-red-500 italic'>
+        {/* <span className='text-[12px] text-red-500 italic'>
           * {qtyPickUp} barang bisa di pickup
-        </span>
+        </span> */}
       </DesktopView>
 
       {/* ===== MOBILE: grid kiri-kanan, kanan hanya qty ===== */}
diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index f32bb38e..c8c03300 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -5,7 +5,12 @@ import { useRouter } from 'next/router';
 import { useEffect, useRef, useState, UIEvent } from 'react';
 
 import { Button } from '@chakra-ui/react';
-import { MessageCircleIcon, Share2Icon } from 'lucide-react';
+import {
+  AlertCircle,
+  AlertTriangle,
+  MessageCircleIcon,
+  Share2Icon,
+} from 'lucide-react';
 import { LazyLoadComponent } from 'react-lazy-load-image-component';
 
 import useDevice from '@/core/hooks/useDevice';
@@ -23,7 +28,6 @@ import SimilarBottom from './SimilarBottom';
 import SimilarSide from './SimilarSide';
 import dynamic from 'next/dynamic';
 
-
 import { gtagProductDetail } from '@/core/utils/googleTag';
 
 type Props = {
@@ -31,7 +35,7 @@ type Props = {
 };
 
 const RWebShare = dynamic(
-  () => import('react-web-share').then(m => m.RWebShare),
+  () => import('react-web-share').then((m) => m.RWebShare),
   { ssr: false }
 );
 
@@ -42,7 +46,9 @@ const ProductDetail = ({ product }: Props) => {
   const router = useRouter();
   const [auth, setAuth] = useState<any>(null);
   useEffect(() => {
-    try { setAuth(getAuth() ?? null); } catch { }
+    try {
+      setAuth(getAuth() ?? null);
+    } catch {}
   }, []);
 
   const canShare =
@@ -87,7 +93,6 @@ const ProductDetail = ({ product }: Props) => {
     setSelectedVariant(selectedVariant);
   }, []);
 
-
   const allImages = (() => {
     const arr: string[] = [];
     if (product?.image) arr.push(product.image);
@@ -95,7 +100,6 @@ const ProductDetail = ({ product }: Props) => {
       Array.isArray(product?.image_carousel) &&
       product.image_carousel.length
     ) {
-
       const set = new Set(arr);
       for (const img of product.image_carousel) {
         if (!set.has(img)) {
@@ -108,15 +112,14 @@ const ProductDetail = ({ product }: Props) => {
   })();
 
   const [mainImage, setMainImage] = useState(allImages[0] || '');
+  const hasPrice = Number(product?.lowest_price?.price) > 0;
 
   useEffect(() => {
-
     if (!allImages.includes(mainImage)) {
       setMainImage(allImages[0] || '');
     }
   }, [allImages]);
 
-
   const sliderRef = useRef<HTMLDivElement | null>(null);
   const [currentIdx, setCurrentIdx] = useState(0);
 
@@ -138,7 +141,6 @@ const ProductDetail = ({ product }: Props) => {
     setMainImage(allImages[i] || '');
   };
 
-
   return (
     <>
       <div className='md:flex md:flex-wrap'>
@@ -165,7 +167,6 @@ const ProductDetail = ({ product }: Props) => {
                   >
                     {allImages.length > 0 ? (
                       allImages.map((img, i) => (
-
                         <div
                           key={i}
                           className='w-full flex-shrink-0 snap-center flex justify-center items-center'
@@ -200,8 +201,9 @@ const ProductDetail = ({ product }: Props) => {
                         <button
                           key={i}
                           aria-label={`Ke slide ${i + 1}`}
-                          className={`w-2 h-2 rounded-full ${currentIdx === i ? 'bg-gray-800' : 'bg-gray-300'
-                            }`}
+                          className={`w-2 h-2 rounded-full ${
+                            currentIdx === i ? 'bg-gray-800' : 'bg-gray-300'
+                          }`}
                           onClick={() => scrollToIndex(i)}
                         />
                       ))}
@@ -220,10 +222,11 @@ const ProductDetail = ({ product }: Props) => {
                         {allImages.map((img, index) => (
                           <div
                             key={index}
-                            className={`flex-shrink-0 w-16 h-16 cursor-pointer border-2 rounded-md transition-colors ${mainImage === img
-                              ? 'border-red-500 ring-2 ring-red-200'
-                              : 'border-gray-200 hover:border-gray-300'
-                              }`}
+                            className={`flex-shrink-0 w-16 h-16 cursor-pointer border-2 rounded-md transition-colors ${
+                              mainImage === img
+                                ? 'border-red-500 ring-2 ring-red-200'
+                                : 'border-gray-200 hover:border-gray-300'
+                            }`}
                             onClick={() => setMainImage(img)}
                           >
                             <img
@@ -248,6 +251,17 @@ const ProductDetail = ({ product }: Props) => {
 
             {/* ===== Kolom kanan: info ===== */}
             <div className='md:w-8/12 px-4 md:pl-6'>
+              {!hasPrice && (
+                <div className='bg-red-50 py-2 rounded-lg border border-red-500 flex gap-2 items-center mb-4'>
+                  <AlertTriangle
+                    size={18}
+                    className='text-red-600 shrink-0 mx-2'
+                  />
+                  <h1 className='text-red-600 font-normal text-h-sm'>
+                    Maaf untuk saat ini Produk yang anda cari tidak tersedia
+                  </h1>
+                </div>
+              )}
               <div className='h-6 md:h-0' />
               <h1 className={style['title']}>{product.name}</h1>
               <div className='h-3 md:h-0' />
@@ -281,7 +295,8 @@ const ProductDetail = ({ product }: Props) => {
                   className={style['description']}
                   dangerouslySetInnerHTML={{
                     __html:
-                      !product.description || product.description == '<p><br></p>'
+                      !product.description ||
+                      product.description == '<p><br></p>'
                         ? 'Belum ada deskripsi'
                         : product.description,
                   }}
@@ -302,13 +317,16 @@ const ProductDetail = ({ product }: Props) => {
                 target='_blank'
                 colorScheme='gray'
                 leftIcon={<MessageCircleIcon size={18} />}
+                isDisabled={!hasPrice}
               >
                 Ask Admin
               </Button>
 
               <span>|</span>
 
-              <AddToWishlist productId={product.id} />
+              <div className={hasPrice ? '' : 'opacity-40 pointer-events-none'}>
+                <AddToWishlist productId={product.id} />
+              </div>
 
               <span>|</span>
 
@@ -317,10 +335,17 @@ const ProductDetail = ({ product }: Props) => {
                   data={{
                     text: 'Check out this product',
                     title: `${product.name} - Indoteknik.com`,
-                    url: (process.env.NEXT_PUBLIC_SELF_HOST || '') + (router?.asPath || '/'),
+                    url:
+                      (process.env.NEXT_PUBLIC_SELF_HOST || '') +
+                      (router?.asPath || '/'),
                   }}
                 >
-                  <Button variant='link' colorScheme='gray' leftIcon={<Share2Icon size={18} />}>
+                  <Button
+                    variant='link'
+                    colorScheme='gray'
+                    leftIcon={<Share2Icon size={18} />}
+                    isDisabled={!hasPrice}
+                  >
                     Share
                   </Button>
                 </RWebShare>
@@ -350,8 +375,6 @@ const ProductDetail = ({ product }: Props) => {
       </div>
     </>
   );
-
-
 };
 
 export default ProductDetail;