<iman> add banner form merchant

1 files changed, 54 insertions, 19 deletions

diff --git a/src/lib/form/components/Merchant.jsx b/src/lib/form/components/Merchant.jsx
index ce0b5430..a5f2c1e8 100644
--- a/src/lib/form/components/Merchant.jsx
+++ b/src/lib/form/components/Merchant.jsx
@@ -18,10 +18,12 @@ import { Radio, RadioGroup, Stack, Divider, Button } from '@chakra-ui/react';
 import { EyeIcon } from '@heroicons/react/24/outline';
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
 import Image from 'next/image';
+import ImageBanner from '~/components/ui/image';
 import { ChevronRightIcon } from '@heroicons/react/24/outline';
 import MobileView from '@/core/components/views/MobileView';
 import DesktopView from '@/core/components/views/DesktopView';
 import getFileBase64 from '@/core/utils/getFileBase64';
+import odooApi from '~/libs/odooApi';
 const CreateMerchant = () => {
   const {
     register,
@@ -69,11 +71,22 @@ const CreateMerchant = () => {
   const [subDistricts, setSubDistricts] = useState([]);
   const [zips, setZips] = useState([]);
   const [isExample, setIsExample] = useState(false);
-  const [company_unit, setCompany_unit] = useState(list_unit);
+  const [BannerMerchant, setBannerMerchant] = useState();
 
   const recaptchaRef = useRef(null);
   const router = useRouter();
 
+  useEffect(() => {
+    const getBanner = async () => {
+      const get = await odooApi('GET', '/api/v1/banner?type=banner-form-tempo');
+      // setBannerMerchant(get[0].image);
+      setBannerMerchant(
+        'http://192.168.23.244:8069/api/image/x_banner.banner/x_banner_image/485'
+      );
+    };
+    getBanner();
+  }, []);
+
   const auth = useAuth();
   if (auth == false) {
     router.push(`/login?next=${encodeURIComponent('/daftar-merchant')}`);
@@ -85,6 +98,7 @@ const CreateMerchant = () => {
         const dataProfile = await addressApi({
           id: auth.parentId ? auth.parentId : auth.partnerId,
         });
+        console.log('dataProfile', dataProfile);
         setValue('company', dataProfile?.name);
         setValue('address', dataProfile?.alamatBisnis);
         setValue('state', parseInt(dataProfile.stateId.id));
@@ -98,7 +112,7 @@ const CreateMerchant = () => {
     };
 
     loadProfile();
-  }, [auth?.parentId, setValue]);
+  }, [auth?.parentId]);
 
   useEffect(() => {
     const loadState = async () => {
@@ -117,23 +131,26 @@ const CreateMerchant = () => {
     if (auth == false) {
       return;
     }
-    const loadCities = async () => {
-      setValue('city', '');
-      let dataCities = await cityApi({ stateId: watchState });
-      dataCities = dataCities?.map((city) => ({
-        value: city.id,
-        label: city.name,
-      }));
-      setCities(dataCities);
-    };
-    loadCities();
-  }, [auth, watchState, setValue]);
+    if (watchState) {
+      // setValue('city', '');
+      const loadCities = async () => {
+        let dataCities = await cityApi({ stateId: watchState });
+        dataCities = dataCities?.map((city) => ({
+          value: city.id,
+          label: city.name,
+        }));
+        setCities(dataCities);
+      };
+      loadCities();
+    }
+  }, [auth, watchState]);
 
   const watchCity = watch('city');
+  console.log('watchCity', watchCity);
 
   useEffect(() => {
-    setValue('district', '');
     if (watchCity) {
+      setValue('district', '');
       const loadDistricts = async () => {
         let dataDistricts = await districtApi({ cityId: watchCity });
         dataDistricts = dataDistricts.map((district) => ({
@@ -144,12 +161,12 @@ const CreateMerchant = () => {
       };
       loadDistricts();
     }
-  }, [watchCity, setValue]);
+  }, [watchCity]);
 
   const watchDistrict = watch('district');
   useEffect(() => {
-    setValue('subDistrict', '');
     if (watchDistrict) {
+      setValue('subDistrict', '');
       const loadSubDistricts = async () => {
         let dataSubDistricts = await subDistrictApi({
           districtId: watchDistrict,
@@ -162,16 +179,16 @@ const CreateMerchant = () => {
       };
       loadSubDistricts();
     }
-  }, [watchDistrict, setValue]);
+  }, [watchDistrict]);
 
   const watchsubDistrict = watch('subDistrict');
 
   useEffect(() => {
-    setValue('zip', '');
     let kelurahan = '';
     let kecamatan = '';
 
     if (watchDistrict) {
+      setValue('zip', '');
       for (const data in districts) {
         if (districts[data].value == watchDistrict) {
           kecamatan = districts[data].label.toLowerCase();
@@ -216,7 +233,7 @@ const CreateMerchant = () => {
 
       loadZip();
     }
-  }, [watchsubDistrict, setValue, subDistricts]);
+  }, [watchsubDistrict, subDistricts]);
   const onSubmitHandler = async (values) => {
     const dokumenKtpDirut = document.getElementById('dokumenKtpDirut').files[0];
     const kartuNama = document.getElementById('kartuNama').files[0];
@@ -339,6 +356,15 @@ const CreateMerchant = () => {
       </BottomPopup>
       <DesktopView>
         <div className='container flex flex-col items-star py-4'>
+          {BannerMerchant && (
+            <ImageBanner
+              src={BannerMerchant}
+              alt='FORM MERCHANT'
+              width={1000}
+              height={160}
+              className='w-full mt-6'
+            />
+          )}
           <h1 className='text-h-sm md:text-title-sm font-semibold mb-6 text-center'>
             Form Merchant
           </h1>
@@ -942,6 +968,15 @@ const CreateMerchant = () => {
       </DesktopView>
       <MobileView>
         <div className='container flex flex-col items-star py-4'>
+          {BannerMerchant && (
+            <ImageBanner
+              src={BannerMerchant}
+              alt='FORM MERCHANT'
+              width={1000}
+              height={160}
+              className='w-full mt-6'
+            />
+          )}
           <h1 className='text-h-sm md:text-title-sm font-semibold mb-6 text-center'>
             Form Merchant
           </h1>