Checkout with upload PO

1 files changed, 57 insertions, 13 deletions

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"