feat(review): add confirmation modal

packages/component-manuscript/src/components/ReviewerReportForm.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux'
 import { required } from 'xpub-validators'
 import styled, { css } from 'styled-components'
 import { compose, withHandlers, withProps } from 'recompose'
-import { th, Menu, ValidatedField, Icon, Button, Spinner } from '@pubsweet/ui'
+import { th, Menu, ValidatedField, Icon, Button } from '@pubsweet/ui'
 import {
   reduxForm,
   isSubmitting,
@@ -15,6 +15,14 @@ import {
   autosaveRequest,
   autosaveSuccess,
 } from 'pubsweet-component-wizard/src/redux/autosave'
+import {
+  ConfirmationModal,
+  withModal2,
+} from 'pubsweet-component-modal/src/components'
+import {
+  selectFetching,
+  selectError,
+} from 'pubsweet-components-faraday/src/redux/recommendations'
 
 import { parseReviewResponseToForm, parseReviewRequest } from './utils'
 
@@ -149,11 +157,7 @@ const ReviewerReportForm = ({
 
     <Spacing />
     <Row>
-      {isSubmitting ? (
-        <Spinner size={4} />
-      ) : (
-        <ActionButton onClick={handleSubmit}> Submit report </ActionButton>
-      )}
+      <ActionButton onClick={handleSubmit}> Submit report </ActionButton>
       <AutosaveIndicator formName="reviewerReport" />
     </Row>
   </Root>
@@ -162,6 +166,15 @@ const ReviewerReportForm = ({
 // To be removed
 const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
 
+const ModalWrapper = compose(
+  connect(state => ({
+    fetching: selectFetching(state),
+    modalError: selectError(state),
+  })),
+)(({ fetching, ...rest }) => (
+  <ConfirmationModal {...rest} isFetching={fetching} />
+))
+
 export default compose(
   connect(
     state => ({
@@ -173,6 +186,9 @@ export default compose(
   withProps(() => ({
     initialValues: parseReviewResponseToForm({}),
   })),
+  withModal2(props => ({
+    modalComponent: ModalWrapper,
+  })),
   withHandlers({
     changeField: ({ changeForm }) => (field, value) => {
       changeForm('reviewerReport', field, value)
@@ -186,12 +202,25 @@ export default compose(
       dispatch(autosaveRequest())
       sleep(1000).then(() => dispatch(autosaveSuccess(new Date())))
     },
-    onSubmit: (values, dispatch, { isSubmitting }) =>
-      sleep(1000).then(() => {
-        // TODO: link to backend
-        const review = parseReviewRequest(values)
-        window.alert(`You submitted:\n\n${JSON.stringify(review, null, 2)}`)
-      }),
+    onSubmit: (values, dispatch, { isSubmitting, showModal, hideModal }) => {
+      showModal({
+        title: 'Ready to Submit your Report?',
+        subtitle: 'Once submitted, the report can`t be modified',
+        confirmText: 'Submit report',
+        onConfirm: () => {
+          sleep(1000)
+            .then(hideModal)
+            .then(() => {
+              // TODO: link to backend
+              const review = parseReviewRequest(values)
+              window.alert(
+                `You submitted:\n\n${JSON.stringify(review, null, 2)}`,
+              )
+            })
+        },
+        onCancel: hideModal,
+      })
+    },
   }),
 )(ReviewerReportForm)
 

packages/components-faraday/src/redux/recommendations.js

+import { get } from 'lodash'
 import {
   get as apiGet,
   create,
@@ -36,6 +37,12 @@ export const updateRecommendationSuccess = recommendation => ({
   payload: { recommendation },
 })
 
+// Selectors
+export const selectFetching = state =>
+  get(state, 'recommendations.fetching') || false
+
+export const selectError = state => get(state, 'recommendations.error')
+
 // Actions
 
 // State