Detail transaction page

4 files changed, 142 insertions, 14 deletions

diff --git a/src/components/AppBar.js b/src/components/AppBar.js
index aeffdf12..4cac8ce5 100644
--- a/src/components/AppBar.js
+++ b/src/components/AppBar.js
@@ -1,4 +1,4 @@
-import { ArrowLeftIcon, HeartIcon, HomeIcon } from "@heroicons/react/24/outline";
+import { ChevronLeftIcon, HeartIcon, HomeIcon } from "@heroicons/react/24/outline";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
@@ -35,7 +35,7 @@ const AppBar = ({ title }) => {
         {/* --- Start Title */}
         <div className="flex items-center">
           <button type="button" onClick={handleBackButtonClick} className="text-gray_r-12 px-4 py-5">
-            <ArrowLeftIcon className="w-6 stroke-2"/>
+            <ChevronLeftIcon className="w-6 stroke-2"/>
           </button>
           <h1 className="text-h-md">{ title }</h1> 
         </div>
diff --git a/src/pages/my/transactions/[slug].js b/src/pages/my/transactions/[slug].js
new file mode 100644
index 00000000..91b686d6
--- /dev/null
+++ b/src/pages/my/transactions/[slug].js
@@ -0,0 +1,128 @@
+import { ArrowDownOnSquareIcon, ArrowDownTrayIcon, ChevronDownIcon, ChevronRightIcon, ChevronUpIcon } from "@heroicons/react/24/outline";
+import AppBar from "../../../components/AppBar";
+import Layout from "../../../components/Layout";
+import LineDivider from "../../../components/LineDivider";
+import WithAuth from "../../../components/WithAuth";
+import { useState } from "react";
+
+const Row = ({ label, children }) => (
+  <div className="grid grid-cols-2">
+    <p className="leading-normal text-gray_r-11">{ label }</p>
+    <div className="text-right leading-normal">
+      { children }
+    </div>
+  </div>
+);
+
+const Section = ({ children }) => (
+  <div className="px-4 pb-4 flex flex-col gap-y-4">
+    { children }
+  </div>
+);
+
+const TitleRow = ({ label, active, onClick }) => (
+  <div className="flex justify-between p-4" onClick={onClick}>
+    <p className="font-medium leading-normal">{ label }</p>
+    { onClick && ( active ? (
+      <ChevronUpIcon className="w-5 h-5" />
+    ) : (
+      <ChevronDownIcon className="w-5 h-5" />
+    ) ) }
+  </div>
+);
+
+export default function DetailTransactions() {
+  const [ activeSection, setActiveSection ] = useState({
+    purchase: false,
+    shipping: false,
+    invoice: false,
+  });
+
+  const toggleSection = ( name ) => {
+    setActiveSection({
+      ...activeSection,
+      [name]: !activeSection[name] 
+    });
+  };
+
+  return (
+    <WithAuth>
+      <Layout>
+        <AppBar title="Detail Transaksi" />
+
+        <div className="text-caption-1">
+          <div className="p-4 flex flex-col gap-y-4">
+            <Row label="Status Transaksi">
+              <span className="badge-green">Pending Quotation</span>
+            </Row>
+            <Row label="No Transaksi">SO/2023/03212</Row>
+            <Row label="Purchase Order">
+                PO/2023/02123
+                <ArrowDownOnSquareIcon className="w-5 h-5 inline"/>
+            </Row>
+            <Row label="Metode Pembayaran">BCA Transfer</Row>
+            <Row label="Ketentuan Pembayaran">Cash Before Delivery</Row>
+            <Row label="Nama Sales">Rafi Zadanly</Row>
+            <Row label="Waktu Transaksi">01 Januari 2023</Row>
+          </div>
+
+          <LineDivider />
+
+          <TitleRow 
+            label="Detail Pembeli" 
+            active={activeSection.purchase} 
+            onClick={() => toggleSection('purchase')} 
+          />
+          { activeSection.purchase && (
+            <Section>
+              <Row label="Nama">John Doe</Row>
+              <Row label="Email">johndoe@gmail.com</Row>
+              <Row label="No Telepon">081223538754</Row>
+              <Row label="Alamat">Jalan Bandengan Utara No 85A, Kel. Penjaringan, Kec. Penjaringan, Jakarta Utara</Row>
+            </Section>
+          ) }
+
+          <LineDivider />
+
+          <TitleRow 
+            label="Detail Pengiriman" 
+            active={activeSection.shipping} 
+            onClick={() => toggleSection('shipping')} 
+          />
+          { activeSection.shipping && (
+            <Section>
+              <Row label="Nama">John Doe</Row>
+              <Row label="Email">johndoe@gmail.com</Row>
+              <Row label="No Telepon">081223538754</Row>
+              <Row label="Alamat">Jalan Bandengan Utara No 85A, Kel. Penjaringan, Kec. Penjaringan, Jakarta Utara</Row>
+            </Section>
+          ) }
+
+          <LineDivider />
+
+          <TitleRow 
+            label="Detail Penagihan" 
+            active={activeSection.invoice} 
+            onClick={() => toggleSection('invoice')} 
+          />
+          { activeSection.invoice && (
+            <Section>
+              <Row label="Nama">John Doe</Row>
+              <Row label="Email">johndoe@gmail.com</Row>
+              <Row label="No Telepon">081223538754</Row>
+              <Row label="Alamat">Jalan Bandengan Utara No 85A, Kel. Penjaringan, Kec. Penjaringan, Jakarta Utara</Row>
+            </Section>
+          ) }
+
+          <LineDivider />
+
+          <TitleRow 
+            label="Detail Produk" 
+            active={false} 
+          />
+
+        </div>
+      </Layout>
+    </WithAuth>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/my/transactions/index.js b/src/pages/my/transactions/index.js
index eb5f99a1..7792c647 100644
--- a/src/pages/my/transactions/index.js
+++ b/src/pages/my/transactions/index.js
@@ -8,6 +8,7 @@ import { useAuth } from "../../../helpers/auth";
 import apiOdoo from "../../../helpers/apiOdoo";
 import currencyFormat from "../../../helpers/currencyFormat";
 import { EllipsisVerticalIcon } from "@heroicons/react/24/outline";
+import Link from "../../../components/Link";
 
 export default function Transactions() {
   const [ auth ] = useAuth();
@@ -19,7 +20,7 @@ export default function Transactions() {
   useEffect(() => {
     const loadTransactions = async () => {
       if (auth) {
-        const dataTransactions = await apiOdoo('GET', `/api/v1/sale_order?partner_id=${auth?.partner_id}`);
+        const dataTransactions = await apiOdoo('GET', `/api/v1/partner/${auth.partner_id}/sale_order`);
         setTransactions(dataTransactions);
       };
     }
@@ -29,31 +30,31 @@ export default function Transactions() {
   return (
     <WithAuth>
       <Layout>
-        <AppBar title="Daftar Transaksi" />
+        <AppBar title="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>
+              <div className="grid grid-cols-2">
+                <Link href={`/my/transactions/${transaction.id}`}>
                   <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">
+                </Link>
+                <div className="flex gap-x-1 justify-end">
                   <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">
+              <Link href={`/my/transactions/${transaction.id}`} className="grid grid-cols-2 mt-3">
                 <div>
                   <span className="text-caption-2 text-gray_r-11">Dilayani Oleh</span>
-                  <p className="mt-1 font-medium">{ transaction.sales }</p>
+                  <p className="mt-1 font-medium text-gray_r-12">{ 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>
+                  <p className="mt-1 font-medium text-gray_r-12">{ currencyFormat(transaction.amount_total) }</p>
                 </div>
-              </div>
+              </Link>
             </div>
           )) }
         </div>
diff --git a/src/pages/shop/checkout.js b/src/pages/shop/checkout.js
index 424b903d..0f9619cf 100644
--- a/src/pages/shop/checkout.js
+++ b/src/pages/shop/checkout.js
@@ -117,7 +117,6 @@ export default function Checkout() {
     }
     let productOrder = products.map((product) => ({ 'product_id': product.id, 'quantity': product.quantity }));
     let data = {
-      'partner_id': auth.partner_id,
       'partner_shipping_id': selectedAddress.shipping.id,
       'partner_invoice_id': selectedAddress.invoicing.id,
       'order_line': JSON.stringify(productOrder)
@@ -131,7 +130,7 @@ export default function Checkout() {
     if (poNumber) data.po_number = poNumber;
     if (poFile) data.po_file = await getFileBase64(poFile);
 
-    const checkoutToOdoo = await apiOdoo('POST', '/api/v1/sale_order/checkout', data);
+    const checkoutToOdoo = await apiOdoo('POST', `/api/v1/partner/${auth.partner_id}/sale_order/checkout`, data);
     for (const product of products) {
       deleteItemCart(product.id);
     }