Show detail if cart product > 0

1 files changed, 67 insertions, 49 deletions

diff --git a/src/pages/shop/cart.js b/src/pages/shop/cart.js
index 16734065..6f61ffcb 100644
--- a/src/pages/shop/cart.js
+++ b/src/pages/shop/cart.js
@@ -41,23 +41,24 @@ export default function Cart() {
 
   useEffect(() => {
     const productsToProcess = products.filter((product) => product.to_process == true);
-    if (products.length > 0) {
-      
-      let calculateTotalPriceBeforeTax = 0;
-      let calculateTotalTaxAmount = 0;
-      let calculateTotalDiscountAmount = 0;
-      productsToProcess.forEach(product => {
-        let priceBeforeTax = product.price.price / 1.11; 
-        calculateTotalPriceBeforeTax += priceBeforeTax * product.quantity;
-        calculateTotalTaxAmount += (product.price.price - priceBeforeTax) * product.quantity;
-        calculateTotalDiscountAmount += (product.price.price - product.price.price_discount) * product.quantity;
-      });
-      setTotalPriceBeforeTax(calculateTotalPriceBeforeTax);
-      setTotalTaxAmount(calculateTotalTaxAmount);
-      setTotalDiscountAmount(calculateTotalDiscountAmount);
-    }
+    let calculateTotalPriceBeforeTax = 0;
+    let calculateTotalTaxAmount = 0;
+    let calculateTotalDiscountAmount = 0;
+    productsToProcess.forEach(product => {
+      let priceBeforeTax = product.price.price / 1.11; 
+      calculateTotalPriceBeforeTax += priceBeforeTax * product.quantity;
+      calculateTotalTaxAmount += (product.price.price - priceBeforeTax) * product.quantity;
+      calculateTotalDiscountAmount += (product.price.price - product.price.price_discount) * product.quantity;
+    });
+    setTotalPriceBeforeTax(calculateTotalPriceBeforeTax);
+    setTotalTaxAmount(calculateTotalTaxAmount);
+    setTotalDiscountAmount(calculateTotalDiscountAmount);
   }, [products]);
 
+  const getProductsToProcess = () => {
+    return products.filter((product) => product.to_process == true);
+  }
+
   const updateCart = (productId, quantity) => {
     let productIndexToUpdate = products.findIndex((product) => product.id == productId);
     if (quantity != '') createOrUpdateItemCart(productId, quantity);
@@ -134,12 +135,10 @@ export default function Cart() {
         <div className="p-4">
 
           {/* [Start] Title */}
-          <div className="flex gap-x-2 mb-8">
-            <Link href="/" className="pr-2">
-              <ChevronLeftIcon className="w-6 stroke-gray_r-12"/>
-            </Link>
-            <h1>Keranjang Saya</h1>
-          </div>
+          <Link href="/" className="flex gap-x-2 mb-8">
+            <ChevronLeftIcon className="w-6 stroke-gray_r-12"/>
+            <h1 className="text-gray_r-12">Keranjang Saya</h1> 
+          </Link>
           {/* [End] Title */}
 
           {/* [Start] Product List */}
@@ -148,7 +147,7 @@ export default function Cart() {
             <div className="flex gap-x-3" key={index}>
               <div className="w-4/12 flex items-center gap-x-2">
                 <button 
-                  className={'p-2 rounded border-2 ' + (product.to_process ? 'border-yellow_r-9 bg-yellow_r-9' : 'border-gray_r-6')} 
+                  className={'p-2 rounded border-2 ' + (product.to_process ? 'border-yellow_r-9 bg-yellow_r-9' : 'border-gray_r-12')} 
                   onClick={() => toggleProductToProcess(product.id)}
                 ></button>
                 <LazyLoadImage effect="blur" src={product.parent.image ? product.parent.image : '/images/noimage.jpeg'} alt={product.parent.name} className="object-contain object-center border border-gray_r-6 h-32 w-full rounded-md" />
@@ -203,40 +202,59 @@ export default function Cart() {
           {/* [End] Product List */}
 
           {/* [Start] Review Order */}
-          <div className="p-4 border border-gray_r-6 rounded-md mb-4">
-            <h2>Ringkasan Pesanan</h2>
-            <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>Harga Sebelum PPN</p>
-                <p className="font-medium">{currencyFormat(totalPriceBeforeTax)}</p>
+          {products.length > 0 ? (
+            <div className="p-4 border border-gray_r-6 rounded-md mb-4">
+              <div className="flex justify-between items-center">
+                <h2>Ringkasan Pesanan</h2>
+                {getProductsToProcess().length > 0 ? (
+                  <p className="text-gray_r-11">{getProductsToProcess().length} Barang</p>
+                ) : ''}
               </div>
-              <div className="flex gap-x-2 justify-between">
-                <p>PPN 11%</p>
-                <p className="font-medium">{currencyFormat(totalTaxAmount)}</p>
+              <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>
+                </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>
-              <div className="flex gap-x-2 justify-between">
-                <p>Total Diskon</p>
-                <p className="font-medium text-red_r-11">- {currencyFormat(totalDiscountAmount)}</p>
+              <hr className="my-4 border-gray_r-6"/>
+              <div className="flex gap-x-2 justify-between mb-4">
+                <p>Total</p>
+                <p className="font-medium text-yellow_r-11">{currencyFormat(totalPriceBeforeTax + totalTaxAmount - 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">
+                Dengan melakukan pembelian melalui website Indoteknik, saya menyetujui <Link href="/">Syarat & Ketentuan</Link> yang berlaku
+              </p>
             </div>
-            <hr className="my-4 border-gray_r-6"/>
-            <div className="flex gap-x-2 justify-between mb-4">
-              <p>Total Harga</p>
-              <p className="font-medium text-yellow_r-11">{currencyFormat(totalPriceBeforeTax + totalTaxAmount - 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">
-              Dengan melakukan pembelian melalui website Indoteknik, saya menyetujui <Link href="/">Syarat & Ketentuan</Link> yang berlaku
-            </p>
-          </div>
+          ) : ''}
           {/* [End] Review Order */}
 
           {/* [Start] Submit Button */}
-          <div className="flex gap-x-3">
-            <button className="flex-1 btn-light">Quotation (1)</button>
-            <button className="flex-1 btn-yellow">Bayar (1)</button>
-          </div>
+          {products.length > 0 ? (
+            <div className="flex gap-x-3">
+              <button 
+                className="flex-1 btn-light"
+                disabled={getProductsToProcess().length == 0}
+              >
+                Quotation {getProductsToProcess().length > 0 ? `(${getProductsToProcess().length})` : ''}
+              </button>
+              <button 
+                className="flex-1 btn-yellow"
+                disabled={getProductsToProcess().length == 0}
+              >
+                Bayar {getProductsToProcess().length > 0 ? `(${getProductsToProcess().length})` : ''}
+              </button>
+            </div>
+          ) : ''}
           {/* [End] Submit Button */}
 
         </div>