Merge branch 'master' of gitlab.coko.foundation:xpub/xpub-faraday

packages/component-modal/src/components/index.js

 export { default as withModal } from './withModal'
 export { default as SuccessModal } from './SuccessModal'
 export { default as ConfirmationModal } from './ConfirmationModal'
+export { withModal2 } from './withModal'

packages/component-modal/src/components/withModal.js

 import React from 'react'
 import { omit } from 'lodash'
 import { connect } from 'react-redux'
+import { compose } from 'recompose'
 
 import Modal from './Modal'
 import { showModal, hideModal, setModalError } from '../redux/modal'
@@ -17,6 +18,48 @@ const mapDispatch = modalKey => (dispatch, propss) => ({
   setModalError: errorMessage => dispatch(setModalError(errorMessage)),
 })
 
+const mapDispatch2 = (dispatch, props) => ({
+  hideModal: () => dispatch(hideModal()),
+  showModal: (modalProps = {}) =>
+    dispatch(showModal(props.modalKey, modalProps)),
+  setModalError: errorMessage => dispatch(setModalError(errorMessage)),
+})
+
+export const withModal2 = mapperFn => BaseComponent =>
+  compose(connect(mapState, mapDispatch2))(baseProps => {
+    const { modalComponent: Component, overlayColor } = mapperFn(baseProps)
+    const {
+      hideModal,
+      modalProps,
+      modalError,
+      modalsVisibility,
+      modalKey,
+      showModal,
+      ...rest
+    } = baseProps
+    return (
+      <React.Fragment>
+        {modalsVisibility[modalKey] && (
+          <Modal
+            {...modalProps}
+            component={Component}
+            hideModal={hideModal}
+            modalError={modalError}
+            overlayColor={overlayColor}
+            setModalError={setModalError}
+            showModal={showModal}
+          />
+        )}
+        <BaseComponent
+          hideModal={hideModal}
+          setModalError={setModalError}
+          showModal={showModal}
+          {...rest}
+        />
+      </React.Fragment>
+    )
+  })
+
 const withModal = ({
   modalKey,
   modalComponent: Component,

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

@@ -25,6 +25,7 @@ const DashboardCard = ({
   theme,
   currentUser,
   renderHandlingEditorRow,
+  canInviteReviewers,
   ...rest
 }) => {
   const { submitted, title, type } = parseVersion(version)
@@ -139,8 +140,13 @@ const DashboardCard = ({
               <HEText>Handling Editor</HEText>
               {renderHandlingEditorRow()}
             </LeftDetails>
+            {canInviteReviewers() && (
+              <InviteReviewers
+                modalKey={`invite-reviewers-${project.id}`}
+                project={project}
+              />
+            )}
           </Bottom>
-          <InviteReviewers project={project} />
         </DetailsView>
       )}
     </Card>
@@ -155,6 +161,12 @@ export default compose(
     modalComponent: ConfirmationModal,
   }),
   withHandlers({
+    canInviteReviewers: ({ currentUser }) => () => {
+      const isAdmin = get(currentUser, 'admin')
+      const isEic = get(currentUser, 'editorInChief')
+      const isHe = get(currentUser, 'handlingEditor')
+      return isAdmin || isEic || isHe
+    },
     renderHandlingEditorRow: ({ currentUser, project }) => () => {
       const status = get(project, 'status') || 'draft'
       const isAdmin = get(currentUser, 'admin')

packages/components-faraday/src/components/Reviewers/InviteReviewers.js

@@ -3,8 +3,8 @@ import { Icon, Button, th } from '@pubsweet/ui'
 import styled, { css, withTheme } from 'styled-components'
 import { compose, withHandlers, lifecycle, withState } from 'recompose'
 import {
-  withModal,
   ConfirmationModal,
+  withModal2,
 } from 'pubsweet-component-modal/src/components'
 
 import { ReviewerForm, ReviewersList } from './'
@@ -69,16 +69,14 @@ const ModalSwitcher = ({ type, ...rest }) => {
 }
 
 export default compose(
-  withModal({
-    modalKey: 'invite-reviewers',
+  withModal2(props => ({
     modalComponent: ModalSwitcher,
-  }),
+  })),
   withHandlers({
-    showInviteModal: ({ showModal, hideModal, project, reviewers }) => () => {
+    showInviteModal: ({ showModal, hideModal, project }) => () => {
       showModal({
         type: 'invite-reviewers',
         collectionId: project.id,
-        reviewers,
         onConfirm: () => {
           hideModal()
         },

packages/components-faraday/src/components/Reviewers/ReviewerList.js

 import React from 'react'
+import moment from 'moment'
 import { pick } from 'lodash'
 import { connect } from 'react-redux'
 import { th, Icon } from '@pubsweet/ui'
@@ -47,14 +48,16 @@ const defaultReviewers = [
 ]
 
 const ResendRevoke = withTheme(
-  ({ theme, showConfirmResend, showConfirmRevoke }) => (
+  ({ theme, showConfirmResend, showConfirmRevoke, status }) => (
     <ActionButtons>
       <div onClick={showConfirmResend}>
         <Icon color={theme.colorPrimary}>refresh-cw</Icon>
       </div>
-      <div onClick={showConfirmRevoke}>
-        <Icon color={theme.colorPrimary}>x-circle</Icon>
-      </div>
+      {status === 'pending' && (
+        <div onClick={showConfirmRevoke}>
+          <Icon color={theme.colorPrimary}>x-circle</Icon>
+        </div>
+      )}
     </ActionButtons>
   ),
 )
@@ -63,6 +66,7 @@ const ReviewersList = ({
   reviewers = defaultReviewers,
   showConfirmResend,
   showConfirmRevoke,
+  renderTimestamp,
 }) => (
   <Root>
     <ScrollContainer>
@@ -79,12 +83,15 @@ const ReviewersList = ({
           </Column>
           <Column>
             <StatusText>{r.status}</StatusText>
-            <StatusText>{r.timestamp}</StatusText>
+            <DateText>{renderTimestamp(r.timestamp)}</DateText>
           </Column>
-          <ResendRevoke
-            showConfirmResend={showConfirmResend(r)}
-            showConfirmRevoke={showConfirmRevoke(r.invitationId)}
-          />
+          {r.status !== 'accepted' && (
+            <ResendRevoke
+              showConfirmResend={showConfirmResend(r)}
+              showConfirmRevoke={showConfirmRevoke(r.invitationId)}
+              status={r.status}
+            />
+          )}
         </ReviewerItem>
       ))}
     </ScrollContainer>
@@ -94,6 +101,16 @@ const ReviewersList = ({
 export default compose(
   connect(null, { inviteReviewer, revokeReviewer }),
   withHandlers({
+    renderTimestamp: () => timestamp => {
+      const today = moment()
+      const stamp = moment(timestamp)
+      const duration = moment.duration(today.diff(stamp))
+
+      if (duration.asDays() < 1) {
+        return `${duration.humanize()} ago`
+      }
+      return stamp.format('DD.MM.YYYY')
+    },
     goBackToReviewers: ({ showModal, hideModal, collectionId }) => () => {
       showModal({
         collectionId,
@@ -112,7 +129,8 @@ export default compose(
       collectionId,
     }) => reviewer => () => {
       showModal({
-        title: 'Resend confirmation',
+        title: 'Resend reviewer invite',
+        confirmText: 'Resend',
         onConfirm: () => {
           inviteReviewer(
             pick(reviewer, ['email', 'firstName', 'lastName', 'affiliation']),
@@ -130,7 +148,8 @@ export default compose(
       collectionId,
     }) => invitationId => () => {
       showModal({
-        title: 'Revoke confirmation',
+        title: 'Unassign Reviewer',
+        confirmText: 'Unassign',
         onConfirm: () => {
           revokeReviewer(invitationId, collectionId).then(
             goBackToReviewers,
@@ -160,7 +179,11 @@ const AcceptedReviewer = ReviewerEmail.extend`
   margin-left: ${th('subGridUnit')};
 `
 
-const StatusText = ReviewerEmail.extend``
+const StatusText = ReviewerEmail.extend`
+  text-transform: uppercase;
+`
+
+const DateText = ReviewerEmail.extend``
 
 const Column = styled.div`
   align-items: flex-start;