feat(SecondTechCheck): Fixed modal, refactored code

packages/components-faraday/src/components/UIComponents/EQADecisionPage.js

-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