From c82b71085443d53a31eb0dfe9285bd57619d332c Mon Sep 17 00:00:00 2001
From: SKairinos <stefan.kairinos@ocado.com>
Date: Tue, 16 Jul 2024 13:17:12 +0000
Subject: [PATCH] feedback

---
 .env                                          |  8 +++--
 src/components/OpenInEmailButtons.tsx         | 32 +++++++++++++++++++
 src/components/index.tsx                      | 10 +++++-
 .../emailVerification/EmailVerification.tsx   | 19 +++--------
 src/pages/emailVerification/Status.tsx        | 22 ++++++-------
 src/pages/resetPassword/EmailForm.tsx         | 16 +++++++---
 6 files changed, 70 insertions(+), 37 deletions(-)
 create mode 100644 src/components/OpenInEmailButtons.tsx

diff --git a/.env b/.env
index dfeba9c..adb5a8f 100644
--- a/.env
+++ b/.env
@@ -1,9 +1,11 @@
 VITE_API_BASE_URL=http://localhost:8000/api/
 VITE_SERVICE_NAME=portal
 
-# Links external sites.
-VITE_LINK_OPEN_VERIFY_EMAIL_IN_GMAIL="https://mail.google.com/mail/#search/from%3Ano-reply%40info.codeforlife.education+subject%3AEmail+Verification"
-VITE_LINK_OPEN_VERIFY_EMAIL_IN_OUTLOOK=https://outlook.live.com/mail/
+# Gmail.
+VITE_GMAIL_FILTERS_PASSWORD_RESET_REQUEST="from:no-reply@info.codeforlife.education subject:Password reset request"
+VITE_GMAIL_FILTERS_EMAIL_VERIFICATION="from:no-reply@info.codeforlife.education subject:Email verification"
+
+# Links to external sites.
 VITE_LINK_FEMALE_GRADUATES_IN_CS=https://www.wisecampaign.org.uk/core-stem-graduates-2019/
 
 # TODO: determine which of these we need.
diff --git a/src/components/OpenInEmailButtons.tsx b/src/components/OpenInEmailButtons.tsx
new file mode 100644
index 0000000..2480862
--- /dev/null
+++ b/src/components/OpenInEmailButtons.tsx
@@ -0,0 +1,32 @@
+import { MailOutline as MailOutlineIcon } from "@mui/icons-material"
+import { Stack } from "@mui/material"
+import { type FC } from "react"
+
+import { LinkButton } from "codeforlife/components/router"
+
+export interface OpenInEmailButtonsProps {
+  gmailFilters: string
+}
+
+const OpenInEmailButtons: FC<OpenInEmailButtonsProps> = ({ gmailFilters }) => {
+  return (
+    <Stack direction="row" spacing={5}>
+      <LinkButton
+        to={`https://mail.google.com/mail/#search/${encodeURIComponent(gmailFilters)}`}
+        target="_blank"
+        endIcon={<MailOutlineIcon />}
+      >
+        Open in Gmail
+      </LinkButton>
+      <LinkButton
+        to="https://outlook.live.com/mail/"
+        target="_blank"
+        endIcon={<MailOutlineIcon />}
+      >
+        Open in Outlook
+      </LinkButton>
+    </Stack>
+  )
+}
+
+export default OpenInEmailButtons
diff --git a/src/components/index.tsx b/src/components/index.tsx
index 1b05841..ca19af8 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -1,5 +1,13 @@
 import NewPasswordField, {
   type NewPasswordFieldProps,
 } from "./NewPasswordField"
+import OpenInEmailButtons, {
+  type OpenInEmailButtonsProps,
+} from "./OpenInEmailButtons"
 
-export { NewPasswordField, type NewPasswordFieldProps }
+export {
+  NewPasswordField,
+  OpenInEmailButtons,
+  type NewPasswordFieldProps,
+  type OpenInEmailButtonsProps,
+}
diff --git a/src/pages/emailVerification/EmailVerification.tsx b/src/pages/emailVerification/EmailVerification.tsx
index ce9153b..3506c74 100644
--- a/src/pages/emailVerification/EmailVerification.tsx
+++ b/src/pages/emailVerification/EmailVerification.tsx
@@ -1,5 +1,4 @@
 import {
-  MailOutline as MailOutlineIcon,
   Send as SendIcon,
   SentimentVeryDissatisfied as SentimentVeryDissatisfiedIcon,
 } from "@mui/icons-material"
@@ -50,20 +49,10 @@ const EmailVerification: FC<EmailVerificationProps> = () => {
               "Please follow the link within the email to verify your details. This will expire in 1 hour.",
             ]}
             icon={<SendIcon {...svgIconProps} />}
-            buttonProps={[
-              {
-                to: import.meta.env.VITE_LINK_OPEN_VERIFY_EMAIL_IN_GMAIL,
-                target: "_blank",
-                children: "Open in Gmail",
-                endIcon: <MailOutlineIcon />,
-              },
-              {
-                to: import.meta.env.VITE_LINK_OPEN_VERIFY_EMAIL_IN_OUTLOOK,
-                target: "_blank",
-                children: "Open in Outlook",
-                endIcon: <MailOutlineIcon />,
-              },
-            ]}
+            openInEmailButtonsProps={{
+              gmailFilters: import.meta.env
+                .VITE_GMAIL_FILTERS_EMAIL_VERIFICATION,
+            }}
           />
         ) : (
           <Status
diff --git a/src/pages/emailVerification/Status.tsx b/src/pages/emailVerification/Status.tsx
index a04b8ed..c795f69 100644
--- a/src/pages/emailVerification/Status.tsx
+++ b/src/pages/emailVerification/Status.tsx
@@ -1,14 +1,14 @@
 import { Stack, Typography } from "@mui/material"
 import { type FC, type ReactElement } from "react"
 
-import {
-  Link,
-  LinkButton,
-  type LinkButtonProps,
-} from "codeforlife/components/router"
+import { Link } from "codeforlife/components/router"
 import { ThemedBox, type ThemedBoxProps } from "codeforlife/theme"
 
 import { themeOptions } from "../../app/theme"
+import {
+  OpenInEmailButtons,
+  type OpenInEmailButtonsProps,
+} from "../../components"
 import { paths } from "../../router"
 
 export interface StatusProps {
@@ -16,7 +16,7 @@ export interface StatusProps {
   header: string
   body: string[]
   icon: ReactElement
-  buttonProps?: LinkButtonProps[]
+  openInEmailButtonsProps?: OpenInEmailButtonsProps
 }
 
 const Status: FC<StatusProps> = ({
@@ -24,7 +24,7 @@ const Status: FC<StatusProps> = ({
   header,
   body,
   icon,
-  buttonProps,
+  openInEmailButtonsProps,
 }) => (
   <ThemedBox withShapes options={themeOptions} userType={userType}>
     <Stack alignItems="center" marginBottom={2.5}>
@@ -37,12 +37,8 @@ const Status: FC<StatusProps> = ({
           <Typography key={index}>{text}</Typography>
         ))}
       </Stack>
-      {buttonProps && (
-        <Stack direction="row" spacing={5}>
-          {buttonProps.map((props, index) => (
-            <LinkButton key={index} {...props} />
-          ))}
-        </Stack>
+      {openInEmailButtonsProps && (
+        <OpenInEmailButtons {...openInEmailButtonsProps} />
       )}
     </Stack>
     <Link to={paths._} className="back-to">
diff --git a/src/pages/resetPassword/EmailForm.tsx b/src/pages/resetPassword/EmailForm.tsx
index de8e833..e1f3b68 100644
--- a/src/pages/resetPassword/EmailForm.tsx
+++ b/src/pages/resetPassword/EmailForm.tsx
@@ -3,9 +3,10 @@ import { Stack, Typography } from "@mui/material"
 import { type FC } from "react"
 
 import * as form from "codeforlife/components/form"
-import { LinkButton } from "codeforlife/components/router"
+import { Link, LinkButton } from "codeforlife/components/router"
 
 import { useLazyRequestPasswordResetQuery } from "../../api/user"
+import { OpenInEmailButtons } from "../../components"
 import { paths } from "../../router"
 
 export interface EmailFormProps {}
@@ -18,12 +19,17 @@ const EmailForm: FC<EmailFormProps> = () => {
       <Typography textAlign="center" variant="h4">
         Thank you
       </Typography>
-      <SendIcon color="white" sx={{ fontSize: "100px", marginY: 5 }} />
       <Typography>
-        If you have entered a valid email address, you will receive a link
-        enabling you to reset your password.
+        If you have entered a valid email address, you will receive a link to
+        reset your password. Make sure to check your <strong>spam</strong>.
       </Typography>
-      <LinkButton to={paths._}>Back to homepage</LinkButton>
+      <SendIcon color="white" sx={{ fontSize: "100px", marginY: 5 }} />
+      <OpenInEmailButtons
+        gmailFilters={import.meta.env.VITE_GMAIL_FILTERS_PASSWORD_RESET_REQUEST}
+      />
+      <Link to={paths._} className="back-to">
+        homepage
+      </Link>
     </Stack>
   ) : (
     <Stack gap={1}>