Notifications frontend

package.json

@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@aragon/templates-tokens": "^1.2.1",
-    "@aragon/ui": "1.0.0-alpha.6",
+    "@aragon/ui": "1.0.0-alpha.10",
     "@aragon/wrapper": "^5.0.0-rc.13",
     "@babel/polyfill": "^7.0.0",
     "@sentry/browser": "^5.5.0",

src/Wrapper.js

@@ -315,6 +315,7 @@ class Wrapper extends React.PureComponent {
         <GlobalPreferences
           locator={locator}
           wrapper={wrapper}
+          apps={apps}
           onClose={this.handleClosePreferences}
           onHelpScoutOptedOutChange={onHelpScoutOptedOutChange}
           helpScoutOptedOut={helpScoutOptedOut}

src/components/GlobalPreferences/GlobalPreferences.js

@@ -2,7 +2,6 @@ import React, { useState, useEffect, useCallback } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import {
-  Bar,
   ButtonIcon,
   GU,
   IconClose,
@@ -16,7 +15,7 @@ import {
   useViewport,
 } from '@aragon/ui'
 import { Transition, animated } from 'react-spring'
-import { AragonType } from '../../prop-types'
+import { AragonType, AppType } from '../../prop-types'
 import { useEsc } from '../../hooks'
 import Network from './Network/Network'
 import Notifications from './Notifications/Notifications'
@@ -37,13 +36,15 @@ const VALUES = Array.from(SECTIONS.values())
 const TIMEOUT_TOAST = 4000
 
 function GlobalPreferences({
+  apps,
   helpScoutOptedOut,
   onClose,
   onHelpScoutOptedOutChange,
   toast,
   wrapper,
   locator,
   sectionIndex,
+  subsection,
   onNavigation,
 }) {
   const { dao } = locator
@@ -96,7 +97,15 @@ function GlobalPreferences({
                 <CustomLabels dao={dao} wrapper={wrapper} locator={locator} />
               )}
               {sectionIndex === 1 && <Network wrapper={wrapper} />}
-              {sectionIndex === 2 && <Notifications />}
+              {sectionIndex === 2 && (
+                <Notifications
+                  apps={apps}
+                  dao={dao}
+                  subsection={subsection}
+                  handleNavigation={onNavigation}
+                  navigationIndex={2}
+                />
+              )}
               {sectionIndex === 3 && (
                 <HelpAndFeedback
                   optedOut={helpScoutOptedOut}
@@ -112,18 +121,21 @@ function GlobalPreferences({
 }
 
 GlobalPreferences.propTypes = {
+  apps: PropTypes.arrayOf(AppType).isRequired,
   helpScoutOptedOut: PropTypes.bool,
   onClose: PropTypes.func.isRequired,
   onHelpScoutOptedOutChange: PropTypes.func.isRequired,
   toast: PropTypes.func,
   wrapper: AragonType,
   locator: PropTypes.object,
   sectionIndex: PropTypes.number,
+  subsection: PropTypes.string,
   onNavigation: PropTypes.func.isRequired,
 }
 
 function useGlobalPreferences(locator = {}) {
   const [sectionIndex, setSectionIndex] = useState(null)
+  const [subsection, setSubsection] = useState(null)
   const handleNavigation = useCallback(
     index => {
       window.location.hash = `${getAppPath(
@@ -139,14 +151,18 @@ function useGlobalPreferences(locator = {}) {
       setSectionIndex(null)
       return
     }
-    if (!SECTIONS.has(path)) {
-      setSectionIndex(null)
-      return
-    }
-    setSectionIndex(PATHS.findIndex(item => item === path))
-  }, [locator])
+    const index = PATHS.findIndex(item => path.startsWith(item))
+    setSectionIndex(index === -1 ? null : index)
+
+    // subsection is the part after the PATH, e.g. for `?p=/notifications/verify` - `/verify`
+    const subsection =
+      sectionIndex !== null ? path.substring(PATHS[sectionIndex].length) : null
 
-  return { sectionIndex, handleNavigation }
+    setSubsection(subsection)
+    // Does the current path start with any of the declared route paths
+  }, [locator, sectionIndex])
+
+  return { sectionIndex, subsection, handleNavigation }
 }
 
 function Close({ onClick }) {
@@ -196,7 +212,9 @@ Close.propTypes = {
 }
 
 function AnimatedGlobalPreferences(props) {
-  const { sectionIndex, handleNavigation } = useGlobalPreferences(props.locator)
+  const { sectionIndex, subsection, handleNavigation } = useGlobalPreferences(
+    props.locator
+  )
   const { below } = useViewport()
   const smallView = below('medium')
   const theme = useTheme()
@@ -233,6 +251,7 @@ function AnimatedGlobalPreferences(props) {
             <GlobalPreferences
               {...props}
               sectionIndex={sectionIndex}
+              subsection={subsection}
               onNavigation={handleNavigation}
             />
           </AnimatedWrap>

src/components/GlobalPreferences/Notifications/Notifications.js

@@ -1,24 +1,115 @@
-import React from 'react'
-import { Box } from '@aragon/ui'
+import React, { useState, useEffect, useCallback } from 'react'
+import PropTypes from 'prop-types'
+import { AppType } from '../../../prop-types'
+// import { Box } from '@aragon/ui'
+import Subscriptions from './Subscriptions'
+import NotificationsLogin from './NotificationsLogin'
+import NotificationsVerify from './NotificationsVerify'
+
+import {
+  AUTH_UNAUTHENTICATED,
+  AUTH_PREVERIFY,
+  AUTH_AUTHENTICATED,
+  NOTIFICATION_SERVICE_EMAIL_KEY,
+  NOTIFICATION_SERVICE_TOKEN_KEY,
+  VERIFY_SUBSECTION,
+} from './constants'
+
+// Hook responsible for deriving the authState from localStorage values and
+// provide setters which update the localStorage
+function useAuthState() {
+  const [authState, setAuthState] = useState(AUTH_UNAUTHENTICATED)
+  const [email, setEmail] = useState(
+    localStorage.getItem(NOTIFICATION_SERVICE_EMAIL_KEY)
+  )
+  const [token, setToken] = useState(
+    localStorage.getItem(NOTIFICATION_SERVICE_TOKEN_KEY)
+  )
+
+  useEffect(() => {
+    if (!email && !token) {
+      setAuthState(AUTH_UNAUTHENTICATED)
+      return
+    }
+
+    if (email && !token) {
+      setAuthState(AUTH_PREVERIFY)
+      return
+    }
+
+    if (email && token) {
+      setAuthState(AUTH_AUTHENTICATED)
+    }
+  }, [email, token])
+
+  useEffect(() => {
+    token && localStorage.setItem(NOTIFICATION_SERVICE_TOKEN_KEY, token)
+  }, [token])
+
+  useEffect(() => {
+    email && localStorage.setItem(NOTIFICATION_SERVICE_EMAIL_KEY, email)
+  }, [email])
+
+  return {
+    authState,
+    email,
+    token,
+    handleTokenChange: setToken,
+    handleEmailChange: setEmail,
+  }
+}
+
+function Notifications({
+  apps,
+  subsection,
+  dao,
+  handleNavigation,
+  navigationIndex,
+}) {
+  const navigateToNotifications = useCallback(
+    () => handleNavigation(navigationIndex),
+    [handleNavigation, navigationIndex]
+  )
+  const {
+    authState,
+    email,
+    token,
+    handleTokenChange,
+    handleEmailChange,
+  } = useAuthState()
+
+  if (subsection && subsection.startsWith(VERIFY_SUBSECTION)) {
+    return (
+      <NotificationsVerify
+        subsection={subsection}
+        onTokenChange={handleTokenChange}
+        onEmailChange={handleEmailChange}
+        navigateToNotifications={navigateToNotifications}
+      />
+    )
+  }
+
+  if (authState === AUTH_AUTHENTICATED) {
+    // TODO: make sure token is valid
+    return <Subscriptions apps={apps} email={email} token={token} />
+  }
 
-function Notifications() {
   return (
-    <Box heading="Email notifications">
-      <label>
-        App notifications and reminders (upcoming votes, created incoming or
-        outgoing transactions, added or removed tokens, etc.).{' '}
-        <input type="checkbox" />
-      </label>
-      <label>
-        New releases and features announcements. <input type="checkbox" />
-      </label>
-      <label>
-        Calendar reminders of selected events or tasks.{' '}
-        <input type="checkbox" />
-      </label>
-      <button>Manage triggers</button>
-    </Box>
+    <NotificationsLogin
+      dao={dao}
+      email={email}
+      authState={authState}
+      onEmailChange={handleEmailChange}
+    />
   )
 }
 
+Notifications.propTypes = {
+  apps: PropTypes.arrayOf(AppType).isRequired,
+  subsection: PropTypes.string,
+  dao: PropTypes.string,
+  handleNavigation: PropTypes.func,
+  navigationIndex: PropTypes.number,
+}
+
 export default Notifications

src/components/GlobalPreferences/Notifications/NotificationsLogin.js

@@ -0,0 +1,116 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import PropTypes from 'prop-types'
+import { Box, Button, GU, TextInput, Text, Info, IconMail } from '@aragon/ui'
+import { login } from './notification-service-api'
+import { AUTH_PREVERIFY } from './constants'
+import { getEthNetworkType } from '../../../local-settings'
+import notificationSvg from './notifications.svg'
+import checkmarkSvg from './check-mark.svg'
+
+export default function NotificationsLogin({
+  dao,
+  authState,
+  email,
+  onEmailChange,
+}) {
+  const [inputEmail, setInputEmail] = useState('')
+  const [apiError, setApiError] = useState(null)
+  const network = getEthNetworkType()
+
+  const handleEmailChange = e => {
+    setInputEmail(e.target.value)
+  }
+
+  const handleLogin = async e => {
+    try {
+      await login({ email: inputEmail, dao, network })
+      onEmailChange(inputEmail)
+    } catch (e) {
+      setApiError(e.message)
+      console.error('Failed to login', e)
+    }
+  }
+
+  if (authState === AUTH_PREVERIFY) {
+    return (
+      <Box heading="Email notifications">
+        <NotificationImage />
+        <div>
+          <Checkmark />
+          <Text>Awaiting verification. Please check your email!</Text>
+          <br />
+          <Text size="xsmall">
+            We’ve sent an email to {email}. Verify your email address so you can
+            manage your notifications subscriptions.
+          </Text>
+        </div>
+      </Box>
+    )
+  }
+  return (
+    <Box heading="Email notifications">
+      <NotificationImage />
+      {apiError && <Info mode="error">Error logging in:{apiError}</Info>}
+      <Label>Email address</Label>
+      <TextInput
+        css={`
+          width: 80%;
+          margin-right: 9px;
+          margin-bottom: 10px;
+        `}
+        type="email"
+        placeholder="[email protected]"
+        wide
+        value={inputEmail}
+        onChange={handleEmailChange}
+      />
+      <Button onClick={handleLogin}>
+        <IconMail /> Sign in
+      </Button>
+      <Info>
+        Receive email notifications for the new app events. For example,
+        whenever a new vote is created or when tokens added, you’ll get an email
+        informing you of the latest activity in your organization. How does it
+        work? You will be asked to enter with your email address whenever using
+        a different browser session or device to access your subsciptions. This
+        process doens’t require a password, just for you to confirm your email
+        address.
+      </Info>
+    </Box>
+  )
+}
+
+const NotificationImage = () => (
+  <img
+    src={notificationSvg}
+    alt="Notifications"
+    css={`
+      display: block;
+      margin: ${4 * GU}px auto;
+      height: 193px;
+    `}
+  />
+)
+
+const Checkmark = () => (
+  <img
+    src={checkmarkSvg}
+    alt="check mark"
+    css={`
+      display: inline block;
+      margin: ${1 * GU}px auto;
+    `}
+  />
+)
+
+const Label = styled.label`
+  display: block;
+`
+
+NotificationsLogin.propTypes = {
+  dao: PropTypes.string,
+  authState: PropTypes.string,
+  email: PropTypes.string,
+  onEmailChange: PropTypes.func,
+}