feat(eic-decision): show decision modal

packages/components-faraday/src/components/Dashboard/DashboardCard.js

@@ -4,14 +4,13 @@ import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 import { Button, Icon, th } from '@pubsweet/ui'
 import styled, { css, withTheme } from 'styled-components'
-import { compose, getContext, withHandlers } from 'recompose'
+import { compose, getContext, withHandlers, withProps } from 'recompose'
 import {
   withModal,
   ConfirmationModal,
 } from 'pubsweet-component-modal/src/components'
 import { DateParser } from 'pubsweet-components-faraday/src/components'
 import { AuthorsWithTooltip } from 'pubsweet-component-manuscript/src/molecules'
-// import { AuthorsWithTooltip } from '@pubsweet/ui'
 
 import ZipFiles from '../Files/ZipFiles'
 import { InviteReviewers } from '../Reviewers/'
@@ -21,6 +20,7 @@ import { ReviewerDecision, HandlingEditorSection } from './'
 import { parseVersion, parseJournalIssue, mapStatusToLabel } from './../utils'
 import { canMakeRecommendation } from '../../../../component-faraday-selectors/src'
 
+import { Decision } from '../MakeDecision'
 import { ReviewerBreakdown } from '../Invitations'
 import { Recommendation } from '../MakeRecommendation'
 
@@ -34,6 +34,7 @@ const DashboardCard = ({
   invitation,
   currentUser,
   deleteProject,
+  heRecommendation,
   showAbstractModal,
   canInviteReviewers,
   showConfirmationModal,
@@ -62,6 +63,10 @@ const DashboardCard = ({
             />
           </LeftDetails>
           <RightDetails flex={2}>
+            <Decision
+              heRecommendation={heRecommendation}
+              modalKey={`decide-${version.id}`}
+            />
             {canMakeRecommendation && (
               <Recommendation
                 collectionId={project.id}
@@ -186,7 +191,6 @@ export default compose(
     invitation: selectInvitation(state, project.id),
     canMakeRecommendation: canMakeRecommendation(state, project),
   })),
-
   withHandlers({
     canInviteReviewers: ({ currentUser, project }) => () => {
       const handlingEditor = get(project, 'handlingEditor')
@@ -217,6 +221,16 @@ export default compose(
       })
     },
   }),
+  withProps(
+    ({ version: { recommendations = [] }, project: { handlingEditor } }) => ({
+      heRecommendation:
+        recommendations.find(
+          r =>
+            r.recommendationType === 'editorRecommendation' &&
+            r.userId === get(handlingEditor, 'id'),
+        ) || {},
+    }),
+  ),
 )(DashboardCard)
 
 // #region styled-components

packages/components-faraday/src/components/MakeDecision/Decision.js

+import React from 'react'
+import { th } from '@pubsweet/ui'
+import styled from 'styled-components'
+import { compose, withHandlers } from 'recompose'
+
+import {
+  ConfirmationModal,
+  withModal2,
+} from 'pubsweet-component-modal/src/components'
+
+import { DecisionForm } from './'
+
+const Decision = ({ showDecisionModal }) => (
+  <Root onClick={showDecisionModal}>Make decision</Root>
+)
+
+const ModalComponent = ({ type, ...rest }) => {
+  switch (type) {
+    case 'decision':
+      return <DecisionForm {...rest} />
+    default:
+      return <ConfirmationModal {...rest} />
+  }
+}
+
+export default compose(
+  withModal2(() => ({
+    modalComponent: ModalComponent,
+  })),
+  withHandlers({
+    showDecisionModal: ({ showModal, hideModal, heRecommendation }) => () => {
+      showModal({
+        type: 'decision',
+        hideModal,
+        heRecommendation,
+      })
+    },
+  }),
+)(Decision)
+
+// #region styled components
+const Root = styled.div`
+  align-items: center;
+  background-color: ${th('colorPrimary')};
+  color: ${th('colorTextReverse')};
+  cursor: pointer;
+  display: flex;
+  font-family: ${th('fontInterface')};
+  font-size: ${th('fontSizeBaseSmall')};
+  height: calc(${th('subGridUnit')} * 5);
+  justify-content: center;
+  padding: 0 calc(${th('subGridUnit')} * 2);
+  text-transform: uppercase;
+`
+// #endregion

packages/components-faraday/src/components/MakeDecision/DecisionForm.js

+import React from 'react'
+import { get } from 'lodash'
+import { connect } from 'react-redux'
+import styled, { css } from 'styled-components'
+import { reduxForm, formValueSelector } from 'redux-form'
+import { compose, setDisplayName, withProps } from 'recompose'
+import { th, Icon, Button, RadioGroup, ValidatedField } from '@pubsweet/ui'
+
+import { FormItems } from '../UIComponents'
+
+const {
+  Row,
+  Title,
+  Label,
+  RowItem,
+  Textarea,
+  Subtitle,
+  RootContainer,
+  FormContainer,
+} = FormItems
+const Form = RootContainer.withComponent(FormContainer)
+
+const decisionOptions = [
+  { label: 'Publish', value: 'publish' },
+  { label: 'Reject', value: 'reject' },
+  { label: 'Return to Handling Editor', value: 'returnToHE' },
+]
+
+const DecisionForm = ({
+  decision,
+  hideModal,
+  handleSubmit,
+  heRecommendation: { reason, message = '' },
+}) => (
+  <Form onSubmit={handleSubmit}>
+    <IconButton onClick={hideModal}>
+      <Icon primary>x</Icon>
+    </IconButton>
+    <Title>Make decision</Title>
+    <CustomSubtitle>
+      Recommended to<BoldSubtitle>{reason}</BoldSubtitle>
+    </CustomSubtitle>
+    <Row>
+      <RowItem vertical>
+        <Label>Message from Handling Editor</Label>
+        <span>{message}</span>
+      </RowItem>
+    </Row>
+    <Row>
+      <RowItem vertical>
+        <Label>Your Decision</Label>
+        <ValidatedField
+          component={input => (
+            <CustomRadioGroup>
+              <RadioGroup
+                name="decision"
+                options={decisionOptions}
+                {...input}
+              />
+            </CustomRadioGroup>
+          )}
+          name="decision"
+        />
+      </RowItem>
+    </Row>
+    {decision === 'returnToHE' && (
+      <Row>
+        <RowItem vertical>
+          <Label>Comments for Handling Editor</Label>
+          <ValidatedField
+            component={input => <Textarea {...input} height={70} />}
+            name="messageToHE"
+          />
+        </RowItem>
+      </Row>
+    )}
+    <Row>
+      <RowItem centered>
+        <Button onClick={hideModal}>Cancel</Button>
+      </RowItem>
+      <RowItem centered>
+        <Button primary type="submit">
+          Submit
+        </Button>
+      </RowItem>
+    </Row>
+  </Form>
+)
+
+const subtitleParser = t => {
+  switch (t) {
+    case 'major':
+      return 'Revise(major)'
+    case 'minor':
+      return 'Revise(minor)'
+    case 'reject':
+      return 'Reject'
+    case 'publish':
+    default:
+      return 'Publish'
+  }
+}
+
+const selector = formValueSelector('eicDecision')
+export default compose(
+  setDisplayName('DecisionForm'),
+  connect(state => ({
+    decision: selector(state, 'decision'),
+  })),
+  withProps(({ heRecommendation: { recommendation = '', comments = [] } }) => ({
+    heRecommendation: {
+      reason: subtitleParser(recommendation),
+      message: get(comments.find(c => c.public), 'content'),
+    },
+  })),
+  reduxForm({
+    form: 'eicDecision',
+    onSubmit: (values, dispatch, props) => {
+      // console.log('decision form', values, props)
+    },
+  }),
+)(DecisionForm)
+
+// #region styled-components
+const defaultText = css`
+  color: ${th('colorText')};
+  font-family: ${th('fontReading')};
+  font-size: ${th('fontSizeBaseSmall')};
+`
+
+const IconButton = styled.div`
+  align-self: flex-end;
+  cursor: pointer;
+`
+
+const CustomSubtitle = Subtitle.extend`
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+`
+
+const BoldSubtitle = Subtitle.extend`
+  font-weight: bold;
+  margin-left: 5px;
+`
+
+const CustomRadioGroup = styled.div`
+  div {
+    flex-direction: row;
+    justify-content: space-between;
+    label {
+      span:last-child {
+        font-style: normal;
+        ${defaultText};
+      }
+    }
+  }
+`
+// #endregion

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

+export { default as Decision } from './Decision'
+export { default as DecisionForm } from './DecisionForm'

packages/components-faraday/src/components/MakeRecommendation/RecommendWizard.js

@@ -97,5 +97,4 @@ const IconButton = styled.div`
   align-self: flex-end;
   cursor: pointer;
 `
-
 // #endregion

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

@@ -17,14 +17,14 @@ export const Title = styled.div`
   font-family: ${th('fontHeading')};
   font-size: ${th('fontSizeHeading5')};
   font-weight: bold;
-  margin: 10px auto;
+  margin: ${th('subGridUnit')} auto;
   text-align: center;
 `
 export const Subtitle = styled.div`
   font-family: ${th('fontReading')};
   font-size: ${th('fontSizeBase')};
   font-weight: normal;
-  margin: 10px auto;
+  margin: ${th('subGridUnit')} auto;
   text-align: center;
 `
 
@@ -32,7 +32,7 @@ export const Email = styled.div`
   font-family: ${th('fontReading')};
   font-size: ${th('fontSizeBase')};
   font-weight: normal;
-  margin: 10px auto;
+  margin: ${th('subGridUnit')} auto;
   text-align: center;
 `