From 9aeb019257787b355f7b51f401d7f417899252f5 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Thu, 12 Jan 2023 17:12:31 +0700
Subject: form validation, fix cart, fix checkout, create address

---
 src/pages/shop/cart.js     | 239 +++++++++++++++++++++------------------------
 src/pages/shop/checkout.js |   9 +-
 2 files changed, 113 insertions(+), 135 deletions(-)

(limited to 'src/pages/shop')

diff --git a/src/pages/shop/cart.js b/src/pages/shop/cart.js
index cdb79178..0c6bbdc3 100644
--- a/src/pages/shop/cart.js
+++ b/src/pages/shop/cart.js
@@ -149,129 +149,6 @@ export default function Cart() {
     setProducts([...productsToUpdate]);
   }
 
-  // Components
-  const CartEmpty = () => (
-    <div className="text-center mt-14">
-      <ExclamationTriangleIcon className="w-12 mx-auto"/>
-      <p className="mt-2 h2">Keranjang belanja anda masih kosong.</p>
-      <Link href="/" className="btn-yellow text-gray_r-12 mx-auto mt-4">Mulai Belanja</Link>
-    </div>
-  );
-  
-  const CartLoader = () => (
-    <div className="flex justify-center items-center gap-x-3 mt-14">
-      <Spinner className="w-10 text-gray_r-8 fill-gray_r-12" />
-    </div>
-  );
-  
-  const CartWarningAlert = () => {
-    <div className="p-4">
-      <Alert type="warning" className="text-caption-2 flex gap-x-3 items-center">
-        <div>
-          <ExclamationCircleIcon className="w-8 text-yellow_r-11"/>
-        </div>
-        <span>Mohon dicek kembali & pastikan pesanan kamu sudah sesuai dengan yang kamu butuhkan. Atau bisa hubungi kami.</span>
-      </Alert>
-    </div>
-  };
-
-  const CartProductList = () => (
-    <div className="p-4 flex flex-col gap-y-6">
-      <div className="flex justify-between items-center">
-        <h2>Daftar Produk Belanja</h2>
-        <Link href="/" className="text-caption-1">Cari Produk Lain</Link>
-      </div>
-      {products.map((product, index) => (
-        <div className="flex gap-x-3" key={index}>
-          <div className="w-4/12 flex items-center gap-x-2" onClick={() => toggleProductSelected(product.id)}>
-            <button 
-              className={'p-2 rounded border-2 ' + (product.selected ? 'border-yellow_r-9 bg-yellow_r-9' : 'border-gray_r-12')} 
-            ></button>
-            <Image
-              src={product.parent.image} 
-              alt={product.parent.name} 
-              className="object-contain object-center border border-gray_r-6 h-32 w-full rounded-md"
-            />
-          </div>
-          <div className="w-8/12 flex flex-col">
-            <Link href={'/shop/product/' + createSlug(product.parent.name, product.parent.id)} className="product-card__title wrap-line-ellipsis-2">
-              {product.parent.name}
-            </Link>
-            <p className="text-caption-2 text-gray_r-11 mt-1">
-              {product.code || '-'}
-              {product.attributes.length > 0 ? ` | ${product.attributes.join(', ')}` : ''}
-            </p>
-            <div className="flex flex-wrap gap-x-1 items-center mb-2 mt-auto">
-              <p className="text-caption-2 text-gray_r-12">{currencyFormat(product.price.price_discount)}</p>
-              {product.price.discount_percentage > 0 && (
-                <>
-                  <span className="badge-red">{product.price.discount_percentage}%</span>
-                  <p className="text-caption-2 text-gray_r-11 line-through">{currencyFormat(product.price.price)}</p>
-                </>
-              )}
-            </div>
-            <div className="flex items-center">
-              <p className="mr-auto text-caption-2 text-gray_r-12 font-bold">{currencyFormat(product.quantity * product.price.price_discount)}</p>
-              <div className="flex gap-x-2 items-center">
-                <button 
-                  className="btn-red p-2 rounded"
-                  onClick={() => showDeleteConfirmation(product.id)}
-                >
-                  <TrashIcon className="text-red_r-11 w-3"/>
-                </button>
-                <button 
-                  className="btn-light p-2 rounded" 
-                  disabled={product.quantity == 1} 
-                  onClick={() => minusQuantity(product.id)}
-                >
-                  <MinusIcon className={'text-gray_r-12 w-3' + (product.quantity == 1 ? ' text-gray_r-11' : '')}/>
-                </button>
-                <input 
-                  type="number" 
-                  className="bg-transparent border-none w-6 text-center outline-none" 
-                  onBlur={(e) => blurQuantity(product.id, e.target.value)} 
-                  onChange={(e) => updateQuantity(product.id, e.target.value)} 
-                  value={product.quantity} 
-                />
-                <button className="btn-light p-2 rounded" onClick={() => plusQuantity(product.id)}>
-                  <PlusIcon className="text-gray_r-12 w-3"/>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-
-  const ActionButton = () => (
-    <div className="p-4 bg-gray_r-1 sticky bottom-0 border-t-4 border-gray_r-4">
-      <div className="flex">
-        <p>Total</p>
-        <p className="text-gray_r-11 ml-1">{getProductsSelected().length > 0 && (
-          <>({ getProductsSelected().length } Barang)</>
-        )}</p>
-        <p className="font-semibold text-red_r-11 ml-auto">{currencyFormat(totalPriceBeforeTax + totalTaxAmount - totalDiscountAmount)}</p>
-      </div>
-      
-      <div className="flex gap-x-3 mt-4">
-        <button 
-          className="flex-1 btn-light"
-          disabled={getProductsSelected().length == 0}
-        >
-          Quotation {getProductsSelected().length > 0 && `(${getProductsSelected().length})`}
-        </button>
-        <button 
-          className="flex-1 btn-yellow"
-          disabled={getProductsSelected().length == 0}
-          onClick={() => router.push('/shop/checkout')}
-        >
-          Checkout {getProductsSelected().length > 0 && `(${getProductsSelected().length})`}
-        </button>
-      </div>
-    </div>
-  );
-
   return (
     <>
       <ConfirmAlert 
@@ -285,9 +162,19 @@ export default function Cart() {
       <Layout>
         <AppBar title="Keranjang Saya" />
 
-        {isLoadingProducts && <CartLoader /> }
+        {isLoadingProducts && (
+          <div className="flex justify-center items-center gap-x-3 mt-14">
+            <Spinner className="w-10 text-gray_r-8 fill-gray_r-12" />
+          </div>
+        ) }
 
-        { !isLoadingProducts && products.length == 0 && <CartEmpty /> }
+        { !isLoadingProducts && products.length == 0 && (
+          <div className="text-center mt-14">
+            <ExclamationTriangleIcon className="w-12 mx-auto"/>
+            <p className="mt-2 h2">Keranjang belanja anda masih kosong.</p>
+            <Link href="/" className="btn-yellow text-gray_r-12 mx-auto mt-4">Mulai Belanja</Link>
+          </div>
+        ) }
 
         { !isLoadingProducts && products.length > 0 && (
           <>
@@ -298,13 +185,109 @@ export default function Cart() {
 
             <LineDivider />
 
-            <CartWarningAlert />
+            <div className="p-4">
+              <Alert type="warning" className="text-caption-2 flex gap-x-3 items-center">
+                <div>
+                  <ExclamationCircleIcon className="w-8 text-yellow_r-11"/>
+                </div>
+                <span>Mohon dicek kembali & pastikan pesanan kamu sudah sesuai dengan yang kamu butuhkan. Atau bisa hubungi kami.</span>
+              </Alert>
+            </div>
 
             <LineDivider />
 
-            <CartProductList />
+            <div className="p-4 flex flex-col gap-y-6">
+              <div className="flex justify-between items-center">
+                <h2>Daftar Produk Belanja</h2>
+                <Link href="/" className="text-caption-1">Cari Produk Lain</Link>
+              </div>
+              {products.map((product, index) => (
+                <div className="flex gap-x-3" key={index}>
+                  <div className="w-4/12 flex items-center gap-x-2" onClick={() => toggleProductSelected(product.id)}>
+                    <button 
+                      className={'p-2 rounded border-2 ' + (product.selected ? 'border-yellow_r-9 bg-yellow_r-9' : 'border-gray_r-12')} 
+                    ></button>
+                    <Image
+                      src={product.parent.image} 
+                      alt={product.parent.name} 
+                      className="object-contain object-center border border-gray_r-6 h-32 w-full rounded-md"
+                    />
+                  </div>
+                  <div className="w-8/12 flex flex-col">
+                    <Link href={'/shop/product/' + createSlug(product.parent.name, product.parent.id)} className="product-card__title wrap-line-ellipsis-2">
+                      {product.parent.name}
+                    </Link>
+                    <p className="text-caption-2 text-gray_r-11 mt-1">
+                      {product.code || '-'}
+                      {product.attributes.length > 0 ? ` | ${product.attributes.join(', ')}` : ''}
+                    </p>
+                    <div className="flex flex-wrap gap-x-1 items-center mb-2 mt-auto">
+                      <p className="text-caption-2 text-gray_r-12">{currencyFormat(product.price.price_discount)}</p>
+                      {product.price.discount_percentage > 0 && (
+                        <>
+                          <span className="badge-red">{product.price.discount_percentage}%</span>
+                          <p className="text-caption-2 text-gray_r-11 line-through">{currencyFormat(product.price.price)}</p>
+                        </>
+                      )}
+                    </div>
+                    <div className="flex items-center">
+                      <p className="mr-auto text-caption-2 text-gray_r-12 font-bold">{currencyFormat(product.quantity * product.price.price_discount)}</p>
+                      <div className="flex gap-x-2 items-center">
+                        <button 
+                          className="btn-red p-2 rounded"
+                          onClick={() => showDeleteConfirmation(product.id)}
+                        >
+                          <TrashIcon className="text-red_r-11 w-3"/>
+                        </button>
+                        <button 
+                          className="btn-light p-2 rounded" 
+                          disabled={product.quantity == 1} 
+                          onClick={() => minusQuantity(product.id)}
+                        >
+                          <MinusIcon className={'text-gray_r-12 w-3' + (product.quantity == 1 ? ' text-gray_r-11' : '')}/>
+                        </button>
+                        <input 
+                          type="number" 
+                          className="bg-transparent border-none w-6 text-center outline-none" 
+                          onBlur={(e) => blurQuantity(product.id, e.target.value)} 
+                          onChange={(e) => updateQuantity(product.id, e.target.value)} 
+                          value={product.quantity} 
+                        />
+                        <button className="btn-light p-2 rounded" onClick={() => plusQuantity(product.id)}>
+                          <PlusIcon className="text-gray_r-12 w-3"/>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
 
-            <ActionButton />
+            <div className="p-4 bg-gray_r-1 sticky bottom-0 border-t-4 border-gray_r-4">
+              <div className="flex">
+                <p>Total</p>
+                <p className="text-gray_r-11 ml-1">{getProductsSelected().length > 0 && (
+                  <>({ getProductsSelected().length } Barang)</>
+                )}</p>
+                <p className="font-semibold text-red_r-11 ml-auto">{currencyFormat(totalPriceBeforeTax + totalTaxAmount - totalDiscountAmount)}</p>
+              </div>
+              
+              <div className="flex gap-x-3 mt-4">
+                <button 
+                  className="flex-1 btn-light"
+                  disabled={getProductsSelected().length == 0}
+                >
+                  Quotation {getProductsSelected().length > 0 && `(${getProductsSelected().length})`}
+                </button>
+                <button 
+                  className="flex-1 btn-yellow"
+                  disabled={getProductsSelected().length == 0}
+                  onClick={() => router.push('/shop/checkout')}
+                >
+                  Checkout {getProductsSelected().length > 0 && `(${getProductsSelected().length})`}
+                </button>
+              </div>
+            </div>
           </>
         ) }
       </Layout>
diff --git a/src/pages/shop/checkout.js b/src/pages/shop/checkout.js
index 5eef98e5..54f93c44 100644
--- a/src/pages/shop/checkout.js
+++ b/src/pages/shop/checkout.js
@@ -30,7 +30,6 @@ export default function Checkout() {
   const [totalPriceBeforeTax, setTotalPriceBeforeTax] = useState(0);
   const [totalTaxAmount, setTotalTaxAmount] = useState(0);
   const [totalDiscountAmount, setTotalDiscountAmount] = useState(0);
-  const [isLoading, setIsLoading] = useState(true);
   const [finishCheckout, setFinishCheckout] = useState(null);
 
   const payments = [
@@ -106,10 +105,6 @@ export default function Checkout() {
     }
   }, [products]);
 
-  useEffect(() => {
-    if (addresses && products) setIsLoading(false);
-  }, [addresses, products]);
-
   const submit = async () => {
     if (!selectedPayment) {
       toast.error('Mohon pilih metode pembayaran terlebih dahulu', {
@@ -151,11 +146,11 @@ export default function Checkout() {
           </div>
         ) : (
           <>
-            {isLoading && (
+            { !products && !addresses && (
               <div className="flex justify-center items-center gap-x-3 mt-14">
                 <Spinner className="w-10 text-gray_r-8 fill-gray_r-12" />
               </div>
-            )}
+            ) }
 
             { products && addresses && (
               <>
-- 
cgit v1.2.3