From 2f106583f644e29019828a9e8ed82e23c7c67d0a Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 21 Aug 2024 10:01:27 +0700
Subject: <iman> update view new register

---
 .../modules/register/components/FormBisnis.tsx     | 21 ++++++-----
 .../register/components/RegistrasiBisnis.tsx       | 44 ++++++++++++----------
 .../modules/register/components/TermCondition.tsx  |  2 +-
 src-migrate/modules/register/index.tsx             |  2 +-
 .../modules/register/stores/useRegisterStore.ts    |  2 +
 5 files changed, 40 insertions(+), 31 deletions(-)

(limited to 'src-migrate/modules/register')

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: '',
-- 
cgit v1.2.3