diff options
Diffstat (limited to 'src-migrate')
5 files changed, 40 insertions, 31 deletions
diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index 72921c2b..7b301dc5 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -59,15 +59,16 @@ const FormBisnis: React.FC<FormProps> = ({ type, required }) => { }, []); const selectedIndustry = watch('industry'); - useEffect(() => { const selected = industries.find(industry => industry.value === selectedIndustry); + console.log("selected",selected) if (selected) { setSelectedCategory(selected.category); } }, [selectedIndustry, industries]); const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => { + console.log("event",event) const { name, value } = event.target; updateFormBisnis(name, value); validateFormBisnis(); @@ -135,7 +136,7 @@ const FormBisnis: React.FC<FormProps> = ({ type, required }) => { return ( <form className="mt-6 grid grid-cols-1 gap-y-4" onSubmit={handleSubmit}> <div> - <label htmlFor='email'>Email Bisnis</label> + <label htmlFor='email' className="font-bold">Email Bisnis</label> <input type='text' @@ -153,8 +154,8 @@ const FormBisnis: React.FC<FormProps> = ({ type, required }) => { </div> <div> - <label htmlFor="company"> - Nama Bisnis <span className='text-gray_r-11'>(opsional)</span> + <label className="font-bold" htmlFor="company"> + Nama Bisnis </label> <div className="flex justify-between items-center gap-2 h-12"> <div className='w-4/5 pr-1'> @@ -178,8 +179,8 @@ const FormBisnis: React.FC<FormProps> = ({ type, required }) => { </div> <div className=""> - <label htmlFor="company"> - Klasifikasi Jenis Usaha <span className='text-gray_r-11'>(opsional)</span> + <label className="font-bold" htmlFor="company"> + Klasifikasi Jenis Usaha </label> <Controller name='industry' @@ -190,7 +191,7 @@ const FormBisnis: React.FC<FormProps> = ({ type, required }) => { </div> <div> - <label htmlFor='name'>Nama Wajib Pajak</label> + <label htmlFor='name' className="font-bold">Nama Wajib Pajak</label> <input type='text' @@ -207,7 +208,7 @@ const FormBisnis: React.FC<FormProps> = ({ type, required }) => { </div> <div> - <label htmlFor='phone'>Nomor NPWP</label> + <label htmlFor='phone' className="font-bold">Nomor NPWP</label> <input type='tel' @@ -224,7 +225,7 @@ const FormBisnis: React.FC<FormProps> = ({ type, required }) => { </div> <div> - <label htmlFor="document">Dokumen NPWP (opsional)</label> + <label htmlFor="document" className="font-bold">Dokumen NPWP</label> <input type="file" @@ -239,7 +240,7 @@ const FormBisnis: React.FC<FormProps> = ({ type, required }) => { </div> <div> - <label htmlFor="document">Dokumen SPPKP (opsional)</label> + <label htmlFor="document" className="font-bold">Dokumen SPPKP</label> <input type="file" diff --git a/src-migrate/modules/register/components/RegistrasiBisnis.tsx b/src-migrate/modules/register/components/RegistrasiBisnis.tsx index e454ff9c..91bf128f 100644 --- a/src-migrate/modules/register/components/RegistrasiBisnis.tsx +++ b/src-migrate/modules/register/components/RegistrasiBisnis.tsx @@ -3,7 +3,7 @@ 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 { Radio, RadioGroup, Stack, Divider, Button } from '@chakra-ui/react' import React from "react"; import { ChevronDownIcon, @@ -18,7 +18,7 @@ const RegistrasiBisnis = () => { const [isPKP, setIsPKP] = useState(false); const [isTerdaftar, setIsTerdaftar] = useState(false); const [isIndividuRequired, setIsIndividuRequired] = useState(true); - const [isBisnisRequired, setIsBisnisRequired] = useState(true); + const [isBisnisClicked, setisBisnisClicked] = useState(true); const [selectedValue, setSelectedValue] = useState('PKP'); const [selectedValueBisnis, setSelectedValueBisnis] = useState('true'); const { @@ -49,9 +49,9 @@ const RegistrasiBisnis = () => { const handleChangeBisnis = (value: string) => { setSelectedValueBisnis(value); if (value === "true") { - setIsBisnisRequired(true); // Show and require Individu form + setIsTerdaftar(true); } else { - setIsBisnisRequired(false); // Hide and make optional the Individu form + setIsTerdaftar(true); } }; @@ -60,7 +60,7 @@ const RegistrasiBisnis = () => { }; const handleClickBisnis = () => { - setIsBisnisRequired(!isBisnisRequired) + setisBisnisClicked(!isBisnisClicked) }; const handleSubmit = () => { @@ -77,16 +77,18 @@ const RegistrasiBisnis = () => { <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 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> <div className="mt-4 border"> <div className="p-4"> <div onClick={handleClick} className="flex justify-between"> - <p>Data Akun</p> + <p className="text-2xl font-semibold text-center md:text-left"> + Data Akun + </p> {isIndividuRequired ? ( <div className="flex"> <ChevronDownIcon onClick={handleClick} className='h-6 w-6 text-black' /> @@ -106,8 +108,10 @@ const RegistrasiBisnis = () => { <div className="mt-4 border"> <div className="p-4"> <div onClick={handleClickBisnis} className="flex justify-between"> - <p>Data Bisnis</p> - {isBisnisRequired ? ( + <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> @@ -115,15 +119,15 @@ const RegistrasiBisnis = () => { <ChevronRightIcon onClick={handleClickBisnis} className='h-6 w-6 text-black' /> )} </div> - {isBisnisRequired && ( + {isBisnisClicked && ( <div> <Divider my={4} /> <div> - <p className="text-black font-bold">Bisnis Terdaftar di Indoteknik?</p> + <p className="text-black font-bold mb-2">Bisnis Terdaftar di Indoteknik?</p> <RadioGroup onChange={handleChangeBisnis} value={selectedValueBisnis}> <Stack direction='row'> - <Radio value='true'>Sudah Terdaftar</Radio> - <Radio value='false'>Belum Terdaftar</Radio> + <Radio colorScheme="red" value='true'>Sudah Terdaftar</Radio> + <Radio colorScheme="red" value='false' className="ml-2">Belum Terdaftar</Radio> </Stack> </RadioGroup> </div> @@ -135,14 +139,16 @@ const RegistrasiBisnis = () => { <h1 className=""></h1> <FormCaptcha /> <TermCondition /> - <button + <Button type="submit" - className="btn-yellow w-full mt-2" + colorScheme="red" + className="w-full mt-2" + size='lg' onClick={handleSubmit} - disabled={!isFormValid || !isCheckedTNC || mutation.isLoading || !isValidCaptcha} + // disabled={!isFormValid || !isCheckedTNC || mutation.isLoading || !isValidCaptcha} > {mutation.isLoading ? 'Loading...' : 'Daftar'} - </button> + </Button> </> ); }; diff --git a/src-migrate/modules/register/components/TermCondition.tsx b/src-migrate/modules/register/components/TermCondition.tsx index b7729deb..d54fe921 100644 --- a/src-migrate/modules/register/components/TermCondition.tsx +++ b/src-migrate/modules/register/components/TermCondition.tsx @@ -10,7 +10,7 @@ const TermCondition = () => { return ( <> <div className="mt-4 flex items-center gap-x-2"> - <Checkbox id='tnc' name='tnc' isChecked={isCheckedTNC} onChange={toggleCheckTNC} /> + <Checkbox id='tnc' name='tnc' colorScheme='red' isChecked={isCheckedTNC} onChange={toggleCheckTNC} /> <div> <label htmlFor="tnc" className="cursor-pointer">Dengan ini saya menyetujui</label> {' '} diff --git a/src-migrate/modules/register/index.tsx b/src-migrate/modules/register/index.tsx index e89a6de3..da41a5bb 100644 --- a/src-migrate/modules/register/index.tsx +++ b/src-migrate/modules/register/index.tsx @@ -52,7 +52,7 @@ const Register = () => { <label htmlFor="name" className="text-black font-bold"> Tipe Akun </label> - <div className="grid grid-cols-2 gap-x-3 mt-2 h-10 font-bold text-black hover:cursor-pointer"> + <div className="grid grid-cols-2 gap-x-3 mt-2 h-14 font-bold text-black hover:cursor-pointer"> <div className={` border rounded-md flex justify-center items-center transition-colors duration-300 ease-in-out ${ isIndividuClicked ? "bg-red-500 text-white" : "" diff --git a/src-migrate/modules/register/stores/useRegisterStore.ts b/src-migrate/modules/register/stores/useRegisterStore.ts index 5312bd6c..1ee4c10d 100644 --- a/src-migrate/modules/register/stores/useRegisterStore.ts +++ b/src-migrate/modules/register/stores/useRegisterStore.ts @@ -28,6 +28,7 @@ type Action = { export const useRegisterStore = create<State & Action>((set, get) => ({ form: { company: '', + companyType: '', name: '', email: '', password: '', @@ -40,6 +41,7 @@ export const useRegisterStore = create<State & Action>((set, get) => ({ npwp: '' }, formBisnis: { + companyType: '', company: '', name: '', email: '', |