From 90710579ba1c12060877f6ec2d26103f9c31058d Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Mon, 23 Oct 2023 17:11:33 +0700
Subject: Refactor and migrate register page

---
 .../modules/header/components/HeaderDesktop.tsx    |  82 +++++++++++++++
 .../modules/header/components/HeaderMobile.tsx     |   7 ++
 .../modules/header/components/SearchBar.tsx        |  24 +++++
 src-migrate/modules/header/index.tsx               |  13 +++
 src-migrate/modules/home/components/Home.tsx       |  15 +++
 .../modules/home/components/VerticalBanner.tsx     |   7 ++
 src-migrate/modules/home/index.tsx                 |   3 +
 src-migrate/modules/page-content/index.tsx         |  22 ++++
 src-migrate/modules/register/components/Form.tsx   | 117 +++++++++++++++++++++
 .../modules/register/components/Register.tsx       |  39 +++++++
 .../modules/register/components/TermCondition.tsx  |  16 +++
 src-migrate/modules/register/index.tsx             |   3 +
 12 files changed, 348 insertions(+)
 create mode 100644 src-migrate/modules/header/components/HeaderDesktop.tsx
 create mode 100644 src-migrate/modules/header/components/HeaderMobile.tsx
 create mode 100644 src-migrate/modules/header/components/SearchBar.tsx
 create mode 100644 src-migrate/modules/header/index.tsx
 create mode 100644 src-migrate/modules/home/components/Home.tsx
 create mode 100644 src-migrate/modules/home/components/VerticalBanner.tsx
 create mode 100644 src-migrate/modules/home/index.tsx
 create mode 100644 src-migrate/modules/page-content/index.tsx
 create mode 100644 src-migrate/modules/register/components/Form.tsx
 create mode 100644 src-migrate/modules/register/components/Register.tsx
 create mode 100644 src-migrate/modules/register/components/TermCondition.tsx
 create mode 100644 src-migrate/modules/register/index.tsx

(limited to 'src-migrate/modules')

diff --git a/src-migrate/modules/header/components/HeaderDesktop.tsx b/src-migrate/modules/header/components/HeaderDesktop.tsx
new file mode 100644
index 00000000..3860bded
--- /dev/null
+++ b/src-migrate/modules/header/components/HeaderDesktop.tsx
@@ -0,0 +1,82 @@
+import Logo from "~/images/logo.png";
+import { DocumentCheckIcon, HeartIcon } from "@heroicons/react/24/outline";
+
+import Image from 'next/image'
+import Link from 'next/link'
+
+// Components
+import SearchBar from "./SearchBar";
+
+// Constants
+import { SECONDARY_MENU_ITEMS } from "~/common/constants/menu";
+
+const LOGO_WIDTH = 210;
+const LOGO_HEIGHT = LOGO_WIDTH / 3;
+
+const HeaderDesktop = () => {
+  return (
+    <header>
+      <nav className="pt-6 sticky top-0 z-50 bg-white border-b-2 border-danger-500">
+        <div className="container flex items-center gap-x-6">
+          <Link href='/'>
+            <Image src={Logo} alt="Logo Indoteknik.com" width={LOGO_WIDTH} height={LOGO_HEIGHT} />
+          </Link>
+
+          <SearchBar />
+
+          <div className="flex gap-x-4 items-center">
+            <Link
+              target='_blank'
+              rel='noreferrer'
+              href='/my/transactions'
+              className='flex items-center gap-x-2 !text-gray-900'
+            >
+              <DocumentCheckIcon className='w-7' />
+              Daftar<br />Quotation
+            </Link>
+
+            <Link
+              target='_blank'
+              rel='noreferrer'
+              href='/my/wishlist'
+              className='flex items-center gap-x-2 !text-gray-900'
+            >
+              <HeartIcon className='w-7' />
+              Wishlist
+            </Link>
+
+            <a
+              href={''}
+              target='_blank'
+              rel='noreferrer'
+              className='flex items-center gap-x-1 !text-gray_r-12/80'
+            >
+              <Image src='/images/socials/Whatsapp-2.png' alt='Whatsapp' width={48} height={48} />
+              <div>
+                <div className='font-semibold'>Whatsapp</div>
+                0812 8080 622 (Chat)
+              </div>
+            </a>
+          </div>
+        </div>
+
+        <div className="container mt-6 flex">
+          <button type="button" className="w-3/12 p-4 font-semibold border border-gray_r-6 rounded-t-xl flex items-center relative">
+            Kategori
+          </button>
+
+          <nav className="w-6/12 flex px-1 divide-x divide-gray-200">
+            {SECONDARY_MENU_ITEMS.map((item, index) => (
+              <Link key={index} href={item.href} target="_blank" rel="noreferrer" className="font-medium text-center p-4 flex-1 !text-gray-800 hover:bg-gray-100 transition-all">
+                {item.label}
+              </Link>
+            ))}
+          </nav>
+
+        </div>
+      </nav>
+    </header>
+  )
+}
+
+export default HeaderDesktop
\ No newline at end of file
diff --git a/src-migrate/modules/header/components/HeaderMobile.tsx b/src-migrate/modules/header/components/HeaderMobile.tsx
new file mode 100644
index 00000000..626f30d7
--- /dev/null
+++ b/src-migrate/modules/header/components/HeaderMobile.tsx
@@ -0,0 +1,7 @@
+const HeaderMobile = () => {
+  return (
+    <div>HeaderMobile</div>
+  )
+}
+
+export default HeaderMobile
\ No newline at end of file
diff --git a/src-migrate/modules/header/components/SearchBar.tsx b/src-migrate/modules/header/components/SearchBar.tsx
new file mode 100644
index 00000000..ec17abe8
--- /dev/null
+++ b/src-migrate/modules/header/components/SearchBar.tsx
@@ -0,0 +1,24 @@
+
+import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'
+
+const SearchBar = () => {
+  return (
+    <form className="flex-1 flex items-center">
+      <input
+        type="text"
+        className="form-input p-3 rounded-r-none border-r-0 border-gray-300 focus:border-gray-300"
+        placeholder="Ketik nama / part number / merk"
+      />
+
+      <button
+        type="submit"
+        className="rounded-r border border-l-0 border-gray-300 px-2 py-2.5"
+      >
+        <MagnifyingGlassIcon className='w-6' />
+      </button>
+
+    </form>
+  )
+}
+
+export default SearchBar
\ No newline at end of file
diff --git a/src-migrate/modules/header/index.tsx b/src-migrate/modules/header/index.tsx
new file mode 100644
index 00000000..5c0e2933
--- /dev/null
+++ b/src-migrate/modules/header/index.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { useWindowSize } from "usehooks-ts"
+
+import HeaderDesktop from './components/HeaderDesktop'
+import HeaderMobile from './components/HeaderMobile'
+
+const Header = () => {
+  const { width } = useWindowSize()
+
+  return width > 768 ? <HeaderDesktop /> : <HeaderMobile />
+}
+
+export default Header
\ No newline at end of file
diff --git a/src-migrate/modules/home/components/Home.tsx b/src-migrate/modules/home/components/Home.tsx
new file mode 100644
index 00000000..5d3bf104
--- /dev/null
+++ b/src-migrate/modules/home/components/Home.tsx
@@ -0,0 +1,15 @@
+import VerticalBanner from "./VerticalBanner"
+
+const Home = () => {
+  return (
+    <>
+      <div className="container grid">
+        <div className="col-span-2">
+          <VerticalBanner />
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default Home
\ No newline at end of file
diff --git a/src-migrate/modules/home/components/VerticalBanner.tsx b/src-migrate/modules/home/components/VerticalBanner.tsx
new file mode 100644
index 00000000..57328037
--- /dev/null
+++ b/src-migrate/modules/home/components/VerticalBanner.tsx
@@ -0,0 +1,7 @@
+const VerticalBanner = () => {
+  return (
+    <div>VerticalBanner</div>
+  )
+}
+
+export default VerticalBanner
\ No newline at end of file
diff --git a/src-migrate/modules/home/index.tsx b/src-migrate/modules/home/index.tsx
new file mode 100644
index 00000000..6993d9cf
--- /dev/null
+++ b/src-migrate/modules/home/index.tsx
@@ -0,0 +1,3 @@
+import Home from "./components/Home";
+
+export default Home
\ No newline at end of file
diff --git a/src-migrate/modules/page-content/index.tsx b/src-migrate/modules/page-content/index.tsx
new file mode 100644
index 00000000..cbd58633
--- /dev/null
+++ b/src-migrate/modules/page-content/index.tsx
@@ -0,0 +1,22 @@
+import { useQuery } from "react-query"
+import PageContentSkeleton from "~/common/components/skeleton/PageContentSkeleton"
+import { PageContentProps } from "~/common/types/pageContent"
+import { getPageContent } from "~/services/pageContent"
+
+type Props = {
+  path: string
+}
+
+const PageContent = ({ path }: Props) => {
+  const { data, isLoading } = useQuery<PageContentProps>(`page-content:${path}`, async () => await getPageContent({ path }))
+
+  if (isLoading) {
+    return <PageContentSkeleton />
+  }
+
+  return (
+    <div dangerouslySetInnerHTML={{ __html: data?.content || '' }}></div>
+  )
+}
+
+export default PageContent
\ No newline at end of file
diff --git a/src-migrate/modules/register/components/Form.tsx b/src-migrate/modules/register/components/Form.tsx
new file mode 100644
index 00000000..ac194b46
--- /dev/null
+++ b/src-migrate/modules/register/components/Form.tsx
@@ -0,0 +1,117 @@
+import { ChangeEvent } from "react";
+import { useMutation } from "react-query";
+import { useRegisterStore } from "~/common/stores/useRegisterStore";
+import { RegisterProps } from "~/common/types/auth";
+import { registerUser } from "~/services/auth";
+
+const Form = () => {
+  const { form, isValid, isCheckedTNC, updateForm, toggleCheckTNC, openTNC } = useRegisterStore()
+
+  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = event.target;
+    updateForm(name, value)
+  }
+
+  const mutation = useMutation({
+    mutationFn: (data: RegisterProps) => registerUser(data)
+  })
+
+  const handleSubmit = async (e: ChangeEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    const response = await mutation.mutateAsync(form)
+    console.log(response);
+
+  }
+
+  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}
+        />
+      </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}
+        />
+      </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}
+        />
+      </div>
+
+      <div className="mt-4">
+        <input
+          type="checkbox"
+          name="tnc"
+          id="tnc"
+          checked={isCheckedTNC}
+          onClick={toggleCheckTNC}
+        />
+        <label htmlFor="tnc" className="ml-2 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>
+
+      <button
+        type="submit"
+        className="btn-yellow w-full mt-2"
+        disabled={!isValid || !isCheckedTNC || mutation.isLoading}
+      >
+        {mutation.isLoading ? 'Loading...' : 'Daftar'}
+      </button>
+    </form>
+  )
+}
+
+export default Form
\ No newline at end of file
diff --git a/src-migrate/modules/register/components/Register.tsx b/src-migrate/modules/register/components/Register.tsx
new file mode 100644
index 00000000..e3e29b9f
--- /dev/null
+++ b/src-migrate/modules/register/components/Register.tsx
@@ -0,0 +1,39 @@
+import PageContent from "~/modules/page-content"
+import Form from "./Form"
+import Link from "next/link"
+import Modal from "~/common/components/elements/Modal"
+import TermCondition from "./TermCondition"
+
+const Register = () => {
+  return (
+    <div className="container">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-x-10 pt-16">
+        <section>
+          <h1 className="text-2xl font-semibold">
+            Daftar Akun Indoteknik
+          </h1>
+          <h2 className="text-gray_r-11 mt-1 mb-4">
+            Buat akun sekarang lebih mudah dan terverifikasi
+          </h2>
+
+          <Form />
+
+          <div className='text-gray_r-11 mt-10'>
+            Sudah punya akun Indoteknik?{' '}
+            <Link href='/login' className='inline font-medium text-danger-500'>
+              Masuk
+            </Link>
+          </div>
+        </section>
+
+        <section className="my-10 md:my-0">
+          <PageContent path="/register" />
+        </section>
+      </div>
+
+      <TermCondition />
+    </div>
+  )
+}
+
+export default Register
\ 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..304ffd69
--- /dev/null
+++ b/src-migrate/modules/register/components/TermCondition.tsx
@@ -0,0 +1,16 @@
+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 } = useRegisterStore()
+
+  return (
+    <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..ba5efa3a
--- /dev/null
+++ b/src-migrate/modules/register/index.tsx
@@ -0,0 +1,3 @@
+import Register from "./components/Register";
+
+export default Register
\ No newline at end of file
-- 
cgit v1.2.3


From cf6da809621b4ebe8c9acedb035b689e7e1b60b1 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 25 Oct 2023 17:27:32 +0700
Subject: Update register page

---
 .../account-activation/components/FormEmail.tsx    |  7 ++
 .../account-activation/components/FormOTP.tsx      | 23 ++++++
 .../account-activation/components/FormToken.tsx    | 83 ++++++++++++++++++++++
 src-migrate/modules/account-activation/index.tsx   | 12 ++++
 src-migrate/modules/register/components/Form.tsx   | 53 ++++++++------
 .../modules/register/components/FormCaptcha.tsx    | 14 ++++
 .../modules/register/components/Register.tsx       | 39 ----------
 .../modules/register/components/TermCondition.tsx  | 26 +++++--
 src-migrate/modules/register/index.tsx             | 46 +++++++++++-
 9 files changed, 238 insertions(+), 65 deletions(-)
 create mode 100644 src-migrate/modules/account-activation/components/FormEmail.tsx
 create mode 100644 src-migrate/modules/account-activation/components/FormOTP.tsx
 create mode 100644 src-migrate/modules/account-activation/components/FormToken.tsx
 create mode 100644 src-migrate/modules/account-activation/index.tsx
 create mode 100644 src-migrate/modules/register/components/FormCaptcha.tsx
 delete mode 100644 src-migrate/modules/register/components/Register.tsx

(limited to 'src-migrate/modules')

diff --git a/src-migrate/modules/account-activation/components/FormEmail.tsx b/src-migrate/modules/account-activation/components/FormEmail.tsx
new file mode 100644
index 00000000..f16ab93f
--- /dev/null
+++ b/src-migrate/modules/account-activation/components/FormEmail.tsx
@@ -0,0 +1,7 @@
+const FormEmail = () => {
+  return (
+    <div>FormEmail</div>
+  )
+}
+
+export default FormEmail
\ No newline at end of file
diff --git a/src-migrate/modules/account-activation/components/FormOTP.tsx b/src-migrate/modules/account-activation/components/FormOTP.tsx
new file mode 100644
index 00000000..24e9e7f6
--- /dev/null
+++ b/src-migrate/modules/account-activation/components/FormOTP.tsx
@@ -0,0 +1,23 @@
+import { HStack, PinInput, PinInputField } from "@chakra-ui/react"
+import Modal from '~/common/components/elements/Modal'
+
+const FormOTP = () => {
+  return (
+    <Modal active={false} className="w-10/12 md:w-fit px-10" mode="desktop">
+      <div className="pb-8 flex flex-col items-center">
+        <div className="text-title-sm font-medium mb-4">Masukan Kode OTP</div>
+        <HStack>
+          <PinInput size='lg' otp>
+            <PinInputField autoFocus />
+            <PinInputField />
+            <PinInputField />
+            <PinInputField />
+          </PinInput>
+        </HStack>
+        <div className="mt-4">Kode OTP dikirimkan ke email anda</div>
+      </div>
+    </Modal>
+  )
+}
+
+export default FormOTP
\ No newline at end of file
diff --git a/src-migrate/modules/account-activation/components/FormToken.tsx b/src-migrate/modules/account-activation/components/FormToken.tsx
new file mode 100644
index 00000000..041fbae8
--- /dev/null
+++ b/src-migrate/modules/account-activation/components/FormToken.tsx
@@ -0,0 +1,83 @@
+import { Alert, AlertDescription, AlertIcon, AlertTitle, Spinner } from "@chakra-ui/react"
+import { useRouter } from "next/router"
+import { useEffect, useState } from "react"
+import Link from "next/link"
+import { useMutation } from "react-query"
+
+import Modal from "~/common/components/elements/Modal"
+import { ActivationTokenProps } from "~/common/types/auth"
+import { activationUserToken } from "~/services/auth"
+
+type StatusProps = "success" | "error" | "loading";
+
+const FormToken = () => {
+  const { query } = useRouter()
+  const [status, setStatus] = useState<StatusProps>("loading")
+  const [active, setActive] = useState<boolean>(false)
+
+  const mutation = useMutation({
+    mutationFn: (data: ActivationTokenProps) => activationUserToken(data),
+    onSuccess: (data) => {
+      if (data.activation === true) {
+        setStatus("success")
+      } else {
+        setStatus("error")
+      }
+    }
+  })
+
+  useEffect(() => {
+    if (query?.activation === 'token' && typeof query?.token === 'string') {
+      mutation.mutate({ token: query.token })
+      setActive(true)
+    }
+    //eslint-disable-next-line
+  }, [query.activation, query.token])
+
+  return (
+    <Modal active={active} mode="desktop">
+      <div className="pb-6 flex flex-col items-center gap-y-6">
+        {status === 'loading' && (
+          <>
+            <Spinner size='lg' borderWidth='3px' />
+            <div className="text-h-sm">Mohon tunggu sedang memverifikasi akun</div>
+          </>
+        )}
+
+        {status !== 'loading' && (
+          <Alert
+            status={status}
+            flexDirection="column"
+            alignItems="center"
+            justifyContent="center"
+            textAlign="center"
+            height="200px"
+            bg="transparent"
+          >
+            <AlertIcon boxSize="40px" mr={0} />
+            <AlertTitle className="mt-4 mb-1 text-h-sm">
+              Aktivasi akun {status === 'success' ? 'berhasil' : 'gagal'}
+            </AlertTitle>
+            <AlertDescription maxWidth="sm">
+              {status === 'success' && (
+                <>
+                  Akun anda berhasil diaktifkan, selamat berbelanja di Indoteknik.
+                  <Link href='/' className="block mt-8 text-success-700 underline">Kembali ke halaman utama</Link>
+                </>
+              )}
+
+              {status === 'error' && mutation.data?.reason === 'INVALID_TOKEN' && (
+                <>
+                  Token sudah kadaluwarsa, silahkan coba kembali.
+                  <Link href='/register?activation=email' className="block mt-8 text-red-700 underline">Aktivasi Akun</Link>
+                </>
+              )}
+            </AlertDescription>
+          </Alert>
+        )}
+      </div>
+    </Modal>
+  )
+}
+
+export default FormToken
\ No newline at end of file
diff --git a/src-migrate/modules/account-activation/index.tsx b/src-migrate/modules/account-activation/index.tsx
new file mode 100644
index 00000000..edcc6652
--- /dev/null
+++ b/src-migrate/modules/account-activation/index.tsx
@@ -0,0 +1,12 @@
+import { useRouter } from "next/router"
+import FormToken from "./components/FormToken"
+
+const AccountActivation = () => {
+  return (
+    <>
+      <FormToken />
+    </>
+  )
+}
+
+export default AccountActivation
\ No newline at end of file
diff --git a/src-migrate/modules/register/components/Form.tsx b/src-migrate/modules/register/components/Form.tsx
index ac194b46..fc1567ab 100644
--- a/src-migrate/modules/register/components/Form.tsx
+++ b/src-migrate/modules/register/components/Form.tsx
@@ -3,9 +3,17 @@ 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";
 
 const Form = () => {
-  const { form, isValid, isCheckedTNC, updateForm, toggleCheckTNC, openTNC } = useRegisterStore()
+  const {
+    form,
+    isValid,
+    isCheckedTNC,
+    isValidCaptcha,
+    updateForm,
+  } = useRegisterStore()
 
   const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = event.target;
@@ -20,8 +28,10 @@ const Form = () => {
     e.preventDefault()
 
     const response = await mutation.mutateAsync(form)
-    console.log(response);
 
+    if (response?.register === true) {
+
+    }
   }
 
   return (
@@ -57,6 +67,20 @@ const Form = () => {
         />
       </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}
+        />
+      </div>
+
       <div>
         <label htmlFor='email'>Alamat Email</label>
 
@@ -68,6 +92,7 @@ const Form = () => {
           placeholder='Masukan alamat email anda'
           value={form.email}
           onChange={handleInputChange}
+          autoComplete="username"
         />
       </div>
 
@@ -81,32 +106,18 @@ const Form = () => {
           placeholder='••••••••••••'
           value={form.password}
           onChange={handleInputChange}
+          autoComplete="current-password"
         />
       </div>
 
-      <div className="mt-4">
-        <input
-          type="checkbox"
-          name="tnc"
-          id="tnc"
-          checked={isCheckedTNC}
-          onClick={toggleCheckTNC}
-        />
-        <label htmlFor="tnc" className="ml-2 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>
+      <FormCaptcha />
+
+      <TermCondition />
 
       <button
         type="submit"
         className="btn-yellow w-full mt-2"
-        disabled={!isValid || !isCheckedTNC || mutation.isLoading}
+        disabled={!isValid || !isCheckedTNC || mutation.isLoading || !isValidCaptcha}
       >
         {mutation.isLoading ? 'Loading...' : 'Daftar'}
       </button>
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/Register.tsx b/src-migrate/modules/register/components/Register.tsx
deleted file mode 100644
index e3e29b9f..00000000
--- a/src-migrate/modules/register/components/Register.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import PageContent from "~/modules/page-content"
-import Form from "./Form"
-import Link from "next/link"
-import Modal from "~/common/components/elements/Modal"
-import TermCondition from "./TermCondition"
-
-const Register = () => {
-  return (
-    <div className="container">
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-x-10 pt-16">
-        <section>
-          <h1 className="text-2xl font-semibold">
-            Daftar Akun Indoteknik
-          </h1>
-          <h2 className="text-gray_r-11 mt-1 mb-4">
-            Buat akun sekarang lebih mudah dan terverifikasi
-          </h2>
-
-          <Form />
-
-          <div className='text-gray_r-11 mt-10'>
-            Sudah punya akun Indoteknik?{' '}
-            <Link href='/login' className='inline font-medium text-danger-500'>
-              Masuk
-            </Link>
-          </div>
-        </section>
-
-        <section className="my-10 md:my-0">
-          <PageContent path="/register" />
-        </section>
-      </div>
-
-      <TermCondition />
-    </div>
-  )
-}
-
-export default Register
\ No newline at end of file
diff --git a/src-migrate/modules/register/components/TermCondition.tsx b/src-migrate/modules/register/components/TermCondition.tsx
index 304ffd69..aaba6604 100644
--- a/src-migrate/modules/register/components/TermCondition.tsx
+++ b/src-migrate/modules/register/components/TermCondition.tsx
@@ -1,15 +1,33 @@
+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 } = useRegisterStore()
+  const { isOpenTNC, closeTNC, isCheckedTNC, toggleCheckTNC, openTNC } = useRegisterStore()
 
   return (
-    <Modal active={isOpenTNC} close={closeTNC} >
-      <PageContent path='/register#tnd' />
-    </Modal>
+    <>
+      <div className="mt-4 flex items-center gap-x-2">
+        <Checkbox id='tnc' name='tnc' checked={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>
+    </>
   )
 }
 
diff --git a/src-migrate/modules/register/index.tsx b/src-migrate/modules/register/index.tsx
index ba5efa3a..6325ee09 100644
--- a/src-migrate/modules/register/index.tsx
+++ b/src-migrate/modules/register/index.tsx
@@ -1,3 +1,47 @@
-import Register from "./components/Register";
+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>
+        </section>
+
+        <section className="my-10 md:my-0">
+          <PageContent path="/register" />
+        </section>
+      </div>
+
+      <AccountActivation />
+    </div>
+  )
+}
 
 export default Register
\ No newline at end of file
-- 
cgit v1.2.3


From c82110f7d3a2f85de99045fde7b579e369f15b2c Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Sat, 28 Oct 2023 09:05:00 +0700
Subject: Update authentication feature

---
 .../account-activation/components/FormEmail.tsx    |  91 ++++++++++++++++-
 .../account-activation/components/FormOTP.tsx      | 112 ++++++++++++++++++++-
 .../account-activation/components/FormToken.tsx    |  24 ++---
 src-migrate/modules/account-activation/index.tsx   |   4 +
 src-migrate/modules/register/components/Form.tsx   |  35 ++++++-
 src-migrate/modules/register/index.tsx             |   7 ++
 6 files changed, 251 insertions(+), 22 deletions(-)

(limited to 'src-migrate/modules')

diff --git a/src-migrate/modules/account-activation/components/FormEmail.tsx b/src-migrate/modules/account-activation/components/FormEmail.tsx
index f16ab93f..cd917bc9 100644
--- a/src-migrate/modules/account-activation/components/FormEmail.tsx
+++ b/src-migrate/modules/account-activation/components/FormEmail.tsx
@@ -1,6 +1,95 @@
+import { Alert, AlertIcon } from "@chakra-ui/react"
+import Link from "next/link"
+import { useRouter } from "next/router"
+import { ChangeEvent, useEffect, useState } from "react"
+import { useMutation } from "react-query"
+import Modal from "~/common/components/elements/Modal"
+import { useRegisterStore } from "~/common/stores/useRegisterStore"
+import { ActivationReqProps } from "~/common/types/auth"
+import { activationReq } from "~/services/auth"
+
 const FormEmail = () => {
+  const router = useRouter()
+  const { query } = router
+  const [active, setActive] = useState<boolean>(false)
+  const [isBtnDisabled, setIsBtnDisabled] = useState<boolean>(true)
+  const [email, setEmail] = useState<string>('')
+
+  const { form } = useRegisterStore()
+
+  useEffect(() => {
+    if (form) setEmail(form?.email)
+  }, [form])
+
+  useEffect(() => {
+    setIsBtnDisabled(email === '')
+  }, [email])
+
+  useEffect(() => {
+    setActive(query?.activation === 'email')
+  }, [query.activation])
+
+  const mutation = useMutation({
+    mutationFn: (data: ActivationReqProps) => activationReq(data)
+  })
+
+  const handleSubmit = (e: ChangeEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    mutation.data = undefined
+    mutation.mutate({ email })
+  }
+
+  useEffect(() => {
+    if (mutation.data?.activation_request === true) {
+      const urlParams = new URLSearchParams({
+        activation: 'otp',
+        email
+      })
+      router.push(`${router.route}?${urlParams}`)
+    }
+  }, [mutation.data?.activation_request, router, email])
+
   return (
-    <div>FormEmail</div>
+    <Modal active={active} mode="desktop" close={() => router.push(router.route)} title="Aktivasi Akun">
+      <form onSubmit={handleSubmit} className="py-3 flex flex-col items-center gap-y-4">
+        {
+          mutation.data !== undefined &&
+          !mutation.data?.activation_request &&
+          (
+            <Alert status="warning">
+              <AlertIcon />
+              {mutation.data?.reason === 'ACTIVE' && 'Akun sudah aktif.'}
+              {mutation.data?.reason === 'NOT_FOUND' && 'Akun tidak ditemukan.'}
+
+              {mutation.data?.reason === 'ACTIVE' && (
+                <Link href="/login" className="ml-1 text-yellow-700 underline">Klik untuk masuk akun anda</Link>
+              )}
+
+              {mutation.data?.reason === 'NOT_FOUND' && (
+                <Link href="/register" className="ml-1 text-yellow-700 underline">Klik untuk daftar akun baru</Link>
+              )}
+            </Alert>
+          )
+        }
+
+        <input
+          type="text"
+          className="form-input w-full"
+          placeholder="Masukan alamat email anda"
+          autoComplete="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          autoFocus
+        />
+        <button
+          type="submit"
+          className="btn-yellow w-full"
+          disabled={isBtnDisabled || mutation.isLoading}
+        >
+          {mutation.isLoading ? 'Loading...' : 'Kirim Aktivasi'}
+        </button>
+      </form>
+    </Modal>
   )
 }
 
diff --git a/src-migrate/modules/account-activation/components/FormOTP.tsx b/src-migrate/modules/account-activation/components/FormOTP.tsx
index 24e9e7f6..e38fa8fe 100644
--- a/src-migrate/modules/account-activation/components/FormOTP.tsx
+++ b/src-migrate/modules/account-activation/components/FormOTP.tsx
@@ -1,23 +1,127 @@
-import { HStack, PinInput, PinInputField } from "@chakra-ui/react"
+import { HStack, PinInput, PinInputField, Spinner } from "@chakra-ui/react"
+import Link from "next/link"
+import { useRouter } from "next/router"
+import { useEffect, useState } from "react"
+import { useMutation } from "react-query"
+import { useCountdown } from "usehooks-ts"
 import Modal from '~/common/components/elements/Modal'
+import { ActivationOtpProps, ActivationReqProps } from "~/common/types/auth"
+import { activationReq, activationUserOTP } from "~/services/auth"
 
 const FormOTP = () => {
+  const router = useRouter()
+  const { query } = router
+  const [active, setActive] = useState<boolean>(false)
+  const [email, setEmail] = useState<string>('')
+  const [otp, setOtp] = useState<string>('')
+  const [count, { startCountdown, resetCountdown }] = useCountdown({
+    countStart: 60 * 3,
+    intervalMs: 1000,
+  })
+
+  useEffect(() => {
+    setEmail((query?.email || '') as string)
+  }, [query?.email])
+
+  useEffect(() => {
+    setActive(query?.activation === 'otp')
+  }, [query.activation])
+
+  useEffect(() => {
+    !!active && startCountdown()
+  }, [active, startCountdown])
+
+  const mutationActivationReq = useMutation({
+    mutationFn: (data: ActivationReqProps) => activationReq(data),
+    onSuccess: () => {
+      resetCountdown()
+      startCountdown()
+    }
+  })
+
+  const mutationActivation = useMutation({
+    mutationFn: (data: ActivationOtpProps) => activationUserOTP(data)
+  })
+
+  useEffect(() => {
+    if (otp.length === 4 && !mutationActivation.data?.activation) {
+      mutationActivation.mutate({ email, otp })
+    }
+    //eslint-disable-next-line
+  }, [otp])
+
+  // TODO: Save user to local storage
+
   return (
-    <Modal active={false} className="w-10/12 md:w-fit px-10" mode="desktop">
+    <Modal active={active} className="w-10/12 md:w-fit px-10" mode="desktop">
       <div className="pb-8 flex flex-col items-center">
         <div className="text-title-sm font-medium mb-4">Masukan Kode OTP</div>
         <HStack>
-          <PinInput size='lg' otp>
+          <PinInput size='lg' otp onChange={(val) => setOtp(val)}>
             <PinInputField autoFocus />
             <PinInputField />
             <PinInputField />
             <PinInputField />
           </PinInput>
         </HStack>
-        <div className="mt-4">Kode OTP dikirimkan ke email anda</div>
+        <div className="mt-4 text-center">
+          {mutationActivation.isLoading && <Spinner size='sm' />}
+
+          {!mutationActivation.isLoading &&
+            mutationActivation.data?.reason === 'INVALID_OTP' &&
+            (
+              <span className="text-red-700">Mohon maaf kode OTP yand anda masukan salah</span>
+            )
+          }
+
+          {mutationActivation.data?.activation && (
+            <span className="text-success-700">Akun anda berhasil diaktifkan, selamat berbelanja di Indoteknik.</span>
+          )}
+        </div>
+
+        {!mutationActivation.data?.activation && (
+          <div className="mt-4 text-center text-gray-700">
+            Kode verifikasi telah dikirimkan ke alamat email <span className="font-medium">{email}</span>. Silakan periksa kotak masuk atau folder spam.
+          </div>
+        )}
+
+        <div className="mt-4">
+          {!mutationActivation.data?.activation && (
+            <>
+              {count > 0 && timeFormat(count)}
+
+              {!mutationActivation.data?.activation && count == 0 && (
+                <button
+                  className="text-red-700 underline"
+                  type="button"
+                  onClick={() => mutationActivationReq.mutate({ email })}
+                  disabled={mutationActivationReq.isLoading}
+                >
+                  {mutationActivationReq.isLoading ? <Spinner size='sm' /> : 'Kirim Ulang'}
+                </button>
+              )}
+            </>
+          )}
+
+          {mutationActivation.data?.activation && (
+            <Link href='/' className="text-success-700 underline">Kembali ke halaman utama</Link>
+          )}
+
+
+        </div>
       </div>
     </Modal>
   )
 }
 
+const timeFormat = (time: number): string => {
+  const minute = Math.floor(time / 60);
+  const second = time % 60;
+
+  const minuteFormat = minute < 10 ? `0${minute}` : `${minute}`
+  const secondFormat = second < 10 ? `0${second}` : `${second}`
+
+  return `${minuteFormat}:${secondFormat}`
+}
+
 export default FormOTP
\ No newline at end of file
diff --git a/src-migrate/modules/account-activation/components/FormToken.tsx b/src-migrate/modules/account-activation/components/FormToken.tsx
index 041fbae8..6af24413 100644
--- a/src-migrate/modules/account-activation/components/FormToken.tsx
+++ b/src-migrate/modules/account-activation/components/FormToken.tsx
@@ -8,22 +8,12 @@ import Modal from "~/common/components/elements/Modal"
 import { ActivationTokenProps } from "~/common/types/auth"
 import { activationUserToken } from "~/services/auth"
 
-type StatusProps = "success" | "error" | "loading";
-
 const FormToken = () => {
   const { query } = useRouter()
-  const [status, setStatus] = useState<StatusProps>("loading")
   const [active, setActive] = useState<boolean>(false)
 
   const mutation = useMutation({
     mutationFn: (data: ActivationTokenProps) => activationUserToken(data),
-    onSuccess: (data) => {
-      if (data.activation === true) {
-        setStatus("success")
-      } else {
-        setStatus("error")
-      }
-    }
   })
 
   useEffect(() => {
@@ -34,19 +24,21 @@ const FormToken = () => {
     //eslint-disable-next-line
   }, [query.activation, query.token])
 
+  // TODO: Save user to local storage
+
   return (
     <Modal active={active} mode="desktop">
       <div className="pb-6 flex flex-col items-center gap-y-6">
-        {status === 'loading' && (
+        {mutation.isLoading && (
           <>
             <Spinner size='lg' borderWidth='3px' />
             <div className="text-h-sm">Mohon tunggu sedang memverifikasi akun</div>
           </>
         )}
 
-        {status !== 'loading' && (
+        {!mutation.isLoading && (
           <Alert
-            status={status}
+            status={mutation.data?.activation ? 'success' : 'error'}
             flexDirection="column"
             alignItems="center"
             justifyContent="center"
@@ -56,17 +48,17 @@ const FormToken = () => {
           >
             <AlertIcon boxSize="40px" mr={0} />
             <AlertTitle className="mt-4 mb-1 text-h-sm">
-              Aktivasi akun {status === 'success' ? 'berhasil' : 'gagal'}
+              Aktivasi akun {mutation.data?.activation ? 'berhasil' : 'gagal'}
             </AlertTitle>
             <AlertDescription maxWidth="sm">
-              {status === 'success' && (
+              {mutation.data?.activation && (
                 <>
                   Akun anda berhasil diaktifkan, selamat berbelanja di Indoteknik.
                   <Link href='/' className="block mt-8 text-success-700 underline">Kembali ke halaman utama</Link>
                 </>
               )}
 
-              {status === 'error' && mutation.data?.reason === 'INVALID_TOKEN' && (
+              {!mutation.data?.activation && mutation.data?.reason === 'INVALID_TOKEN' && (
                 <>
                   Token sudah kadaluwarsa, silahkan coba kembali.
                   <Link href='/register?activation=email' className="block mt-8 text-red-700 underline">Aktivasi Akun</Link>
diff --git a/src-migrate/modules/account-activation/index.tsx b/src-migrate/modules/account-activation/index.tsx
index edcc6652..97c96953 100644
--- a/src-migrate/modules/account-activation/index.tsx
+++ b/src-migrate/modules/account-activation/index.tsx
@@ -1,10 +1,14 @@
 import { useRouter } from "next/router"
 import FormToken from "./components/FormToken"
+import FormEmail from "./components/FormEmail"
+import FormOTP from "./components/FormOTP"
 
 const AccountActivation = () => {
   return (
     <>
+      <FormEmail />
       <FormToken />
+      <FormOTP />
     </>
   )
 }
diff --git a/src-migrate/modules/register/components/Form.tsx b/src-migrate/modules/register/components/Form.tsx
index fc1567ab..3227a549 100644
--- a/src-migrate/modules/register/components/Form.tsx
+++ b/src-migrate/modules/register/components/Form.tsx
@@ -1,10 +1,13 @@
-import { ChangeEvent } from "react";
+import { ChangeEvent, useEffect } 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 {
@@ -14,6 +17,8 @@ const Form = () => {
     isValidCaptcha,
     updateForm,
   } = useRegisterStore()
+  const router = useRouter()
+  const toast = useToast()
 
   const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = event.target;
@@ -30,7 +35,35 @@ const Form = () => {
     const response = await mutation.mutateAsync(form)
 
     if (response?.register === true) {
+      const urlParams = new URLSearchParams({
+        activation: 'otp',
+        email: form.email
+      })
+      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
     }
   }
 
diff --git a/src-migrate/modules/register/index.tsx b/src-migrate/modules/register/index.tsx
index 6325ee09..00931284 100644
--- a/src-migrate/modules/register/index.tsx
+++ b/src-migrate/modules/register/index.tsx
@@ -32,6 +32,13 @@ const Register = () => {
               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">
-- 
cgit v1.2.3