feat(unsubscribe-from-email): add unsubscribe from email component

packages/components-faraday/src/components/UserProfile/Unsubscribe.js

+import React from 'react'
+import { connect } from 'react-redux'
+import { Button } from '@pubsweet/ui'
+import styled from 'styled-components'
+import { th } from '@pubsweet/ui-toolkit'
+import { compose, lifecycle, withState } from 'recompose'
+
+import { parseSearchParams } from '../utils'
+import { changeEmailSubscription } from '../../redux/users'
+
+const Unsubscribe = ({ message, history }) => (
+  <Root>
+    <Title>{message}</Title>
+    <Button onClick={() => history.replace('/')} primary>
+      Go to Dashboard
+    </Button>
+  </Root>
+)
+
+const confirmMessage = `You have successfully unsubscribed from emails. To resubscribe go the your profile.`
+const errorMessage = `Something went wrong with your account confirmation. Please try again.`
+
+export default compose(
+  connect(null, { changeEmailSubscription }),
+  withState('message', 'setConfirmMessage', 'Loading...'),
+  lifecycle({
+    componentDidMount() {
+      const {
+        location,
+        setConfirmMessage,
+        changeEmailSubscription,
+      } = this.props
+      const { id } = parseSearchParams(location.search)
+      changeEmailSubscription(id, false)
+        .then(() => {
+          setConfirmMessage(confirmMessage)
+        })
+        .catch(() => {
+          setConfirmMessage(errorMessage)
+        })
+    },
+  }),
+)(Unsubscribe)
+
+// #region styled components
+const Root = styled.div`
+  color: ${th('colorText')};
+  margin: 0 auto;
+  text-align: center;
+  width: 70vw;
+
+  a {
+    color: ${th('colorText')};
+  }
+`
+
+const Title = styled.div`
+  color: ${th('colorPrimary')};
+  font-size: ${th('fontSizeHeading5')};
+  font-family: ${th('fontHeading')};
+  margin: 10px auto;
+`
+// #endregion

packages/components-faraday/src/components/UserProfile/index.js

+export { default as Unsubscribe } from './Unsubscribe'

packages/components-faraday/src/redux/users.js

@@ -22,9 +22,8 @@ export const confirmUser = (userId, confirmationToken) => dispatch =>
     return dispatch(loginSuccess(user))
   })
 
-export const changeEmailSubscription = (id, subscribe = true) => dispatch => {
+export const changeEmailSubscription = (id, subscribe = true) => dispatch =>
   update(`/users/subscribe`, {
     id,
     subscribe,
   }).then(() => dispatch(actions.getCurrentUser()))
-}

packages/xpub-faraday/app/routes.js

@@ -29,6 +29,8 @@ import {
   SignUpInvitationPage,
 } from 'pubsweet-components-faraday/src/components/SignUp'
 
+import { Unsubscribe } from 'pubsweet-components-faraday/src/components/UserProfile'
+
 import FaradayApp from './FaradayApp'
 
 const PrivateRoute = ({ component: Component, ...rest }) => (
@@ -84,6 +86,7 @@ const Routes = () => (
         path="/forgot-password"
       />
       <Route component={ConfirmAccount} exact path="/confirm-signup" />
+      <Route component={Unsubscribe} exact path="/unsubscribe" />
       <PrivateRoute component={DashboardPage} exact path="/" />
       <PrivateRoute component={UserProfilePage} exact path="/profile" />
       <PrivateRoute