From d793056d1645c221d02fb821e34ab2c435c387d0 Mon Sep 17 00:00:00 2001
From: Miqdad <ahmadmiqdad27@gmail.com>
Date: Thu, 13 Nov 2025 16:20:23 +0700
Subject: <MIqdad> product variant

---
 .../components/Product/ProductDesktopVariant.jsx   | 151 ++++++++++++---------
 1 file changed, 88 insertions(+), 63 deletions(-)

(limited to 'src/lib/product/components/Product/ProductDesktopVariant.jsx')

diff --git a/src/lib/product/components/Product/ProductDesktopVariant.jsx b/src/lib/product/components/Product/ProductDesktopVariant.jsx
index 44ae04bd..6b4ab1e1 100644
--- a/src/lib/product/components/Product/ProductDesktopVariant.jsx
+++ b/src/lib/product/components/Product/ProductDesktopVariant.jsx
@@ -1,3 +1,4 @@
+import { AlertTriangle } from 'lucide-react';
 import { Box, Button, Skeleton, Tooltip } from '@chakra-ui/react';
 import { HeartIcon } from '@heroicons/react/24/outline';
 import { Info, MessageCircleIcon, Share2Icon } from 'lucide-react';
@@ -249,6 +250,7 @@ const ProductDesktopVariant = ({
     });
     router.push('/shop/quotation?source=buy');
   };
+  const hasPrice = Number(product?.price?.price) > 0;
 
   const variantSectionRef = useRef(null);
   const goToVariantSection = () => {
@@ -314,6 +316,17 @@ const ProductDesktopVariant = ({
 
   return (
     <DesktopView>
+      <div className='relative'>
+        {!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-[35%] opacity-50 -translate-x-[3%]  -translate-y-[-70%]'
+            />
+          </div>
+        )}
+      </div>
       <div className='container mx-auto pt-10'>
         <div className='flex'>
           <div className='w-full flex flex-wrap'>
@@ -326,9 +339,21 @@ const ProductDesktopVariant = ({
             </div>
 
             <div className='w-7/12 px-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>
+              )}
               <h1 className='text-title-md leading-10 font-medium'>
                 {product?.name}
               </h1>
+
               <div className='mt-10'>
                 <div className='flex p-3 bg-gray_r-4'>
                   <div className='w-4/12 text-gray_r-12/70'>Item Code</div>
@@ -430,73 +455,55 @@ const ProductDesktopVariant = ({
             </div>
           </div>
           <div className='w-[33%]'>
-            {product?.isFlashsale > 0 &&
-            product?.price?.discountPercentage > 0 ? (
+            {product?.price?.price > 0 && (
               <>
-                <div className='flex gap-x-1 items-center mt-2'>
-                  <div className='badge-solid-red text-caption-1'>
-                    {product?.price?.discountPercentage}%
-                  </div>
-                  <div className='text-gray_r-9 line-through text-caption-1'>
-                    {currencyFormat(product?.price?.price)}
-                  </div>
-                  <div className='text-danger-500 font-semibold text-xl'>
-                    {currencyFormat(product?.price?.priceDiscount)}
-                  </div>
-                </div>
-                <div className='text-gray_r-9 text-base font-normal mt-1'>
-                  Termasuk PPN:{' '}
-                  {currencyFormat(
-                    product?.price?.priceDiscount * process.env.NEXT_PUBLIC_PPN
-                  )}
-                </div>
-              </>
-            ) : (
-              <h3 className='text-danger-500 font-semibold mt-1 text-title-md'>
-                {product?.price?.price > 0 ? (
+                {product?.isFlashsale > 0 &&
+                product?.price?.discountPercentage > 0 ? (
                   <>
-                    {currencyFormat(product?.price?.price)}
+                    <div className='flex gap-x-1 items-center mt-2'>
+                      <div className='badge-solid-red text-caption-1'>
+                        {product?.price?.discountPercentage}%
+                      </div>
+                      <div className='text-gray_r-9 line-through text-caption-1'>
+                        {currencyFormat(product?.price?.price)}
+                      </div>
+                      <div className='text-danger-500 font-semibold text-xl'>
+                        {currencyFormat(product?.price?.priceDiscount)}
+                      </div>
+                    </div>
                     <div className='text-gray_r-9 text-base font-normal mt-1'>
                       Termasuk PPN:{' '}
                       {currencyFormat(
-                        product?.price?.price * process.env.NEXT_PUBLIC_PPN
+                        product?.price?.priceDiscount *
+                          process.env.NEXT_PUBLIC_PPN
                       )}
                     </div>
                   </>
                 ) : (
-                  <span className='text-gray_r-12/90 font-normal text-h-sm'>
-                    Hubungi kami untuk dapatkan harga terbaik,&nbsp;
-                    <a
-                      href={whatsappUrl('product', {
-                        name: product.name,
-                        manufacture: product.manufacture?.name,
-                        url: createSlug(
-                          '/shop/product/',
-                          product.name,
-                          product.id,
-                          true
-                        ),
-                      })}
-                      className='text-danger-500 underline'
-                      rel='noopener noreferrer'
-                      target='_blank'
-                    >
-                      klik disini
-                    </a>
-                  </span>
+                  <h3 className='text-danger-500 font-semibold mt-1 text-title-md'>
+                    {currencyFormat(product?.price?.price)}
+                    <div className='text-gray_r-9 text-base font-normal mt-1'>
+                      Termasuk PPN:{' '}
+                      {currencyFormat(
+                        product?.price?.price * process.env.NEXT_PUBLIC_PPN
+                      )}
+                    </div>
+                  </h3>
                 )}
-              </h3>
+              </>
             )}
+
             <div className='flex gap-x-5 items-center py-5'>
               <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={() => {
                     const n = parseInt(String(quantityInput), 10);
                     const next = Number.isFinite(n) ? Math.max(1, n - 1) : 1;
                     setQuantityInput(next);
                   }}
+                  disabled={!hasPrice}
                 >
                   -
                 </button>
@@ -518,43 +525,40 @@ const ProductDesktopVariant = ({
                     if (['e', 'E', '+', '-', '.'].includes(e.key))
                       e.preventDefault();
                   }}
-                  className='w-24 h-10 text-center border border-gray-300 rounded focus:outline-none'
+                  className='w-24 h-10 text-center border border-gray-300 rounded focus:outline-none 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={() => {
                     const n = parseInt(String(quantityInput), 10);
                     const next = (Number.isFinite(n) ? n : 0) + 1;
                     setQuantityInput(next);
                   }}
+                  disabled={!hasPrice}
                 >
                   +
                 </button>
               </div>
 
               <div>
-                {/* <Skeleton
+                <Skeleton
                   isLoaded={!isLoadingSLA}
                   h='21px'
-                  // w={16}
                   className={
-                    product?.sla?.qty < 10 ? 'text-red-600 font-medium' : ''
+                    !hasPrice || fakeStock < 10
+                      ? 'text-red-600 font-medium'
+                      : ''
                   }
                 >
-                  Stock : {product?.sla?.qty}{' '}
-                </Skeleton> */}
-                <Skeleton
-                  isLoaded={!isLoadingSLA}
-                  h='21px'
-                  className={fakeStock < 10 ? 'text-red-600 font-medium' : ''}
-                >
-                  Stock : {fakeStock}{' '}
+                  Stock : {hasPrice ? fakeStock : 'Habis'}
                 </Skeleton>
               </div>
+
               <div>
-                {qtyPickUp > 0 && (
+                {qtyPickUp > 0 && hasPrice && (
                   <Link href='/panduan-pick-up-service' className='group'>
                     <Image
                       src='/images/PICKUP-NOW.png'
@@ -565,20 +569,23 @@ const ProductDesktopVariant = ({
                 )}
               </div>
             </div>
-            {qtyPickUp > 0 && (
+            {/* {qtyPickUp > 0 && (
               <>
                 <div className='text-[12px] mt-1 text-red-500 italic'>
                   * {qtyPickUp} barang bisa di pickup
                 </div>
                 <div className='h-4' />
               </>
-            )}
+            )} */}
             <div className='flex gap-x-3'>
               <Button
                 onClick={() => handleAddToCart(product.id)}
                 className='w-full'
                 colorScheme='red'
                 variant={'outline'}
+                isDisabled={
+                  !product?.price?.price || product?.price?.price <= 0
+                }
               >
                 Keranjang
               </Button>
@@ -586,6 +593,9 @@ const ProductDesktopVariant = ({
                 onClick={() => handleBuy(product.id)}
                 className='w-full'
                 colorScheme='red'
+                isDisabled={
+                  !product?.price?.price || product?.price?.price <= 0
+                }
               >
                 Beli
               </Button>
@@ -595,6 +605,7 @@ const ProductDesktopVariant = ({
               color={'red'}
               colorScheme='white'
               className='w-full border-2 p-2 gap-1 mt-2 hover:bg-slate-100 flex items-center'
+              isDisabled={!product?.price?.price || product?.price?.price <= 0}
             >
               <ImageNext
                 src='/images/doc_red.svg'
@@ -692,6 +703,20 @@ const ProductDesktopVariant = ({
                 alt={product.name}
                 className='h-32 object-contain object-center w-full border border-gray_r-4'
               />
+              {/* Watermark jika produk nonaktif */}
+              {/* {(!product?.price?.price || product?.price?.price <= 0) && (
+                <div className='absolute inset-0 flex items-center justify-center'>
+                  <span
+                    className='text-[60px] font-extrabold text-green-700/20 rotate-[-25deg] select-none'
+                    style={{
+                      textShadow: '0 0 3px rgba(0,0,0,0.1)',
+                      letterSpacing: '6px',
+                    }}
+                  >
+                    NONAKTIF
+                  </span>
+                </div>
+              )} */}
             </div>
             <div className='ml-3 flex flex-1 items-center font-normal'>
               {product.name}
-- 
cgit v1.2.3