no message

1 files changed, 69 insertions, 33 deletions

diff --git a/src/pages/my/transactions.js b/src/pages/my/transactions.js
index a03ff007..6eb0fb4e 100644
--- a/src/pages/my/transactions.js
+++ b/src/pages/my/transactions.js
@@ -1,9 +1,8 @@
 import { useRouter } from "next/router";
 import AppBar from "@/components/layouts/AppBar";
-import BottomPopup from "@/components/elements/BottomPopup";
 import Layout from "@/components/layouts/Layout";
 import WithAuth from "@/components/auth/WithAuth";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useAuth } from "@/core/utils/auth";
 import apiOdoo from "@/core/utils/apiOdoo";
 import currencyFormat from "@/core/utils/currencyFormat";
@@ -12,6 +11,9 @@ import Link from "@/components/elements/Link";
 import Pagination from "@/components/elements/Pagination";
 import Alert from "@/components/elements/Alert";
 import TransactionStatusBadge from "@/components/transactions/TransactionStatusBadge";
+import { toast } from "react-hot-toast";
+import useConfirmAlert from "@/lib/elements/hooks/useConfirmAlert";
+import useBottomPopup from "@/lib/elements/hooks/useBottomPopup";
 
 export default function Transactions() {
   const [ auth ] = useAuth();
@@ -22,31 +24,30 @@ export default function Transactions() {
   } = router.query;
 
   const [ transactions, setTransactions ] = useState([]);
-  const [ activePopupId, setActivePopupId ] = useState(null);
 
   const [ pageCount, setPageCount ] = useState(0);
   const [ isLoading, setIsLoading ] = useState(true);
 
   const searchQueryRef = useRef();
+  const loadTransactions = useCallback(async () => {
+    if (auth) {
+      const limit = 10;
+      let offset = (page - 1) * 10;
+      let queryParams = [`limit=${limit}`, `offset=${offset}`];
+      if (q) queryParams.push(`name=${q}`);
+      queryParams = queryParams.join('&');
+      queryParams = queryParams ? '?' + queryParams : '';
+
+      const dataTransactions = await apiOdoo('GET', `/api/v1/partner/${auth.partner_id}/sale_order${queryParams}`);
+      setTransactions(dataTransactions);
+      setPageCount(Math.ceil(dataTransactions?.sale_order_total / limit));
+      setIsLoading(false);
+    };
+  }, [ auth, q, page ]);
 
   useEffect(() => {
-    const loadTransactions = async () => {
-      if (auth) {
-        const limit = 10;
-        let offset = (page - 1) * 10;
-        let queryParams = [`limit=${limit}`, `offset=${offset}`];
-        if (q) queryParams.push(`name=${q}`);
-        queryParams = queryParams.join('&');
-        queryParams = queryParams ? '?' + queryParams : '';
-
-        const dataTransactions = await apiOdoo('GET', `/api/v1/partner/${auth.partner_id}/sale_order${queryParams}`);
-        setTransactions(dataTransactions);
-        setPageCount(Math.ceil(dataTransactions?.sale_order_total / limit));
-        setIsLoading(false);
-      };
-    }
     loadTransactions();
-  }, [ auth, q, page ]);
+  }, [ loadTransactions ]);
 
   const actionSearch = (e) => {
     e.preventDefault();
@@ -57,6 +58,51 @@ export default function Transactions() {
     router.push(`/my/transactions${queryParams}`);
   };
 
+  const childrenPopup = (data) => (
+    <div className="flex flex-col gap-y-6">
+      <button 
+        className="text-left"
+      >
+        Download Quotation
+      </button>
+      <button 
+        className="text-left disabled:opacity-70" 
+        disabled={ data?.status != 'waiting' }
+        onClick={() => {openConfirmAlert(data); closePopup()}}
+      >
+        Batalkan Transaksi
+      </button>
+    </div>
+  );
+
+  const {
+    closePopup,
+    openPopup,
+    BottomPopup
+  } = useBottomPopup({
+    title: 'Lainnya',
+    children: childrenPopup
+  });
+
+  const submitCancelTransaction = async (data) => {
+    const isCancelled = await apiOdoo('POST', `/api/v1/partner/${auth.partner_id}/sale_order/${data.id}/cancel`);
+    if (isCancelled) {
+      toast.success('Berhasil batalkan transaksi');
+      loadTransactions();
+    }
+  }
+
+  const {
+    openConfirmAlert,
+    ConfirmAlert
+  } = useConfirmAlert({
+    title: 'Batalkan Transaksi',
+    caption: 'Apakah anda yakin untuk membatalkan transaksi?',
+    closeText: 'Tidak',
+    submitText: 'Iya, batalkan',
+    onSubmit: submitCancelTransaction
+  });
+
   return (
     <WithAuth>
       <Layout>
@@ -90,7 +136,7 @@ export default function Transactions() {
                 </Link>
                 <div className="flex gap-x-1 justify-end">
                   <TransactionStatusBadge status={transaction.status} />
-                  <EllipsisVerticalIcon className="w-5 h-5" onClick={() => setActivePopupId(transaction.id)} />
+                  <EllipsisVerticalIcon className="w-5 h-5" onClick={() => openPopup(transaction)} />
                 </div>
               </div>
               <Link href={`/my/transaction/${transaction.id}`}>
@@ -122,19 +168,9 @@ export default function Transactions() {
         <div className="pb-6 pt-2">
           <Pagination currentPage={page} pageCount={pageCount} url={`/my/transactions${q ? `?q=${q}` : ''}`} />
         </div>
-        
-        { transactions?.sale_orders?.length > 0 && (
-          <BottomPopup 
-            title="Lainnya"
-            active={activePopupId} 
-            closePopup={() => setActivePopupId(null)}
-          >
-            <div className="flex flex-col gap-y-4">
-              <p>Download Quotation</p>
-              <p>Batalkan Transaksi</p>
-            </div>
-          </BottomPopup>
-        ) }
+
+        { ConfirmAlert }
+        { BottomPopup }
       </Layout>
     </WithAuth>
   );