@spacemade/ui 0.0.1

package/src/pages/update/verify.tsx

@@ -0,0 +1,121 @@
+/* eslint-disable @next/next/no-img-element */
+import { useEffect } from 'react'
+import type { GetServerSideProps, NextPage } from 'next'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useGoogleReCaptcha } from 'react-google-recaptcha-v3'
+import { toast } from 'react-toastify'
+import {
+  useResendVerifyEmailMutation,
+  useSignUpSessionDataQuery,
+} from '@store/slice/api/authApiSlice'
+import Button from '@components/common/button/Button'
+import LoadingScreen from '@components/common/loading/LoadingScreen'
+import {
+  ReCaptchaActions,
+  WithReCaptcha,
+  isReCaptchaAvailable,
+} from '@components/hoc/WithReCaptcha'
+import { SiteLogoIcon } from '@helpers/images'
+import { PageProps } from '@helpers/types/page-props'
+
+const UpdateVerify: NextPage<PageProps> = WithReCaptcha(() => {
+  const { push: redirect } = useRouter()
+  const { data, isSuccess, isError } = useSignUpSessionDataQuery()
+  const [resendVerifyEmail, { isLoading }] = useResendVerifyEmailMutation()
+  const { executeRecaptcha } = useGoogleReCaptcha()
+
+  useEffect(() => {
+    if (isError) {
+      redirect('/login')
+    }
+  }, [isError, redirect])
+
+  const resendEmail = async () => {
+    if (!executeRecaptcha && isReCaptchaAvailable) {
+      toast.error('Execute recaptcha not yet available')
+      return
+    }
+
+    const captcha = executeRecaptcha
+      ? await executeRecaptcha(ReCaptchaActions.resend_verify_email)
+      : null
+
+    await resendVerifyEmail({ captcha }).unwrap()
+    toast.success('Email Sent!')
+  }
+
+  if (!isSuccess) {
+    return <LoadingScreen />
+  }
+
+  return (
+    <div className="card-flow-container mt-7">
+      <div className="w-100 mw-lg-600p mx-auto">
+        <div className="bg-white p-3 p-lg-5">
+          <div className="text-center">
+            <Link href="/" aria-label="Osirus AI home">
+              <span className="d-block p-2 bg-primary w-fit-content rounded-md mx-auto">
+                <img
+                  alt="Osirus Logo"
+                  src={SiteLogoIcon}
+                  className="img-fluid w-xs-80p invert-filter"
+                />
+              </span>
+            </Link>
+          </div>
+
+          <h1 className="pb-3 text-center mt-4 pt-2 display-6">
+            Verify your email
+          </h1>
+
+          <p>
+            We sent an email to{' '}
+            <span className="fw-bold">{data?.email}</span>.  
+            Please click the link in that email to activate your account.
+          </p>
+
+          <p>
+            If you don’t see it, check your spam folder or resend below.
+          </p>
+
+          <div className="d-flex justify-content-center flex-column align-items-center">
+            <Button
+              type="button"
+              className="text-white mw-md-180p w-100 rounded-xl fw-bold"
+              ariaLabel="Resend verification link"
+              color="primary"
+              isLoading={isLoading}
+              disabled={isLoading || data.canResendEmail === false}
+              onClick={resendEmail}
+            >
+              Resend Email
+            </Button>
+
+            {data.canResendEmail === false &&
+              data.canResendEmailAgainInMinutes && (
+                <span className="text-warning small d-block mt-2">
+                  You can request the email again in{' '}
+                  {data.canResendEmailAgainInMinutes} minutes
+                </span>
+              )}
+          </div>
+
+          <p className="mt-3 text-center">
+            Need help?{' '}
+            <Link href="/contact" className="text-primary">
+              Contact Us
+            </Link>
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+})
+export const getServerSideProps: GetServerSideProps = async () => ({
+  props: {
+    pageTitle: 'Verify Account',
+    excludeTopNav: true,
+  },
+})
+export default UpdateVerify