From b4c99310057c048d662d5537cb489e5f2985b7fc Mon Sep 17 00:00:00 2001
From: Shreerang Kale <shreerangkale@gmail.com>
Date: Thu, 8 Aug 2024 12:05:09 +0530
Subject: [PATCH] Add beehiiv widget for email verification

---
 src/App.tsx                      |  4 ++++
 src/constants.ts                 |  2 ++
 src/pages/RedirectEmail.tsx      | 31 +++++++++++++++++++++++++++++++
 src/pages/TermsAndConditions.tsx |  2 +-
 src/pages/VerifyEmail.tsx        | 24 ++++++++++++++++++++++++
 5 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/RedirectEmail.tsx
 create mode 100644 src/pages/VerifyEmail.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 596a474..128a1e8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,6 +11,8 @@ import UserVerification from "./pages/UserVerification";
 import TermsAndConditions from "./pages/TermsAndConditions";
 import Header from "./components/Header";
 import { WalletConnectProvider } from "./context/WalletConnectContext";
+import VerifyEmail from "./pages/VerifyEmail";
+import RedirectEmail from "./pages/RedirectEmail";
 
 function App() {
   return (
@@ -19,6 +21,8 @@ function App() {
       <WalletConnectProvider>
         <Routes>
           <Route path="/" element={<TermsAndConditions />} />
+          <Route path="/verify-email" element={<VerifyEmail />} />
+          <Route path="/email" element={<RedirectEmail/>} />
           <Route path="/connect-wallet" element={<ConnectWallet />} />
           <Route element={<SignPageLayout />}>
             <Route path="/sign-with-nitro-key" element={<SignWithNitroKey />} />
diff --git a/src/constants.ts b/src/constants.ts
index 9443af8..477dba9 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -30,4 +30,6 @@ export const TNC_PARTICIPANT_CONTENT = `Lorem ipsum dolor sit amet, consectetur
 
 export const WALLET_DISCLAIMER_MSG = 'You are connecting to an experimental wallet! It is not secure. Do not use it elsewhere and/or for managing real assets.'
 
+export const REDIRECT_EMAIL_MSG = 'Please check your inbox and click the link to verify your email address.'
+
 export const ENABLE_KYC = false;
diff --git a/src/pages/RedirectEmail.tsx b/src/pages/RedirectEmail.tsx
new file mode 100644
index 0000000..1e1ad01
--- /dev/null
+++ b/src/pages/RedirectEmail.tsx
@@ -0,0 +1,31 @@
+import { Box, Typography } from '@mui/material'
+import React from 'react'
+import { REDIRECT_EMAIL_MSG } from '../constants'
+
+const RedirectEmail = () => {
+  return (
+    <Box
+      display="flex"
+      flexDirection="column"
+      alignItems="center"
+      justifyContent="center"
+      marginY={20}
+      marginX={50}
+      sx={{
+        border: 1,
+        borderColor: 'grey.500',
+      }}
+      padding={5}
+
+    >
+      <Typography variant="h4" component="h1" gutterBottom>
+      Thank you for registering!
+      </Typography>
+      <Typography variant="body1">
+        {REDIRECT_EMAIL_MSG}
+      </Typography>
+    </Box>
+  )
+}
+
+export default RedirectEmail
diff --git a/src/pages/TermsAndConditions.tsx b/src/pages/TermsAndConditions.tsx
index 25a9879..a0f8112 100644
--- a/src/pages/TermsAndConditions.tsx
+++ b/src/pages/TermsAndConditions.tsx
@@ -9,7 +9,7 @@ const TermsAndConditions = () => {
   const navigate = useNavigate();
 
   const handleAccept = () => {
-    navigate('/connect-wallet');
+    navigate('/verify-email');
   };
 
   return (
diff --git a/src/pages/VerifyEmail.tsx b/src/pages/VerifyEmail.tsx
new file mode 100644
index 0000000..4c8f053
--- /dev/null
+++ b/src/pages/VerifyEmail.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+
+const VerifyEmail = () => {
+  return (
+    <div style={{ display: 'flex', justifyContent: 'center', margin: '20vh' }}>
+      <iframe
+        title="verify-email"
+        src="https://embeds.beehiiv.com/18aaa245-3652-4b0a-94a9-a87054df4914"
+        data-test-id="beehiiv-embed"
+        width="480"
+        height="320"
+        frameBorder="0"
+        scrolling="no"
+        style={{
+          borderRadius: '4px',
+          border: '2px solid #e5e7eb',
+          backgroundColor: 'transparent',
+        }}
+      ></iframe>
+    </div>
+  )
+}
+
+export default VerifyEmail