1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
import { 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 } 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";
const RegistrasiBisnis = () => {
const [isPKP, setIsPKP] = useState(false);
const [isTerdaftar, setIsTerdaftar] = useState(false);
const [isIndividuRequired, setIsIndividuRequired] = useState(true);
const [isBisnisRequired, setIsBisnisRequired] = useState(true);
const [selectedValue, setSelectedValue] = useState('PKP');
const {
form,
isCheckedTNC,
isValidCaptcha,
errors,
updateForm,
validate,
} = useRegisterStore()
const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors])
const mutation = useMutation({
mutationFn: (data: RegisterProps) => registerUser(data)
})
const handleChange = (value: string) => {
setSelectedValue(value);
if (value === "PKP") {
setIsPKP(true);
setIsIndividuRequired(true); // Show and require Individu form
} else {
setIsPKP(false);
setIsIndividuRequired(false); // Hide and make optional the Individu form
}
};
const handleClick = () => {
setIsIndividuRequired(!isIndividuRequired)
};
const handleClickBisnis = () => {
setIsBisnisRequired(!isBisnisRequired)
};
return (
<>
<div className="mt-4">
<p className="text-black font-bold mb-2">Tipe Bisnis</p>
<RadioGroup onChange={handleChange} value={selectedValue}>
<Stack direction='row'>
<Radio value='PKP'>PKP</Radio>
<Radio value='Non-PKP'>Non-PKP</Radio>
</Stack>
</RadioGroup>
</div>
<div className="mt-4 border">
<div className="p-4">
<div onClick={handleClick} className="flex justify-between">
<p>Data Akun</p>
{isIndividuRequired ? (
<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>
{isIndividuRequired && (
<div>
<Divider my={4} />
<Form type="bisnis" required={isIndividuRequired} />
</div>
)}
</div>
</div>
<div className="mt-4 border">
<div className="p-4">
<div onClick={handleClickBisnis} className="flex justify-between">
<p>Data Bisnis</p>
{isBisnisRequired ? (
<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>
{isBisnisRequired && (
<div>
<Divider my={4} />
<div>
<p className="text-black font-bold">Bisnis Terdaftar di Indoteknik?</p>
<RadioGroup onChange={handleChange} value={selectedValue}>
<Stack direction='row'>
<Radio value='true'>Sudah Terdaftar</Radio>
<Radio value='false'>Belum Terdaftar</Radio>
</Stack>
</RadioGroup>
</div>
<FormBisnis type="bisnis" required={isIndividuRequired} />
</div>
)}
</div>
</div>
<FormCaptcha />
<TermCondition />
<button
type="submit"
className="btn-yellow w-full mt-2"
disabled={!isFormValid || !isCheckedTNC || mutation.isLoading || !isValidCaptcha}
>
{mutation.isLoading ? 'Loading...' : 'Daftar'}
</button>
</>
);
};
export default RegistrasiBisnis;
|
