Merged in Feature/switch-account (pull request #402)

Feature/switch account

3 files changed, 248 insertions, 70 deletions

diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx
index 12397956..0ead23ba 100644
--- a/src-migrate/modules/register/components/FormBisnis.tsx
+++ b/src-migrate/modules/register/components/FormBisnis.tsx
@@ -1,4 +1,12 @@
-import { ChangeEvent, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  ChangeEvent,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  MouseEvent,
+} from 'react';
+import { useMutation } from 'react-query';
 import { useRegisterStore } from '../stores/useRegisterStore';
 import {
   Button,
@@ -11,10 +19,16 @@ import getFileBase64 from '@/core/utils/getFileBase64';
 import { Controller, useForm } from 'react-hook-form';
 import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
 import odooApi from '~/libs/odooApi';
-import { EyeIcon } from '@heroicons/react/24/outline';
+import { toast } from 'react-hot-toast';
+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;
@@ -33,6 +47,10 @@ interface companyType {
   value: string;
   label: string;
 }
+interface Auth {
+  id: string;
+  parentId: string;
+}
 
 const form: React.FC<FormProps> = ({
   type,
@@ -50,12 +68,11 @@ const form: React.FC<FormProps> = ({
   // Inside your component
   const [formattedNpwp, setFormattedNpwp] = useState<string>(''); // State for formatted NPWP
   const [unformattedNpwp, setUnformattedNpwp] = useState<string>(''); // State for unformatted NPWP
-
+  const auth = useAuth() as unknown as Auth;
   const [industries, setIndustries] = useState<industry_id[]>([]);
   const [companyTypes, setCompanyTypes] = useState<companyType[]>([]);
 
   const toast = useToast();
-
   const emailRef = useRef<HTMLInputElement>(null);
   const businessNameRef = useRef<HTMLInputElement>(null);
   const companyTypeRef = useRef<HTMLInputElement>(null);
@@ -80,30 +97,21 @@ const form: React.FC<FormProps> = ({
           label: o.name,
         }))
       );
+      // setValue('companyType', form.company_type_id);
     };
     loadCompanyTypes();
   }, []);
 
   useEffect(() => {
-    const selectedCompanyType = companyTypes.find(
-      (company) => company.value === watch('companyType')
-    );
-    if (selectedCompanyType) {
-      updateForm('company_type_id', `${selectedCompanyType?.value}`);
-      validate();
+    if (form.company_type_id) {
+      setValue('companyType', parseInt(form.company_type_id));
     }
-  }, [watch('companyType'), companyTypes]);
-
+  }, [form.company_type_id]);
   useEffect(() => {
-    const selectedIndustryType = industries.find(
-      (industry) => industry.value === watch('industry_id')
-    );
-    if (selectedIndustryType) {
-      updateForm('industry_id', `${selectedIndustryType?.value}`);
-      setSelectedCategory(selectedIndustryType.category);
-      validate();
+    if (form.industry_id) {
+      setValue('industry_id', parseInt(form.industry_id));
     }
-  }, [watch('industry_id'), industries]);
+  }, [form.industry_id]);
 
   useEffect(() => {
     const loadIndustries = async () => {
@@ -115,6 +123,7 @@ const form: React.FC<FormProps> = ({
           category: o.category,
         }))
       );
+      // setValue('industry_id', form.industry_id);
     };
     loadIndustries();
   }, []);
@@ -225,7 +234,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 = '';
@@ -233,10 +242,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 = '';
@@ -303,9 +312,121 @@ const form: React.FC<FormProps> = ({
     };
     loadIndustries();
   }, [buttonSubmitClick, chekValid]);
+
+  const handleCompanyTypeChange = (event: MouseEvent<HTMLDivElement>) => {
+    const selectedCompanyTypeValue = watch('companyType');
+    const selectedCompanyType = companyTypes.find(
+      (company) => company.value === selectedCompanyTypeValue
+    );
+
+    if (selectedCompanyType !== undefined) {
+      updateForm('company_type_id', `${selectedCompanyType.value}`);
+      validate();
+    }
+  };
+
+  const handleIndustriIdChange = (event: MouseEvent<HTMLDivElement>) => {
+    const selectedIndustriIdValue = watch('industry_id');
+    const selectedIndustryType = industries.find(
+      (industry) => industry.value === selectedIndustriIdValue
+    );
+    if (selectedIndustryType) {
+      updateForm('industry_id', `${selectedIndustryType?.value}`);
+      setSelectedCategory(selectedIndustryType.category);
+      validate();
+    }
+  };
+
+  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 checkUrlNPWP = async (url: string | URL | Request) => {
+      try {
+        const response = await odooApi(
+          'GET',
+          `/api/v1/user/chek/npwp/${auth?.parentId}`
+        );
+        return response.status; // Returns true if status is 200-299
+      } catch (error) {
+        console.error('Error accessing URL:', url, error);
+        return false;
+      }
+    };
+    const checkUrlSPPKP = async (url: string | URL | Request) => {
+      try {
+        const response = await odooApi(
+          'GET',
+          `/api/v1/user/chek/sppkp/${auth?.parentId}`
+        );
+
+        return response.status; // Returns true if status is 200-299
+      } catch (error) {
+        console.error('Error accessing URL:', url, error);
+        return false;
+      }
+    };
+
+    const npwpUrl = `${process.env.NEXT_PUBLIC_ODOO_API_HOST}/api/v1/user/download/npwp/${auth?.parentId}`;
+    const sppkpUrl = `${process.env.NEXT_PUBLIC_ODOO_API_HOST}/api/v1/user/download/sppkp/${auth?.parentId}`;
+
+    if (auth?.parentId) {
+      checkUrlNPWP(npwpUrl).then((isAccessible) => {
+        if (isAccessible) {
+          setFileUrl(npwpUrl);
+          setHasNpwp(true);
+          updateForm('npwp_document', ' ');
+        }
+      });
+
+      checkUrlSPPKP(sppkpUrl).then((isAccessible) => {
+        if (isAccessible) {
+          setFileUrlSppkp(sppkpUrl);
+          setHasSPPKP(true);
+          updateForm('sppkp_document', ' ');
+        }
+      });
+    }
+  }, [auth?.parentId]);
+
   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}
@@ -326,7 +447,7 @@ const form: React.FC<FormProps> = ({
         className={` ${
           type === 'bisnis'
             ? 'mt-6 grid grid-cols-1 gap-y-4'
-            : 'mt-6 grid grid-cols-2 gap-x-4 gap-y-2'
+            : 'mt-6 grid grid-cols-2 gap-x-4 gap-y-6 auto-rows-min'
         }`}
       >
         <div>
@@ -370,6 +491,7 @@ const form: React.FC<FormProps> = ({
             <div
               className='w-4/5 pr-1 max-h-11 transition-all duration-500'
               ref={companyTypeRef}
+              onClick={handleCompanyTypeChange}
             >
               <Controller
                 name='companyType'
@@ -417,6 +539,7 @@ const form: React.FC<FormProps> = ({
           <div
             className='max-h-10 transition-all duration-500'
             ref={industryRef}
+            onClick={handleIndustriIdChange}
           >
             <Controller
               name='industry_id'
@@ -575,7 +698,13 @@ const form: React.FC<FormProps> = ({
             readOnly={required}
             ref={npwpRef}
             placeholder='000.000.000.0-000.000'
-            value={!required ? formattedNpwp : ''}
+            value={
+              !required
+                ? formattedNpwp === ''
+                  ? form.npwp
+                  : formattedNpwp
+                : ''
+            }
             maxLength={21} // Set maximum length to 16 characters
             onChange={(e) => {
               if (!required) {
@@ -665,14 +794,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{' '}
@@ -693,12 +844,35 @@ 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'
           />
-
           {chekValid && isPKP && !required && !!errors.sppkp_document && (
             <span className='form-msg-danger'>{errors.sppkp_document}</span>
           )}
+          <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>
+          )}
         </div>
       </form>
     </>
diff --git a/src-migrate/modules/register/components/RegistrasiBisnis.tsx b/src-migrate/modules/register/components/RegistrasiBisnis.tsx
index 40caed65..332c5358 100644
--- a/src-migrate/modules/register/components/RegistrasiBisnis.tsx
+++ b/src-migrate/modules/register/components/RegistrasiBisnis.tsx
@@ -149,19 +149,21 @@ const RegistrasiBisnis: React.FC<FormProps> = ({
                   </Stack>
                 </RadioGroup>
               </div>
-              <div className='mt-4'>
-                <p className='text-black font-bold mb-2'>Tipe Bisnis</p>
-                <RadioGroup onChange={handleChange} value={selectedValue}>
-                  <Stack direction='row' className='font-bold'>
-                    <Radio colorScheme='red' value='PKP'>
-                      PKP
-                    </Radio>
-                    <Radio colorScheme='red' value='Non-PKP' className='ml-4'>
-                      Non-PKP
-                    </Radio>
-                  </Stack>
-                </RadioGroup>
-              </div>
+              {!isTerdaftar && (
+                <div className='mt-4'>
+                  <p className='text-black font-bold mb-2'>Tipe Bisnis</p>
+                  <RadioGroup onChange={handleChange} value={selectedValue}>
+                    <Stack direction='row' className='font-bold'>
+                      <Radio colorScheme='red' value='PKP'>
+                        PKP
+                      </Radio>
+                      <Radio colorScheme='red' value='Non-PKP' className='ml-4'>
+                        Non-PKP
+                      </Radio>
+                    </Stack>
+                  </RadioGroup>
+                </div>
+              )}
               <FormBisnis
                 type='bisnis'
                 required={isTerdaftar}
diff --git a/src-migrate/modules/register/stores/useRegisterStore.ts b/src-migrate/modules/register/stores/useRegisterStore.ts
index 273472be..815b92d9 100644
--- a/src-migrate/modules/register/stores/useRegisterStore.ts
+++ b/src-migrate/modules/register/stores/useRegisterStore.ts
@@ -28,7 +28,7 @@ export const useRegisterStore = create<State & Action>((set, get) => ({
     company_type_id: '',
     business_name: '',
     name: '',
-    nama_wajib_pajak : '',
+    nama_wajib_pajak: '',
     email: '',
     email_partner: '',
     password: '',
@@ -39,14 +39,14 @@ export const useRegisterStore = create<State & Action>((set, get) => ({
     npwp: '',
     sppkp: '',
     is_pkp: '',
-    type_acc:'',
-    is_terdaftar:'',
-    alamat_bisnis:'',
-    alamat_wajib_pajak:'',
+    type_acc: '',
+    is_terdaftar: '',
+    alamat_bisnis: '',
+    alamat_wajib_pajak: '',
+    parent_id: '',
   },
   updateForm: (name, value) =>
     set((state) => ({ form: { ...state.form, [name]: value } })),
-  
 
   errors: {},
   validate: () => {
@@ -74,26 +74,28 @@ export const useRegisterStore = create<State & Action>((set, get) => ({
   isValidCaptcha: false,
   updateValidCaptcha: (value) => set(() => ({ isValidCaptcha: value })),
 
-  resetForm: () => set({
-    form: {
-    company_type_id: '',
-    business_name: '',
-    name: '',
-    nama_wajib_pajak : '',
-    email: '',
-    email_partner: '',
-    password: '',
-    phone: '',
-    sppkp_document: '',
-    npwp_document: '',
-    industry_id: '',
-    npwp: '',
-    sppkp: '',
-    is_pkp: '',
-    type_acc:'',
-    is_terdaftar:'',
-    alamat_bisnis:'',
-    alamat_wajib_pajak:'',
-  },
-  }),
+  resetForm: () =>
+    set({
+      form: {
+        company_type_id: '',
+        business_name: '',
+        name: '',
+        nama_wajib_pajak: '',
+        email: '',
+        email_partner: '',
+        password: '',
+        phone: '',
+        sppkp_document: '',
+        npwp_document: '',
+        industry_id: '',
+        npwp: '',
+        sppkp: '',
+        is_pkp: '',
+        type_acc: '',
+        is_terdaftar: '',
+        alamat_bisnis: '',
+        alamat_wajib_pajak: '',
+        parent_id: '',
+      },
+    }),
 }));