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 ++++++-----
 .../components/Product/ProductMobileVariant.jsx    | 281 +++++++++++----------
 2 files changed, 231 insertions(+), 201 deletions(-)

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}
diff --git a/src/lib/product/components/Product/ProductMobileVariant.jsx b/src/lib/product/components/Product/ProductMobileVariant.jsx
index 4cfc63ca..e6c2204b 100644
--- a/src/lib/product/components/Product/ProductMobileVariant.jsx
+++ b/src/lib/product/components/Product/ProductMobileVariant.jsx
@@ -183,10 +183,20 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
 
   return (
     <MobileView>
-      {/* PRICE & ACTIONS: tetap punyamu, hanya hapus input number lama */}
-      {/* ===== BAR BAWAH (fixed) ===== */}
+      <div className='relative'>
+        {!product.price.price > 0 && (
+          <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>
+      {/* ===== BAR BAWAH  ===== */}
       <div className='px-4 fixed bottom-0 left-0 right-0 bg-white z-10 pb-6 pt-4 rounded-t-2xl shadow-[rgba(0,0,4,0.1)_0px_-4px_4px_0px]'>
-        {/* HARGA & PPN (logikamu tetap) */}
+        {/* HARGA & PPN */}
         {activeVariant.isFlashSale &&
         activeVariant?.price?.discountPercentage > 0 ? (
           <>
@@ -220,80 +230,65 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
                   )}
                 </div>
               </>
-            ) : (
-              <span className='text-gray_r-11 leading-6 font-normal'>
-                Hubungi kami untuk dapatkan harga terbaik,&nbsp;
-                <a
-                  href={whatsappUrl('product', {
-                    name: product.name,
-                    url: createSlug(
-                      '/shop/product/',
-                      product.name,
-                      product.id,
-                      true
-                    ),
-                  })}
-                  className='text-danger-500 underline'
-                >
-                  klik disini
-                </a>
-              </span>
-            )}
+            ) : null}
           </div>
         )}
 
-        {/* ⬇️ TAMBAHKAN BLOK INI DI DALAM BAR: STOK & STEPPER */}
         <div className='grid grid-cols-12 items-center gap-3 mt-3'>
-          <div className='col-span-7'>
-            <div
-              className={`text-[14px] ${
-                product?.sla?.qty < 10 ? 'text-red-600 font-medium' : ''
-              }`}
-            >
-              {/* Stock : {activeVariant?.stock ?? 0} */}
-              Stock : {fakeStock}{' '}
-            </div>
-            {qtyPickUp > 0 && (
-              <div className='text-[16px] mt-0.5 text-red-500 italic'>
-                * {qtyPickUp} barang bisa di pickup
+          {product?.price?.price > 0 && (
+            <div className='col-span-7'>
+              <div
+                className={`text-[14px] ${
+                  product?.sla?.qty < 10 ? 'text-red-600 font-medium' : ''
+                }`}
+              >
+                {/* Stock : {activeVariant?.stock ?? 0} */}
+                Stock : {fakeStock}{' '}
               </div>
-            )}
-          </div>
+              {qtyPickUp > 0 && (
+                <div className='text-[16px] mt-0.5 text-red-500 italic'>
+                  * {qtyPickUp} barang bisa di pickup
+                </div>
+              )}
+            </div>
+          )}
           <div className='col-span-5 flex justify-end'>
-            <div className='inline-flex items-stretch border rounded-xl overflow-hidden'>
-              <button
-                type='button'
-                className='h-10 w-10 grid place-items-center text-gray-700 hover:bg-gray-100 active:scale-95'
-                onClick={() =>
-                  setQuantityInput(
-                    String(Math.max(1, Number(quantityInput || 1) - 1))
-                  )
-                }
-                aria-label='Kurangi'
-              >
-                <span className='text-2xl leading-none'>–</span>
-              </button>
-              <input
-                type='number'
-                min={1}
-                value={quantityInput}
-                onChange={(e) => setQuantityInput(e.target.value)}
-                className='h-10 w-16 text-center text-lg outline-none border-x
+            {product?.price?.price > 0 && (
+              <div className='inline-flex items-stretch border rounded-xl overflow-hidden'>
+                <button
+                  type='button'
+                  className='h-10 w-10 grid place-items-center text-gray-700 hover:bg-gray-100 active:scale-95'
+                  onClick={() =>
+                    setQuantityInput(
+                      String(Math.max(1, Number(quantityInput || 1) - 1))
+                    )
+                  }
+                  aria-label='Kurangi'
+                >
+                  <span className='text-2xl leading-none'>–</span>
+                </button>
+                <input
+                  type='number'
+                  min={1}
+                  value={quantityInput}
+                  onChange={(e) => setQuantityInput(e.target.value)}
+                  className='h-10 w-16 text-center text-lg outline-none border-x
                      [appearance:textfield]
                      [&::-webkit-outer-spin-button]:appearance-none
                      [&::-webkit-inner-spin-button]:appearance-none'
-              />
-              <button
-                type='button'
-                className='h-10 w-10 grid place-items-center text-gray-700 hover:bg-gray-100 active:scale-95'
-                onClick={() =>
-                  setQuantityInput(String(Number(quantityInput || 1) + 1))
-                }
-                aria-label='Tambah'
-              >
-                <span className='text-2xl leading-none'>+</span>
-              </button>
-            </div>
+                />
+                <button
+                  type='button'
+                  className='h-10 w-10 grid place-items-center text-gray-700 hover:bg-gray-100 active:scale-95'
+                  onClick={() =>
+                    setQuantityInput(String(Number(quantityInput || 1) + 1))
+                  }
+                  aria-label='Tambah'
+                >
+                  <span className='text-2xl leading-none'>+</span>
+                </button>
+              </div>
+            )}
           </div>
         </div>
 
@@ -306,6 +301,7 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
             className='flex items-center justify-center p-2 border-2 hover:bg-slate-100'
             variant='outline'
             title='Lihat Dokumen'
+            isDisabled={product?.price?.price <= 0}
           >
             <ImageNext
               src='/images/doc.svg'
@@ -323,7 +319,7 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
               className='flex-1'
               colorScheme='red'
               variant='outline'
-              isDisabled={product.stock === 0}
+              isDisabled={product?.price?.price <= 0}
             >
               Keranjang
             </Button>
@@ -333,7 +329,7 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
               }
               className='flex-1'
               colorScheme='red'
-              isDisabled={product.stock === 0}
+              isDisabled={product?.price?.price <= 0}
             >
               Beli
             </Button>
@@ -396,87 +392,92 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
           active={informationTab == 'specification'}
           className='rounded border border-gray_r-6 divide-y divide-gray_r-6'
         >
-          <SpecificationContent label='Ketersediaan'>
-            <span>
-              {isLoadingSLA ? (
-                <Skeleton width='100px' height='full' />
-              ) : product?.sla?.slaDate != '-' ? (
-                <button
-                  type='button'
-                  title={`Masa Persiapan Barang ${product?.sla?.slaDate}`}
-                  className={`flex gap-x-1 items-center p-2 h-8 rounded-lg w-full ${
-                    product?.sla?.slaDate === 'indent'
-                      ? 'bg-indigo-900'
-                      : 'btn-light'
-                  }`}
-                >
-                  <div
-                    className={`flex-1 text-sm  ${
-                      product?.sla?.slaDate === 'indent' ? 'text-white' : ''
+          {(!product?.price?.price || product?.price?.price <= 0) && (
+            <SpecificationContent label='Ketersediaan'>
+              <span>
+                {isLoadingSLA ? (
+                  <Skeleton width='100px' height='full' />
+                ) : product?.sla?.slaDate != '-' ? (
+                  <button
+                    type='button'
+                    title={`Masa Persiapan Barang ${product?.sla?.slaDate}`}
+                    className={`flex gap-x-1 items-center p-2 h-8 rounded-lg w-full ${
+                      product?.sla?.slaDate === 'indent'
+                        ? 'bg-indigo-900'
+                        : 'btn-light'
                     }`}
                   >
-                    {product?.sla?.slaDate}
-                  </div>
-                  <div className='flex-end'>
-                    <svg
-                      aria-hidden='true'
-                      fill='none'
-                      stroke='currentColor'
-                      stroke-width='1.5'
-                      className={`w-7 h-7 text-sm ${
+                    <div
+                      className={`flex-1 text-sm  ${
                         product?.sla?.slaDate === 'indent' ? 'text-white' : ''
                       }`}
                     >
-                      <path
-                        d='M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z'
-                        stroke-linecap='round'
-                        stroke-linejoin='round'
-                      ></path>
-                    </svg>
-                  </div>
-                </button>
-              ) : (
-                '-'
-              )}
-            </span>
-          </SpecificationContent>
+                      {product?.sla?.slaDate}
+                    </div>
+                    <div className='flex-end'>
+                      <svg
+                        aria-hidden='true'
+                        fill='none'
+                        stroke='currentColor'
+                        stroke-width='1.5'
+                        className={`w-7 h-7 text-sm ${
+                          product?.sla?.slaDate === 'indent' ? 'text-white' : ''
+                        }`}
+                      >
+                        <path
+                          d='M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z'
+                          stroke-linecap='round'
+                          stroke-linejoin='round'
+                        ></path>
+                      </svg>
+                    </div>
+                  </button>
+                ) : (
+                  '-'
+                )}
+              </span>
+            </SpecificationContent>
+          )}
+
           <SpecificationContent label='Nomor SKU'>
             <span>SKU-{product?.id}</span>
           </SpecificationContent>
           <SpecificationContent label='Part Number'>
             <span>{activeVariant?.code || '-'}</span>
           </SpecificationContent>
-          <SpecificationContent label='Stok'>
-            {activeVariant?.stock > 0 && (
-              <span className='flex gap-x-1.5'>
-                <div className='badge-solid-red'>Ready Stock</div>
-                <div className='badge-gray'>
-                  {activeVariant?.stock > 5 ? '> 5' : '< 5'}
-                </div>
-              </span>
-            )}
-            {activeVariant?.stock == 0 && (
-              <a
-                href={whatsappUrl('product', {
-                  name: product.name,
-                  url: createSlug(
-                    '/shop/product/',
-                    product.name,
-                    product.id,
-                    true
-                  ),
-                })}
-                className='text-danger-500 font-medium'
-              >
-                Tanya Stok
-              </a>
-            )}
-          </SpecificationContent>
+          {product?.price?.price > 0 && (
+            <SpecificationContent label='Stok'>
+              {activeVariant?.stock > 0 && (
+                <span className='flex gap-x-1.5'>
+                  <div className='badge-solid-red'>Ready Stock</div>
+                  <div className='badge-gray'>
+                    {activeVariant?.stock > 5 ? '> 5' : '< 5'}
+                  </div>
+                </span>
+              )}
+              {activeVariant?.stock == 0 && (
+                <a
+                  href={whatsappUrl('product', {
+                    name: product.name,
+                    url: createSlug(
+                      '/shop/product/',
+                      product.name,
+                      product.id,
+                      true
+                    ),
+                  })}
+                  className='text-danger-500 font-medium'
+                >
+                  Tanya Stok
+                </a>
+              )}
+            </SpecificationContent>
+          )}
           <SpecificationContent label='Berat Barang'>
-            {activeVariant?.weight > 0 && (
+            {activeVariant?.weight > -1 && (
               <span>{activeVariant?.weight} KG</span>
             )}
-            {activeVariant?.weight == 0 && (
+            {activeVariant?.weight == -1 && (
               <a
                 href={whatsappUrl('productWeight', {
                   name: product.name,
@@ -487,7 +488,11 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
                     true
                   ),
                 })}
-                className='text-danger-500 font-medium'
+                className={`text-danger-501 font-medium ${
+                  !product?.price?.price || product?.price?.price <= 0
+                    ? 'pointer-events-none opacity-50 cursor-default'
+                    : ''
+                }`}
               >
                 Tanya Berat
               </a>
-- 
cgit v1.2.3