feat(new-submit-wizard): add author list and validations

packages/component-wizard/src/components/NewWizard.js

 import React, { Fragment } from 'react'
 import { connect } from 'react-redux'
-import { reduxForm } from 'redux-form'
+import {
+  Field,
+  reduxForm,
+  hasSubmitFailed,
+  getFormSyncErrors,
+} from 'redux-form'
 import { th } from '@pubsweet/ui-toolkit'
 import { actions } from 'pubsweet-client'
 import { withJournal } from 'xpub-journal'
 import { ConnectPage } from 'xpub-connect'
 import { required } from 'xpub-validators'
 import { DragDropContext } from 'react-dnd'
-import { get, debounce, omit } from 'lodash'
 import styled, { css } from 'styled-components'
 import HTML5Backend from 'react-dnd-html5-backend'
+import { get, debounce, omit, has, isEmpty, isBoolean } from 'lodash'
 import { selectCollection, selectFragment } from 'xpub-selectors'
 import { Icon, Checkbox, ValidatedField, Menu, Button } from '@pubsweet/ui'
 import { withStateHandlers, compose, toClass, withProps } from 'recompose'
@@ -22,6 +27,7 @@ import {
 import { autosaveRequest } from '../redux/autosave'
 
 const {
+  Err,
   Row,
   Label,
   Title,
@@ -106,7 +112,13 @@ const NewStepOne = () => (
 // #endregion
 
 // #region StepTwo
-const NewStepTwo = ({ version, project, manuscriptTypes }) => (
+const NewStepTwo = ({
+  version,
+  project,
+  syncErrors,
+  submitFailed,
+  manuscriptTypes,
+}) => (
   <Fragment>
     <Title>2. Manuscript & Authors Details</Title>
     <Subtitle>
@@ -146,11 +158,16 @@ const NewStepTwo = ({ version, project, manuscriptTypes }) => (
     <Row className="row">
       <RowItem vertical>
         <Label>AUTHORS DETAILS*</Label>
+        <Field component={() => <div />} name="authors" />
         <AuthorList
           parentForm="submission"
           project={project}
           version={version}
         />
+        {submitFailed &&
+          has(syncErrors, 'authors') && (
+            <Err align="left">{get(syncErrors, 'authors')}</Err>
+          )}
       </RowItem>
     </Row>
   </Fragment>
@@ -164,6 +181,8 @@ const NewWizard = ({
   nextStep,
   prevStep,
   handleSubmit,
+  submitFailed,
+  formSyncErrors,
   journal: { manuscriptTypes = [] },
 }) => (
   <Fragment>
@@ -184,6 +203,8 @@ const NewWizard = ({
         <NewStepTwo
           manuscriptTypes={manuscriptTypes}
           project={project}
+          submitFailed={submitFailed}
+          syncErrors={formSyncErrors}
           version={version}
         />
       )}
@@ -210,6 +231,24 @@ const onChange = (values, dispatch, { project, version }) => {
   )
 }
 
+const validate = (values, props) => {
+  const errors = {}
+
+  if (isEmpty(get(props, 'version.authors'))) {
+    errors.authors = 'Authors are required.'
+  }
+
+  if (!isBoolean(values.authorForm) && values.authorForm > -1) {
+    errors.authors = 'You have an unsaved author.'
+  }
+
+  if (isBoolean(values.authorForm) && values.authorForm) {
+    errors.authors = 'Finish or cancel adding a new author.'
+  }
+
+  return errors
+}
+
 // #region export
 export default compose(
   ConnectPage(({ match }) => [
@@ -223,6 +262,8 @@ export default compose(
   connect((state, { match }) => ({
     version: selectFragment(state, get(match, 'params.version')),
     project: selectCollection(state, get(match, 'params.project')),
+    formSyncErrors: getFormSyncErrors('submission')(state),
+    submitFailed: hasSubmitFailed('submission')(state),
   })),
   withStateHandlers(
     { step: 1 },
@@ -238,6 +279,7 @@ export default compose(
   })),
   reduxForm({
     form: 'submission',
+    validate,
     onChange: debounce(onChange, 1000, { maxWait: 5000 }),
     onSubmit: (values, dispatch, { step, nextStep }) => {
       if (step < 2) {

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

@@ -114,7 +114,7 @@ export const Err = styled.span`
   font-family: ${th('fontReading')};
   font-size: ${th('fontSizeBase')};
   margin-top: 0;
-  text-align: center;
+  text-align: ${({ align }) => align || 'center'};
 `
 
 export const Textarea = styled.textarea`