Notifications: wiring and integration with API

src/App.js

@@ -6,6 +6,7 @@ import AppLoader from './components/AppLoader'
 import GlobalErrorHandler from './GlobalErrorHandler'
 import MainView from './components/MainView'
 import OnboardingLoader from './components/OnboardingLoader'
+import EmailNotificationsLoader from './components/EmailNotificationsLoader'
 import RequestPanel from './components/RequestPanel/RequestPanel'
 import Routes from './Routes'
 import { ActivityProvider } from './components/Activity/ActivityProvider'
@@ -32,6 +33,7 @@ function App() {
                     <RequestQueueProvider>
                       <MainView>
                         <OnboardingLoader>
+                          <EmailNotificationsLoader />
                           <AppLoader>
                             <Routes />
                           </AppLoader>

src/Routes.js

@@ -6,6 +6,9 @@ import Tasks from './components/Tasks/Tasks'
 import Disputes from './components/Disputes/Disputes'
 import DisputeDetail from './components/Disputes/DisputeDetail'
 
+// Preferences
+const GLOBAL_PREFERENCES_QUERY_PARAM = '?preferences=/'
+
 export default function Routes() {
   return (
     <Switch>
@@ -18,3 +21,7 @@ export default function Routes() {
     </Switch>
   )
 }
+
+export function getPreferencesSearch(screen) {
+  return `${GLOBAL_PREFERENCES_QUERY_PARAM}${screen}`
+}

src/components/EmailNotifications/DeleteEmail.js

@@ -1,25 +1,25 @@
 import React from 'react'
-import { Button, GU, textStyle, useTheme } from '@aragon/ui'
+import { Button, GU, textStyle, useInside, useTheme } from '@aragon/ui'
 
 import emailNotifcationIllustration from '../../assets/emailNotifications.svg'
 
 const DeleteEmail = React.memo(function DeleteEmail({
-  isModal,
   email,
   onDelete,
   onCancel,
 }) {
   const theme = useTheme()
+  const [insideModal] = useInside('NotificationsModal')
 
   return (
     <div
       css={`
         display: flex;
-        padding-top: ${isModal ? 3 : 0 * GU}px;
+        padding-top: ${insideModal ? 3 : 0 * GU}px;
         flex-direction: column;
       `}
     >
-      {!isModal && (
+      {!insideModal && (
         <div
           css={`
             text-align: center;
@@ -37,8 +37,8 @@ const DeleteEmail = React.memo(function DeleteEmail({
         css={`
           display: flex;
           flex-direction: column;
-          text-align: ${isModal ? 'left' : 'center'};
-          margin-top: ${isModal ? 0 : 5 * GU}px;
+          text-align: ${insideModal ? 'left' : 'center'};
+          margin-top: ${insideModal ? 0 : 5 * GU}px;
         `}
       >
         <span
@@ -63,7 +63,7 @@ const DeleteEmail = React.memo(function DeleteEmail({
           css={`
             margin-top: ${4 * GU}px;
             display: flex;
-            justify-content: ${isModal ? 'flex-end' : 'center'};
+            justify-content: ${insideModal ? 'flex-end' : 'center'};
           `}
         >
           <Button
@@ -72,15 +72,15 @@ const DeleteEmail = React.memo(function DeleteEmail({
             `}
             onClick={onCancel}
             size="medium"
-            wide={!isModal}
+            wide={!insideModal}
           >
             Cancel
           </Button>
           <Button
             mode="negative"
             onClick={onDelete}
             size="medium"
-            wide={!isModal}
+            wide={!insideModal}
           >
             Delete email
           </Button>

src/components/EmailNotifications/EmailInput.js

@@ -0,0 +1,107 @@
+import React, { useEffect, useState } from 'react'
+import {
+  Field,
+  GU,
+  IconCheck,
+  IconCross,
+  TextInput,
+  textStyle,
+  useInside,
+  useTheme,
+} from '@aragon/ui'
+
+const EmailInput = React.memo(function EmailInput({
+  existingEmail,
+  status,
+  ...inputProps
+}) {
+  const theme = useTheme()
+  const [error, setError] = useState('')
+  const [insideModal] = useInside('NotificationsModal')
+
+  useEffect(() => {
+    if (status === 'invalid') {
+      return setError('Please enter a valid email address.')
+    }
+    return setError('')
+  }, [status])
+
+  const adornment = (() => {
+    if (status === 'invalid')
+      return (
+        <IconCross
+          css={`
+            color: ${theme.negative};
+          `}
+        />
+      )
+
+    if (status === 'empty')
+      return (
+        <IconCheck
+          css={`
+            opacity: 0;
+            color: ${theme.positive};
+          `}
+        />
+      )
+
+    return (
+      <IconCheck
+        css={`
+          opacity: 1;
+          color: ${theme.positive};
+        `}
+      />
+    ) // status === 'valid'
+  })()
+  return (
+    <div
+      css={`
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+      `}
+    >
+      <Field
+        label={
+          existingEmail
+            ? insideModal
+              ? 'Update email address'
+              : 'Enter new email address'
+            : 'Enter email address'
+        }
+        css={`
+          width: 100%;
+          margin-bottom: 0;
+        `}
+      >
+        <TextInput
+          adornment={adornment}
+          adornmentPosition="end"
+          type="email"
+          wide
+          placeholder="you@example.org"
+          {...inputProps}
+        />
+      </Field>
+      {error && (
+        <div>
+          <p
+            css={`
+              color: ${theme.negative};
+              ${textStyle('body4')};
+              text-align: left;
+              height: 0;
+              margin-top: ${0.5 * GU}px;
+            `}
+          >
+            {error}
+          </p>
+        </div>
+      )}
+    </div>
+  )
+})
+
+export default EmailInput

src/components/EmailNotifications/EmailNotificationError.js

@@ -0,0 +1,51 @@
+import React from 'react'
+import { GU, textStyle, useTheme } from '@aragon/ui'
+
+import emailIllustration from '../../assets/emailIllustration.svg'
+
+const VerifyEmailAddress = React.memo(function VerifyEmailAddress({ email }) {
+  const theme = useTheme()
+
+  return (
+    <div
+      css={`
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: ${5 * GU}px;
+      `}
+    >
+      <div
+        css={`
+          display: flex;
+          flex-direction: column;
+          text-align: center;
+        `}
+      >
+        <img src={emailIllustration} />
+        <span
+          css={`
+            ${textStyle('title2')};
+            margin-top: ${4 * GU}px;
+          `}
+        >
+          Cannot connect to Notifications server
+        </span>
+
+        <span
+          css={`
+            ${textStyle('body2')};
+            color: ${theme.surfaceContentSecondary};
+            margin-top: ${1.5 * GU}px;
+          `}
+        >
+          There was a problem when trying to connect to the Email Notifications
+          server. Make sure your Internet connection is working and please try
+          again.
+        </span>
+      </div>
+    </div>
+  )
+})
+
+export default VerifyEmailAddress