🎨 styles: page verify customer

:%s

src/components/modules/verify-customer/VerifyCustomerAccount/VerifyCustomerAccount.module.scss

@@ -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;
+        }
+    }
+}

src/components/modules/verify-customer/VerifyCustomerAccount/VerifyCustomerAccount.tsx

@@ -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>
+  )
+}