From b3be7e6d5c320764ef3ca38df196218abf9be25b Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Tue, 10 Dec 2024 10:05:47 +0700
Subject: <iman> move formulis & add state field

---
 src/lib/form/components/Merchant.jsx | 56 ++++++++++++++++++++++++++++++------
 1 file changed, 47 insertions(+), 9 deletions(-)

(limited to 'src/lib/form/components/Merchant.jsx')

diff --git a/src/lib/form/components/Merchant.jsx b/src/lib/form/components/Merchant.jsx
index 85f72bf8..ee7d177d 100644
--- a/src/lib/form/components/Merchant.jsx
+++ b/src/lib/form/components/Merchant.jsx
@@ -1,5 +1,6 @@
 import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
 import cityApi from '@/lib/address/api/cityApi';
+import stateApi from '@/lib/address/api/stateApi.js';
 import { yupResolver } from '@hookform/resolvers/yup';
 import React, { useEffect, useRef, useState } from 'react';
 import ReCAPTCHA from 'react-google-recaptcha';
@@ -9,8 +10,7 @@ import * as Yup from 'yup';
 import createLeadApi from '../api/createLeadApi';
 import PageContent from '@/lib/content/components/PageContent';
 import { useRouter } from 'next/router';
-import useAuth from '@/core/hooks/useAuth'
-
+import useAuth from '@/core/hooks/useAuth';
 
 const CreateMerchant = () => {
   const {
@@ -19,6 +19,8 @@ const CreateMerchant = () => {
     formState: { errors },
     control,
     reset,
+    watch,
+    setValue,
   } = useForm({
     resolver: yupResolver(validationSchema),
     defaultValues,
@@ -50,27 +52,45 @@ const CreateMerchant = () => {
     },
   ];
   const [cities, setCities] = useState([]);
+  const [state, setState] = useState([]);
   const [company_unit, setCompany_unit] = useState(list_unit);
 
   const recaptchaRef = useRef(null);
-  const router = useRouter()
+  const router = useRouter();
+
+  const auth = useAuth();
+  if (auth == false) {
+    router.push(`/login?next=${encodeURIComponent('/daftar-merchant')}`);
+  }
 
-  const auth = useAuth()
+  useEffect(() => {
+    const loadState = async () => {
+      let dataState = await stateApi();
+      dataState = dataState.map((state) => ({
+        value: state.id,
+        label: state.name,
+      }));
+      setState(dataState);
+    };
+    loadState();
+  }, []);
 
+  const watchState = watch('state');
   useEffect(() => {
-    if(auth == false) {
-      router.push('/login')
+    if (auth == false) {
+      return;
     }
     const loadCities = async () => {
-      let dataCities = await cityApi();
-      dataCities = dataCities.map((city) => ({
+      setValue('city', '');
+      let dataCities = await cityApi({ stateId: watchState });
+      dataCities = dataCities?.map((city) => ({
         value: city.id,
         label: city.name,
       }));
       setCities(dataCities);
     };
     loadCities();
-  }, [auth]);
+  }, [auth, watchState, setValue]);
 
   const onSubmitHandler = async (values) => {
     const recaptchaValue = recaptchaRef.current.getValue();
@@ -111,6 +131,9 @@ const CreateMerchant = () => {
       recaptchaRef.current.reset();
     }
   };
+  if (!auth) {
+    return;
+  }
   return (
     <div className='container mx-auto p-4 md:p-0 my-0 md:my-10'>
       <h1 className='text-h-sm md:text-title-sm font-semibold mb-6'>
@@ -172,6 +195,19 @@ const CreateMerchant = () => {
                 </div>
               </div>
             </div>
+            <div>
+              <label className='form-label mb-2'>Provinsi*</label>
+              <Controller
+                name='state'
+                control={control}
+                render={(props) => (
+                  <HookFormSelect {...props} options={state} />
+                )}
+              />
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.state?.message}
+              </div>
+            </div>
             <div className=''>
               <div>
                 <label className='form-label mb-2'>Kota*</label>
@@ -290,6 +326,7 @@ const validationSchema = Yup.object().shape({
     .required('Harus di-isi'),
   phone: Yup.string().required('Harus di-isi'),
   cp: Yup.string().required('Harus di-isi'),
+  state: Yup.string().required('Harus dipilih'),
   city: Yup.string().required('Harus di-isi'),
   company_unit: Yup.string().required('Harus di-isi'),
   address: Yup.string().required('Harus di-isi'),
@@ -300,6 +337,7 @@ const defaultValues = {
   company: '',
   email: '',
   phone: '',
+  state: '',
   city: '',
   company_unit: '',
   cp: '',
-- 
cgit v1.2.3