2 files changed, 102 insertions, 18 deletions

diff --git a/src/pages/shop/cart.js b/src/pages/shop/cart.js
index 9fd44410..6fe079b3 100644
--- a/src/pages/shop/cart.js
+++ b/src/pages/shop/cart.js
@@ -4,6 +4,7 @@ import {
   TrashIcon,
   PlusIcon,
   MinusIcon,
+  ExclamationCircleIcon,
 } from "@heroicons/react/24/solid";
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 import { useRouter } from "next/router";
@@ -41,23 +42,23 @@ export default function Cart() {
     show: false
   });
 
-  const getProducts = async () => {
-    let cart = getCart();
-    let productIds = Object.keys(cart);
-    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,
-        to_process: cart[product.id].to_process,
-      }));
-      setProducts(dataProducts);
-    }
-    setIsLoadingProducts(false);
-  }
-
+  
   useEffect(() => {
+    const getProducts = async () => {
+      let cart = getCart();
+      let productIds = Object.keys(cart);
+      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,
+          to_process: cart[product.id].to_process,
+        }));
+        setProducts(dataProducts);
+      }
+      setIsLoadingProducts(false);
+    }
     getProducts();
   }, []);
 
@@ -188,7 +189,7 @@ export default function Cart() {
             {/* --- Start Alert */}
             <Alert type="warning" className="text-caption-2 flex gap-x-3 items-center my-2">
               <div>
-                <ExclamationTriangleIcon className="w-8"/>
+                <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>
diff --git a/src/pages/shop/checkout.js b/src/pages/shop/checkout.js
index 48cbc10e..b1704cbc 100644
--- a/src/pages/shop/checkout.js
+++ b/src/pages/shop/checkout.js
@@ -1,9 +1,57 @@
+import { ExclamationCircleIcon } from "@heroicons/react/24/solid";
+import { useEffect, useState } from "react";
+import Alert from "../../components/Alert";
 import AppBar from "../../components/AppBar";
 import Layout from "../../components/Layout";
+import LineDivider from "../../components/LineDivider";
+import Link from "../../components/Link";
 import ProgressBar from "../../components/ProgressBar";
+import apiOdoo from "../../helpers/apiOdoo";
+import { useAuth } from "../../helpers/auth";
+import { getCart } from "../../helpers/cart";
 
 
 export default function Checkout() {
+  const [auth, setAuth] = useAuth();
+  const [address, setAddress] = useState(null);
+  const [selectedAddress, setSelectedAddress] = useState(null);
+  const [products, setProducts] = useState(null);
+
+  useEffect(() => {
+    const getAddress = async () => {
+      if (auth?.id) {
+        const dataAddress = await apiOdoo('GET', `/api/v1/user/${auth.id}/address`);
+        setAddress(dataAddress);
+      }
+    };
+    getAddress();
+  }, [auth]);
+
+  useEffect(() => {
+    const getProducts = async () => {
+      let cart = getCart();
+      let productIds = Object
+        .values(cart)
+        .filter((itemCart) => itemCart.to_process == 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,
+          to_process: cart[product.id].to_process,
+        }));
+        setProducts(dataProducts);
+      }
+    };
+    getProducts();
+  }, []);
+  
+  useEffect(() => {
+    if (address) setSelectedAddress(address[0]);
+  }, [address]);
+
   return (
     <Layout>
       <AppBar title="Checkout" />
@@ -12,6 +60,41 @@ export default function Checkout() {
         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"/>
+        </div>
+        <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>
+
+      <LineDivider/>
     </Layout>
   )
-}
\ No newline at end of file
+}
+// odoo = 1677721600
+// from = 3026531840
+// to = 3355443200
+
+// odoo = 629145600
+// from = 2355443200
+// to = 1258291200
\ No newline at end of file