@manuscripts/body-editor 2.7.7 → 2.7.8-LEAN-4213.0

package/dist/es/components/authors/AuthorsModal.js

@@ -14,31 +14,34 @@
  * limitations under the License.
  */
 import { buildBibliographicName, generateID, ObjectTypes, } from '@manuscripts/json-schema';
-import { AddIcon, CloseButton, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, } from '@manuscripts/style-guide';
+import { AddIcon, AddInstitutionIcon, AuthorPlaceholderIcon, CloseButton, Drawer, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SelectedItemsBox, SidebarContent, StyledModal, } from '@manuscripts/style-guide';
 import { isEqual, omit } from 'lodash';
 import React, { useEffect, useReducer, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { arrayReducer } from '../../lib/array-reducer';
 import { authorComparator, } from '../../lib/authors';
-import { AuthorActions } from './AuthorActions';
-import { AuthorAffiliations } from './AuthorAffiliations';
+import { ConfirmationDialog, DialogType } from '../dialog/ConfirmationDialog';
+import FormFooter from '../form/FormFooter';
+import { FormPlaceholder } from '../form/FormPlaceholder';
+import { ModalFormActions } from '../form/ModalFormActions';
 import { AuthorDetailsForm } from './AuthorDetailsForm';
-import { AuthorFormPlaceholder } from './AuthorFormPlaceholder';
 import { AuthorList } from './AuthorList';
-import { RequiredFieldConfirmationDialog } from './RequiredFieldConfirmationDialog';
-import { SaveAuthorConfirmationDialog } from './SaveAuthorConfirmationDialog';
 const AddAuthorButton = styled.div `
   display: flex;
   align-items: center;
-  margin-bottom: ${(props) => props.theme.grid.unit * 4}px;
-  margin-left: ${(props) => props.theme.grid.unit * 4}px;
+  padding: 12px 8px 12px 12px;
   cursor: pointer;
+  &[data-active='true'] {
+    background: ${(props) => props.theme.colors.background.fifth};
+    border: 1px solid ${(props) => props.theme.colors.border.primary};
+    border-left: 0;
+    border-right: 0;
+  }
 `;
 const ActionTitle = styled.div `
   padding-left: ${(props) => props.theme.grid.unit * 2}px;
 `;
 const FormLabel = styled.legend `
-  margin-top: 12px;
   margin-bottom: 12px;
   font: ${(props) => props.theme.font.weight.normal}
     ${(props) => props.theme.font.size.xlarge} /
@@ -50,28 +53,73 @@ const FormLabel = styled.legend `
 const AuthorForms = styled.div `
   padding-left: ${(props) => props.theme.grid.unit * 3}px;
   padding-right: ${(props) => props.theme.grid.unit * 3}px;
+  position: relative;
+  margin-top: 20px;
 `;
 const StyledSidebarContent = styled(SidebarContent) `
   padding: 0;
 `;
-const authorsReducer = arrayReducer((a, b) => a.id === b.id);
-const affiliationsReducer = arrayReducer((a, b) => a.id === b.id);
+const AuthorsSection = styled.div `
+  margin-top: ${(props) => props.theme.grid.unit * 4}px;
+  padding-top: ${(props) => props.theme.grid.unit * 4}px;
+  border-top: 1px solid ${(props) => props.theme.colors.border.tertiary};
+`;
+const AuthorsHeader = styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-direction: column;
+  margin-bottom: ${(props) => props.theme.grid.unit * 2}px;
+`;
+const AuthorsTitle = styled.h3 `
+  margin: 0;
+  font-weight: ${(props) => props.theme.font.weight.normal};
+  font-size: ${(props) => props.theme.font.size.large};
+  font-family: ${(props) => props.theme.font.family.sans};
+  color: ${(props) => props.theme.colors.text.secondary};
+`;
+const AffiliateButton = styled.button `
+  color: ${(props) => props.theme.colors.brand.default};
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  font: ${(props) => props.theme.font.weight.normal}
+    ${(props) => props.theme.font.size.normal}
+    ${(props) => props.theme.font.family.sans};
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: ${(props) => props.theme.grid.unit * 2}px;
+  &:hover {
+    opacity: 0.8;
+  }
+`;
+const StyledModalBody = styled(ModalBody) `
+  position: relative;
+  height: calc(90vh - 40px);
+`;
+const StyledModalSidebarHeader = styled(ModalSidebarHeader) `
+  margin-bottom: 16px;
+`;
+export const authorsReducer = arrayReducer((a, b) => a.id === b.id);
+export const affiliationsReducer = arrayReducer((a, b) => a.id === b.id);
 const normalize = (author) => ({
     id: author.id,
-    role: author.role,
-    affiliations: author.affiliations || [],
+    role: author.role || 'author',
+    affiliations: (author.affiliations || []).sort(),
     bibliographicName: author.bibliographicName,
     email: author.email || '',
     isCorresponding: author.isCorresponding || false,
     ORCIDIdentifier: author.ORCIDIdentifier || '',
-    priority: author.priority,
+    priority: author.priority || 0,
     isJointContributor: author.isJointContributor || false,
-    userID: '',
-    invitationID: '',
+    userID: author.userID || '',
+    invitationID: author.invitationID || '',
     footnote: author.footnote || [],
     corresp: author.corresp || [],
 });
-export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author, onSaveAuthor, onDeleteAuthor, onSaveAffiliation, addNewAuthor = false, }) => {
+export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author, onSaveAuthor, onDeleteAuthor, addNewAuthor = false, }) => {
     const [isOpen, setOpen] = useState(true);
     const [isDisableSave, setDisableSave] = useState(true);
     const [isEmailRequired, setEmailRequired] = useState(false);
@@ -84,38 +132,74 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
     const [nextAuthor, setNextAuthor] = useState(null);
     const [isSwitchingAuthor, setIsSwitchingAuthor] = useState(false);
     const [isCreatingNewAuthor, setIsCreatingNewAuthor] = useState(false);
+    const [showAffiliationDrawer, setShowAffiliationDrawer] = useState(false);
+    const [selectedAffiliations, setSelectedAffiliations] = useState([]);
     const valuesRef = useRef();
     const actionsRef = useRef();
     const [authors, dispatchAuthors] = useReducer(authorsReducer, $authors.sort(authorComparator));
-    const [affiliations, dispatchAffiliations] = useReducer(affiliationsReducer, $affiliations);
+    const [affiliations] = useReducer(affiliationsReducer, $affiliations);
+    const affiliationItems = affiliations.map((affiliation) => ({
+        id: affiliation.id,
+        label: affiliation.institution,
+        country: affiliation.country,
+        city: affiliation.city,
+        state: affiliation.county,
+    }));
+    const [selectedAffiliationIds, setSelectedAffiliationIds] = useState([]);
     useEffect(() => {
         if (addNewAuthor) {
             handleAddAuthor();
         }
     }, [addNewAuthor]);
     const [selection, setSelection] = useState(author);
+    useEffect(() => {
+        const currentAuthor = selection;
+        const relevantAffiliations = affiliationItems.filter((item) => { var _a; return (_a = currentAuthor === null || currentAuthor === void 0 ? void 0 : currentAuthor.affiliations) === null || _a === void 0 ? void 0 : _a.includes(item.id); });
+        setSelectedAffiliations(relevantAffiliations);
+        setSelectedAffiliationIds(relevantAffiliations.map((item) => item.id));
+    }, []);
     const handleSelect = (author) => {
         const values = valuesRef.current;
         setIsCreatingNewAuthor(false);
-        if (values && selection && unSavedChanges && !isDisableSave) {
-            setShowConfirmationDialog(true);
-            setNextAuthor(author);
-        }
-        else if (isDisableSave && unSavedChanges) {
-            setShowRequiredFieldConfirmationDialog(true);
-            setNextAuthor(author);
+        if (values && selection) {
+            const normalizedSelection = normalize(selection);
+            const normalizedValues = normalize(values);
+            const hasChanges = !isEqual(normalizedSelection, normalizedValues);
+            if (hasChanges && !isDisableSave) {
+                setShowConfirmationDialog(true);
+                setNextAuthor(author);
+            }
+            else if (hasChanges && isDisableSave) {
+                setShowRequiredFieldConfirmationDialog(true);
+                setNextAuthor(author);
+            }
+            else {
+                updateAffiliationSelection(author);
+                setSelection(author);
+                setShowAffiliationDrawer(false);
+                setNewAuthor(false);
+            }
         }
         else {
+            setShowAffiliationDrawer(false);
+            updateAffiliationSelection(author);
             setSelection(author);
             setNewAuthor(false);
         }
     };
+    const updateAffiliationSelection = (author) => {
+        const relevantAffiliations = affiliationItems.filter((item) => { var _a; return (_a = author.affiliations) === null || _a === void 0 ? void 0 : _a.includes(item.id); });
+        setSelectedAffiliations(relevantAffiliations);
+        setSelectedAffiliationIds(relevantAffiliations.map((item) => item.id));
+    };
     const handleClose = () => {
-        if (isDisableSave && unSavedChanges) {
-            setShowRequiredFieldConfirmationDialog(true);
-        }
-        else if (unSavedChanges) {
-            setShowConfirmationDialog(true);
+        if (unSavedChanges) {
+            if (isDisableSave) {
+                setShowRequiredFieldConfirmationDialog(true);
+            }
+            else {
+                setShowConfirmationDialog(true);
+            }
         }
         else {
             setShowRequiredFieldConfirmationDialog(false);
@@ -131,6 +215,7 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
             setSelection(nextAuthor);
             setNextAuthor(null);
             setNewAuthor(false);
+            setShowAffiliationDrawer(false);
             setIsCreatingNewAuthor(false);
         }
         else if (isCreatingNewAuthor) {
@@ -142,10 +227,14 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
     const handleCancel = () => {
         handleResetAuthor();
         if (nextAuthor) {
+            const affiliations = nextAuthor.affiliations || [];
+            setSelectedAffiliationIds(affiliations);
+            setSelectedAffiliations(affiliationItems.filter((item) => affiliations.includes(item.id)));
             setSelection(nextAuthor);
             setNextAuthor(null);
             setNewAuthor(false);
             setIsCreatingNewAuthor(false);
+            setUnSavedChanges(false);
         }
         else if (newAuthor && unSavedChanges && !isSwitchingAuthor) {
             setNewAuthor(false);
@@ -157,6 +246,8 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
             setIsCreatingNewAuthor(false);
         }
         setShowConfirmationDialog(false);
+        setShowRequiredFieldConfirmationDialog(false);
+        setShowAffiliationDrawer(false);
     };
     const handleSaveAuthor = (values) => {
         if (!values || !selection) {
@@ -172,6 +263,9 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
         setSelection(author);
         setShowConfirmationDialog(false);
         setNewAuthor(false);
+        setSelectedAffiliationIds([]);
+        setSelectedAffiliations([]);
+        setShowAffiliationDrawer(false);
         setIsCreatingNewAuthor(false);
         dispatchAuthors({
             type: 'update',
@@ -211,6 +305,8 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
             footnote: [],
         };
         setIsSwitchingAuthor(!!selection);
+        setSelectedAffiliations([]);
+        setSelectedAffiliationIds([]);
         setSelection(author);
         setNewAuthor(true);
     };
@@ -218,7 +314,9 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
         const values = valuesRef.current;
         setIsSwitchingAuthor(!!selection);
         setIsCreatingNewAuthor(true);
-        if (values && selection && !isEqual(values, normalize(selection))) {
+        if (values &&
+            selection &&
+            !isEqual(normalize(values), normalize(selection))) {
             if (isDisableSave) {
                 setShowRequiredFieldConfirmationDialog(true);
             }
@@ -229,6 +327,7 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
         }
         else {
             createNewAuthor();
+            setShowAffiliationDrawer(false);
         }
     };
     const handleDeleteAuthor = () => {
@@ -237,37 +336,26 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
         }
         onDeleteAuthor(selection);
         setSelection(undefined);
+        setUnSavedChanges(false);
         dispatchAuthors({
             type: 'delete',
             item: selection,
         });
     };
-    const handleSaveAffiliation = (affiliation) => {
-        onSaveAffiliation(affiliation);
-        dispatchAffiliations({
-            type: 'update',
-            items: [affiliation],
-        });
-    };
-    const handleAddAffiliation = (affiliation) => {
-        if (!valuesRef.current) {
-            return;
-        }
-        const values = valuesRef.current;
-        const affiliations = values.affiliations || [];
-        handleSaveAuthor(Object.assign(Object.assign({}, values), { affiliations: [...affiliations, affiliation.id] }));
-    };
-    const handleRemoveAffiliation = (affiliation) => {
-        var _a;
-        if (!valuesRef.current) {
+    const handleRemoveAffiliation = (affId) => {
+        if (!selection) {
             return;
         }
-        const values = valuesRef.current;
-        handleSaveAuthor(Object.assign(Object.assign({}, values), { affiliations: (_a = values.affiliations) === null || _a === void 0 ? void 0 : _a.filter((i) => i !== affiliation.id) }));
+        const newAffiliations = selectedAffiliationIds.filter((id) => id !== affId);
+        setSelectedAffiliationIds(newAffiliations);
+        setSelectedAffiliations(affiliationItems.filter((item) => newAffiliations.includes(item.id)));
     };
     const handleResetAuthor = () => {
         var _a;
         (_a = actionsRef.current) === null || _a === void 0 ? void 0 : _a.reset();
+        const affiliations = (selection === null || selection === void 0 ? void 0 : selection.affiliations) || [];
+        setSelectedAffiliationIds(affiliations);
+        setSelectedAffiliations(affiliationItems.filter((item) => affiliations.includes(item.id)));
         setShowConfirmationDialog(false);
         setShowRequiredFieldConfirmationDialog(false);
         setUnSavedChanges(false);
@@ -282,60 +370,76 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
     };
     const handleChangeAuthor = (values) => {
         const normalized = omit(normalize(selection), 'priority');
-        const updatedValues = omit(values, 'priority');
-        if (updatedValues.id === normalized.id &&
-            !isEqual(updatedValues, normalized)) {
+        const updatedValues = omit(normalize(values), 'priority');
+        const isSameAuthor = updatedValues.id === normalized.id;
+        const hasChanges = !isEqual(updatedValues, normalized);
+        if (isSameAuthor && hasChanges) {
             setUnSavedChanges(true);
         }
-        const isUnchanged = isEqual(normalize(selection), values);
-        valuesRef.current = values;
+        else {
+            setUnSavedChanges(false);
+        }
+        valuesRef.current = Object.assign(Object.assign({}, updatedValues), { priority: values.priority });
         const { given, family } = values.bibliographicName;
         const { email, isCorresponding } = values;
         const isNameFilled = (given === null || given === void 0 ? void 0 : given.length) && (family === null || family === void 0 ? void 0 : family.length);
-        if (isNameFilled && !isCorresponding && !isUnchanged) {
-            setDisableSave(false);
-        }
-        else if (isCorresponding &&
-            (email === null || email === void 0 ? void 0 : email.length) &&
-            isNameFilled &&
-            !isUnchanged) {
-            setDisableSave(false);
+        if (hasChanges && isNameFilled) {
+            if (isCorresponding) {
+                setDisableSave(!(email === null || email === void 0 ? void 0 : email.length));
+            }
+            else {
+                setDisableSave(false);
+            }
         }
         else {
             setDisableSave(true);
         }
-        if (isCorresponding && !(email === null || email === void 0 ? void 0 : email.length)) {
-            setEmailRequired(true);
-        }
-        else {
-            setEmailRequired(false);
-        }
+        setEmailRequired(isCorresponding);
     };
     const handleShowDeleteDialog = () => {
         setShowDeleteDialog((prev) => !prev);
     };
+    const handleAffiliationSelect = (affiliationId) => {
+        if (!selection) {
+            return;
+        }
+        const currentAffiliations = selectedAffiliationIds || [];
+        const isAlreadySelected = currentAffiliations.includes(affiliationId);
+        const newAffiliations = isAlreadySelected
+            ? currentAffiliations.filter((id) => id !== affiliationId)
+            : [...currentAffiliations, affiliationId];
+        setSelectedAffiliationIds(newAffiliations);
+        setSelectedAffiliations(affiliationItems.filter((item) => newAffiliations.includes(item.id)));
+    };
     return (React.createElement(StyledModal, { isOpen: isOpen, onRequestClose: () => handleClose(), shouldCloseOnOverlayClick: true },
         React.createElement(ModalContainer, null,
             React.createElement(ModalHeader, null,
                 React.createElement(CloseButton, { onClick: () => handleClose(), "data-cy": "modal-close-button" })),
-            React.createElement(ModalBody, null,
+            React.createElement(StyledModalBody, null,
                 React.createElement(ModalSidebar, { "data-cy": "authors-sidebar" },
-                    React.createElement(ModalSidebarHeader, null,
+                    React.createElement(StyledModalSidebarHeader, null,
                         React.createElement(ModalSidebarTitle, null, "Authors")),
                     React.createElement(StyledSidebarContent, null,
-                        React.createElement(AddAuthorButton, { "data-cy": "add-author-button", onClick: handleAddAuthor },
+                        React.createElement(AddAuthorButton, { "data-cy": "add-author-button", onClick: handleAddAuthor, "data-active": isCreatingNewAuthor },
                             React.createElement(AddIcon, { width: 18, height: 18 }),
                             React.createElement(ActionTitle, null, "New Author")),
                         React.createElement(AuthorList, { author: selection, authors: authors, onSelect: handleSelect, onDelete: handleShowDeleteDialog, moveAuthor: handleMoveAuthor, lastSavedAuthor: lastSavedAuthor }))),
                 React.createElement(ScrollableModalContent, { "data-cy": "author-modal-content" }, selection ? (React.createElement(AuthorForms, null,
-                    React.createElement(RequiredFieldConfirmationDialog, { isOpen: showRequiredFieldConfirmationDialog, onSave: () => setShowRequiredFieldConfirmationDialog(false), onCancel: handleCancel }),
-                    React.createElement(SaveAuthorConfirmationDialog, { isOpen: showConfirmationDialog, onSave: handleSave, onCancel: handleCancel }),
-                    React.createElement(AuthorActions, { onSave: () => handleSaveAuthor(valuesRef.current), onDelete: handleDeleteAuthor, showDeleteDialog: showDeleteDialog, handleShowDeleteDialog: handleShowDeleteDialog, newAuthor: newAuthor ||
+                    React.createElement(ConfirmationDialog, { isOpen: showRequiredFieldConfirmationDialog, onPrimary: () => setShowRequiredFieldConfirmationDialog(false), onSecondary: handleCancel, type: DialogType.REQUIRED, entityType: "author" }),
+                    React.createElement(ConfirmationDialog, { isOpen: showConfirmationDialog, onPrimary: handleSave, onSecondary: handleCancel, type: DialogType.SAVE, entityType: "author" }),
+                    React.createElement(ModalFormActions, { type: "author", onSave: () => handleSaveAuthor(valuesRef.current), onDelete: handleDeleteAuthor, showDeleteDialog: showDeleteDialog, handleShowDeleteDialog: handleShowDeleteDialog, newEntity: newAuthor ||
                             (isCreatingNewAuthor &&
                                 !showConfirmationDialog &&
                                 !showRequiredFieldConfirmationDialog), isDisableSave: isDisableSave }),
                     React.createElement(FormLabel, null, "Details"),
-                    React.createElement(AuthorDetailsForm, { values: normalize(selection), onChange: handleChangeAuthor, onSave: handleSaveAuthor, actionsRef: actionsRef, isEmailRequired: isEmailRequired }),
-                    React.createElement(FormLabel, null, "Affiliations"),
-                    React.createElement(AuthorAffiliations, { author: selection, affiliations: affiliations, onSave: handleSaveAffiliation, onAdd: handleAddAffiliation, onRemove: handleRemoveAffiliation }))) : (React.createElement(AuthorFormPlaceholder, null)))))));
+                    React.createElement(AuthorDetailsForm, { values: normalize(selection), onChange: handleChangeAuthor, onSave: handleSaveAuthor, actionsRef: actionsRef, isEmailRequired: isEmailRequired, selectedAffiliations: selectedAffiliationIds }),
+                    React.createElement(AuthorsSection, null,
+                        React.createElement(AuthorsHeader, null,
+                            React.createElement(AuthorsTitle, null, "Authors"),
+                            React.createElement(AffiliateButton, { onClick: () => setShowAffiliationDrawer(true), "data-cy": "affiliate-authors-button" },
+                                React.createElement(AddInstitutionIcon, { width: 16, height: 16 }),
+                                "Assign Institutions")),
+                        React.createElement(SelectedItemsBox, { items: selectedAffiliations, onRemove: handleRemoveAffiliation, placeholder: "No institutions assigned" })),
+                    showAffiliationDrawer && (React.createElement(Drawer, { items: affiliationItems, selectedIds: selectedAffiliationIds, title: "Authors", onSelect: handleAffiliationSelect, onBack: () => setShowAffiliationDrawer(false), width: "100%" })))) : (React.createElement(FormPlaceholder, { type: "author", title: 'Author Details', message: 'Select an author from the list to display their details here.', placeholderIcon: React.createElement(AuthorPlaceholderIcon, null) })))),
+            React.createElement(FormFooter, { onCancel: handleClose }))));
 };

package/dist/es/components/authors/DraggableAuthor.js

@@ -33,9 +33,6 @@ const AuthorContainer = styled.div `
   &:hover,
   &.active {
     background: ${(props) => props.theme.colors.background.fifth};
-  }
-
-  &.active {
     border-color: ${(props) => props.theme.colors.border.primary};
   }
 

package/dist/es/components/dialog/ConfirmationDialog.js

@@ -0,0 +1,79 @@
+import { AttentionOrangeIcon, Category, Dialog } from '@manuscripts/style-guide';
+import React from 'react';
+import styled from 'styled-components';
+const StyledIcon = styled(AttentionOrangeIcon) `
+  margin-right: 8px;
+`;
+const MessageBox = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 90px;
+`;
+export var DialogType;
+(function (DialogType) {
+    DialogType["SAVE"] = "save";
+    DialogType["DELETE"] = "delete";
+    DialogType["REQUIRED"] = "required";
+})(DialogType || (DialogType = {}));
+const getDialogConfig = (dialogType, entityType) => {
+    const configs = {
+        [DialogType.SAVE]: {
+            title: 'Unsaved changes',
+            message: {
+                primary: "You've made changes but not saved them!",
+                secondary: 'Would you like to save or discard your changes?',
+            },
+            buttons: {
+                primary: 'Save',
+                secondary: 'Discard',
+            },
+        },
+        [DialogType.DELETE]: {
+            title: `Delete ${entityType}`,
+            message: {
+                primary: entityType === 'affiliation'
+                    ? 'This action will delete the institution and any links to authors affiliated to it.'
+                    : `Are you sure you want to remove this ${entityType} from the list?`,
+                secondary: 'Do you want to continue?',
+            },
+            buttons: {
+                primary: 'Delete',
+                secondary: 'Cancel',
+            },
+        },
+        [DialogType.REQUIRED]: {
+            title: 'Empty required field',
+            message: {
+                primary: 'A required field has been left empty. If you discard, any updates will not be saved!',
+                secondary: 'Would you like to discard or continue editing?',
+            },
+            buttons: {
+                primary: 'Continue editing',
+                secondary: 'Discard',
+            },
+            minHeight: '90px',
+        },
+    };
+    return configs[dialogType];
+};
+export const ConfirmationDialog = ({ isOpen, type, entityType, onPrimary, onSecondary, }) => {
+    const config = getDialogConfig(type, entityType);
+    const Header = () => (React.createElement(React.Fragment, null,
+        React.createElement(StyledIcon, null),
+        " ",
+        config.title));
+    const Message = () => (React.createElement(MessageBox, null,
+        React.createElement("div", null, config.message.primary),
+        config.message.secondary && React.createElement("div", null, config.message.secondary)));
+    return (React.createElement(Dialog, { isOpen: isOpen, category: Category.confirmation, header: React.createElement(Header, null), message: React.createElement(Message, null), actions: {
+            primary: {
+                action: onPrimary,
+                title: config.buttons.primary,
+            },
+            secondary: {
+                action: onSecondary,
+                title: config.buttons.secondary,
+            },
+        } }));
+};

package/dist/es/components/form/FormFooter.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from 'styled-components';
+const Footer = styled.div `
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 16px 32px;
+  height: 40px;
+  box-shadow: 0px -2px 12px 0px rgba(216, 216, 216, 0.26);
+  border-radius: 0px 0px 8px 8px;
+`;
+const RemoveButton = styled.button `
+  background-color: #0d79d0;
+  color: ${(props) => props.theme.colors.text.onDark};
+  padding: 8px 32px;
+  border-radius: 4px;
+  border: 1px solid #0d79d0;
+  &:hover {
+    background-color: ${(props) => props.theme.colors.background.hover};
+  }
+  cursor: pointer;
+`;
+const FormFooter = ({ onCancel }) => {
+    return (React.createElement(Footer, null,
+        React.createElement(RemoveButton, { onClick: onCancel }, "Close")));
+};
+export default FormFooter;

package/dist/es/components/form/FormPlaceholder.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import styled from 'styled-components';
+const Container = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  overflow-y: auto;
+`;
+const Placeholder = styled.div `
+  margin-bottom: ${(props) => props.theme.grid.unit * 5}px;
+`;
+const Action = styled.div `
+  font-size: ${(props) => props.theme.font.size.xlarge};
+  font-weight: ${(props) => props.theme.font.weight.medium};
+  letter-spacing: -0.5px;
+`;
+const Message = styled.div `
+  max-width: 400px;
+  font-size: ${(props) => props.theme.font.size.xlarge};
+  margin-top: ${(props) => props.theme.grid.unit * 6}px;
+  font-weight: ${(props) => props.theme.font.weight.light};
+  color: ${(props) => props.theme.colors.text.secondary};
+  text-align: center;
+
+  @media (max-width: 850px) {
+    margin-right: ${(props) => props.theme.grid.unit * 5}px;
+    margin-left: ${(props) => props.theme.grid.unit * 5}px;
+    max-width: 350px;
+  }
+`;
+export const FormPlaceholder = ({ type, title, message, placeholderIcon, }) => (React.createElement(Container, { "data-cy": `${type}-details` },
+    React.createElement(Placeholder, null, placeholderIcon),
+    React.createElement(Action, null, title),
+    React.createElement(Message, null, message)));

package/dist/es/components/{authors/AuthorActions.js → form/ModalFormActions.js}

@@ -1,8 +1,8 @@
 import { ButtonGroup, IconButton, PlusIcon } from '@manuscripts/style-guide';
 import React from 'react';
 import styled from 'styled-components';
-import { DeleteAuthorConfirmationDialog } from './DeleteAuthorConfirmationDialog';
-const AuthorActionsContainer = styled.div `
+import { ConfirmationDialog, DialogType } from '../dialog/ConfirmationDialog';
+const ActionsContainer = styled.div `
   display: flex;
 `;
 const StyledButtonGroup = styled(ButtonGroup) `
@@ -14,8 +14,9 @@ const StyledIconButton = styled(IconButton) `
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
-  line-height: 24px;
+  line-height: 1;
   width: auto;
+  height: 24px;
   &:disabled {
     color: #c9c9c9 !important;
     background-color: unset !important;
@@ -25,14 +26,14 @@ const StyledIconButton = styled(IconButton) `
     margin-right: 4px;
   }
 `;
-export const AuthorActions = ({ onSave, onDelete, showDeleteDialog, handleShowDeleteDialog, newAuthor, isDisableSave, }) => {
-    return (React.createElement(AuthorActionsContainer, { "data-cy": "author-action" },
-        React.createElement(DeleteAuthorConfirmationDialog, { isOpen: showDeleteDialog, onDelete: () => {
-                handleShowDeleteDialog();
+export const ModalFormActions = ({ type, onSave, onDelete, showDeleteDialog, handleShowDeleteDialog, newEntity, isDisableSave, }) => {
+    return (React.createElement(ActionsContainer, { "data-cy": `${type}-action` },
+        React.createElement(ConfirmationDialog, { isOpen: showDeleteDialog, onPrimary: () => {
                 onDelete();
-            }, onCancel: () => handleShowDeleteDialog() }),
+                handleShowDeleteDialog();
+            }, onSecondary: handleShowDeleteDialog, type: DialogType.DELETE, entityType: type }),
         React.createElement(StyledButtonGroup, null,
             React.createElement(StyledIconButton, { onClick: onSave, disabled: isDisableSave, type: "submit" },
                 React.createElement(PlusIcon, null),
-                newAuthor ? 'Save Details' : 'Update Details'))));
+                newEntity ? 'Save Details' : 'Update Details'))));
 };