Merged in Feature/new-register (pull request #326)

Feature/new register

1 files changed, 197 insertions, 0 deletions

diff --git a/src-migrate/modules/register/components/RegistrasiBisnis.tsx b/src-migrate/modules/register/components/RegistrasiBisnis.tsx
new file mode 100644
index 00000000..ce4d3972
--- /dev/null
+++ b/src-migrate/modules/register/components/RegistrasiBisnis.tsx
@@ -0,0 +1,197 @@
+import { ChangeEvent, useEffect, useMemo, useState } from 'react';
+import FormBisnis from './FormBisnis';
+import Form from './Form';
+import TermCondition from './TermCondition';
+import FormCaptcha from './FormCaptcha';
+import { Radio, RadioGroup, Stack, Divider, Button } from '@chakra-ui/react';
+import React from 'react';
+import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
+import { useRegisterStore } from '../stores/useRegisterStore';
+import { useMutation } from 'react-query';
+import { RegisterProps } from '~/types/auth';
+import { registerUser } from '~/services/auth';
+import router from 'next/router';
+import { useRouter } from 'next/router';
+import { UseToastOptions, useToast } from '@chakra-ui/react';
+import Link from 'next/link';
+interface FormProps {
+  chekValid: boolean;
+  buttonSubmitClick: boolean;
+}
+const RegistrasiBisnis: React.FC<FormProps> = ({
+  chekValid,
+  buttonSubmitClick,
+}) => {
+  const [isPKP, setIsPKP] = useState(true);
+  const [isTerdaftar, setIsTerdaftar] = useState(false);
+  const [isDropIndividu, setIsDropIndividu] = useState(true);
+  const [isBisnisClicked, setisBisnisClicked] = useState(true);
+  const [selectedValue, setSelectedValue] = useState('PKP');
+  const [selectedValueBisnis, setSelectedValueBisnis] = useState('false');
+  const { form, isCheckedTNC, isValidCaptcha, errors, validate, updateForm } =
+    useRegisterStore();
+  const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]);
+  const toast = useToast();
+  const mutation = useMutation({
+    mutationFn: (data: RegisterProps) => registerUser(data),
+  });
+
+  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 handleChange = (value: string) => {
+    setSelectedValue(value);
+    if (value === 'PKP') {
+      validate();
+      setIsPKP(true);
+    } else {
+      validate();
+      setIsPKP(false);
+      setIsPKP(false);
+    }
+  };
+
+  const handleChangeBisnis = (value: string) => {
+    setSelectedValueBisnis(value);
+    if (value === 'true') {
+      validate();
+      setIsTerdaftar(true);
+    } else {
+      validate();
+      setIsTerdaftar(false);
+    }
+  };
+
+  const handleClick = () => {
+    setIsDropIndividu(!isDropIndividu);
+  };
+
+  const handleClickBisnis = () => {
+    setisBisnisClicked(!isBisnisClicked);
+  };
+
+  return (
+    <>
+      <div className='mt-4 border'>
+        <div className='p-4'>
+          <div onClick={handleClick} className='flex justify-between'>
+            <p className='text-2xl font-semibold text-center md:text-left'>
+              Data Akun
+            </p>
+            {isDropIndividu ? (
+              <div className='flex'>
+                <ChevronDownIcon
+                  onClick={handleClick}
+                  className='h-6 w-6 text-black'
+                />
+              </div>
+            ) : (
+              <ChevronRightIcon
+                onClick={handleClick}
+                className='h-6 w-6 text-black'
+              />
+            )}
+          </div>
+          {isDropIndividu && (
+            <div>
+              <Divider my={4} />
+              <Form
+                type='bisnis'
+                required={true}
+                isBisnisRegist={true}
+                chekValid={chekValid}
+                buttonSubmitClick={buttonSubmitClick}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+      <div className='mt-4 border'>
+        <div className='p-4'>
+          <div onClick={handleClickBisnis} className='flex justify-between'>
+            <p className='text-2xl font-semibold text-center md:text-left'>
+              Data Bisnis
+            </p>
+            {isBisnisClicked ? (
+              <div className='flex'>
+                <ChevronDownIcon
+                  onClick={handleClickBisnis}
+                  className='h-6 w-6 text-black'
+                />
+              </div>
+            ) : (
+              <ChevronRightIcon
+                onClick={handleClickBisnis}
+                className='h-6 w-6 text-black'
+              />
+            )}
+          </div>
+          {isBisnisClicked && (
+            <div>
+              <Divider my={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}
+                chekValid={chekValid}
+                buttonSubmitClick={buttonSubmitClick}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+
+      <h1 className=''></h1>
+    </>
+  );
+};
+
+export default RegistrasiBisnis;