Merged in Feature/all-promotion (pull request #202)

Feature/all promotion

Approved-by: trisusilo

9 files changed, 734 insertions, 242 deletions

diff --git a/src/lib/checkout/api/checkoutApi.js b/src/lib/checkout/api/checkoutApi.js
index 24f1868a..fd982fff 100644
--- a/src/lib/checkout/api/checkoutApi.js
+++ b/src/lib/checkout/api/checkoutApi.js
@@ -1,28 +1,20 @@
-import odooApi from '@/core/api/odooApi'
-import { getAuth } from '@/core/utils/auth'
+import odooApi from '@/core/api/odooApi';
+import { getAuth } from '@/core/utils/auth';
 
 export const checkoutApi = async ({ data }) => {
-  const auth = getAuth()
+  const auth = getAuth();
   const dataCheckout = await odooApi(
     'POST',
     `/api/v1/partner/${auth.partnerId}/sale_order/checkout`,
     data
-  )
-  return dataCheckout
-}
+  );
+  return dataCheckout;
+};
 
-export const getProductsCheckout = async (voucher, query) => {
-  const id = getAuth()?.id
-  let products 
-  if(voucher && query){
-    products = await odooApi('GET',`/api/v1/user/${id}/sale_order/checkout?voucher=${voucher}&source=buy`)
-  }else if (voucher){
-    products = await odooApi('GET',`/api/v1/user/${id}/sale_order/checkout?voucher=${voucher}`)
-  }else if (query) {
-    products = await odooApi('GET',`/api/v1/user/${id}/sale_order/checkout?source=buy`)
-  }else{
-    products = await odooApi('GET',`/api/v1/user/${id}/sale_order/checkout`)
-  }
-
-  return products
-}
+export const getProductsCheckout = async (query) => {
+  const queryParam = new URLSearchParams(query);
+  const userId = getAuth()?.id;
+  const url = `/api/v1/user/${userId}/sale_order/checkout?${queryParam.toString()}`;
+  const result = await odooApi('GET', url);
+  return result;
+};
diff --git a/src/lib/checkout/api/getVoucher.js b/src/lib/checkout/api/getVoucher.js
index 15c6abbb..779cef43 100644
--- a/src/lib/checkout/api/getVoucher.js
+++ b/src/lib/checkout/api/getVoucher.js
@@ -1,25 +1,28 @@
-import odooApi from '@/core/api/odooApi'
+import odooApi from '@/core/api/odooApi';
 import { getAuth } from '@/core/utils/auth'
 
-export  const getVoucher = async (id, source) => {
-  let dataVoucher = null
-  if(source){
-    dataVoucher = await odooApi('GET', `/api/v1/user/${id}/voucher?source=${source}`)
-  }else {
-    dataVoucher = await odooApi('GET', `/api/v1/user/${id}/voucher`)
-  }
-  return dataVoucher
-}
+export const getVoucher = async (id, query) => {
+  const queryParam = new URLSearchParams(query);
+  const url = `/api/v1/user/${id}/voucher?${queryParam.toString()}`;
+  const dataVoucher = await odooApi('GET', url);
+  return dataVoucher;
+};
 
 export const findVoucher = async (code, id, source) => {
-  let dataVoucher = null
-  if(source){
-    dataVoucher = await odooApi('GET', `/api/v1/user/${id}/voucher?code=${code}&source=${source}`)
-  }else{
-    dataVoucher = await odooApi('GET', `/api/v1/user/${id}/voucher?code=${code}`)
+  let dataVoucher = null;
+  if (source) {
+    dataVoucher = await odooApi(
+      'GET',
+      `/api/v1/user/${id}/voucher?code=${code}&source=${source}`
+    );
+  } else {
+    dataVoucher = await odooApi(
+      'GET',
+      `/api/v1/user/${id}/voucher?code=${code}`
+    );
   }
-  return dataVoucher
-}
+  return dataVoucher;
+};
 
 
 export const getVoucherNew = async (source) => {
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 9bc0257e..09a791ee 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -44,9 +44,16 @@ const Checkout = () => {
   const auth = useAuth();
 
   const [activeVoucher, SetActiveVoucher] = useState(null);
-
-  const { data: cartCheckout } = useQuery('cartCheckout-' + activeVoucher, () =>
-    getProductsCheckout(activeVoucher, query)
+  const [activeVoucherShipping, setActiveVoucherShipping] = useState(null);
+
+  const { data: cartCheckout } = useQuery(
+    ['cartCheckout', activeVoucher, activeVoucherShipping],
+    () =>
+      getProductsCheckout({
+        source: query,
+        voucher: activeVoucher,
+        voucher_shipping: activeVoucherShipping,
+      })
   );
 
   const [selectedAddress, setSelectedAddress] = useState({
@@ -104,6 +111,7 @@ const Checkout = () => {
   const [bottomPopupTnC, SetBottomPopupTnC] = useState(null);
   const [itemTnC, setItemTnC] = useState(null);
   const [listVouchers, SetListVoucher] = useState(null);
+  const [listVoucherShippings, SetListVoucherShipping] = useState(null);
   const [discountVoucher, SetDiscountVoucher] = useState(0);
   const [codeVoucher, SetCodeVoucher] = useState(null);
   const [findCodeVoucher, SetFindVoucher] = useState(null);
@@ -120,14 +128,23 @@ const Checkout = () => {
   const voucher = async () => {
     if (!listVouchers) {
       try {
-        let source = 'source=' + query;
-        let dataVoucher = await getVoucherNew(source);
+        setLoadingVoucher(true);
+        let dataVoucher = await getVoucher(auth?.id, {
+          source: query,
+        });
         SetListVoucher(dataVoucher);
+
+        let dataVoucherShipping = await getVoucher(auth?.id, {
+          source: query,
+          type: 'shipping',
+        });
+        SetListVoucherShipping(dataVoucherShipping);
       } finally {
         setLoadingVoucher(false);
       }
     }
   };
+
   const VoucherCode = async (code) => {
     const source = 'code=' + code + '&source=' + query;
     // let dataVoucher = await findVoucher(code, auth.id, query);
@@ -315,7 +332,7 @@ const Checkout = () => {
   useEffect(() => {
     const GT =
       cartCheckout?.grandTotal +
-      Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000;
+      Math.round(parseInt(finalShippingAmt * 1.1) / 1000) * 1000;
     const finalGT = GT < 0 ? 0 : GT;
     setGrandTotal(finalGT);
   }, [biayaKirim, cartCheckout?.grandTotal, activeVoucher]);
@@ -361,6 +378,7 @@ const Checkout = () => {
       delivery_service_type: selectedExpedisiService,
       flash_sale: hasFlashSale, // dibuat negasi untuk ngetest kebalikan nilai false
       voucher: activeVoucher,
+      voucher_shipping: activeVoucherShipping,
       type: 'sale_order',
     };
 
@@ -460,6 +478,11 @@ const Checkout = () => {
     return false;
   }, [products]);
 
+  const voucherShippingAmt = cartCheckout?.discountVoucherShipping || 0;
+  const discShippingAmt = Math.min(biayaKirim, voucherShippingAmt);
+
+  const finalShippingAmt = biayaKirim - discShippingAmt;
+
   return (
     <>
       <BottomPopup
@@ -569,8 +592,145 @@ const Checkout = () => {
             </div>
           )}
 
-          <hr className='mt-10 my-4 border-gray_r-10' />
-          <div className=''>
+          <hr className='mt-8 mb-4 border-gray_r-8' />
+
+          {listVoucherShippings && listVoucherShippings?.length > 0 && (
+            <div>
+              <h3 className='font-semibold mb-4'>Promo Gratis Ongkir</h3>
+              {listVoucherShippings?.map((item) => (
+                <div key={item.id} className='relative'>
+                  <div
+                    className={`border border-solid mb-5 w-full hover:cursor-pointer  p-2 pl-4 pr-4 `}
+                  >
+                    {item.canApply && (
+                      <div
+                        class='p-2 mb-4 text-sm text-green-800 rounded-lg bg-green-50 dark:text-green-400'
+                        role='alert'
+                      >
+                        <p>
+                          Potensi potongan sebesar{' '}
+                          <span className='text-green font-bold'>
+                            {currencyFormat(item.discountVoucher)}
+                          </span>
+                        </p>
+                      </div>
+                    )}
+                    {!item.canApply && (
+                      <div
+                        class='p-2 mb-4 text-sm text-red-800 rounded-lg bg-red-50'
+                        role='alert'
+                        onClick={() => handlingTnC(item)}
+                      >
+                        <p>
+                          Voucher tidak bisa di gunakan,{' '}
+                          <span className='text-red font-bold'>
+                            Baca Selengkapnya !
+                          </span>
+                        </p>
+                      </div>
+                    )}
+
+                    <div className={`flex gap-x-3 relative`}>
+                      {item.canApply === false && (
+                        <div className='absolute w-full h-full bg-gray_r-3/40 top-0 left-0 z-50' />
+                      )}
+                      <div className='hidden md:w-[250px] md:block'>
+                        <Image
+                          src={item.image}
+                          alt={item.name}
+                          className={`object-cover`}
+                        />
+                      </div>
+                      <div className='w-full'>
+                        <div className='flex justify-between gap-x-2 mb-1 items-center'>
+                          <div className=''>
+                            <h3 className='font-semibold'>{item.name}</h3>
+                            <div className='mt-1'>
+                              <span className='text-sm line-clamp-3'>
+                                {item.description}{' '}
+                              </span>
+                            </div>
+                          </div>
+                          <div className='flex justify-end'>
+                            <label class='relative inline-flex items-center cursor-pointer'>
+                              <input
+                                type='checkbox'
+                                value=''
+                                class='sr-only peer'
+                                checked={activeVoucherShipping === item.code}
+                                onChange={() =>
+                                  setActiveVoucherShipping(
+                                    activeVoucherShipping === item.code
+                                      ? null
+                                      : item.code
+                                  )
+                                }
+                              />
+                              <div class="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-600"></div>
+                            </label>
+                          </div>
+                        </div>
+                        <hr className='mt-2 my-2 border-gray_r-8' />
+                        <div className='flex justify-between items-center'>
+                          <p className='text-justify text-sm md:text-xs'>
+                            Kode Voucher :{' '}
+                            <span className='text-red-500 font-semibold'>
+                              {item.code}
+                            </span>
+                          </p>
+                          <p className='text-sm md:text-xs'>
+                            {activeVoucher === item.code && (
+                              <span className=' text-green-600'>
+                                Voucher digunakan{' '}
+                              </span>
+                            )}
+                          </p>
+                        </div>
+                        <div className='flex items-center mt-3'>
+                          <svg
+                            aria-hidden='true'
+                            fill='none'
+                            stroke='currentColor'
+                            stroke-width='1.5'
+                            viewBox='0 0 24 24'
+                            className='w-5 text-black'
+                          >
+                            <path
+                              d='M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z'
+                              stroke-linecap='round'
+                              stroke-linejoin='round'
+                            ></path>
+                          </svg>
+                          <div className='flex justify-between items-center'>
+                            <div className='text-left ml-3 text-sm '>
+                              Berakhir dalam{' '}
+                              <span className='text-red-600'>
+                                {item.remainingTime}
+                              </span>{' '}
+                              lagi,{' '}
+                            </div>
+                            <div
+                              className='text-sm ml-2 text-red-600'
+                              onClick={() => handlingTnC(item)}
+                            >
+                              Baca S&K
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div className='mt-3'>
+                      <p className='text-justify text-sm '></p>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+
+          <hr className='mt-8 mb-4 border-gray_r-8' />
+
+          <div>
             {!loadingVoucher && listVouchers?.length === 0 ? (
               <div className='flex items-center justify-center mt-4 mb-4'>
                 <div className='text-center'>
@@ -755,14 +915,7 @@ const Checkout = () => {
                       </div>
                     </div>
                     <div className='mt-3'>
-                      <p className='text-justify text-sm '>
-                        {/* {item.canApply === false
-                          ? 'Tambah ' +
-                            currencyFormat(item.differenceToApply) +
-                            ' untuk pakai promo ini'
-                          : 'Potensi potongan sebesar ' +
-                            currencyFormat(hitungDiscountVoucher(item.code))} */}
-                      </p>
+                      <p className='text-justify text-sm '></p>
                     </div>
                   </div>
                 </div>
@@ -928,14 +1081,18 @@ const Checkout = () => {
               </div>
               <div className='flex gap-x-2 justify-between'>
                 <div className='text-gray_r-11'>
-                  Biaya Kirim <p className='text-xs mt-3'>{etdFix}</p>
-                </div>
-                <div>
-                  {currencyFormat(
-                    Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
-                  )}
+                  Biaya Kirim <p className='text-xs mt-1'>{etdFix}</p>
                 </div>
+                <div>{currencyFormat(biayaKirim)}</div>
               </div>
+              {activeVoucherShipping && voucherShippingAmt && (
+                <div className='flex gap-x-2 justify-between'>
+                  <div className='text-gray_r-11'>Diskon Kirim</div>
+                  <div className='text-danger-500'>
+                    - {currencyFormat(discShippingAmt)}
+                  </div>
+                </div>
+              )}
             </div>
           )}
 
@@ -964,7 +1121,7 @@ const Checkout = () => {
           <div className='mt-4 mb-4'>
             <button
               type='button'
-              onClick={() => {
+              onClick={async () => {
                 SetBottomPopup(true);
                 voucher();
               }}
@@ -1220,14 +1377,18 @@ const Checkout = () => {
                     <div className='flex gap-x-2 justify-between'>
                       <div className='text-gray_r-11'>
                         Biaya Kirim
-                        <p className='text-xs mt-3'>{etdFix}</p>
-                      </div>
-                      <div>
-                        {currencyFormat(
-                          Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
-                        )}
+                        <p className='text-xs mt-1'>{etdFix}</p>
                       </div>
+                      <div>{currencyFormat(biayaKirim)}</div>
                     </div>
+                    {activeVoucherShipping && voucherShippingAmt && (
+                      <div className='flex gap-x-2 justify-between'>
+                        <div className='text-gray_r-11'>Diskon Kirim</div>
+                        <div className='text-danger-500'>
+                          - {currencyFormat(discShippingAmt)}
+                        </div>
+                      </div>
+                    )}
                   </div>
                 )}
 
diff --git a/src/lib/home/components/PreferredBrand.jsx b/src/lib/home/components/PreferredBrand.jsx
index ec09aa4e..6b64a444 100644
--- a/src/lib/home/components/PreferredBrand.jsx
+++ b/src/lib/home/components/PreferredBrand.jsx
@@ -48,6 +48,11 @@ const PreferredBrand = () => {
             Lihat Semua
           </Link>
         )}
+        {isMobile && (
+          <Link href='/shop/brands' className='!text-red-500 font-semibold sm:text-h-sm'>
+            Lihat Semua
+          </Link>
+        )}
       </div>
       {manufactures.isLoading && <PreferredBrandSkeleton />}
       {!manufactures.isLoading && (
diff --git a/src/lib/home/components/PromotionProgram.jsx b/src/lib/home/components/PromotionProgram.jsx
index b204df8e..99258d94 100644
--- a/src/lib/home/components/PromotionProgram.jsx
+++ b/src/lib/home/components/PromotionProgram.jsx
@@ -13,10 +13,14 @@ const BannerSection = () => {
       <div className='flex justify-between items-center mb-4 '>
         <div className='font-semibold sm:text-h-lg'>Promo Tersedia</div>
         {isDesktop && (
-          <div></div>
-        //   <Link href='/shop/promo' className='!text-red-500 font-semibold'>
-        //   Lihat Semua
-        // </Link>
+          <Link href='/shop/promo' className='!text-red-500 font-semibold'>
+          Lihat Semua
+        </Link>
+        )}
+        {isMobile && (
+          <Link href='/shop/promo' className='!text-red-500 font-semibold sm:text-h-sm'>
+          Lihat Semua
+        </Link>
         )}
       </div>
       {isDesktop && (promotionProgram.data &&
diff --git a/src/lib/quotation/components/Quotation.jsx b/src/lib/quotation/components/Quotation.jsx
index 8855c6c4..df234dc2 100644
--- a/src/lib/quotation/components/Quotation.jsx
+++ b/src/lib/quotation/components/Quotation.jsx
@@ -67,17 +67,19 @@ const Quotation = () => {
   const [selectedExpedisiService, setselectedExpedisiService] = useState(null);
   const [etd, setEtd] = useState(null);
   const [etdFix, setEtdFix] = useState(null);
-
+  
   const [isApproval, setIsApproval] = useState(false);
-
+  
   const expedisiValidation = useRef(null);
-
+  
   const [selectedAddress, setSelectedAddress] = useState({
     shipping: null,
     invoicing: null,
   });
-
+  
   const [addresses, setAddresses] = useState(null);
+  
+  const [note_websiteText, setselectedNote_websiteText] = useState('');
 
   useEffect(() => {
     if (!auth) return;
@@ -262,6 +264,12 @@ const Quotation = () => {
     }
 
     if (!products || products.length == 0) return;
+
+    if (isApproval && note_websiteText == '') {
+      toast.error('Maaf, Note wajib dimasukkan.');
+      return;
+    }
+    
     setIsLoading(true);
     const productOrder = products.map((product) => ({
       product_id: product.id,
@@ -276,16 +284,18 @@ const Quotation = () => {
       carrier_id: selectedCarrierId,
       estimated_arrival_days: splitDuration(etd),
       delivery_service_type: selectedExpedisiService,
+      note_website : note_websiteText,
     };
-    console.log('data checkout', data);
+    
     const isSuccess = await checkoutApi({ data });
-    console.log('isSuccess', isSuccess);
+    ;
     setIsLoading(false);
     if (isSuccess?.id) {
       for (const product of products) deleteItemCart({ productId: product.id });
       router.push(`/shop/quotation/finish?id=${isSuccess.id}`);
       return;
     }
+    
     toast.error('Gagal melakukan transaksi, terjadi kesalahan internal');
   };
 
@@ -442,8 +452,25 @@ const Quotation = () => {
             </Link>{' '}
             yang berlaku
           </p>
+            <hr className='my-4 border-gray_r-6' />
+             
+                  <div className='flex gap-x-2 justify-start mb-4'>
+                    <div className=''>Note</div>
+                      {isApproval && (
+                        <div className='text-caption-1 text-red-500 items-center flex'>*harus diisi</div>
+                      )}
+                    </div>
+                    <div className='text-caption-2 text-gray_r-11'>
+                      <textarea
+                        rows="4"
+                        cols="50"
+                        className={`w-full p-1 rounded border  border-gray_r-6`}
+                        onChange={(e) => setselectedNote_websiteText(e.target.value)}
+                      />
+                  </div>
         </div>
-
+      
+            
         <Divider />
 
         <div className='flex gap-x-3 p-4'>
@@ -576,6 +603,27 @@ const Quotation = () => {
                 yang berlaku
               </p>
 
+                <div>
+                  <hr className='my-4 border-gray_r-6' />
+
+                  <div className='flex gap-x-1 flex-col mb-4'>
+                    <div className='flex flex-row gap-x-1'>
+                      <div className=''>Note</div>
+                      {isApproval && (
+                        <div className='text-caption-1 text-red-500 items-center flex'>*harus diisi</div>
+                      )}
+                    </div>
+                    <div className='text-caption-2 text-gray_r-11'>
+                      <textarea
+                        rows="4"
+                        cols="50"
+                        className={`w-full p-1 rounded border  border-gray_r-6`}
+                        onChange={(e) => setselectedNote_websiteText(e.target.value)}
+                      />
+                    </div>
+                  </div>
+                </div>
+        
               <hr className='my-4 border-gray_r-6' />
 
               <button
diff --git a/src/lib/transaction/api/rejectProductApi.js b/src/lib/transaction/api/rejectProductApi.js
new file mode 100644
index 00000000..e03c7975
--- /dev/null
+++ b/src/lib/transaction/api/rejectProductApi.js
@@ -0,0 +1,9 @@
+import odooApi from '@/core/api/odooApi'
+
+const rejectProductApi = async ({ idSo, idProduct, reason }) => {
+  const dataCheckout = await odooApi('POST', `/api/v1/sale_order/${idSo}/reject/${idProduct}`, {
+    reason_reject: reason
+  });
+  return dataCheckout
+}
+export default rejectProductApi
\ No newline at end of file
diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx
index c6152ca9..9bef895a 100644
--- a/src/lib/transaction/components/Transaction.jsx
+++ b/src/lib/transaction/components/Transaction.jsx
@@ -1,4 +1,6 @@
 import Spinner from '@/core/components/elements/Spinner/Spinner';
+import NextImage from 'next/image';
+import rejectImage from "../../../../public/images/reject.png"
 import useTransaction from '../hooks/useTransaction';
 import TransactionStatusBadge from './TransactionStatusBadge';
 import Divider from '@/core/components/elements/Divider/Divider';
@@ -34,8 +36,14 @@ import useAuth from '@/core/hooks/useAuth';
 import StepApproval from './stepper';
 import aprpoveApi from '../api/approveApi';
 import rejectApi from '../api/rejectApi';
+import rejectProductApi from '../api/rejectProductApi';
+import { useRouter } from 'next/router';
 
 const Transaction = ({ id }) => {
+  const router = useRouter()
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [selectedProduct, setSelectedProduct] = useState(null);
+  const [reason, setReason] = useState('');
   const auth = useAuth();
   const { transaction } = useTransaction({ id });
 
@@ -141,6 +149,15 @@ const Transaction = ({ id }) => {
     [transaction.data]
   );
 
+  const memoizeVariantGroupCardReject = useMemo(
+    () => (
+      <div className='p-4 pt-0 flex flex-col gap-y-3'>
+        <VariantGroupCard variants={transaction.data?.productsRejectLine} buyMore />
+      </div>
+    ),
+    [transaction.data]
+  );
+
   if (transaction.isLoading) {
     return (
       <div className='flex justify-center my-6'>
@@ -153,6 +170,38 @@ const Transaction = ({ id }) => {
     setIdAWB(null);
   };
 
+  const openModal = (product) => {
+    setSelectedProduct(product);
+    setIsModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+    setSelectedProduct(null);
+    setReason('');
+  };
+
+  const handleRejectProduct = async () => {
+    try{
+      if (!reason.trim()) {
+        toast.error('Masukkan alasan terlebih dahulu');
+        return;
+      }else{
+        let idSo = transaction?.data.id
+        let idProduct = selectedProduct?.id
+        await rejectProductApi({ idSo, idProduct, reason}); 
+        closeModal();
+        toast.success("Produk berhasil di reject")
+        setTimeout(() => {
+          window.location.reload();
+        }, 1500); 
+      }
+    }catch(error){
+      toast.error('Gagal reject produk. Silakan coba lagi.');
+    }
+  };
+
+
   return (
     transaction.data?.name && (
       <>
@@ -301,6 +350,37 @@ const Transaction = ({ id }) => {
 
           <Divider />
 
+          <div className='p-4'>
+            <p className='font-medium'>Invoice</p>
+            <div className='flex flex-col gap-y-3 mt-4'>
+              {transaction.data?.invoices?.map((invoice, index) => (
+                <Link href={`/my/invoices/${invoice.id}`} key={index}>
+                  <div className='shadow rounded-md p-4 text-gray_r-12 font-normal flex justify-between'>
+                    <div>
+                      <p className='mb-2'>{invoice?.name}</p>
+                      <div className='flex items-center gap-x-1'>
+                        {invoice.amountResidual > 0 ? (
+                          <div className='badge-red'>Belum Lunas</div>
+                        ) : (
+                          <div className='badge-green'>Lunas</div>
+                        )}
+                        <p className='text-caption-2 text-gray_r-11'>
+                          {currencyFormat(invoice.amountTotal)}
+                        </p>
+                      </div>
+                    </div>
+                    <ChevronRightIcon className='w-5 stroke-2' />
+                  </div>
+                </Link>
+              ))}
+              {transaction.data?.invoices?.length === 0 && (
+                <div className='badge-red text-sm px-2'>Belum ada invoice</div>
+              )}
+            </div>
+          </div>
+
+          <Divider />
+
           {!auth?.feature.soApproval && (
             <div className='p-4 flex flex-col gap-y-4'>
               <DescriptionRow label='Purchase Order'>
@@ -326,8 +406,20 @@ const Transaction = ({ id }) => {
           <Divider />
 
           <div className='font-medium p-4'>Detail Produk</div>
+          {transaction?.data?.products.length > 0? (
+            <div>
+              {memoizeVariantGroupCard}
+            </div>
+          ) : (
+            <div className='badge-red text-sm px-2 ml-4'>Semua produk telah di reject</div>
+            )}
 
-          {memoizeVariantGroupCard}
+          {transaction?.data?.productsRejectLine.length > 0 && (
+            <div>
+              <div className='font-medium p-4'>Detail Produk Reject</div>
+              {memoizeVariantGroupCardReject}
+            </div>
+          )}
 
           <Divider />
 
@@ -335,37 +427,6 @@ const Transaction = ({ id }) => {
 
           <Divider />
 
-          <div className='p-4'>
-            <p className='font-medium'>Invoice</p>
-            <div className='flex flex-col gap-y-3 mt-4'>
-              {transaction.data?.invoices?.map((invoice, index) => (
-                <Link href={`/my/invoices/${invoice.id}`} key={index}>
-                  <div className='shadow rounded-md p-4 text-gray_r-12 font-normal flex justify-between'>
-                    <div>
-                      <p className='mb-2'>{invoice?.name}</p>
-                      <div className='flex items-center gap-x-1'>
-                        {invoice.amountResidual > 0 ? (
-                          <div className='badge-red'>Belum Lunas</div>
-                        ) : (
-                          <div className='badge-green'>Lunas</div>
-                        )}
-                        <p className='text-caption-2 text-gray_r-11'>
-                          {currencyFormat(invoice.amountTotal)}
-                        </p>
-                      </div>
-                    </div>
-                    <ChevronRightIcon className='w-5 stroke-2' />
-                  </div>
-                </Link>
-              ))}
-              {transaction.data?.invoices?.length === 0 && (
-                <div className='badge-red text-sm px-2'>Belum ada invoice</div>
-              )}
-            </div>
-          </div>
-
-          <Divider />
-
           <div className='p-4 pt-0'>
             {transaction.data?.status == 'draft' &&
               auth?.feature.soApproval && (
@@ -562,67 +623,100 @@ const Transaction = ({ id }) => {
                   />
                 </div>
               </div>
-
-              <div className='text-h-sm font-semibold mt-10 mb-4'>
-                Pengiriman
-              </div>
-              <div className='grid grid-cols-3 gap-1'>
-                {transaction?.data?.pickings?.map((airway) => (
-                  <button
-                    className='shadow rounded-md p-3 text-gray_r-12 font-normal flex justify-between items-center text-left'
-                    key={airway?.id}
-                    onClick={() => setIdAWB(airway?.id)}
-                  >
-                    <div>
-                      <span className='text-sm text-gray_r-11'>
-                        No Resi : {airway?.trackingNumber || '-'}{' '}
-                      </span>
-                      <p className='mt-1 font-medium'>{airway?.name}</p>
-                    </div>
-                    <div className='flex gap-x-2'>
-                      <div className='text-sm text-gray-600 badge-green leading-[1.5] mt-1'>
-                        {airway?.delivered ? 'Pesanan Tiba' : 'Sedang Dikirim'}
-                      </div>
-                      <ChevronRightIcon className='w-5 stroke-2' />
+              <div className='flex '>
+                <div className='w-1/2'>
+                  <div className='text-h-sm font-semibold mt-10 mb-4'>
+                    Pengiriman
+                  </div>
+                    {transaction?.data?.pickings.length == 0 && (
+                      <div className='badge-red text-sm'>Belum ada pengiriman</div>
+                    )}
+                  <div className='grid grid-cols-1 gap-1 w-2/3'>
+                    {transaction?.data?.pickings?.map((airway) => (
+                      <button
+                        className='shadow rounded-md p-3 text-gray_r-12 font-normal flex justify-between items-center text-left h-20'
+                        key={airway?.id}
+                        onClick={() => setIdAWB(airway?.id)}
+                      >
+                        <div>
+                          <span className='text-sm text-gray_r-11'>
+                            No Resi : {airway?.trackingNumber || '-'}{' '}
+                          </span>
+                          <p className='mt-1 font-medium'>{airway?.name}</p>
+                        </div>
+                        <div className='flex gap-x-2'>
+                          <div className='text-sm text-gray-600 badge-green leading-[1.5] mt-1'>
+                            {airway?.delivered ? 'Pesanan Tiba' : 'Sedang Dikirim'}
+                          </div>
+                          <ChevronRightIcon className='w-5 stroke-2' />
+                        </div>
+                      </button>
+                    ))}
+                  </div>
+                </div>
+                <div className='invoice w-1/2 '>
+                  <div className='text-h-sm font-semibold mt-10 mb-4 '>Invoice</div>
+                      {transaction.data?.invoices?.length === 0 && (
+                        <div className='badge-red text-sm'>Belum ada invoice</div>
+                      )}
+                    <div className='grid grid-cols-1 gap-1 w-2/3 '>
+                      {transaction.data?.invoices?.map((invoice, index) => (
+                        <Link href={`/my/invoices/${invoice.id}`} key={index}>
+                          <div className='shadow rounded-md p-4 text-gray_r-12 font-normal flex justify-between'>
+                            <div>
+                              <p className='mb-1'>{invoice?.name}</p>
+                              <div className='flex items-center gap-x-1'>
+                                {invoice.amountResidual > 0 ? (
+                                  <div className='badge-red'>Belum Lunas</div>
+                                ) : (
+                                  <div className='badge-green'>Lunas</div>
+                                )}
+                                <p className='text-caption-2 text-gray_r-11'>
+                                  {currencyFormat(invoice.amountTotal)}
+                                </p>
+                              </div>
+                            </div>
+                            <ChevronRightIcon className='w-5 stroke-2' />
+                          </div>
+                        </Link>
+                      ))}
                     </div>
-                  </button>
-                ))}
+                </div>
               </div>
-              {transaction?.data?.pickings.length == 0 && (
-                <div className='badge-red text-sm'>Belum ada pengiriman</div>
-              )}
 
-              <div className='text-h-sm font-semibold mt-10 mb-4'>
+              <div className='text-h-sm font-semibold mt-4 mb-4'>
                 Rincian Pembelian
               </div>
-              <table className='table-data'>
-                <thead>
-                  <tr>
-                    <th>Nama Produk</th>
-                    {/* <th>Diskon</th> */}
-                    <th>Jumlah</th>
-                    <th>Harga</th>
-                    <th>Subtotal</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {transaction?.data?.products?.map((product) => (
-                    <tr key={product.id}>
-                      <td className='flex'>
-                        <Link
-                          href={createSlug(
-                            '/shop/product/',
-                            product?.parent.name,
-                            product?.parent.id
-                          )}
-                          className='w-[20%] flex-shrink-0'
-                        >
+                {transaction?.data?.products?.length > 0? (
+                  <table className='table-data'>
+                    <thead>
+                      <tr>
+                        <th>Nama Produk</th>
+                        {/* <th>Diskon</th> */}
+                        <th>Jumlah</th>
+                        <th>Harga</th>
+                        <th>Subtotal</th>
+                        <th></th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                    {transaction?.data?.products?.map((product) => (
+                      <tr key={product.id}>
+                        <td className='flex'>
+                          <Link
+                            href={createSlug(
+                              '/shop/product/',
+                              product?.parent.name,
+                              product?.parent.id
+                            )}
+                            className='w-[20%] flex-shrink-0'
+                          >
                           <div className='relative'>
-                            <Image
-                              src={product?.parent?.image}
-                              alt={product?.name}
-                              className='object-contain object-center border border-gray_r-6 h-32 w-full rounded-md'
-                            />
+                              <Image
+                                src={product?.parent?.image}
+                                alt={product?.name}
+                                className='object-contain object-center border border-gray_r-6 h-32 w-full rounded-md'
+                              />
                             <div className='absolute top-0 right-4 flex  mt-3'>
                               <div className='gambarB '>
                                 {product.isSni && (
@@ -648,47 +742,92 @@ const Transaction = ({ id }) => {
                               </div>
                             </div>
                           </div>
-                        </Link>
-                        <div className='px-2 text-left'>
-                          <Link
-                            href={createSlug(
-                              '/shop/product/',
-                              product?.parent.name,
-                              product?.parent.id
-                            )}
-                            className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'
-                          >
-                            {product?.parent?.name}
                           </Link>
-                          <div className='text-gray_r-11 mt-2'>
-                            {product?.code}{' '}
-                            {product?.attributes.length > 0
-                              ? `| ${product?.attributes.join(', ')}`
-                              : ''}
-                          </div>
-                        </div>
-                      </td>
-                      {/* <td>
-                        {product.price.discountPercentage > 0
-                          ? `${product.price.discountPercentage}%`
-                          : ''}
-                      </td> */}
-                      <td>{product.quantity}</td>
-                      <td>
-                        {/* {product.price.discountPercentage > 0 && (
-                          <div className='line-through mb-1 text-caption-1 text-gray_r-12/70'>
-                            {currencyFormat(product.price.price)}
+                          <div className='px-2 text-left'>
+                            <Link
+                              href={createSlug(
+                                '/shop/product/',
+                                product?.parent.name,
+                                product?.parent.id
+                              )}
+                              className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'
+                            >
+                              {product?.parent?.name}
+                            </Link>
+                            <div className='text-gray_r-11 mt-2'>
+                              {product?.code}{' '}
+                              {product?.attributes.length > 0
+                                ? `| ${product?.attributes.join(', ')}`
+                                : ''}
+                            </div>
                           </div>
-                        )} */}
-                        <div>{currencyFormat(product.price.priceDiscount)}</div>
-                      </td>
-                      <td>{currencyFormat(product.price.subtotal)}</td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-
-              <div className='flex justify-end mt-4'>
+                        </td>
+                        {/* <td>
+                          {product.price.discountPercentage > 0
+                            ? `${product.price.discountPercentage}%`
+                            : ''}
+                        </td> */}
+                        <td>{product.quantity}</td>
+                        <td>
+                          {/* {product.price.discountPercentage > 0 && (
+                            <div className='line-through mb-1 text-caption-1 text-gray_r-12/70'>
+                              {currencyFormat(product.price.price)}
+                            </div>
+                          )} */}
+                          <div>{currencyFormat(product.price.priceDiscount)}</div>
+                        </td>
+                        <td>{currencyFormat(product.price.subtotal)}</td>
+                        {/* {auth?.feature.soApproval && (auth.webRole == 2 || auth.webRole == 3) && (transaction.data.isReaject == false) && ( */}
+                        {auth?.feature.soApproval && (auth.webRole == 2 || auth.webRole == 3) &&  (router.asPath.includes("/my/quotations/"))  && transaction.data?.status == 'draft' && (
+                          <td>
+                            <button
+                              className="bg-red-500 text-white py-1 px-3 rounded"
+                              onClick={() => openModal(product)}
+                            >
+                              Reject
+                            </button>
+                          </td>
+                        )}
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              ) : (
+                <div className='badge-red text-sm'>Semua produk telah di reject</div>
+              )}
+              
+              {isModalOpen && (
+                <div className='fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center'>
+                  <div className='bg-white p-4 rounded w-96
+                     ease-in-out opacity-100
+                    transform transition-transform duration-300  scale-100'>
+                    <h2 className='text-lg mb-2'>Berikan Alasan</h2>
+                    <textarea
+                      value={reason}
+                      onChange={(e) => setReason(e.target.value)}
+                      className='w-full p-2 border rounded'
+                      rows='4'
+                    ></textarea>
+                    <div className='mt-4 flex justify-end'>
+                      <button
+                        className='bg-gray-300 text-black py-1 px-3 rounded mr-2'
+                        onClick={closeModal}
+                      >
+                        Batal
+                      </button>
+                      <button
+                        className='bg-red-500 text-white py-1 px-3 rounded'
+                        onClick={handleRejectProduct}
+                      >
+                        Reject
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+            {transaction?.data?.products?.map((product) => (
+              <div className='flex justify-end mt-4' key={product.id}>
                 <div className='w-1/4 grid grid-cols-2 gap-y-3 text-gray_r-12/80'>
                   <div className='text-right'>Subtotal</div>
                   <div className='text-right font-medium'>
@@ -713,33 +852,91 @@ const Transaction = ({ id }) => {
                   </div>
                 </div>
               </div>
+            ))}
 
-              <div className='text-h-sm font-semibold mt-10 mb-4'>Invoice</div>
-              <div className='grid grid-cols-3 gap-4'>
-                {transaction.data?.invoices?.map((invoice, index) => (
-                  <Link href={`/my/invoices/${invoice.id}`} key={index}>
-                    <div className='shadow rounded-md p-4 text-gray_r-12 font-normal flex justify-between'>
-                      <div>
-                        <p className='mb-2'>{invoice?.name}</p>
-                        <div className='flex items-center gap-x-1'>
-                          {invoice.amountResidual > 0 ? (
-                            <div className='badge-red'>Belum Lunas</div>
-                          ) : (
-                            <div className='badge-green'>Lunas</div>
-                          )}
-                          <p className='text-caption-2 text-gray_r-11'>
-                            {currencyFormat(invoice.amountTotal)}
-                          </p>
-                        </div>
-                      </div>
-                      <ChevronRightIcon className='w-5 stroke-2' />
-                    </div>
-                  </Link>
-                ))}
-              </div>
-              {transaction.data?.invoices?.length === 0 && (
-                <div className='badge-red text-sm'>Belum ada invoice</div>
+
+
+              {transaction?.data?.productsRejectLine.length > 0 && (
+                  <div className='text-h-sm font-semibold mt-10 mb-4'>
+                    Rincian Produk Reject
+                  </div>
+              )}
+              {transaction?.data?.productsRejectLine.length > 0 && (
+                  <table className='table-data'>
+                    <thead>
+                      <tr>
+                        <th>Nama Produk</th>
+                        {/* <th>Diskon</th> */}
+                        <th>Jumlah</th>
+                        <th>Harga</th>
+                        <th>Subtotal</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {transaction?.data?.productsRejectLine?.map((product) => (
+                        <tr key={product.id}>
+                          <td className='flex'>
+                            <Link
+                              href={createSlug(
+                                '/shop/product/',
+                                product?.parent.name,
+                                product?.parent.id
+                              )}
+                              className='w-[20%] flex-shrink-0'
+                            >
+                              <Image
+                                src={product?.parent?.image}
+                                alt={product?.name}
+                                className='object-contain object-center border border-gray_r-6 h-32 w-full rounded-md'
+                              />
+                            </Link>
+                            <div className='px-2 text-left'>
+                              <Link
+                                href={createSlug(
+                                  '/shop/product/',
+                                  product?.parent.name,
+                                  product?.parent.id
+                                )}
+                                className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'
+                              >
+                                {product?.parent?.name}
+                              </Link>
+                              <div className='text-gray_r-11 mt-2'>
+                                {product?.code}{' '}
+                                {product?.attributes.length > 0
+                                  ? `| ${product?.attributes.join(', ')}`
+                                  : ''}
+                              </div>
+                            </div>
+                          </td>
+                          {/* <td>
+                            {product.price.discountPercentage > 0
+                              ? `${product.price.discountPercentage}%`
+                              : ''}
+                          </td> */}
+                          <td>{product.quantity}</td>
+                          <td>
+                            {/* {product.price.discountPercentage > 0 && (
+                              <div className='line-through mb-1 text-caption-1 text-gray_r-12/70'>
+                                {currencyFormat(product.price.price)}
+                              </div>
+                            )} */}
+                            <div>{currencyFormat(product.price.priceDiscount)}</div>
+                          </td>
+                          <td className='flex justify-center'>
+                            <NextImage
+                              src={rejectImage}
+                              alt='Reject'
+                              width={90}
+                              height={30}
+                            /> 
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
               )}
+                           
             </div>
           </div>
         </DesktopView>
diff --git a/src/lib/variant/components/VariantCard.jsx b/src/lib/variant/components/VariantCard.jsx
index 9f65fc3c..68cdf54f 100644
--- a/src/lib/variant/components/VariantCard.jsx
+++ b/src/lib/variant/components/VariantCard.jsx
@@ -1,18 +1,26 @@
 import { useRouter } from 'next/router'
 import { toast } from 'react-hot-toast'
-
+import useAuth from '@/core/hooks/useAuth';
 import Image from '@/core/components/elements/Image/Image'
 import Link from '@/core/components/elements/Link/Link'
 import { createSlug } from '@/core/utils/slug'
 import currencyFormat from '@/core/utils/currencyFormat'
 import { updateItemCart } from '@/core/utils/cart'
 import whatsappUrl from '@/core/utils/whatsappUrl'
+import {useState } from 'react';
+import rejectProductApi from '../../../lib/transaction/api/rejectProductApi'
+// import {useTransaction} from 'C:\Users\Indoteknik\next-indoteknik\src\lib\transaction\hooks\useTransaction.js'
+import useTransaction from '../../../lib/transaction/hooks/useTransaction';
 import ImageNext from 'next/image';
-import { useMemo, useEffect, useState } from 'react';
 
 const VariantCard = ({ product, openOnClick = true, buyMore = false }) => {
   const router = useRouter()
- 
+  const id = router.query.id
+  const auth = useAuth();
+  const { transaction } = useTransaction({id});
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [selectedProduct, setSelectedProduct] = useState(null);
+  const [reason, setReason] = useState(''); 
 
   
 
@@ -24,11 +32,42 @@ const VariantCard = ({ product, openOnClick = true, buyMore = false }) => {
     })
     return
   }
-
+  
   const checkoutItem = () => {
     router.push(`/shop/checkout?product_id=${product.id}&qty=${product.quantity}`)
   }
-
+  
+  const openModal = (product) => {
+    setSelectedProduct(product);
+    setIsModalOpen(true);
+  };
+  
+  const closeModal = () => {
+    setIsModalOpen(false);
+    setSelectedProduct(null);
+    setReason('');
+  };
+  
+  const handleRejectProduct = async () => {
+    try {
+      if (!reason.trim()) {
+        toast.error('Masukkan alasan terlebih dahulu');
+        return;
+      }else{
+        let idSo = transaction?.data.id
+        let idProduct = selectedProduct.id
+        await rejectProductApi({ idSo, idProduct, reason}); 
+        closeModal();
+        toast.success("Produk berhasil di reject")
+        setTimeout(() => {
+          window.location.reload();
+        }, 1500);
+      }
+    } catch (error) {
+      toast.error('Gagal reject produk. Silakan coba lagi.');
+    }
+  };
+  
   const Card = () => (
     <div className='flex gap-x-3'>
       <div className='w-4/12 flex items-center gap-x-2'>
@@ -115,7 +154,7 @@ const VariantCard = ({ product, openOnClick = true, buyMore = false }) => {
         <Link href={createSlug('/shop/product/', product.parent.name, product.parent.id)}>
           <Card />
         </Link>
-        {buyMore && (
+        {buyMore  && (!transaction?.data?.productsRejectLine.some(pr => pr.id === product.id)) && (
           <div className='flex justify-end gap-x-2 mb-2'>
             <button
               type='button'
@@ -124,14 +163,48 @@ const VariantCard = ({ product, openOnClick = true, buyMore = false }) => {
             >
               Tambah Keranjang
             </button>
-            <button
-              type='button'
-              onClick={checkoutItem}
-              className='btn-solid-red py-2 px-3 text-caption-1'
-            >
-              Beli Lagi
-            </button>
+            {/* {auth?.feature.soApproval && (auth.webRole == 2 || auth.webRole == 3) && (transaction.data.isReaject == false) && ( */}
+            {auth?.feature.soApproval && (auth.webRole == 2 || auth.webRole == 3) && (router.asPath.includes("/my/quotations/")) && (
+                      !transaction?.data?.productsRejectLine.some(pr => pr.id === product.id) && (
+                        <button
+                          className="bg-red-500 text-white py-1 px-3 rounded"
+                          onClick={() => openModal(product)}
+                        >
+                          Reject
+                        </button>
+                      )
+                    )}
+                      {isModalOpen && (
+                        <div className='fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center'>
+                          <div className='bg-white p-4 rounded w-96
+                            ease-in-out opacity-100
+                            transform transition-transform duration-300  scale-100'>
+                            <h2 className='text-lg mb-2'>Berikan Alasan</h2>
+                            <textarea
+                              value={reason}
+                              onChange={(e) => setReason(e.target.value)}
+                              className='w-full p-2 border rounded'
+                              rows='4'
+                            ></textarea>
+                            <div className='mt-4 flex justify-end'>
+                              <button
+                                className='bg-gray-300 text-black py-1 px-3 rounded mr-2'
+                                onClick={closeModal}
+                              >
+                                Batal
+                              </button>
+                              <button
+                                className='bg-red-500 text-white py-1 px-3 rounded'
+                                onClick={handleRejectProduct}
+                              >
+                                Reject
+                              </button>
+                            </div>
+                          </div>
+                        </div>
+                      )}
           </div>
+          
         )}
       </>
     )