fix(reviewer-invitation): handle multiple invitation declines

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

@@ -22,7 +22,7 @@ export const Title = styled.div`
 `
 export const Subtitle = styled.div`
   font-family: ${th('fontReading')};
-  font-size: ${th('fontSizeBaseSmall')};
+  font-size: ${th('fontSizeBase')};
   font-weight: normal;
   margin: 10px auto;
   text-align: center;
@@ -56,8 +56,10 @@ export const Label = styled.div`
   font-size: ${th('fontSizeBaseSmall')};
   text-transform: uppercase;
 `
-export const Err = styled.div`
+export const Err = styled.span`
   color: ${th('colorError')};
+  font-family: ${th('fontReading')};
+  font-size: ${th('fontSizeBase')};
   margin-top: calc(${th('gridUnit')}*-1);
-  text-align: left;
+  text-align: center;
 `

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

 import React from 'react'
 import { get } from 'lodash'
 import { connect } from 'react-redux'
-import { reduxForm, SubmissionError } from 'redux-form'
 import { push } from 'react-router-redux'
 import { required, minChars } from 'xpub-validators'
-import { compose, withState, lifecycle } from 'recompose'
+import { reduxForm, SubmissionError } from 'redux-form'
 import { loginUser } from 'pubsweet-component-login/actions'
 import { Button, ValidatedField, TextField } from '@pubsweet/ui'
+import { compose, withState, lifecycle, withHandlers } from 'recompose'
 
 import {
   Row,
@@ -23,6 +23,7 @@ import { reviewerDecision, setReviewerPassword } from '../../redux/reviewers'
 
 const agreeText = `You have been invited to review a manuscript on the Hindawi platform. Please set a password and proceed to the manuscript.`
 const declineText = `You have decline to work on a manuscript.`
+const alreadyDeclined = `You have already declined to work on this manuscript.`
 
 const min8Chars = minChars(8)
 const ReviewerInviteDecision = ({
@@ -30,10 +31,12 @@ const ReviewerInviteDecision = ({
   error,
   reviewerEmail,
   agree,
+  errorMessage,
+  renderSubtitle,
 }) => (
   <RootContainer>
     <Title>Hindawi Invitation</Title>
-    <Subtitle>{agree === 'true' ? agreeText : declineText}</Subtitle>
+    <Subtitle>{renderSubtitle()}</Subtitle>
     <Email>{reviewerEmail}</Email>
     {agree === 'true' && (
       <FormContainer onSubmit={handleSubmit}>
@@ -61,11 +64,11 @@ const ReviewerInviteDecision = ({
         </Row>
       </FormContainer>
     )}
-    {agree === 'false' && <div>nu i-a placut</div>}
   </RootContainer>
 )
 
 export default compose(
+  withState('errorMessage', 'setError', ''),
   withState('reviewerEmail', 'setEmail', ''),
   connect(null, { push, loginUser, setReviewerPassword, reviewerDecision }),
   lifecycle({
@@ -73,6 +76,7 @@ export default compose(
       const {
         agree,
         email,
+        setError,
         setEmail,
         collectionId,
         invitationId,
@@ -81,8 +85,26 @@ export default compose(
       setEmail(email)
 
       if (agree === 'false') {
-        reviewerDecision(invitationId, collectionId, false)
+        reviewerDecision(invitationId, collectionId, false).catch(err => {
+          const errorText = get(JSON.parse(err.response), 'error')
+          if (errorText.includes('has already been answered')) {
+            setError(alreadyDeclined)
+          } else {
+            setError('Oops! Something went wrong.')
+          }
+        })
+      }
+    },
+  }),
+  withHandlers({
+    renderSubtitle: ({ agree, errorMessage }) => () => {
+      if (agree === 'true') {
+        return agreeText
+      }
+      if (errorMessage) {
+        return errorMessage
       }
+      return declineText
     },
   }),
   reduxForm({