From 02d1dd70f77a36a1d00e2d2801c2af800b0db90e Mon Sep 17 00:00:00 2001
From: iamacook <aaron@safe.global>
Date: Wed, 22 Nov 2023 23:44:02 +0100
Subject: [PATCH] feat: recovery email settings structure

---
 .../settings/RecoveryEmail/AddEmailDialog.tsx | 48 ++++++++++
 .../settings/RecoveryEmail/index.tsx          | 89 +++++++++++++++++++
 .../settings/RecoveryEmail/styles.module.css  | 72 +++++++++++++++
 src/pages/settings/notifications.tsx          |  8 +-
 4 files changed, 215 insertions(+), 2 deletions(-)
 create mode 100644 src/components/settings/RecoveryEmail/AddEmailDialog.tsx
 create mode 100644 src/components/settings/RecoveryEmail/index.tsx
 create mode 100644 src/components/settings/RecoveryEmail/styles.module.css

diff --git a/src/components/settings/RecoveryEmail/AddEmailDialog.tsx b/src/components/settings/RecoveryEmail/AddEmailDialog.tsx
new file mode 100644
index 0000000000..ca3e0879dd
--- /dev/null
+++ b/src/components/settings/RecoveryEmail/AddEmailDialog.tsx
@@ -0,0 +1,48 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  IconButton,
+  TextField,
+} from '@mui/material'
+import type { ReactElement } from 'react'
+
+import CloseIcon from '@/public/images/common/close.svg'
+
+import css from './styles.module.css'
+
+export default function AddEmailDialog({ open, onClose }: { open: boolean; onClose: () => void }): ReactElement {
+  const onConfirm = () => {
+    // TODO: Implement
+    onClose()
+  }
+
+  return (
+    <Dialog open={open} onClose={onClose} className={css.dialog}>
+      <DialogTitle className={css.title}>
+        Add email address
+        <IconButton onClick={onClose} className={css.close}>
+          <CloseIcon />
+        </IconButton>
+      </DialogTitle>
+
+      <DialogContent dividers className={css.content}>
+        <DialogContentText color="text.primary" mb={3}>
+          You will need to sign a message to verify that you are the owner of this Safe Account.
+        </DialogContentText>
+
+        <TextField type="email" label="Email address" variant="outlined" fullWidth InputLabelProps={{ shrink: true }} />
+      </DialogContent>
+
+      <DialogActions className={css.actions}>
+        <Button onClick={onClose}>Cancel</Button>
+        <Button variant="contained" onClick={onConfirm}>
+          Continue
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
diff --git a/src/components/settings/RecoveryEmail/index.tsx b/src/components/settings/RecoveryEmail/index.tsx
new file mode 100644
index 0000000000..f174aeaf34
--- /dev/null
+++ b/src/components/settings/RecoveryEmail/index.tsx
@@ -0,0 +1,89 @@
+import { Button, Grid, Paper, SvgIcon, Typography } from '@mui/material'
+import { VisibilityOutlined } from '@mui/icons-material'
+import { useState } from 'react'
+import type { ReactElement } from 'react'
+
+import ExternalLink from '@/components/common/ExternalLink'
+import AddEmailDialog from './AddEmailDialog'
+import EditIcon from '@/public/images/common/edit.svg'
+
+import css from './styles.module.css'
+
+export function RecoveryEmail(): ReactElement {
+  const [addEmail, setAddEmail] = useState(false)
+
+  const onAdd = () => {
+    setAddEmail(true)
+  }
+
+  const onReveal = () => {
+    // TODO: Implement
+  }
+
+  const onChange = () => {}
+
+  const onClose = () => {}
+
+  const randomString = Math.random().toString(36)
+
+  return (
+    <>
+      <Paper sx={{ p: 4, mb: 2 }}>
+        <Grid container spacing={3}>
+          <Grid item sm={4} xs={12}>
+            <Typography variant="h4" fontWeight={700}>
+              Recovery email
+            </Typography>
+          </Grid>
+
+          <Grid item xs>
+            <Typography mb={2}>
+              Receive important notifications about recovery attempts and their status. No spam. We promise!{' '}
+              {/* TODO: Add link */}
+              <ExternalLink href="#">Learn more</ExternalLink>
+            </Typography>
+
+            <div className={css.display}>
+              <div className={css.email}>
+                <VisibilityOutlined fontSize="small" />
+                <Typography variant="body2" fontWeight={700}>
+                  {randomString + randomString}
+                </Typography>
+                <div className={css.blur} />
+              </div>
+
+              <div className={css.buttons}>
+                <Button
+                  onClick={onReveal}
+                  variant="contained"
+                  size="small"
+                  startIcon={<VisibilityOutlined />}
+                  className={css.button}
+                  disableElevation
+                >
+                  Reveal
+                </Button>
+                <Button
+                  onClick={onChange}
+                  variant="contained"
+                  size="small"
+                  startIcon={<SvgIcon component={EditIcon} inheritViewBox />}
+                  className={css.button}
+                  disableElevation
+                >
+                  Change
+                </Button>
+              </div>
+            </div>
+
+            <Button variant="contained" onClick={onAdd}>
+              Add email address
+            </Button>
+          </Grid>
+        </Grid>
+      </Paper>
+
+      <AddEmailDialog open={addEmail} onClose={onClose} />
+    </>
+  )
+}
diff --git a/src/components/settings/RecoveryEmail/styles.module.css b/src/components/settings/RecoveryEmail/styles.module.css
new file mode 100644
index 0000000000..5c6208787a
--- /dev/null
+++ b/src/components/settings/RecoveryEmail/styles.module.css
@@ -0,0 +1,72 @@
+/* Settings */
+
+.display {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--color-background-main);
+  border: 1px solid var(--color-border-light);
+  border-radius: 6px;
+  padding: var(--space-1);
+  padding-left: var(--space-2);
+  margin-bottom: var(--space-2);
+}
+
+.email {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  position: relative;
+}
+
+.blur {
+  backdrop-filter: blur(6px);
+  border-radius: 6px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: calc(100% + var(--space-3));
+  width: calc(100% + var(--space-6));
+  transform: translate(calc(var(--space-2) * -1), calc(calc(var(--space-1) * 1.5) * -1));
+}
+
+.buttons {
+  display: flex;
+  gap: var(--space-1);
+}
+
+.button {
+  color: var(--color-text-main);
+  border: 1px solid var(--color-border-light);
+  background-color: var(--color-background-paper);
+  padding-left: var(--space-2);
+  padding-right: var(--space-2);
+}
+
+/* Dialog */
+
+.dialog :global(.MuiDialog-paper) {
+  max-width: 500px;
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  font-weight: 700;
+  padding-top: var(--space-3);
+}
+
+.close {
+  color: var(--color-text-secondary);
+  margin-left: auto;
+}
+
+.content {
+  padding: var(--space-2) var(--space-3) var(--space-4);
+}
+
+.actions {
+  display: flex;
+  justify-content: space-between;
+  padding: var(--space-3);
+}
diff --git a/src/pages/settings/notifications.tsx b/src/pages/settings/notifications.tsx
index 66dc3cda37..b3b52cc7d8 100644
--- a/src/pages/settings/notifications.tsx
+++ b/src/pages/settings/notifications.tsx
@@ -5,11 +5,13 @@ import SettingsHeader from '@/components/settings/SettingsHeader'
 import { PushNotifications } from '@/components/settings/PushNotifications'
 import { useHasFeature } from '@/hooks/useChains'
 import { FEATURES } from '@/utils/chains'
+import { RecoveryEmail } from '@/components/settings/RecoveryEmail'
 
 const NotificationsPage: NextPage = () => {
   const isNotificationFeatureEnabled = useHasFeature(FEATURES.PUSH_NOTIFICATIONS)
+  const isRecoveryEnabled = useHasFeature(FEATURES.RECOVERY)
 
-  if (!isNotificationFeatureEnabled) {
+  if (!isNotificationFeatureEnabled || !isRecoveryEnabled) {
     return null
   }
 
@@ -22,7 +24,9 @@ const NotificationsPage: NextPage = () => {
       <SettingsHeader />
 
       <main>
-        <PushNotifications />
+        {isRecoveryEnabled && <RecoveryEmail />}
+
+        {isNotificationFeatureEnabled && <PushNotifications />}
       </main>
     </>
   )