feat(reviewers-breakdown): create reviewers breakdown component

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

@@ -14,12 +14,9 @@ import ZipFiles from './ZipFiles'
 import { InviteReviewers } from '../Reviewers/'
 import { selectInvitation } from '../../redux/reviewers'
 import { parseVersion, parseJournalIssue, mapStatusToLabel } from './../utils'
-import {
-  AuthorTooltip,
-  ReviewerDecision,
-  HandlingEditorSection,
-  ReviewerReports,
-} from './'
+import { AuthorTooltip, ReviewerDecision, HandlingEditorSection } from './'
+
+import { ReviewerBreakdown } from '../Invitations'
 
 const DashboardCard = ({
   deleteProject,
@@ -160,9 +157,7 @@ const DashboardCard = ({
             </LeftDetails>
             {canInviteReviewers() && (
               <RightDetails flex={4}>
-                <ReviewerReports
-                  invitations={invitations.filter(i => i.role === 'reviewer')}
-                />
+                <ReviewerBreakdown compact invitations={invitations} />
                 <InviteReviewers
                   modalKey={`invite-reviewers-${project.id}`}
                   project={project}

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

-import React from 'react'
-import { th } from '@pubsweet/ui'
-import styled, { css } from 'styled-components'
-
-const ReviewerReports = ({ invitations }) => {
-  const accepted = invitations.filter(i => i.isAccepted).length
-  return (
-    <ReviewerText>{`Reviewer reports (${accepted}/${
-      invitations.length
-    })`}</ReviewerText>
-  )
-}
-
-export default ReviewerReports
-
-// #region styled-components
-const defaultText = css`
-  color: ${th('colorText')};
-  font-family: ${th('fontReading')};
-  font-size: ${th('fontSizeBaseSmall')};
-`
-
-const ReviewerText = styled.div`
-  ${defaultText};
-  margin-right: ${th('subGridUnit')};
-  text-transform: uppercase;
-`
-// #endregion

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

 import DashboardPage from './DashboardPage'
 
 export { default as AuthorTooltip } from './AuthorTooltip'
-export { default as ReviewerReports } from './ReviewerReports'
 export { default as ReviewerDecision } from './ReviewerDecision'
 export { default as EditorInChiefActions } from './EditorInChiefActions'
 export { default as HandlingEditorActions } from './HandlingEditorActions'

packages/components-faraday/src/components/Invitations/ReviewerBreakdown.js

+import React from 'react'
+import { th } from '@pubsweet/ui'
+import styled, { css } from 'styled-components'
+import { compose, withHandlers, withProps } from 'recompose'
+
+const ReviewerBreakdown = ({
+  compact = false,
+  getCompactInvitations,
+  getExtendedInvitations,
+}) => (compact ? getCompactInvitations() : getExtendedInvitations())
+
+export default compose(
+  withProps(({ invitations = [] }) => ({
+    invitations: invitations.filter(i => i.role === 'reviewer'),
+  })),
+  withHandlers({
+    getCompactInvitations: ({ invitations }) => () => {
+      const acceptedInvitations = invitations.filter(
+        i => i.isAccepted && i.hasAnswer,
+      )
+      return (
+        <ReviewerText>
+          Reviewer reports ({acceptedInvitations.length}/{invitations.length})
+        </ReviewerText>
+      )
+    },
+    getExtendedInvitations: ({ invitations }) => () => {
+      const invitationStatus = invitations.filter(i => i.hasAnswer).reduce(
+        (acc, i) => ({
+          ...acc,
+          [i.isAccepted ? 'accepted' : 'declined']:
+            acc[[i.isAccepted ? 'accepted' : 'declined']] + 1,
+        }),
+        {
+          accepted: 0,
+          declined: 0,
+        },
+      )
+
+      return (
+        <BreakdownText>
+          <b>{invitations.length}</b> invited,
+          <b> {invitationStatus.accepted}</b> agreed,
+          <b> {invitationStatus.declined}</b> declined
+        </BreakdownText>
+      )
+    },
+  }),
+)(ReviewerBreakdown)
+
+// #region styled-components
+const defaultText = css`
+  color: ${th('colorText')};
+  font-family: ${th('fontReading')};
+  font-size: ${th('fontSizeBaseSmall')};
+`
+
+const BreakdownText = styled.div`
+  ${defaultText};
+  margin-right: ${th('subGridUnit')};
+`
+
+const ReviewerText = BreakdownText.extend`
+  text-transform: uppercase;
+`
+// #endregion

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

+export { default as ReviewerBreakdown } from './ReviewerBreakdown'

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

@@ -8,6 +8,7 @@ import {
   withModal2,
 } from 'pubsweet-component-modal/src/components'
 
+import { ReviewerBreakdown } from '../Invitations'
 import { ReviewerForm, ReviewersList } from './'
 import {
   getCollectionReviewers,
@@ -51,11 +52,12 @@ const InviteReviewersModal = compose(
     hideModal,
     onConfirm,
     showModal,
-    collectionId,
     reviewers,
+    invitations,
+    collectionId,
     getReviewers,
-    fetchingReviewers,
     fetchingInvite,
+    fetchingReviewers,
   }) => (
     <Root>
       <CloseIcon data-test="icon-modal-hide" onClick={hideModal}>
@@ -73,6 +75,7 @@ const InviteReviewersModal = compose(
 
       <Row>
         <Subtitle hidden={reviewers.length === 0}>Reviewers Info</Subtitle>
+        <ReviewerBreakdown invitations={invitations} />
         {fetchingReviewers && <Spinner size={3} />}
       </Row>
       <ReviewersList
@@ -106,6 +109,7 @@ export default compose(
       showModal({
         type: 'invite-reviewers',
         collectionId: project.id,
+        invitations: project.invitations,
         onConfirm: () => {
           hideModal()
         },
@@ -149,7 +153,6 @@ const Row = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  padding-right: 20px;
 `
 
 const Root = styled.div`

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

-import styled from 'styled-components'
 import { th } from '@pubsweet/ui'
+import styled from 'styled-components'
 
 export const RootContainer = styled.div`
   background-color: ${th('backgroundColorReverse')};

packages/components-faraday/src/components/SignUp/ReviewerDecline.js

 import React from 'react'
+import { th } from '@pubsweet/ui'
 import { connect } from 'react-redux'
+import styled from 'styled-components'
+import { withJournal } from 'xpub-journal'
 import { compose, lifecycle } from 'recompose'
 
+import { RootContainer, Title } from './FormItems'
 import { reviewerDecline } from '../../redux/reviewers'
 
-const ReviewerDecline = props => <div>I decline textul de la Matt</div>
+const ReviewerDecline = ({ journal: { metadata: { email } } }) => (
+  <RootContainer>
+    <Title>Thank you for letting us know.</Title>
+    <div>
+      <Description>
+        We hope you will review for Hindawi in the future. If you want any more
+        information, or would like to submit a review for this article, then
+        please contact us at{' '}
+        <MailLink href={`mailto:${email}`} target="_blank">
+          {email}
+        </MailLink>.
+      </Description>
+    </div>
+  </RootContainer>
+)
 
 export default compose(
+  withJournal,
   connect(null, { reviewerDecline }),
   lifecycle({
     componentDidMount() {
@@ -20,3 +39,19 @@ export default compose(
     },
   }),
 )(ReviewerDecline)
+
+// #region styled-components
+const MailLink = styled.a`
+  color: ${th('colorPrimary')};
+
+  &:visited {
+    color: ${th('colorTextPlaceholder')};
+  }
+`
+
+const Description = styled.span`
+  color: ${th('colorPrimary')};
+  font-family: ${th('fontReading')};
+  font-size: ${th('fontSizeBaseSmall')};
+`
+// #endregion

packages/xpub-faraday/app/config/journal/metadata.js

@@ -6,4 +6,5 @@ export default {
   name: <Logo srcUrl="/assets/hindawi-logo.png" />,
   logo: '/assets/hindawi-logo.png',
   nameText: 'Faraday Journal',
+  email: 'faraday@hindawi.com',
 }