Merge branch 'shared-data-model' of...

Merge branch 'shared-data-model' of https://gitlab.coko.foundation/xpub/xpub-epmc.git into shared-data-model

app/component-pdf-viewer/client/components/Page.jsx

@@ -10,7 +10,7 @@ import 'pdfjs-dist/web/pdf_viewer.css'
 import Loading from './Loading'
 
 const PDFPage = styled.div`
-  margin: calc(${th('gridUnit')} / 2) auto;
+  margin: ${th('gridUnit')} auto;
   .page {
     margin 0 auto;
     position: relative;

app/components/App.jsx

@@ -34,7 +34,7 @@ const NavSec = styled.div`
   background-color: ${th('colorTextReverse')};
   border-bottom: ${th('borderWidth')} ${th('borderStyle')}
     ${th('colorFurniture')};
-  @media screen and (max-width: 500px) {
+  @media screen and (max-width: 630px) {
     height: calc(${th('gridUnit')} * 9);
   }
 `

app/components/Footer.jsx

@@ -8,18 +8,19 @@ const Foot = styled(FlexBar)`
   * {
     font-size: ${th('fontSizeBaseSmall')};
   }
-  @media screen and (max-width: 870px) {
+  @media screen and (max-width: 995px) {
     height: auto;
-  }
-  @media screen and (max-width: 450px) {
     flex-wrap: wrap;
+    z-index: 3;
     & > div:first-child {
       & > div {
+        text-align: center;
         padding-bottom: 0;
       }
       & + div div {
-        text-align: left;
+        text-align: center;
         margin: 0 auto;
+        padding-top: calc(${th('gridUnit')} / 2);
         padding-left: 0;
       }
     }

app/components/ResolveDuplicates.jsx

@@ -4,7 +4,7 @@ import { Mutation } from 'react-apollo'
 import styled from 'styled-components'
 import { th } from '@pubsweet/ui-toolkit'
 import { Action, H3, H4, Button, Icon, Link } from '@pubsweet/ui'
-import { B, Buttons, Close, CloseButton, Portal, Notification } from './ui'
+import { B, Buttons, CloseModal, Portal, Notification } from './ui'
 import { States, timeSince } from './dashboard'
 import Citation from './submission-wizard/Citation'
 import { REPLACE_MANUSCRIPT, CHECK_DUPES } from './operations'
@@ -145,9 +145,7 @@ class ResolveDuplicates extends React.Component {
           }
           return (
             <Portal ref={this.setRef} transparent>
-              <Close>
-                <CloseButton onClick={close} />
-              </Close>
+              <CloseModal onClick={close} />
               <Columns>
                 <H3>This manuscript</H3>
                 <H3>Duplicate(s)</H3>

app/components/SubmissionHeader.jsx

@@ -17,6 +17,19 @@ const Left = styled.div`
   overflow: hidden;
   text-overflow: ellipsis;
 `
+const FlexDiv = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+`
+const Progress = styled.span`
+  margin-left: calc(${th('gridUnit')} * 3);
+  font-weight: normal;
+  font-style: italic;
+  color: ${th('colorTextPlaceholder')} &.saved {
+    color: ${th('colorText')};
+  }
+`
 class MailLink extends React.Component {
   state = { show: false }
   render() {
@@ -41,58 +54,85 @@ class MailLink extends React.Component {
   }
 }
 
+let savedTimer
+const addSaved = () => {
+  document.getElementById('progress').classList.add('saved')
+}
+const removeSaved = () => {
+  document.getElementById('progress').classList.remove('saved')
+}
+
 const SubmissionHeader = BaseComponent => ({
   currentUser,
   manuscript,
   children,
+  saved,
   ...props
-}) => (
-  <React.Fragment>
-    <ManuscriptHead>
-      <LeftSide>
-        <Left>
-          {manuscript.id}: <HTMLString string={manuscript.meta.title} />
-        </Left>
-      </LeftSide>
-      <RightSide>
-        <div>
-          {currentUser.admin ? (
-            <React.Fragment>
-              {window.location.pathname ===
-              `/submission/${manuscript.id}/activity` ? (
-                <React.Fragment>
-                  {States.admin[manuscript.status].url !== 'activity' && (
-                    <Link
-                      to={`/submission/${manuscript.id}/${
-                        States.admin[manuscript.status].url
-                      }`}
-                    >
-                      <Icon color="currentColor" size={2.5}>
-                        x-square
-                      </Icon>
-                      Exit activity
-                    </Link>
-                  )}
-                </React.Fragment>
-              ) : (
-                <Link to={`/submission/${manuscript.id}/activity`}>
-                  <Icon color="currentColor" size={2.5}>
-                    check-square
-                  </Icon>
-                  Activity
-                </Link>
-              )}
-            </React.Fragment>
-          ) : (
-            <MailLink currentUser={currentUser} manuscript={manuscript} />
-          )}
-        </div>
-      </RightSide>
-    </ManuscriptHead>
-    <BaseComponent currentUser={currentUser} manuscript={manuscript} {...props}>
-      {children}
-    </BaseComponent>
-  </React.Fragment>
-)
+}) => {
+  if (saved && document.getElementById('progress')) {
+    addSaved()
+  }
+  if (savedTimer) {
+    clearTimeout(savedTimer)
+  }
+  savedTimer = setTimeout(() => {
+    removeSaved()
+  }, 2000)
+  return (
+    <React.Fragment>
+      <ManuscriptHead>
+        <LeftSide>
+          <Left>
+            {manuscript.id}: <HTMLString string={manuscript.meta.title} />
+          </Left>
+        </LeftSide>
+        <RightSide>
+          <FlexDiv>
+            {currentUser.admin ? (
+              <React.Fragment>
+                {window.location.pathname ===
+                `/submission/${manuscript.id}/activity` ? (
+                  <React.Fragment>
+                    {States.admin[manuscript.status].url !== 'activity' && (
+                      <Link
+                        to={`/submission/${manuscript.id}/${
+                          States.admin[manuscript.status].url
+                        }`}
+                      >
+                        <Icon color="currentColor" size={2.5}>
+                          x-square
+                        </Icon>
+                        Exit activity
+                      </Link>
+                    )}
+                  </React.Fragment>
+                ) : (
+                  <Link to={`/submission/${manuscript.id}/activity`}>
+                    <Icon color="currentColor" size={2.5}>
+                      check-square
+                    </Icon>
+                    Activity
+                  </Link>
+                )}
+              </React.Fragment>
+            ) : (
+              <MailLink currentUser={currentUser} manuscript={manuscript} />
+            )}
+            <Progress className="saved" id="progress">
+              Progress saved
+            </Progress>
+          </FlexDiv>
+        </RightSide>
+      </ManuscriptHead>
+      <BaseComponent
+        currentUser={currentUser}
+        manuscript={manuscript}
+        {...props}
+      >
+        {children}
+      </BaseComponent>
+    </React.Fragment>
+  )
+}
 
 export default SubmissionHeader

app/components/SubmissionMutations.jsx

@@ -96,7 +96,7 @@ export const ManuscriptMutations = BaseComponent => ({
 export const NoteMutations = BaseComponent => ({
   manuscriptId,
   children,
-  refetch,
+  refetch = [],
   ...props
 }) => (
   <Mutation mutation={UPDATE_NOTE} refetchQueries={() => refetch}>

app/components/activity/ActivityDetails.jsx

@@ -4,15 +4,7 @@ import { H2, Button, Action, Link } from '@pubsweet/ui'
 import { th } from '@pubsweet/ui-toolkit'
 import styled from 'styled-components'
 import moment from 'moment'
-import {
-  Buttons,
-  Close,
-  CloseButton,
-  Table,
-  Portal,
-  TextArea,
-  Toggle,
-} from '../ui'
+import { Buttons, CloseModal, Table, Portal, TextArea, Toggle } from '../ui'
 import Mailer from '../mailer'
 import { CREATE_NOTE } from '../operations'
 import EventDescription from './EventDescription'
@@ -99,9 +91,7 @@ const NewNote = ({ close, manuscriptId, message, onChange }) => (
       }
       return (
         <Portal transparent>
-          <Close style={{ margin: 0 }}>
-            <CloseButton onClick={() => close()} />
-          </Close>
+          <CloseModal onClick={() => close()} />
           <H2>Add a note</H2>
           <TextArea
             label="Note (visible only to administrators)"

app/components/activity/ManualCitation.jsx

@@ -47,7 +47,7 @@ const FPage = props => (
 const LPage = props => (
   <TextField className={props.className} label="Last page" {...props.field} />
 )
-const Elocation = props => (
+const ELocation = props => (
   <TextField className={props.className} label="eLocation" {...props.field} />
 )
 const DOI = props => <TextField label="DOI" {...props.field} />
@@ -109,7 +109,7 @@ const CitationForm = ({ values, errors, touched, ...props }) => (
             className={!values.fpage && values.elocationId && 'current'}
             onClick={e => toggleSwitch(e.currentTarget)}
           >
-            Elocation
+            eLocation
           </Action>
         </SmallToggle>
         <Flex>
@@ -125,7 +125,7 @@ const CitationForm = ({ values, errors, touched, ...props }) => (
           />
           <Field
             className={(!values.elocationId || values.fpage) && 'hidden'}
-            component={Elocation}
+            component={ELocation}
             name="elocationId"
           />
         </Flex>

app/components/activity/MetaEdit.jsx

@@ -4,7 +4,7 @@ import styled, { withTheme } from 'styled-components'
 import { th } from '@pubsweet/ui-toolkit'
 import { Action, H2, Button, Icon, TextField } from '@pubsweet/ui'
 import { states } from 'config'
-import { Portal, Buttons, Close, CloseButton, Notification } from '../ui'
+import { Portal, Buttons, CloseModal, Notification } from '../ui'
 import { ManuscriptMutations, NoteMutations } from '../SubmissionMutations'
 import ResolveDuplicates from '../ResolveDuplicates'
 import GrantSearch from '../GrantSearch'
@@ -94,9 +94,7 @@ const MetaEdit = withTheme(
     }
     return (
       <Portal style={{ backgroundColor: theme.colorBackground }} transparent>
-        <Close>
-          <CloseButton onClick={close} />
-        </Close>
+        <CloseModal onClick={close} />
         <React.Fragment>
           {(() => {
             switch (toEdit) {

app/components/citation-search/PubMedSearch.jsx

@@ -8,8 +8,7 @@ import {
   A,
   B,
   Buttons,
-  Close,
-  CloseButton,
+  CloseModal,
   HTMLString,
   Loading,
   LoadingIcon,
@@ -253,11 +252,7 @@ class PubMedSearch extends React.Component {
       <SearchArea>
         {this.state.unmatched && (
           <Portal transparent>
-            <Close>
-              <CloseButton
-                onClick={() => this.setState({ unmatched: false })}
-              />
-            </Close>
+            <CloseModal onClick={() => this.setState({ unmatched: false })} />
             <UnmatchedCitation
               citation={this.handleUnmatched}
               close={() => this.setState({ unmatched: false })}

app/components/dashboard/AdminDashboard.jsx

@@ -16,8 +16,8 @@ const ListTable = styled(Table)`
   }
 `
 const HelpdeskQueue = {
-  'needs submission review': ['submitted'],
-  'needs xml review': ['xml-qa'],
+  'needs submission QA': ['submitted'],
+  'needs xml QA': ['xml-qa'],
   'xml error reported': ['xml-triage'],
   'needs citation': ['xml-complete'],
 }

app/components/mailer/MailerForm.jsx

@@ -4,7 +4,7 @@ import { capitalize } from 'lodash'
 import styled from 'styled-components'
 import { th, override } from '@pubsweet/ui-toolkit'
 import { Button, H2, TextField, CheckboxGroup } from '@pubsweet/ui'
-import { Buttons, TextArea, Portal, Close, CloseButton } from '../ui'
+import { Buttons, TextArea, Portal, CloseModal } from '../ui'
 
 const Recipient = styled.fieldset`
   border: 0;
@@ -48,9 +48,7 @@ const MailerForm = props => {
   })
   return (
     <Portal transparent>
-      <Close style={{ margin: 0 }}>
-        <CloseButton onClick={() => props.close()} />
-      </Close>
+      <CloseModal onClick={() => props.close()} />
       <H2>Send an email</H2>
       <form onSubmit={props.handleSubmit}>
         <Recipient>

app/components/preview-files/FileLightbox.jsx

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import { Action } from '@pubsweet/ui'
 import { th } from '@pubsweet/ui-toolkit'
 import PDFViewer from '../../component-pdf-viewer'
-import { A, Page, Center, Cover, Close, CloseButton } from '../ui'
+import { A, Page, Center, Cover, CloseModal } from '../ui'
 import { ImageTypes } from './'
 
 const Image = styled.img`
@@ -55,11 +55,7 @@ class FilePreview extends React.Component {
           ReactDOM.createPortal(
             <Cover>
               <Page>
-                <Close>
-                  <CloseButton
-                    onClick={() => this.setState({ preview: null })}
-                  />
-                </Close>
+                <CloseModal onClick={() => this.setState({ preview: null })} />
                 {preview.mimeType === 'application/pdf' ? (
                   <PDF>
                     <PDFViewer url={preview.url} />

app/components/review-wizard/ReviewFooter.jsx

 import React from 'react'
 import { withRouter } from 'react-router'
 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,
-  Close,
-  CloseButton,
-} from '../ui'
+import { Action, Button, H2, Icon, RadioGroup } from '@pubsweet/ui'
+import { PreviewFooter, Notification, Buttons, Portal, CloseModal } from '../ui'
 import SubmissionCancel from '../SubmissionCancel'
 import { REVIEW_MANUSCRIPT, GET_REVIEWS, CURRENT_REVIEW } from './operations'
 import ReviewInstructions from './ReviewInstructions'
 import ListErrors from './ListErrors'
 import SubmissionError from './SubmissionError'
 
-const SmallAction = styled(Action)`
-  font-size: ${th('fontSizeBaseSmall')};
-  font-weight: 600;
-`
-const showPopup = button => {
-  button.parentNode.nextElementSibling.classList.remove('hidden')
-}
-
 class ReviewFooter extends React.Component {
   state = {
     report: false,
     approve: false,
     cancel: false,
+    radio: '',
   }
   render() {
     const { currentUser, manuscript, previews, review, history } = this.props
-    const { report, approve, cancel } = this.state
+    const { report, approve, cancel, radio } = this.state
     const { annotations } = review || []
     const { status, teams } = manuscript
     const submitter = teams.find(t => t.role === 'submitter').teamMembers[0]
@@ -71,54 +55,59 @@ class ReviewFooter extends React.Component {
                   </Button>
                 )
               } else if (manuscript.status === 'xml-triage') {
+                const options = [
+                  {
+                    value: 'xml-qa',
+                    label: 'XML QA',
+                  },
+                  {
+                    value: 'xml-review',
+                    label: 'Author review',
+                  },
+                  {
+                    value: 'xml-complete',
+                    label: 'PMC (skip review)',
+                  },
+                ]
                 return (
                   <div>
                     <Button
                       onClick={() => this.setState({ approve: true })}
                       primary
                     >
-                      Approve and route
+                      Approve &amp; route
                     </Button>
                     <Button onClick={() => this.setState({ report: true })}>
                       Ask for correction
                     </Button>
                     {approve && (
                       <Portal transparent>
-                        <Close>
-                          <CloseButton
-                            onClick={() => this.setState({ approve: false })}
-                          />
-                        </Close>
+                        <CloseModal
+                          onClick={() => this.setState({ approve: false })}
+                        />
                         <H2>Errors fixed? Send for:</H2>
-                        <Buttons>
-                          <Button onClick={() => setStatus('xml-qa')} primary>
-                            XML QA
-                          </Button>
+                        <RadioGroup
+                          name="setstatus"
+                          onChange={radio => this.setState({ radio })}
+                          options={options}
+                        />
+                        <Buttons right>
                           <Button
+                            disabled={!radio}
                             onClick={async () => {
-                              await setStatus('xml-review')
-                              history.push('/')
+                              await setStatus(radio)
+                              if (radio === 'xml-qa') {
+                                this.setState({ approve: false })
+                              } else {
+                                history.push(
+                                  `/submission/${manuscript.id}/activity`,
+                                )
+                              }
                             }}
                             primary
                           >
-                            Author review
+                            Confirm &amp; send
                           </Button>
-                          <Button
-                            onClick={e => showPopup(e.currentTarget)}
-                            primary
-                          >
-                            PMC (skip review)
-                          </Button>
-                        </Buttons>
-                        <Notification className="hidden" type="warning">
-                          Are you sure you want to skip author review?{' '}
-                          <SmallAction
-                            onClick={() => setStatus('xml-complete')}
-                          >
-                            I&apos;m sure!
-                          </SmallAction>
-                        </Notification>
-                        <Buttons right>
                           <Button
                             onClick={() => this.setState({ approve: false })}
                           >
@@ -166,9 +155,9 @@ class ReviewFooter extends React.Component {
                         <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?`}
+                            : `Confirm QA has been completed, and approve the web versions of the manuscript?`}
                         </p>
-                        {annotations && (
+                        {annotations && annotations.length > 0 && (
                           <Notification type="warning">
                             {`Errors have been highlighted! Are you sure you want to approve the submission, rather than submitting your error report?`}
                           </Notification>
@@ -197,13 +186,11 @@ class ReviewFooter extends React.Component {
                     )}
                     {report && (
                       <React.Fragment>
-                        {annotations ? (
+                        {annotations && annotations.length > 0 ? (
                           <Portal transparent>
-                            <Close>
-                              <CloseButton
-                                onClick={() => this.setState({ report: false })}
-                              />
-                            </Close>
+                            <CloseModal
+                              onClick={() => this.setState({ report: false })}
+                            />
                             <H2>Send the following errors?</H2>
                             <ListErrors annotations={annotations} />
                             <Buttons right>

app/components/review-wizard/ReviewPage.jsx

@@ -31,10 +31,12 @@ const ReviewPage = ({ match, ...props }) => (
           }
           return (
             <ReviewWithHeader
+              key={`${manuscript.id}${manuscript.status}`}
               manuscript={manuscript}
               match={match}
               reload={() => refetch()}
               review={currentReview}
+              saved={new Date()}
               {...props}
             />
           )

app/components/review-wizard/SubmissionError.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 import { th } from '@pubsweet/ui-toolkit'
 import { Action, H2, CheckboxGroup } from '@pubsweet/ui'
-import { Portal, Close, CloseButton, Loading, LoadingIcon, Toggle } from '../ui'
+import { Portal, CloseModal, Loading, LoadingIcon, Toggle } from '../ui'
 import SubmissionErrorReport, {
   adminOptions,
   Fieldset,
@@ -91,9 +91,7 @@ class SubmissionError extends React.Component {
     const html = manuscript.files.find(file => file.type === 'tempHTML')
     return (
       <Portal transparent>
-        <Close style={{ margin: 0 }}>
-          <CloseButton onClick={close} />
-        </Close>
+        <CloseModal onClick={close} />
         <H2>Report Errors</H2>
         <Toggle>
           <Action

app/components/submission-wizard/CreateInfo.jsx

 import React from 'react'
-import { H3, Link } from '@pubsweet/ui'
+import { H2, H3, Link } from '@pubsweet/ui'
 import { A } from '../ui'
 
 const CreateInfo = ({ currentStep }) => (
   <React.Fragment>
     {currentStep === 0 && (
       <div className="createInfo">
-        <H3>Getting started</H3>
-        <p>
-          {`The first step to submitting a manuscript is to find the manuscript title and citation. We provide a title lookup function which will search Pubmed for a citation. If you can't find the manuscript, enter the information manually.`}
-        </p>
+        <H2>Getting started</H2>
         <H3>What you’ll need to complete the submission</H3>
         <ul>
           <li>Manuscript title</li>
-          <li>Journal name if not in PubMed</li>
+          <li>
+            Journal name, other citation information if not found in PubMed
+          </li>
           <li>Grant numbers</li>
           <li>All manuscript files including supplemental data</li>
         </ul>
         <H3>Overview of the process</H3>
         <ol>
           <li>Submit manuscript</li>
-          <li>Review PDF for completeness</li>
-          <li>Review final web version</li>
+          <li>Review submission for completeness</li>
+          <li>Proof final web version</li>
         </ol>
         <H3>How long it will take</H3>
         <p>
@@ -31,15 +30,15 @@ const CreateInfo = ({ currentStep }) => (
     )}
     {currentStep === 1 && (
       <div className="createInfo">
+        <H2>Preparing files</H2>
         <H3>Which versions of files should I upload?</H3>
         <p>
-          {`Authors can check the `}
+          {`Generally, the accepted peer reviewed version of the manuscript, or the version of record for creative commons licensed articles, should be submitted. Check your journal’s version policy at `}
           <A href="http://www.sherpa.ac.uk/romeo/index.php" target="_blank">
             SHERPA/RoMEO
           </A>
-          {` database for publishers' open access policies.`}
         </p>
-        <H3>How should I label files?</H3>
+        <H3>What is the best way to label files?</H3>
         <p>
           {`The labels are intended to help reviewers put your manuscript together as intended. Provide a label that matches the corresponding file as mentioned in the text.`}
         </p>
@@ -55,33 +54,31 @@ const CreateInfo = ({ currentStep }) => (
     )}
     {currentStep === 2 && (
       <div className="createInfo">
+        <H2>Grants & embargo periods</H2>
         <H3>
           {`What if a grant or project that supported this manuscript is not in the list?`}
         </H3>
         <p>
-          {`If a particular grant or project that you are expecting to see is not listed, please verify that the proper PI surname was entered. You must enter the surname first. In addition to the surname you may enter the initial of the PI&apos;s given name (e.g. 'Smith R', not 'Smith Robert').`}
+          {`If a particular grant or project that you are expecting to see is not listed, please verify that the proper PI name was entered. You should use an initial rather than the full first name, e.g. “R” instead of “Robert”.`}
+        </p>
+        <p>
+          {`If you can’t locate your grant and/or project in the list, click the link above to contact the Helpdesk for help locating your grant. Please provide the grant/contract number, project title, and contact PI's name.`}
         </p>
+        <H3>How to select an embargo period</H3>
         <p>
-          {`If you can’t locate your grant and/or project in the list, contact the Helpdesk to ask for help locating your grant. You'll be asked to provide the grant/contract number, project title, and contact PI's name.`}
+          {`The embargo period lets us know the delay from the time the manuscript is published in the journal until it can be published in Europe PMC. The embargo periods listed are those allowed by your funder. `}
         </p>
-        <H3>Selecting an embargo period</H3>
         <p>
-          {`The embargo period lets us know the delay from the time the manuscript is published in the journal until it can be published in Europe PMC. The embargo periods listed are those allowed by your funder. If there is a conflict between the embargo period required by your journal and those allowed by your funder, please contact the Helpdesk.`}
+          {`If you’re not sure which embargo period to choose, or if there is a conflict between the period required by your journal and those allowed by your funder, please contact the Helpdesk.`}
         </p>
       </div>
     )}
     {currentStep === 3 && (
       <div className="createInfo">
-        <H3>What is a reviewer?</H3>
-        <p>
-          {`The reviewer will have final approval over the web version of this manuscript submission created for Europe PMC. Most commonly, you, the submitter, will also be the reviewer. If you are submitting this manuscript on behalf of someone else, please designate that person as the reviewer.`}
-        </p>
-        <p>
-          {`The designated reviewer must be one of the authors of the manuscript.`}
-        </p>
-        <H3>What if the correct person isn&apos;t listed?</H3>
+        <H2>Selecting a reviewer</H2>
+        <H3>What is the reviewer responsible for?</H3>
         <p>
-          {`The options provided for the reviewer include you and the PIs of your selected grants. If the reviewer should be someone other than you or one of your grant PIs, please select the last option, 'Other reviewer', and enter the person's name and email address in the fields provided.`}
+          {`The reviewer is responsible for approving the final web version of the manuscript which will be released to Europe PMC. The designated reviewer must be one of the authors of the manuscript.`}
         </p>
       </div>
     )}

app/components/submission-wizard/CreatePage.jsx

@@ -226,7 +226,7 @@ class Created extends React.Component {
         : null
     if (manuscript.status === 'INITIAL') {
       return (
-        <SplitPage>
+        <SplitPage withHeader>
           <StepPanel>
             <div>
               <CreatePageHeader currentStep={currentStep} />
@@ -303,7 +303,9 @@ class Created extends React.Component {
                         : ''
                     }
                   >
-                    {this.state.showSearch ? 'Cancel citation change' : 'Next'}
+                    {(this.state.showSearch && 'Cancel citation change') ||
+                      (currentStep === 3 && 'Save & preview') ||
+                      'Next'}
                   </Button>
                   {!this.state.showSearch && (
                     <Button onClick={this.goPrev}>
@@ -376,6 +378,7 @@ const CreatePage = ({ match, ...props }) => (
         <CreatedWithHeader
           manuscript={data.manuscript}
           match={match}
+          saved={new Date()}
           {...props}
         />
       )

app/components/submission-wizard/Submit.jsx

@@ -5,8 +5,7 @@ import { Button, Action, CheckboxGroup, H1, H2, H3, Icon } from '@pubsweet/ui'
 import {
   Page,
   Buttons,
-  Close,
-  CloseButton,
+  CloseModal,
   PreviewPage,
   PreviewFooter,
   PreviewPanel,
@@ -35,10 +34,9 @@ const Alert = withTheme(({ children, theme }) => (
   </Icon>
 ))
 
-const CloseEdit = styled(Close)`
+const CloseEdit = styled(CloseModal)`
   margin: calc(${th('gridUnit')} * 6) auto calc(${th('gridUnit')} * 2);
 `
-
 const ErrorReport = styled.p`
   white-space: pre-wrap;
   font-style: italic;
@@ -164,11 +162,7 @@ class Submit extends React.Component {
             } else if (editing) {
               return (
                 <Page>
-                  <CloseEdit>
-                    <CloseButton
-                      onClick={() => this.setState({ editing: null })}
-                    />
-                  </CloseEdit>
+                  <CloseEdit onClick={() => this.setState({ editing: null })} />
                   {editing.props['data-upload'] ? (
                     <div>
                       <H2>Files</H2>
@@ -367,9 +361,7 @@ class Submit extends React.Component {
           )}
           {reject && (
             <Portal transparent>
-              <Close style={{ margin: 0 }}>
-                <CloseButton onClick={() => this.setState({ reject: false })} />
-              </Close>
+              <CloseModal onClick={() => this.setState({ reject: false })} />
               {currentUser.admin && status === 'submitted' ? (
                 <SubmissionErrorReport
                   checkedBoxes={checkedBoxes}

app/components/submission-wizard/SubmitPage.jsx

@@ -10,7 +10,7 @@ import Submit from './Submit'
 const SubmitWithMutations = ManuscriptMutations(Submit)
 const SubmitWithHeader = SubmissionHeader(SubmitWithMutations)
 
-const DupeCheckSubmitPage = ({ manuscript, ...props }) => {
+const DupeCheckSubmitPage = ({ manuscript, saved, ...props }) => {
   const { id, meta } = manuscript
   const { title, articleIds: aids } = meta
   const articleIds = aids ? aids.map(aid => aid.id) : null
@@ -35,6 +35,7 @@ const DupeCheckSubmitPage = ({ manuscript, ...props }) => {
           <SubmitWithHeader
             duplicates={manuscripts}
             manuscript={manuscript}
+            saved={saved}
             {...props}
           />
         )
@@ -62,6 +63,7 @@ const SubmitPage = ({ match, currentUser, ...props }) => (
           <DupeCheckSubmitPage
             currentUser={currentUser}
             manuscript={data.manuscript}
+            saved={new Date()}
             {...props}
           />
         )
@@ -70,6 +72,7 @@ const SubmitPage = ({ match, currentUser, ...props }) => (
         <SubmitWithHeader
           currentUser={currentUser}
           manuscript={data.manuscript}
+          saved={new Date()}
           {...props}
         />
       )