diff --git a/packages/components-faraday/src/components/UIComponents/EQADecisionPage.js b/packages/components-faraday/src/components/UIComponents/EQADecisionPage.js
index c1fb89f349ec68b04e977988e1e0bfea9a5fda79..d8cb5a582373d626041c7af2bf314adbdc0d3573 100644
--- a/packages/components-faraday/src/components/UIComponents/EQADecisionPage.js
+++ b/packages/components-faraday/src/components/UIComponents/EQADecisionPage.js
@@ -1,9 +1,8 @@
-import React from 'react'
+import React, { Fragment } from 'react'
import { isEmpty } from 'lodash'
import { connect } from 'react-redux'
-import { Button } from '@pubsweet/ui'
-import styled from 'styled-components'
-import { th } from '@pubsweet/ui-toolkit'
+import { reduxForm } from 'redux-form'
+import { Button, H2, TextArea, ValidatedField } from '@pubsweet/ui'
import {
compose,
withState,
@@ -11,221 +10,170 @@ import {
withHandlers,
setDisplayName,
} from 'recompose'
-
import {
- withModal,
- ConfirmationModal,
-} from 'pubsweet-component-modal/src/components'
+ Row,
+ Text,
+ Label,
+ OpenModal,
+ ShadowedBox,
+ ItemOverrideAlert,
+} from 'pubsweet-component-faraday-ui'
-import { Err, Subtitle } from './FormItems'
import { parseSearchParams } from '../utils'
import {
technicalDecision,
technicalCheckFetching,
} from '../../redux/technicalCheck'
+const Enhanced = () => (
+ <Row>
+ <ItemOverrideAlert data-test-id="manuscript-return-reason" vertical>
+ <Label required>Return reason</Label>
+ <ValidatedField component={TextArea} name="comments" />
+ </ItemOverrideAlert>
+ </Row>
+)
+
+const FormModal = reduxForm({
+ form: 'eqa',
+ onSubmit: (
+ { comments },
+ dispatch,
+ { technicalDecision, params: { collectionId, token }, setSuccess },
+ ) => ({ hideModal, setModalError }) => {
+ technicalDecision({
+ token,
+ comments,
+ step: 'eqa',
+ agree: false,
+ collectionId,
+ })
+ .then(() => {
+ hideModal()
+ setSuccess(`Manuscript rejected. Thank you for your technical check!`)
+ })
+ .catch(e => {
+ setModalError(`There was an error: ${e}`)
+ })
+ },
+})(({ isFetching, handleSubmit, technicalDecision, ...formProps }) => (
+ <OpenModal
+ content={Enhanced}
+ isFetching={isFetching}
+ modalKey="rejectManuscript"
+ onConfirm={modalProps => handleSubmit()(modalProps)}
+ technicalDecision={technicalDecision}
+ title="Reject Manuscript"
+ >
+ {showModal => (
+ <Button data-test-id="eqs-no-button" onClick={showModal}>
+ RETURN TO EiC
+ </Button>
+ )}
+ </OpenModal>
+))
+
const EQADecisionPage = ({
params,
- showEQAModal,
+ isFetching,
errorMessage,
successMessage,
+ acceptManuscript,
+ ...rest
}) => (
- <Root>
- <Title>
- Take a decision for manuscript <b>{params.customId}</b>.
- </Title>
- {errorMessage && <Err>{errorMessage}</Err>}
- {successMessage && <Subtitle>{successMessage}</Subtitle>}
+ <ShadowedBox center mt={5}>
+ <H2>Editorial decision</H2>
+ {errorMessage && (
+ <Row mt={1}>
+ <Text>{errorMessage}</Text>
+ </Row>
+ )}
+ {successMessage && (
+ <Row mt={1}>
+ <Text>{successMessage}</Text>
+ </Row>
+ )}
{isEmpty(errorMessage) &&
isEmpty(successMessage) && (
- <ButtonContainer>
- <Button onClick={showEQAModal(false)}>RETURN TO EiC</Button>
- <Button onClick={showEQAModal(true)} primary>
- ACCEPT
- </Button>
- </ButtonContainer>
+ <Fragment>
+ <Row>
+ <Text mb={2} mt={2} secondary>
+ Take a decision for manuscript <b>{params.customId}</b>.
+ </Text>
+ </Row>
+ <Row>
+ <FormModal
+ isFetching={isFetching}
+ params={params}
+ technicalDecision={technicalDecision}
+ {...rest}
+ />
+ <OpenModal
+ isFetching={isFetching}
+ modalKey="acceptManuscript"
+ onConfirm={acceptManuscript}
+ subtitle="Are you sure you want to accept this manuscript?"
+ title="Accept Manuscript"
+ >
+ {showModal => (
+ <Button
+ data-test-id="eqa-yes-button"
+ onClick={showModal}
+ primary
+ >
+ ACCEPT
+ </Button>
+ )}
+ </OpenModal>
+ </Row>
+ </Fragment>
)}
- </Root>
+ </ShadowedBox>
)
-const DeclineModal = compose(
- withState('reason', 'setReason', ''),
- withHandlers({
- changeReason: ({ setReason }) => e => {
- setReason(e.target.value)
- },
- }),
-)(({ reason, changeReason, hideModal, onConfirm, modalError }) => (
- <DeclineRoot>
- <span>Return Manuscript to Editor in Chief</span>
- <textarea
- onChange={changeReason}
- placeholder="Return reason*"
- value={reason}
- />
- {modalError && <ErrorMessage>{modalError}</ErrorMessage>}
- <ButtonContainer data-test="eqa-buttons">
- <Button onClick={hideModal}>Cancel</Button>
- <Button disabled={!reason} onClick={onConfirm(reason)} primary>
- Send
- </Button>
- </ButtonContainer>
- </DeclineRoot>
-))
-
-const ModalComponent = ({ type, ...rest }) =>
- type === 'decline' ? (
- <DeclineModal {...rest} />
- ) : (
- <ConfirmationModal {...rest} />
- )
-
export default compose(
setDisplayName('EQA Decision page'),
connect(
- state => ({
+ (state, { params }) => ({
isFetching: technicalCheckFetching(state),
}),
{ technicalDecision },
),
- withModal(({ isFetching }) => ({
- isFetching,
- modalComponent: ModalComponent,
- })),
withState('params', 'setParams', {
+ title: '',
token: null,
- customId: null,
+ comments: null,
collectionId: null,
}),
withState('successMessage', 'setSuccess', ''),
lifecycle({
componentDidMount() {
const { location, setParams } = this.props
- const { customId, collectionId, token } = parseSearchParams(
+ const { comments, collectionId, token, title } = parseSearchParams(
location.search,
)
- setParams({ customId, collectionId, token })
+ setParams({ comments, collectionId, token, title })
},
}),
withHandlers({
- showEQAModal: ({
- showModal,
- hideModal,
+ acceptManuscript: ({
setSuccess,
- setModalError,
technicalDecision,
params: { collectionId, token },
- }) => decision => () => {
- const acceptConfig = {
- title: `Are you sure you want to accept this EQA package?`,
- onConfirm: () => {
- technicalDecision({
- step: 'eqa',
- agree: decision,
- collectionId,
- token,
- }).then(() => {
- setSuccess(
- `Manuscript accepted. Thank you for your technical check!`,
- )
- hideModal()
- }, setModalError)
- },
- onCancel: hideModal,
- }
- const declineConfig = {
- type: 'decline',
- title: 'Return Manuscript to Editor in Chief',
- onConfirm: reason => () => {
- technicalDecision({
- step: 'eqa',
- agree: decision,
- comments: reason,
- collectionId,
- token,
- }).then(() => {
- setSuccess(
- `Manuscript returned with comments. An email has been sent to Editor In Chief. Thank you for your technical check!`,
- )
- hideModal()
- }, setModalError)
- },
- }
-
- const cfg = decision ? acceptConfig : declineConfig
- showModal(cfg)
+ }) => ({ hideModal, setModalError }) => {
+ technicalDecision({
+ token,
+ step: 'eqa',
+ agree: true,
+ collectionId,
+ })
+ .then(() => {
+ hideModal()
+ setSuccess(`Manuscript accepted. Thank you for your technical check!`)
+ })
+ .catch(e => {
+ setModalError(`There was an error: ${e}`)
+ })
},
}),
)(EQADecisionPage)
-
-// #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);
-`
-const ErrorMessage = styled.div`
- color: ${th('colorError')};
- margin: ${th('subGridUnit')};
- text-align: center;
-`
-const DeclineRoot = styled.div`
- align-items: center;
- background-color: ${th('backgroundColor')};
- display: flex;
- flex-direction: column;
- height: calc(${th('gridUnit')} * 13);
- justify-content: space-between;
- padding: calc(${th('subGridUnit')} * 7);
- width: calc(${th('gridUnit')} * 24);
-
- & span {
- color: ${th('colorPrimary')};
- font-size: ${th('fontSizeHeading5')};
- font-family: ${th('fontHeading')};
- margin-bottom: ${th('gridUnit')};
- }
-
- & textarea {
- height: 100%;
- padding: calc(${th('subGridUnit')} * 2);
- width: 100%;
- }
-
- & textarea:focus,
- & textarea:active {
- outline: none;
- }
-
- & div {
- display: flex;
- justify-content: space-evenly;
- margin: ${th('gridUnit')} auto 0;
- width: 100%;
- }
-`
-// #endregion