diff --git a/packages/component-modal/src/components/index.js b/packages/component-modal/src/components/index.js
index 724e8d8878f79f7754077b39dda7a1105632eebb..6ff437ff222422f7218b9872f3ebc7662483caf2 100644
--- a/packages/component-modal/src/components/index.js
+++ b/packages/component-modal/src/components/index.js
@@ -1,3 +1,4 @@
export { default as withModal } from './withModal'
export { default as SuccessModal } from './SuccessModal'
export { default as ConfirmationModal } from './ConfirmationModal'
+export { withModal2 } from './withModal'
diff --git a/packages/component-modal/src/components/withModal.js b/packages/component-modal/src/components/withModal.js
index 59f223682beb21dd050dffc597bfb9f8e33bede3..9bd24e9007db25f6ac73965aa6a99655df672827 100644
--- a/packages/component-modal/src/components/withModal.js
+++ b/packages/component-modal/src/components/withModal.js
@@ -1,6 +1,7 @@
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,
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardCard.js b/packages/components-faraday/src/components/Dashboard/DashboardCard.js
index 620eff5a3247918d251e468cb38f8d67356fc813..ebe49f7fb0b2a529cf4e81ce6df79adfaa482694 100644
--- a/packages/components-faraday/src/components/Dashboard/DashboardCard.js
+++ b/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')
diff --git a/packages/components-faraday/src/components/Reviewers/InviteReviewers.js b/packages/components-faraday/src/components/Reviewers/InviteReviewers.js
index a23d2bca2584eae4cf4d8b6e1f7a32d6ecdece2d..3df0d8b3433b4e1d14fc15fe58742c0239524cd9 100644
--- a/packages/components-faraday/src/components/Reviewers/InviteReviewers.js
+++ b/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()
},
diff --git a/packages/components-faraday/src/components/Reviewers/ReviewerList.js b/packages/components-faraday/src/components/Reviewers/ReviewerList.js
index 911522856f5bf94515f31a192f9c8d965d288f6b..e2a9a7bf278cf1710ffada22644f0806e9929106 100644
--- a/packages/components-faraday/src/components/Reviewers/ReviewerList.js
+++ b/packages/components-faraday/src/components/Reviewers/ReviewerList.js
@@ -1,4 +1,5 @@
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;