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 ++++
 4 files changed, 125 insertions(+)
 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

(limited to 'src-migrate/modules/account-activation')

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