no message

1 files changed, 123 insertions, 109 deletions

diff --git a/src/pages/shop/checkout.js b/src/pages/shop/checkout.js
index 0fbf8556..6b3231df 100644
--- a/src/pages/shop/checkout.js
+++ b/src/pages/shop/checkout.js
@@ -8,6 +8,7 @@ import Layout from "../../components/Layout";
 import LineDivider from "../../components/LineDivider";
 import Link from "../../components/Link";
 import ProgressBar from "../../components/ProgressBar";
+import Spinner from "../../components/Spinner";
 import apiOdoo from "../../helpers/apiOdoo";
 import { useAuth } from "../../helpers/auth";
 import { getCart } from "../../helpers/cart";
@@ -24,6 +25,7 @@ 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 payments = [
     { name: 'BCA', number: '8870-4000-81' },
@@ -99,136 +101,148 @@ export default function Checkout() {
     }
   }, [products]);
 
+  useEffect(() => {
+    if (address && products) setIsLoading(false);
+  }, [address, products]);
+
   return (
     <Layout>
       <AppBar title="Checkout" />
 
-      <ProgressBar 
-        current={2}
-        labels={['Keranjang', 'Pembayaran', 'Selesai']}
-      />
-
-      <LineDivider/>
-
-      <Alert type="info" className="text-caption-2 flex gap-x-3 items-center my-2">
-        <div>
-          <ExclamationCircleIcon className="w-6 text-blue-700"/>
+      {isLoading && (
+        <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>
-        <span>Jika mengalami kesulitan dalam melakukan pembelian di website Indoteknik. Hubungi kami disini</span>
-      </Alert>
+      )}
 
-      <LineDivider/>
+      { products && address && (
+        <>
+          <ProgressBar 
+            current={2}
+            labels={['Keranjang', 'Pembayaran', 'Selesai']}
+          />
 
-      <div className="p-4">
-        <div className="flex justify-between items-center">
-          <h2>Alamat Pengiriman</h2>
-          <Link className="text-caption-1" href="/">Ubah Alamat</Link>
-        </div>
+          <LineDivider/>
 
-        { selectedAddress && (
-          <div className="mt-4 text-caption-1">
-            <p className="font-medium">{ selectedAddress.name }</p>
-            <p className="mt-2 text-gray_r-11">{ selectedAddress.mobile }</p>
-            <p className="mt-1 text-gray_r-11">{ selectedAddress.street } { selectedAddress.street2 }</p>
-          </div>
-        ) }
-      </div>
-
-      <LineDivider/>
-
-      <div className="p-4 flex flex-col gap-y-4">
-        {products && products.map((product, index) => (
-          <div className="flex gap-x-3" key={index}>
-            <div className="w-4/12 flex items-center gap-x-2">
-              <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"
-              />
+          <Alert type="info" className="text-caption-2 flex gap-x-3 items-center my-2">
+            <div>
+              <ExclamationCircleIcon className="w-6 text-blue-700"/>
             </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>
-              <p className="text-caption-2 text-gray_r-11 mt-1">
-                {currencyFormat(product.price.price_discount)} × {product.quantity} Barang
-              </p>
-              <p className="text-caption-2 text-gray_r-12 font-bold mt-2">
-                {currencyFormat(product.quantity * product.price.price_discount)}
-              </p>
+            <span>Jika mengalami kesulitan dalam melakukan pembelian di website Indoteknik. Hubungi kami disini</span>
+          </Alert>
+
+          <LineDivider/>
+
+          <div className="p-4">
+            <div className="flex justify-between items-center">
+              <h2>Alamat Pengiriman</h2>
+              <Link className="text-caption-1" href="/">Ubah Alamat</Link>
             </div>
+
+            { selectedAddress && (
+              <div className="mt-4 text-caption-1">
+                <p className="font-medium">{ selectedAddress.name }</p>
+                <p className="mt-2 text-gray_r-11">{ selectedAddress.mobile }</p>
+                <p className="mt-1 text-gray_r-11">{ selectedAddress.street } { selectedAddress.street2 }</p>
+              </div>
+            ) }
           </div>
-        ))}
-      </div>
-
-      <LineDivider/>
-      
-      {products && (
-        <div className="p-4">
-          <div className="flex justify-between items-center">
-            <h2>Ringkasan Pesanan</h2>
-            <p className="text-gray_r-11 text-caption-1">{products.length} Barang</p>
+
+          <LineDivider/>
+
+          <div className="p-4 flex flex-col gap-y-4">
+            {products.map((product, index) => (
+              <div className="flex gap-x-3" key={index}>
+                <div className="w-4/12 flex items-center gap-x-2">
+                  <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>
+                  <p className="text-caption-2 text-gray_r-11 mt-1">
+                    {currencyFormat(product.price.price_discount)} × {product.quantity} Barang
+                  </p>
+                  <p className="text-caption-2 text-gray_r-12 font-bold mt-2">
+                    {currencyFormat(product.quantity * product.price.price_discount)}
+                  </p>
+                </div>
+              </div>
+            ))}
           </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>
+
+          <LineDivider/>
+          
+          <div className="p-4">
+            <div className="flex justify-between items-center">
+              <h2>Ringkasan Pesanan</h2>
+              <p className="text-gray_r-11 text-caption-1">{products.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>
+
+          <LineDivider/>
+          
+          <div className="p-4">
+            <h2>Pilih Metode Pembayaran</h2>
+            <div className="grid gap-y-3 mt-4">
+              { payments.map((payment, index) => (
+                <button 
+                  type="button" 
+                  className={"text-left border border-gray_r-6 rounded-md p-3 " + (selectedPayment == payment.name && 'border-yellow_r-10 bg-yellow_r-3')} 
+                  onClick={() => changePayment(index)}
+                  key={index}
+                >
+                  <p>{payment.name} - {payment.number}</p>
+                  <p className="mt-1 text-gray_r-11">PT. Indoteknik Dotcom Gemilang</p>
+                </button>
+              )) }
+            </div>
           </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>
-      )}
 
-      <LineDivider/>
-      
-      <div className="p-4">
-        <h2>Pilih Metode Pembayaran</h2>
-        <div className="grid gap-y-3 mt-4">
-          { payments.map((payment, index) => (
+          <LineDivider/>
+
+          <div className="flex gap-x-3 p-4">
             <button 
-              type="button" 
-              className={"text-left border border-gray_r-6 rounded-md p-3 " + (selectedPayment == payment.name && 'border-yellow_r-10 bg-yellow_r-3')} 
-              onClick={() => changePayment(index)}
-              key={index}
+              className="flex-1 btn-yellow"
+              onClick={() => router.push('/shop/checkout')}
             >
-              <p>{payment.name} - {payment.number}</p>
-              <p className="mt-1 text-gray_r-11">PT. Indoteknik Dotcom Gemilang</p>
+              Bayar
             </button>
-          )) }
-        </div>
-      </div>
-
-      <LineDivider/>
-
-      <div className="flex gap-x-3 p-4">
-        <button 
-          className="flex-1 btn-yellow"
-          onClick={() => router.push('/shop/checkout')}
-        >
-          Bayar
-        </button>
-      </div>
+          </div>
+        </>
+      ) }
     </Layout>
   )
 }
\ No newline at end of file