From ac06a21307d120ba7ac5318f1b1e54380a41fbce Mon Sep 17 00:00:00 2001
From: Miqdad <ahmadmiqdad27@gmail.com>
Date: Fri, 17 Oct 2025 19:15:03 +0700
Subject: <Miqdad> cr renca baru desktop

---
 src/lib/product/components/ProductCard.jsx | 194 ++++++++++-------------------
 1 file changed, 64 insertions(+), 130 deletions(-)

diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index 4c1e4a14..ac1ab29b 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -86,27 +86,31 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
               aria-label='Produk'
             >
               <div className='relative'>
-                {/* New Image */}
-                <div
-                  className='relative w-full overflow-hidden'
-                  style={{ aspectRatio: '1 / 1' }}
-                >
-                  <Image
-                    src={image}
-                    alt={product?.name}
-                    fill
-                    sizes='(max-width:640px) 100vw, 50vw'
-                    className='object-contain object-center bg-white'
-                  />
-                </div>
-                {/* Old Image */}
-
-                {/* <Image
+                <Image
                   src={image}
                   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'>
+                />
+
+                {/* 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 && (
                       <ImageNext
@@ -134,6 +138,15 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                 </div>
               </div>
 
+              {/* BADGE DISKON KIRI-ATAS (match mobile) */}
+              {(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'>
+                    {Math.floor(product.lowestPrice.discountPercentage)}%
+                  </div>
+                </div>
+              )}
+
               {router.pathname != '/' && product?.flashSale?.id > 0 && (
                 <div className='absolute bottom-0 w-full grid'>
                   <div className='absolute bottom-0 w-full h-full'>
@@ -146,7 +159,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                     />
                   </div>
                   <div className='relative'>
-                    <div className='flex gap-x-1 items-center p-2 justify-center'>
+                    {/* <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)}%
@@ -167,7 +180,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                             : 'FLASH SALE'}
                         </span>
                       </div>
-                    </div>
+                    </div> */}
                   </div>
                 </div>
               )}
@@ -177,6 +190,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 ? (
@@ -190,23 +204,9 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                 ) : (
                   <div>-</div>
                 )}
-                {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>
-                )}
               </div>
+
+              {/* ⬇️ line clamp desktop dibiarkan seperti aslinya */}
               <Link
                 href={URL.product}
                 aria-label={product?.name}
@@ -222,70 +222,13 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                 {product?.name}
               </Link>
 
-              {/* New Price Section */}
               {product?.flashSale?.id > 0 &&
-              product?.lowestPrice.discountPercentage > 0 ? (
-                <div className='mb-2'>
-                  <div className='flex items-baseline gap-2'>
-                    {/* harga sekarang (merah) */}
-                    <span className='text-danger-500 font-semibold tabular-nums'>
-                      {product?.lowestPrice.priceDiscount > 0 ? (
-                        currencyFormat(product?.lowestPrice.price)
-                      ) : (
-                        <a
-                          rel='noopener noreferrer'
-                          target='_blank'
-                          href={callForPriceWhatsapp}
-                          aria-label='Call for Inquiry'
-                        >
-                          Call for Inquiry
-                        </a>
-                      )}
-                    </span>
-
-                    {/* harga lama (abu, dicoret) */}
-                    <span className='text-gray_r-11 line-through text-[11px] sm:text-caption-2 tabular-nums'>
-                      {currencyFormat(product.lowestPrice.price)}
-                    </span>
-                  </div>
-                </div>
-              ) : (
-                <div className='text-danger-500 font-semibold mb-2'>
-                  {product?.lowestPrice.price > 0 ? (
-                    <>
-                      {currencyFormat(product?.lowestPrice.priceDiscount)}
-                      <div className='text-gray_r-9 text-[10px] font-normal mt-1 leading-tight'>
-                        Include PPN:{' '}
-                        {currencyFormat(
-                          product.lowestPrice.price *
-                            process.env.NEXT_PUBLIC_PPN
-                        )}
-                      </div>
-                    </>
-                  ) : (
-                    <a
-                      rel='noopener noreferrer'
-                      target='_blank'
-                      href={callForPriceWhatsapp}
-                      aria-label='Call for Inquiry'
-                    >
-                      Call for Inquiry
-                    </a>
-                  )}
-                </div>
-              )}
-
-              {/* Old Price section */}
-              {/* {product?.flashSale?.id > 0 &&
               product?.lowestPrice.discountPercentage > 0 ? (
                 <>
                   <div className='flex gap-x-1 mb-1 items-center'>
                     <div className='text-gray_r-11 line-through text-[11px] sm:text-caption-2'>
                       {currencyFormat(product.lowestPrice.price)}
                     </div>
-                    <div className='badge-solid-red'>
-                      {Math.floor(product?.lowestPrice.discountPercentage)}%
-                    </div>
                   </div>
                   <div className='text-danger-500 font-semibold mb-2'>
                     {product?.lowestPrice.priceDiscount > 0 ? (
@@ -326,8 +269,8 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                     </a>
                   )}
                 </div>
-              )} */}
-              {/* New voucher section */}
+              )}
+
               {discount > 0 && (product?.flashSale?.id ?? 0) < 1 && (
                 <div className='mt-1 mb-1'>
                   <div className='inline-flex items-center gap-2 text-green-600'>
@@ -341,20 +284,11 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                   </div>
                 </div>
               )}
-              {/* Old */}
-              {/* {discount > 0 && product?.flashSale?.id < 1 && (
-                <div className='flex gap-x-1 mb-1 text-sm'>
-                  <div className='inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20'>
-                    Voucher : {currencyFormat(discount)}
-                  </div>
-                </div>
-              )} */}
 
               <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'}
@@ -517,37 +451,37 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
 
               {product?.flashSale?.id > 0 &&
               product?.lowestPrice.discountPercentage > 0 ? (
-                <div className='mb-2'>
-                  <div className='flex items-baseline gap-2'>
-                    {/* harga sekarang (merah) */}
-                    <span className='text-danger-500 font-semibold tabular-nums'>
-                      {product?.lowestPrice.priceDiscount > 0 ? (
-                        currencyFormat(product?.lowestPrice.price)
-                      ) : (
-                        <a
-                          rel='noopener noreferrer'
-                          target='_blank'
-                          href={callForPriceWhatsapp}
-                          aria-label='Call for Inquiry'
-                        >
-                          Call for Inquiry
-                        </a>
-                      )}
-                    </span>
-
-                    {/* harga lama (abu, dicoret) */}
-                    <span className='text-gray_r-11 line-through text-[11px] sm:text-caption-2 tabular-nums'>
+                <>
+                  <div className='flex gap-x-1 mb-1 items-center'>
+                    <div className='text-gray_r-11 line-through text-[11px] sm:text-caption-2'>
                       {currencyFormat(product.lowestPrice.price)}
-                    </span>
+                    </div>
+                    {/* <div className='badge-solid-red'>
+                      {Math.floor(product?.lowestPrice.discountPercentage)}%
+                    </div> */}
                   </div>
-                </div>
+                  <div className='text-danger-500 font-semibold mb-2'>
+                    {product?.lowestPrice.priceDiscount > 0 ? (
+                      currencyFormat(product?.lowestPrice.priceDiscount)
+                    ) : (
+                      <a
+                        rel='noopener noreferrer'
+                        target='_blank'
+                        href={callForPriceWhatsapp}
+                        aria-label='Call for Inquiry'
+                      >
+                        Call for Inquiry
+                      </a>
+                    )}
+                  </div>
+                </>
               ) : (
-                <div className='text-danger-500 font-semibold mb-2'>
+                <div className='text-danger-500 font-semibold mb-2 min-h-[40px]'>
                   {product?.lowestPrice.price > 0 ? (
                     <>
-                      {currencyFormat(product?.lowestPrice.priceDiscount)}
-                      <div className='text-gray_r-9 text-[10px] font-normal mt-1 leading-tight'>
-                        Include PPN:{' '}
+                      {currencyFormat(product?.lowestPrice.price)}
+                      <div className='text-gray_r-9 text-[10px] font-normal mt-2'>
+                        Inc. PPN:{' '}
                         {currencyFormat(
                           product.lowestPrice.price *
                             process.env.NEXT_PUBLIC_PPN
-- 
cgit v1.2.3