Master

app/components/ManuscriptPreview.jsx

@@ -3,7 +3,7 @@ import { Wax } from 'wax-prose-mirror'
 import styled from 'styled-components'
 import { th } from '@pubsweet/ui-toolkit'
 import PDFViewer from '../component-pdf-viewer'
-import { Notification, Loading, LoadingIcon } from './ui'
+import { Notification, Loading, LoadingIcon, A } from './ui'
 
 const Doc = styled.div`
   font-family: ${th('fontReading')};
@@ -34,7 +34,7 @@ class ManuscriptPreview extends React.Component {
     this.refdiv = refdiv
   }
   render() {
-    const { file } = this.props
+    const { file, original } = this.props
     if (!file || this.state.hasError) {
       return (
         <Notification type="error">
@@ -44,19 +44,32 @@ class ManuscriptPreview extends React.Component {
     }
     if (file.type === 'source') {
       return (
-        <Doc id={this.state.html && 'html-preview'} ref={this.setRef}>
-          {this.state.html ? (
-            <Wax
-              readonly
-              renderLayout={({ editor, ...props }) => <div>{editor}</div>}
-              value={this.state.html}
-            />
-          ) : (
-            <Loading>
-              <LoadingIcon />
-            </Loading>
-          )}
-        </Doc>
+        <React.Fragment>
+          <Notification type="warning">
+            {`The preview is intended for the review of content only. If it is not formatted correctly, you can check formatting by `}
+            <A
+              download={original.filename}
+              href={original.url}
+              title="Download the manuscript"
+            >
+              downloading the original source file
+            </A>
+            {'.'}
+          </Notification>
+          <Doc id={this.state.html && 'html-preview'} ref={this.setRef}>
+            {this.state.html ? (
+              <Wax
+                readonly
+                renderLayout={({ editor, ...props }) => <div>{editor}</div>}
+                value={this.state.html}
+              />
+            ) : (
+              <Loading>
+                <LoadingIcon />
+              </Loading>
+            )}
+          </Doc>
+        </React.Fragment>
       )
     } else if (file.mimeType === 'application/pdf') {
       return (
@@ -68,13 +81,13 @@ class ManuscriptPreview extends React.Component {
       )
     }
     return (
-      <Notification type="info">
+      <Notification type="warning">
         {`Unable to generate manuscript preview from ${file.filename}. `}
         {file.mimeType === 'application/pdf' ||
         file.mimeType ===
           'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ? (
           <React.Fragment>
-            Please ensure your file is uncorrupted.
+            {`Please ensure your file is uncorrupted and check content and formatting by `}
           </React.Fragment>
         ) : (
           <React.Fragment>
@@ -82,6 +95,15 @@ class ManuscriptPreview extends React.Component {
             <em>.docx</em>
             {` and `}
             <em>.pdf</em>
+            {` Please ensure your file is uncorrupted and check content and formatting by `}
+            <A
+              download={file.filename}
+              href={file.url}
+              title="Download the manuscript"
+            >
+              downloading the original source file
+            </A>
+            {'.'}
           </React.Fragment>
         )}
       </Notification>