Merge branch 'new-release' into Feature/switch-account

4 files changed, 104 insertions, 20 deletions

diff --git a/src/lib/address/api/cityApi.js b/src/lib/address/api/cityApi.js
index 7873435b..0b0201e6 100644
--- a/src/lib/address/api/cityApi.js
+++ b/src/lib/address/api/cityApi.js
@@ -1,7 +1,7 @@
 import odooApi from '@/core/api/odooApi'
 
-const cityApi = async () => {
-  const dataCities = await odooApi('GET', '/api/v1/city')
+const cityApi = async ({stateId}) => {
+  const dataCities = await odooApi('GET', '/api/v1/city?state_id='+stateId)
   return dataCities
 }
 
diff --git a/src/lib/address/api/stateApi.js b/src/lib/address/api/stateApi.js
new file mode 100644
index 00000000..cea49e7e
--- /dev/null
+++ b/src/lib/address/api/stateApi.js
@@ -0,0 +1,8 @@
+import odooApi from '@/core/api/odooApi'
+
+const stateApi = async () => {
+  const dataState = await odooApi('GET', '/api/v1/state')
+  return dataState
+}
+
+export default stateApi
\ No newline at end of file
diff --git a/src/lib/address/components/CreateAddress.jsx b/src/lib/address/components/CreateAddress.jsx
index e315affe..9d70e8fc 100644
--- a/src/lib/address/components/CreateAddress.jsx
+++ b/src/lib/address/components/CreateAddress.jsx
@@ -12,6 +12,7 @@ import { toast } from 'react-hot-toast';
 import { yupResolver } from '@hookform/resolvers/yup';
 import Menu from '@/lib/auth/components/Menu';
 import useAddresses from '../hooks/useAddresses';
+import stateApi from '../api/stateApi';
 
 const CreateAddress = () => {
   const auth = useAuth();
@@ -28,23 +29,40 @@ const CreateAddress = () => {
     defaultValues,
   });
   const { addresses = [] } = useAddresses(); // Ensure addresses is an array
+  const [states, setState] = useState([]);
   const [cities, setCities] = useState([]);
   const [districts, setDistricts] = useState([]);
   const [subDistricts, setSubDistricts] = useState([]);
   const [filteredTypes, setFilteredTypes] = useState(types); // State to manage filtered types
 
   useEffect(() => {
-    const loadCities = async () => {
-      let dataCities = await cityApi();
-      dataCities = dataCities.map((city) => ({
-        value: city.id,
-        label: city.name,
+    const loadState = async () => {
+      let dataState = await stateApi();
+      dataState = dataState.map((state) => ({
+        value: state.id,
+        label: state.name,
       }));
-      setCities(dataCities);
+      setState(dataState);
     };
-    loadCities();
+    loadState();
   }, []);
 
+  const watchState = watch('state');
+  useEffect(() => {
+    setValue('city', '');
+    if (watchState) {
+      const loadCities = async () => {
+        let dataCities = await cityApi({stateId: watchState});
+        dataCities = dataCities.map((city) => ({
+          value: city.id,
+          label: city.name,
+        }));
+        setCities(dataCities);
+      };
+      loadCities();
+    }
+  }, [watchState, setValue]);
+
   useEffect(() => {
     if (addresses) {
       let hasContactAddress = false;
@@ -100,6 +118,7 @@ const CreateAddress = () => {
   const onSubmitHandler = async (values) => {
     const data = {
       ...values,
+      state_id: values.state,
       city_id: values.city,
       district_id: values.district,
       sub_district_id: values.subDistrict,
@@ -205,12 +224,26 @@ const CreateAddress = () => {
             </div>
 
             <div>
+              <label className='form-label mb-2'>Provinsi</label>
+              <Controller
+                name='state'
+                control={control}
+                render={(props) => (
+                  <HookFormSelect {...props} options={states} />
+                )}
+              />
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.state?.message}
+              </div>
+            </div>
+
+            <div>
               <label className='form-label mb-2'>Kota</label>
               <Controller
                 name='city'
                 control={control}
                 render={(props) => (
-                  <HookFormSelect {...props} options={cities} />
+                  <HookFormSelect {...props} options={cities}  disabled={!watchState}/>
                 )}
               />
               <div className='text-caption-2 text-danger-500 mt-1'>
@@ -270,6 +303,7 @@ const validationSchema = Yup.object().shape({
   mobile: Yup.string().required('Harus di-isi'),
   street: Yup.string().required('Harus di-isi'),
   zip: Yup.string().required('Harus di-isi'),
+  state: Yup.string().required('Harus di-pilih'),
   city: Yup.string().required('Harus di-pilih'),
   district: Yup.string().required('Harus di-pilih'),
 });
@@ -280,6 +314,7 @@ const defaultValues = {
   email: '',
   mobile: '',
   street: '',
+  state: '',
   city: '',
   district: '',
   subDistrict: '',
diff --git a/src/lib/address/components/EditAddress.jsx b/src/lib/address/components/EditAddress.jsx
index 182c8a31..23cf72a9 100644
--- a/src/lib/address/components/EditAddress.jsx
+++ b/src/lib/address/components/EditAddress.jsx
@@ -13,6 +13,7 @@ import { toast } from 'react-hot-toast';
 import Menu from '@/lib/auth/components/Menu';
 import useAuth from '@/core/hooks/useAuth';
 import odooApi from '@/core/api/odooApi';
+import stateApi from '../api/stateApi';
 
 const EditAddress = ({ id, defaultValues }) => {
   const auth = useAuth();
@@ -29,9 +30,11 @@ const EditAddress = ({ id, defaultValues }) => {
     resolver: yupResolver(validationSchema),
     defaultValues,
   });
+
+  const [states, setStates] = useState([]);
   const [cities, setCities] = useState([]);
   const [districts, setDistricts] = useState([]);
-  const [subDistricts, setSubDistricts] = useState([]);
+  const [subDistricts, setSubDistricts] = useState([]); 
 
   useEffect(() => {
     const loadProfile = async () => {
@@ -48,16 +51,38 @@ const EditAddress = ({ id, defaultValues }) => {
   }, [auth?.parentId]);
 
   useEffect(() => {
-    const loadCities = async () => {
-      let dataCities = await cityApi();
-      dataCities = dataCities.map((city) => ({
-        value: city.id,
-        label: city.name,
+    const loadStates = async () => {
+      let dataStates = await stateApi();
+      dataStates = dataStates.map((state) => ({
+        value: state.id,
+        label: state.name,
       }));
-      setCities(dataCities);
+      setStates(dataStates);
     };
-    loadCities();
-  }, []);
+    loadStates();
+  },[])
+
+  const watchState = watch('state');
+  useEffect(() => {
+    setValue('city', '');
+    if(watchState) {
+      const loadCities = async () => {
+        let dataCities = await cityApi({ stateId: watchState });
+        dataCities = dataCities.map((city) => ({
+          value: city.id,
+          label: city.name,
+        }));
+        setCities(dataCities);
+        let oldCity = getValues('oldCity');
+        if (oldCity) {
+          setValue('city', oldCity);
+          setValue('oldCity', '');
+        }
+      };
+      loadCities();
+    }
+    
+  }, [watchState, setValue, getValues]);
 
   const watchCity = watch('city');
   useEffect(() => {
@@ -107,6 +132,7 @@ const EditAddress = ({ id, defaultValues }) => {
     const data = {
       ...values,
       phone: values.mobile,
+      state_id: values.state,
       city_id: values.city,
       district_id: values.district,
       sub_district_id: values.subDistrict,
@@ -242,12 +268,26 @@ const EditAddress = ({ id, defaultValues }) => {
               </div>
 
               <div>
+                <label className='form-label mb-2'>Provinsi</label>
+                <Controller
+                  name='state'
+                  control={control}
+                  render={(props) => (
+                    <HookFormSelect {...props} options={states} />
+                  )}
+                />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.state?.message}
+                </div>
+              </div>
+
+              <div>
                 <label className='form-label mb-2'>Kota</label>
                 <Controller
                   name='city'
                   control={control}
                   render={(props) => (
-                    <HookFormSelect {...props} options={cities} />
+                    <HookFormSelect {...props} options={cities} disabled={!watchState} />
                   )}
                 />
                 <div className='text-caption-2 text-danger-500 mt-1'>
@@ -308,6 +348,7 @@ const validationSchema = Yup.object().shape({
   mobile: Yup.string().required('Harus di-isi'),
   street: Yup.string().required('Harus di-isi'),
   zip: Yup.string().required('Harus di-isi'),
+  state : Yup.string().required('Harus di-pilih'),
   city: Yup.string().required('Harus di-pilih'),
   district: Yup.string().required('Harus di-pilih'),
 });