diff --git a/packages/components-faraday/src/components/UIComponents/EQSDecisionPage.js b/packages/components-faraday/src/components/UIComponents/EQSDecisionPage.js new file mode 100644 index 0000000000000000000000000000000000000000..79651f8428c8ddbf7197b4826e7402abd4c4bbc5 --- /dev/null +++ b/packages/components-faraday/src/components/UIComponents/EQSDecisionPage.js @@ -0,0 +1,110 @@ +import React from 'react' +import { isEmpty } from 'lodash' +import { Button } from '@pubsweet/ui' +import styled from 'styled-components' +import { th } from '@pubsweet/ui-toolkit' +import { + compose, + withState, + lifecycle, + withHandlers, + setDisplayName, +} from 'recompose' + +import { + withModal, + ConfirmationModal, +} from 'pubsweet-component-modal/src/components' + +import { Err, Subtitle } from './FormItems' +import { parseSearchParams } from '../utils' + +const EQSDecisionPage = ({ id, eqsDecision, errorMessage, successMessage }) => ( + <Root> + <Title> + Take a decision for manuscript <b>{id}</b>. + </Title> + {errorMessage && <Err>{errorMessage}</Err>} + {successMessage && <Subtitle>{successMessage}</Subtitle>} + {isEmpty(errorMessage) && + isEmpty(successMessage) && ( + <ButtonContainer> + <Button onClick={eqsDecision(false)}>REJECT</Button> + <Button onClick={eqsDecision(true)} primary> + ACCEPT + </Button> + </ButtonContainer> + )} + </Root> +) + +export default compose( + setDisplayName('EQS Decision page'), + withModal(() => ({ + modalComponent: ConfirmationModal, + })), + withState('id', 'setId', null), + withState('successMessage', 'setSuccess', ''), + withState('errorMessage', 'setError', ''), + lifecycle({ + componentDidMount() { + const { location, setId } = this.props + const { customId } = parseSearchParams(location.search) + setId(customId) + }, + }), + withHandlers({ + eqsDecision: ({ + setError, + showModal, + hideModal, + setSuccess, + }) => decision => () => { + showModal({ + title: `Are you sure you want to ${ + decision ? 'accept' : 'reject' + } this EQS package?`, + onConfirm: () => { + setSuccess('Manuscript accepted.') + hideModal() + }, + onCancel: () => { + setError('There was an error. Please try again.') + hideModal() + }, + }) + }, + }), +)(EQSDecisionPage) + +// #region styles +const Root = styled.div` + align-items: center; + color: ${th('colorText')}; + display: flex; + flex-direction: column; + justify-content: flex-start; + 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; +` + +const ButtonContainer = styled.div` + align-items: center; + display: flex; + justify-content: space-around; + padding: calc(${th('gridUnit')} / 2); + width: calc(${th('gridUnit')} * 15); +` +// #endregion diff --git a/packages/components-faraday/src/components/UIComponents/index.js b/packages/components-faraday/src/components/UIComponents/index.js index c5652eb8813f71e1c0d63e958f7ca835eb55f851..a619f97e10cfcf1546e5428b5773ed6e6530e336 100644 --- a/packages/components-faraday/src/components/UIComponents/index.js +++ b/packages/components-faraday/src/components/UIComponents/index.js @@ -7,5 +7,6 @@ export { default as NotFound } from './NotFound' export { default as InfoPage } from './InfoPage' export { default as ErrorPage } from './ErrorPage' export { default as DateParser } from './DateParser' +export { default as EQSDecisionPage } from './EQSDecisionPage' export { default as ConfirmationPage } from './ConfirmationPage' export { default as BreadcrumbsHeader } from './BreadcrumbsHeader' diff --git a/packages/xpub-faraday/app/routes.js b/packages/xpub-faraday/app/routes.js index 6e067df7e6d46c1665d346ae2c29928802497cda..05e3106ebac869d37c6b1401cf8764def29ab516 100644 --- a/packages/xpub-faraday/app/routes.js +++ b/packages/xpub-faraday/app/routes.js @@ -15,6 +15,7 @@ import { NotFound, InfoPage, ErrorPage, + EQSDecisionPage, ConfirmationPage, } from 'pubsweet-components-faraday/src/components/UIComponents/' import { @@ -118,7 +119,7 @@ const Routes = () => ( exact path="/projects/:project/versions/:version/details" /> - + <Route component={EQSDecisionPage} exact path="/eqs-decision" /> <Route component={ErrorPage} exact path="/error-page" /> <Route component={InfoPage} exact path="/info-page" /> <Route component={NotFound} />