preview approval modal

app/components/review-wizard/ReviewFooter.jsx

@@ -4,7 +4,14 @@ import { Mutation } from 'react-apollo'
 import styled from 'styled-components'
 import { th } from '@pubsweet/ui-toolkit'
 import { Action, Button, H2, Icon } from '@pubsweet/ui'
-import { PreviewFooter, Notification, Buttons, Portal } from '../ui'
+import {
+  PreviewFooter,
+  Notification,
+  Buttons,
+  Portal,
+  Close,
+  CloseButton,
+} from '../ui'
 import SubmissionCancel from '../SubmissionCancel'
 import { REVIEW_MANUSCRIPT, GET_REVIEWS, CURRENT_REVIEW } from './operations'
 import ReviewInstructions from './ReviewInstructions'
@@ -77,6 +84,11 @@ class ReviewFooter extends React.Component {
                     </Button>
                     {approve && (
                       <Portal transparent>
+                        <Close>
+                          <CloseButton
+                            onClick={() => this.setState({ approve: false })}
+                          />
+                        </Close>
                         <H2>Errors fixed? Send for:</H2>
                         <Buttons>
                           <Button onClick={() => setStatus('xml-qa')} primary>
@@ -129,7 +141,6 @@ class ReviewFooter extends React.Component {
                   <React.Fragment>
                     <div>
                       <Button
-                        disabled={annotations}
                         onClick={() => this.setState({ approve: true })}
                         primary
                       >
@@ -150,10 +161,49 @@ class ReviewFooter extends React.Component {
                         Cancel submission
                       </Action>
                     )}
+                    {approve && (
+                      <Portal style={{ width: '600px' }} transparent>
+                        <p>
+                          {status === 'xml-review'
+                            ? `Approve the final web versions of the manuscript for release to Europe PMC now?`
+                            : `Confirm QA has been completed, and approve the web versons of the manuscript?`}
+                        </p>
+                        {annotations && (
+                          <Notification type="warning">
+                            {`Errors have been highlighted! Are you sure you want to approve the submission, rather than submitting your error report?`}
+                          </Notification>
+                        )}
+                        <Buttons right>
+                          <Button
+                            onClick={async () => {
+                              await setStatus(
+                                status === 'xml-review'
+                                  ? 'xml-complete'
+                                  : 'xml-review',
+                              )
+                              history.push('/')
+                            }}
+                            primary
+                          >
+                            Yes
+                          </Button>
+                          <Button
+                            onClick={() => this.setState({ approve: false })}
+                          >
+                            No
+                          </Button>
+                        </Buttons>
+                      </Portal>
+                    )}
                     {report && (
                       <React.Fragment>
                         {annotations ? (
                           <Portal transparent>
+                            <Close>
+                              <CloseButton
+                                onClick={() => this.setState({ report: false })}
+                              />
+                            </Close>
                             <H2>Send the following errors?</H2>
                             <ListErrors annotations={annotations} />
                             <Buttons right>