<iman>add feature switch account

2 files changed, 190 insertions, 22 deletions

diff --git a/src/lib/auth/components/SwitchAccount.jsx b/src/lib/auth/components/SwitchAccount.jsx
new file mode 100644
index 00000000..e1249779
--- /dev/null
+++ b/src/lib/auth/components/SwitchAccount.jsx
@@ -0,0 +1,144 @@
+import useAuth from '@/core/hooks/useAuth';
+import { setAuth } from '@/core/utils/auth';
+import addressApi from '@/lib/address/api/addressApi';
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
+import editPersonalProfileApi from '../api/editPersonalProfileApi';
+import FormBisnis from '~/modules/register/components/FormBisnis.tsx';
+import RegistrasiBisnis from '~/modules/register/components/RegistrasiBisnis.tsx';
+import { Radio, RadioGroup, Stack, Divider, Button } from '@chakra-ui/react';
+import { useRegisterStore } from '~/modules/register/stores/useRegisterStore.ts';
+const SwitchAccount = () => {
+  const auth = useAuth();
+  const [isOpen, setIsOpen] = useState(true);
+  const toggle = () => setIsOpen(!isOpen);
+  const [isPKP, setIsPKP] = useState(true);
+  const [isTerdaftar, setIsTerdaftar] = useState(false);
+  const [isChecked, setIsChecked] = useState(false);
+  const [selectedValueBisnis, setSelectedValueBisnis] = useState('false');
+  const [selectedValue, setSelectedValue] = useState('PKP');
+  const { register, setValue, handleSubmit } = useForm({
+    defaultValues: {
+      email: '',
+      name: '',
+      phone: '',
+      password: '',
+    },
+  });
+
+  const { form, isCheckedTNC, isValidCaptcha, errors, validate, updateForm } =
+    useRegisterStore();
+  console.log('form', form);
+  useEffect(() => {
+    const loadProfile = async () => {
+      const dataProfile = await addressApi({ id: auth.partnerId });
+      setValue('email', dataProfile?.email);
+      setValue('name', dataProfile?.name);
+      setValue('phone', dataProfile?.phone);
+    };
+    if (auth) loadProfile();
+  }, [auth, setValue]);
+
+  useEffect(() => {
+    if (selectedValue === 'PKP') {
+      updateForm('is_pkp', 'true');
+      validate();
+    } else {
+      updateForm('is_pkp', 'false');
+      validate();
+    }
+  }, [selectedValue]);
+
+  useEffect(() => {
+    if (isTerdaftar) {
+      updateForm('is_terdaftar', 'true');
+      validate();
+    } else {
+      updateForm('is_terdaftar', 'false');
+      validate();
+    }
+  }, [isTerdaftar]);
+
+  const handleChangeBisnis = (value) => {
+    setSelectedValueBisnis(value);
+    if (value === 'true') {
+      validate();
+      setIsTerdaftar(true);
+    } else {
+      validate();
+      setIsTerdaftar(false);
+    }
+  };
+  const handleChange = (value) => {
+    setSelectedValue(value);
+    if (value === 'PKP') {
+      validate();
+      setIsPKP(true);
+    } else {
+      validate();
+      setIsPKP(false);
+      setIsPKP(false);
+    }
+  };
+  return (
+    <>
+      <button
+        type='button'
+        onClick={toggle}
+        className='p-4 flex items-center text-left w-full'
+      >
+        <div className='flex flex-row items-center bg-slate-50'>
+          <div className='flex font-semibold mr-2'>Informasi Bisnis</div>
+          <div className='text-red-500 text-xs'>
+            *Perubahan akun tidak dapat diubah kembali
+          </div>
+        </div>
+        <div className='ml-auto p-2 bg-gray_r-3 rounded'>
+          {!isOpen && <ChevronDownIcon className='w-6' />}
+          {isOpen && <ChevronUpIcon className='w-6' />}
+        </div>
+      </button>
+
+      {isOpen && (
+        <div className='p-4'>
+          <div>
+            <p className='text-black font-bold mb-2'>
+              Bisnis Terdaftar di Indoteknik?
+            </p>
+            <RadioGroup
+              onChange={handleChangeBisnis}
+              value={selectedValueBisnis}
+            >
+              <Stack direction='row'>
+                <Radio colorScheme='red' value='true'>
+                  Sudah Terdaftar
+                </Radio>
+                <Radio colorScheme='red' value='false' className='ml-2'>
+                  Belum Terdaftar
+                </Radio>
+              </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>
+          <FormBisnis type='bisnis' required={isTerdaftar} isPKP={isPKP} />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default SwitchAccount;
diff --git a/src/pages/my/profile.jsx b/src/pages/my/profile.jsx
index 25c3a608..ca6f4700 100644
--- a/src/pages/my/profile.jsx
+++ b/src/pages/my/profile.jsx
@@ -1,16 +1,23 @@
-import Divider from '@/core/components/elements/Divider/Divider'
-import AppLayout from '@/core/components/layouts/AppLayout'
-import BasicLayout from '@/core/components/layouts/BasicLayout'
-import DesktopView from '@/core/components/views/DesktopView'
-import MobileView from '@/core/components/views/MobileView'
-import useAuth from '@/core/hooks/useAuth'
-import CompanyProfile from '@/lib/auth/components/CompanyProfile'
-import IsAuth from '@/lib/auth/components/IsAuth'
-import Menu from '@/lib/auth/components/Menu'
-import PersonalProfile from '@/lib/auth/components/PersonalProfile'
+import Divider from '@/core/components/elements/Divider/Divider';
+import AppLayout from '@/core/components/layouts/AppLayout';
+import BasicLayout from '@/core/components/layouts/BasicLayout';
+import DesktopView from '@/core/components/views/DesktopView';
+import MobileView from '@/core/components/views/MobileView';
+import useAuth from '@/core/hooks/useAuth';
+import CompanyProfile from '@/lib/auth/components/CompanyProfile';
+import SwitchAccount from '@/lib/auth/components/SwitchAccount';
+import IsAuth from '@/lib/auth/components/IsAuth';
+import Menu from '@/lib/auth/components/Menu';
+import PersonalProfile from '@/lib/auth/components/PersonalProfile';
+import { Button, Checkbox, Spinner, Tooltip } from '@chakra-ui/react';
+import { useState } from 'react';
 
 export default function Profile() {
-  const auth = useAuth()
+  const auth = useAuth();
+  const [isChecked, setIsChecked] = useState(false);
+  const handleChange = async () => {
+    setIsChecked(!isChecked);
+  };
   return (
     <IsAuth>
       <MobileView>
@@ -23,19 +30,36 @@ export default function Profile() {
 
       <DesktopView>
         <BasicLayout>
-        <div className='container mx-auto flex py-10'>
-          <div className='w-3/12 pr-4'>
-            <Menu />
-          </div>
-          <div className='w-9/12 bg-white border border-gray_r-6 rounded'>
-            <PersonalProfile />
-            <Divider />
-            {auth?.parentId && <CompanyProfile />}
-
-          </div>
+          <div className='container mx-auto flex py-10'>
+            <div className='w-3/12 pr-4'>
+              <Menu />
+            </div>
+            <div className='w-9/12 bg-white border border-gray_r-6 rounded'>
+              {!auth?.parentId && (
+                <div className='text-sm p-4 flex items-center'>
+                  <Checkbox
+                    borderColor='gray.600'
+                    colorScheme='red'
+                    size='lg'
+                    isChecked={isChecked}
+                    onChange={handleChange}
+                  />
+                  <p className='ml-2'>Ubah ke akun bisnis</p>
+                </div>
+              )}
+              {isChecked && (
+                <div>
+                  <SwitchAccount />
+                  <Divider />
+                </div>
+              )}
+              <PersonalProfile />
+              <Divider />
+              {auth?.parentId && <CompanyProfile />}
+            </div>
           </div>
         </BasicLayout>
       </DesktopView>
     </IsAuth>
-  )
+  );
 }