Merged in Feature/new-register (pull request #326)

Feature/new register

1 files changed, 197 insertions, 63 deletions

diff --git a/src/lib/auth/components/CompanyProfile.jsx b/src/lib/auth/components/CompanyProfile.jsx
index 2faede9b..7bda992f 100644
--- a/src/lib/auth/components/CompanyProfile.jsx
+++ b/src/lib/auth/components/CompanyProfile.jsx
@@ -1,78 +1,136 @@
-import odooApi from '@/core/api/odooApi'
-import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'
-import useAuth from '@/core/hooks/useAuth'
-import addressApi from '@/lib/address/api/addressApi'
-import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline'
-import { useEffect, useState } from 'react'
-import { Controller, useForm } from 'react-hook-form'
-import { toast } from 'react-hot-toast'
+import odooApi from '@/core/api/odooApi';
+import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
+import useAuth from '@/core/hooks/useAuth';
+import addressApi from '@/lib/address/api/addressApi';
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
+import { useEffect, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as Yup from 'yup';
 
 const CompanyProfile = () => {
-  const auth = useAuth()
-  const [isOpen, setIsOpen] = useState(false)
-  const toggle = () => setIsOpen(!isOpen)
-  const { register, setValue, control, handleSubmit } = useForm({
-    defaultValues: {
-      industry: '',
-      companyType: '',
-      name: '',
-      taxName: '',
-      npwp: ''
-    }
-  })
+  const [changeConfirmation, setChangeConfirmation] = useState(false);
+  const auth = useAuth();
+  const [isOpen, setIsOpen] = useState(false);
+  const toggle = () => setIsOpen(!isOpen);
+  const {
+    register,
+    formState: { errors },
+    setValue,
+    control,
+    handleSubmit,
+  } = useForm({
+    resolver: yupResolver(validationSchema),
+    defaultValues,
+  });
 
-  const [industries, setIndustries] = useState([])
+  const [industries, setIndustries] = useState([]);
   useEffect(() => {
     const loadIndustries = async () => {
-      const dataIndustries = await odooApi('GET', '/api/v1/partner/industry')
-      setIndustries(dataIndustries?.map((o) => ({ value: o.id, label: o.name })))
-    }
-    loadIndustries()
-  }, [])
+      const dataIndustries = await odooApi('GET', '/api/v1/partner/industry');
+      setIndustries(
+        dataIndustries?.map((o) => ({ value: o.id, label: o.name }))
+      );
+    };
+    loadIndustries();
+  }, []);
 
-  const [companyTypes, setCompanyTypes] = useState([])
+  const [companyTypes, setCompanyTypes] = useState([]);
   useEffect(() => {
     const loadCompanyTypes = async () => {
-      const dataCompanyTypes = await odooApi('GET', '/api/v1/partner/company_type')
-      setCompanyTypes(dataCompanyTypes?.map((o) => ({ value: o.id, label: o.name })))
-    }
-    loadCompanyTypes()
-  }, [])
+      const dataCompanyTypes = await odooApi(
+        'GET',
+        '/api/v1/partner/company_type'
+      );
+      setCompanyTypes(
+        dataCompanyTypes?.map((o) => ({ value: o.id, label: o.name }))
+      );
+    };
+    loadCompanyTypes();
+  }, []);
 
   useEffect(() => {
     const loadProfile = async () => {
-      const dataProfile = await addressApi({ id: auth.parentId })
-      setValue('name', dataProfile.name)
-      setValue('industry', dataProfile.industryId)
-      setValue('companyType', dataProfile.companyTypeId)
-      setValue('taxName', dataProfile.taxName)
-      setValue('npwp', dataProfile.npwp)
-    }
-    if (auth) loadProfile()
-  }, [auth, setValue])
+      const dataProfile = await addressApi({ id: auth.parentId });
+      setValue('name', dataProfile.name);
+      setValue('industry', dataProfile.industryId);
+      setValue('companyType', dataProfile.companyTypeId);
+      setValue('taxName', dataProfile.taxName);
+      setValue('npwp', dataProfile.npwp);
+      setValue('alamat_wajib_pajak', dataProfile.alamatWajibPajak);
+      setValue('alamat_bisnis', dataProfile.alamatBisnis);
+    };
+    if (auth) loadProfile();
+  }, [auth, setValue]);
 
   const onSubmitHandler = async (values) => {
-    const data = {
-      ...values,
-      company_type_id: values.companyType,
-      industry_id: values.industry,
-      tax_name: values.taxName
+    if (changeConfirmation) {
+      const data = {
+        ...values,
+        id_user: auth.partnerId,
+        company_type_id: values.companyType,
+        industry_id: values.industry,
+        tax_name: values.taxName,
+        alamat_lengkap_text: values.alamat_wajib_pajak,
+        street: values.alamat_bisnis,
+      };
+      const isUpdated = await odooApi(
+        'PUT',
+        `/api/v1/partner/${auth.parentId}`,
+        data
+      );
+      if (isUpdated?.id) {
+        toast.success('Berhasil mengubah profil', { duration: 1500 });
+        return;
+      }
+      toast.error('Terjadi kesalahan internal');
     }
-    const isUpdated = await odooApi('PUT', `/api/v1/partner/${auth.parentId}`, data)
-    if (isUpdated?.id) {
-      toast.success('Berhasil mengubah profil', { duration: 1500 })
-      return
-    }
-    toast.error('Terjadi kesalahan internal')
-  }
+  };
+
+  const handleConfirmSubmit = () => {
+    setChangeConfirmation(false);
+    handleSubmit(onSubmitHandler)();
+  };
 
   return (
     <>
-      <button type='button' onClick={toggle} className='p-4 flex items-center text-left w-full'>
+      <BottomPopup
+        active={changeConfirmation}
+        close={() => setChangeConfirmation(true)}
+        title='Ubah profil Bisnis'
+      >
+        <div className='leading-7 text-gray_r-12/80'>
+          Apakah anda yakin mengubah data bisnis?
+        </div>
+        <div className='flex mt-6 gap-x-4 md:justify-end'>
+          <button
+            className='btn-solid-red flex-1 md:flex-none'
+            type='button'
+            onClick={handleConfirmSubmit}
+          >
+            Ya, Ubah
+          </button>
+          <button
+            className='btn-light flex-1 md:flex-none'
+            type='button'
+            onClick={() => setChangeConfirmation(false)}
+          >
+            Batal
+          </button>
+        </div>
+      </BottomPopup>
+      <button
+        type='button'
+        onClick={toggle}
+        className='p-4 flex items-center text-left w-full'
+      >
         <div>
           <div className='font-semibold mb-2'>Informasi Usaha</div>
           <div className='text-gray_r-11'>
-            Dibawah ini adalah data usaha yang anda masukkan, periksa kembali data usaha anda.
+            Dibawah ini adalah data usaha yang anda masukkan, periksa kembali
+            data usaha anda.
           </div>
         </div>
         <div className='ml-auto p-2 bg-gray_r-3 rounded'>
@@ -82,15 +140,26 @@ const CompanyProfile = () => {
       </button>
 
       {isOpen && (
-        <form className='p-4 border-t border-gray_r-6' onSubmit={handleSubmit(onSubmitHandler)}>
+        <form
+          className='p-4 border-t border-gray_r-6'
+          onSubmit={(e) => {
+            e.preventDefault();
+            setChangeConfirmation(true);
+          }}
+        >
           <div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
             <div>
               <label className='block mb-3'>Klasifikasi Jenis Usaha</label>
               <Controller
                 name='industry'
                 control={control}
-                render={(props) => <HookFormSelect {...props} options={industries} />}
+                render={(props) => (
+                  <HookFormSelect {...props} options={industries} />
+                )}
               />
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.industry?.message}
+              </div>
             </div>
             <div className='flex flex-wrap'>
               <div className='w-full mb-3'>Badan Usaha</div>
@@ -98,8 +167,13 @@ const CompanyProfile = () => {
                 <Controller
                   name='companyType'
                   control={control}
-                  render={(props) => <HookFormSelect {...props} options={companyTypes} />}
+                  render={(props) => (
+                    <HookFormSelect {...props} options={companyTypes} />
+                  )}
                 />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.companyType?.message}
+                </div>
               </div>
               <div className='w-9/12 pl-1'>
                 <input
@@ -108,15 +182,55 @@ const CompanyProfile = () => {
                   className='form-input'
                   placeholder='Cth: Indoteknik Dotcom Gemilang'
                 />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.name?.message}
+                </div>
               </div>
             </div>
             <div>
               <label>Nama Wajib Pajak</label>
-              <input {...register('taxName')} type='text' className='form-input mt-3' />
+              <input
+                {...register('taxName')}
+                type='text'
+                className='form-input mt-3'
+              />
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.taxName?.message}
+              </div>
+            </div>
+            <div>
+              <label>Alamat Wajib Pajak</label>
+              <input
+                {...register('alamat_wajib_pajak')}
+                type='text'
+                className='form-input mt-3'
+              />
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.alamat_wajib_pajak?.message}
+              </div>
+            </div>
+            <div>
+              <label>Alamat Bisnis</label>
+              <input
+                {...register('alamat_bisnis')}
+                type='text'
+                className='form-input mt-3'
+              />
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.alamat_bisnis?.message}
+              </div>
             </div>
             <div>
               <label>Nomor NPWP</label>
-              <input {...register('npwp')} type='text' className='form-input mt-3' />
+              <input
+                {...register('npwp')}
+                type='text'
+                className='form-input mt-3'
+                maxLength={16}
+              />
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.npwp?.message}
+              </div>
             </div>
           </div>
           <button type='submit' className='btn-yellow w-full mt-6'>
@@ -125,7 +239,27 @@ const CompanyProfile = () => {
         </form>
       )}
     </>
-  )
-}
+  );
+};
+
+export default CompanyProfile;
+
+const validationSchema = Yup.object().shape({
+  alamat_bisnis: Yup.string().required('Harus di-isi'),
+  alamat_wajib_pajak: Yup.string().required('Harus di-isi'),
+  taxName: Yup.string().required('Harus di-isi'),
+  npwp: Yup.string().required('Harus di-isi'),
+  name: Yup.string().required('Harus di-isi'),
+  industry: Yup.string().required('Harus di-pilih'),
+  companyType: Yup.string().required('Harus di-pilih'),
+});
 
-export default CompanyProfile
+const defaultValues = {
+  industry: '',
+  companyType: '',
+  name: '',
+  taxName: '',
+  npwp: '',
+  alamat_wajib_pajak: '',
+  alamat_bisnis: '',
+};