blob: 041fbae84bf65116d543bc168d78032a0ae3c15c (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
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
|
