🎨 styles: page verify customer

:%s
This commit is contained in:
lytrankieio123 2021-09-28 17:51:07 +07:00
parent cdad66b56b
commit 75bea33a0f
2 changed files with 66 additions and 0 deletions

View File

@ -0,0 +1,16 @@
@import "../../../../styles/utilities";
.verifyCustomerAccount {
@apply spacing-horizontal;
min-height: 25rem;
margin: 5rem auto 10rem;
display: flex;
justify-content: center;
.result {
@apply flex flex-col justify-center items-center;
.message {
margin-bottom: 1.6rem;
}
}
}

View File

@ -0,0 +1,50 @@
import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'
import { ButtonCommon } from 'src/components/common'
import LoadingCommon from 'src/components/common/LoadingCommon/LoadingCommon'
import { useVerifyCustomer } from 'src/components/hooks'
import { ROUTE } from 'src/utils/constanst.utils'
import s from './VerifyCustomerAccount.module.scss'
import Link from 'next/link'
export default function VerifyCustomerAccount() {
const router = useRouter()
const [isVerified, setIsVerified] = useState<boolean>(false)
const { error, loading, verify } = useVerifyCustomer()
useEffect(() => {
const token = router.query.token
if (token && !isVerified) {
setIsVerified(true)
verify({ token: token.toString() })
}
}, [router, verify, isVerified])
return (
<div className={s.verifyCustomerAccount}>
{loading || !isVerified ? (
<div>
<LoadingCommon description="Verifing your account ...." />
</div>
) : error ? (
<div className={s.result}>
<div className={s.message}>Error: {error?.message}</div>
<Link href={ROUTE.HOME}>
<a href="">
<ButtonCommon>Back to home</ButtonCommon>
</a>
</Link>
</div>
) : (
<div className={s.result}>
<div className={s.message}>Congratulation! Verified account successfully</div>
<Link href={ROUTE.HOME}>
<a href="">
<ButtonCommon>Back to home</ButtonCommon>
</a>
</Link>
</div>
)}
</div>
)
}