From 098e6386fd7f846786aa26bc5da4884e2ab3b26b Mon Sep 17 00:00:00 2001
From: Miqdad <ahmadmiqdad27@gmail.com>
Date: Thu, 23 Oct 2025 11:53:50 +0700
Subject: <MIqdad> fix varian and ready stock badge

---
 src/lib/product/components/ProductCard.jsx | 53 ++++++++++++++++--------------
 1 file changed, 28 insertions(+), 25 deletions(-)

(limited to 'src/lib')

diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index 7c47a10d..a296eff3 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -92,24 +92,6 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                   className='gambarA w-full object-contain object-center h-36 sm:h-48'
                 />
 
-                {/* PICK UP NOW badge (kanan-atas gambar) */}
-                {product?.isInBu && (
-                  <Link
-                    href='/panduan-pick-up-service'
-                    aria-label='Pick Up Now'
-                    className='absolute top-1 right-1 z-30'
-                  >
-                    <Image
-                      src='/images/PICKUP-NOW.png'
-                      alt='Pick Up Now'
-                      width={83}
-                      height={24}
-                      // className='drop-shadow-sm'
-                      loading='eager'
-                    />
-                  </Link>
-                )}
-
                 <div className='absolute top-0 right-0 flex mt-3 z-20'>
                   <div className='gambarB '>
                     {product?.isSni && (
@@ -138,15 +120,36 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                 </div>
               </div>
 
-              {/* BADGE DISKON KIRI-ATAS (match mobile) */}
+              {/* BADGE DISKON Kanan-ATAS */}
               {(product?.lowestPrice?.discountPercentage ?? 0) > 0 && (
-                <div className='absolute left-0 top-5 sm:top-5 z-30 translate-y-5 sm:translate-y-5'>
-                  <div className='bg-red-600 text-white px-2 py-1 rounded-r-lg shadow-sm text-xs font-bold leading-none'>
+                <div className='absolute right-0 top-1.5 '>
+                  <div className='bg-red-600 text-white px-2 py-1 rounded-l-lg shadow-sm text-xs font-bold leading-none'>
                     {Math.floor(product.lowestPrice.discountPercentage)}%
                   </div>
                 </div>
               )}
 
+              {/* BOTTOM-LEFT: Varian + PICK UP NOW  */}
+              {(product?.variantTotal > 1 || product?.isInBu) && (
+                <div className='absolute bottom-1.5 left-1.5 z-30 flex items-center gap-2'>
+                  {product?.variantTotal > 1 && (
+                    <div className='badge-gray'>
+                      {product.variantTotal} Varian
+                    </div>
+                  )}
+                  {product?.isInBu && (
+                    <Image
+                      src='/images/PICKUP-NOW.png'
+                      alt='Pick Up Now'
+                      width={83}
+                      height={24}
+                      className='drop-shadow-sm'
+                      loading='eager'
+                    />
+                  )}
+                </div>
+              )}
+
               {router.pathname != '/' && product?.flashSale?.id > 0 && (
                 <div className='absolute bottom-0 w-full grid'>
                   <div className='absolute bottom-0 w-full h-full'>
@@ -184,11 +187,11 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                   </div>
                 </div>
               )}
-              {product.variantTotal > 1 && (
+              {/* {product.variantTotal > 1 && (
                 <div className='absolute badge-gray bottom-1.5 left-1.5'>
                   {product.variantTotal} Varian
                 </div>
-              )}
+              )} */}
             </Link>
 
             <div className='p-2 sm:p-3 pb-3 text-caption-2 sm:text-body-2 leading-5'>
@@ -358,7 +361,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                   </div>
                 </div>
 
-                {/* BADGE DISKON KIRI-ATAS (tetap) */}
+                {/* BADGE DISKON Kanan-ATAS */}
                 {(product?.lowestPrice?.discountPercentage ?? 0) > 0 && (
                   <div className='absolute right-0 top-1.5 '>
                     <div className='bg-red-600 text-white px-2 py-1 rounded-l-lg shadow-sm text-xs font-bold leading-none'>
@@ -369,7 +372,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
 
                 {/* BOTTOM-LEFT: Varian + PICK UP NOW  */}
                 {(product?.variantTotal > 1 || product?.isInBu) && (
-                  <div className='absolute bottom-0 left-0 z-30 flex items-center gap-2'>
+                  <div className='absolute bottom-1.5 left-1.5 z-30 flex items-center gap-2'>
                     {product?.variantTotal > 1 && (
                       <div className='badge-gray'>
                         {product.variantTotal} Varian
-- 
cgit v1.2.3