Checkout with upload PO

3 files changed, 88 insertions, 63 deletions

diff --git a/src/helpers/getFileBase64.js b/src/helpers/getFileBase64.js
new file mode 100644
index 00000000..78013e43
--- /dev/null
+++ b/src/helpers/getFileBase64.js
@@ -0,0 +1,11 @@
+const getFileBase64 = file => new Promise((resolve, reject) => {
+  let reader = new FileReader();
+  reader.readAsBinaryString(file);
+  reader.onload = () => {
+    let result = reader.result;
+    resolve(btoa(result));
+  };
+  reader.onerror = error => reject(error);
+});
+
+export default getFileBase64;
\ No newline at end of file
diff --git a/src/pages/my/menu.js b/src/pages/my/menu.js
index e21b0433..0db6b011 100644
--- a/src/pages/my/menu.js
+++ b/src/pages/my/menu.js
@@ -7,36 +7,26 @@ import {
   ArrowRightOnRectangleIcon,
   ChatBubbleLeftRightIcon,
   ChevronRightIcon,
-  ClipboardDocumentIcon,
-  ClipboardIcon,
-  ClockIcon,
-  DocumentArrowDownIcon,
   MapIcon,
   PaperClipIcon,
   PencilSquareIcon,
   QuestionMarkCircleIcon,
   ReceiptPercentIcon,
-  UserIcon
+  UserIcon,
+  HeartIcon
 } from "@heroicons/react/24/outline"; 
 
-const activityMenus = [
-  { icon: (<ReceiptPercentIcon className="w-5" />), name: 'Daftar Transaksi', url: '/my/profile' },
-  { icon: (<ClipboardIcon className="w-5" />), name: 'Penawaran Harga', url: '/my/profile' },
-  { icon: (<ClockIcon className="w-5" />), name: 'Purchase Order', url: '/my/profile' },
-  { icon: (<DocumentArrowDownIcon className="w-5" />), name: 'Faktur Penjualan', url: '/my/profile' },
-  { icon: (<PaperClipIcon className="w-5" />), name: 'Faktur Pajak', url: '/my/profile' },
-  { icon: (<ClipboardDocumentIcon className="w-5" />), name: 'Surat Jalan', url: '/my/profile' }
-];
-
-const serviceMenus = [
-  { icon: (<ChatBubbleLeftRightIcon className="w-5"/>), name: 'Customer Support', url: '/my/profile' },
-  { icon: (<QuestionMarkCircleIcon className="w-5"/>), name: 'F.A.Q', url: '/my/profile' },
-];
-
-const settingMenus = [
-  { icon: (<MapIcon className="w-5" />),name: 'Daftar Alamat', url: '/my/address' },
-  { icon: (<ArrowRightOnRectangleIcon className="w-5" />),name: 'Keluar Akun', url: '/logout' },
-];
+const Menu = ({ icon, name, url }) => {
+  return (
+    <Link href={url} className="text-gray_r-11 font-normal flex gap-x-2 items-center py-4 border-b border-gray_r-6">
+      <span className="flex gap-x-2">
+        { icon }
+        { name }
+      </span>
+      <ChevronRightIcon className="w-5 ml-auto"/>
+    </Link>
+  );
+};
 
 export default function MyMenu() {
   const [auth] = useAuth();
@@ -64,41 +54,21 @@ export default function MyMenu() {
         <div className="px-4 mt-4">
           <p className="font-medium mb-2">Aktivitas Pembelian</p>
           <div className="flex flex-col mb-6">
-            { activityMenus.map((menu, index) => (
-              <Link href={menu.url} className="text-gray_r-11 font-normal flex gap-x-2 items-center py-4 border-b border-gray_r-6" key={index}>
-                <span className="flex gap-x-2">
-                  { menu.icon }
-                  { menu.name }
-                </span>
-                <ChevronRightIcon className="w-5 ml-auto"/>
-              </Link>
-            )) }
+            <Menu icon={<ReceiptPercentIcon className="w-5" />} name="Daftar Transaksi" url="/my/transactions" />
+            <Menu icon={<PaperClipIcon className="w-5" />} name="Invoice & Faktur Pajak" url="/my/transactions" />
+            <Menu icon={<HeartIcon className="w-5" />} name="Wishlist" url="/my/wishlist" />
           </div>
 
           <p className="font-medium mb-2">Pusat Bantuan</p>
           <div className="flex flex-col mb-6">
-            { serviceMenus.map((menu, index) => (
-              <Link href={menu.url} className="text-gray_r-11 font-normal flex gap-x-2 items-center py-4 border-b border-gray_r-6" key={index}>
-                <span className="flex gap-x-2">
-                  { menu.icon }
-                  { menu.name }
-                </span>
-                <ChevronRightIcon className="w-5 ml-auto"/>
-              </Link>
-            )) }
+            <Menu icon={<ChatBubbleLeftRightIcon className="w-5"/>} name="Layanan Pelanggan" url="/" />
+            <Menu icon={<QuestionMarkCircleIcon className="w-5"/>} name="F.A.Q" url="/" />
           </div>
 
           <p className="font-medium mb-2">Pengaturan Akun</p>
           <div className="flex flex-col mb-6">
-            { settingMenus.map((menu, index) => (
-              <Link href={menu.url} className="text-gray_r-11 font-normal flex gap-x-2 items-center py-4 border-b border-gray_r-6" key={index}>
-                <span className="flex gap-x-2">
-                  { menu.icon }
-                  { menu.name }
-                </span>
-                <ChevronRightIcon className="w-5 ml-auto"/>
-              </Link>
-            )) }
+            <Menu icon={<MapIcon className="w-5" />} name="Daftar Alamat" url="/my/address" />
+            <Menu icon={<ArrowRightOnRectangleIcon className="w-5" />} name="Keluar Akun" url="/logout" />
           </div>
         </div>
       </Layout>
diff --git a/src/pages/shop/checkout.js b/src/pages/shop/checkout.js
index a8645db5..7b37eaad 100644
--- a/src/pages/shop/checkout.js
+++ b/src/pages/shop/checkout.js
@@ -16,21 +16,24 @@ import { getItemAddress } from "../../helpers/address";
 import { useRouter } from "next/router";
 import WithAuth from "../../components/WithAuth";
 import { toast } from "react-hot-toast";
+import getFileBase64 from "../../helpers/getFileBase64";
 
 export default function Checkout() {
   const router = useRouter();
-  const [auth] = useAuth();
-  const [addresses, setAddresses] = useState(null);
-  const [selectedAddress, setSelectedAddress] = useState({
+  const [ auth ] = useAuth();
+  const [ addresses, setAddresses ] = useState(null);
+  const [ poNumber, setPoNumber ] = useState('');
+  const [ poFile, setPoFile ] = useState('');
+  const [ selectedAddress, setSelectedAddress ] = useState({
     shipping: null,
     invoicing: null
   });
-  const [selectedPayment, setSelectedPayment] = useState(null);
-  const [products, setProducts] = useState(null);
-  const [totalPriceBeforeTax, setTotalPriceBeforeTax] = useState(0);
-  const [totalTaxAmount, setTotalTaxAmount] = useState(0);
-  const [totalDiscountAmount, setTotalDiscountAmount] = useState(0);
-  const [finishCheckout, setFinishCheckout] = useState(null);
+  const [ selectedPayment, setSelectedPayment ] = useState(null);
+  const [ products, setProducts ] = useState(null);
+  const [ totalPriceBeforeTax, setTotalPriceBeforeTax ] = useState(0);
+  const [ totalTaxAmount, setTotalTaxAmount ] = useState(0);
+  const [ totalDiscountAmount, setTotalDiscountAmount ] = useState(0);
+  const [ finishCheckout, setFinishCheckout ] = useState(null);
 
   const payments = [
     { name: 'BCA', number: '8870-4000-81' },
@@ -107,7 +110,7 @@ export default function Checkout() {
 
   const submit = async () => {
     if (!selectedPayment) {
-      toast.error('Mohon pilih metode pembayaran terlebih dahulu', {
+      toast.error('Mohon pilih metode pembayaran', {
         position: 'bottom-center'
       });
       return;
@@ -118,7 +121,16 @@ export default function Checkout() {
       'partner_shipping_id': selectedAddress.shipping.id,
       'partner_invoice_id': selectedAddress.invoicing.id,
       'order_line': JSON.stringify(productOrder)
-    }
+    };
+    if (auth?.company && (!poNumber || !poFile)) {
+      toast.error('Mohon isi nomor dan file PO', {
+        position: 'bottom-center'
+      });
+      return;
+    };
+    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);
     for (const product of products) {
       deleteItemCart(product.id);
@@ -181,7 +193,7 @@ export default function Checkout() {
                     <div className="mt-4 text-caption-1">
                       <p className="font-medium">{ selectedAddress.shipping.name }</p>
                       <p className="mt-2 text-gray_r-11">{ selectedAddress.shipping.mobile }</p>
-                      <p className="mt-1 text-gray_r-11">{ selectedAddress.shipping.street } { selectedAddress.shipping.street2 }</p>
+                      <p className="mt-1 text-gray_r-11">{ selectedAddress.shipping.street }, { selectedAddress.shipping.city.name }</p>
                     </div>
                   ) }
                 </div>
@@ -270,7 +282,7 @@ export default function Checkout() {
                 <LineDivider/>
                 
                 <div className="p-4">
-                  <h2>Pilih Metode Pembayaran</h2>
+                  <h2>Metode Pembayaran <span className="font-normal text-gray_r-11">(Wajib dipilih)</span></h2>
                   <div className="grid gap-y-3 mt-4">
                     { payments.map((payment, index) => (
                       <button 
@@ -288,6 +300,38 @@ 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>
+
+                  <div className="mt-4 flex gap-x-3">
+                    <div className="w-8/12">
+                      <label className="form-label font-normal">Nomor PO</label>
+                      <input 
+                        type="text" 
+                        className="form-input mt-2 h-12"  
+                        value={poNumber} 
+                        onChange={(e) => setPoNumber(e.target.value)} 
+                      />
+                    </div>
+                    <div className="w-4/12">
+                      <label className="form-label font-normal">File PO</label>
+                      <input 
+                        type="file" 
+                        className="form-input mt-2 h-12" 
+                        accept="image/*,application/pdf" 
+                        onChange={(e) => setPoFile(e.target.files[0])}
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                <LineDivider/>
+
                 <div className="flex gap-x-3 p-4">
                   <button 
                     className="flex-1 btn-yellow"