From 24ed40386d77d80fe892fe07d3ba91be07b08ca5 Mon Sep 17 00:00:00 2001
From: Miqdad <ahmadmiqdad27@gmail.com>
Date: Wed, 15 Oct 2025 10:59:35 +0700
Subject: <Miqdad> fix pickup now mobile badge

---
 src/lib/product/components/ProductCard.jsx | 157 ++++++++++++-----------------
 1 file changed, 66 insertions(+), 91 deletions(-)

diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index d5188d5c..ed804fec 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -287,25 +287,47 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                   alt={product?.name}
                   className='gambarA w-full object-contain object-center h-36 sm:h-48'
                 />
-                <div className='absolute top-0 right-0 flex  mt-3'>
-                  <div className='gambarB '>
+
+                {/* PICK UP NOW badge (kanan-atas gambar) */}
+                {product?.isInBu && (
+                  <Link
+                    href='/panduan-pick-up-service'
+                    aria-label='Pick Up Now'
+                    className='absolute top-2 right-2 z-40'
+                  >
+                    <span
+                      className='
+                inline-flex items-center
+                rounded-full bg-cyan-500/90 px-3 py-1
+                text-[10px] font-extrabold tracking-wide text-white
+                shadow-sm ring-1 ring-inset ring-white/30
+                backdrop-blur-[1px]
+              '
+                    >
+                      PICK UP NOW
+                    </span>
+                  </Link>
+                )}
+
+                <div className='absolute top-0 right-0 flex mt-3 z-20'>
+                  <div className='gambarB'>
                     {product?.isSni && (
                       <ImageNext
                         src='/images/sni-logo.png'
                         alt='SNI Logo'
-                        className='w-4 h-5 object-contain object-top   sm:h-6'
+                        className='w-4 h-5 object-contain object-top sm:h-6'
                         width={50}
                         height={50}
                         loading='eager'
                       />
                     )}
                   </div>
-                  <div className='gambarC  '>
+                  <div className='gambarC'>
                     {product?.isTkdn && (
                       <ImageNext
                         src='/images/TKDN.png'
                         alt='TKDN'
-                        className='w-11 h-6 object-contain object-top  ml-1 mr-1 sm:h-6'
+                        className='w-11 h-6 object-contain object-top ml-1 mr-1 sm:h-6'
                         width={50}
                         height={50}
                         loading='eager'
@@ -314,16 +336,17 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                   </div>
                 </div>
               </div>
-              {/* BADGE DISKON KIRI-ATAS */}
+
+              {/* BADGE DISKON KIRI-ATAS (tetap seperti punyamu) */}
               {(product?.lowestPrice?.discountPercentage ?? 0) > 0 && (
-                <div className='absolute top-2 left-0 z-10'>
+                <div className='absolute top-2 left-0 z-30'>
                   <div
                     className='
-        bg-red-600 text-white
-        px-2 py-1
-        rounded-r-lg shadow-sm
-        text-xs font-bold leading-none
-      '
+              bg-red-600 text-white
+              px-2 py-1
+              rounded-r-lg shadow-sm
+              text-xs font-bold leading-none
+            '
                   >
                     {Math.floor(product.lowestPrice.discountPercentage)}%
                   </div>
@@ -331,7 +354,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
               )}
 
               {router.pathname != '/' && product?.flashSale?.id > 0 && (
-                <div className='absolute bottom-0 w-full grid'>
+                <div className='absolute bottom-0 w-full grid z-10'>
                   <div className='absolute bottom-0 w-full h-full'>
                     <ImageNext
                       src='/images/BG-FLASH-SALE.jpg'
@@ -342,29 +365,28 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                     />
                   </div>
                   <div className='relative'>
-                    {/* Old */}
+                    {/* Old (dibiarkan komentar persis punyamu) */}
                     {/* <div className='flex gap-x-1 items-center p-2 justify-center'>
-                      <div className='bg-yellow-400 rounded-lg p-1 h-6 w-19 flex items-center justify-center '>
-                        <span className='text-sm font-bold text-black'>
-                          {Math.floor(product?.lowestPrice.discountPercentage)}%
-                        </span>
-                      </div>
-                      <div className='bg-red-600 border border-solid border-yellow-400 p-2 rounded-full h-6 flex w-fit items-center justify-center gap-x-2'>
-                        <ImageNext
-                          src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
-                          alt='flash sale'
-                          width={13}
-                          height={5}
-                          loading='eager'
-                        />
-                        <span className='text-white text-[9px] md:text-[10px] font-semibold'>
-                          {product?.flashSale?.tag != 'false' ||
-                          product?.flashSale?.tag
-                            ? product?.flashSale?.tag
-                            : 'FLASH SALE'}
-                        </span>
-                      </div>
-                    </div> */}
+              <div className='bg-yellow-400 rounded-lg p-1 h-6 w-19 flex items-center justify-center '>
+                <span className='text-sm font-bold text-black'>
+                  {Math.floor(product?.lowestPrice.discountPercentage)}%
+                </span>
+              </div>
+              <div className='bg-red-600 border border-solid border-yellow-400 p-2 rounded-full h-6 flex w-fit items-center justify-center gap-x-2'>
+                <ImageNext
+                  src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
+                  alt='flash sale'
+                  width={13}
+                  height={5}
+                  loading='eager'
+                />
+                <span className='text-white text-[9px] md:text-[10px] font-semibold'>
+                  {product?.flashSale?.tag != 'false' || product?.flashSale?.tag
+                    ? product?.flashSale?.tag
+                    : 'FLASH SALE'}
+                </span>
+              </div>
+            </div> */}
                   </div>
                 </div>
               )}
@@ -374,6 +396,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                 </div>
               )}
             </Link>
+
             <div className='p-2 sm:p-3 pb-3 text-caption-2 sm:text-body-2 leading-5'>
               <div className='flex justify-between '>
                 {product?.manufacture?.name ? (
@@ -387,45 +410,10 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                 ) : (
                   <div>-</div>
                 )}
-                {/* PICK UP NOW badge (kanan-atas gambar) */}
-                {product?.isInBu && (
-                  <Link
-                    href='/panduan-pick-up-service'
-                    aria-label='Pick Up Now'
-                    className='absolute top-2 right-2 z-10'
-                  >
-                    <span
-                      className='
-        inline-flex items-center
-        rounded-full bg-cyan-500/90 px-3 py-1
-        text-[10px] font-extrabold tracking-wide text-white
-        shadow-sm ring-1 ring-inset ring-white/30
-        backdrop-blur-[1px]
-      '
-                    >
-                      PICK UP NOW
-                    </span>
-                  </Link>
-                )}
 
-                {/* Old */}
-                {/* {product?.isInBu && (
-                  <Link
-                    href='/panduan-pick-up-service'
-                    className='group'
-                    aria-label='pickup now'
-                  >
-                    <Image
-                      src='/images/PICKUP-NOW.png'
-                      className='group-hover:scale-105 transition-transform duration-200'
-                      alt='pickup now'
-                      width={90}
-                      height={12}
-                      loading='eager'
-                    />
-                  </Link>
-                )} */}
+                {/* (Dihapus yang versi header agar tidak dobel, sesuai instruksi sebelumnya) */}
               </div>
+
               <Link
                 href={URL.product}
                 aria-label={product?.name}
@@ -434,11 +422,12 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
               >
                 {product?.name}
               </Link>
+
               {product?.flashSale?.id > 0 &&
               product?.lowestPrice.discountPercentage > 0 ? (
                 <div className='mb-2'>
                   <div className='flex items-baseline gap-2'>
-                    {/* harga sekarang (merah) */}
+                    {/* harga sekarang (merah) – dibiarkan pakai variabelmu */}
                     <span className='text-danger-500 font-semibold tabular-nums'>
                       {product?.lowestPrice.priceDiscount > 0 ? (
                         currencyFormat(product?.lowestPrice.price)
@@ -496,13 +485,12 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                     {/* Chip: ikon + nominal */}
                     <span
                       className='
-          inline-flex items-center gap-1.5
-          rounded bg-green-50 px-2.5 py-0.5
-          ring-1 ring-inset ring-green-300
-        '
+                inline-flex items-center gap-1.5
+                rounded bg-green-50 px-2.5 py-0.5
+                ring-1 ring-inset ring-green-300
+              '
                     >
                       <Tag className='h-3.5 w-3.5' />
-
                       <span className='text-sm font-extrabold tabular-nums'>
                         {currencyFormat(discount)}
                       </span>
@@ -524,19 +512,6 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                   )}
                 </div>
               )}
-
-              {/* Old */}
-              {/* <div className='flex w-full items-center gap-x-1 '>
-                {product?.stockTotal > 0 && (
-                  <div className='badge-solid-red'>Ready Stock</div>
-                )}
-                <div className='badge-gray'>{product?.stockTotal > 5 ? '> 5' : '< 5'}</div>
-                {product?.qtySold > 0 && (
-                  <div className='text-gray_r-9 text-[11px]'>
-                    {sellingProductFormat(product?.qtySold) + ' Terjual'}
-                  </div>
-                )}
-              </div> */}
             </div>
           </div>
         </MobileView>
-- 
cgit v1.2.3