From d4d4227dfb2fefa56ded8ff5897469459f56b069 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Thu, 2 Feb 2023 17:13:12 +0700
Subject: no message

---
 src/pages/shop/checkout.js       | 105 +++++++++++++++++++++------------------
 src/pages/shop/product/[slug].js |  78 +++++++++++++++++++----------
 2 files changed, 107 insertions(+), 76 deletions(-)

(limited to 'src/pages/shop')

diff --git a/src/pages/shop/checkout.js b/src/pages/shop/checkout.js
index f55b200f..875cf0f1 100644
--- a/src/pages/shop/checkout.js
+++ b/src/pages/shop/checkout.js
@@ -20,6 +20,7 @@ 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('');
@@ -30,8 +31,7 @@ export default function Checkout() {
   });
   const [ selectedPayment, setSelectedPayment ] = useState(null);
   const [ products, setProducts ] = useState(null);
-  const [ totalPriceBeforeTax, setTotalPriceBeforeTax ] = useState(0);
-  const [ totalTaxAmount, setTotalTaxAmount ] = useState(0);
+  const [ totalAmount, setTotalAmount ] = useState(0);
   const [ totalDiscountAmount, setTotalDiscountAmount ] = useState(0);
   const [ finishCheckout, setFinishCheckout ] = useState(null);
 
@@ -53,25 +53,34 @@ export default function Checkout() {
   useEffect(() => {
     const getProducts = async () => {
       let cart = getCart();
-      let productIds = Object
-        .values(cart)
-        .filter((itemCart) => itemCart.selected == true)
-        .map((itemCart) => itemCart.product_id);
+      let productIds = [];
+      if (product_id) {
+        productIds = [parseInt(product_id)];
+      } else {
+        productIds = Object
+          .values(cart)
+          .filter((itemCart) => itemCart.selected == true)
+          .map((itemCart) => itemCart.product_id);
+      }
       if (productIds.length > 0) {
         productIds = productIds.join(',');
         let dataProducts = await apiOdoo('GET', `/api/v1/product_variant/${productIds}`);
-        dataProducts = dataProducts.map((product) => ({
-          ...product,
-          quantity: cart[product.id].quantity,
-          selected: cart[product.id].selected,
-        }));
+        dataProducts = dataProducts.map((product) => {
+          if (product_id) {
+            product.quantity = 1;
+            if (qty) product.quantity = parseInt(qty);
+          } else {
+            product.quantity = cart[product.id].quantity;
+          }
+          return product;
+        });
         setProducts(dataProducts);
       } else {
         if (auth) router.push('/shop/cart');
       }
     };
     getProducts();
-  }, [router, auth]);
+  }, [router, auth, product_id, qty]);
   
   useEffect(() => {
     if (addresses) {
@@ -92,18 +101,13 @@ export default function Checkout() {
 
   useEffect(() => {
     if (products) {
-      const productsSelected = products.filter((product) => product.selected == true);
-      let calculateTotalPriceBeforeTax = 0;
-      let calculateTotalTaxAmount = 0;
+      let calculateTotalAmount = 0;
       let calculateTotalDiscountAmount = 0;
-      productsSelected.forEach(product => {
-        let priceBeforeTax = product.price.price / 1.11; 
-        calculateTotalPriceBeforeTax += priceBeforeTax * product.quantity;
-        calculateTotalTaxAmount += (product.price.price - priceBeforeTax) * product.quantity;
+      products.forEach(product => {
+        calculateTotalAmount += product.price.price * product.quantity;
         calculateTotalDiscountAmount += (product.price.price - product.price.price_discount) * product.quantity;
       });
-      setTotalPriceBeforeTax(calculateTotalPriceBeforeTax);
-      setTotalTaxAmount(calculateTotalTaxAmount);
+      setTotalAmount(calculateTotalAmount);
       setTotalDiscountAmount(calculateTotalDiscountAmount);
     }
   }, [products]);
@@ -115,17 +119,18 @@ export default function Checkout() {
       });
       return;
     }
+    if (poFile && poFile.size > 5000000) {
+      toast.error('Maksimal ukuran file adalah 5MB', {
+        position: 'bottom-center'
+      });
+      return;
+    }
     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)
-    };
-    if (auth?.company && !poFile) {
-      toast.error('Mohon isi file PO', {
-        position: 'bottom-center'
-      });
-      return;
+      'order_line': JSON.stringify(productOrder),
+      'type': 'sale_order'
     };
     if (poNumber) data.po_number = poNumber;
     if (poFile) data.po_file = await getFileBase64(poFile);
@@ -192,7 +197,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.city.name }</p>
+                      <p className="mt-1 text-gray_r-11">{ selectedAddress.shipping.street }, { selectedAddress.shipping?.city?.name }</p>
                     </div>
                   ) }
                 </div>
@@ -219,22 +224,26 @@ export default function Checkout() {
                   <hr className="my-4 border-gray_r-6"/>
                   <div className="flex flex-col gap-y-4">
                     <div className="flex gap-x-2 justify-between">
-                      <p>Subtotal</p>
-                      <p className="font-medium">{currencyFormat(totalPriceBeforeTax)}</p>
-                    </div>
-                    <div className="flex gap-x-2 justify-between">
-                      <p>PPN 11%</p>
-                      <p className="font-medium">{currencyFormat(totalTaxAmount)}</p>
+                      <p>Total Belanja</p>
+                      <p className="font-medium">{currencyFormat(totalAmount)}</p>
                     </div>
                     <div className="flex gap-x-2 justify-between">
                       <p>Total Diskon</p>
                       <p className="font-medium text-red_r-11">- {currencyFormat(totalDiscountAmount)}</p>
                     </div>
+                    <div className="flex gap-x-2 justify-between">
+                      <p>Subtotal</p>
+                      <p className="font-medium">{currencyFormat(totalAmount - totalDiscountAmount)}</p>
+                    </div>
+                    <div className="flex gap-x-2 justify-between">
+                      <p>PPN 11% (Incl.)</p>
+                      <p className="font-medium">{currencyFormat((totalAmount - totalDiscountAmount) * 0.11)}</p>
+                    </div>
                   </div>
                   <hr className="my-4 border-gray_r-6"/>
                   <div className="flex gap-x-2 justify-between mb-4">
                     <p>Grand Total</p>
-                    <p className="font-medium text-yellow_r-11">{currencyFormat(totalPriceBeforeTax + totalTaxAmount - totalDiscountAmount)}</p>
+                    <p className="font-medium text-yellow_r-11">{currencyFormat(totalAmount - totalDiscountAmount)}</p>
                   </div>
                   <p className="text-caption-2 text-gray_r-10 mb-2">*) Belum termasuk biaya pengiriman</p>
                   <p className="text-caption-2 text-gray_r-10 leading-5">
@@ -284,21 +293,9 @@ export default function Checkout() {
                   <h2>Purchase Order</h2>
 
                   <div className="mt-4 flex gap-x-3">
-                    <div className="w-6/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-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>
-                        )}
+                        Dokumen PO
                       </label>
                       <input 
                         type="file" 
@@ -307,7 +304,17 @@ export default function Checkout() {
                         onChange={(e) => setPoFile(e.target.files[0])}
                       />
                     </div>
+                    <div className="w-6/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>
+                  <p className="text-caption-2 text-gray_r-11 mt-2">Ukuran dokumen PO Maksimal 5MB</p>
                 </div>
 
                 <LineDivider/>
diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js
index bcfb12ba..281f2bc2 100644
--- a/src/pages/shop/product/[slug].js
+++ b/src/pages/shop/product/[slug].js
@@ -138,6 +138,23 @@ export default function ProductDetail({ product }) {
     return true;
   }
 
+  const checkoutProduct = () => {
+    if (!auth) {
+      toast.error('Login terlebih dahulu untuk melanjutkan', { duration: 2000 });
+      router.push('/login');
+      return;
+    }
+    if (product.variant_total > 1 && !selectedVariant) {
+      toast.error('Pilih varian terlebih dahulu untuk melanjutkan pembelian', { duration: 2000 });
+      return;
+    }
+    if (quantity < 0) {
+      toast.error('Jumlah barang yang ditambahkan minimal 1 pcs', { duration: 2000 });
+      return;
+    }
+    router.push(`/shop/checkout?product_id=${activeVariant.id}&qty=${quantity}`);
+  }
+
   return (
     <>
       <Header title={`${product.name} - Indoteknik`}/>
@@ -187,36 +204,38 @@ export default function ProductDetail({ product }) {
         <LineDivider />
 
         <div className="p-4">
-          <div className="flex gap-x-2">
-            <div className="w-9/12">
-              <label className="form-label mb-1">Pilih: <span className="text-gray_r-11 font-normal">{product.variant_total} Varian</span></label>
-              <select name="variant" className="form-input" value={selectedVariant} onChange={onchangeVariant} >
-                <option value="" disabled={selectedVariant != "" ? true : false}>Pilih Varian...</option>
-                {product.variants.length > 1 ? (
-                  product.variants.map((variant) => {
-                    return (
-                      <option key={variant.id} value={variant.id}>{variant.attributes.join(', ')}</option>
-                    );
-                  })
-                ) : (
-                  <option key={product.variants[0].id} value={product.variants[0].id}>{product.variants[0].name}</option>
-                )}
-              </select>
-            </div>
-            <div className="w-3/12">
-              <label htmlFor="quantity" className="form-label mb-1">Jumlah</label>
-              <input type="number" name="quantity" id="quantity" className="form-input text-center is-invalid" value={quantity} onChange={onChangeQuantity} />
-            </div>
+          <div className="">
+            <label className="form-label mb-2">Pilih: <span className="text-gray_r-11 font-normal">{product.variant_total} Varian</span></label>
+            <select name="variant" className="form-input" value={selectedVariant} onChange={onchangeVariant} >
+              <option value="" disabled={selectedVariant != "" ? true : false}>Pilih Varian...</option>
+              {product.variants.length > 1 ? (
+                product.variants.map((variant) => {
+                  return (
+                    <option key={variant.id} value={variant.id}>{variant.attributes.join(', ')}</option>
+                  );
+                })
+              ) : (
+                <option key={product.variants[0].id} value={product.variants[0].id}>{product.variants[0].name}</option>
+              )}
+            </select>
           </div>
 
+          <label htmlFor="quantity" className="form-label mb-1 mt-3">Jumlah</label>
           <div className="flex gap-x-2 mt-2">
-            <button className="btn-light w-full">+ Quotation</button>
+              <input type="number" name="quantity" id="quantity" className="form-input h-full w-5/12 text-center" value={quantity} onChange={onChangeQuantity} />
+            
             <button 
               className="btn-yellow w-full" 
               onClick={addItemToCart} 
               disabled={(product.lowest_price.price == 0 ? true : false)}
             >
-              + Keranjang
+              Keranjang
+            </button>
+            <button 
+              onClick={checkoutProduct}
+              className="btn-solid-red w-full"
+            >
+              Beli
             </button>
           </div>
         </div>
@@ -230,7 +249,7 @@ export default function ProductDetail({ product }) {
             <p className="text-gray-800">{product.variant_total} Varian</p>
           </div>
           <div className="flex py-2 justify-between items-center gap-x-1">
-            <h3 className="text-gray-900">Nomor SKU</h3>
+            <h3 className="text-gray-900">No. SKU</h3>
             <p className="text-gray-800" id="sku_number">SKU-{activeVariant.id}</p>
           </div>
           <div className="flex py-2 justify-between items-center gap-x-1">
@@ -239,9 +258,14 @@ export default function ProductDetail({ product }) {
           </div>
           <div className="flex py-2 justify-between items-center gap-x-1">
             <h3 className="text-gray-900">Stok</h3>
-            <p className="text-gray-800" id="stock">
-              {activeVariant.stock > 0 ? (activeVariant.stock > 5 ? 'Lebih dari 5' : 'Kurang dari 5') : '0'}
-            </p>
+            <div className="flex gap-x-2" id="stock">
+              {activeVariant.stock > 0 ? (activeVariant.stock > 5 && (
+                <>
+                  <div className="badge-solid-red">Ready Stock</div>
+                  <div className="badge-gray">{activeVariant.stock > 5 ? '> 5' : '< 5'}</div>
+                </>
+              )) : '0'}
+            </div>
           </div>
           <div className="flex py-2 justify-between items-center gap-x-1">
             <h3 className="text-gray-900">Berat Barang</h3>
@@ -259,7 +283,7 @@ export default function ProductDetail({ product }) {
         <LineDivider />
 
         <div className="p-4">
-          <h2 className="font-bold mb-4">Produk Lainnya</h2>
+          <h2 className="font-bold mb-4">Kamu Mungkin Juga Suka</h2>
           <ProductSlider products={similarProducts}/>
         </div>
         
-- 
cgit v1.2.3