feat(make-recommendation): request a revision form

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

@@ -8,7 +8,7 @@ export const RootContainer = styled.div`
   flex-direction: column;
   margin: 0 auto;
   max-width: 550px;
-  min-width: 350px;
+  min-width: 450px;
   padding: calc(${th('subGridUnit')} * 2) calc(${th('subGridUnit')} * 4);
 `
 
@@ -48,7 +48,7 @@ export const Row = styled.div`
 
 export const RowItem = styled.div`
   display: flex;
-  flex: 1;
+  flex: ${({ flex }) => flex || 1};
   flex-direction: ${({ vertical }) => (vertical ? 'column' : 'row')};
   justify-content: ${({ centered }) => (centered ? 'center' : 'initial')};
 `
@@ -67,7 +67,7 @@ export const Err = styled.span`
 `
 
 export const Textarea = styled.textarea`
-  width: 100%;
+  width: 400px;
   padding: calc(${th('subGridUnit')}*2);
   font-size: ${th('fontSizeBaseSmall')};
   font-family: ${th('fontWriting')};

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

-import React from 'react'
+import React, { Fragment } from 'react'
 import { capitalize } from 'lodash'
-import { compose } from 'recompose'
-import { reduxForm } from 'redux-form'
-import { Button, Spinner, ValidatedField } from '@pubsweet/ui'
+import { connect } from 'react-redux'
+import { required } from 'xpub-validators'
+import styled, { css } from 'styled-components'
+import { reduxForm, change as changeForm } from 'redux-form'
+import { compose, withState, withHandlers } from 'recompose'
+import {
+  th,
+  Icon,
+  Button,
+  Spinner,
+  RadioGroup,
+  ValidatedField,
+} from '@pubsweet/ui'
 
 import {
   Row,
@@ -15,41 +25,118 @@ import {
   FormContainer,
 } from './'
 
+const revisionOptions = [
+  { value: 'minor', label: 'Minor' },
+  { value: 'major', label: 'Major' },
+]
+
 const Form = RootContainer.withComponent(FormContainer)
 
 const StepTwo = ({
-  recommendationError,
   goBack,
+  hasNote,
   decision,
-  handleSubmit,
+  showNote,
+  removeNote,
   isFetching,
+  handleSubmit,
+  recommendationError,
 }) => (
   <Form onSubmit={handleSubmit}>
-    <Title>{`Recommandation to ${capitalize(decision)}`}</Title>
-    <Row>
-      <RowItem vertical>
-        <Label>Message for Editor in Chief (optional)</Label>
-        <ValidatedField
-          component={input => <Textarea {...input} />}
-          name="message.eic"
-        />
-      </RowItem>
-    </Row>
-    <Row>
-      <RowItem vertical>
-        <Label>Message for Author (optional)</Label>
-        <ValidatedField
-          component={input => <Textarea {...input} />}
-          name="message.author"
-        />
-      </RowItem>
-    </Row>
-    {recommendationError && (
-      <Row>
-        <RowItem centered>
-          <Err>{recommendationError}</Err>
-        </RowItem>
-      </Row>
+    <Title>
+      {decision !== 'revise'
+        ? `Recommandation to ${capitalize(decision)}`
+        : `Request a revision from Author`}
+    </Title>
+    {decision !== 'revise' ? (
+      <Fragment>
+        <Row>
+          <RowItem vertical>
+            <Label>Message for Editor in Chief (optional)</Label>
+            <ValidatedField
+              component={input => <Textarea {...input} />}
+              name="message.eic"
+            />
+          </RowItem>
+        </Row>
+        <Row>
+          <RowItem vertical>
+            <Label>Message for Author (optional)</Label>
+            <ValidatedField
+              component={input => <Textarea {...input} />}
+              name="message.author"
+            />
+          </RowItem>
+        </Row>
+        {recommendationError && (
+          <Row>
+            <RowItem centered>
+              <Err>{recommendationError}</Err>
+            </RowItem>
+          </Row>
+        )}
+      </Fragment>
+    ) : (
+      <Fragment>
+        <CustomRow>
+          <RowItem vertical>
+            <Label>REVISION TYPE</Label>
+            <ValidatedField
+              component={input => (
+                <RadioGroup
+                  name="revision.revision-type"
+                  {...input}
+                  options={revisionOptions}
+                />
+              )}
+              name="revision.revisionType"
+            />
+          </RowItem>
+        </CustomRow>
+        <CustomRow>
+          <RowItem vertical>
+            <Label>REASON & DETAILS</Label>
+            <ValidatedField
+              component={input => <Textarea {...input} />}
+              name="revision.reason"
+              validate={[required]}
+            />
+          </RowItem>
+        </CustomRow>
+        {!hasNote ? (
+          <Row>
+            <RowItem>
+              <TextButton onClick={showNote}>Add Internal Note</TextButton>
+              <HintText>Not shared with author</HintText>
+            </RowItem>
+          </Row>
+        ) : (
+          <Fragment>
+            <CustomRow>
+              <RowItem>
+                <Label>INTERNAL NOTE</Label>
+              </RowItem>
+              <RowItem>
+                <HintText>Not shared with author</HintText>
+              </RowItem>
+              <CustomRowItem onClick={removeNote}>
+                <IconButton>
+                  <Icon primary>x</Icon>
+                </IconButton>
+                <TextButton>Remove</TextButton>
+              </CustomRowItem>
+            </CustomRow>
+            <CustomRow>
+              <RowItem>
+                <ValidatedField
+                  component={input => <Textarea {...input} />}
+                  name="revision.internal-note"
+                />
+              </RowItem>
+            </CustomRow>
+          </Fragment>
+        )}
+      </Fragment>
     )}
     <Row>
       <RowItem centered>
@@ -69,9 +156,54 @@ const StepTwo = ({
 )
 
 export default compose(
+  connect(null, { changeForm }),
+  withState('hasNote', 'changeHasNote', false),
+  withHandlers({
+    showNote: ({ changeHasNote }) => () => {
+      changeHasNote(true)
+    },
+    removeNote: ({ changeHasNote, changeForm }) => () => {
+      changeHasNote(false)
+      changeForm('recommendation', 'revision.internal-note', '')
+    },
+  }),
   reduxForm({
     form: 'recommendation',
     destroyOnUnmount: false,
     forceUnregisterOnUnmount: true,
   }),
 )(StepTwo)
+
+// #region styled components
+const defaultText = css`
+  color: ${th('colorPrimary')};
+  font-family: ${th('fontInterface')};
+  font-size: ${th('fontSizeBaseSmall')};
+`
+
+const TextButton = styled.span`
+  ${defaultText};
+  cursor: pointer;
+  margin-right: ${th('subGridUnit')};
+  text-decoration: underline;
+`
+
+const HintText = styled.span`
+  ${defaultText};
+  font-style: oblique;
+`
+
+const IconButton = styled.div`
+  display: flex;
+  justify-content: center;
+`
+
+const CustomRowItem = RowItem.extend`
+  align-items: center;
+  justify-content: flex-end;
+`
+
+const CustomRow = Row.extend`
+  margin: ${th('subGridUnit')} 0;
+`
+// #endregion

packages/xpub-faraday/app.js

@@ -3,6 +3,6 @@ const startServer = require('pubsweet-server')
 require('dotenv').config()
 
 startServer().catch(err => {
-  logger.error('FATAL ERROR, SHUTTING DOWN::', err)
+  logger.error('FATAL ERROR, SHUTTING DOWN:', err)
   process.exit(1)
 })