summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/lib/product/components/ProductCard.jsx240
1 files 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'>
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-17 19:40:12 +0000