Add functionality to Wizard component

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

@@ -41,12 +41,12 @@ const itemTarget = {
   },
 }
 
-const DragHandle = () => (
-  <div className={classnames(classes['drag-handle'])}>
-    <Icon>chevron_up</Icon>
-    <Icon>chevron_down</Icon>
-  </div>
-)
+// const DragHandle = () => (
+//   <div className={classnames(classes['drag-handle'])}>
+//     <Icon>chevron_up</Icon>
+//     <Icon>chevron_down</Icon>
+//   </div>
+// )
 
 const Item = ({
   connectDragPreview,

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

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { debounce, pick } from 'lodash'
 import { actions } from 'pubsweet-client'
-import { reduxForm, formValueSelector } from 'redux-form'
+import { reduxForm, formValueSelector, SubmissionError } from 'redux-form'
 import { compose, getContext, withProps } from 'recompose'
 
 import WizardStep from './WizardStep'
@@ -19,14 +19,55 @@ const onChange = (values, dispatch, { project, version }) => {
   )
 }
 
+const submitManuscript = (values, dispatch, project, version, history) => {
+  dispatch(
+    actions.updateFragment(project, {
+      id: version.id,
+      rev: version.rev,
+      submitted: new Date(),
+      ...values,
+    }),
+  )
+    .then(() =>
+      dispatch(
+        actions.updateCollection({
+          id: project.id,
+          rev: project.rev,
+          status: 'submitted',
+        }),
+      ),
+    )
+    .then(() => {
+      history.push('/')
+    })
+    .catch(error => {
+      if (error.validationErrors) {
+        throw new SubmissionError()
+      }
+    })
+}
+
+const onSubmit = (
+  values,
+  dispatch,
+  { nextStep, isFinal, history, project, version, ...rest },
+) => {
+  if (!isFinal) {
+    nextStep()
+  } else {
+    submitManuscript(values, dispatch, project, version, history)
+  }
+}
+
 export default compose(
   getContext({
-    goBack: PropTypes.func,
+    history: PropTypes.object,
     isFinal: PropTypes.bool,
     isFirst: PropTypes.bool,
     project: PropTypes.object,
     version: PropTypes.object,
     wizard: PropTypes.object,
+    dispatchFns: PropTypes.object,
   }),
   withProps(({ version, wizard }) => ({
     initialValues: pick(version, wizard.formSectionKeys),
@@ -43,13 +84,8 @@ export default compose(
   })),
   reduxForm({
     form: 'wizard',
-    destroyOnUnmount: false,
     forceUnregisterOnUnmount: true,
-    onSubmit: (values, dispatch, { nextStep, isFinal }) => {
-      if (!isFinal) {
-        nextStep()
-      }
-    },
     onChange: debounce(onChange, 1000, { maxWait: 5000 }),
+    onSubmit,
   }),
 )(WizardStep)

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

 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
 import { actions } from 'pubsweet-client'
 import { withJournal } from 'xpub-journal'
 import { ConnectPage } from 'xpub-connect'
@@ -16,13 +17,21 @@ export default compose(
       { id: match.params.version },
     ),
   ]),
-  connect((state, { match }) => {
-    const project = selectCollection(state, match.params.project)
-    const version = selectFragment(state, match.params.version)
-
-    return { project, version }
-  }),
   withJournal,
+  connect(
+    (state, { match }) => {
+      const project = selectCollection(state, match.params.project)
+      const version = selectFragment(state, match.params.version)
+
+      return { project, version }
+    },
+    (dispatch, { journal: { wizard } }) => ({
+      dispatchFns: wizard.dispatchFunctions.reduce((acc, f) => {
+        acc[f.name] = bindActionCreators(f, dispatch)
+        return acc
+      }, {}),
+    }),
+  ),
   withState('step', 'changeStep', 0),
   withHandlers({
     getSteps: ({ journal: { wizard: { steps } } }) => () =>
@@ -35,20 +44,29 @@ export default compose(
   }),
   withContext(
     {
-      goBack: PropTypes.func,
+      history: PropTypes.object,
       isFinal: PropTypes.bool,
       isFirst: PropTypes.bool,
       project: PropTypes.object,
       version: PropTypes.object,
       wizard: PropTypes.object,
+      dispatchFns: PropTypes.object,
     },
-    ({ history: { goBack }, step, project, version, journal: { wizard } }) => ({
-      goBack,
+    ({
+      history,
+      step,
+      project,
+      version,
+      journal: { wizard },
+      dispatchFns,
+    }) => ({
+      history,
       isFinal: step === wizard.steps.length - 1,
       isFirst: step === 0,
       project,
       version,
       wizard,
+      dispatchFns,
     }),
   ),
 )(Wizard)

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

@@ -5,23 +5,28 @@ import { ValidatedField, Button } from '@pubsweet/ui'
 
 import classes from './WizardStep.local.scss'
 
-import AuthorList from './AuthorList'
-
 export default ({
   children: stepChildren,
   title,
+  subtitle,
   buttons,
   nextStep,
   prevStep,
   handleSubmit,
   isFinal,
   isFirst,
-  goBack,
+  history,
   formValues,
+  wizard,
+  dispatchFns,
 }) => (
   <div className={classnames(classes.step)}>
     <form className={classnames(classes.form)} onSubmit={handleSubmit}>
       <h3 className={classnames(classes.title)}>{title}</h3>
+      <p
+        className={classnames(classes.subtitle)}
+        dangerouslySetInnerHTML={{ __html: subtitle }}
+      />
       {stepChildren &&
         stepChildren.map(
           ({
@@ -29,6 +34,8 @@ export default ({
             validate,
             dependsOn,
             renderComponent: Comp,
+            format,
+            parse,
             ...rest
           }) => {
             if (
@@ -39,21 +46,28 @@ export default ({
             }
             return (
               <ValidatedField
-                component={input => <Comp {...rest} {...input} />}
+                component={input => (
+                  <Comp {...rest} {...input} {...dispatchFns} />
+                )}
+                format={format}
                 key={fieldId}
                 name={fieldId}
+                parse={parse}
                 validate={validate}
               />
             )
           },
         )}
-      <AuthorList />
       <div className={classnames(classes.buttons)}>
-        <Button onClick={isFirst ? goBack : prevStep}>
-          {isFirst ? 'Cancel' : 'Back'}
+        <Button onClick={isFirst ? () => history.push('/') : prevStep}>
+          {isFirst
+            ? `${wizard.cancelText || 'Cancel'}`
+            : `${wizard.backText || 'Back'}`}
         </Button>
         <Button primary type="submit">
-          {isFinal ? 'Finish' : 'Next'}
+          {isFinal
+            ? `${wizard.submitText || 'Submit Manuscript'}`
+            : `${wizard.nextText || 'Cancel'}`}
         </Button>
       </div>
     </form>

packages/component-wizard/src/components/WizardStep.local.scss

@@ -10,6 +10,11 @@
   .title {
     align-self: center;
   }
+
+  .subtitle {
+    align-self: center;
+    margin-bottom: 25px;
+  }
 }
 
 .form {

packages/xpub-faraday/app/config/journal/submit-wizard.js

@@ -113,7 +113,6 @@ export default {
           label: 'Conflict of interest details',
           validate: [required, min3Chars],
         },
-        {},
       ],
     },
     {

packages/xpub-faraday/app/config/journal/wizard-validators.js

-import { get } from 'lodash'
+import { get, isEmpty } from 'lodash'
 
 import manuscriptTypes from './manuscript-types'
 
@@ -7,7 +7,10 @@ const requiredTypes = manuscriptTypes
   .map(t => t.value)
 
 export const requiredBasedOnType = (value, formValues) => {
-  if (requiredTypes.includes(get(formValues, 'metadata.type'))) {
+  if (
+    requiredTypes.includes(get(formValues, 'metadata.type')) &&
+    isEmpty(get(formValues, 'metadata.abstract'))
+  ) {
     return 'Required'
   }
   return undefined