<Miqdad> Show bayar sekarang in detail transaction

1 files changed, 165 insertions, 350 deletions

diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx
index 77e60dc1..cc5f862c 100644
--- a/src/lib/transaction/components/Transaction.jsx
+++ b/src/lib/transaction/components/Transaction.jsx
@@ -43,13 +43,14 @@ import { gtagPurchase } from '@/core/utils/googleTag';
 import { deleteItemCart } from '@/core/utils/cart';
 import {
   downloadInvoice,
-  downloadTaxInvoice,
+  // downloadTaxInvoice, // (unused)
 } from '@/lib/invoice/utils/invoices';
 import { Download } from 'lucide-react';
 import axios from 'axios';
 import InformationSection from '../../treckingAwb/component/InformationSection';
-import { Button } from '@chakra-ui/react';
-import { div } from 'lodash-contrib';
+// import { Button } from '@chakra-ui/react'; // (unused)
+// import { div } from 'lodash-contrib'; // (unused)
+
 const Transaction = ({ id }) => {
   const PPN = process.env.NEXT_PUBLIC_PPN;
   const router = useRouter();
@@ -73,6 +74,7 @@ const Transaction = ({ id }) => {
   const [toOthers, setToOthers] = useState(null);
   const [totalAmount, setTotalAmount] = useState(0);
   const [totalDiscountAmount, setTotalDiscountAmount] = useState(0);
+  const [contLoading, setContLoading] = useState(false);
 
   useEffect(() => {
     if (transaction?.data?.products) {
@@ -88,6 +90,7 @@ const Transaction = ({ id }) => {
       setTotalDiscountAmount(calculateTotalDiscountAmount);
     }
   }, [transaction.data, transaction.isLoading]);
+
   const submitUploadPo = async () => {
     const file = poFile.current.files[0];
     const name = poNumber.current.value;
@@ -127,10 +130,6 @@ const Transaction = ({ id }) => {
       }
     }
   };
-  // const ContinueTransaction = () => {
-  //   setContinueNoPo(true);
-  //   checkoutNoPO();
-  // };
   const closeCancelTransaction = () => setCancelTransaction(false);
   const closeContinueTransaction = () => setContinueTransaction(false);
 
@@ -138,6 +137,7 @@ const Transaction = ({ id }) => {
 
   const openRejectTransaction = () => setRejectTransaction(true);
   const closeRejectTransaction = () => setRejectTransaction(false);
+
   const submitCancelTransaction = async () => {
     const isCancelled = await cancelTransactionApi({
       transaction: transaction.data,
@@ -148,6 +148,7 @@ const Transaction = ({ id }) => {
     }
     closeCancelTransaction();
   };
+
   const checkout = async () => {
     if (!transaction.data?.purchaseOrderFile) {
       toast.error('Mohon upload dokumen PO anda sebelum melanjutkan pesanan');
@@ -194,25 +195,6 @@ const Transaction = ({ id }) => {
     }
     toast.success('Berhasil melanjutkan pesanan');
     transaction.refetch();
-    // console.log(transaction);
-
-    /* const midtrans = async () => {
-        for (const product of products) deleteItemCart({ productId: product.id });
-        if (grandTotal > 0) {
-          const payment = await axios.post(
-            `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/midtrans-payment?transactionId=${isCheckouted.id}`
-          );
-          setIsLoading(false);
-          window.location.href = payment.data.redirectUrl;
-        } else {
-          window.location.href = `${
-            process.env.NEXT_PUBLIC_SELF_HOST
-          }/shop/checkout/success?order_id=${isCheckouted.name.replace(
-            /\//g,
-            '-'
-          )}`;
-        }
-      };*/
   };
 
   const handleApproval = async () => {
@@ -227,6 +209,36 @@ const Transaction = ({ id }) => {
     transaction.refetch();
   };
 
+  // ===== Bayar Sekarang (pakai link dari backend; fallback generate via Next API) =====
+  const handlePayNow = async () => {
+    try {
+      setContLoading(true);
+      // 1) gunakan URL yang sudah dikirim backend (jika ada)
+      const existingUrl =
+        transaction?.data?.paymentSummary?.redirectUrl ||
+        transaction?.data?.paymentLinkMidtrans ||
+        '';
+      if (existingUrl) {
+        window.open(existingUrl, '_blank', 'noopener,noreferrer');
+        toast.success('Membuka halaman pembayaran…');
+        return;
+      }
+      // 2) fallback: panggil Next API untuk generate
+      const res = await axios.post(
+        `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/midtrans-payment?transactionId=${transaction.data.id}`
+      );
+      window.location.href = res.data.redirectUrl;
+    } catch (e) {
+      toast.error(
+        e?.response?.data?.description ||
+          e?.message ||
+          'Gagal membuka pembayaran'
+      );
+    } finally {
+      setContLoading(false);
+    }
+  };
+
   const memoizeVariantGroupCard = useMemo(
     () => (
       <div className='p-4 pt-0 flex flex-col gap-y-3'>
@@ -314,7 +326,7 @@ const Transaction = ({ id }) => {
     navigator.clipboard.writeText(textToCopy);
     setCopied(true);
     toast.success('No Resi Berhasil di Copy');
-    setTimeout(() => setCopied(false), 2000); // Reset copied state after 2 seconds
+    setTimeout(() => setCopied(false), 2000);
   };
 
   const formatDate = (dateString) => {
@@ -336,7 +348,7 @@ const Transaction = ({ id }) => {
     const [day, month, year] = dateString.split('/');
     return `${day} ${months[parseInt(month, 10) - 1]} ${year}`;
   };
-  // console.log(transaction);
+
   return (
     transaction.data?.name && (
       <>
@@ -366,6 +378,7 @@ const Transaction = ({ id }) => {
             </button>
           </div>
         </BottomPopup>
+
         <BottomPopup
           active={cancelTransaction}
           close={closeCancelTransaction}
@@ -488,12 +501,13 @@ const Transaction = ({ id }) => {
 
         <Manifest idAWB={idAWB} closePopup={closePopup}></Manifest>
 
+        {/* ============ MOBILE ============ */}
         <MobileView>
           <div className='px-4'>
             <div className='flex flex-row w-full justify-between items-center py-2 px-3 mb-4 text-sm border border-yellow-500 text-yellow-800 rounded-lg bg-yellow-50 gap-2'>
-              <div class='flex items-center w-full ' role='alert'>
+              <div className='flex items-center w-full ' role='alert'>
                 <svg
-                  class='flex-shrink-0 inline w-4 h-4 mr-2'
+                  className='flex-shrink-0 inline w-4 h-4 mr-2'
                   aria-hidden='true'
                   fill='currentColor'
                   viewBox='0 0 20 20'
@@ -514,6 +528,7 @@ const Transaction = ({ id }) => {
               </span>
             </div>
           </div>
+
           {auth?.feature?.soApproval && (
             <div className='p-4'>
               <StepApproval
@@ -559,7 +574,7 @@ const Transaction = ({ id }) => {
           <Divider />
 
           <div className='flex flex-col gap-y-4 p-4'>
-            <h4 className="font-semibold">Detail Order</h4>
+            <h4 className='font-semibold'>Detail Order</h4>
             <DescriptionRow label='No Transaksi'>
               <p className='font-semibold'>{transaction.data?.name}</p>
             </DescriptionRow>
@@ -579,9 +594,11 @@ const Transaction = ({ id }) => {
           <Divider />
 
           <div className='flex flex-col gap-y-4 p-4'>
-            <h4 className="font-semibold">Alamat Pengiriman</h4>
+            <h4 className='font-semibold'>Alamat Pengiriman</h4>
             <DescriptionRow label='Nama Penerima'>
-              <p className='font-semibold'>{transaction?.data?.address?.customer?.name}</p>
+              <p className='font-semibold'>
+                {transaction?.data?.address?.customer?.name}
+              </p>
             </DescriptionRow>
             <DescriptionRow label='No. Telp'>
               {transaction?.data?.address?.customer?.phone
@@ -602,9 +619,7 @@ const Transaction = ({ id }) => {
           <div className='p-4'>
             <div className='font-medium mb-4'>Info Pengiriman</div>
             {transaction?.data?.pickings.length == 0 && (
-              <div className='badge-red text-sm'>
-                Belum ada pengiriman
-              </div>
+              <div className='badge-red text-sm'>Belum ada pengiriman</div>
             )}
             {transaction?.data?.pickings?.map((airway) => (
               <div
@@ -627,28 +642,7 @@ const Transaction = ({ id }) => {
                   </button>
                 </div>
               </div>
-              // <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>
 
           <Divider />
@@ -717,17 +711,20 @@ const Transaction = ({ id }) => {
           <div className='font-medium p-4'>Detail Produk</div>
           {transaction?.data?.products.length > 0 ? (
             <div className='p-4 pt-0 flex flex-col gap-y-3'>
-              <VariantGroupCard variants={transaction.data?.products}/>
+              <VariantGroupCard variants={transaction.data?.products} />
               <div className='font-medium'>Rincian Pembayaran</div>
               <div className='flex justify-between mt-1'>
                 <p className='text-gray_r-12/70'>Metode Pembayaran</p>
-                <p>
-                   {transaction.data?.paymentTerm || '-'}
-                </p>
+                <p>{transaction.data?.paymentTerm || '-'}</p>
               </div>
               <div className='flex justify-between mt-1'>
                 <p className='text-gray_r-12/70'>Berat Barang</p>
-                <p>{(transaction.data?.products?.reduce((total, item) => total + (item.weight || 0), 0)) + ' Kg'}</p>
+                <p>
+                  {transaction.data?.products?.reduce(
+                    (total, item) => total + (item.weight || 0),
+                    0
+                  ) + ' Kg'}
+                </p>
               </div>
               <hr className='mt-1 border border-gray-100' />
               <div className='flex justify-between mt-1'>
@@ -774,12 +771,7 @@ const Transaction = ({ id }) => {
             </div>
           )}
 
-          {/* <Divider /> */}
-
-          {/* <SectionAddress address={transaction.data?.address} /> */}
-
-          {/* <Divider /> */}
-
+          {/* Tombol aksi (Mobile) */}
           {transaction.data?.status === 'draft' && (
             <div className='p-4 pt-0'>
               <button
@@ -796,18 +788,33 @@ const Transaction = ({ id }) => {
                 Batalkan Transaksi
               </button>
               {transaction.data?.status == 'draft' &&
-              transaction?.data?.purchaseOrderFile && (
-                <button
-                  className='btn-yellow w-full mt-4'
-                  onClick={openContinueTransaction}
-                >
-                  Lanjutkan Transaksi
-                </button>
-              )}
+                transaction?.data?.purchaseOrderFile && (
+                  <button
+                    className='btn-yellow w-full mt-4'
+                    onClick={openContinueTransaction}
+                  >
+                    Lanjutkan Transaksi
+                  </button>
+                )}
+            </div>
+          )}
+
+          {/* Bayar Sekarang (Mobile) — tampil jika eligible */}
+          {transaction.data?.eligibleContinue && (
+            <div className='p-4 pt-0'>
+              <button
+                type='button'
+                disabled={contLoading}
+                onClick={handlePayNow}
+                className='w-full py-2 text-center rounded-md border border-red-500 text-red-500 bg-white disabled:opacity-60'
+              >
+                {contLoading ? 'Memproses…' : 'Bayar Sekarang'}
+              </button>
             </div>
           )}
         </MobileView>
 
+        {/* ============ DESKTOP ============ */}
         <DesktopView>
           <div className='container mx-auto flex py-10'>
             <div className='w-3/12 pr-4'>
@@ -827,44 +834,36 @@ const Transaction = ({ id }) => {
                 )}
               </div>
 
-              {/*new-release*/}
-              {/*<div className='flex items-center justify-between mb-3'>*/}
-              {/*  <div className='flex items-center gap-x-2'>*/}
-              {/*    <span className='text-h-sm font-medium'>*/}
-              {/*      {transaction?.data?.name}*/}
-              {/*    </span>*/}
-              {/*    <TransactionStatusBadge status={transaction?.data?.status} />*/}
-              {/*  </div>*/}
-              {/*  <div className='text-h-sm'>*/}
-              {/*    Estimasi Barang Siap:{' '}*/}
-              {/*    <span className='text-red-500 font-semibold'>*/}
-              {/*      {transaction?.data?.expectedReadyToShip}*/}
-              {/*    </span>*/}
-              {/*  </div>*/}
-              <div className='flex items-center gap-x-2 mb-3'>
-                <span className='text-h-sm font-medium'>
-                  {transaction?.data?.name}
-                </span>
-                <TransactionStatusBadge status={transaction?.data?.status} />
-                {transaction.data?.status === 'draft' && (
-                  <div className='flex items-center justify-between w-full'>
-                    <button
-                      type='button'
-                      className='btn-light px-3 py-2'
-                      onClick={() => downloadQuotation(transaction.data)}
-                    >
-                      <Download size={12} />
-                    </button>
+              {/* HEADER (Desktop) — sejajarkan kiri & kanan */}
+              <div className='flex items-center justify-between gap-3 mb-3'>
+                {/* Kiri: SO + badge */}
+                <div className='flex items-center gap-x-2 min-w-0'>
+                  <span className='text-h-sm font-medium truncate'>
+                    {transaction?.data?.name}
+                  </span>
+                  <TransactionStatusBadge status={transaction?.data?.status} />
+                </div>
+
+                {/* Kanan: aksi */}
+                <div className='flex items-center gap-3'>
+                  {transaction.data?.status === 'draft' && (
+                    <>
+                      <button
+                        type='button'
+                        className='btn-light px-3 py-2'
+                        onClick={() => downloadQuotation(transaction.data)}
+                      >
+                        <Download size={12} />
+                      </button>
 
-                    <div className="flex gap-x-4">
                       <button
                         className='btn-solid-red'
                         onClick={openCancelTransaction}
                       >
                         Batalkan Transaksi
                       </button>
-                      {transaction.data?.status == 'draft' &&
-                      transaction?.data?.purchaseOrderFile && (
+
+                      {transaction?.data?.purchaseOrderFile && (
                         <button
                           className='btn-yellow'
                           onClick={openContinueTransaction}
@@ -872,37 +871,20 @@ const Transaction = ({ id }) => {
                           Lanjutkan Transaksi
                         </button>
                       )}
-                    </div>
-                  </div>
-                )}
-              </div>
-              {/* {transaction.data?.status === 'draft' && (
-                <div className='flex gap-x-4'>
-                  <button
-                    type='button'
-                    className='btn-light px-3 py-2 mr-auto'
-                    onClick={() => downloadQuotation(transaction.data)}
-                  >
-                    <Download size={12} />
-                  </button>
-                  <button
-                    className='btn-solid-red'
-                    onClick={openCancelTransaction}
-                  >
-                    Batalkan Transaksi
-                  </button>
-                    
-                {transaction.data?.status == 'draft' &&
-                transaction?.data?.purchaseOrderFile && (
-                  <button
-                    className='btn-yellow'
-                    onClick={openContinueTransaction}
-                  >
-                    Lanjutkan Transaksi
-                  </button>
-                )}
+                    </>
+                  )}
+
+                  {transaction.data?.eligibleContinue && (
+                    <button
+                      className='px-4 py-2 rounded-md border border-red-500 text-red-500 bg-white disabled:opacity-60 mb-3'
+                      disabled={contLoading}
+                      onClick={handlePayNow}
+                    >
+                      {contLoading ? 'Memproses…' : 'Bayar Sekarang'}
+                    </button>
+                  )}
                 </div>
-              )} */}
+              </div>
 
               <div className='grid grid-cols-2 gap-x-6 mt-4'>
                 <div className='grid grid-cols-[35%_65%] gap-y-4'>
@@ -967,29 +949,13 @@ const Transaction = ({ id }) => {
                             key={index}
                           >
                             {invoice?.name}
-                            {/* <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>
                 </div>
               </div>
               <hr className='mt-4 mb-4 border border-gray-100' />
-              {/* <div className='grid grid-cols-2 gap-x-6'> */}
+
               <div className='flex flex-row justify-between items-start w-full h-fit '>
                 <div className='flex flex-col w-1/2 justify-start items-start'>
                   <span className='text-h-sm font-medium mb-2'>
@@ -1039,17 +1005,17 @@ const Transaction = ({ id }) => {
                     ) : (
                       '-'
                     )}
-                    {transaction?.data?.carrierId !== 32 &&(
-                    <>
-                      <div>Jenis Service</div>
-                      <div>: </div>
-                      <div>
-                        {' '}
-                        {transaction?.data?.serviceType
-                          ? transaction?.data?.serviceType
-                          : '-'}
-                      </div>
-                    </>
+                    {transaction?.data?.carrierId !== 32 && (
+                      <>
+                        <div>Jenis Service</div>
+                        <div>: </div>
+                        <div>
+                          {' '}
+                          {transaction?.data?.serviceType
+                            ? transaction?.data?.serviceType
+                            : '-'}
+                        </div>
+                      </>
                     )}
 
                     <div>Estimasi Tanggal Kirim</div>
@@ -1059,41 +1025,42 @@ const Transaction = ({ id }) => {
                         ? transaction?.data?.expectedReadyToShip
                         : '-'}
                     </div>
-                    {transaction?.data?.carrierId !== 32 &&(
-                    <>
-                      <div>Estimasi Tiba</div>
-                      <div>: </div>
-                      <div className=''>
-                          {transaction?.data?.etaDateStart && transaction?.data?.etaDateEnd ? (
-                            `${transaction.data.etaDateStart} - ${transaction.data.etaDateEnd}`
-                          ) : (
-                            '-'
-                          )}
-                      </div>
-                    </>
+                    {transaction?.data?.carrierId !== 32 && (
+                      <>
+                        <div>Estimasi Tiba</div>
+                        <div>: </div>
+                        <div className=''>
+                          {transaction?.data?.etaDateStart &&
+                          transaction?.data?.etaDateEnd
+                            ? `${transaction.data.etaDateStart} - ${transaction.data.etaDateEnd}`
+                            : '-'}
+                        </div>
+                      </>
                     )}
-                    {transaction?.data?.pickings[0] && transaction?.data?.carrierId !== 32 && (
-                      <div className='w-full bagian-informasi col-span-3'>
-                        <div
-                          class='flex items-center w-fit py-2 px-3 mb-4 text-sm border border-yellow-500 text-yellow-800 rounded-lg bg-yellow-50'
-                          role='alert'
-                        >
-                          <svg
-                            class='flex-shrink-0 inline w-4 h-4 mr-2'
-                            aria-hidden='true'
-                            fill='currentColor'
-                            viewBox='0 0 20 20'
+                    {transaction?.data?.pickings[0] &&
+                      transaction?.data?.carrierId !== 32 && (
+                        <div className='w-full bagian-informasi col-span-3'>
+                          <div
+                            className='flex items-center w-fit py-2 px-3 mb-4 text-sm border border-yellow-500 text-yellow-800 rounded-lg bg-yellow-50'
+                            role='alert'
                           >
-                            <path d='M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z' />
-                          </svg>
-                          <div className='text-justify flex flex-col gap-1'>
-                            <span className='text-black text-xs'>
-                              Pesanan anda mungkin mengalami keterlambatan tiba
-                            </span>
+                            <svg
+                              className='flex-shrink-0 inline w-4 h-4 mr-2'
+                              aria-hidden='true'
+                              fill='currentColor'
+                              viewBox='0 0 20 20'
+                            >
+                              <path d='M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z' />
+                            </svg>
+                            <div className='text-justify flex flex-col gap-1'>
+                              <span className='text-black text-xs'>
+                                Pesanan anda mungkin mengalami keterlambatan
+                                tiba
+                              </span>
+                            </div>
                           </div>
                         </div>
-                      </div>
-                    )}
+                      )}
                   </div>
                 </div>
               </div>
@@ -1103,9 +1070,7 @@ const Transaction = ({ id }) => {
               </div>
               <div className='grid grid-cols-1 md:grid-cols-2 gap-3'>
                 {transaction?.data?.pickings.length == 0 && (
-                  <div className='badge-red text-sm'>
-                    Belum ada pengiriman
-                  </div>
+                  <div className='badge-red text-sm'>Belum ada pengiriman</div>
                 )}
                 {transaction?.data?.pickings?.map((airway) => (
                   <div
@@ -1129,39 +1094,9 @@ const Transaction = ({ id }) => {
                     </div>
                   </div>
                 ))}
-                {/* </div> */}
-              
               </div>
 
               <div className='flex '>
-                {/*New release*/}
-                {/*  <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>*/}
-                {/*          <p className='text-sm text-gray_r-11'>*/}
-                {/*            {airway?.name}*/}
-                {/*          </p>*/}
-                {/*          <span className='text-md text-bold mt-1'>*/}
-                {/*            No Resi : {airway?.trackingNumber || '-'}{' '}*/}
-                {/*          </span>*/}
-                {/*        </div>*/}
-                {/*        <div className='flex gap-x-2'>*/}
-                {/*          <div className='text-sm text-gray-600 badge-green leading-[1.5] mt-1 text-center'>*/}
-                {/*            {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
@@ -1202,7 +1137,6 @@ const Transaction = ({ id }) => {
                   <thead>
                     <tr>
                       <th>Nama Produk</th>
-                      {/* <th>Diskon</th> */}
                       <th>Jumlah</th>
                       <th>Harga</th>
                       <th>Subtotal</th>
@@ -1280,24 +1214,13 @@ const Transaction = ({ id }) => {
                             )}
                           </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>{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/') &&
@@ -1354,34 +1277,6 @@ const Transaction = ({ id }) => {
               )}
 
               {transaction?.data?.products?.length > 0 && (
-                // <div className='flex justify-end mt-4'>
-                //   <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'>
-                //       {currencyFormat(transaction.data?.amountUntaxed)}
-                //     </div>
-
-                //     <div className='text-right'>
-                //       PPN {((PPN - 1) * 100).toFixed(0)}%
-                //     </div>
-                //     <div className='text-right font-medium'>
-                //       {currencyFormat(transaction.data?.amountTax)}
-                //     </div>
-
-                //     <div className='text-right whitespace-nowrap'>
-                //       Biaya Pengiriman
-                //     </div>
-                //     <div className='text-right font-medium'>
-                //       {currencyFormat(transaction.data?.deliveryAmount)}
-                //     </div>
-
-                //     <div className='text-right'>Grand Total</div>
-                //     <div className='text-right font-medium text-gray_r-12'>
-                //       {currencyFormat(transaction.data?.amountTotal)}
-                //     </div>
-                //   </div>
-                // </div>
-
                 <div className='flex justify-end mt-4 flex-col items-end'>
                   <div className='w-1/4 grid grid-cols-2 gap-y-3 text-gray_r-12/80'>
                     <div className='text-right'>Total Belanja</div>
@@ -1437,7 +1332,6 @@ const Transaction = ({ id }) => {
                   <thead>
                     <tr>
                       <th>Nama Produk</th>
-                      {/* <th>Diskon</th> */}
                       <th>Jumlah</th>
                       <th>Harga</th>
                       <th>Subtotal</th>
@@ -1480,18 +1374,8 @@ const Transaction = ({ id }) => {
                             </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>
@@ -1512,58 +1396,6 @@ const Transaction = ({ id }) => {
             </div>
           </div>
         </DesktopView>
-
-        {/* {queryAirwayBill.data?.airways?.map((airway) => (
-          <BottomPopup
-            key={airway.waybillNumber}
-            title='Detail Pengiriman'
-            active={airwayBillPopup == airway.waybillNumber}
-            close={() => setAirwayBillPopup(null)}
-          >
-            <div className='flex flex-col gap-y-4 my-4'>
-              <div className='flex justify-between'>
-                <div className='text-gray_r-11'>No Pengiriman</div>
-                <div>{airway?.deliveryOrder?.name}</div>
-              </div>
-              <div className='flex justify-between'>
-                <div className='text-gray_r-11'>Kurir</div>
-                <div>{airway?.deliveryOrder?.carrier}</div>
-              </div>
-              <div className='flex justify-between'>
-                <div className='text-gray_r-11'>No Resi</div>
-                <div>{airway?.waybillNumber}</div>
-              </div>
-            </div>
-
-            <div className='pt-4'>
-              <div className='font-semibold text-body-1 mb-4'>Status Pengiriman</div>
-              <ol class='relative border-l border-gray_r-7'>
-                {airway?.manifests?.map((manifest, index) => (
-                  <li class='mb-6 ml-4' key={index}>
-                    <div
-                      class={`absolute w-3 h-3 rounded-full mt-1.5 -left-1.5 border ${
-                        index == 0 ? 'bg-red-600 border-red-600' : 'bg-gray_r-7 border-white'
-                      }`}
-                    />
-                    <time class='text-sm leading-none text-gray-400'>
-                      {manifest.datetime}
-                    </time>
-                    <p
-                      class={`leading-6 font-medium text-body-2 mt-2 ${
-                        index == 0 ? 'text-red-600' : 'text-gray_r-11'
-                      }`}
-                    >
-                      {manifest.description}
-                    </p>
-                  </li>
-                ))}
-                {(!airway?.manifests || airway?.manifests?.length == 0) && (
-                  <div className='badge-red text-sm'>Belum ada pengiriman</div>
-                )}
-              </ol>
-            </div>
-          </BottomPopup>
-        ))} */}
       </>
     )
   );
@@ -1589,24 +1421,7 @@ const SectionAddress = ({ address }) => {
 
       {section.customer && <SectionContent address={address?.customer} />}
 
-      {/* <Divider />
-
-      <SectionButton
-        label='Detail Pengiriman'
-        active={section.shipping}
-        toggle={() => toggleSection('shipping')}
-      />
-
-      {section.shipping && <SectionContent address={address?.shipping} />}
-
-      <Divider />
-
-      <SectionButton
-        label='Detail Penagihan'
-        active={section.invoice}
-        toggle={() => toggleSection('invoice')}
-      />
-      {section.invoice && <SectionContent address={address?.invoice} />} */}
+      {/* Bagian shipping/invoice disembunyikan */}
     </>
   );
 };