packages/component-faraday-selectors/src/index.js

@@ -467,14 +467,23 @@ export const getInvitationsWithReviewersForFragment = (state, fragmentId) =>
 export const canMakeHERecommendation = (state, { collection, statuses }) => {
   const validHE = isHEToManuscript(state, get(collection, 'id', ''))
   if (!validHE) return false
-
   const statusImportance = get(
     statuses,
     `${get(collection, 'status', 'draft')}.importance`,
     1,
   )
 
-  if (!(statusImportance > 1 && statusImportance < 10)) return false
+  const heInvitedImportance = get(statuses, `heInvited.importance`)
+  const pendingApprovalImportance = get(statuses, `pendingApproval.importance`)
+
+  if (
+    !(
+      statusImportance > heInvitedImportance &&
+      statusImportance < pendingApprovalImportance
+    )
+  ) {
+    return false
+  }
 
   return true
 }

packages/component-faraday-ui/src/ContextualBox.js

@@ -40,14 +40,16 @@ const ContextualBox = ({
   rightChildren,
   toggle,
   expanded,
-  ...props
+  ...rest
 }) =>
-  !isUndefined(props.expanded) ? (
+  !isUndefined(expanded) ? (
     <ControlledAccordion
+      expanded={expanded}
       header={CustomHeader}
       label={label}
       rightChildren={rightChildren}
-      {...props}
+      toggle={toggle}
+      {...rest}
     >
       {children}
     </ControlledAccordion>
@@ -56,7 +58,7 @@ const ContextualBox = ({
       header={CustomHeader}
       label={label}
       rightChildren={rightChildren}
-      {...props}
+      {...rest}
     >
       {children}
     </Accordion>
@@ -68,7 +70,12 @@ ContextualBox.propTypes = {
   /** Label of the contextual box. */
   label: PropTypes.string,
   /** Component or html to be rendered on the right side. */
-  rightChildren: PropTypes.any, // eslint-disable-line
+  // rightChildren: PropTypes.any,
+  rightChildren: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.func,
+    PropTypes.string,
+  ]),
   /** The state of the contextual box. If passed from a parent then the component
    * is controlled and can be expanded/collapsed remotely.
    */
@@ -82,8 +89,6 @@ ContextualBox.propTypes = {
 ContextualBox.defaultProps = {
   label: '',
   rightChildren: undefined,
-  toggle: undefined,
-  expanded: undefined,
 }
 
 // #region styles

packages/component-faraday-ui/src/ContextualBox.md

@@ -122,6 +122,7 @@ A controlled ContextualBox. This is usually used together with the RemoteOpener
 ```js
 const MyRightComponent = () => <div>works like a charm!</div>
 
+
 ;<RemoteOpener>
   {({ expanded, toggle }) => (
     <div>

packages/component-faraday-ui/src/IconButton.js

@@ -31,9 +31,6 @@ export default ({
   fontIcon,
   disabled,
   unclickable,
-  paddingTop,
-  paddingRight,
-  paddingBottom,
   iconSize = 1.8,
   className,
   ...props
@@ -55,9 +52,6 @@ export default ({
     {fontIcon && (
       <FontIconButton
         className={`${fontIcon} fontIconStyle`}
-        paddingBottom={paddingBottom}
-        paddingRight={paddingRight}
-        paddingTop={paddingTop}
         size={iconSize}
         {...props}
       />
@@ -66,8 +60,6 @@ export default ({
 )
 
 const FontIconButton = styled.span`
-  padding-bottom: calc(${props => props.paddingBottom} * ${th('gridUnit')} / 2);
-  padding-right: calc(${props => props.paddingRight} * ${th('gridUnit')} / 2);
-  padding-top: calc(${props => props.paddingTop} * ${th('gridUnit')} / 2);
   font-size: calc(${props => props.size} * ${th('gridUnit')});
+  ${paddingHelper};
 `

packages/component-faraday-ui/src/contextualBoxes/AssignHE.js

@@ -41,10 +41,9 @@ const AssignHE = ({
       {searchValue !== '' && (
         <IconButton
           fontIcon="removeIcon"
-          iconSize={2}
           onClick={clearSearch}
-          right={8}
-          top={12}
+          right={16}
+          top={16}
         />
       )}
     </TextContainer>

packages/component-faraday-ui/src/contextualBoxes/HERecommendation.js

@@ -79,6 +79,10 @@ const HERecommendation = ({
   handleSubmit,
   formValues,
   highlight,
+  rejectRecommendation,
+  publishRecommendation,
+  minorRevisionRecommendation,
+  majorRevisionRecommendation,
   ...rest
 }) => (
   <ContextualBox
@@ -111,31 +115,38 @@ const HERecommendation = ({
           />
         </ItemOverrideAlert>
       </Row>
-      {get(formValues, 'recommendation') === 'minor' ||
-      get(formValues, 'recommendation') === 'major' ? (
+      {(minorRevisionRecommendation || majorRevisionRecommendation) && (
         <Row mt={2}>
           <ResponsiveItem
             data-test-id="editorial-recommendation-message-for-author"
             mr={1}
             vertical
           >
-            <Label>
-              Message for Author <Text secondary>Optional</Text>
-            </Label>
-            <ValidatedField component={Textarea} name="public" />
+            <Label required>Message for Author</Label>
+            <ValidatedField
+              component={Textarea}
+              name="public"
+              validate={[required]}
+            />
           </ResponsiveItem>
         </Row>
-      ) : (
+      )}
+      {(publishRecommendation || rejectRecommendation) && (
         <ResponsiveRow mt={2}>
           <ResponsiveItem
             data-test-id="editorial-recommendation-message-for-author"
             mr={1}
             vertical
           >
-            <Label>
-              Message for Author <Text secondary>Optional</Text>
+            <Label required={!!rejectRecommendation}>
+              Message for Author{' '}
+              {publishRecommendation ? <Text secondary> Optional</Text> : ''}
             </Label>
-            <ValidatedField component={Textarea} name="public" />
+            <ValidatedField
+              component={Textarea}
+              name="public"
+              validate={rejectRecommendation ? [required] : false}
+            />
           </ResponsiveItem>
 
           <ResponsiveItem
@@ -199,9 +210,14 @@ export default compose(
     confirmMessage: options.find(
       o => o.value === get(formValues, 'recommendation', 'publish'),
     ).button,
+    rejectRecommendation: get(formValues, 'recommendation') === 'reject',
+    publishRecommendation: get(formValues, 'recommendation') === 'publish',
+    minorRevisionRecommendation: get(formValues, 'recommendation') === 'minor',
+    majorRevisionRecommendation: get(formValues, 'recommendation') === 'major',
   })),
   reduxForm({
     form: 'HERecommendation',
+    destroyOnUnmount: false,
     onSubmit: (
       values,
       dispatch,

packages/component-faraday-ui/src/gridItems/Row.js

@@ -14,7 +14,7 @@ const Row = styled.div.attrs(props => ({
   flex-wrap: ${props => get(props, 'flexWrap', 'initial')};
   justify-content: ${props => get(props, 'justify', 'space-evenly')};
   width: ${props => (props.fitContent ? 'fit-content' : '100%')};
-  height: ${props => get(props, 'height', 'autp')};
+  height: ${props => get(props, 'height', 'auto')};
 
   ${heightHelper};
   ${marginHelper};
@@ -37,7 +37,6 @@ Row.defaultProps = {
   bgColor: 'transparent',
   flexWrap: 'initial',
   justifyContent: 'space-evenly',
-  height: '100%',
 }
 
 export default Row

packages/component-faraday-ui/src/manuscriptDetails/ManuscriptEicDecision.js

 import React from 'react'
-import { get, initial } from 'lodash'
+import { get, initial, chain } from 'lodash'
 import { compose, withProps } from 'recompose'
 import styled from 'styled-components'
 import { reduxForm } from 'redux-form'
@@ -57,11 +57,12 @@ const ManuscriptEicDecision = ({
   options,
   decision,
   formValues,
+  collection,
   isFetching,
   handleSubmit,
   messagesLabel,
-  collection,
   submitDecision,
+  lastHeRecommendation,
   ...rest
 }) => (
   <ContextualBox
@@ -81,7 +82,8 @@ const ManuscriptEicDecision = ({
         </ItemOverrideAlert>
       </Row>
 
-      {decision !== 'publish' && (
+      {(decision === 'revision' ||
+        decision === 'return-to-handling-editor') && (
         <Row mt={2} pl={1} pr={1}>
           <Item vertical>
             <Label required={decision !== 'reject'}>
@@ -95,6 +97,22 @@ const ManuscriptEicDecision = ({
           </Item>
         </Row>
       )}
+      {decision === 'reject' && (
+        <Row mt={2} pl={1} pr={1}>
+          <Item vertical>
+            <Label required={lastHeRecommendation !== 'reject'}>
+              {messagesLabel[get(formValues, 'decision', 'reject')]}
+            </Label>
+            <ValidatedField
+              component={ValidatedTextArea}
+              name="message"
+              validate={
+                lastHeRecommendation !== 'reject' ? [required] : undefined
+              }
+            />
+          </Item>
+        </Row>
+      )}
 
       <Row justify="flex-end" mt={1} pr={1}>
         <Button onClick={handleSubmit} primary size="medium">
@@ -112,7 +130,7 @@ export default compose(
     modalKey: 'eic-decision',
     modalComponent: MultiAction,
   })),
-  withProps(({ formValues, collection }) => ({
+  withProps(({ formValues, collection, fragment }) => ({
     modalTitle: eicDecisions.find(
       o => o.value === get(formValues, 'decision', 'publish'),
     ).modalTitle,
@@ -124,9 +142,15 @@ export default compose(
       eicDecisions,
       get(collection, 'status', 'submitted'),
     ),
+    lastHeRecommendation: chain(fragment)
+      .get('recommendations', [])
+      .last()
+      .get('recommendation', '')
+      .value(),
   })),
   reduxForm({
     form: 'eic-decision',
+    destroyOnUnmount: false,
     onSubmit: (
       values,
       dispatch,

packages/component-faraday-ui/src/modals/MultiAction.js

@@ -11,7 +11,6 @@ const MultiAction = ({
   title,
   content,
   onClose,
-  onCancel,
   subtitle,
   onConfirm,
   modalError,
@@ -39,7 +38,7 @@ const MultiAction = ({
         <Spinner size={3} />
       ) : (
         <Fragment>
-          <Button data-test-id="modal-cancel" onClick={onCancel}>
+          <Button data-test-id="modal-cancel" onClick={onClose}>
             {cancelText}
           </Button>
           <Button data-test-id="modal-confirm" onClick={onConfirm} primary>
@@ -61,7 +60,7 @@ MultiAction.propTypes = {
   /** The text you want to see on the button when someone cancel the report. */
   cancelText: PropTypes.string,
   /** Callback function fired when cancel confirmation card. */
-  onCancel: PropTypes.func,
+  onCancel: PropTypes.func, // eslint-disable-line
   /** Callback function fired when confirm confirmation card. */
   onConfirm: PropTypes.func,
   /** When is true will show a spinner.  */

packages/component-manuscript/src/components/ManuscriptLayout.js

@@ -270,7 +270,10 @@ const ManuscriptLayout = ({
               canHEOnlyReject={canHEOnlyReject}
               expanded={HERecommendationExpanded}
               formValues={get(formValues, 'editorialRecommendation', {})}
-              highlight={reviewerRecommendations.length > 0}
+              highlight={
+                editorialRecommendations.length === 0 &&
+                reviewerRecommendations.length > 0
+              }
               modalKey="heRecommendation"
               onRecommendationSubmit={
                 recommendationHandler.onEditorialRecommendation
@@ -284,6 +287,7 @@ const ManuscriptLayout = ({
               collection={collection}
               expanded={eicDecisionExpanded}
               formValues={get(formValues, 'eicDecision')}
+              fragment={fragment}
               highlight={editorialRecommendations.length > 0}
               messagesLabel={messagesLabel}
               mt={2}

packages/component-manuscript/src/components/ManuscriptPage.js

@@ -411,11 +411,17 @@ export default compose(
       if (canReview && !get(fragment, 'responseToReviewers.content', false)) {
         this.props.toggleReviewerRecommendations()
       }
+
+      /*
+      Expand this section if we are the HE of the manuscript and we either
+      didn't invite a reviewer yet or a reviewer submitted his report and
+      an editorial recommendation hasn't been made.
+      */
       if (
         isHEToManuscript &&
-        !!reviewerReports.length &&
-        editorialRecommendations.length === 0 &&
-        get(fragment, 'responseToReviewers.content', false)
+        (get(fragment, 'invitations', []).length === 0 ||
+          reviewerReports.length !== 0) &&
+        editorialRecommendations.length === 0
       ) {
         this.props.toggleReviewerDetails()
       }

packages/xpub-faraday/app/routes.js

@@ -57,7 +57,7 @@ const GlobalStyles = createGlobalStyle`
 
     #root, #root > div, #root > div > div {
       height: 100%;
-    } 
+    }
   }
 `