From 730453990c0dd9d0bcdab5d1e633d49c715c6470 Mon Sep 17 00:00:00 2001
From: Miqdad <ahmadmiqdad27@gmail.com>
Date: Mon, 10 Nov 2025 09:00:44 +0700
Subject: <Miqdad> cr renca PPN, image, and button

---
 src/lib/product/components/ProductCard.jsx | 161 +++++++++++++++++++++++------
 1 file changed, 131 insertions(+), 30 deletions(-)

(limited to 'src/lib')

diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index 7c1810e3..6f2ffd67 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -249,14 +249,31 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                   </div>
 
                   {product?.lowestPrice.priceDiscount > 0 && (
-                    <div className='text-gray_r-9 text-[10px] font-normal'>
-                      Include PPN:{' '}
-                      {currencyFormat(
+                    <div className='text-gray_r-9 text-[10px] font-normal flex items-center gap-1 min-w-0'>
+                      <span className='shrink-0'>Include PPN:&nbsp;</span>
+                      <span
+                        className='truncate'
+                        title={currencyFormat(
+                          Math.round(
+                            Number(product.lowestPrice.priceDiscount) *
+                              process.env.NEXT_PUBLIC_PPN
+                          )
+                        )}
+                      >
+                        {currencyFormat(
+                          Math.round(
+                            Number(product.lowestPrice.priceDiscount) *
+                              process.env.NEXT_PUBLIC_PPN
+                          )
+                        )}
+                      </span>
+
+                      {/* {currencyFormat(
                         Math.round(
                           Number(product.lowestPrice.priceDiscount) *
                             process.env.NEXT_PUBLIC_PPN
                         )
-                      )}
+                      )} */}
                     </div>
                   )}
                 </div>
@@ -292,13 +309,30 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                           </div>
 
                           {/* PPN pakai harga finalAfterVoucher */}
-                          <div className='text-gray_r-9 text-[10px] font-normal'>
-                            Include PPN:{' '}
-                            {currencyFormat(
+                          <div className='text-gray_r-9 text-[10px] font-normal flex items-center gap-1 min-w-0'>
+                            <span className='shrink-0'>Include PPN:&nbsp;</span>
+                            <span
+                              className='truncate'
+                              title={currencyFormat(
+                                Math.round(
+                                  finalAfterVoucher *
+                                    process.env.NEXT_PUBLIC_PPN
+                                )
+                              )}
+                            >
+                              {currencyFormat(
+                                Math.round(
+                                  finalAfterVoucher *
+                                    process.env.NEXT_PUBLIC_PPN
+                                )
+                              )}
+                            </span>
+
+                            {/* {currencyFormat(
                               Math.round(
                                 finalAfterVoucher * process.env.NEXT_PUBLIC_PPN
                               )
-                            )}
+                            )} */}
                           </div>
                         </div>
                       );
@@ -308,14 +342,31 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                     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(
+                        <div className='text-gray_r-9 text-[10px] font-normal flex items-center gap-1 min-w-0'>
+                          <span className='shrink-0'>Include PPN:&nbsp;</span>
+                          <span
+                            className='truncate'
+                            title={currencyFormat(
+                              Math.round(
+                                Number(product.lowestPrice.price) *
+                                  process.env.NEXT_PUBLIC_PPN
+                              )
+                            )}
+                          >
+                            {currencyFormat(
+                              Math.round(
+                                Number(product.lowestPrice.price) *
+                                  process.env.NEXT_PUBLIC_PPN
+                              )
+                            )}
+                          </span>
+
+                          {/* {currencyFormat(
                             Math.round(
                               Number(product.lowestPrice.price) *
                                 process.env.NEXT_PUBLIC_PPN
                             )
-                          )}
+                          )} */}
                         </div>
                       </div>
                     );
@@ -510,14 +561,30 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                     </span>
                   </div>
                   {product?.lowestPrice.priceDiscount > 0 && (
-                    <div className='text-gray_r-9 text-[10px] font-normal'>
-                      Include PPN:{' '}
-                      {currencyFormat(
+                    <div className='text-gray_r-9 text-[10px] font-normal flex items-center gap-1 min-w-0'>
+                      <span className='shrink-0'>Include PPN:&nbsp;</span>
+                      <span
+                        className='truncate'
+                        title={currencyFormat(
+                          Math.round(
+                            Number(product.lowestPrice.priceDiscount) *
+                              process.env.NEXT_PUBLIC_PPN
+                          )
+                        )}
+                      >
+                        {currencyFormat(
+                          Math.round(
+                            Number(product.lowestPrice.priceDiscount) *
+                              process.env.NEXT_PUBLIC_PPN
+                          )
+                        )}
+                      </span>
+                      {/* {currencyFormat(
                         Math.round(
                           Number(product.lowestPrice.priceDiscount) *
                             process.env.NEXT_PUBLIC_PPN
                         )
-                      )}
+                      )} */}
                     </div>
                   )}
                 </div>
@@ -551,11 +618,22 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                           </div>
 
                           {/* PPN pakai harga finalAfterVoucher */}
-                          <div className='text-gray_r-9 text-[10px] font-normal'>
-                            Include PPN:{' '}
-                            {currencyFormat(
+                          <div className='text-gray_r-9 text-[10px] font-normal flex items-center gap-1 min-w-0'>
+                            <span className='shrink-0'>Include PPN:&nbsp;</span>
+                            <span
+                              className='truncate'
+                              title={currencyFormat(
+                                finalAfterVoucher * process.env.NEXT_PUBLIC_PPN
+                              )}
+                            >
+                              {currencyFormat(
+                                finalAfterVoucher * process.env.NEXT_PUBLIC_PPN
+                              )}
+                            </span>
+
+                            {/* {currencyFormat(
                               finalAfterVoucher * process.env.NEXT_PUBLIC_PPN
-                            )}
+                            )} */}
                           </div>
                         </div>
                       );
@@ -565,12 +643,24 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                     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(
+                        <div className='text-gray_r-9 text-[10px] font-normal flex items-center gap-1 min-w-0'>
+                          <span className='shrink-0'>Include PPN:&nbsp;</span>
+                          <span
+                            className='truncate'
+                            title={currencyFormat(
+                              product.lowestPrice.price *
+                                process.env.NEXT_PUBLIC_PPN
+                            )}
+                          >
+                            {currencyFormat(
+                              product.lowestPrice.price *
+                                process.env.NEXT_PUBLIC_PPN
+                            )}
+                          </span>
+                          {/* {currencyFormat(
                             product.lowestPrice.price *
                               process.env.NEXT_PUBLIC_PPN
-                          )}
+                          )} */}
                         </div>
                       </div>
                     );
@@ -775,11 +865,21 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                       </div>
 
                       {/* PPN pakai harga finalAfterVoucher */}
-                      <div className='text-gray_r-9 text-[10px] font-normal'>
-                        Include PPN:{' '}
-                        {currencyFormat(
+                      <div className='text-gray_r-9 text-[10px] font-normal flex items-center gap-1 min-w-0'>
+                        <span className='shrink-0'>Include PPN:&nbsp;</span>
+                        {/* {currencyFormat(
                           finalAfterVoucher * process.env.NEXT_PUBLIC_PPN
-                        )}
+                        )} */}
+                        <span
+                          className='truncate'
+                          title={currencyFormat(
+                            finalAfterVoucher * process.env.NEXT_PUBLIC_PPN
+                          )}
+                        >
+                          {currencyFormat(
+                            finalAfterVoucher * process.env.NEXT_PUBLIC_PPN
+                          )}
+                        </span>
                       </div>
                     </div>
                   );
@@ -789,8 +889,9 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                 return (
                   <div className='text-danger-500 font-semibold mb-2'>
                     {currencyFormat(basePrice)}
-                    <div className='text-gray_r-9 text-[10px] font-normal'>
-                      Include PPN:{' '}
+                    <div className='text-gray_r-9 text-[10px] font-normal flex items-center gap-1 min-w-0'>
+                      <span className='shrink-0'>Include PPN:&nbsp;</span>
+
                       {currencyFormat(
                         product.lowestPrice.price * process.env.NEXT_PUBLIC_PPN
                       )}
-- 
cgit v1.2.3