Refactor and migrate register page

12 files changed, 348 insertions, 0 deletions

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