From e186f6123a13bd2976dc3cf2b2eb8f98f9430f51 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <rafizadanly@gmail.com>
Date: Wed, 28 Dec 2022 12:01:39 +0700
Subject: no message

---
 src/components/ProgressBar.js |   9 +-
 src/pages/shop/cart.js        | 277 +++++++++++++++++++++---------------------
 2 files changed, 143 insertions(+), 143 deletions(-)

(limited to 'src')

diff --git a/src/components/ProgressBar.js b/src/components/ProgressBar.js
index cdb55205..8a2df0a4 100644
--- a/src/components/ProgressBar.js
+++ b/src/components/ProgressBar.js
@@ -1,12 +1,11 @@
-import { CheckIcon } from "@heroicons/react/24/outline";
-import { CheckCircleIcon } from "@heroicons/react/24/solid";
+import { Fragment } from "react";
 
 const ProgressBar = ({ current, labels }) => {
   return (
     <div className="bg-gray_r-1 flex gap-x-2 p-4 rounded-md">
       {labels.map((label, index) => (
-        <>
-          <div className={"flex gap-x-2 items-center " + (index < current ? 'text-gray_r-12' : 'text-gray_r-11')} key={index}>
+        <Fragment key={index}>
+          <div className={"flex gap-x-2 items-center " + (index < current ? 'text-gray_r-12' : 'text-gray_r-11')}>
             <div className={"leading-none p-2 rounded-full w-7 text-center text-caption-2 " + (index < current ? 'bg-yellow_r-9' : 'bg-gray_r-6')}>
               { index + 1 }
             </div>
@@ -17,7 +16,7 @@ const ProgressBar = ({ current, labels }) => {
               <div className="h-0.5 w-full bg-gray_r-7"></div>
             </div>
           ) }
-        </>
+        </Fragment>
       ))}
     </div>
   )
diff --git a/src/pages/shop/cart.js b/src/pages/shop/cart.js
index 5a228077..f4a07295 100644
--- a/src/pages/shop/cart.js
+++ b/src/pages/shop/cart.js
@@ -161,167 +161,168 @@ export default function Cart() {
       <Layout>
         <AppBar title="Keranjang Saya" />
 
-        <ProgressBar 
-          current={1}
-          labels={['Keranjang', 'Pembayaran', 'Selesai']}
-        />
-
-        <hr className="h-1.5 bg-gray_r-3 border-none"/>
-
-        {/* --- Start Alert */}
-        {!isLoadingProducts && (
-          <Alert type="warning" className="text-caption-2 flex gap-x-3 items-center">
-            <div>
-              <ExclamationTriangleIcon className="w-8"/>
-            </div>
-            <span>
-              {products.length > 0 ? (
-                <>Mohon dicek kembali & pastikan pesanan kamu sudah sesuai dengan yang kamu butuhkan. Atau bisa hubungi kami.</>
-              ) : (
-                <>Anda belum menambahkan barang apapun ke keranjang.</>
-              )} 
-            </span>
-          </Alert>
-        )}
-        {/* ---- End Alert */}
-
         {isLoadingProducts && (
           <div className="flex justify-center items-center gap-x-3">
             <Spinner className="w-4 h-4 text-gray_r-8 fill-gray_r-12" /> <span>Loading...</span>
           </div>
         )}
 
-        <hr className="h-1.5 bg-gray_r-3 border-none"/>
+        { !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 && (
+          <>
+            <ProgressBar 
+              current={1}
+              labels={['Keranjang', 'Pembayaran', 'Selesai']}
+            />
 
-        <div className="p-4">
-          {/* [Start] Product List */}
-          <div className="flex flex-col gap-y-6">
-          {products.map((product, index) => (
-            <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-12')} 
-                  onClick={() => toggleProductToProcess(product.id)}
-                ></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"
-                />
+            <hr className="h-1.5 bg-gray_r-3 border-none"/>
+
+            {/* --- Start Alert */}
+            <Alert type="warning" className="text-caption-2 flex gap-x-3 items-center">
+              <div>
+                <ExclamationTriangleIcon className="w-8"/>
               </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>
+              <span>Mohon dicek kembali & pastikan pesanan kamu sudah sesuai dengan yang kamu butuhkan. Atau bisa hubungi kami.</span>
+            </Alert>
+            {/* ---- End Alert */}
+
+            <hr className="h-1.5 bg-gray_r-3 border-none"/>
+
+            <div className="p-4">
+              {/* [Start] Product List */}
+              <div className="flex flex-col gap-y-6">
+              {products.map((product, index) => (
+                <div className="flex gap-x-3" key={index}>
+                  <div className="w-4/12 flex items-center gap-x-2">
                     <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} 
+                      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>
+                    <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"
                     />
-                    <button className="btn-light p-2 rounded" onClick={() => plusQuantity(product.id)}>
-                      <PlusIcon className="text-gray_r-12 w-3"/>
-                    </button>
+                  </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>
+              {/* [End] Product List */}
             </div>
-          ))}
-          </div>
-          {/* [End] Product List */}
-        </div>
 
-        <hr className="h-1.5 bg-gray_r-3 border-none"/>
+            <hr className="h-1.5 bg-gray_r-3 border-none"/>
 
-        <div className="p-4">
-          {/* [Start] Review Order */}
-          {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 text-caption-1">{getProductsToProcess().length} Barang</p>
-                ) : ''}
-              </div>
-              <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 className="p-4">
+              {/* [Start] Review Order */}
+              <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 text-caption-1">{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>Grand 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>Grand Total</p>
-                <p className="font-medium text-yellow_r-11">{currencyFormat(totalPriceBeforeTax + totalTaxAmount - totalDiscountAmount)}</p>
+              {/* [End] Review Order */}
+              
+              {/* [Start] Submit Button */}
+              <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}
+                  onClick={() => router.push('/shop/checkout')}
+                >
+                  Checkout {getProductsToProcess().length > 0 && `(${getProductsToProcess().length})`}
+                </button>
               </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 */}
+              {/* [End] Submit Button */}
 
-          {/* [Start] Submit Button */}
-          {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}
-                onClick={() => router.push('/shop/checkout')}
-              >
-                Checkout {getProductsToProcess().length > 0 ? `(${getProductsToProcess().length})` : ''}
-              </button>
             </div>
-          ) : ''}
-          {/* [End] Submit Button */}
-        </div>
+          </>
+        ) }
       </Layout>
     </>
   );
-- 
cgit v1.2.3