<Miqdad> desktop price and discount

1 files changed, 73 insertions, 4 deletions

diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index 34137482..34fdf8dd 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -206,8 +206,63 @@ 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'>
@@ -256,14 +311,29 @@ 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'>
+                    <span className='text-[9pt] font-semibold'>Voucher</span>
+                    <span className='inline-flex items-center gap-1.5 rounded bg-green-50 px-2.5 py-0.5 ring-0'>
+                      <TicketIcon className='h-3.5 w-3.5' />
+                      <span className='text-sm font-extrabold tabular-nums'>
+                        {currencyFormat(discount)}
+                      </span>
+                    </span>
+                  </div>
+                </div>
               )}
-              {discount > 0 && product?.flashSale?.id < 1 && (
+              {/* 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 && (
@@ -434,7 +504,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
               product?.lowestPrice.discountPercentage > 0 ? (
                 <div className='mb-2'>
                   <div className='flex items-baseline gap-2'>
-                    {/* harga sekarang (merah) – dibiarkan pakai variabelmu */}
+                    {/* harga sekarang (merah) */}
                     <span className='text-danger-500 font-semibold tabular-nums'>
                       {product?.lowestPrice.priceDiscount > 0 ? (
                         currencyFormat(product?.lowestPrice.price)
@@ -457,7 +527,6 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                   </div>
                 </div>
               ) : (
-                // === BLOK ELSE PUNYA KAMU, TIDAK DIUBAH ===
                 <div className='text-danger-500 font-semibold mb-2'>
                   {product?.lowestPrice.price > 0 ? (
                     <>