<Miqdad> cr renca PPN, image, and button

3 files changed, 187 insertions, 45 deletions

diff --git a/src-migrate/modules/product-detail/components/AddToCart.tsx b/src-migrate/modules/product-detail/components/AddToCart.tsx
index 147fd6d2..bebd6c5a 100644
--- a/src-migrate/modules/product-detail/components/AddToCart.tsx
+++ b/src-migrate/modules/product-detail/components/AddToCart.tsx
@@ -97,6 +97,38 @@ const AddToCart = ({
   ].join('&');
   const [addCartAlert, setAddCartAlert] = useState(false);
 
+  const voucher = Array.isArray(products?.new_voucher_pasti_hemat)
+    ? products.new_voucher_pasti_hemat[0]
+    : products?.new_voucher_pasti_hemat || null;
+
+  const basePrice =
+    Number(products?.lowest_price?.price_discount ?? 0) ||
+    Number(products?.lowest_price?.price ?? 0);
+
+  function calcVoucherCut() {
+    if (!voucher || !basePrice) return 0;
+    const min = Number(voucher?.min_purchase ?? 0);
+    if (min > 0 && basePrice < min) return 0;
+
+    const type = String(voucher?.discount_type || '').toLowerCase();
+    const amount = Number(
+      (voucher as any)?.discount_amount ?? (voucher as any)?.discountAmount ?? 0
+    );
+    const max = Number(voucher?.max_discount ?? 0);
+
+    let cut = 0;
+    if (type.startsWith('percent')) {
+      const pct = amount <= 1 ? amount * 100 : amount;
+      cut = basePrice * (pct / 100);
+    } else {
+      cut = amount || 0;
+    }
+    if (max > 0) cut = Math.min(cut, max);
+    return Math.max(0, cut);
+  }
+
+  const isVoucherEligible = calcVoucherCut() > 0;
+
   const handleButton = async () => {
     let isLoggedIn = typeof auth === 'object';
 
@@ -171,7 +203,13 @@ const AddToCart = ({
     buy: {
       colorScheme: 'red',
       variant: 'solid',
-      text: isDesktop ? 'Beli' : 'Beli Sekarang',
+      text: isVoucherEligible
+        ? isDesktop
+          ? 'Beli Pakai Voucher'
+          : 'Beli Pakai Voucher'
+        : isDesktop
+        ? 'Beli'
+        : 'Beli Sekarang',
     },
   };
 
@@ -208,7 +246,10 @@ const AddToCart = ({
         {/* ===== MOBILE LAYOUT: konten scroll + footer fixed di dalam popup ===== */}
         <div className='md:hidden flex flex-col max-h-[75vh]'>
           {/* area scroll */}
-          <div className='flex-1 overflow-y-auto' style={{ scrollbarWidth: 'none' }}>
+          <div
+            className='flex-1 overflow-y-auto'
+            style={{ scrollbarWidth: 'none' }}
+          >
             {/* HEADER ITEM */}
             <div className='flex mt-4'>
               <div className='w-[25%]'>
diff --git a/src-migrate/modules/product-detail/components/Image.tsx b/src-migrate/modules/product-detail/components/Image.tsx
index c9687bf0..a265844d 100644
--- a/src-migrate/modules/product-detail/components/Image.tsx
+++ b/src-migrate/modules/product-detail/components/Image.tsx
@@ -18,23 +18,23 @@ const Image = ({ product }: Props) => {
 
   const { isDesktop, isMobile } = useDevice();
 
-  useEffect(() => {
-    let interval: NodeJS.Timeout;
+  // useEffect(() => {
+  //   let interval: NodeJS.Timeout;
 
-    if (flashSale?.remaining_time && flashSale.remaining_time > 0) {
-      setCount(flashSale.remaining_time);
+  //   if (flashSale?.remaining_time && flashSale.remaining_time > 0) {
+  //     setCount(flashSale.remaining_time);
 
-      interval = setInterval(() => {
-        setCount((prevCount) => prevCount - 1);
-      }, 1000);
-    }
+  //     interval = setInterval(() => {
+  //       setCount((prevCount) => prevCount - 1);
+  //     }, 1000);
+  //   }
 
-    return () => {
-      clearInterval(interval);
-    };
-  }, [flashSale?.remaining_time]);
+  //   return () => {
+  //     clearInterval(interval);
+  //   };
+  // }, [flashSale?.remaining_time]);
 
-  const duration = moment.duration(count, 'seconds');
+  // const duration = moment.duration(count, 'seconds');
   const image = useMemo(() => {
     if (!isDesktop && product.image_mobile) {
       return product.image_mobile + '?ratio=square';
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
                       )}