From 7cf105a01a814c5f76dd6b407df284a44026cabf Mon Sep 17 00:00:00 2001
From: Miqdad <ahmadmiqdad27@gmail.com>
Date: Wed, 12 Nov 2025 17:14:37 +0700
Subject: <Miqdad> done product detail

---
 .../product-detail/components/ProductDetail.tsx    | 67 +++++++++++++++-------
 1 file changed, 45 insertions(+), 22 deletions(-)

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

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;
-- 
cgit v1.2.3


From 0eedef242e76673e6882ec11b87a9371d6ec5164 Mon Sep 17 00:00:00 2001
From: Miqdad <ahmadmiqdad27@gmail.com>
Date: Wed, 12 Nov 2025 17:22:46 +0700
Subject: <Miqdad> mobile

---
 src-migrate/modules/product-detail/components/ProductDetail.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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

diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index c8c03300..76fa8298 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -252,7 +252,7 @@ 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'>
+                <div className='bg-red-50 p-2 py-1.5 rounded-lg border border-red-500 flex gap-1 items-center '>
                   <AlertTriangle
                     size={18}
                     className='text-red-600 shrink-0 mx-2'
-- 
cgit v1.2.3


From 3e3dee725e1d4aeeb1048ee49aab6b2866a8d5c7 Mon Sep 17 00:00:00 2001
From: Miqdad <ahmadmiqdad27@gmail.com>
Date: Wed, 12 Nov 2025 17:56:28 +0700
Subject: <MIqdad> fix label desktop and mobile

---
 .../product-detail/components/ProductDetail.tsx    | 68 ++++++++++++++++------
 1 file changed, 50 insertions(+), 18 deletions(-)

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

diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index 76fa8298..354889e5 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -143,6 +143,16 @@ const ProductDetail = ({ product }: Props) => {
 
   return (
     <>
+      {/* WATERMARK OVERLAY jika produk tidak punya harga */}
+      {!hasPrice && (
+        <div className='fixed inset-0 z-[5] flex items-center justify-center pointer-events-none select-none'>
+          <img
+            src='/images/nonaktif-watermark.png'
+            alt='Produk tidak tersedia'
+            className='w-[80%] max-w-[600px] opacity-10 rotate-[-25deg]'
+          />
+        </div>
+      )}
       <div className='md:flex md:flex-wrap'>
         <div className='w-full mb-4 md:mb-0 px-4 md:px-0'>
           <Breadcrumb id={product.id} name={product.name} />
@@ -250,24 +260,46 @@ const ProductDetail = ({ product }: Props) => {
             {/* <<=== TUTUP kolom kiri */}
 
             {/* ===== Kolom kanan: info ===== */}
-            <div className='md:w-8/12 px-4 md:pl-6'>
-              {!hasPrice && (
-                <div className='bg-red-50 p-2 py-1.5 rounded-lg border border-red-500 flex gap-1 items-center '>
-                  <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' />
-              <Information product={product} />
-              <div className='h-6' />
-            </div>
+            {isDesktop && (
+              <div className='md:w-8/12 px-4 md:pl-6'>
+                {!hasPrice && (
+                  <div className='bg-red-50 p-2 py-1.5 rounded-lg border border-red-500 flex gap-1 items-center '>
+                    <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' />
+                <Information product={product} />
+                <div className='h-6' />
+              </div>
+            )}
+            {isMobile && (
+              <div className='md:w-8/12 px-4 md:pl-6 relative'>
+                {!hasPrice && (
+                  <div className='bg-red-50 p-2 py-1.5 border-b border-red-500 flex gap-1 items-center w-screen relative left-1/2 right-1/2 -translate-x-1/2'>
+                    <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' />
+                <Information product={product} />
+                <div className='h-6' />
+              </div>
+            )}
           </div>
 
           <div className='h-full'>
-- 
cgit v1.2.3


From d292f00640a5b0cf68019eedebcdbb87ecb27270 Mon Sep 17 00:00:00 2001
From: Miqdad <ahmadmiqdad27@gmail.com>
Date: Wed, 12 Nov 2025 18:18:03 +0700
Subject: <MIqdad> watermark produk tidak tersedia

---
 .../modules/product-detail/components/ProductDetail.tsx       | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

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

diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index 354889e5..388d2248 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -143,16 +143,16 @@ const ProductDetail = ({ product }: Props) => {
 
   return (
     <>
-      {/* WATERMARK OVERLAY jika produk tidak punya harga */}
-      {!hasPrice && (
-        <div className='fixed inset-0 z-[5] flex items-center justify-center pointer-events-none select-none'>
+      {isDesktop && !hasPrice && (
+        <div className='fixed inset-0 z-[50] flex items-center justify-center pointer-events-none select-none'>
           <img
-            src='/images/nonaktif-watermark.png'
+            src='/images/produk_tidak_tersedia.svg'
             alt='Produk tidak tersedia'
-            className='w-[80%] max-w-[600px] opacity-10 rotate-[-25deg]'
+            className='w-[35%] opacity-[50%] -translate-x-[10%]'
           />
         </div>
       )}
+
       <div className='md:flex md:flex-wrap'>
         <div className='w-full mb-4 md:mb-0 px-4 md:px-0'>
           <Breadcrumb id={product.id} name={product.name} />
@@ -293,7 +293,6 @@ const ProductDetail = ({ product }: Props) => {
                     </h1>
                   </div>
                 )}
-                <div className='h-6 md:h-0' />
                 <h1 className={style['title']}>{product.name}</h1>
                 <div className='h-3 md:h-0' />
                 <Information product={product} />
-- 
cgit v1.2.3


From ff27a8752df545554fcee1beb8acbb24011a040b Mon Sep 17 00:00:00 2001
From: Miqdad <ahmadmiqdad27@gmail.com>
Date: Wed, 12 Nov 2025 18:33:30 +0700
Subject: <MIqdad> mobile watermark

---
 src-migrate/modules/product-detail/components/ProductDetail.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

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

diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index 388d2248..48270dee 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -152,6 +152,15 @@ const ProductDetail = ({ product }: Props) => {
           />
         </div>
       )}
+      {isMobile && !hasPrice && (
+        <div className='fixed inset-0 z-[50] flex items-center justify-center pointer-events-none select-none'>
+          <img
+            src='/images/produk_tidak_tersedia.svg'
+            alt='Produk tidak tersedia'
+            className='w-[100%] opacity-[75%] -translate-x-[2%]'
+          />
+        </div>
+      )}
 
       <div className='md:flex md:flex-wrap'>
         <div className='w-full mb-4 md:mb-0 px-4 md:px-0'>
-- 
cgit v1.2.3


From 8ed66318c1e94d4c744984f2aab25ff993d5de4d Mon Sep 17 00:00:00 2001
From: Miqdad <ahmadmiqdad27@gmail.com>
Date: Thu, 13 Nov 2025 15:59:08 +0700
Subject: <Miqdad> cr watermark

---
 .../product-detail/components/ProductDetail.tsx    | 41 ++++++++++++----------
 1 file changed, 23 insertions(+), 18 deletions(-)

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

diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index 48270dee..e4ba2b2f 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -143,24 +143,29 @@ const ProductDetail = ({ product }: Props) => {
 
   return (
     <>
-      {isDesktop && !hasPrice && (
-        <div className='fixed inset-0 z-[50] flex items-center justify-center pointer-events-none select-none'>
-          <img
-            src='/images/produk_tidak_tersedia.svg'
-            alt='Produk tidak tersedia'
-            className='w-[35%] opacity-[50%] -translate-x-[10%]'
-          />
-        </div>
-      )}
-      {isMobile && !hasPrice && (
-        <div className='fixed inset-0 z-[50] flex items-center justify-center pointer-events-none select-none'>
-          <img
-            src='/images/produk_tidak_tersedia.svg'
-            alt='Produk tidak tersedia'
-            className='w-[100%] opacity-[75%] -translate-x-[2%]'
-          />
-        </div>
-      )}
+      <div className='relative'>
+        {isDesktop && !hasPrice && (
+          <div className='absolute inset-0 z-[20] flex items-center justify-center pointer-events-none select-none'>
+            <img
+              src='/images/produk_tidak_tersedia.svg'
+              alt='Produk tidak tersedia'
+              className='w-[47%] opacity-50 -translate-x-[3%]  -translate-y-[-70%]'
+            />
+          </div>
+        )}
+      </div>
+
+      <div className='relative'>
+        {isMobile && !hasPrice && (
+          <div className='absolute inset-0 z-[50] flex items-center justify-center pointer-events-none select-none'>
+            <img
+              src='/images/produk_tidak_tersedia.svg'
+              alt='Produk tidak tersedia'
+              className='w-[100%] opacity-[1000%] -translate-x-[0%]  -translate-y-[-197%]'
+            />
+          </div>
+        )}
+      </div>
 
       <div className='md:flex md:flex-wrap'>
         <div className='w-full mb-4 md:mb-0 px-4 md:px-0'>
-- 
cgit v1.2.3