Merged in refactor/all (pull request #116)

Refactor/all

4 files changed, 281 insertions, 0 deletions

diff --git a/src-migrate/modules/register/components/Form.tsx b/src-migrate/modules/register/components/Form.tsx
new file mode 100644
index 00000000..dc9107b2
--- /dev/null
+++ b/src-migrate/modules/register/components/Form.tsx
@@ -0,0 +1,179 @@
+import { ChangeEvent, useMemo } from "react";
+import { useMutation } from "react-query";
+import { useRegisterStore } from "~/common/stores/useRegisterStore";
+import { RegisterProps } from "~/common/types/auth";
+import { registerUser } from "~/services/auth";
+import TermCondition from "./TermCondition";
+import FormCaptcha from "./FormCaptcha";
+import { useRouter } from "next/router";
+import { UseToastOptions, useToast } from "@chakra-ui/react";
+import Link from "next/link";
+
+const Form = () => {
+  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 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="company">
+          Nama Perusahaan <span className='text-gray_r-11'>(opsional)</span>
+        </label>
+
+        <input
+          type="text"
+          name="company"
+          id="company"
+          className="form-input mt-3"
+          placeholder="cth: INDOTEKNIK DOTCOM GEMILANG"
+          autoCapitalize="true"
+          value={form.company}
+          onChange={handleInputChange}
+        />
+      </div>
+
+      <div>
+        <label htmlFor='name'>Nama Lengkap</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'>No Handphone</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='email'>Alamat Email</label>
+
+        <input
+          type='text'
+          id='email'
+          name='email'
+          className='form-input mt-3'
+          placeholder='Masukan alamat email anda'
+          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='password'>Kata Sandi</label>
+        <input
+          type='password'
+          name='password'
+          id='password'
+          className='form-input mt-3'
+          placeholder='••••••••••••'
+          value={form.password}
+          onChange={handleInputChange}
+          autoComplete="current-password"
+          aria-invalid={!!errors.password}
+        />
+
+        {!!errors.password && <span className="form-msg-danger">{errors.password}</span>}
+      </div>
+
+      <FormCaptcha />
+
+      <TermCondition />
+
+      <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
diff --git a/src-migrate/modules/register/components/FormCaptcha.tsx b/src-migrate/modules/register/components/FormCaptcha.tsx
new file mode 100644
index 00000000..967be017
--- /dev/null
+++ b/src-migrate/modules/register/components/FormCaptcha.tsx
@@ -0,0 +1,14 @@
+import ReCaptcha from '~/common/components/elements/ReCaptcha'
+import { useRegisterStore } from '~/common/stores/useRegisterStore'
+
+const FormCaptcha = () => {
+  const { updateValidCaptcha } = useRegisterStore()
+
+  const handleCaptchaChange = (value: string | null) => {
+    updateValidCaptcha(value !== null)
+  }
+
+  return <ReCaptcha onChange={handleCaptchaChange} />
+}
+
+export default FormCaptcha
\ No newline at end of file
diff --git a/src-migrate/modules/register/components/TermCondition.tsx b/src-migrate/modules/register/components/TermCondition.tsx
new file mode 100644
index 00000000..6b95ba19
--- /dev/null
+++ b/src-migrate/modules/register/components/TermCondition.tsx
@@ -0,0 +1,34 @@
+import { Checkbox } from '@chakra-ui/react'
+import React from 'react'
+import Modal from '~/common/components/elements/Modal'
+import { useRegisterStore } from '~/common/stores/useRegisterStore'
+import PageContent from '~/modules/page-content'
+
+const TermCondition = () => {
+  const { isOpenTNC, closeTNC, isCheckedTNC, toggleCheckTNC, openTNC } = useRegisterStore()
+
+  return (
+    <>
+      <div className="mt-4 flex items-center gap-x-2">
+        <Checkbox id='tnc' name='tnc' isChecked={isCheckedTNC} onChange={toggleCheckTNC} />
+        <div>
+          <label htmlFor="tnc" className="cursor-pointer">Dengan ini saya menyetujui</label>
+          {' '}
+          <span
+            className="font-medium text-danger-500 cursor-pointer"
+            onClick={openTNC}
+          >
+            syarat dan ketentuan
+          </span>
+          <label htmlFor="tnc" className="ml-2 cursor-pointer">yang berlaku</label>
+        </div>
+      </div>
+
+      <Modal active={isOpenTNC} close={closeTNC} >
+        <PageContent path='/register#tnd' />
+      </Modal>
+    </>
+  )
+}
+
+export default TermCondition
\ No newline at end of file
diff --git a/src-migrate/modules/register/index.tsx b/src-migrate/modules/register/index.tsx
new file mode 100644
index 00000000..00931284
--- /dev/null
+++ b/src-migrate/modules/register/index.tsx
@@ -0,0 +1,54 @@
+import PageContent from "~/modules/page-content"
+import Form from "./components/Form"
+import Link from "next/link"
+import Image from "next/image"
+import IndoteknikLogo from "~/images/logo.png"
+import AccountActivation from "../account-activation"
+
+const LOGO_WIDTH = 150;
+const LOGO_HEIGHT = LOGO_WIDTH / 3;
+
+const Register = () => {
+  return (
+    <div className="container">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-x-10 pt-10 px-2 md:pt-16">
+        <section>
+          <Link href='/' className="block md:hidden">
+            <Image src={IndoteknikLogo} alt='Logo Indoteknik' width={LOGO_WIDTH} height={LOGO_HEIGHT} className="mx-auto mb-4 w-auto h-auto" priority />
+          </Link>
+
+          <h1 className="text-2xl font-semibold text-center md:text-left">
+            Daftar Akun Indoteknik
+          </h1>
+          <h2 className="text-gray_r-11 mt-1 mb-10 text-center md:text-left">
+            Buat akun sekarang lebih mudah dan terverifikasi
+          </h2>
+
+          <Form />
+
+          <div className='text-gray_r-11 mt-4 text-center md:text-left'>
+            Sudah punya akun Indoteknik?{' '}
+            <Link href='/login' className='inline font-medium text-danger-500'>
+              Masuk
+            </Link>
+          </div>
+
+          <div className='text-gray_r-11 mt-4 text-center md:text-left'>
+            Akun anda belum aktif?{' '}
+            <Link href='/register?activation=email' className='inline font-medium text-danger-500'>
+              Aktivasi
+            </Link>
+          </div>
+        </section>
+
+        <section className="my-10 md:my-0">
+          <PageContent path="/register" />
+        </section>
+      </div>
+
+      <AccountActivation />
+    </div>
+  )
+}
+
+export default Register
\ No newline at end of file