1 files changed, 206 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..18c6076f
--- /dev/null
+++ b/src/lib/auth/components/SwitchAccount.jsx
@@ -0,0 +1,206 @@
+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, useMemo } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
+import switchAccountApi from '../api/switchAccountApi';
+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';
+import { registerUser } from '~/services/auth';
+import { useMutation } from 'react-query';
+import { isValid } from 'zod';
+import useDevice from '@/core/hooks/useDevice';
+const SwitchAccount = () => {
+  const { isDesktop, isMobile } = useDevice();
+  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 [buttonSubmitClick, setButtonSubmitClick] = useState(false);
+  const { register, setValue, handleSubmit } = useForm({
+    defaultValues: {
+      email: '',
+      name: '',
+      phone: '',
+      password: '',
+    },
+  });
+  const mutation = useMutation({
+    mutationFn: (data) => registerUser(data),
+  });
+  const [notValid, setNotValid] = useState(false);
+  const { form, isCheckedTNC, isValidCaptcha, errors, validate, updateForm } =
+    useRegisterStore();
+  const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]);
+  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]);
+
+  useEffect(() => {
+    updateForm('name', '-');
+    updateForm('email', 'example@mail.com');
+    updateForm('password', 'example@mail.com');
+    updateForm('phone', '081234567890');
+    validate();
+  }, []);
+
+  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);
+    }
+  };
+  const onSubmitHandler = async (values) => {
+    // let data = { ...form, id: `${auth.partnerId}` };
+    const data = form;
+    if (!isFormValid) {
+      setNotValid(true);
+      setButtonSubmitClick(!buttonSubmitClick);
+      return;
+    } else {
+      setButtonSubmitClick(!buttonSubmitClick);
+      setNotValid(false);
+    }
+    // if (!values.password) delete data.password;
+    const isUpdated = await switchAccountApi({ data });
+
+    if (isUpdated?.switch === 'Pending') {
+      // setAuth(isUpdated.user);
+      // setValue('password', '');
+      toast.success('Berhasil mengubah akun', { duration: 1500 });
+      setTimeout(() => {
+        window.location.reload();
+      }, 1500);
+      return;
+    }
+    toast.error('Terjadi kesalahan internal');
+  };
+
+  return (
+    <>
+      <button
+        type='button'
+        onClick={toggle}
+        className='p-4 flex items-center text-left w-full'
+      >
+        <div
+          className={`flex ${
+            isDesktop ? 'flex-row' : 'flex-col gap-y-2'
+          } items-start justify-start 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={isDesktop ? 'profil' : 'bisnis'}
+            required={isTerdaftar}
+            isPKP={isPKP}
+            chekValid={notValid}
+            buttonSubmitClick={buttonSubmitClick}
+          />
+          <div className='flex justify-end mb-4 mr-4'>
+            <button
+              type='submit'
+              onClick={onSubmitHandler}
+              className='btn-yellow w-full sm:w-fit sm:ml-auto mt-6'
+            >
+              {mutation.isLoading ? 'Loading...' : 'Simpan Perubahan'}
+            </button>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default SwitchAccount;