ReviewerInviteDecision.js

import React from 'react'
import { connect } from 'react-redux'
import { reduxForm } from 'redux-form'
import { required, minChars } from 'xpub-validators'
import { compose, withState, lifecycle } from 'recompose'
import { loginUser } from 'pubsweet-component-login/actions'
import { Button, ValidatedField, H2, TextField, Spinner } from '@pubsweet/ui'
import {
  Row,
  Item,
  Text,
  Label,
  ShadowedBox,
  handleError,
  withFetching,
} from 'pubsweet-component-faraday-ui'

import { redirectToError, passwordValidator } from '../utils'
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 PasswordField = input => <TextField {...input} type="password" />
const min8Chars = minChars(8)

const ReviewerInviteDecision = ({
  agree,
  error,
  isFetching,
  handleSubmit,
  errorMessage,
  reviewerEmail,
  fetchingError,
}) => (
  <ShadowedBox center mt={2} width={60}>
    <H2>Reviewer Invitation</H2>
    <Text align="center" secondary>
      {reviewerEmail}
    </Text>

    <Row mt={2}>
      <Text align="center">{agree === 'true' ? agreeText : declineText}</Text>
    </Row>

    <Row mt={2}>
      <Item vertical>
        <Label required>Password</Label>
        <ValidatedField
          component={PasswordField}
          name="password"
          validate={[required, min8Chars]}
        />
      </Item>
    </Row>

    <Row mt={2}>
      <Item vertical>
        <Label required>Confirm password</Label>
        <ValidatedField
          component={PasswordField}
          name="confirmPassword"
          validate={[required]}
        />
      </Item>
    </Row>

    {fetchingError && (
      <Row mt={2}>
        <Text align="center" error>
          {fetchingError}
        </Text>
      </Row>
    )}

    <Row mt={2}>
      {isFetching ? (
        <Spinner />
      ) : (
        <Button onClick={handleSubmit} primary size="medium">
          CONFIRM
        </Button>
      )}
    </Row>
  </ShadowedBox>
)

export default compose(
  withFetching,
  withState('reviewerEmail', 'setEmail', ''),
  connect(null, {
    loginUser,
  }),
  lifecycle({
    componentDidMount() {
      const {
        agree,
        email,
        history,
        setEmail,
        fragmentId,
        collectionId,
        invitationId,
      } = this.props
      setEmail(email)

      if (agree === 'false') {
        reviewerDecision({
          fragmentId,
          agree: false,
          collectionId,
          invitationId,
        }).catch(redirectToError(history.replace))
      }
    },
  }),
  reduxForm({
    form: 'invite-reviewer',
    validate: passwordValidator,
    onSubmit: (
      { password },
      dispatch,
      {
        email,
        token,
        setError,
        loginUser,
        fragmentId,
        setFetching,
        collectionId,
        invitationId,
      },
    ) => {
      setFetching(true)
      setError('')
      setReviewerPassword({
        email,
        token,
        password,
      })
        .then(() => {
          setError('')
          setFetching(false)
          loginUser(
            {
              username: email,
              password,
            },
            `/projects/${collectionId}/versions/${fragmentId}/details?agree=${true}&invitationId=${invitationId}`,
          )
        })
        .catch(err => {
          setFetching(false)
          handleError(setError)(err)
        })
    },
  }),
)(ReviewerInviteDecision)