bugfix required state on update alamat

1 files changed, 51 insertions, 10 deletions

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'),
 });