Update authentication feature

1 files changed, 108 insertions, 4 deletions

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