From b39b1b05ab6fc32ea3fdf5b3793511ef17d682fb Mon Sep 17 00:00:00 2001
From: Miqdad <ahmadmiqdad27@gmail.com>
Date: Sat, 1 Nov 2025 09:51:34 +0700
Subject: <Miqdad> show price after discount

---
 src/lib/product/components/ProductCard.jsx | 240 ++++++++++++++++++-----------
 1 file changed, 146 insertions(+), 94 deletions(-)

diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index b6a3cfad..2715c6e8 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -220,11 +220,13 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                 {product?.name}
               </Link>
 
+              {/* ---------- HARGA ---------- */}
               {product?.flashSale?.id > 0 &&
               product?.lowestPrice.discountPercentage > 0 ? (
+                // ===== CASE FLASH SALE =====
                 <div className='mb-2'>
                   <div className='flex items-baseline gap-1 min-w-0'>
-                    <span className='text-danger-500 text-sm font-semibold  whitespace-nowrap'>
+                    <span className='text-danger-500 text-sm font-semibold whitespace-nowrap'>
                       {product?.lowestPrice.priceDiscount > 0 ? (
                         currencyFormat(product?.lowestPrice.priceDiscount)
                       ) : (
@@ -238,62 +240,86 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                         </a>
                       )}
                     </span>
+
                     <span
                       className='text-gray_r-11 line-through text-xs sm:text-caption-2 
-                         whitespace-nowrap overflow-hidden text-ellipsis max-w-[40%]'
+           whitespace-nowrap overflow-hidden text-ellipsis max-w-[40%]'
                     >
                       {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'>
-                        Include PPN:{' '}
-                        {currencyFormat(
-                          product.lowestPrice.price *
-                            process.env.NEXT_PUBLIC_PPN
-                        )}
+                // ===== BUKAN FLASH SALE =====
+                (() => {
+                  const basePrice = product?.lowestPrice?.priceDiscount || 0;
+                  const voucherCut = discount || 0;
+                  const finalAfterVoucher = Math.max(basePrice - voucherCut, 0);
+
+                  // CASE 1: ada harga (>0)
+                  if (product?.lowestPrice?.price > 0) {
+                    if (voucherCut > 0) {
+                      return (
+                        <div className='mb-2'>
+                          {/* baris harga sekarang + harga coret */}
+                          <div className='flex items-baseline gap-1 min-w-0'>
+                            {/* harga setelah voucher */}
+                            <span className='inline-flex items-center gap-1 text-danger-500 font-semibold text-sm whitespace-nowrap rounded-sm bg-red-50 px-2.5 py-0.5'>
+                              <TicketIcon className='h-4 w-4 shrink-0 text-danger-500' />
+                              {currencyFormat(finalAfterVoucher)}
+                            </span>
+
+                            {/* harga sebelum voucher, dicoret, truncate kalau kepanjangan */}
+                            <span
+                              className='text-gray_r-11 line-through text-[11px] leading-snug 
+                     whitespace-nowrap overflow-hidden text-ellipsis max-w-[40%]'
+                            >
+                              {currencyFormat(basePrice)}
+                            </span>
+                          </div>
+
+                          {/* PPN pakai harga finalAfterVoucher */}
+                          <div className='text-gray_r-9 text-[10px] font-normal'>
+                            Include PPN:{' '}
+                            {currencyFormat(
+                              finalAfterVoucher * process.env.NEXT_PUBLIC_PPN
+                            )}
+                          </div>
+                        </div>
+                      );
+                    }
+
+                    // CASE 1b: ga ada voucher
+                    return (
+                      <div className='text-danger-500 font-semibold mb-2'>
+                        {currencyFormat(basePrice)}
+                        <div className='text-gray_r-9 text-[10px] font-normal'>
+                          Include PPN:{' '}
+                          {currencyFormat(
+                            product.lowestPrice.price *
+                              process.env.NEXT_PUBLIC_PPN
+                          )}
+                        </div>
                       </div>
-                    </>
-                  ) : (
-                    <a
-                      rel='noopener noreferrer'
-                      target='_blank'
-                      href={callForPriceWhatsapp}
-                      aria-label='Call for Inquiry'
-                    >
-                      Call for Inquiry
-                    </a>
-                  )}
-                </div>
-              )}
-
-              {discount > 0 && (product?.flashSale?.id ?? 0) < 1 && (
-                <div className='mt-1 mb-1'>
-                  <div className='flex items-center gap-2 text-green-600 min-w-0 mb-2 flex-nowrap'>
-                    {/* label jangan pecah */}
-                    <span className='text-xs font-medium shrink-0 whitespace-nowrap'>
-                      Voucher
-                    </span>
-
-                    {/* chip bisa mengecil & memotong teks di dalam */}
-                    <span
-                      className='flex items-center gap-1.5 rounded bg-green-50 px-2.5 py-0.5 ring-0
-                       min-w-0 max-w-full overflow-hidden'
-                    >
-                      <TicketIcon className='h-3.5 w-3.5 shrink-0' />
-                      {/* nominal: truncate */}
-                      <span className='text-xs font-medium  truncate whitespace-nowrap min-w-0'>
-                        {currencyFormat(discount)}
-                      </span>
-                    </span>
-                  </div>
-                </div>
+                    );
+                  }
+
+                  // CASE 2: harga 0 → call for inquiry
+                  return (
+                    <div className='text-danger-500 font-semibold mb-2'>
+                      <a
+                        rel='noopener noreferrer'
+                        target='_blank'
+                        href={callForPriceWhatsapp}
+                        aria-label='Call for Inquiry'
+                      >
+                        Call for Inquiry
+                      </a>
+                    </div>
+                  );
+                })()
               )}
+              {/* ---------- /HARGA ---------- */}
 
               <div className='flex w-full items-center gap-x-1 '>
                 {(product?.stockTotal > 0 || product?.qtySold > 0) && (
@@ -438,11 +464,13 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                 {product?.name}
               </Link>
 
+              {/* ---------- HARGA ---------- */}
               {product?.flashSale?.id > 0 &&
               product?.lowestPrice.discountPercentage > 0 ? (
+                // ===== CASE FLASH SALE =====
                 <div className='mb-2'>
                   <div className='flex items-baseline gap-1 min-w-0'>
-                    <span className='text-danger-500 text-sm font-semibold  whitespace-nowrap'>
+                    <span className='text-danger-500 text-sm font-semibold whitespace-nowrap'>
                       {product?.lowestPrice.priceDiscount > 0 ? (
                         currencyFormat(product?.lowestPrice.priceDiscount)
                       ) : (
@@ -456,62 +484,86 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                         </a>
                       )}
                     </span>
+
                     <span
                       className='text-gray_r-11 line-through text-xs sm:text-caption-2 
-                         whitespace-nowrap overflow-hidden text-ellipsis max-w-[40%]'
+           whitespace-nowrap overflow-hidden text-ellipsis max-w-[40%]'
                     >
                       {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'>
-                        Include PPN:{' '}
-                        {currencyFormat(
-                          product.lowestPrice.price *
-                            process.env.NEXT_PUBLIC_PPN
-                        )}
+                // ===== BUKAN FLASH SALE =====
+                (() => {
+                  const basePrice = product?.lowestPrice?.priceDiscount || 0;
+                  const voucherCut = discount || 0;
+                  const finalAfterVoucher = Math.max(basePrice - voucherCut, 0);
+
+                  // CASE 1: ada harga (>0)
+                  if (product?.lowestPrice?.price > 0) {
+                    if (voucherCut > 0) {
+                      return (
+                        <div className='mb-2'>
+                          {/* baris harga sekarang + harga coret */}
+                          <div className='flex items-baseline gap-1 min-w-0'>
+                            {/* harga setelah voucher */}
+                            <span className='inline-flex items-center gap-1 text-danger-500 font-semibold text-sm whitespace-nowrap rounded-sm bg-red-50 px-2.5 py-0.5'>
+                              <TicketIcon className='h-4 w-4 shrink-0 text-danger-500' />
+                              {currencyFormat(finalAfterVoucher)}
+                            </span>
+
+                            {/* harga sebelum voucher, dicoret, truncate kalau kepanjangan */}
+                            <span
+                              className='text-gray_r-11 line-through text-[11px] leading-snug 
+                     whitespace-nowrap overflow-hidden text-ellipsis max-w-[40%]'
+                            >
+                              {currencyFormat(basePrice)}
+                            </span>
+                          </div>
+
+                          {/* PPN pakai harga finalAfterVoucher */}
+                          <div className='text-gray_r-9 text-[10px] font-normal'>
+                            Include PPN:{' '}
+                            {currencyFormat(
+                              finalAfterVoucher * process.env.NEXT_PUBLIC_PPN
+                            )}
+                          </div>
+                        </div>
+                      );
+                    }
+
+                    // CASE 1b: ga ada voucher
+                    return (
+                      <div className='text-danger-500 font-semibold mb-2'>
+                        {currencyFormat(basePrice)}
+                        <div className='text-gray_r-9 text-[10px] font-normal'>
+                          Include PPN:{' '}
+                          {currencyFormat(
+                            product.lowestPrice.price *
+                              process.env.NEXT_PUBLIC_PPN
+                          )}
+                        </div>
                       </div>
-                    </>
-                  ) : (
-                    <a
-                      rel='noopener noreferrer'
-                      target='_blank'
-                      href={callForPriceWhatsapp}
-                      aria-label='Call for Inquiry'
-                    >
-                      Call for Inquiry
-                    </a>
-                  )}
-                </div>
-              )}
-
-              {discount > 0 && (product?.flashSale?.id ?? 0) < 1 && (
-                <div className='mt-1 mb-1'>
-                  <div className='flex items-center gap-2 text-green-600 min-w-0 mb-2 flex-nowrap'>
-                    {/* label jangan pecah */}
-                    <span className='text-xs font-medium shrink-0 whitespace-nowrap'>
-                      Voucher
-                    </span>
-
-                    {/* chip bisa mengecil & memotong teks di dalam */}
-                    <span
-                      className='flex items-center gap-1.5 rounded bg-green-50 px-2.5 py-0.5 ring-0
-                       min-w-0 max-w-full overflow-hidden'
-                    >
-                      <TicketIcon className='h-3.5 w-3.5 shrink-0' />
-                      {/* nominal: truncate */}
-                      <span className='text-xs font-medium  truncate whitespace-nowrap min-w-0'>
-                        {currencyFormat(discount)}
-                      </span>
-                    </span>
-                  </div>
-                </div>
+                    );
+                  }
+
+                  // CASE 2: harga 0 → call for inquiry
+                  return (
+                    <div className='text-danger-500 font-semibold mb-2'>
+                      <a
+                        rel='noopener noreferrer'
+                        target='_blank'
+                        href={callForPriceWhatsapp}
+                        aria-label='Call for Inquiry'
+                      >
+                        Call for Inquiry
+                      </a>
+                    </div>
+                  );
+                })()
               )}
+              {/* ---------- /HARGA ---------- */}
 
               {(product?.stockTotal > 0 || product?.qtySold > 0) && (
                 <div className='flex w-full items-center gap-x-2 flex-nowrap min-w-0'>
-- 
cgit v1.2.3