no message

1 files changed, 86 insertions, 80 deletions

diff --git a/src/pages/shop/checkout/index.js b/src/pages/shop/checkout/index.js
index 57fe5d3a..0a77ebed 100644
--- a/src/pages/shop/checkout/index.js
+++ b/src/pages/shop/checkout/index.js
@@ -1,142 +1,146 @@
-import { ExclamationCircleIcon } from "@heroicons/react/24/solid";
-import { useEffect, useState } from "react";
-import Alert from "@/components/elements/Alert";
-import AppBar from "@/components/layouts/AppBar";
-import Layout from "@/components/layouts/Layout";
-import LineDivider from "@/components/elements/LineDivider";
-import Link from "@/components/elements/Link";
-import ProgressBar from "@/components/elements/ProgressBar";
-import Spinner from "@/components/elements/Spinner";
-import apiOdoo from "@/core/utils/apiOdoo";
-import { useAuth } from "@/core/utils/auth";
-import { deleteItemCart, getCart } from "@/core/utils/cart";
-import currencyFormat from "@/core/utils/currencyFormat";
-import { getItemAddress } from "@/core/utils/address";
-import { useRouter } from "next/router";
-import WithAuth from "@/components/auth/WithAuth";
-import { toast } from "react-hot-toast";
-import getFileBase64 from "@/core/utils/getFileBase64";
-import VariantCard from "@/components/variants/VariantCard";
+import { ExclamationCircleIcon } from "@heroicons/react/24/solid"
+import { useEffect, useState } from "react"
+import Alert from "@/components/elements/Alert"
+import AppBar from "@/components/layouts/AppBar"
+import Layout from "@/components/layouts/Layout"
+import LineDivider from "@/components/elements/LineDivider"
+import Link from "@/components/elements/Link"
+import ProgressBar from "@/components/elements/ProgressBar"
+import Spinner from "@/components/elements/Spinner"
+import apiOdoo from "@/core/utils/apiOdoo"
+import { useAuth } from "@/core/utils/auth"
+import { deleteItemCart, getCart } from "@/core/utils/cart"
+import currencyFormat from "@/core/utils/currencyFormat"
+import { getItemAddress } from "@/core/utils/address"
+import { useRouter } from "next/router"
+import WithAuth from "@/components/auth/WithAuth"
+import { toast } from "react-hot-toast"
+import getFileBase64 from "@/core/utils/getFileBase64"
+import VariantCard from "@/components/variants/VariantCard"
 
 export default function Checkout() {
-  const router = useRouter();
-  const { product_id, qty } = router.query;
-  const [ auth ] = useAuth();
-  const [ addresses, setAddresses ] = useState(null);
-  const [ poNumber, setPoNumber ] = useState('');
-  const [ poFile, setPoFile ] = useState('');
+  const router = useRouter()
+  const { product_id, qty } = router.query
+  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 [ totalAmount, setTotalAmount ] = useState(0);
-  const [ totalDiscountAmount, setTotalDiscountAmount ] = useState(0);
+  })
+  const [ selectedPayment, setSelectedPayment ] = useState(null)
+  const [ products, setProducts ] = useState(null)
+  const [ totalAmount, setTotalAmount ] = useState(0)
+  const [ totalDiscountAmount, setTotalDiscountAmount ] = useState(0)
+
+  const [ isLoading, setIsLoading ] = useState(false)
 
   const payments = [
     { name: 'BCA', number: '8870-4000-81' },
     { name: 'MANDIRI', number: '155-0067-6869-75' },
-  ];
+  ]
 
   useEffect(() => {
     const getAddresses = async () => {
       if (auth) {
-        const dataAddresses = await apiOdoo('GET', `/api/v1/user/${auth.id}/address`);
-        setAddresses(dataAddresses);
+        const dataAddresses = await apiOdoo('GET', `/api/v1/user/${auth.id}/address`)
+        setAddresses(dataAddresses)
       }
-    };
-    getAddresses();
-  }, [auth]);
+    }
+    getAddresses()
+  }, [auth])
 
   useEffect(() => {
     const getProducts = async () => {
-      let cart = getCart();
-      let productIds = [];
+      let cart = getCart()
+      let productIds = []
       if (product_id) {
-        productIds = [parseInt(product_id)];
+        productIds = [parseInt(product_id)]
       } else {
         productIds = Object
           .values(cart)
           .filter((itemCart) => itemCart.selected == true)
-          .map((itemCart) => itemCart.product_id);
+          .map((itemCart) => itemCart.product_id)
       }
       if (productIds.length > 0) {
-        productIds = productIds.join(',');
-        let dataProducts = await apiOdoo('GET', `/api/v1/product_variant/${productIds}`);
+        productIds = productIds.join(',')
+        let dataProducts = await apiOdoo('GET', `/api/v1/product_variant/${productIds}`)
         dataProducts = dataProducts.map((product) => {
           if (product_id) {
-            product.quantity = 1;
-            if (qty) product.quantity = parseInt(qty);
+            product.quantity = 1
+            if (qty) product.quantity = parseInt(qty)
           } else {
-            product.quantity = cart[product.id].quantity;
+            product.quantity = cart[product.id].quantity
           }
-          return product;
-        });
-        setProducts(dataProducts);
+          return product
+        })
+        setProducts(dataProducts)
       }
-    };
-    getProducts();
-  }, [router, auth, product_id, qty]);
+    }
+    getProducts()
+  }, [router, auth, product_id, qty])
   
   useEffect(() => {
     if (addresses) {
       const matchAddress = (key) => {
-        const addressToMatch = getItemAddress(key);
-        let foundAddress = addresses.filter((address) => address.id == addressToMatch);
+        const addressToMatch = getItemAddress(key)
+        let foundAddress = addresses.filter((address) => address.id == addressToMatch)
         if (foundAddress.length > 0) {
-          return foundAddress[0];
+          return foundAddress[0]
         }
-        return addresses[0];
+        return addresses[0]
       }
       setSelectedAddress({
         shipping: matchAddress('shipping'),
         invoicing: matchAddress('invoicing'),
-      });
-    };
-  }, [addresses]);
+      })
+    }
+  }, [addresses])
 
   useEffect(() => {
     if (products) {
-      let calculateTotalAmount = 0;
-      let calculateTotalDiscountAmount = 0;
+      let calculateTotalAmount = 0
+      let calculateTotalDiscountAmount = 0
       products.forEach(product => {
-        calculateTotalAmount += product.price.price * product.quantity;
-        calculateTotalDiscountAmount += (product.price.price - product.price.price_discount) * product.quantity;
-      });
-      setTotalAmount(calculateTotalAmount);
-      setTotalDiscountAmount(calculateTotalDiscountAmount);
+        calculateTotalAmount += product.price.price * product.quantity
+        calculateTotalDiscountAmount += (product.price.price - product.price.price_discount) * product.quantity
+      })
+      setTotalAmount(calculateTotalAmount)
+      setTotalDiscountAmount(calculateTotalDiscountAmount)
     }
-  }, [products]);
+  }, [products])
 
-  const submit = async () => {
+  const checkout = async () => {
     if (!selectedPayment) {
       toast.error('Mohon pilih metode pembayaran', {
         position: 'bottom-center'
-      });
-      return;
+      })
+      return
     }
     if (poFile && poFile.size > 5000000) {
       toast.error('Maksimal ukuran file adalah 5MB', {
         position: 'bottom-center'
-      });
-      return;
+      })
+      return
     }
-    let productOrder = products.map((product) => ({ 'product_id': product.id, 'quantity': product.quantity }));
+    setIsLoading(true)
+    let productOrder = products.map((product) => ({ 'product_id': product.id, 'quantity': product.quantity }))
     let data = {
       'partner_shipping_id': selectedAddress.shipping.id,
       'partner_invoice_id': selectedAddress.invoicing.id,
       'order_line': JSON.stringify(productOrder),
       'type': 'sale_order'
-    };
-    if (poNumber) data.po_number = poNumber;
-    if (poFile) data.po_file = await getFileBase64(poFile);
+    }
+    if (poNumber) data.po_number = poNumber
+    if (poFile) data.po_file = await getFileBase64(poFile)
 
-    const checkoutToOdoo = await apiOdoo('POST', `/api/v1/partner/${auth.partner_id}/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);
+      deleteItemCart(product.id)
     }
-    router.push(`/shop/checkout/finish?id=${checkoutToOdoo.id}`);
+    router.push(`/shop/checkout/finish?id=${checkoutToOdoo.id}`)
+    setIsLoading(false)
   }
 
   return (
@@ -306,9 +310,11 @@ export default function Checkout() {
             <div className="flex gap-x-3 p-4">
               <button 
                 className="flex-1 btn-yellow"
-                onClick={submit}
+                onClick={checkout}
+                disabled={isLoading}
               >
-                Bayar
+                { isLoading && 'Loading...' }
+                { !isLoading && 'Bayar' }
               </button>
             </div>
           </>