1 files changed, 61 insertions, 35 deletions

diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index c57172dc..4c75c61b 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -60,6 +60,7 @@ const ProductDetail = ({ product }: Props) => {
     isApproval,
     setSelectedVariant,
     setSla,
+    selectedVariant,
   } = useProductDetail();
 
   useEffect(() => {
@@ -110,6 +111,7 @@ const ProductDetail = ({ product }: Props) => {
 
   const [mainImage, setMainImage] = useState(allImages[0] || '');
   const [discount, setDiscount] = useState(0);
+  const [voucherDiscount, setVoucherDiscount] = useState(0);
 
   useEffect(() => {
     if (!allImages.includes(mainImage)) {
@@ -138,48 +140,72 @@ const ProductDetail = ({ product }: Props) => {
     setMainImage(allImages[i] || '');
   };
 
-  const voucherNew = Array.isArray(product?.new_voucher_pasti_hemat)
-    ? product.new_voucher_pasti_hemat[0]
-    : undefined;
-
-  const voucher = voucherNew ?? null;
-
-  const type = voucher?.discount_type ?? ''; // 'percentage' | 'percent' | 'fixed'
-  const amount = Number(
-    voucher?.discountAmount ?? voucher?.discount_amount ?? 0
-  );
-  const max = Number(voucher?.max_discount ?? 0);
-  const min = Number(voucher?.min_purchase ?? 0);
-
-  const basePrice =
-    Number(product?.lowest_price?.price_discount ?? 0) ||
-    Number(product?.lowest_price?.price ?? 0);
+  useEffect(() => {
+    // ambil voucher dari PRODUCT (bukan variant)
+    const voucherRaw = Array.isArray(product?.new_voucher_pasti_hemat)
+      ? product.new_voucher_pasti_hemat[0]
+      : product?.new_voucher_pasti_hemat;
+
+    if (!voucherRaw) {
+      setVoucherDiscount(0);
+      return;
+    }
 
-  function calcVoucherDiscount() {
-    if (!voucher || !basePrice) return 0;
-    if (min > 0 && basePrice < min) return 0;
+    // ambil harga dari VARIANT aktif
+    // kalau belum ada selectedVariant, fallback ke product.lowest_price
+    const basePriceObj = selectedVariant?.price || {
+      price: product?.lowest_price?.price ?? 0,
+      priceDiscount: product?.lowest_price?.price_discount ?? 0,
+    };
+
+    const {
+      discount_type = '',
+      discount_amount = 0,
+      max_discount = 0,
+      min_purchase = 0,
+    } = voucherRaw;
+
+    // harga dasar dipakai priceDiscount dulu, kalau kosong pakai price
+    const basePrice =
+      Number(basePriceObj.priceDiscount ?? 0) ||
+      Number(basePriceObj.price ?? 0);
+
+    if (!basePrice) {
+      setVoucherDiscount(0);
+      return;
+    }
 
-    const percent = type.toLowerCase().startsWith('percent')
-      ? amount <= 1
-        ? amount * 100
-        : amount
-      : 0;
+    // cek minimum belanja
+    if (Number(min_purchase) > 0 && basePrice < Number(min_purchase)) {
+      setVoucherDiscount(0);
+      return;
+    }
 
+    // hitung potongan
     let cut = 0;
-    if (type.toLowerCase().startsWith('percent')) {
-      cut = basePrice * (percent / 100);
+
+    if (discount_type === 'percentage') {
+      // contoh: 8.33 (%)
+      const pct = Number(discount_amount) || 0;
+      cut = basePrice * (pct / 100);
     } else {
-      cut = amount || 0;
+      // fixed amount
+      cut = Number(discount_amount) || 0;
+    }
+
+    // batas maksimal diskon
+    if (Number(max_discount) > 0 && cut > Number(max_discount)) {
+      cut = Number(max_discount);
     }
 
-    if (max > 0) cut = Math.min(cut, max);
-    return Math.max(0, cut);
-  }
+    // final clamp
+    cut = cut > 0 ? Math.floor(cut) : 0;
+
+    setVoucherDiscount(cut);
+  }, [product, selectedVariant]);
 
-  useEffect(() => {
-    setDiscount(calcVoucherDiscount());
-  }, [product?.lowest_price]);
   console.log(discount);
+  console.log(selectedVariant);
 
   return (
     <>
@@ -292,13 +318,13 @@ const ProductDetail = ({ product }: Props) => {
             {/* ===== Kolom kanan: info ===== */}
             <div className='md:w-8/12 px-4 md:pl-6'>
               <div className='h-6 md:h-0' />
-              {isMobile && discount > 0 && (
+              {isMobile && voucherDiscount > 0 && (
                 <div className='text text-sm font-medium'>
                   <TicketIcon className='inline text-yellow-300 w-5 h-5' />{' '}
                   Pakai{' '}
                   <span className='text-green-600 font-extrabold'>
                     {' '}
-                    Voucher belanja hemat {currencyFormat(discount)}
+                    Voucher belanja hemat {currencyFormat(voucherDiscount)}
                   </span>{' '}
                   saat checkout
                 </div>