<iman> update form bisnis to switch account

3 files changed, 142 insertions, 37 deletions

diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx
index d4fdbbbd..ad92948e 100644
--- a/src-migrate/modules/register/components/FormBisnis.tsx
+++ b/src-migrate/modules/register/components/FormBisnis.tsx
@@ -24,10 +24,15 @@ import { Controller, useForm } from 'react-hook-form';
 import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
 import odooApi from '~/libs/odooApi';
 import { toast } from 'react-hot-toast';
-import { EyeIcon } from '@heroicons/react/24/outline';
+import {
+  EyeIcon,
+  CheckCircleIcon,
+  XCircleIcon,
+} from '@heroicons/react/24/outline';
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
 import Image from 'next/image';
 import useDevice from '@/core/hooks/useDevice';
+import useAuth from '@/core/hooks/useAuth';
 interface FormProps {
   type: string;
   required: boolean;
@@ -101,14 +106,16 @@ const form: React.FC<FormProps> = ({
   useEffect(() => {
     if (form.company_type_id) {
       setValue('companyType', parseInt(form.company_type_id));
+      updateForm('sppkp_document', 'fileBase64.jpg');
     }
-  }, []);
+  }, [form.company_type_id]);
   useEffect(() => {
     if (form.industry_id) {
       setValue('industry_id', parseInt(form.industry_id));
     }
-  }, []);
+  }, [form.industry_id]);
 
+  console.log('form', form);
   useEffect(() => {
     const loadIndustries = async () => {
       const dataIndustries = await odooApi('GET', '/api/v1/partner/industry');
@@ -230,7 +237,7 @@ const form: React.FC<FormProps> = ({
         toast({
           ...toastProps,
           title:
-            'Format file yang diijinkan adalah .pdf, .doc, .docx, .png, .jpg, atau .jpeg',
+            'Format file yang diijinkan adalah .pdf, .png, .jpg, atau .jpeg',
           status: 'error',
         });
         event.target.value = '';
@@ -238,10 +245,10 @@ const form: React.FC<FormProps> = ({
       }
 
       // Check for file size
-      if (file.size > 5000000) {
+      if (file.size > 2000000) {
         toast({
           ...toastProps,
-          title: 'Maksimal ukuran file adalah 5MB',
+          title: 'Maksimal ukuran file adalah 2MB',
           status: 'error',
         });
         event.target.value = '';
@@ -320,7 +327,6 @@ const form: React.FC<FormProps> = ({
       validate();
     }
   };
-  useEffect(() => {}, [watch('industry_id'), industries]);
 
   const handleIndustriIdChange = (event: MouseEvent<HTMLDivElement>) => {
     const selectedIndustriIdValue = watch('industry_id');
@@ -334,13 +340,65 @@ const form: React.FC<FormProps> = ({
     }
   };
 
+  const [fileUrl, setFileUrl] = useState('');
+  const [popUpNPWP, setPopUpNpwp] = useState(false);
+  const [popSppkp, setPopUpSppkp] = useState(false);
+  const [hasNPWP, sethasNpwp] = useState(false);
+  const [hasSPPKP, sethasSPPKP] = useState(false);
+  const [fileUrlSppkp, setFileUrlSppkp] = useState('');
+
+  useEffect(() => {
+    const url = `${process.env.NEXT_PUBLIC_ODOO_API_HOST}/api/v1/user/download/npwp/109119`;
+    if (url) {
+      setFileUrl(url);
+      sethasNpwp(true);
+    }
+    const urlSppkp = `${process.env.NEXT_PUBLIC_ODOO_API_HOST}/api/v1/user/download/sppkp/109119`;
+    if (urlSppkp) {
+      setFileUrlSppkp(urlSppkp);
+      sethasSPPKP(true);
+    }
+  }, []);
+
   return (
     <>
       <BottomPopup
+        className='h-full object-contain object-center w-full'
+        title='Dokumen NPWP'
+        active={popUpNPWP}
+        close={() => setPopUpNpwp(false)}
+      >
+        <div className='flex p-2'>
+          <iframe
+            src={fileUrl}
+            width='800px'
+            height='600px'
+            title='NPWP File'
+            frameBorder='0'
+          ></iframe>
+        </div>
+      </BottomPopup>
+      <BottomPopup
+        className='h-full object-contain object-center w-full'
+        title='Dokumen SPPKP'
+        active={popSppkp}
+        close={() => setPopUpSppkp(false)}
+      >
+        <div className='flex p-2'>
+          <iframe
+            src={fileUrlSppkp}
+            width='800px'
+            height='600px'
+            title='NPWP File'
+            frameBorder='0'
+          ></iframe>
+        </div>
+      </BottomPopup>
+      <BottomPopup
         className=''
         title='Contoh SPPKP'
         active={isExample}
-        close={() => setIsExample(false)}
+        close={() => setPopUpNpwp(false)}
       >
         <div className='flex p-2'>
           <Image
@@ -704,14 +762,36 @@ const form: React.FC<FormProps> = ({
             ref={docsNpwpRef}
             readOnly={required}
             onChange={handleFileChange}
-            accept='.pdf,.doc,.docx,.png,.jpg,.jpeg' // Filter file types
+            accept='.pdf,.png,.jpg,.jpeg' // Filter file types
           />
 
           {chekValid && isPKP && !required && !!errors.npwp_document && (
             <span className='form-msg-danger'>{errors.npwp_document}</span>
           )}
+          <span className='form-msg-danger ml-4 text-xs mb-2'>
+            Format: .pdf, .png, .jpg, atau .jpeg, Maks 2MB
+          </span>
+          {hasNPWP && (
+            <div className='px-3'>
+              <div className='inline-flex flex-row items-center justify-between w-full rounded-md h-12 bg-green-50 px-2 py-1 text-sm font-medium text-green-700 ring-1 ring-inset ring-green-600/20'>
+                <div className='w-4/5  flex flex-row items-center justify-start '>
+                  <CheckCircleIcon className='w-6 mr-2' />
+                  Dokumen sudah diupload
+                </div>
+                <div className='w-1/5  flex flex-row  justify-end'>
+                  <EyeIcon
+                    onClick={() => setPopUpNpwp(true)}
+                    className={`w-6 mr-2 hover:scale-110 transition-transform duration-200}`}
+                  />
+                  <XCircleIcon
+                    onClick={() => sethasNpwp(false)}
+                    className='w-6 hover:scale-110 transition-transform duration-200'
+                  />
+                </div>
+              </div>
+            </div>
+          )}
         </div>
-
         <div>
           <label htmlFor='sppkp_document' className='font-bold'>
             Dokumen SPPKP{' '}
@@ -732,8 +812,32 @@ const form: React.FC<FormProps> = ({
             ref={docsSppkpRef}
             readOnly={required}
             onChange={handleFileChange}
-            accept='.pdf,.doc,.docx,.png,.jpg,.jpeg' // Filter file types
+            accept='.pdf,.png,.jpg,.jpeg'
+            content='lagu.jpg'
           />
+          <span className='form-msg-danger ml-4 text-xs mb-2'>
+            Format: .pdf, .png, .jpg, atau .jpeg, Maks 2MB
+          </span>
+          {hasSPPKP && (
+            <div className='px-3'>
+              <div className='inline-flex flex-row items-center justify-between w-full rounded-md h-12 bg-green-50 px-2 py-1 text-sm font-medium text-green-700 ring-1 ring-inset ring-green-600/20'>
+                <div className='w-4/5  flex flex-row items-center justify-start '>
+                  <CheckCircleIcon className='w-6 mr-2' />
+                  Dokumen sudah di upload
+                </div>
+                <div className='w-1/5  flex flex-row  justify-end'>
+                  <EyeIcon
+                    onClick={() => setPopUpSppkp(true)}
+                    className={`w-6 mr-2 hover:scale-110 transition-transform duration-200}`}
+                  />
+                  <XCircleIcon
+                    onClick={() => sethasSPPKP(false)}
+                    className='w-6 hover:scale-110 transition-transform duration-200'
+                  />
+                </div>
+              </div>
+            </div>
+          )}
 
           {chekValid && isPKP && !required && !!errors.sppkp_document && (
             <span className='form-msg-danger'>{errors.sppkp_document}</span>
diff --git a/src/lib/auth/components/CompanyProfile.jsx b/src/lib/auth/components/CompanyProfile.jsx
index e1a604c2..6065efde 100644
--- a/src/lib/auth/components/CompanyProfile.jsx
+++ b/src/lib/auth/components/CompanyProfile.jsx
@@ -16,7 +16,7 @@ const CompanyProfile = () => {
   const [changeConfirmation, setChangeConfirmation] = useState(false);
   const [changeType, setChangeType] = useState(false);
   const [isChecked, setIsChecked] = useState(false);
-  const [company_type, setCompany_type] = useState('Non PKP');
+  const [company_type, setCompany_type] = useState('nonpkp');
   const auth = useAuth();
   const [isOpen, setIsOpen] = useState(false);
   const toggle = () => setIsOpen(!isOpen);
@@ -61,15 +61,15 @@ const CompanyProfile = () => {
       const dataProfile = await addressApi({
         id: auth.parentId ? auth.parentId : auth.parent_id,
       });
-      setCompany_type(dataProfile.companyType);
-      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);
-      setValue('company_type', dataProfile.companyType);
+      setCompany_type(dataProfile?.companyType);
+      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);
+      setValue('company_type', dataProfile?.companyType);
     };
     if (auth) loadProfile();
   }, [auth, setValue]);
@@ -168,7 +168,7 @@ const CompanyProfile = () => {
         </div>
       </BottomPopup>
       <div className='p-4 flex-row items-center text-left w-full'>
-        {company_type === 'Non PKP' && (
+        {company_type === 'nonpkp' && (
           <div className='text-sm mb-2 flex items-center'>
             <Checkbox
               borderColor='gray.600'
diff --git a/src/lib/auth/components/SwitchAccount.jsx b/src/lib/auth/components/SwitchAccount.jsx
index 14ad7e8a..fa1d3924 100644
--- a/src/lib/auth/components/SwitchAccount.jsx
+++ b/src/lib/auth/components/SwitchAccount.jsx
@@ -74,17 +74,18 @@ const SwitchAccount = () => {
       const dataProfile = await addressApi({
         id: auth.parentId ? auth.parentId : auth.parent_id,
       });
-      if (dataProfile.companyType === 'Non PKP') {
+      console.log('dataProfile', dataProfile);
+      if (dataProfile?.companyType === 'nonpkp') {
         setSelectedValue('PKP');
       }
-      updateForm('email_partner', dataProfile.email_partner);
-      updateForm('business_name', dataProfile.name);
-      updateForm('industry_id', `${dataProfile.industryId}`);
-      updateForm('company_type_id', `${dataProfile.companyTypeId}`);
-      updateForm('nama_wajib_pajak', dataProfile.taxName);
-      updateForm('npwp', dataProfile.npwp);
-      updateForm('alamat_wajib_pajak', dataProfile.alamatWajibPajak);
-      updateForm('alamat_bisnis', dataProfile.alamatBisnis);
+      updateForm('email_partner', dataProfile?.email_partner);
+      updateForm('business_name', dataProfile?.name);
+      updateForm('industry_id', `${dataProfile?.industryId}`);
+      updateForm('company_type_id', `${dataProfile?.companyTypeId}`);
+      updateForm('nama_wajib_pajak', dataProfile?.taxName);
+      updateForm('npwp', dataProfile?.npwp);
+      updateForm('alamat_wajib_pajak', dataProfile?.alamatWajibPajak);
+      updateForm('alamat_bisnis', dataProfile?.alamatBisnis);
       validate();
     };
     if (auth) loadProfile();
@@ -214,17 +215,17 @@ const SwitchAccount = () => {
           <div className='flex justify-end mb-4 mr-4'>
             <button
               type='submit'
-              onClick={onSubmitHandlerCancel}
-              className='btn-red w-full sm:w-fit sm:ml-auto mt-6'
+              onClick={onSubmitHandler}
+              className='btn-yellow w-full sm:w-fit sm:ml-auto mt-6'
             >
-              {mutation.isLoading ? 'Loading...' : 'Batal'}
+              {mutation.isLoading ? 'Loading...' : 'Simpan Perubahan'}
             </button>
             <button
               type='submit'
-              onClick={onSubmitHandler}
-              className='btn-yellow w-full sm:w-fit sm:ml-auto mt-6'
+              onClick={onSubmitHandlerCancel}
+              className='btn-red w-full sm:w-fit sm:ml-auto mt-6'
             >
-              {mutation.isLoading ? 'Loading...' : 'Simpan Perubahan'}
+              {mutation.isLoading ? 'Loading...' : 'Batal'}
             </button>
           </div>
         </div>