From 3b4d6bf4f389cbb680e4bd5a0776e31d058b4195 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Mon, 9 Jan 2023 17:09:11 +0700
Subject: form create address

---
 src/pages/my/address/create.js | 108 ++++++++++++++++++++++++++++++++++++++---
 src/pages/shop/checkout.js     |   2 +-
 src/styles/globals.css         |  13 +++++
 3 files changed, 116 insertions(+), 7 deletions(-)

(limited to 'src')

diff --git a/src/pages/my/address/create.js b/src/pages/my/address/create.js
index 458b1921..128da491 100644
--- a/src/pages/my/address/create.js
+++ b/src/pages/my/address/create.js
@@ -1,14 +1,75 @@
 import AppBar from "../../../components/AppBar";
 import Layout from "../../../components/Layout";
 import WithAuth from "../../../components/WithAuth";
+import apiOdoo from "../../../helpers/apiOdoo";
+import ReactSelect from "react-select";
+import { useEffect, useState } from "react";
 
 export default function CreateAddress() {
+  // Master Data
+  const [cities, setCities] = useState([]);
+  const [districts, setDistricts] = useState([]);
+  const [subDistricts, setSubDistricts] = useState([]);
+
+  // Input Data
+  const [city, setCity] = useState(null);
+  const [district, setDistrict] = useState(null);
+  const [subDistrict, setSubDistrict] = useState(null);
+  const [formValue, setFormValue] = useState({});
+  
+  useEffect(() => {
+    if (cities.length == 0) {
+      const loadCities = async () => {
+        let dataCities = await apiOdoo('GET', '/api/v1/city');
+        setCities(dataCities);
+      };
+      loadCities();
+    }
+  }, [cities]);
+  
+  useEffect(() => {
+    setDistrict(null);
+    if (city) {
+      const loadDistricts = async () => {
+        let dataDistricts = await apiOdoo('GET', `/api/v1/district?city_id=${city.id}`);
+        setDistricts(dataDistricts);
+      };
+      loadDistricts();
+    }
+  }, [city]);
+
+  useEffect(() => {
+    setSubDistrict(null);
+    if (district) {
+      const loadSubDistricts = async () => {
+        let dataSubDistricts = await apiOdoo('GET', `/api/v1/sub_district?district_id=${district.id}`);
+        console.log(dataSubDistricts);
+        setSubDistricts(dataSubDistricts);
+      };
+      loadSubDistricts();
+    }
+  }, [district]);
+
+  const handleChange = (e) => {
+    setFormValue({
+      ...formValue,
+      [e.target.name]: e.target.value
+    });
+  };
+  
   return (
     <WithAuth>
       <Layout>
         <AppBar title="Tambah Alamat" />
 
         <form className="px-4">
+          <label className="form-label mt-4 mb-2">Label Alamat</label>
+          <input 
+            type="text"
+            className="form-input" 
+            placeholder="Invoice Address"
+            name="name"
+          />
           <label className="form-label mt-4 mb-2">Nama Kontak</label>
           <input 
             type="text"
@@ -16,6 +77,13 @@ export default function CreateAddress() {
             placeholder="John Doe"
             name="name"
           />
+          <label className="form-label mt-4 mb-2">Email <span className="text-gray_r-11">(opsional)</span></label>
+          <input 
+            type="text"
+            className="form-input" 
+            placeholder="johndoe@gmail.com"
+            name="name"
+          />
           <label className="form-label mt-4 mb-2">No. Handphone</label>
           <input 
             type="tel"
@@ -30,12 +98,40 @@ export default function CreateAddress() {
             placeholder="Jl. Bandengan Utara"
             name="street"
           />
-          <label className="form-label mt-4 mb-2">Kota atau Kecamatan</label>
-          <input 
-            type="text"
-            className="form-input" 
-            placeholder="Kel. Penjaringan Kec. Penjaringan Kota Jakarta Utara"
-            name="street2"
+          <label className="form-label mt-4 mb-2">Kota</label>
+          <ReactSelect
+            placeholder="Pilih kota..."
+            classNamePrefix="form-select"
+            classNames={{ control: (state) => state.menuIsOpen || state.isFocused ? '!border-yellow_r-9' : '' }}
+            options={cities}
+            getOptionLabel={e => e.name}
+            getOptionValue={e => e.id}
+            onChange={(value) => setCity(value)}
+            value={city}
+          />
+          <label className="form-label mt-4 mb-2">Kecamatan <span className="text-gray_r-11">(opsional)</span></label>
+          <ReactSelect
+            placeholder="Pilih Kecamatan..."
+            classNamePrefix="form-select"
+            classNames={{ control: (state) => state.menuIsOpen || state.isFocused ? '!border-yellow_r-9' : '' }}
+            options={districts}
+            getOptionLabel={e => e.name}
+            getOptionValue={e => e.id}
+            onChange={(value) => setDistrict(value)}
+            value={district}
+            isDisabled={!city}
+          />
+          <label className="form-label mt-4 mb-2">Kelurahan <span className="text-gray_r-11">(opsional)</span></label>
+          <ReactSelect
+            placeholder="Pilih Kelurahan..."
+            classNamePrefix="form-select"
+            classNames={{ control: (state) => state.menuIsOpen || state.isFocused ? '!border-yellow_r-9' : '' }}
+            options={subDistricts}
+            getOptionLabel={e => e.name}
+            getOptionValue={e => e.id}
+            onChange={(value) => setSubDistrict(value)}
+            value={subDistrict}
+            isDisabled={!district}
           />
           <label className="form-label mt-4 mb-2">Kode Pos</label>
           <input 
diff --git a/src/pages/shop/checkout.js b/src/pages/shop/checkout.js
index a72b8976..5eef98e5 100644
--- a/src/pages/shop/checkout.js
+++ b/src/pages/shop/checkout.js
@@ -141,7 +141,7 @@ export default function Checkout() {
           <div className="m-4 rounded-xl bg-yellow_r-4 text-center border border-yellow_r-7">
             <div className="px-4 py-6">
               <p className="h2 mb-2">Terima Kasih atas Pembelian Anda</p>
-              <p className="text-gray_r-11 mb-4">Details pembelian sudah kami kirimkan melalui email anda. Mohon dicek kembali. jika tidak menerima email anda dapat menghubungi kami disini.</p>
+              <p className="text-gray_r-11 mb-4 leading-6">Details pembelian sudah kami kirimkan melalui email anda. Mohon dicek kembali. jika tidak menerima email anda dapat menghubungi kami disini.</p>
               <p className="mb-2 font-medium">{ finishCheckout.name }</p>
               <p className="text-caption-2 text-gray_r-11">No. Transaksi</p>
             </div>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index fbaaf923..e90228bd 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -387,4 +387,17 @@ html, body {
         ease-linear
         duration-300
     ;
+}
+
+.form-select__placeholder {
+    @apply
+        !text-gray_r-9
+    ;
+}
+
+.form-select__control {
+    @apply
+        !shadow-none
+        !border-gray_r-7
+    ;
 }
\ No newline at end of file
-- 
cgit v1.2.3