diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/pages/my/address/create.js | 108 | ||||
| -rw-r--r-- | src/pages/shop/checkout.js | 2 | ||||
| -rw-r--r-- | src/styles/globals.css | 13 |
3 files changed, 116 insertions, 7 deletions
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 |