#1216, #1220

app/components/submission-wizard/CreatePage.jsx

@@ -221,7 +221,12 @@ class Created extends React.Component {
       data: { updateManuscript },
     } = await this.props.changeCitation(citationData)
     const obj = { showSearch: false }
-    if (updateManuscript.message) obj.error = updateManuscript.message
+    if (updateManuscript.message) {
+      obj.error = updateManuscript.message
+      window.scrollY = 0
+      window.pageYOffset = 0
+      document.scrollingElement.scrollTop = 0
+    }
     this.setState(obj)
   }
   render() {

app/components/submission-wizard/CreateSetupPage.jsx

@@ -47,6 +47,9 @@ class CreateSetup extends React.Component {
       const route = id ? `/submission/${id}/create` : '/create'
       if (errors && errors.length > 0) {
         const error = errors[0]
+        window.scrollY = 0
+        window.pageYOffset = 0
+        document.scrollingElement.scrollTop = 0
         component.setState({ error, id })
         setTimeout(() => {
           history.push(route)

app/components/submission-wizard/Submit.jsx

@@ -114,8 +114,11 @@ class Submit extends React.Component {
       data: { updateManuscript },
     } = await this.props.changeCitation(citation)
     if (updateManuscript.message) {
-      this.setState({ error: updateManuscript.message }, () =>
-        setTimeout(() => this.setState({ editing: -1 }), 4000),
+      this.setState({ citationError: updateManuscript.message }, () =>
+        setTimeout(
+          () => this.setState({ citationError: null, editing: -1 }),
+          4000,
+        ),
       )
     } else {
       this.setState({ editing: -1 })
@@ -268,6 +271,7 @@ class Submit extends React.Component {
               return (
                 <Editing
                   citationData={v => this.changeCitation(v)}
+                  citationError={this.state.citationError}
                   close={() => this.setState({ editing: -1 })}
                   currentStep={currentStep}
                   currentUser={currentUser}

app/components/submission-wizard/SubmitEdit.jsx

@@ -2,7 +2,14 @@ import React from 'react'
 import styled from 'styled-components'
 import { th } from '@pubsweet/ui-toolkit'
 import { Button, H2, H3, Icon } from '@pubsweet/ui'
-import { SplitPage, StepPanel, InfoPanel, Buttons, CloseModal } from '../ui'
+import {
+  SplitPage,
+  StepPanel,
+  InfoPanel,
+  Buttons,
+  CloseModal,
+  Notification,
+} from '../ui'
 import UploadFiles, { SubmissionTypes } from '../upload-files'
 import PubMedSearch, { PreprintSearch } from '../citation-search'
 import { NoteMutations } from '../SubmissionMutations'
@@ -12,11 +19,19 @@ import CreateInfo from './CreateInfo'
 const PubMedWithMutations = NoteMutations(PubMedSearch)
 const PreprintWithMutations = NoteMutations(PreprintSearch)
 
-export const EditCitation = ({ manuscript, ...props }) => {
+export const EditCitation = ({ manuscript, citationError, ...props }) => {
   const { journal, meta, version, organization } = manuscript
   const preprint = organization.name === 'Europe PMC Preprints'
+  if (citationError) {
+    window.scrollY = 0
+    window.pageYOffset = 0
+    document.scrollingElement.scrollTop = 0
+  }
   return (
     <div>
+      {citationError && (
+        <Notification type="error">{citationError}</Notification>
+      )}
       {!props.cancelCheck && (
         <React.Fragment>
           <H2>Citation information</H2>
@@ -94,6 +109,7 @@ const SubmitEdit = BaseComponent =>
         manuscript,
         currentUser,
         openMailer,
+        citationError,
         ...props
       } = this.props
       const { currentStep, funderMailer, cancelCheck, inEPMC } = this.state
@@ -106,19 +122,12 @@ const SubmitEdit = BaseComponent =>
           <StepPanel>
             <div>
               <CloseEdit onClick={() => close()} />
-              {error && (
-                <ErrorMessage>
-                  <Icon color="currentColor" size={2}>
-                    alert_circle
-                  </Icon>
-                  {error}
-                </ErrorMessage>
-              )}
               <BaseComponent
                 addMailer={v => this.setState({ funderMailer: v })}
                 cancelCheck={cancelCheck}
                 changeInfo={v => this.setState(v)}
                 checked
+                citationError={citationError}
                 close={close}
                 currentUser={currentUser}
                 manuscript={manuscript}