<iman>add feature switch account

1 files changed, 144 insertions, 0 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;