Add option to have a confirmation modal before submitting

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

@@ -29,7 +29,14 @@ const onChange = (
   }
 }
 
-const submitManuscript = (values, dispatch, project, version, history) => {
+const submitManuscript = (
+  values,
+  dispatch,
+  project,
+  version,
+  history,
+  redirectPath = '/',
+) => {
   dispatch(
     actions.updateFragment(project, {
       id: version.id,
@@ -48,7 +55,7 @@ const submitManuscript = (values, dispatch, project, version, history) => {
       ),
     )
     .then(() => {
-      history.push('/')
+      history.push(redirectPath)
     })
     .catch(error => {
       if (error.validationErrors) {
@@ -60,12 +67,31 @@ const submitManuscript = (values, dispatch, project, version, history) => {
 const onSubmit = (
   values,
   dispatch,
-  { nextStep, isFinal, history, project, version, ...rest },
+  {
+    nextStep,
+    isFinal,
+    history,
+    project,
+    version,
+    confirmation,
+    wizard: { confirmationModal, submissionRedirect },
+    toggleConfirmation,
+    ...rest
+  },
 ) => {
   if (!isFinal) {
     nextStep()
+  } else if (confirmationModal && !confirmation) {
+    toggleConfirmation()
   } else {
-    submitManuscript(values, dispatch, project, version, history)
+    submitManuscript(
+      values,
+      dispatch,
+      project,
+      version,
+      history,
+      submissionRedirect,
+    )
   }
 }
 
@@ -78,6 +104,8 @@ export default compose(
     version: PropTypes.object,
     wizard: PropTypes.object,
     dispatchFns: PropTypes.object,
+    confirmation: PropTypes.bool,
+    toggleConfirmation: PropTypes.func,
   }),
   withProps(({ version, wizard }) => ({
     initialValues: pick(version, wizard.formSectionKeys),

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

@@ -33,6 +33,7 @@ export default compose(
     }),
   ),
   withState('step', 'changeStep', 0),
+  withState('confirmation', 'setConfirmation', false),
   withHandlers({
     getSteps: ({ journal: { wizard: { steps } } }) => () =>
       steps.map(w => w.label),
@@ -41,6 +42,8 @@ export default compose(
     },
     prevStep: ({ changeStep }) => () =>
       changeStep(step => (step <= 0 ? step : step - 1)),
+    toggleConfirmation: ({ setConfirmation }) => () =>
+      setConfirmation(confirmation => !confirmation),
   }),
   withContext(
     {
@@ -51,6 +54,8 @@ export default compose(
       version: PropTypes.object,
       wizard: PropTypes.object,
       dispatchFns: PropTypes.object,
+      confirmation: PropTypes.bool,
+      toggleConfirmation: PropTypes.func,
     },
     ({
       history,
@@ -59,6 +64,8 @@ export default compose(
       version,
       journal: { wizard },
       dispatchFns,
+      confirmation,
+      toggleConfirmation,
     }) => ({
       history,
       isFinal: step === wizard.steps.length - 1,
@@ -67,6 +74,8 @@ export default compose(
       version,
       wizard,
       dispatchFns,
+      confirmation,
+      toggleConfirmation,
     }),
   ),
 )(Wizard)

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

@@ -19,6 +19,9 @@ export default ({
   formValues,
   wizard,
   dispatchFns,
+  confirmation,
+  toggleConfirmation,
+  wizard: { confirmationModal: ConfirmationModal },
   ...rest
 }) => (
   <div className={classnames(classes.step)}>
@@ -73,6 +76,11 @@ export default ({
             : `${wizard.nextText || 'Next'}`}
         </Button>
       </div>
+      {confirmation && (
+        <div className={classnames(classes.modal)}>
+          <ConfirmationModal toggleConfirming={toggleConfirmation} />
+        </div>
+      )}
     </form>
   </div>
 )

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

@@ -30,3 +30,15 @@
   margin: 15px 0;
   width: 400px;
 }
+
+.modal {
+  align-items: center;
+  background: rgba(255, 255, 255, 0.95);
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+}
\ No newline at end of file