<Miqdad> cr renca PPN, image, and button

2 files changed, 56 insertions, 15 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';