diff --git a/packages/components-faraday/src/components/UserProfile/Unsubscribe.js b/packages/components-faraday/src/components/UserProfile/Unsubscribe.js new file mode 100644 index 0000000000000000000000000000000000000000..9e1232cdb0ecab224cfd4965a3c4a7718bb7c17c --- /dev/null +++ b/packages/components-faraday/src/components/UserProfile/Unsubscribe.js @@ -0,0 +1,63 @@ +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 diff --git a/packages/components-faraday/src/components/UserProfile/index.js b/packages/components-faraday/src/components/UserProfile/index.js new file mode 100644 index 0000000000000000000000000000000000000000..9d8f501405da336f0374b73693d3183c961399c0 --- /dev/null +++ b/packages/components-faraday/src/components/UserProfile/index.js @@ -0,0 +1 @@ +export { default as Unsubscribe } from './Unsubscribe' diff --git a/packages/components-faraday/src/redux/users.js b/packages/components-faraday/src/redux/users.js index d988ba299f181462a5a3d42c5b2cdb16fcf4da32..460f254083804ddddadef2baf826d461cd88f0d5 100644 --- a/packages/components-faraday/src/redux/users.js +++ b/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())) -} diff --git a/packages/xpub-faraday/app/routes.js b/packages/xpub-faraday/app/routes.js index 826ed981b7f01bdab32619dac5de12f1d87e7124..e06874ce684fa21817fa7e679c940b824f5abc92 100644 --- a/packages/xpub-faraday/app/routes.js +++ b/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