<iman> add new register

1 files changed, 230 insertions, 0 deletions

diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx
new file mode 100644
index 00000000..85e37875
--- /dev/null
+++ b/src-migrate/modules/register/components/FormBisnis.tsx
@@ -0,0 +1,230 @@
+import { ChangeEvent, useMemo } from "react";
+import { useMutation } from "react-query";
+import { useRegisterStore } from "../stores/useRegisterStore";
+import { RegisterProps } from "~/types/auth";
+import { registerUser } from "~/services/auth";
+import { useRouter } from "next/router";
+import { UseToastOptions, useToast } from "@chakra-ui/react";
+import Link from "next/link";
+import getFileBase64 from '@/core/utils/getFileBase64'
+
+interface FormProps {
+  type: string;
+  required: boolean;
+}
+
+const Form: React.FC<FormProps> = ({ type, required }) => {
+  const {
+    form,
+    isCheckedTNC,
+    isValidCaptcha,
+    errors,
+    updateForm,
+    validate,
+  } = useRegisterStore()
+
+  const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors])
+
+  const router = useRouter()
+  const toast = useToast()
+
+  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = event.target;
+    updateForm(name, value)
+    validate()
+  }
+
+  const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
+    let fileBase64 = ''
+    const file = event.target.files?.[0];
+    if (file) {
+      if (typeof file !== 'undefined') {
+        if (file.size > 5000000) {
+          // toast.error('Maksimal ukuran file adalah 5MB')
+          return
+        }
+        fileBase64 = await getFileBase64(file)
+      }
+      updateForm("document", fileBase64);  // Menyimpan file ke dalam form state
+      validate();
+    }
+  }
+
+  const mutation = useMutation({
+    mutationFn: (data: RegisterProps) => registerUser(data)
+  })
+
+  const handleSubmit = async (e: ChangeEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    const response = await mutation.mutateAsync(form)
+
+    if (response?.register === true) {
+      const urlParams = new URLSearchParams({
+        activation: 'otp',
+        email: form.email,
+        redirect: (router.query?.next || '/') as string
+      })
+      router.push(`${router.route}?${urlParams}`)
+    }
+
+    const toastProps: UseToastOptions = {
+      duration: 5000,
+      isClosable: true
+    }
+
+    switch (response?.reason) {
+      case 'EMAIL_USED':
+        toast({
+          ...toastProps,
+          title: 'Email sudah digunakan',
+          status: 'warning'
+        })
+        break;
+      case 'NOT_ACTIVE':
+        const activationUrl = `${router.route}?activation=email`
+        toast({
+          ...toastProps,
+          title: 'Akun belum aktif',
+          description: <>Akun sudah terdaftar namun belum aktif. <Link href={activationUrl} className="underline">Klik untuk aktivasi akun</Link></>,
+          status: 'warning'
+        })
+        break
+    }
+  }
+
+
+  return (
+    <form className="mt-6 grid grid-cols-1 gap-y-4" onSubmit={handleSubmit}>
+      <div>
+        <label htmlFor='email'>Email Bisnis</label>
+
+        <input
+          type='text'
+          id='email'
+          name='email'
+          className='form-input mt-3'
+          placeholder='example@email.com'
+          value={form.email}
+          onChange={handleInputChange}
+          autoComplete="username"
+          aria-invalid={!!errors.email}
+        />
+
+        {!!errors.email && <span className="form-msg-danger">{errors.email}</span>}
+      </div>
+
+      <div>
+        <label htmlFor="company">
+          Nama Bisnis <span className='text-gray_r-11'>(opsional)</span>
+        </label>
+        <div className="flex justify-between items-center gap-2 h-12">
+          <select
+          className="w-3/4 border h-full rounded-sm"
+          >
+            <option value=''>Pilih Site</option>
+          </select>
+
+          <input
+            type="text"
+            name="company"
+            id="company"
+            className="form-input h-full w-[120%]"
+            placeholder="Nama Perusahaan"
+            autoCapitalize="true"
+            value={form.company}
+            onChange={handleInputChange}
+          />
+        </div>
+      </div>
+
+      <div>
+        <label htmlFor="company">
+          Klasifikasi Jenis Usaha <span className='text-gray_r-11'>(opsional)</span>
+        </label>
+        <div className="flex justify-between flex-col items-center h-12">
+          <select
+          className="w-full border h-full rounded-sm"
+          >
+            <option value=''>After Market Auto Shop</option>
+          </select>
+        </div>
+          <span className='text-gray_r-11 text-xs'>Kategori: Industri Otomotif, Bengkel, Car Wash</span>
+      </div>
+
+      <div>
+        <label htmlFor='name'>Nama Wajib Pajak</label>
+
+        <input
+          type='text'
+          id='name'
+          name='name'
+          className='form-input mt-3'
+          placeholder='Masukan nama lengkap anda'
+          value={form.name}
+          onChange={handleInputChange}
+          aria-invalid={!!errors.name}
+        />
+
+        {!!errors.name && <span className="form-msg-danger">{errors.name}</span>}
+      </div>
+
+      <div>
+        <label htmlFor='phone'>Nomor NPWP</label>
+
+        <input
+          type='tel'
+          id='phone'
+          name='phone'
+          className='form-input mt-3'
+          placeholder='08xxxxxxxx'
+          value={form.phone}
+          onChange={handleInputChange}
+          aria-invalid={!!errors.phone}
+        />
+
+        {!!errors.phone && <span className="form-msg-danger">{errors.phone}</span>}
+      </div>
+
+      <div>
+        <label htmlFor="document">Dokumen NPWP (opsional)</label>
+
+        <input
+          type="file"
+          id="document"
+          name="document"
+          className="form-input mt-3"
+          onChange={handleFileChange}
+          accept=".pdf,.doc,.docx,.png,.jpg,.jpeg"  // Filter file types
+        />
+
+        {/* {!!errors.document && <span className="form-msg-danger">{errors.document}</span>} */}
+      </div>
+
+      <div>
+        <label htmlFor="document">Dokumen SPPKP (opsional)</label>
+
+        <input
+          type="file"
+          id="document"
+          name="document"
+          className="form-input mt-3"
+          onChange={handleFileChange}
+          accept=".pdf,.doc,.docx,.png,.jpg,.jpeg"  // Filter file types
+        />
+
+        {/* {!!errors.document && <span className="form-msg-danger">{errors.document}</span>} */}
+      </div>
+
+      <button
+        type="submit"
+        className="btn-yellow w-full mt-2"
+        disabled={!isFormValid || !isCheckedTNC || mutation.isLoading || !isValidCaptcha}
+      >
+        {mutation.isLoading ? 'Loading...' : 'Daftar'}
+      </button>
+    </form>
+  )
+}
+
+export default Form
\ No newline at end of file