@manuscripts/style-guide 0.30.16 → 0.30.20

package/dist/cjs/lib/capabilities.js

@@ -13,7 +13,7 @@ var A;
     A["addNote"] = "add-note";
     A["setMainManuscript"] = "set-main-manuscript";
 })(A || (A = {}));
-exports.getLWCapabilities = (project, profile, lwRole, actions) => {
+const getLWCapabilities = (project, profile, lwRole, actions) => {
     const isEditor = () => { var _a; return !!(profile && ((_a = project === null || project === void 0 ? void 0 : project.editors) === null || _a === void 0 ? void 0 : _a.includes(profile.userID))); };
     const isOwner = () => { var _a; return !!(profile && ((_a = project === null || project === void 0 ? void 0 : project.owners) === null || _a === void 0 ? void 0 : _a.includes(profile.userID))); };
     const isWriter = () => { var _a; return !!(profile && ((_a = project === null || project === void 0 ? void 0 : project.writers) === null || _a === void 0 ? void 0 : _a.includes(profile.userID))); };
@@ -54,23 +54,28 @@ exports.getLWCapabilities = (project, profile, lwRole, actions) => {
         accessEditor: true,
     };
 };
-exports.getAllPermitted = () => {
-    const capabilities = exports.getLWCapabilities();
+exports.getLWCapabilities = getLWCapabilities;
+const getAllPermitted = () => {
+    const capabilities = (0, exports.getLWCapabilities)();
     const allAllowed = Object.keys(capabilities).reduce((caps, item) => {
         caps[item] = true;
         return caps;
     }, {});
     return allAllowed;
 };
-const CapabilitiesContext = react_1.default.createContext(exports.getLWCapabilities());
+exports.getAllPermitted = getAllPermitted;
+const CapabilitiesContext = react_1.default.createContext((0, exports.getLWCapabilities)());
 CapabilitiesContext.displayName = 'CapabilitiesContext';
-exports.usePermissions = () => {
+const usePermissions = () => {
     return react_1.default.useContext(CapabilitiesContext);
 };
-exports.useCalcPermission = ({ project, profile, lwRole, permittedActions, }) => {
-    return exports.getLWCapabilities(project, profile, lwRole, permittedActions);
+exports.usePermissions = usePermissions;
+const useCalcPermission = ({ project, profile, lwRole, permittedActions, }) => {
+    return (0, exports.getLWCapabilities)(project, profile, lwRole, permittedActions);
 };
-exports.CapabilitiesProvider = (props) => {
+exports.useCalcPermission = useCalcPermission;
+const CapabilitiesProvider = (props) => {
     const { can } = props;
     return (react_1.default.createElement(CapabilitiesContext.Provider, { value: can }, props === null || props === void 0 ? void 0 : props.children));
 };
+exports.CapabilitiesProvider = CapabilitiesProvider;

package/dist/cjs/lib/comments.js

@@ -16,9 +16,10 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.buildName = exports.buildNoteTree = exports.buildCommentTree = exports.isSavedComment = void 0;
-exports.isSavedComment = (comment) => {
+const isSavedComment = (comment) => {
     return !!comment.createdAt;
 };
+exports.isSavedComment = isSavedComment;
 const oldestFirst = (a, b) => Number(a.createdAt) - Number(b.createdAt);
 const buildCommentsMap = (comments) => {
     const map = new Map();
@@ -84,17 +85,20 @@ const buildNotesTreeMap = (targetsMap) => {
     }
     return map;
 };
-exports.buildCommentTree = (doc, comments, newComment) => {
+const buildCommentTree = (doc, comments, newComment) => {
     if (newComment) {
-        return exports.buildCommentTree(doc, [...comments, newComment]);
+        return (0, exports.buildCommentTree)(doc, [...comments, newComment]);
     }
     const commentsMap = buildCommentsMap(comments);
     const targetsMap = buildTargetsMap(commentsMap);
     return buildCommentsTreeMap(doc, targetsMap);
 };
-exports.buildNoteTree = (comments) => {
+exports.buildCommentTree = buildCommentTree;
+const buildNoteTree = (comments) => {
     const commentsMap = buildCommentsMap(comments);
     const targetsMap = buildTargetsMap(commentsMap);
     return buildNotesTreeMap(targetsMap);
 };
-exports.buildName = (name) => [name.given, name.family].filter((item) => item).join(' ');
+exports.buildNoteTree = buildNoteTree;
+const buildName = (name) => [name.given, name.family].filter((item) => item).join(' ');
+exports.buildName = buildName;

package/dist/cjs/lib/lw-errors-decoder.js

@@ -211,6 +211,26 @@ const errorsExplanations = {
         description: 'The input package is of invalid format. Please contact the source where the submitted article comes from.',
         type: 'Workflow',
     },
+    CI_IMAGES_EXTRACTED: {
+        title: 'Images extracted',
+        description: 'There are images extracted from the Word document file. Please check the quality of these images.',
+        type: 'Workflow',
+    },
+    CP_IMAGES_INCOMPLETE: {
+        title: 'Missing images',
+        description: 'Some images of the article are either missing, incomplete or corrupted.',
+        type: 'Workflow',
+    },
+    CP_IMAGES_UNSUPPORTED_FORMAT: {
+        title: 'Images of unsupported format',
+        description: 'There are images in the document of unsupported format.',
+        type: 'Workflow',
+    },
+    CP_FIGURES_MULTIPLE_IMAGES: {
+        title: 'Figures with multiple images',
+        description: 'There are figures in the docment containing multiple images.',
+        type: 'Workflow',
+    },
     FC_FAIL_QA_CHECKLIST: {
         title: 'Quality report checks outstanding',
         description: 'The Quality report still contains outstanding critical checks that have to be resolved in order to proceed.',
@@ -221,6 +241,36 @@ const errorsExplanations = {
         description: 'The package does not contain any  main manuscript file.',
         type: 'Workflow',
     },
+    CI_ADDITIONAL_WORD_FILES: {
+        title: 'Multiple word files',
+        description: 'The package contains multiple word files. Please have the content of the package adjusted.',
+        type: 'Workflow',
+    },
+    CI_XML_AMENDMENT_FAILED: {
+        title: 'External file references error',
+        description: 'The XML document could not be amended with the external file references.',
+        type: 'Workflow',
+    },
+    CI_IMAGES_NOT_MATCHED: {
+        title: 'Images not found',
+        description: 'The package does not contain all the images refenenced in the document. Please have the content of the package adjusted.',
+        type: 'Workflow',
+    },
+    CI_METADATA_MISSING: {
+        title: 'Metadata missing',
+        description: 'Not all the required metadata could be foundin the content of the package. Please have the content of the package adjusted.',
+        type: 'Workflow',
+    },
+    CI_INVALID_DTD: {
+        title: 'Invalid DTD',
+        description: 'The DTD file is invalid. Please have the content of the package adjusted.',
+        type: 'Workflow',
+    },
+    CI_INVALID_FORMAT: {
+        title: 'Invalid Word file',
+        description: 'The format or version of the Word file is not correct or supported. Please have the content of the package adjusted.',
+        type: 'Workflow',
+    },
     CI_UNSUPPORTED_FORMAT: {
         title: 'Unsupported file format',
         description: 'The package contains a main document file that is not of the word document formats (DOCX/DOC) supported.',

package/dist/cjs/lib/name.js

@@ -16,10 +16,11 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.initials = void 0;
-exports.initials = (name) => name.given
+const initials = (name) => name.given
     ? name.given
         .trim()
         .split(' ')
         .map((part) => part.substr(0, 1).toUpperCase() + '.')
         .join('')
     : '';
+exports.initials = initials;

package/dist/es/components/AffiliationsEditor/AffiliationsEditorView.js

@@ -13,52 +13,22 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import AddAuthor from '@manuscripts/assets/react/AddAuthor';
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import CreatableSelect from 'react-select/creatable';
-import styled, { withTheme } from 'styled-components';
+import { ThemeContext } from 'styled-components';
 import { defaultAuthorFormComponents, } from '../AuthorForm/AuthorFormComponents';
 import { AffiliationsEditorItem } from './AffiliationsEditorItem';
-const Container = styled.div `
-  margin: 0 1.89rem 1rem;
-`;
-const Field = styled.div `
-  margin: 1rem 0;
-`;
-const List = styled.div `
-  margin-bottom: 0.5rem;
-`;
-const AddAffiliationContainer = styled.div `
-  padding-right: 0.71rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-
-  svg {
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-
-  circle,
-  use {
-    fill: ${(props) => props.theme.colors.brand.default};
-  }
-
-  path {
-    mask: none;
-  }
-`;
-const AddAffiliationIndicator = () => (React.createElement(AddAffiliationContainer, null,
-    React.createElement(AddAuthor, null)));
+import { AddAffiliationIndicator, Container, Field, List } from './styles';
 const reactSelectComponents = {
     IndicatorsContainer: AddAffiliationIndicator,
 };
-const AffiliationsEditorView = ({ options, selected, updateAffiliation, removeAuthorAffiliation, handleChoose, handleInputChange, inputValue, theme, components, styleOverrides, }) => {
+const AffiliationsEditorView = ({ options, selected, updateAffiliation, removeAuthorAffiliation, handleChoose, handleInputChange, inputValue, components, styleOverrides, }) => {
     const { Legend } = Object.assign(Object.assign({}, defaultAuthorFormComponents), components);
     const [currentSection, setCurrentSection] = useState('');
     const requestOpen = (id) => {
         setCurrentSection(id === currentSection ? '' : id);
     };
+    const theme = useContext(ThemeContext);
     return (React.createElement(Container, null,
         React.createElement(Legend, null, "Affiliations"),
         React.createElement(Field, null,
@@ -79,4 +49,4 @@ const AffiliationsEditorView = ({ options, selected, updateAffiliation, removeAu
                             provided.zIndex })),
                 } }))));
 };
-export default withTheme(AffiliationsEditorView);
+export default AffiliationsEditorView;

package/dist/es/components/AuthorForm/ContributorRolesSelect.js

@@ -65,7 +65,6 @@ export const ContributorRolesSelect = ({ contributorRoles, createContributorRole
             setSaving(false);
             setFieldValue([...value, contribution._id]);
         }), getOptionValue: (option) => option._id, getOptionLabel: (option) => option.name, onChange: (value) => {
-            const items = value;
-            setFieldValue(items.map((item) => item._id));
+            setFieldValue(value.map((item) => item._id));
         } }));
 };

package/dist/es/components/AuthorForm/index.js

@@ -14,4 +14,3 @@
  * limitations under the License.
  */
 export * from './AuthorForm';
-export * from './AffiliationsSelect';

package/dist/es/components/AuthorsDND/AuthorsDND.js

@@ -13,24 +13,28 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
-import styled from 'styled-components';
+import React, { useContext } from 'react';
+import styled, { ThemeContext } from 'styled-components';
 import DraggableAuthorItem from './DraggableAuthorItem';
 const SidebarList = styled.div `
   flex: 1;
   overflow-y: visible;
 `;
-export const AuthorsDND = ({ authors, selectAuthor, selectedAuthor, handleDrop, getSidebarItemDecorator, components, }) => (React.createElement(SidebarList, null, authors.map((author, index) => {
-    const user = {
-        _id: author.userID,
-    };
-    const authorItem = {
-        _id: author._id,
-        priority: author.priority || null,
-        index,
-    };
-    const decorator = getSidebarItemDecorator
-        ? getSidebarItemDecorator(author._id)
-        : null;
-    return (React.createElement(DraggableAuthorItem, { key: author._id, authorItem: authorItem, onDrop: handleDrop, author: author, authors: authors, user: user, selectedAuthor: selectedAuthor, selectAuthor: selectAuthor, sidebarItemDecorator: decorator, components: components }));
-})));
+const AuthorsDND = ({ authors, selectAuthor, selectedAuthor, handleDrop, getSidebarItemDecorator, components, }) => {
+    const theme = useContext(ThemeContext);
+    return (React.createElement(SidebarList, null, authors.map((author, index) => {
+        const user = {
+            _id: author.userID,
+        };
+        const authorItem = {
+            _id: author._id,
+            priority: author.priority || null,
+            index,
+        };
+        const decorator = getSidebarItemDecorator
+            ? getSidebarItemDecorator(author._id)
+            : null;
+        return (React.createElement(DraggableAuthorItem, { key: author._id, authorItem: authorItem, onDrop: handleDrop, author: author, authors: authors, user: user, selectedAuthor: selectedAuthor, selectAuthor: selectAuthor, sidebarItemDecorator: decorator, components: components, theme: theme }));
+    })));
+};
+export default AuthorsDND;

package/dist/es/components/AuthorsDND/DraggableAuthorItem.js

@@ -19,7 +19,7 @@ import VerticalEllipsis from '@manuscripts/assets/react/VerticalEllipsis';
 import React from 'react';
 import { DragSource, DropTarget, } from 'react-dnd';
 import { findDOMNode } from 'react-dom';
-import styled, { withTheme } from 'styled-components';
+import styled from 'styled-components';
 import { isJointFirstAuthor } from '../../lib/authors';
 import { Avatar } from '../Avatar';
 import { defaultAuthorItemComponents, } from './AuthorItemComponents';
@@ -189,4 +189,4 @@ const dragType = 'authorItem';
 const dragSource = DragSource(dragType, dragSourceSpec, dragSourceCollector);
 const dropTarget = DropTarget(dragType, dropTargetSpec, dropTargetCollector);
 const DraggableAuthorItem = dragSource(dropTarget(AuthorComponent));
-export default withTheme(DraggableAuthorItem);
+export default DraggableAuthorItem;

package/dist/es/components/AuthorsDND/index.js

@@ -13,4 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export * from './AuthorsDND';
+export { default as AuthorsDND } from './AuthorsDND';

package/dist/es/components/Comments/CommentActions.js

@@ -25,11 +25,7 @@ export const CommentActions = ({ id, target, can, isResolved, handleSetResolved,
     const handleRequestEdit = useCallback(() => {
         setIsEditing(true);
     }, [setIsEditing]);
-    const handleRequestDelete = useCallback(() => deleteComment(id, target), [
-        deleteComment,
-        id,
-        target,
-    ]);
+    const handleRequestDelete = useCallback(() => deleteComment(id, target), [deleteComment, id, target]);
     const canResolve = useMemo(() => {
         if (!isProdNote) {
             return ((isOwnComment && (can === null || can === void 0 ? void 0 : can.resolveOwnComment)) || (can === null || can === void 0 ? void 0 : can.resolveOthersComment));

package/dist/es/components/Comments/CommentWrapper.js

@@ -22,7 +22,8 @@ import { CommentUser } from './CommentUser';
 const isOwn = (comment, userId) => {
     var _a;
     return comment.contributions
-        ? (_a = comment.contributions) === null || _a === void 0 ? void 0 : _a.some((c) => c.profileID === userId) : false;
+        ? (_a = comment.contributions) === null || _a === void 0 ? void 0 : _a.some((c) => c.profileID === userId)
+        : false;
 };
 export const CommentWrapper = ({ createKeyword, comment, can, currentUserId, getCollaborator, getKeyword, listCollaborators, listKeywords, saveComment, deleteComment, isReply, isNew, handleCreateReply, handleSetResolved, isProdNote, isSelected, handleRequestSelect, scrollIntoHighlight, children, }) => {
     const [isEditing, setIsEditing] = useState();
@@ -31,10 +32,13 @@ export const CommentWrapper = ({ createKeyword, comment, can, currentUserId, get
         if (isNew) {
             setIsEditing(true);
             if (threadRef.current) {
-                setTimeout(() => { var _a; return (_a = threadRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
-                    block: 'nearest',
-                    inline: 'nearest',
-                }); }, 100);
+                setTimeout(() => {
+                    var _a;
+                    return (_a = threadRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+                        block: 'nearest',
+                        inline: 'nearest',
+                    });
+                }, 100);
             }
         }
     }, [isNew]);
@@ -48,10 +52,7 @@ export const CommentWrapper = ({ createKeyword, comment, can, currentUserId, get
             handleRequestSelect && handleRequestSelect();
         }
     }, [handleRequestSelect]);
-    const isOwnComment = useMemo(() => isOwn(comment, currentUserId), [
-        comment,
-        currentUserId,
-    ]);
+    const isOwnComment = useMemo(() => isOwn(comment, currentUserId), [comment, currentUserId]);
     return (React.createElement(Note, { ref: threadRef, isSelected: isSelected },
         React.createElement(NoteHeader, null,
             React.createElement(NoteTitle, { type: "button", onMouseDown: onTitleMouseDown, onKeyDown: onTitleKeyDown }, comment.contributions && (React.createElement(CommentUser, { contributions: comment.contributions, getCollaboratorById: getCollaborator, displayName: comment.displayName, createdAt: isSavedComment(comment) ? comment.createdAt * 1000 : undefined }))),

package/dist/es/components/FileManager/FileManager.js

@@ -28,11 +28,8 @@ export const FileManager = ({ submissionId, externalFiles, enableDragAndDrop, ca
         const res = yield handleReplace(submissionId, name, file, typeId);
         if (res) {
             dispatch(actions.SHOW_FILE_UPLOADED_ALERT());
-            dispatch(actions.HANDLE_FINISH_UPLOAD());
-        }
-        else {
-            dispatch(actions.HANDLE_FINISH_UPLOAD());
         }
+        dispatch(actions.HANDLE_FINISH_UPLOAD());
         return res;
     }), [handleReplace]);
     const handleUploadFile = useCallback((submissionId, file, designation) => __awaiter(void 0, void 0, void 0, function* () {
@@ -44,11 +41,8 @@ export const FileManager = ({ submissionId, externalFiles, enableDragAndDrop, ca
             const res = yield handleUpload(submissionId, file, designation);
             if (res) {
                 dispatch(actions.SHOW_FILE_UPLOADED_ALERT());
-                dispatch(actions.HANDLE_FINISH_UPLOAD());
-            }
-            else {
-                dispatch(actions.HANDLE_FINISH_UPLOAD());
             }
+            dispatch(actions.HANDLE_FINISH_UPLOAD());
             return res;
         }
         catch (e) {

package/dist/es/components/FileManager/FileSectionItem/DragLayer.js

@@ -16,7 +16,7 @@ function getItemStyles(initialOffset, currentOffset) {
     };
 }
 export const DragLayer = () => {
-    const { itemType, isDragging, item, initialOffset, currentOffset, } = useDragLayer((monitor) => ({
+    const { itemType, isDragging, item, initialOffset, currentOffset } = useDragLayer((monitor) => ({
         item: monitor.getItem(),
         itemType: monitor.getItemType(),
         initialOffset: monitor.getInitialSourceClientOffset(),

package/dist/es/components/FileManager/FileSectionItem/FileSectionItem.js

@@ -13,8 +13,15 @@ export const FileSectionItem = ({ submissionId, externalFile, title, showAttachm
     const fileExtension = externalFile.filename.substring(externalFile.filename.lastIndexOf('.') + 1);
     const designation = namesWithDesignationMap.get(externalFile.designation);
     const isMainManuscript = designation === Designation.MainManuscript;
+    const isSelected = externalFile._id == window.location.hash.substr(1);
     return (React.createElement(Item, { ref: dragRef, className: className, style: style },
-        React.createElement(ItemContainer, { onClick: () => (window.location.hash = isEditor ? `#${externalFile._id}` : '#') },
+        React.createElement(ItemContainer, { onClick: () => {
+                window.location.hash =
+                    isEditor && !isSelected ? `#${externalFile._id}` : '#';
+                if (isSelected) {
+                    window.location.hash = `#${externalFile._id}`;
+                }
+            } },
             React.createElement(FileTypeIcon, { withDot: isMainManuscript, fileExtension: fileExtension, alt: externalFile.filename }),
             React.createElement(FileInfo, { fileExtension: fileExtension, showAttachmentName: showAttachmentName, showDesignationActions: showDesignationActions, submissionAttachmentName: externalFile.filename, title: title, designation: designation, description: externalFile.description, handleChangeDesignation: handleChangeDesignation, submissionId: submissionId, dispatch: dispatch })),
         onClose && (React.createElement(IconCloseButton, { onClick: (e) => {

package/dist/es/components/FileManager/FileSectionState.js

@@ -82,7 +82,7 @@ export const actions = {
         type: ActionTypes.HANDLE_FINISH_UPLOAD,
     }),
     SHOW_FILE_UPLOADED_ALERT: () => ({
-        type: ActionTypes.CLOSE_FILE_UPLOADED_ALERT,
+        type: ActionTypes.SHOW_FILE_UPLOADED_ALERT,
     }),
     CLOSE_FILE_UPLOADED_ALERT: () => ({
         type: ActionTypes.CLOSE_FILE_UPLOADED_ALERT,

package/dist/es/components/FileManager/SelectDesignationActions.js

@@ -5,16 +5,15 @@ import BottomArrowIcon from '../icons/BottomArrowIcon';
 import { PermissionsContext } from './FileManager';
 import { actions } from './FileSectionState';
 import { getUploadFileDesignationList, } from './util';
+const DropdownIndicator = () => (React.createElement(SelectDesignationContainer, null,
+    React.createElement(BottomArrowIcon, null)));
+const reactSelectComponents = {
+    IndicatorsContainer: DropdownIndicator,
+};
 export const SelectDesignationActions = ({ fileExtension, fileSection, dispatch }) => {
-    const DropdownIndicator = () => (React.createElement(SelectDesignationContainer, null,
-        React.createElement(BottomArrowIcon, null)));
-    const reactSelectComponents = {
-        IndicatorsContainer: DropdownIndicator,
-    };
     const can = useContext(PermissionsContext);
-    const handleInputChange = (value) => {
-        if (value) {
-            const selectedDesignation = value;
+    const handleInputChange = (selectedDesignation) => {
+        if (selectedDesignation) {
             if (selectedDesignation && 'value' in selectedDesignation) {
                 dispatch(actions.SELECT_DESIGNATION(selectedDesignation.value));
             }

package/dist/es/components/PdfPreview.js

@@ -1,7 +1,7 @@
-import 'pdfjs-dist/es5/web/pdf_viewer.css';
-import { getDocument, GlobalWorkerOptions } from 'pdfjs-dist/es5/build/pdf';
-import * as pdfjsWorker from 'pdfjs-dist/es5/build/pdf.worker.entry';
-import { EventBus, PDFViewer } from 'pdfjs-dist/es5/web/pdf_viewer';
+import 'pdfjs-dist/web/pdf_viewer.css';
+import { getDocument, GlobalWorkerOptions } from 'pdfjs-dist/build/pdf';
+import * as pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';
+import { EventBus, PDFViewer } from 'pdfjs-dist/web/pdf_viewer';
 import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 GlobalWorkerOptions.workerSrc = pdfjsWorker;

package/dist/es/components/SubmissionInspector/BaseInformation.js

@@ -19,7 +19,8 @@ import AttentionRed from '@manuscripts/assets/react/AttentionRed';
 import { add, format, intervalToDuration } from 'date-fns';
 import React, { useCallback, useMemo, useState } from 'react';
 import DatePicker from 'react-modern-calendar-datepicker';
-import styled from 'styled-components';
+import ReactTooltip from 'react-tooltip';
+import styled, { css } from 'styled-components';
 import { IconTextButton } from '../Button';
 import { Category, Dialog, MessageContainer } from '../Dialog';
 import { SubmissionCriticality } from './types';
@@ -66,11 +67,15 @@ const CalenderDatePicker = ({ submission, handleDateChange, Button }) => {
             } })));
 };
 export const BaseInformation = ({ submission, handleDateChange, userRole }) => {
-    const Button = ({ ref }) => (React.createElement(DateButton, { ref: ref, criticality: submission.currentStep.criticality, disabled: userRole !== 'pe' },
-        format(submission.currentStep.dueDate, 'd MMM, EEEE'),
-        submission.currentStep.criticality ===
-            SubmissionCriticality.DUE_TODAY && React.createElement(AttentionOrange, null),
-        submission.currentStep.criticality === SubmissionCriticality.OVERDUE && (React.createElement(AttentionRed, null))));
+    const Button = ({ ref }) => (React.createElement(Container, null,
+        React.createElement("div", { "data-tip": true, "data-for": submission.id },
+            React.createElement(DateButton, { ref: ref, criticality: submission.currentStep.criticality, disabled: userRole !== 'pe' },
+                format(submission.currentStep.dueDate, 'd MMM, EEEE'),
+                submission.currentStep.criticality ===
+                    SubmissionCriticality.DUE_TODAY && React.createElement(AttentionOrange, null),
+                submission.currentStep.criticality ===
+                    SubmissionCriticality.OVERDUE && React.createElement(AttentionRed, null))),
+        React.createElement(ReactTooltip, { id: submission.id, place: "bottom", effect: "solid", offset: { top: 10 }, className: "tooltip", disable: userRole == 'pe' }, "No permissions to reschedule")));
     return (React.createElement(Grid, null,
         React.createElement(DateLabel, null, "Due date"),
         React.createElement(Value, null,
@@ -107,6 +112,12 @@ const potentialDueDate = (stepDueDate, dueDate, submissionDueDate) => {
     });
     return add(submissionDueDate, duration);
 };
+const Container = styled.div `
+  .tooltip {
+    border-radius: 6px;
+    padding: ${(props) => props.theme.grid.unit * 2}px;
+  }
+`;
 const Grid = styled.div `
   display: grid;
   grid-template-columns: 30% auto;
@@ -129,6 +140,10 @@ const Label = styled.div `
 const DateLabel = styled(Label) `
   color: ${(props) => props.theme.colors.text.primary};
 `;
+const disabledStyle = css `
+  background-color: ${(props) => props.theme.colors.background.secondary} !important;
+  color: ${(props) => props.theme.colors.text.secondary} !important;
+`;
 const DateButton = styled(IconTextButton) `
   border: 1px solid ${(props) => props.theme.colors.border.secondary}!important;
   box-sizing: border-box;
@@ -141,9 +156,20 @@ const DateButton = styled(IconTextButton) `
   width: 100%;
   height: ${(props) => props.theme.grid.unit * 7.5}px;
   justify-content: space-between;
-  background: transparent !important;
   padding: 0 ${(props) => props.theme.grid.unit * 2}px 0
     ${(props) => props.theme.grid.unit * 4}px;
+
+  ${(props) => props.disabled && disabledStyle}
+
+  &:focus {
+    border-color: ${(props) => props.theme.colors.border.field.hover}!important;
+    background-color: ${(props) => props.theme.colors.background.fifth};
+  }
+
+  &:hover {
+    background-color: ${(props) => props.theme.colors.background.fifth};
+  }
+
   svg {
     margin-right: 0;
   }

package/dist/es/components/TextFieldContainer.js

@@ -16,7 +16,7 @@
 import React from 'react';
 import { TextFieldLabel } from './TextField';
 import { TextFieldError, TextFieldErrorItem } from './TextFieldError';
-export const TextFieldContainer = ({ label, error, children, }) => {
+export const TextFieldContainer = ({ label, error, children }) => {
     const childrenWithErrorProp = React.Children.map(children, (child) => React.cloneElement(child, { error }));
     return (React.createElement(React.Fragment, null,
         label ? (React.createElement(TextFieldLabel, null,

package/dist/es/components/TextFieldGroupContainer.js

@@ -17,7 +17,7 @@ import React from 'react';
 import { TextFieldGroup } from './TextField';
 import { TextFieldError, TextFieldErrorItem } from './TextFieldError';
 const hasErrors = (errors) => Object.values(errors).some((error) => !!error);
-export const TextFieldGroupContainer = ({ children, errors, }) => {
+export const TextFieldGroupContainer = ({ children, errors }) => {
     return (React.createElement(TextFieldGroup, null,
         children,
         errors && hasErrors(errors) && (React.createElement(TextFieldError, null, Object.entries(errors).map(([key, error]) => error && (React.createElement(TextFieldErrorItem, { id: `${key}-text-field-error`, key: key }, error)))))));

package/dist/es/lib/lw-errors-decoder.js

@@ -209,6 +209,26 @@ const errorsExplanations = {
         description: 'The input package is of invalid format. Please contact the source where the submitted article comes from.',
         type: 'Workflow',
     },
+    CI_IMAGES_EXTRACTED: {
+        title: 'Images extracted',
+        description: 'There are images extracted from the Word document file. Please check the quality of these images.',
+        type: 'Workflow',
+    },
+    CP_IMAGES_INCOMPLETE: {
+        title: 'Missing images',
+        description: 'Some images of the article are either missing, incomplete or corrupted.',
+        type: 'Workflow',
+    },
+    CP_IMAGES_UNSUPPORTED_FORMAT: {
+        title: 'Images of unsupported format',
+        description: 'There are images in the document of unsupported format.',
+        type: 'Workflow',
+    },
+    CP_FIGURES_MULTIPLE_IMAGES: {
+        title: 'Figures with multiple images',
+        description: 'There are figures in the docment containing multiple images.',
+        type: 'Workflow',
+    },
     FC_FAIL_QA_CHECKLIST: {
         title: 'Quality report checks outstanding',
         description: 'The Quality report still contains outstanding critical checks that have to be resolved in order to proceed.',
@@ -219,6 +239,36 @@ const errorsExplanations = {
         description: 'The package does not contain any  main manuscript file.',
         type: 'Workflow',
     },
+    CI_ADDITIONAL_WORD_FILES: {
+        title: 'Multiple word files',
+        description: 'The package contains multiple word files. Please have the content of the package adjusted.',
+        type: 'Workflow',
+    },
+    CI_XML_AMENDMENT_FAILED: {
+        title: 'External file references error',
+        description: 'The XML document could not be amended with the external file references.',
+        type: 'Workflow',
+    },
+    CI_IMAGES_NOT_MATCHED: {
+        title: 'Images not found',
+        description: 'The package does not contain all the images refenenced in the document. Please have the content of the package adjusted.',
+        type: 'Workflow',
+    },
+    CI_METADATA_MISSING: {
+        title: 'Metadata missing',
+        description: 'Not all the required metadata could be foundin the content of the package. Please have the content of the package adjusted.',
+        type: 'Workflow',
+    },
+    CI_INVALID_DTD: {
+        title: 'Invalid DTD',
+        description: 'The DTD file is invalid. Please have the content of the package adjusted.',
+        type: 'Workflow',
+    },
+    CI_INVALID_FORMAT: {
+        title: 'Invalid Word file',
+        description: 'The format or version of the Word file is not correct or supported. Please have the content of the package adjusted.',
+        type: 'Workflow',
+    },
     CI_UNSUPPORTED_FORMAT: {
         title: 'Unsupported file format',
         description: 'The package contains a main document file that is not of the word document formats (DOCX/DOC) supported.',