<MIqdad> product variant

1 files changed, 143 insertions, 138 deletions

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>