Detail transaction list

7 files changed, 123 insertions, 25 deletions

diff --git a/src/components/BottomPopup.js b/src/components/BottomPopup.js
new file mode 100644
index 00000000..b7f5f2de
--- /dev/null
+++ b/src/components/BottomPopup.js
@@ -0,0 +1,25 @@
+import CloseIcon from "../icons/close.svg";
+
+const BottomPopup = ({ 
+  active = false, 
+  title, 
+  children, 
+  closePopup = () => {}
+}) => {
+  return (
+    <>
+      <div className={"menu-overlay " + (active ? 'block' : 'hidden')} onClick={closePopup} />
+      <div className={`fixed w-full z-[60] py-6 px-4 bg-white rounded-t-3xl idt-transition ${active ? 'bottom-0' : 'bottom-[-100%]'}`}>
+        <div className="flex justify-between items-center mb-5">
+          <h2 className="text-xl font-semibold">{ title }</h2>
+          <button onClick={closePopup}>
+            <CloseIcon className="w-7" />
+          </button>
+        </div>
+        { children }
+      </div>
+    </>
+  );
+};
+
+export default BottomPopup;
\ No newline at end of file
diff --git a/src/components/Filter.js b/src/components/Filter.js
index 92a28e09..f2051ba8 100644
--- a/src/components/Filter.js
+++ b/src/components/Filter.js
@@ -1,6 +1,6 @@
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
-import CloseIcon from "../icons/close.svg";
+import BottomPopup from "./BottomPopup";
 
 const Filter = ({ 
   isActive,
@@ -104,14 +104,7 @@ const Filter = ({
 
   return (
     <>
-      <div className={"menu-overlay " + (isActive ? 'block' : 'hidden')} onClick={closeFilter} />
-      <div className={`fixed w-full z-[60] py-6 px-4 bg-white rounded-t-3xl idt-transition ${isActive ? 'bottom-0' : 'bottom-[-100%]'}`}>
-        <div className="flex justify-between items-center mb-5">
-          <h2 className="text-xl font-semibold">Filter Produk</h2>
-          <button onClick={closeFilter}>
-            <CloseIcon className="w-7" />
-          </button>
-        </div>
+      <BottomPopup active={isActive} closePopup={closeFilter} title="Filter Produk">
         <form className="flex flex-col gap-y-4" onSubmit={submit}>
           {(selectedBrand || selectedCategory || priceFrom || priceTo || orderBy) && (
             <button type="button" className="text-yellow_r-11 font-semibold ml-auto" onClick={reset}>
@@ -175,7 +168,7 @@ const Filter = ({
             Terapkan Filter
           </button>
         </form>
-      </div>
+      </BottomPopup>
     </>
   )
 };
diff --git a/src/components/Layout.js b/src/components/Layout.js
index 24017c03..fd507963 100644
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
@@ -8,9 +8,9 @@ export default function Layout({ children, ...pageProps }) {
 
   return children && (
     <motion.main
-      initial={{ opacity: 0, x: 50, y: 0 }}
+      initial={{ opacity: 0, x: 30, y: 0 }}
       animate={{ opacity: 1, x: 0, y: 0 }}
-      exit={{ opacity: 0, x: 100, y: 0 }}
+      exit={{ opacity: 0, x: 30, y: 0 }}
       transition={transition}
       {...pageProps}
     >
diff --git a/src/pages/my/address/[id]/edit.js b/src/pages/my/address/[id]/edit.js
index 13f166ab..e65ba699 100644
--- a/src/pages/my/address/[id]/edit.js
+++ b/src/pages/my/address/[id]/edit.js
@@ -37,7 +37,7 @@ export async function getServerSideProps( context ) {
     mobile: address.mobile,
     street: address.street,
     zip: address.zip,
-    city: address.city?.id,
+    city: address.city?.id || '',
     oldDistrict: address.district?.id || '',
     district: '',
     oldSubDistrict: address.sub_district?.id || '',
diff --git a/src/pages/my/menu.js b/src/pages/my/menu.js
index 0db6b011..f43c1fe9 100644
--- a/src/pages/my/menu.js
+++ b/src/pages/my/menu.js
@@ -43,7 +43,11 @@ export default function MyMenu() {
             </div>
             <div>
               <h2>{ auth?.name }</h2>
-              <div className="badge-red font-normal text-xs">Akun Bisnis</div>
+              { auth?.company ? (
+                <div className="badge-red font-normal text-xs">Akun Bisnis</div>
+                ) : (
+                <div className="badge-gray font-normal text-xs">Akun Individu</div>
+              ) }
             </div>
           </div>
           <Link href="/my/profile">
diff --git a/src/pages/my/transactions/index.js b/src/pages/my/transactions/index.js
new file mode 100644
index 00000000..eb5f99a1
--- /dev/null
+++ b/src/pages/my/transactions/index.js
@@ -0,0 +1,76 @@
+import { useRouter } from "next/router";
+import AppBar from "../../../components/AppBar";
+import BottomPopup from "../../../components/BottomPopup";
+import Layout from "../../../components/Layout";
+import WithAuth from "../../../components/WithAuth";
+import { useEffect, useState } from "react";
+import { useAuth } from "../../../helpers/auth";
+import apiOdoo from "../../../helpers/apiOdoo";
+import currencyFormat from "../../../helpers/currencyFormat";
+import { EllipsisVerticalIcon } from "@heroicons/react/24/outline";
+
+export default function Transactions() {
+  const [ auth ] = useAuth();
+  const router = useRouter();
+
+  const [ transactions, setTransactions ] = useState([]);
+  const [ activePopupId, setActivePopupId ] = useState(null);
+
+  useEffect(() => {
+    const loadTransactions = async () => {
+      if (auth) {
+        const dataTransactions = await apiOdoo('GET', `/api/v1/sale_order?partner_id=${auth?.partner_id}`);
+        setTransactions(dataTransactions);
+      };
+    }
+    loadTransactions();
+  }, [ auth ]);
+
+  return (
+    <WithAuth>
+      <Layout>
+        <AppBar title="Daftar Transaksi" />
+
+        <div className="p-4 flex flex-col gap-y-4">
+          { transactions?.sale_orders?.map((transaction, index) => (
+            <div className="p-4 border border-gray_r-7 rounded-md" key={index}>
+              <div className="flex justify-between">
+                <div>
+                  <span className="text-caption-2 text-gray_r-11">No. Transaksi</span>
+                  <h2 className="text-red_r-11 mt-1">{ transaction.name }</h2>
+                </div>
+                <div className="flex gap-x-1">
+                  <div className="badge-green h-fit">Pending</div>
+                  <EllipsisVerticalIcon className="w-5 h-5" onClick={() => setActivePopupId(transaction.id)} />
+                </div>
+              </div>
+              <div className="flex mt-2 justify-between">
+                <div>
+                  <span className="text-caption-2 text-gray_r-11">Dilayani Oleh</span>
+                  <p className="mt-1 font-medium">{ transaction.sales }</p>
+                </div>
+                <div className="text-right">
+                  <span className="text-caption-2 text-gray_r-11">Total Harga</span>
+                  <p className="mt-1 font-medium">{ currencyFormat(transaction.amount_total) }</p>
+                </div>
+              </div>
+            </div>
+          )) }
+        </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>
+        ) }
+      </Layout>
+    </WithAuth>
+  );
+};
\ No newline at end of file
diff --git a/src/pages/shop/checkout.js b/src/pages/shop/checkout.js
index 7b37eaad..424b903d 100644
--- a/src/pages/shop/checkout.js
+++ b/src/pages/shop/checkout.js
@@ -122,8 +122,8 @@ export default function Checkout() {
       'partner_invoice_id': selectedAddress.invoicing.id,
       'order_line': JSON.stringify(productOrder)
     };
-    if (auth?.company && (!poNumber || !poFile)) {
-      toast.error('Mohon isi nomor dan file PO', {
+    if (auth?.company && !poFile) {
+      toast.error('Mohon isi file PO', {
         position: 'bottom-center'
       });
       return;
@@ -301,15 +301,10 @@ export default function Checkout() {
                 <LineDivider/>
 
                 <div className="p-4">
-                  <h2>
-                    Purchase Order
-                    <span className="font-normal text-gray_r-11">
-                      { ' (' + (auth?.company ? 'Wajib diisi' : 'Opsional') + ')' }
-                    </span>
-                  </h2>
+                  <h2>Purchase Order</h2>
 
                   <div className="mt-4 flex gap-x-3">
-                    <div className="w-8/12">
+                    <div className="w-6/12">
                       <label className="form-label font-normal">Nomor PO</label>
                       <input 
                         type="text" 
@@ -318,8 +313,13 @@ export default function Checkout() {
                         onChange={(e) => setPoNumber(e.target.value)} 
                       />
                     </div>
-                    <div className="w-4/12">
-                      <label className="form-label font-normal">File PO</label>
+                    <div className="w-6/12">
+                      <label className="form-label font-normal">
+                        File PO
+                        {auth?.company && (
+                          <span className="font-normal text-gray_r-11 ml-1">(Wajib diisi)</span>
+                        )}
+                      </label>
                       <input 
                         type="file" 
                         className="form-input mt-2 h-12"