From 76ca2af23931b0072c2bb3884951059056e6bbd4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jarda=20Kot=C4=9B=C5=A1ovec?= <jarda.kotesovec@gmail.com>
Date: Tue, 2 Jul 2024 14:44:18 +0200
Subject: [PATCH] I9992 (#366)

* pkp/pkp-lib#9992 Migrate Announcements to SideModal

* pkp/pkp-lib#9992 clean up announcements moved to SideModal

* pkp/pkp-lib#9992 Composer modals migrated to SideModal

* pkp/pkp-lib#9992 FileAttacher modal clean up

* pkp/pkp-lib#9992 Migrate issue stats modal to SideModal

* pkp/pkp-lib#9992 publication stats migrated to side modal

* pkp/pkp-lib#9992 users stats export modal migrated to side modal

* pkp/pkp-lib#9992 wizard modal migrated to side modal

* pkp/pkp-lib#9992 FieldPreparedContent migrated to side modal

* pkp/pkp-lib#9992 InstitutionsListPanel migrated to side modal, make sure that the form errors are propagated to the modal for other ListPanels

* pkp/pkp-lib#9992 Migrate SubmissionFilesEditModal to openSideModal

* pkp/pkp-lib#9992 HighlightsListPanel migrated to side modal

* pkp/pkp-lib#9992 Migrate ContributorsListPanel to side panel, rename some other modals for more consistent naming

* pkp/pkp-lib#9992 Migrate CatalogListPanel to side modal

* pkp/pkp-lib#9992 Migrate doi list panel to side modal

* pkp/pkp-lib#9992 migrate workflow page to side modal

* pkp/pkp-lib#9992 migrate manageEmails to side modal

* pkp/pkp-lib#9992 Migrate error doi message modals to useDialog

* pkp/pkp-lib#9992 clean up modals in stories, copied over the tpl files

* pkp/pkp-lib#9992 move title directly to modal component when its not dynamic

* pkp/pkp-lib#9992 Update documentation for SideModal and Dialog, refactor Dialog to expose the props for docs

* pkp/pkp-lib#9992 Clean up

* pkp/pkp-lib#9992 Fix SideModal stories template

* pkp/pkp-lib#9992 Address code review feedback
---
 src/components/Composer/Composer.vue          |  45 ++---
 src/components/Composer/FileAttacherModal.vue |  26 +++
 .../Container/ManageEmailsPage.stories.js     |  65 ------
 src/components/Container/ManageEmailsPage.vue |  50 +++--
 src/components/Container/StatsContextPage.vue |  22 +++
 src/components/Container/StatsIssuesPage.vue  |  24 ++-
 .../Container/StatsPublicationsPage.vue       |  29 ++-
 src/components/Container/StatsUsersPage.vue   |  19 +-
 .../Container/SubmissionWizardPage.stories.js |  13 --
 .../Container/SubmissionWizardPage.vue        |  16 +-
 src/components/Container/WorkflowPage.vue     |  20 +-
 src/components/FileAttacher/AttacherModal.vue |  40 ++++
 src/components/FileAttacher/FileAttacher.vue  |  43 ++--
 .../Form/fields/FieldPreparedContent.vue      |  39 ++--
 .../FieldPreparedContentInsertModal.vue       |  33 ++++
 .../announcements/AnnouncementsEditModal.vue  |  26 +++
 .../announcements/AnnouncementsListPanel.vue  |  50 ++---
 .../contributors/ContributorsEditModal.vue    |  26 +++
 .../contributors/ContributorsListPanel.vue    | 170 ++++------------
 .../contributors/ContributorsPreviewModal.vue |  48 +++++
 .../doi/DoiFailedActionDialogBody.vue         |  16 ++
 .../ListPanel/doi/DoiItemVersionModal.vue     | 109 ++++++++++
 .../doi/DoiItemViewErrorDialogBody.vue        |  23 +++
 ...DoiItemViewRegisteredMessageDialogBody.vue |  11 ++
 src/components/ListPanel/doi/DoiListItem.vue  | 187 ++++++------------
 src/components/ListPanel/doi/DoiListPanel.vue | 106 ++++------
 .../ListPanel/doi/DoiStatusInfoModal.vue      |  53 +++++
 .../highlights/HighlightsEditModal.vue        |  26 +++
 .../highlights/HighlightsListPanel.vue        |  48 ++---
 .../institutions/InstitutionsEditModal.vue    |  26 +++
 .../institutions/InstitutionsListPanel.vue    |  45 ++---
 .../SubmissionFilesEditModal.vue              |  26 +++
 .../SubmissionFilesListPanel.vue              |  36 ++--
 .../submissions/CatalogEditModal.vue          |  26 +++
 .../submissions/CatalogListPanel.vue          |  38 ++--
 src/components/Modal/Dialog.mdx               |  30 +++
 .../Modal/Dialog.stories.js}                  |  67 +++++--
 src/components/Modal/Dialog.vue               |  83 ++++----
 src/components/Modal/Modal.mdx                |   2 +-
 src/components/Modal/ModalManager.vue         |  26 ++-
 src/components/Modal/SideModal.mdx            |  14 +-
 src/components/Modal/SideModal.stories.js     |   7 +-
 src/components/Modal/SideModalBody.vue        |   3 -
 src/components/Modal/SideModalLayoutBasic.vue |   7 +
 src/composables/useModal.js                   |  10 +-
 src/composables/useModal.mdx                  |  31 ++-
 src/pages/manageEmails/EditMailableModal.vue  |  69 +++++++
 src/pages/manageEmails/EditTemplateModal.vue  |  29 +++
 .../ContextDownloadReportModal.vue            |  53 +++++
 .../statsIssues/IssueDownloadReportModal.vue  |  58 ++++++
 .../PublicationsDownloadReportModal.vue       | 106 ++++++++++
 src/pages/statsUsers/UserExportModal.vue      |  27 +++
 .../ReconfigureSubmissionModal.vue            |  28 +++
 .../workflow/SelectRevisionDecisionModal.vue  |  26 +++
 src/stores/modalStore.js                      |  48 +++--
 55 files changed, 1581 insertions(+), 723 deletions(-)
 create mode 100644 src/components/Composer/FileAttacherModal.vue
 create mode 100644 src/components/FileAttacher/AttacherModal.vue
 create mode 100644 src/components/Form/fields/FieldPreparedContentInsertModal.vue
 create mode 100644 src/components/ListPanel/announcements/AnnouncementsEditModal.vue
 create mode 100644 src/components/ListPanel/contributors/ContributorsEditModal.vue
 create mode 100644 src/components/ListPanel/contributors/ContributorsPreviewModal.vue
 create mode 100644 src/components/ListPanel/doi/DoiFailedActionDialogBody.vue
 create mode 100644 src/components/ListPanel/doi/DoiItemVersionModal.vue
 create mode 100644 src/components/ListPanel/doi/DoiItemViewErrorDialogBody.vue
 create mode 100644 src/components/ListPanel/doi/DoiItemViewRegisteredMessageDialogBody.vue
 create mode 100644 src/components/ListPanel/doi/DoiStatusInfoModal.vue
 create mode 100644 src/components/ListPanel/highlights/HighlightsEditModal.vue
 create mode 100644 src/components/ListPanel/institutions/InstitutionsEditModal.vue
 create mode 100644 src/components/ListPanel/submissionFiles/SubmissionFilesEditModal.vue
 create mode 100644 src/components/ListPanel/submissions/CatalogEditModal.vue
 create mode 100644 src/components/Modal/Dialog.mdx
 rename src/{composables/useModal.stories.js => components/Modal/Dialog.stories.js} (64%)
 create mode 100644 src/components/Modal/SideModalLayoutBasic.vue
 create mode 100644 src/pages/manageEmails/EditMailableModal.vue
 create mode 100644 src/pages/manageEmails/EditTemplateModal.vue
 create mode 100644 src/pages/statsContext/ContextDownloadReportModal.vue
 create mode 100644 src/pages/statsIssues/IssueDownloadReportModal.vue
 create mode 100644 src/pages/statsPublications/PublicationsDownloadReportModal.vue
 create mode 100644 src/pages/statsUsers/UserExportModal.vue
 create mode 100644 src/pages/submissionWizard/ReconfigureSubmissionModal.vue
 create mode 100644 src/pages/workflow/SelectRevisionDecisionModal.vue

diff --git a/src/components/Composer/Composer.vue b/src/components/Composer/Composer.vue
index e0f33adcd..01e59f498 100644
--- a/src/components/Composer/Composer.vue
+++ b/src/components/Composer/Composer.vue
@@ -253,18 +253,6 @@
 						</div>
 					</template>
 				</field-prepared-content>
-				<modal
-					:close-label="t('common.close')"
-					:name="fileAttacherModalId"
-					:title="attachFilesLabel"
-					:open="isModalOpenedFileAttacher"
-					@close="resetFocusAfterAttachment"
-				>
-					<file-attacher
-						:attachers="attachers"
-						@attached:files="addAttachments"
-					/>
-				</modal>
 				<field-error
 					v-if="errors.attachments"
 					:id="id + '-attachments-error'"
@@ -287,21 +275,18 @@
 import FieldAutosuggestPreset from '@/components/Form/fields/FieldAutosuggestPreset.vue';
 import FieldError from '@/components/Form/FieldError.vue';
 import FieldPreparedContent from '@/components/Form/fields/FieldPreparedContent.vue';
-import FileAttacher from '@/components/FileAttacher/FileAttacher.vue';
-import Modal from '@/components/Modal/Modal.vue';
 import Search from '@/components/Search/Search.vue';
+import FileAttacherModal from './FileAttacherModal.vue';
 import ajaxErrorCallback from '@/mixins/ajaxError';
 import dialog from '@/mixins/dialog';
 import preparedContent from '@/mixins/preparedContent';
-
+import {useModal} from '@/composables/useModal';
 export default {
 	name: 'Composer',
 	components: {
 		FieldAutosuggestPreset,
 		FieldError,
 		FieldPreparedContent,
-		FileAttacher,
-		Modal,
 		Search,
 	},
 	mixins: [ajaxErrorCallback, dialog, preparedContent],
@@ -555,7 +540,6 @@ export default {
 			searchPhrase: '',
 			searchResults: [],
 			showSearchResultCount: 10,
-			isModalOpenedFileAttacher: false,
 		};
 	},
 	computed: {
@@ -586,7 +570,13 @@ export default {
 						icon: 'upload',
 						text: self.t('common.attachFiles'),
 						onAction() {
-							self.isModalOpenedFileAttacher = true;
+							const {openSideModal} = useModal();
+
+							openSideModal(FileAttacherModal, {
+								title: self.attachFilesLabel,
+								attachers: self.attachers,
+								onAddAttachments: self.addAttachments,
+							});
 						},
 					});
 					editor.settings.toolbar += ' | pkpAttachFiles';
@@ -753,7 +743,8 @@ export default {
 				}),
 			];
 			this.emitChange({attachments});
-			this.isModalOpenedFileAttacher = false;
+			const {closeSideModal} = useModal();
+			closeSideModal(FileAttacherModal);
 		},
 
 		/**
@@ -916,20 +907,6 @@ export default {
 			});
 		},
 
-		/**
-		 * Reset the focus when the attachment modal is closed
-		 */
-		resetFocusAfterAttachment() {
-			this.isModalOpenedFileAttacher = false;
-			this.$nextTick(() => {
-				if (this.$refs.attachedFiles) {
-					this.$refs.attachedFiles.focus();
-				} else {
-					this.setFocusIn(this.$el.querySelector('.composer__body'));
-				}
-			});
-		},
-
 		/**
 		 * Search for email templates
 		 */
diff --git a/src/components/Composer/FileAttacherModal.vue b/src/components/Composer/FileAttacherModal.vue
new file mode 100644
index 000000000..7db6be662
--- /dev/null
+++ b/src/components/Composer/FileAttacherModal.vue
@@ -0,0 +1,26 @@
+<template>
+	<SideModalBody>
+		<template #title>
+			{{ title }}
+		</template>
+		<SideModalLayoutBasic>
+			<FileAttacher
+				:attachers="attachers"
+				@attached:files="(...args) => emit('addAttachments', ...args)"
+			/>
+		</SideModalLayoutBasic>
+	</SideModalBody>
+</template>
+
+<script setup>
+import SideModalBody from '@/components/Modal/SideModalBody.vue';
+import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
+import FileAttacher from '@/components/FileAttacher/FileAttacher.vue';
+
+defineProps({
+	title: {type: String, required: true},
+	attachers: {type: Object, required: true},
+});
+
+const emit = defineEmits(['addAttachments']);
+</script>
diff --git a/src/components/Container/ManageEmailsPage.stories.js b/src/components/Container/ManageEmailsPage.stories.js
index 05277005c..7916a7175 100644
--- a/src/components/Container/ManageEmailsPage.stories.js
+++ b/src/components/Container/ManageEmailsPage.stories.js
@@ -97,71 +97,6 @@ const ManageEmailsPageWithDataAndTemplate = {
 				</div>
 			</template>
 		</list-panel>
-		<modal
-			:close-label="t('common.close')"
-			name="mailable"
-			:open="isModalOpenedMailable"
-			:title="currentMailable ? currentMailable.name : ''"
-			@close="closeMailableModal"
-		>
-			<template v-if="currentMailable">
-				<p>{{ currentMailable.description }}</p>
-				<p>
-					Add and edit templates that you would like to make available to the
-					user when they are sending this email. The default will be loaded
-					automatically, and the user will be able to quickly load any other
-					templates you add here.
-				</p>
-				<list-panel :items="currentMailable.emailTemplates">
-					<template #header>
-						<pkp-header>
-							<h3>Templates</h3>
-							<template #actions>
-								<pkp-button @click="openTemplate()">Add Template</pkp-button>
-							</template>
-						</pkp-header>
-					</template>
-					<template #item-subtitle="{item}">
-						{{ localize(item.name) }}
-					</template>
-					<template #item-actions="{item}">
-						<badge v-if="item.key === currentMailable.emailTemplateKey">
-							Default
-						</badge>
-						<pkp-button @click="openTemplate(item)">Edit</pkp-button>
-						<pkp-button
-							v-if="item.key === currentMailable.emailTemplateKey && item.id"
-							:is-warnable="true"
-							@click="confirmResetTemplate(item)"
-						>
-							Reset
-						</pkp-button>
-						<pkp-button
-							v-else-if="item.id"
-							:is-warnable="true"
-							@click="confirmRemoveTemplate(item)"
-						>
-							Remove
-						</pkp-button>
-					</template>
-				</list-panel>
-			</template>
-		</modal>
-		<modal
-			:close-label="t('common.close')"
-			name="template"
-			:open="isModalOpenedTemplate"
-			:title="currentTemplate ? 'Edit Template' : 'Add Template'"
-			@close="closeTemplateModal"
-		>
-			<pkp-form
-				ref="templateForm"
-				class="manageEmails__templateForm"
-				v-bind="currentTemplateForm"
-				@set="updateCurrentTemplateForm"
-				@success="templateSaved"
-			></pkp-form>
-		</modal>
 	</div>
 `,
 	data() {
diff --git a/src/components/Container/ManageEmailsPage.vue b/src/components/Container/ManageEmailsPage.vue
index 6416edaf8..0ca9c0f45 100644
--- a/src/components/Container/ManageEmailsPage.vue
+++ b/src/components/Container/ManageEmailsPage.vue
@@ -4,6 +4,12 @@ import Modal from '../Modal/Modal.vue';
 import PkpFilter from '../Filter/Filter.vue';
 import Search from '../Search/Search.vue';
 import dialog from '../../mixins/dialog';
+import EditMailableModal from '@/pages/manageEmails/EditMailableModal.vue';
+import EditTemplateModal from '@/pages/manageEmails/EditTemplateModal.vue';
+import {useLocalize} from '@/composables/useLocalize';
+import {useModal} from '@/composables/useModal';
+
+const {t} = useLocalize();
 
 export default {
 	name: 'ManageEmailsPage',
@@ -36,8 +42,6 @@ export default {
 			mailables: [],
 			/** The URL to the `/mailables` endpoint in the REST API. */
 			mailablesApiUrl: '',
-			/**  Used to reset focus when a modal is closed.  */
-			resetFocusTo: {},
 			/** The value of the search input.  */
 			searchPhrase: '',
 			/** A "clean" copy of the form to add or edit an `EmailTemplate`. The `currentTemplateForm` is a copy of this form that has been modified to add or edit a specific template. */
@@ -296,8 +300,8 @@ export default {
 		 * Fired when the mailable modal is closed
 		 */
 		closeMailableModal() {
-			this.isModalOpenedMailable = false;
-			this.resetFocus();
+			const {closeSideModal} = useModal();
+			closeSideModal(EditMailableModal);
 			setTimeout(() => {
 				this.currentMailable = {};
 				this.currentTemplate = {};
@@ -315,9 +319,15 @@ export default {
 		openMailable(mailable) {
 			if (mailable.supportsTemplates) {
 				this.getMailable(mailable, (mailable) => {
-					this.resetFocusTo = document.activeElement;
 					this.currentMailable = mailable;
-					this.isModalOpenedMailable = true;
+					const {openSideModal} = useModal();
+					openSideModal(EditMailableModal, {
+						title: mailable ? mailable.name : '',
+						mailable: this.currentMailable,
+						onOpenTemplate: this.openTemplate,
+						onConfirmResetTemplate: this.confirmRemoveTemplate,
+						onConfirmRemoveTemplate: this.confirmRemoveTemplate,
+					});
 				});
 			} else {
 				this.getTemplate(mailable.emailTemplateKey, (template) => {
@@ -334,9 +344,18 @@ export default {
 		 */
 		openTemplate(template) {
 			template = template || {};
-			this.resetFocusTo = document.activeElement;
 			this.currentTemplate = template;
-			this.$nextTick(() => (this.isModalOpenedTemplate = true));
+			const {openSideModal} = useModal();
+			this.$nextTick(() =>
+				openSideModal(EditTemplateModal, {
+					title: this.currentTemplate
+						? t('manager.mailables.editTemplate')
+						: t('manager.emails.addEmail'),
+					currentTemplateForm: this.currentTemplateForm,
+					onUpdateCurrentTemplateForm: this.updateCurrentTemplateForm,
+					onTemplateSaved: this.templateSaved,
+				}),
+			);
 		},
 
 		/**
@@ -355,17 +374,6 @@ export default {
 			this.activeFilters = newFilters;
 		},
 
-		/**
-		 * A helper function to move the focus back to the element
-		 * it was last at. This is usually used with modals to restore
-		 * the focus after a modal is closed.
-		 */
-		resetFocus() {
-			if (this.resetFocusTo) {
-				this.resetFocusTo.focus();
-			}
-		},
-
 		/**
 		 * Setup the form to edit an email template
 		 *
@@ -455,9 +463,9 @@ export default {
 		 * Fired when the email template modal has been closed
 		 */
 		closeTemplateModal() {
-			this.isModalOpenedTemplate = false;
+			const {closeSideModal} = useModal();
+			closeSideModal(EditTemplateModal);
 			if (this.currentMailable.supportsTemplates) {
-				this.resetFocus();
 				setTimeout(() => {
 					this.currentTemplate = {};
 				}, 300);
diff --git a/src/components/Container/StatsContextPage.vue b/src/components/Container/StatsContextPage.vue
index acac6cbdf..4e0948019 100644
--- a/src/components/Container/StatsContextPage.vue
+++ b/src/components/Container/StatsContextPage.vue
@@ -1,5 +1,7 @@
 <script>
 import StatsPublicationsPage from '@/components/Container/StatsPublicationsPage.vue';
+import ContextDownloadReportModal from '@/pages/statsContext/ContextDownloadReportModal.vue';
+import {useModal} from '@/composables/useModal';
 
 export default {
 	name: 'StatsContextPage',
@@ -8,6 +10,26 @@ export default {
 		return {isModalOpenedDownloadReport: false};
 	},
 	methods: {
+		/**
+		 * Open download report modal, for context
+		 */
+		openDownloadReportModal() {
+			const {openSideModal} = useModal();
+			openSideModal(ContextDownloadReportModal, {
+				timelineDescription: this.getTimelineDescription(),
+				dateRangeDescription: this.getDateRangeDescription(),
+				onDownloadReport: this.downloadReport,
+			});
+		},
+
+		/**
+		 * Close download report modal, for context
+		 */
+		closeDownloadReportModal() {
+			const {closeSideModal} = useModal();
+			closeSideModal(ContextDownloadReportModal);
+		},
+
 		/**
 		 * The params to send with each GET request
 		 *
diff --git a/src/components/Container/StatsIssuesPage.vue b/src/components/Container/StatsIssuesPage.vue
index d40b2f2aa..f4bc88403 100644
--- a/src/components/Container/StatsIssuesPage.vue
+++ b/src/components/Container/StatsIssuesPage.vue
@@ -1,6 +1,7 @@
 <script>
 import StatsPublicationsPage from '@/components/Container/StatsPublicationsPage.vue';
-
+import IssueDownloadReportModal from '@/pages/statsIssues/IssueDownloadReportModal.vue';
+import {useModal} from '@/composables/useModal';
 export default {
 	name: 'StatsIssuesPage',
 	extends: StatsPublicationsPage,
@@ -10,6 +11,27 @@ export default {
 		};
 	},
 	methods: {
+		/**
+		 * Open download report modal, for issues
+		 */
+		openDownloadReportModal() {
+			const {openSideModal} = useModal();
+			openSideModal(IssueDownloadReportModal, {
+				searchPhrase: this.searchPhrase,
+				timelineDescription: this.getTimelineDescription(),
+				dateRangeDescription: this.getDateRangeDescription(),
+				onDownloadReport: this.downloadReport,
+			});
+		},
+
+		/**
+		 * Close download report modal, for issues
+		 */
+		closeDownloadReportModal() {
+			const {closeSideModal} = useModal();
+			closeSideModal(IssueDownloadReportModal);
+		},
+
 		/**
 		 * Set items and itemsMax from the API call result
 		 */
diff --git a/src/components/Container/StatsPublicationsPage.vue b/src/components/Container/StatsPublicationsPage.vue
index eaa304a52..4f9218fe3 100644
--- a/src/components/Container/StatsPublicationsPage.vue
+++ b/src/components/Container/StatsPublicationsPage.vue
@@ -8,6 +8,8 @@ import ListItem from '@/components/List/ListItem.vue';
 import Modal from '@/components/Modal/Modal.vue';
 import Tooltip from '@/components/Tooltip/Tooltip.vue';
 import debounce from 'debounce';
+import {useModal} from '@/composables/useModal';
+import PublicationsDownloadReportModal from '@/pages/statsPublications/PublicationsDownloadReportModal.vue';
 
 export default {
 	name: 'StatsPublicationsPage',
@@ -36,7 +38,7 @@ export default {
 			isLoadingTimeline: false,
 			latestTimelineGetRequest: '',
 			isDownloadingReport: false,
-			isModalOpenedDownloadReport: false,
+			geoReportType: null,
 		};
 	},
 	computed: {
@@ -114,6 +116,29 @@ export default {
 		},
 	},
 	methods: {
+		/**
+		 * Open download report modal, for publications
+		 */
+		openDownloadReportModal() {
+			const {openSideModal} = useModal();
+			openSideModal(PublicationsDownloadReportModal, {
+				searchPhrase: this.searchPhrase,
+				timelineDescription: this.getTimelineDescription(),
+				dateRangeDescription: this.getDateRangeDescription(),
+				onDownloadReport: this.downloadReport,
+				getFilterDescription: this.getFilterDescription,
+				geoReportType: this.geoReportType,
+			});
+		},
+
+		/**
+		 * Close download report modal, for publications
+		 */
+		closeDownloadReportModal() {
+			const {closeSideModal} = useModal();
+			closeSideModal(PublicationsDownloadReportModal);
+		},
+
 		/**
 		 * The params to send with each GET request
 		 *
@@ -364,7 +389,7 @@ export default {
 				},
 				complete(r) {
 					this.isDownloadingReport = false;
-					this.$modal.hide('export');
+					this.closeDownloadReportModal();
 				},
 			});
 		},
diff --git a/src/components/Container/StatsUsersPage.vue b/src/components/Container/StatsUsersPage.vue
index 7f8e4aee0..750fca1b4 100644
--- a/src/components/Container/StatsUsersPage.vue
+++ b/src/components/Container/StatsUsersPage.vue
@@ -1,17 +1,25 @@
 <script>
 import StatsPage from './StatsPage.vue';
 import Modal from '@/components/Modal/Modal.vue';
-
+import {useModal} from '@/composables/useModal';
+import UserExportModal from '@/pages/statsUsers/UserExportModal.vue';
 export default {
 	name: 'StatsUsersPage',
 	components: {
 		Modal,
 	},
 	extends: StatsPage,
-	data() {
-		return {isModalOpenedExport: false};
-	},
 	methods: {
+		/** Open Export Modal */
+		openExportModal() {
+			const {openSideModal} = useModal();
+
+			openSideModal(UserExportModal, {
+				usersReportForm: this.components.usersReportForm,
+				onSet: this.set,
+				onLoadExport: this.loadExport,
+			});
+		},
 		/**
 		 * Load the user export
 		 *
@@ -19,7 +27,8 @@ export default {
 		 */
 		loadExport(url) {
 			window.location = url;
-			this.$modal.hide('export');
+			const {closeSideModal} = useModal();
+			closeSideModal(UserExportModal);
 		},
 	},
 };
diff --git a/src/components/Container/SubmissionWizardPage.stories.js b/src/components/Container/SubmissionWizardPage.stories.js
index ce037086f..fac3974e6 100644
--- a/src/components/Container/SubmissionWizardPage.stories.js
+++ b/src/components/Container/SubmissionWizardPage.stories.js
@@ -52,19 +52,6 @@ const SubmissionWizardPageWithDataAndTemplate = {
 				<button class="-linkButton" @click="isModalOpenedConfig = true">
 					Change
 				</button>
-				<modal
-					:close-label="t('common.close')"
-					name="config"
-					:open="isModalOpenedConfig"
-					title="Change Submission Settings"
-					@close="isModalOpenedConfig = false"
-				>
-					<pkp-form
-						v-bind="components.reconfigureSubmission"
-						@set="set"
-						@success="openAlert('Wizard would reload.')"
-					/>
-				</modal>
 			</div>
 			<steps
 				class="submissionWizard__steps"
diff --git a/src/components/Container/SubmissionWizardPage.vue b/src/components/Container/SubmissionWizardPage.vue
index 2503a0620..2bc0c9976 100644
--- a/src/components/Container/SubmissionWizardPage.vue
+++ b/src/components/Container/SubmissionWizardPage.vue
@@ -4,6 +4,7 @@ import ButtonRow from '../ButtonRow/ButtonRow.vue';
 import ContributorsListPanel from '../ListPanel/contributors/ContributorsListPanel.vue';
 import File from '../File/File.vue';
 import Modal from '../Modal/Modal.vue';
+import ReconfigureSubmissionModal from '@/pages/submissionWizard/ReconfigureSubmissionModal.vue';
 import SubmissionFilesListPanel from '../ListPanel/submissionFiles/SubmissionFilesListPanel.vue';
 import ajaxError from '@/mixins/ajaxError';
 import autosave from '@/mixins/autosave';
@@ -12,6 +13,7 @@ import localizeMoment from '@/mixins/localizeMoment';
 import localizeSubmission from '@/mixins/localizeSubmission';
 import localStorage from '@/mixins/localStorage';
 import moment from 'moment';
+import {useModal} from '@/composables/useModal';
 
 export default {
 	components: {
@@ -88,8 +90,6 @@ export default {
 			i18nUnsavedChanges: '',
 			/** **Required** A localized string for the message of the dialog that appears when unsaved changes are found in local storage. */
 			i18nUnsavedChangesMessage: '',
-
-			isModalOpenedConfig: false,
 		};
 	},
 	computed: {
@@ -275,6 +275,18 @@ export default {
 		setInterval(this.setLastAutosaveMessage, 3000);
 	},
 	methods: {
+		/**
+		 * Open reconfigure modal
+		 * */
+		openReconfigureModal() {
+			const {openSideModal} = useModal();
+			openSideModal(ReconfigureSubmissionModal, {
+				reconfigureSubmissionForm: this.components.reconfigureSubmission,
+				onSet: this.set,
+				onReconfigureSubmission: this.reconfigureSubmission,
+			});
+		},
+
 		/**
 		 * Add stale forms that need to be autosaved
 		 */
diff --git a/src/components/Container/WorkflowPage.vue b/src/components/Container/WorkflowPage.vue
index 528890d7e..738e5a101 100644
--- a/src/components/Container/WorkflowPage.vue
+++ b/src/components/Container/WorkflowPage.vue
@@ -9,6 +9,8 @@ import PkpHeader from '@/components/Header/Header.vue';
 import LocalizeSubmission from '@/mixins/localizeSubmission.js';
 import ajaxError from '@/mixins/ajaxError';
 import dialog from '@/mixins/dialog.js';
+import SelectRevisionDecisionModal from '@/pages/workflow/SelectRevisionDecisionModal.vue';
+import {useModal} from '@/composables/useModal';
 
 export default {
 	name: 'WorkflowPage',
@@ -55,8 +57,6 @@ export default {
 			versionConfirmMessage: '',
 			versionConfirmTitle: '',
 			workingPublication: null,
-			isModalOpenedSelectRevisionDecision: false,
-			isModalOpenedSelectRevisionRecommendation: false,
 		};
 	},
 	computed: {
@@ -148,13 +148,25 @@ export default {
 		pkp.eventBus.$on('decision:revisions', (reviewRoundId) => {
 			this.components.selectRevisionDecision.hiddenFields['reviewRoundId'] =
 				reviewRoundId;
-			this.isModalOpenedSelectRevisionDecision = true;
+			const {openSideModal} = useModal();
+			openSideModal(SelectRevisionDecisionModal, {
+				activeForm: this.components.selectRevisionDecision,
+				onSet: this.set,
+				onGoToRevisionDecision: this.goToRevisionDecision,
+			});
 		});
 		pkp.eventBus.$on('recommendation:revisions', (reviewRoundId) => {
 			this.components.selectRevisionRecommendation.hiddenFields[
 				'reviewRoundId'
 			] = reviewRoundId;
-			this.isModalOpenedSelectRevisionRecommendation = true;
+
+			const {openSideModal} = useModal();
+
+			openSideModal(SelectRevisionDecisionModal, {
+				activeForm: this.components.selectRevisionRecommendation,
+				onSet: this.set,
+				onGoToRevisionDecision: this.goToRevisionDecision,
+			});
 		});
 
 		/**
diff --git a/src/components/FileAttacher/AttacherModal.vue b/src/components/FileAttacher/AttacherModal.vue
new file mode 100644
index 000000000..78008c2c5
--- /dev/null
+++ b/src/components/FileAttacher/AttacherModal.vue
@@ -0,0 +1,40 @@
+<template>
+	<SideModalBody>
+		<template #title>
+			{{ title }}
+		</template>
+		<SideModalLayoutBasic>
+			<component
+				:is="Components[currentAttacher.component] || currentAttacher.component"
+				v-if="currentAttacher"
+				v-bind="currentAttacher"
+				@selected:files="(...args) => emit('attachFiles', ...args)"
+				@cancel="(...args) => emit('cancel', ...args)"
+			/>
+		</SideModalLayoutBasic>
+	</SideModalBody>
+</template>
+
+<script setup>
+import FileAttacherFileStage from './FileAttacherFileStage.vue';
+import FileAttacherLibrary from './FileAttacherLibrary.vue';
+import FileAttacherReviewFiles from './FileAttacherReviewFiles.vue';
+import FileAttacherUpload from './FileAttacherUpload.vue';
+
+const Components = {
+	FileAttacherFileStage,
+	FileAttacherLibrary,
+	FileAttacherReviewFiles,
+	FileAttacherUpload,
+};
+
+import SideModalBody from '@/components/Modal/SideModalBody.vue';
+import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
+
+defineProps({
+	title: {type: String, required: true},
+	currentAttacher: {type: Object, required: true},
+});
+
+const emit = defineEmits(['attachFiles', 'cancel']);
+</script>
diff --git a/src/components/FileAttacher/FileAttacher.vue b/src/components/FileAttacher/FileAttacher.vue
index d085b0ab0..dcff81656 100644
--- a/src/components/FileAttacher/FileAttacher.vue
+++ b/src/components/FileAttacher/FileAttacher.vue
@@ -16,41 +16,18 @@
 				</pkp-button>
 			</template>
 		</action-panel>
-		<modal
-			:close-label="t('common.close')"
-			name="attacher"
-			:title="currentAttacher ? currentAttacher.label : ''"
-			:open="isModalOpenedAttacher"
-			@close="isModalOpenedAttacher = false"
-		>
-			<component
-				:is="currentAttacher.component"
-				v-if="currentAttacher"
-				v-bind="currentAttacher"
-				@selected:files="attachFiles"
-				@cancel="cancel"
-			/>
-		</modal>
 	</div>
 </template>
 
 <script>
 import ActionPanel from '../ActionPanel/ActionPanel.vue';
-import FileAttacherFileStage from './FileAttacherFileStage.vue';
-import FileAttacherLibrary from './FileAttacherLibrary.vue';
-import FileAttacherReviewFiles from './FileAttacherReviewFiles.vue';
-import FileAttacherUpload from './FileAttacherUpload.vue';
-import Modal from '../Modal/Modal.vue';
+import AttacherModal from './AttacherModal.vue';
+import {useModal} from '@/composables/useModal';
 
 export default {
 	name: 'FileAttacher',
 	components: {
 		ActionPanel,
-		FileAttacherFileStage,
-		FileAttacherLibrary,
-		FileAttacherReviewFiles,
-		FileAttacherUpload,
-		Modal,
 	},
 	props: {
 		/** An array of file attachers. See guidance in storybook.  */
@@ -67,7 +44,6 @@ export default {
 		return {
 			currentAttacher: null,
 			resetFocusTo: null,
-			isModalOpenedAttacher: false,
 		};
 	},
 	methods: {
@@ -76,14 +52,17 @@ export default {
 		 */
 		attachFiles(files) {
 			this.$emit('attached:files', this.currentAttacher.component, files);
-			this.isModalOpenedAttacher = false;
+			const {closeSideModal} = useModal();
+			closeSideModal(AttacherModal);
 		},
 
 		/**
 		 * Close the current attacher
 		 */
 		cancel() {
-			this.isModalOpenedAttacher = false;
+			const {closeSideModal} = useModal();
+			closeSideModal(AttacherModal);
+
 			this.$nextTick(() => (this.currentAttacher = null));
 		},
 
@@ -94,7 +73,13 @@ export default {
 		 */
 		setAttacher(attacher) {
 			this.currentAttacher = attacher;
-			this.isModalOpenedAttacher = true;
+			const {openSideModal} = useModal();
+			openSideModal(AttacherModal, {
+				title: this.currentAttacher ? this.currentAttacher.label : '',
+				currentAttacher: this.currentAttacher,
+				onAttachFiles: this.attachFiles,
+				onCancel: this.cancel,
+			});
 		},
 	},
 };
diff --git a/src/components/Form/fields/FieldPreparedContent.vue b/src/components/Form/fields/FieldPreparedContent.vue
index e00643345..6e858c8c2 100644
--- a/src/components/Form/fields/FieldPreparedContent.vue
+++ b/src/components/Form/fields/FieldPreparedContent.vue
@@ -8,38 +8,20 @@
 	>
 		<template #footer>
 			<slot name="footer" />
-			<modal
-				:close-label="t('common.close')"
-				:name="preparedContentId"
-				:title="insertModalLabel"
-				:open="isModalPreparedContentOpened"
-				@close="isModalPreparedContentOpened = false"
-			>
-				<insert-content
-					ref="insertContent"
-					:insert-label="insertLabel"
-					:items="preparedContent"
-					:items-label="preparedContentLabel"
-					:search-label="searchLabel"
-					@insert="insert"
-				/>
-			</modal>
 		</template>
 	</field-rich-textarea>
 </template>
 
 <script>
 import FieldRichTextarea from './FieldRichTextarea.vue';
-import InsertContent from '@/components/InsertContent/InsertContent.vue';
-import Modal from '@/components/Modal/Modal.vue';
+import FieldPreparedContentInsertModal from './FieldPreparedContentInsertModal.vue';
 import preparedContent from '../../../mixins/preparedContent';
+import {useModal} from '@/composables/useModal';
 
 export default {
 	name: 'FieldPreparedContent',
 	components: {
 		FieldRichTextarea,
-		InsertContent,
-		Modal,
 	},
 	extends: FieldRichTextarea,
 	mixins: [preparedContent],
@@ -135,7 +117,7 @@ export default {
 						icon: 'plus',
 						text: self.t('common.insertContent'),
 						onAction() {
-							self.isModalPreparedContentOpened = true;
+							self.openInsertModal();
 						},
 					});
 					editor.settings.toolbar += ' | pkpInsert';
@@ -163,12 +145,23 @@ export default {
 		},
 	},
 	methods: {
+		openInsertModal() {
+			const {openSideModal} = useModal(FieldPreparedContentInsertModal);
+			openSideModal(FieldPreparedContentInsertModal, {
+				title: this.insertModalLabel,
+				insertLabel: this.insertLabel,
+				preparedContent: this.preparedContent,
+				preparedContentLabel: this.preparedContentLabel,
+				onInsert: this.insert,
+			});
+		},
 		fieldChanged(name, prop, newVal, localeKey) {
 			this.$emit('change', name, prop, newVal, localeKey);
 		},
 		insert(text) {
-			this.$refs.textarea.$refs.editor.editor.insertContent(text);
-			this.isModalPreparedContentOpened = false;
+			this.$refs.textarea.$refs.editor.getEditor().insertContent(text);
+			const {closeSideModal} = useModal();
+			closeSideModal(FieldPreparedContentInsertModal);
 		},
 	},
 };
diff --git a/src/components/Form/fields/FieldPreparedContentInsertModal.vue b/src/components/Form/fields/FieldPreparedContentInsertModal.vue
new file mode 100644
index 000000000..3686f5ea2
--- /dev/null
+++ b/src/components/Form/fields/FieldPreparedContentInsertModal.vue
@@ -0,0 +1,33 @@
+<template>
+	<SideModalBody>
+		<template #title>
+			{{ title }}
+		</template>
+		<SideModalLayoutBasic>
+			<InsertContent
+				ref="insertContent"
+				:insert-label="insertLabel"
+				:items="preparedContent"
+				:items-label="preparedContentLabel"
+				:search-label="searchLabel"
+				@insert="(...args) => emit('insert', ...args)"
+			/>
+		</SideModalLayoutBasic>
+	</SideModalBody>
+</template>
+
+<script setup>
+import SideModalBody from '@/components/Modal/SideModalBody.vue';
+import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
+import InsertContent from '@/components/InsertContent/InsertContent.vue';
+
+defineProps({
+	title: {type: String, required: true},
+	insertLabel: {type: String, required: true},
+	preparedContent: {type: Array, required: false, default: () => []},
+	preparedContentLabel: {type: String, required: true},
+	searchLabel: {type: String, default: ''},
+});
+
+const emit = defineEmits(['insert']);
+</script>
diff --git a/src/components/ListPanel/announcements/AnnouncementsEditModal.vue b/src/components/ListPanel/announcements/AnnouncementsEditModal.vue
new file mode 100644
index 000000000..1addee7ed
--- /dev/null
+++ b/src/components/ListPanel/announcements/AnnouncementsEditModal.vue
@@ -0,0 +1,26 @@
+<template>
+	<SideModalBody>
+		<template #title>
+			{{ title }}
+		</template>
+		<SideModalLayoutBasic>
+			<PkpForm
+				v-bind="activeForm"
+				@set="(...args) => emit('updateForm', ...args)"
+				@success="(...args) => emit('formSuccess', ...args)"
+			/>
+		</SideModalLayoutBasic>
+	</SideModalBody>
+</template>
+
+<script setup>
+import SideModalBody from '@/components/Modal/SideModalBody.vue';
+import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
+import PkpForm from '@/components/Form/Form.vue';
+
+defineProps({
+	title: {type: String, required: true},
+	activeForm: {type: Object, required: true},
+});
+const emit = defineEmits(['updateForm', 'formSuccess']);
+</script>
diff --git a/src/components/ListPanel/announcements/AnnouncementsListPanel.vue b/src/components/ListPanel/announcements/AnnouncementsListPanel.vue
index 6c49ef018..1f03c23b5 100644
--- a/src/components/ListPanel/announcements/AnnouncementsListPanel.vue
+++ b/src/components/ListPanel/announcements/AnnouncementsListPanel.vue
@@ -41,19 +41,6 @@
 					/>
 				</template>
 			</list-panel>
-			<modal
-				:close-label="t('common.close')"
-				name="form"
-				:title="activeFormTitle"
-				:open="isModalOpenedForm"
-				@close="closeFormModal"
-			>
-				<pkp-form
-					v-bind="activeForm"
-					@set="updateForm"
-					@success="formSuccess"
-				/>
-			</modal>
 		</slot>
 	</div>
 </template>
@@ -61,22 +48,20 @@
 <script>
 import ListPanel from '@/components/ListPanel/ListPanel.vue';
 import Pagination from '@/components/Pagination/Pagination.vue';
-import PkpForm from '@/components/Form/Form.vue';
 import PkpHeader from '@/components/Header/Header.vue';
-import Modal from '@/components/Modal/Modal.vue';
 import Search from '@/components/Search/Search.vue';
 import ajaxError from '@/mixins/ajaxError';
 import dialog from '@/mixins/dialog.js';
 import fetch from '@/mixins/fetch';
 import cloneDeep from 'clone-deep';
+import AnnouncementsEditModal from './AnnouncementsEditModal.vue';
+import {useModal} from '@/composables/useModal';
 
 export default {
 	components: {
 		ListPanel,
 		Pagination,
-		PkpForm,
 		PkpHeader,
-		Modal,
 		Search,
 	},
 	mixins: [dialog, fetch, ajaxError],
@@ -143,7 +128,6 @@ export default {
 		return {
 			activeForm: null,
 			activeFormTitle: '',
-			isModalOpenedForm: false,
 		};
 	},
 	methods: {
@@ -155,7 +139,9 @@ export default {
 		closeFormModal(event) {
 			this.activeForm = null;
 			this.activeFormTitle = '';
-			this.isModalOpenedForm = false;
+			const {closeSideModal} = useModal();
+
+			closeSideModal(AnnouncementsEditModal);
 		},
 
 		/**
@@ -188,7 +174,15 @@ export default {
 			activeForm.method = 'POST';
 			this.activeForm = activeForm;
 			this.activeFormTitle = this.addAnnouncementLabel;
-			this.isModalOpenedForm = true;
+
+			const {openSideModal} = useModal();
+
+			openSideModal(AnnouncementsEditModal, {
+				title: this.activeFormTitle,
+				activeForm,
+				onUpdateForm: this.updateForm,
+				onFormSuccess: this.formSuccess,
+			});
 		},
 
 		/**
@@ -267,7 +261,15 @@ export default {
 			});
 			this.activeForm = activeForm;
 			this.activeFormTitle = this.editAnnouncementLabel;
-			this.isModalOpenedForm = true;
+
+			const {openSideModal} = useModal();
+
+			openSideModal(AnnouncementsEditModal, {
+				title: this.editAnnouncementLabel,
+				activeForm,
+				onUpdateForm: this.updateForm,
+				onFormSuccess: this.formSuccess,
+			});
 		},
 
 		/**
@@ -291,7 +293,11 @@ export default {
 		 * @param {Object} data
 		 */
 		updateForm(formId, data) {
-			let activeForm = {...this.activeForm};
+			if (!this.activeForm) {
+				return;
+			}
+
+			let activeForm = this.activeForm;
 			Object.keys(data).forEach(function (key) {
 				activeForm[key] = data[key];
 			});
diff --git a/src/components/ListPanel/contributors/ContributorsEditModal.vue b/src/components/ListPanel/contributors/ContributorsEditModal.vue
new file mode 100644
index 000000000..1addee7ed
--- /dev/null
+++ b/src/components/ListPanel/contributors/ContributorsEditModal.vue
@@ -0,0 +1,26 @@
+<template>
+	<SideModalBody>
+		<template #title>
+			{{ title }}
+		</template>
+		<SideModalLayoutBasic>
+			<PkpForm
+				v-bind="activeForm"
+				@set="(...args) => emit('updateForm', ...args)"
+				@success="(...args) => emit('formSuccess', ...args)"
+			/>
+		</SideModalLayoutBasic>
+	</SideModalBody>
+</template>
+
+<script setup>
+import SideModalBody from '@/components/Modal/SideModalBody.vue';
+import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
+import PkpForm from '@/components/Form/Form.vue';
+
+defineProps({
+	title: {type: String, required: true},
+	activeForm: {type: Object, required: true},
+});
+const emit = defineEmits(['updateForm', 'formSuccess']);
+</script>
diff --git a/src/components/ListPanel/contributors/ContributorsListPanel.vue b/src/components/ListPanel/contributors/ContributorsListPanel.vue
index 782c8159b..713a821bd 100644
--- a/src/components/ListPanel/contributors/ContributorsListPanel.vue
+++ b/src/components/ListPanel/contributors/ContributorsListPanel.vue
@@ -36,7 +36,7 @@
 								:disabled="isLoading"
 								@click="openPreviewModal"
 							>
-								{{ i18nPreview }}
+								{{ t('contributor.listPanel.preview') }}
 							</pkp-button>
 							<pkp-button
 								v-if="
@@ -47,7 +47,7 @@
 								:disabled="isLoading"
 								@click="openAddModal"
 							>
-								{{ i18nAddContributor }}
+								{{ t('grid.action.addContributor') }}
 							</pkp-button>
 						</template>
 					</pkp-header>
@@ -81,14 +81,14 @@
 							v-if="publication.primaryContactId == item.id"
 							:is-primary="true"
 						>
-							{{ i18nPrimaryContact }}
+							{{ t('author.users.contributor.principalContact') }}
 						</badge>
 						<pkp-button
 							v-else
 							:disabled="isLoading"
 							@click="setPrimaryContact(item.id)"
 						>
-							{{ i18nSetPrimaryContact }}
+							{{ t('author.users.contributor.setPrincipalContact') }}
 						</pkp-button>
 						<pkp-button :disabled="isLoading" @click="openEditModal(item.id)">
 							{{ t('common.edit') }}
@@ -103,74 +103,26 @@
 					</template>
 				</template>
 			</list-panel>
-			<modal
-				:close-label="t('common.close')"
-				:name="formModal"
-				:title="activeFormTitle"
-				:open="isModalOpenedForm"
-				@close="closeFormModal"
-			>
-				<pkp-form
-					v-bind="activeForm"
-					@set="updateForm"
-					@success="formSuccess"
-				/>
-			</modal>
-			<modal
-				:close-label="t('common.close')"
-				:name="previewModal"
-				:title="i18nContributors"
-				:open="isModalOpenedPreview"
-				@close="isModalOpenedPreview = false"
-			>
-				<p>
-					{{ i18nPreviewDescription }}
-				</p>
-				<table class="pkpTable">
-					<thead>
-						<tr>
-							<th>{{ i18nFormat }}</th>
-							<th>{{ i18nDisplay }}</th>
-						</tr>
-					</thead>
-					<tbody>
-						<tr>
-							<td>{{ i18nAbbreviated }}</td>
-							<td>{{ publication.authorsStringShort }}</td>
-						</tr>
-						<tr>
-							<td>
-								{{ i18nPublicationLists }}
-							</td>
-							<td>{{ publication.authorsStringIncludeInBrowse }}</td>
-						</tr>
-						<tr>
-							<td>{{ i18nFull }}</td>
-							<td>{{ publication.authorsString }}</td>
-						</tr>
-					</tbody>
-				</table>
-			</modal>
 		</slot>
 	</div>
 </template>
 
 <script>
 import ListPanel from '@/components/ListPanel/ListPanel.vue';
-import Modal from '@/components/Modal/Modal.vue';
 import Orderer from '@/components/Orderer/Orderer.vue';
-import PkpForm from '@/components/Form/Form.vue';
 import PkpHeader from '@/components/Header/Header.vue';
+import ContributorsPreviewModal from './ContributorsPreviewModal.vue';
+import ContributorsEditModal from './ContributorsEditModal.vue';
+
 import ajaxError from '@/mixins/ajaxError';
 import dialog from '@/mixins/dialog.js';
 import cloneDeep from 'clone-deep';
+import {useModal} from '@/composables/useModal';
 
 export default {
 	components: {
 		ListPanel,
-		Modal,
 		Orderer,
-		PkpForm,
 		PkpHeader,
 	},
 	mixins: [ajaxError, dialog],
@@ -205,66 +157,6 @@ export default {
 			type: Object,
 			required: true,
 		},
-		i18nAbbreviated: {
-			type: String,
-			required: true,
-		},
-		i18nAddContributor: {
-			type: String,
-			required: true,
-		},
-		i18nConfirmDelete: {
-			type: String,
-			required: true,
-		},
-		i18nContributors: {
-			type: String,
-			required: true,
-		},
-		i18nDisplay: {
-			type: String,
-			required: true,
-		},
-		i18nDeleteContributor: {
-			type: String,
-			required: true,
-		},
-		i18nEditContributor: {
-			type: String,
-			required: true,
-		},
-		i18nFormat: {
-			type: String,
-			required: true,
-		},
-		i18nFull: {
-			type: String,
-			required: true,
-		},
-		i18nPreview: {
-			type: String,
-			required: true,
-		},
-		i18nPreviewDescription: {
-			type: String,
-			required: true,
-		},
-		i18nPrimaryContact: {
-			type: String,
-			required: true,
-		},
-		i18nPublicationLists: {
-			type: String,
-			required: true,
-		},
-		i18nSaveOrder: {
-			type: String,
-			required: true,
-		},
-		i18nSetPrimaryContact: {
-			type: String,
-			required: true,
-		},
 	},
 	data() {
 		return {
@@ -273,8 +165,6 @@ export default {
 			isOrdering: false,
 			isLoading: false,
 			itemsBeforeReordering: null,
-			isModalOpenedForm: false,
-			isModalOpenedPreview: false,
 		};
 	},
 	computed: {
@@ -319,7 +209,9 @@ export default {
 		 * @return {String}
 		 */
 		orderingLabel() {
-			return this.isOrdering ? this.i18nSaveOrder : this.t('common.order');
+			return this.isOrdering
+				? this.t('grid.action.saveOrdering')
+				: this.t('common.order');
 		},
 	},
 	methods: {
@@ -338,7 +230,8 @@ export default {
 		 * @param {Object} event
 		 */
 		closeFormModal(event) {
-			this.isModalOpenedForm = false;
+			const {closeSideModal} = useModal();
+			closeSideModal(ContributorsEditModal);
 			this.activeForm = null;
 			this.activeFormTitle = '';
 		},
@@ -377,7 +270,10 @@ export default {
 			this.isLoading = true;
 
 			this.getAndUpdatePublication(() => {
-				this.isModalOpenedPreview = true;
+				const {openSideModal} = useModal();
+				openSideModal(ContributorsPreviewModal, {
+					publication: this.publication,
+				});
 			});
 		},
 
@@ -389,8 +285,14 @@ export default {
 			activeForm.action = this.contributorsApiUrl;
 			activeForm.method = 'POST';
 			this.activeForm = activeForm;
-			this.activeFormTitle = this.i18nAddContributor;
-			this.isModalOpenedForm = true;
+			this.activeFormTitle = this.t('grid.action.addContributor');
+			const {openSideModal} = useModal();
+			openSideModal(ContributorsEditModal, {
+				title: this.activeFormTitle,
+				activeForm: this.activeForm,
+				onUpdateForm: this.updateForm,
+				onFormSuccess: this.formSuccess,
+			});
 		},
 
 		/**
@@ -403,13 +305,13 @@ export default {
 
 			this.openDialog({
 				name: 'delete',
-				title: this.i18nDeleteContributor,
-				message: this.replaceLocaleParams(this.i18nConfirmDelete, {
+				title: this.t('grid.action.deleteContributor'),
+				message: this.t('grid.action.deleteContributor.confirmationMessage', {
 					name: contributor.fullName,
 				}),
 				actions: [
 					{
-						label: this.i18nDeleteContributor,
+						label: this.t('grid.action.deleteContributor'),
 						isWarnable: true,
 						callback: (close) => {
 							this.isLoading = true;
@@ -485,8 +387,14 @@ export default {
 						return field;
 					});
 					this.activeForm = activeForm;
-					this.activeFormTitle = this.i18nEditContributor;
-					this.isModalOpenedForm = true;
+					this.activeFormTitle = this.t('grid.action.edit');
+					const {openSideModal} = useModal();
+					openSideModal(ContributorsEditModal, {
+						title: this.activeFormTitle,
+						activeForm: this.activeForm,
+						onUpdateForm: this.updateForm,
+						onFormSuccess: this.formSuccess,
+					});
 				},
 				complete(r) {
 					this.isLoading = false;
@@ -501,7 +409,11 @@ export default {
 		 * @param {Object} data
 		 */
 		updateForm(formId, data) {
-			let activeForm = {...this.activeForm};
+			if (!this.activeForm) {
+				return;
+			}
+
+			let activeForm = this.activeForm;
 			Object.keys(data).forEach(function (key) {
 				activeForm[key] = data[key];
 			});
diff --git a/src/components/ListPanel/contributors/ContributorsPreviewModal.vue b/src/components/ListPanel/contributors/ContributorsPreviewModal.vue
new file mode 100644
index 000000000..9496b7576
--- /dev/null
+++ b/src/components/ListPanel/contributors/ContributorsPreviewModal.vue
@@ -0,0 +1,48 @@
+<template>
+	<SideModalBody>
+		<template #title>
+			{{ t('submission.contributors') }}
+		</template>
+		<SideModalLayoutBasic>
+			<p>
+				{{ t('contributor.listPanel.preview.description') }}
+			</p>
+			<table class="pkpTable">
+				<thead>
+					<tr>
+						<th>{{ t('contributor.listPanel.preview.format') }}</th>
+						<th>{{ t('contributor.listPanel.preview.display') }}</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<td>{{ t('contributor.listPanel.preview.abbreviated') }}</td>
+						<td>{{ publication.authorsStringShort }}</td>
+					</tr>
+					<tr>
+						<td>
+							{{ t('contributor.listPanel.preview.publicationLists') }}
+						</td>
+						<td>{{ publication.authorsStringIncludeInBrowse }}</td>
+					</tr>
+					<tr>
+						<td>{{ t('contributor.listPanel.preview.full') }}</td>
+						<td>{{ publication.authorsString }}</td>
+					</tr>
+				</tbody>
+			</table>
+		</SideModalLayoutBasic>
+	</SideModalBody>
+</template>
+
+<script setup>
+import SideModalBody from '@/components/Modal/SideModalBody.vue';
+import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
+import {useLocalize} from '@/composables/useLocalize';
+
+defineProps({
+	publication: {type: Object, required: true},
+});
+
+const {t} = useLocalize();
+</script>
diff --git a/src/components/ListPanel/doi/DoiFailedActionDialogBody.vue b/src/components/ListPanel/doi/DoiFailedActionDialogBody.vue
new file mode 100644
index 000000000..6f55400b9
--- /dev/null
+++ b/src/components/ListPanel/doi/DoiFailedActionDialogBody.vue
@@ -0,0 +1,16 @@
+<template>
+	<p>{{ t('manager.dois.update.partialFailure') }}</p>
+	<ul class="list-inside list-disc">
+		<li v-for="(errorMessage, index) in failedDoiActions" :key="index">
+			{{ errorMessage }}
+		</li>
+	</ul>
+</template>
+
+<script setup>
+import {useLocalize} from '@/composables/useLocalize';
+defineProps({
+	failedDoiActions: {type: Array, required: true},
+});
+const {t} = useLocalize();
+</script>
diff --git a/src/components/ListPanel/doi/DoiItemVersionModal.vue b/src/components/ListPanel/doi/DoiItemVersionModal.vue
new file mode 100644
index 000000000..87e112241
--- /dev/null
+++ b/src/components/ListPanel/doi/DoiItemVersionModal.vue
@@ -0,0 +1,109 @@
+<template>
+	<SideModalBody>
+		<template #title>
+			{{ t('doi.manager.versions.modalTitle') }}
+		</template>
+		<SideModalLayoutBasic>
+			<div
+				v-for="version in item.versions"
+				:key="version.id"
+				class="doiListItem__versionContainer"
+			>
+				<a
+					:href="version.urlPublished"
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					{{ getVersionHeader(version) }}
+				</a>
+				<pkp-table
+					:columns="doiListColumns"
+					:rows="
+						item.doiObjects.filter(
+							(doiObject) => doiObject.versionNumber === version.versionNumber,
+						)
+					"
+				>
+					<template #default="{row}">
+						<table-cell :column="doiListColumns[0]" :row="row">
+							<label :for="row.uid">{{ row.displayType }}</label>
+						</table-cell>
+						<table-cell :column="doiListColumns[1]" :row="row">
+							<input
+								:id="row.uid"
+								v-model="
+									mutableDois.find((doi) => doi.uid === row.uid).identifier
+								"
+								class="pkpFormField__input pkpFormField--text__input"
+								type="text"
+								:readonly="!(isEditingDois && !isSaving)"
+							/>
+						</table-cell>
+					</template>
+				</pkp-table>
+			</div>
+
+			<div class="doiListItem__versionContainer--actionsBar">
+				<spinner v-if="isSaving" />
+				<pkp-button
+					:is-disabled="isDeposited || isSaving"
+					@click="
+						(...args) =>
+							isEditingDois
+								? emit('saveDois', ...args)
+								: emit('editDois', ...args)
+					"
+				>
+					{{ isEditingDois ? t('common.save') : t('common.edit') }}
+				</pkp-button>
+			</div>
+		</SideModalLayoutBasic>
+	</SideModalBody>
+</template>
+
+<script setup>
+import SideModalBody from '@/components/Modal/SideModalBody.vue';
+import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
+import PkpTable from '@/components/Table/Table.vue';
+import TableCell from '@/components/Table/TableCell.vue';
+
+import {useLocalize} from '@/composables/useLocalize';
+defineProps({
+	isSaving: {type: Boolean, required: false, default: false},
+	isDeposited: {type: Boolean, required: false, default: false},
+	item: {type: Object, required: true},
+	doiListColumns: {type: Array, required: true},
+	isEditingDois: {type: Boolean, required: true},
+	mutableDois: {type: Array, required: true},
+});
+const {t} = useLocalize();
+
+const emit = defineEmits(['saveDois', 'editDois']);
+/**
+ * @param {PublicationVersionInfo} version
+ */
+function getVersionHeader(version) {
+	const dateInfo =
+		version.datePublished !== null
+			? `(${version.datePublished})`
+			: t('publication.status.unpublished');
+	return `${t('publication.version', {
+		version: version.versionNumber,
+	})} ${dateInfo}`;
+}
+</script>
+
+<style lang="less">
+@import '../../../styles/_import';
+
+.doiListItem__versionContainer {
+	margin-top: 0.5rem;
+}
+
+.doiListItem__versionContainer--actionsBar {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	margin-top: 0.5rem;
+}
+</style>
diff --git a/src/components/ListPanel/doi/DoiItemViewErrorDialogBody.vue b/src/components/ListPanel/doi/DoiItemViewErrorDialogBody.vue
new file mode 100644
index 000000000..c1152e19f
--- /dev/null
+++ b/src/components/ListPanel/doi/DoiItemViewErrorDialogBody.vue
@@ -0,0 +1,23 @@
+<template>
+	<p>{{ errorMessageAgencyPreamble }}</p>
+	<div class="depositErrorMessage">
+		<pre>{{ errorMessage }}</pre>
+	</div>
+</template>
+
+<script setup>
+defineProps({
+	errorMessageAgencyPreamble: {type: String, required: true},
+	errorMessage: {type: String, required: true},
+});
+</script>
+
+<style lang="less">
+@import '../../../styles/_import';
+.depositErrorMessage {
+	background: rgb(234, 237, 238);
+	> pre {
+		white-space: pre-wrap;
+	}
+}
+</style>
diff --git a/src/components/ListPanel/doi/DoiItemViewRegisteredMessageDialogBody.vue b/src/components/ListPanel/doi/DoiItemViewRegisteredMessageDialogBody.vue
new file mode 100644
index 000000000..596807fe3
--- /dev/null
+++ b/src/components/ListPanel/doi/DoiItemViewRegisteredMessageDialogBody.vue
@@ -0,0 +1,11 @@
+<template>
+	<p>{{ registeredMessageAgencyPreamble }}</p>
+	<p>{{ registeredMessage }}</p>
+</template>
+
+<script setup>
+defineProps({
+	registeredMessageAgencyPreamble: {type: String, required: true},
+	registeredMessage: {type: String, required: true},
+});
+</script>
diff --git a/src/components/ListPanel/doi/DoiListItem.vue b/src/components/ListPanel/doi/DoiListItem.vue
index 10808fcaf..27f619fe1 100644
--- a/src/components/ListPanel/doi/DoiListItem.vue
+++ b/src/components/ListPanel/doi/DoiListItem.vue
@@ -105,7 +105,7 @@
 					<button
 						:ref="versionModalName"
 						:class="'-linkButton'"
-						@click="isModalOpenedVersion = true"
+						@click="openVersionModal"
 					>
 						{{ t('doi.manager.versions.view') }}
 					</button>
@@ -149,7 +149,7 @@
 						v-if="isDeposited && hasRegisteredMessage"
 						ref="recordedMessageModalButton"
 						:is-disabled="isEditingDois"
-						@click="isModalOpenedRegisteredMessage = true"
+						@click="viewRecord"
 					>
 						{{ t('manager.dois.registration.viewRecord') }}
 					</pkp-button>
@@ -164,109 +164,29 @@
 						v-if="hasErrors && hasErrorMessage"
 						ref="errorMessageModalButton"
 						:is-disabled="isEditingDois"
-						@click="isModalOpenedErrorMessage = true"
+						@click="openViewErrorModal"
 					>
 						{{ t('manager.dois.registration.viewError') }}
 					</pkp-button>
 				</div>
 			</div>
 		</div>
-		<!-- Messages Modals -->
-		<!-- Error Message Modal -->
-		<modal
-			:close-label="t('common.close')"
-			:name="`errorMessageModal-${item.id}`"
-			:title="t('manager.dois.registration.viewError.title')"
-			:open="isModalOpenedErrorMessage"
-			@close="isModalOpenedErrorMessage = false"
-		>
-			<p>{{ registrationAgencyInfo['errorMessagePreamble'] }}</p>
-			<div class="depositErrorMessage">
-				<pre>{{ currentVersionDoiObjects[0]['errorMessage'] }}</pre>
-			</div>
-		</modal>
-		<!-- Recorded Message Modal -->
-		<modal
-			:close-label="t('common.close')"
-			:name="`registeredMessageModal-${item.id}`"
-			:title="t('manager.dois.registration.viewRecord.title')"
-			:open="isModalOpenedRegisteredMessage"
-			@close="isModalOpenedRegisteredMessage = false"
-		>
-			<p>{{ registrationAgencyInfo['registeredMessagePreamble'] }}</p>
-			<p>{{ currentVersionDoiObjects[0]['registeredMessage'] }}</p>
-		</modal>
-		<!-- Version Modal -->
-		<modal
-			:close-label="t('common.close')"
-			:name="versionModalName"
-			:title="t('doi.manager.versions.modalTitle')"
-			:open="isModalOpenedVersion"
-			@close="isModalOpenedVersion = false"
-		>
-			<div
-				v-for="version in item.versions"
-				:key="version.id"
-				class="doiListItem__versionContainer"
-			>
-				<a
-					:href="version.urlPublished"
-					target="_blank"
-					rel="noopener noreferrer"
-				>
-					{{ getVersionHeader(version) }}
-				</a>
-				<pkp-table
-					:columns="doiListColumns"
-					:rows="
-						item.doiObjects.filter(
-							(doiObject) => doiObject.versionNumber === version.versionNumber,
-						)
-					"
-				>
-					<template #default="{row}">
-						<table-cell :column="doiListColumns[0]" :row="row">
-							<label :for="row.uid">{{ row.displayType }}</label>
-						</table-cell>
-						<table-cell :column="doiListColumns[1]" :row="row">
-							<input
-								:id="row.uid"
-								v-model="
-									mutableDois.find((doi) => doi.uid === row.uid).identifier
-								"
-								class="pkpFormField__input pkpFormField--text__input"
-								type="text"
-								:readonly="!(isEditingDois && !isSaving)"
-							/>
-						</table-cell>
-					</template>
-				</pkp-table>
-			</div>
-
-			<div class="doiListItem__versionContainer--actionsBar">
-				<spinner v-if="isSaving" />
-				<pkp-button
-					:is-disabled="isDeposited || isSaving"
-					@click="isEditingDois ? saveDois() : editDois()"
-				>
-					{{ isEditingDois ? t('common.save') : t('common.edit') }}
-				</pkp-button>
-			</div>
-		</modal>
 	</div>
 </template>
 
 <script>
 import Expander from '@/components/Expander/Expander.vue';
-import Modal from '@/components/Modal/Modal.vue';
 import PkpTable from '@/components/Table/Table.vue';
 import TableCell from '@/components/Table/TableCell.vue';
-
+import DoiItemViewErrorDialogBody from './DoiItemViewErrorDialogBody.vue';
+import DoiItemViewRegisteredMessageDialogBody from './DoiItemViewRegisteredMessageDialogBody.vue';
+import DoiItemVersionModal from './DoiItemVersionModal.vue';
+import {computed} from 'vue';
+import {useModal} from '@/composables/useModal';
 export default {
 	name: 'DoiListItem',
 	components: {
 		Expander,
-		Modal,
 		PkpTable,
 		TableCell,
 	},
@@ -381,9 +301,6 @@ export default {
 			isSaving: false,
 			mutableDois: [],
 			itemsToUpdate: {},
-			isModalOpenedErrorMessage: false,
-			isModalOpenedRegisteredMessage: false,
-			isModalOpenedVersion: false,
 		};
 	},
 	computed: {
@@ -545,7 +462,44 @@ export default {
 	mounted() {
 		this.updateMutableDois(this.item.doiObjects);
 	},
+
 	methods: {
+		openViewErrorModal() {
+			const {openDialog} = useModal();
+
+			openDialog({
+				title: this.t('manager.dois.registration.viewError.title'),
+				bodyComponent: DoiItemViewErrorDialogBody,
+				bodyProps: {
+					errorMessageAgencyPreamble:
+						this.registrationAgencyInfo['errorMessagePreamble'],
+					errorMessage: this.currentVersionDoiObjects[0]['errorMessage'],
+				},
+				actions: [
+					{
+						label: this.t('common.ok'),
+						isPrimary: true,
+						callback: (close) => {
+							close();
+						},
+					},
+				],
+			});
+		},
+		openVersionModal() {
+			const {openSideModal} = useModal();
+			openSideModal(DoiItemVersionModal, {
+				isSaving: computed(() => this.isSaving),
+				isDeposited: computed(() => this.isDeposited),
+				item: this.item,
+				doiListColumns: this.doiListColumns,
+				mutableDois: this.mutableDois,
+				isEditingDois: computed(() => this.isEditingDois),
+				onSaveDois: this.saveDois,
+				onEditDois: this.editDois,
+			});
+		},
+
 		updateMutableDois(doiObjects) {
 			let dois = [];
 			doiObjects.forEach((item) => {
@@ -806,7 +760,26 @@ export default {
 			return this.isDeposited ? this.viewRecord() : this.triggerDeposit();
 		},
 		viewRecord() {
-			this.isModalOpenedRegisteredMessage = true;
+			const {openDialog} = useModal();
+			openDialog({
+				title: this.t('manager.dois.registration.viewRecord.title'),
+				bodyComponent: DoiItemViewRegisteredMessageDialogBody,
+				bodyProps: {
+					registeredMessageAgencyPreamble:
+						this.registrationAgencyInfo['registeredMessagePreamble'],
+					registeredMessage:
+						this.currentVersionDoiObjects[0]['registeredMessage'],
+				},
+				actions: [
+					{
+						label: this.t('common.ok'),
+						isPrimary: true,
+						callback: (close) => {
+							close();
+						},
+					},
+				],
+			});
 		},
 		triggerDeposit() {
 			this.$emit('deposit-triggered', [this.item.id], 'deposit');
@@ -820,18 +793,6 @@ export default {
 		toggleExpanded() {
 			this.$emit('expand-item', this.item.id);
 		},
-		/**
-		 * @param {PublicationVersionInfo} version
-		 */
-		getVersionHeader(version) {
-			const dateInfo =
-				version.datePublished !== null
-					? `(${version.datePublished})`
-					: this.t('publication.status.unpublished');
-			return `${this.t('publication.version', {
-				version: version.versionNumber,
-			})} ${dateInfo}`;
-		},
 	},
 };
 </script>
@@ -839,13 +800,6 @@ export default {
 <style lang="less">
 @import '../../../styles/_import';
 
-.depositErrorMessage {
-	background: rgb(234, 237, 238);
-	> pre {
-		white-space: pre-wrap;
-	}
-}
-
 .doiListItem__depositorDetails {
 	//width: 100%;
 	//max-width: 100%;
@@ -938,17 +892,6 @@ export default {
 	margin-top: 0.5rem;
 }
 
-.doiListItem__versionContainer {
-	margin-top: 0.5rem;
-}
-
-.doiListItem__versionContainer--actionsBar {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	margin-top: 0.5rem;
-}
-
 .doiListPanel__itemExpandedActions {
 	display: flex;
 	align-items: center;
diff --git a/src/components/ListPanel/doi/DoiListPanel.vue b/src/components/ListPanel/doi/DoiListPanel.vue
index 9f1dd6893..5a9e93748 100644
--- a/src/components/ListPanel/doi/DoiListPanel.vue
+++ b/src/components/ListPanel/doi/DoiListPanel.vue
@@ -131,7 +131,7 @@
 						<template #actions>
 							<button
 								class="doiListPanel__statusInfoButton"
-								@click="isModalOpenedStatusInfo = true"
+								@click="openStatusInfoModal"
 							>
 								<icon icon="question-circle" />
 							</button>
@@ -200,68 +200,6 @@
 				</template>
 			</list-panel>
 		</slot>
-
-		<!-- Status info modal -->
-		<modal
-			:close-label="t('common.close')"
-			name="statusInfoModal"
-			:title="t('manager.dois.help.statuses.title')"
-			:open="isModalOpenedStatusInfo"
-			@close="isModalOpenedStatusInfo = false"
-		>
-			<table class="pkpTable">
-				<thead>
-					<tr>
-						<th>{{ t('common.status') }}</th>
-						<th>{{ t('common.description') }}</th>
-					</tr>
-				</thead>
-				<tr class="pkpTable__row">
-					<th>{{ t('manager.dois.status.needsDoi') }}</th>
-					<td>{{ t('manager.dois.status.needsDoi.description') }}</td>
-				</tr>
-				<tr class="pkpTable__row">
-					<th>{{ t('manager.dois.filters.doiAssigned') }}</th>
-					<td>{{ t('manager.dois.filters.doiAssigned.description') }}</td>
-				</tr>
-				<tr class="pkpTable__row">
-					<th>{{ t('manager.dois.status.unregistered') }}</th>
-					<td>{{ t('manager.dois.status.unregistered.description') }}</td>
-				</tr>
-				<tr class="pkpTable__row">
-					<th>{{ t('manager.dois.status.submitted') }}</th>
-					<td>{{ t('manager.dois.status.submitted.description') }}</td>
-				</tr>
-				<tr class="pkpTable__row">
-					<th>{{ t('manager.dois.status.registered') }}</th>
-					<td>{{ t('manager.dois.status.registered.description') }}</td>
-				</tr>
-				<tr class="pkpTable__row">
-					<th>{{ t('manager.dois.status.error.filterTitle') }}</th>
-					<td>{{ t('manager.dois.status.error.description') }}</td>
-				</tr>
-				<tr class="pkpTable__row">
-					<th>{{ t('manager.dois.status.stale') }}</th>
-					<td>{{ t('manager.dois.status.stale.description') }}</td>
-				</tr>
-			</table>
-		</modal>
-
-		<!-- DOI action failed modal -->
-		<modal
-			:close-label="t('common.close')"
-			name="failedDoiActionModal"
-			:title="t('manager.dois.update.failedCreation')"
-			:open="isModalOpenedFailedDoiAction"
-			@close="closeFailedDoiActionModal"
-		>
-			<p>{{ t('manager.dois.update.partialFailure') }}</p>
-			<ul>
-				<li v-for="errorMessage in failedDoiActions" :key="errorMessage.index">
-					{{ errorMessage }}
-				</li>
-			</ul>
-		</modal>
 	</div>
 </template>
 
@@ -275,8 +213,12 @@ import PkpFilter from '@/components/Filter/Filter.vue';
 import PkpFilterAutosuggest from '@/components/Filter/FilterAutosuggest.vue';
 import PkpHeader from '@/components/Header/Header.vue';
 import Search from '@/components/Search/Search.vue';
+import DoiStatusInfoModal from './DoiStatusInfoModal.vue';
+import DoiFailedActionDialogBody from './DoiFailedActionDialogBody.vue';
 import fetch from '@/mixins/fetch';
 import ajaxError from '@/mixins/ajaxError';
+import {useModal} from '@/composables/useModal';
+
 import Notification from '@/components/Notification/Notification.vue';
 import Modal from '@/components/Modal/Modal.vue';
 
@@ -376,8 +318,6 @@ export default {
 			selected: [],
 			expanded: [],
 			failedDoiActions: [],
-			isModalOpenedStatusInfo: false,
-			isModalOpenedFailedDoiAction: false,
 		};
 	},
 	computed: {
@@ -421,14 +361,40 @@ export default {
 		 * @param {Array} oldVal
 		 */
 		failedDoiActions(newVal, oldVal) {
+			const {openDialog} = useModal();
+
 			if (newVal.length !== 0) {
-				this.isModalOpenedFailedDoiAction = true;
-			} else if (this.isModalOpenedFailedDoiAction === true) {
-				this.closeFailedDoiActionModal();
+				openDialog({
+					title: this.t('manager.dois.update.failedCreation'),
+					actions: [
+						{
+							label: this.t('common.ok'),
+							isPrimary: true,
+							callback: (close) => {
+								this.failedDoiActions = [];
+								close();
+							},
+						},
+					],
+					bodyComponent: DoiFailedActionDialogBody,
+					bodyProps: {
+						failedDoiActions: this.failedDoiActions,
+					},
+					close: () => {
+						this.failedDoiActions = [];
+					},
+				});
 			}
 		},
 	},
 	methods: {
+		/**
+		 * Open status info modal
+		 */
+		openStatusInfoModal() {
+			const {openSideModal} = useModal();
+			openSideModal(DoiStatusInfoModal);
+		},
 		/**
 		 * Set the list of items
 		 *
@@ -983,10 +949,6 @@ export default {
 				...props,
 			};
 		},
-		closeFailedDoiActionModal() {
-			this.isModalOpenedFailedDoiAction = false;
-			this.failedDoiActions = [];
-		},
 	},
 };
 </script>
diff --git a/src/components/ListPanel/doi/DoiStatusInfoModal.vue b/src/components/ListPanel/doi/DoiStatusInfoModal.vue
new file mode 100644
index 000000000..92d915693
--- /dev/null
+++ b/src/components/ListPanel/doi/DoiStatusInfoModal.vue
@@ -0,0 +1,53 @@
+<template>
+	<SideModalBody>
+		<template #title>
+			{{ t('manager.dois.help.statuses.title') }}
+		</template>
+		<SideModalLayoutBasic>
+			<table class="pkpTable">
+				<thead>
+					<tr>
+						<th>{{ t('common.status') }}</th>
+						<th>{{ t('common.description') }}</th>
+					</tr>
+				</thead>
+				<tr class="pkpTable__row">
+					<th>{{ t('manager.dois.status.needsDoi') }}</th>
+					<td>{{ t('manager.dois.status.needsDoi.description') }}</td>
+				</tr>
+				<tr class="pkpTable__row">
+					<th>{{ t('manager.dois.filters.doiAssigned') }}</th>
+					<td>{{ t('manager.dois.filters.doiAssigned.description') }}</td>
+				</tr>
+				<tr class="pkpTable__row">
+					<th>{{ t('manager.dois.status.unregistered') }}</th>
+					<td>{{ t('manager.dois.status.unregistered.description') }}</td>
+				</tr>
+				<tr class="pkpTable__row">
+					<th>{{ t('manager.dois.status.submitted') }}</th>
+					<td>{{ t('manager.dois.status.submitted.description') }}</td>
+				</tr>
+				<tr class="pkpTable__row">
+					<th>{{ t('manager.dois.status.registered') }}</th>
+					<td>{{ t('manager.dois.status.registered.description') }}</td>
+				</tr>
+				<tr class="pkpTable__row">
+					<th>{{ t('manager.dois.status.error.filterTitle') }}</th>
+					<td>{{ t('manager.dois.status.error.description') }}</td>
+				</tr>
+				<tr class="pkpTable__row">
+					<th>{{ t('manager.dois.status.stale') }}</th>
+					<td>{{ t('manager.dois.status.stale.description') }}</td>
+				</tr>
+			</table>
+		</SideModalLayoutBasic>
+	</SideModalBody>
+</template>
+
+<script setup>
+import SideModalBody from '@/components/Modal/SideModalBody.vue';
+import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
+import {useLocalize} from '@/composables/useLocalize';
+
+const {t} = useLocalize();
+</script>
diff --git a/src/components/ListPanel/highlights/HighlightsEditModal.vue b/src/components/ListPanel/highlights/HighlightsEditModal.vue
new file mode 100644
index 000000000..1addee7ed
--- /dev/null
+++ b/src/components/ListPanel/highlights/HighlightsEditModal.vue
@@ -0,0 +1,26 @@
+<template>
+	<SideModalBody>
+		<template #title>
+			{{ title }}
+		</template>
+		<SideModalLayoutBasic>
+			<PkpForm
+				v-bind="activeForm"
+				@set="(...args) => emit('updateForm', ...args)"
+				@success="(...args) => emit('formSuccess', ...args)"
+			/>
+		</SideModalLayoutBasic>
+	</SideModalBody>
+</template>
+
+<script setup>
+import SideModalBody from '@/components/Modal/SideModalBody.vue';
+import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
+import PkpForm from '@/components/Form/Form.vue';
+
+defineProps({
+	title: {type: String, required: true},
+	activeForm: {type: Object, required: true},
+});
+const emit = defineEmits(['updateForm', 'formSuccess']);
+</script>
diff --git a/src/components/ListPanel/highlights/HighlightsListPanel.vue b/src/components/ListPanel/highlights/HighlightsListPanel.vue
index 5fc9f452a..639a9e7ee 100644
--- a/src/components/ListPanel/highlights/HighlightsListPanel.vue
+++ b/src/components/ListPanel/highlights/HighlightsListPanel.vue
@@ -60,40 +60,25 @@
 					</pkp-button>
 				</template>
 			</list-panel>
-			<modal
-				:close-label="t('common.close')"
-				name="form"
-				:title="activeFormTitle"
-				:open="isModalOpened"
-				@close="closeFormModal"
-			>
-				<pkp-form
-					v-bind="activeForm"
-					@set="updateForm"
-					@success="formSuccess"
-				/>
-			</modal>
 		</slot>
 	</div>
 </template>
 
 <script>
 import ListPanel from '@/components/ListPanel/ListPanel.vue';
-import PkpForm from '@/components/Form/Form.vue';
 import PkpHeader from '@/components/Header/Header.vue';
-import Modal from '@/components/Modal/Modal.vue';
 import Orderer from '@/components/Orderer/Orderer.vue';
+import HighlightsEditModal from './HighlightsEditModal.vue';
 import ajaxError from '@/mixins/ajaxError';
 import dialog from '@/mixins/dialog.js';
 import fetch from '@/mixins/fetch';
 import cloneDeep from 'clone-deep';
+import {useModal} from '@/composables/useModal';
 
 export default {
 	components: {
 		ListPanel,
-		PkpForm,
 		PkpHeader,
-		Modal,
 		Orderer,
 	},
 	mixins: [dialog, fetch, ajaxError],
@@ -162,7 +147,6 @@ export default {
 			activeForm: null,
 			activeFormTitle: '',
 			isLoading: false,
-			isModalOpened: false,
 			isOrdering: false,
 		};
 	},
@@ -175,7 +159,8 @@ export default {
 		closeFormModal(event) {
 			this.activeForm = null;
 			this.activeFormTitle = '';
-			this.isModalOpened = false;
+			const {closeSideModal} = useModal();
+			closeSideModal(HighlightsEditModal);
 		},
 
 		/**
@@ -196,7 +181,8 @@ export default {
 				);
 				pkp.eventBus.$emit('update:highlight', item);
 			}
-			this.isModalOpened = false;
+			const {closeSideModal} = useModal();
+			closeSideModal(HighlightsEditModal);
 		},
 
 		/**
@@ -208,7 +194,13 @@ export default {
 			activeForm.method = 'POST';
 			this.activeForm = activeForm;
 			this.activeFormTitle = this.i18nAdd;
-			this.isModalOpened = true;
+			const {openSideModal} = useModal();
+			openSideModal(HighlightsEditModal, {
+				title: this.activeFormTitle,
+				activeForm: this.activeForm,
+				onUpdateForm: this.updateForm,
+				onFormSuccess: this.formSuccess,
+			});
 		},
 
 		/**
@@ -284,7 +276,13 @@ export default {
 			});
 			this.activeForm = activeForm;
 			this.activeFormTitle = this.i18nEdit;
-			this.isModalOpened = false;
+			const {openSideModal} = useModal();
+			openSideModal(HighlightsEditModal, {
+				title: this.activeFormTitle,
+				activeForm: this.activeForm,
+				onUpdateForm: this.updateForm,
+				onFormSuccess: this.formSuccess,
+			});
 		},
 
 		/**
@@ -378,7 +376,11 @@ export default {
 		 * @param {Object} data
 		 */
 		updateForm(formId, data) {
-			let activeForm = {...this.activeForm};
+			if (!this.activeForm) {
+				return;
+			}
+
+			let activeForm = this.activeForm;
 			Object.keys(data).forEach(function (key) {
 				activeForm[key] = data[key];
 			});
diff --git a/src/components/ListPanel/institutions/InstitutionsEditModal.vue b/src/components/ListPanel/institutions/InstitutionsEditModal.vue
new file mode 100644
index 000000000..1addee7ed
--- /dev/null
+++ b/src/components/ListPanel/institutions/InstitutionsEditModal.vue
@@ -0,0 +1,26 @@
+<template>
+	<SideModalBody>
+		<template #title>
+			{{ title }}
+		</template>
+		<SideModalLayoutBasic>
+			<PkpForm
+				v-bind="activeForm"
+				@set="(...args) => emit('updateForm', ...args)"
+				@success="(...args) => emit('formSuccess', ...args)"
+			/>
+		</SideModalLayoutBasic>
+	</SideModalBody>
+</template>
+
+<script setup>
+import SideModalBody from '@/components/Modal/SideModalBody.vue';
+import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
+import PkpForm from '@/components/Form/Form.vue';
+
+defineProps({
+	title: {type: String, required: true},
+	activeForm: {type: Object, required: true},
+});
+const emit = defineEmits(['updateForm', 'formSuccess']);
+</script>
diff --git a/src/components/ListPanel/institutions/InstitutionsListPanel.vue b/src/components/ListPanel/institutions/InstitutionsListPanel.vue
index dd991c2bb..eb8930416 100644
--- a/src/components/ListPanel/institutions/InstitutionsListPanel.vue
+++ b/src/components/ListPanel/institutions/InstitutionsListPanel.vue
@@ -47,19 +47,6 @@
 					/>
 				</template>
 			</list-panel>
-			<modal
-				:close-label="t('common.close')"
-				name="form"
-				:title="activeFormTitle"
-				:open="isModalOpenedForm"
-				@close="closeFormModal"
-			>
-				<pkp-form
-					v-bind="activeForm"
-					@set="updateForm"
-					@success="formSuccess"
-				/>
-			</modal>
 		</slot>
 	</div>
 </template>
@@ -67,23 +54,21 @@
 <script>
 import ListPanel from '@/components/ListPanel/ListPanel.vue';
 import Pagination from '@/components/Pagination/Pagination.vue';
-import PkpForm from '@/components/Form/Form.vue';
 import PkpHeader from '@/components/Header/Header.vue';
 import Search from '@/components/Search/Search.vue';
-import Modal from '@/components/Modal/Modal.vue';
 import ajaxError from '@/mixins/ajaxError';
 import dialog from '@/mixins/dialog.js';
 import fetch from '@/mixins/fetch';
 import cloneDeep from 'clone-deep';
+import InstitutionsEditModal from './InstitutionsEditModal.vue';
+import {useModal} from '@/composables/useModal';
 
 export default {
 	components: {
 		ListPanel,
 		Pagination,
-		PkpForm,
 		PkpHeader,
 		Search,
-		Modal,
 	},
 	mixins: [dialog, fetch, ajaxError],
 	props: {
@@ -149,7 +134,6 @@ export default {
 		return {
 			activeForm: null,
 			activeFormTitle: '',
-			isModalOpenedForm: false,
 		};
 	},
 	methods: {
@@ -160,7 +144,8 @@ export default {
 		closeFormModal() {
 			this.activeForm = null;
 			this.activeFormTitle = '';
-			this.isModalOpenedForm = false;
+			const {closeSideModal} = useModal();
+			closeSideModal(InstitutionsEditModal);
 		},
 
 		/**
@@ -193,7 +178,13 @@ export default {
 			activeForm.method = 'POST';
 			this.activeForm = activeForm;
 			this.activeFormTitle = this.addInstitutionLabel;
-			this.isModalOpenedForm = true;
+			const {openSideModal} = useModal();
+			openSideModal(InstitutionsEditModal, {
+				title: this.activeFormTitle,
+				activeForm: this.activeForm,
+				onUpdateForm: this.updateForm,
+				onFormSuccess: this.formSuccess,
+			});
 		},
 
 		/**
@@ -276,7 +267,14 @@ export default {
 			});
 			this.activeForm = activeForm;
 			this.activeFormTitle = this.editInstitutionLabel;
-			this.isModalOpenedForm = true;
+
+			const {openSideModal} = useModal();
+			openSideModal(InstitutionsEditModal, {
+				title: this.activeFormTitle,
+				activeForm: this.activeForm,
+				onUpdateForm: this.updateForm,
+				onFormSuccess: this.formSuccess,
+			});
 		},
 
 		/**
@@ -300,7 +298,10 @@ export default {
 		 * @param {Object} data
 		 */
 		updateForm(formId, data) {
-			let activeForm = {...this.activeForm};
+			if (!this.activeForm) {
+				return;
+			}
+			let activeForm = this.activeForm;
 			Object.keys(data).forEach(function (key) {
 				activeForm[key] = data[key];
 			});
diff --git a/src/components/ListPanel/submissionFiles/SubmissionFilesEditModal.vue b/src/components/ListPanel/submissionFiles/SubmissionFilesEditModal.vue
new file mode 100644
index 000000000..474b11872
--- /dev/null
+++ b/src/components/ListPanel/submissionFiles/SubmissionFilesEditModal.vue
@@ -0,0 +1,26 @@
+<template>
+	<SideModalBody>
+		<template #title>
+			{{ title }}
+		</template>
+		<SideModalLayoutBasic>
+			<PkpForm
+				v-bind="activeForm"
+				@set="(...args) => emit('setForm', ...args)"
+				@success="(...args) => emit('formSuccess', ...args)"
+			/>
+		</SideModalLayoutBasic>
+	</SideModalBody>
+</template>
+
+<script setup>
+import SideModalBody from '@/components/Modal/SideModalBody.vue';
+import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
+import PkpForm from '@/components/Form/Form.vue';
+
+defineProps({
+	title: {type: String, required: true},
+	activeForm: {type: Object, required: true},
+});
+const emit = defineEmits(['setForm', 'formSuccess']);
+</script>
diff --git a/src/components/ListPanel/submissionFiles/SubmissionFilesListPanel.vue b/src/components/ListPanel/submissionFiles/SubmissionFilesListPanel.vue
index 640ed14aa..c155abb9b 100644
--- a/src/components/ListPanel/submissionFiles/SubmissionFilesListPanel.vue
+++ b/src/components/ListPanel/submissionFiles/SubmissionFilesListPanel.vue
@@ -49,34 +49,23 @@
 			:upload-progress-label="uploadProgressLabel"
 			@updated:files="setFiles"
 		/>
-		<modal
-			:close-label="t('common.close')"
-			:name="formModal"
-			:title="editingLabel"
-			:open="isModalOpenedForm"
-			@close="isModalOpenedForm = false"
-		>
-			<pkp-form v-bind="activeForm" @set="setForm" @success="formSuccess" />
-		</modal>
 	</div>
 </template>
 
 <script>
 import FileUploader from '@/components/FileUploader/FileUploader.vue';
 import ListPanel from '@/components/ListPanel/ListPanel.vue';
-import Modal from '@/components/Modal/Modal.vue';
-import PkpForm from '@/components/Form/Form.vue';
+
 import PkpHeader from '@/components/Header/Header.vue';
 import SubmissionFilesListItem from '@/components/ListPanel/submissionFiles/SubmissionFilesListItem.vue';
 import dialog from '@/mixins/dialog.js';
 import cloneDeep from 'clone-deep';
-
+import SubmissionFilesEditModal from './SubmissionFilesEditModal.vue';
+import {useModal} from '@/composables/useModal';
 export default {
 	components: {
 		FileUploader,
 		ListPanel,
-		Modal,
-		PkpForm,
 		PkpHeader,
 		SubmissionFilesListItem,
 	},
@@ -187,7 +176,6 @@ export default {
 			editingLabel: '',
 			isDragging: false,
 			status: '',
-			isModalOpenedForm: false,
 		};
 	},
 	computed: {
@@ -227,7 +215,13 @@ export default {
 			this.editingLabel = this.t('common.editItem', {
 				name: this.localize(item.name),
 			});
-			this.isModalOpenedForm = true;
+			const {openSideModal} = useModal();
+			openSideModal(SubmissionFilesEditModal, {
+				title: this.editingLabel,
+				activeForm: this.activeForm,
+				onSetForm: this.setForm,
+				onFormSuccess: this.formSuccess,
+			});
 		},
 
 		/**
@@ -237,7 +231,9 @@ export default {
 		 */
 		formSuccess(item) {
 			this.updateItem(item);
-			this.isModalOpenedForm = false;
+			const {closeSideModal} = useModal();
+			closeSideModal(SubmissionFilesEditModal);
+
 			this.activeForm = {};
 			this.$el.querySelector('#edit-' + item.id).focus();
 		},
@@ -305,7 +301,11 @@ export default {
 		 * @param {Object} data Key/value map of the data to be changed
 		 */
 		setForm(key, data) {
-			let activeForm = {...this.activeForm};
+			if (!this.activeForm) {
+				return;
+			}
+
+			let activeForm = this.activeForm;
 			Object.keys(data).forEach(function (key) {
 				activeForm[key] = data[key];
 			});
diff --git a/src/components/ListPanel/submissions/CatalogEditModal.vue b/src/components/ListPanel/submissions/CatalogEditModal.vue
new file mode 100644
index 000000000..9b2510176
--- /dev/null
+++ b/src/components/ListPanel/submissions/CatalogEditModal.vue
@@ -0,0 +1,26 @@
+<template>
+	<SideModalBody>
+		<template #title>
+			{{ t('submission.catalogEntry.new') }}
+		</template>
+		<SideModalLayoutBasic>
+			<PkpForm
+				v-bind="activeForm"
+				@set="(...args) => emit('setAddEntryForm', ...args)"
+				@success="(...args) => emit('addEntryFormSuccess', ...args)"
+			/>
+		</SideModalLayoutBasic>
+	</SideModalBody>
+</template>
+
+<script setup>
+import SideModalBody from '@/components/Modal/SideModalBody.vue';
+import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
+import PkpForm from '@/components/Form/Form.vue';
+import {useLocalize} from '@/composables/useLocalize';
+defineProps({
+	activeForm: {type: Object, required: true},
+});
+const {t} = useLocalize();
+const emit = defineEmits(['setAddEntryForm', 'addEntryFormSuccess']);
+</script>
diff --git a/src/components/ListPanel/submissions/CatalogListPanel.vue b/src/components/ListPanel/submissions/CatalogListPanel.vue
index 14e642931..043bf67da 100644
--- a/src/components/ListPanel/submissions/CatalogListPanel.vue
+++ b/src/components/ListPanel/submissions/CatalogListPanel.vue
@@ -43,7 +43,7 @@
 								{{ t('common.cancel') }}
 							</pkp-button>
 						</template>
-						<pkp-button @click="isModalOpenedAddCatalogEntry = true">
+						<pkp-button @click="openAddEntryForm">
 							{{ t('submission.catalogEntry.new') }}
 						</pkp-button>
 					</template>
@@ -123,43 +123,28 @@
 				/>
 			</template>
 		</list-panel>
-		<modal
-			:close-label="t('common.close')"
-			name="addCatalogEntry"
-			:title="t('submission.catalogEntry.new')"
-			:open="isModalOpenedAddCatalogEntry"
-			@close="closeAddEntryForm"
-		>
-			<pkp-form
-				v-bind="addEntryForm"
-				@set="setAddEntryForm"
-				@success="addEntryFormSuccess"
-			/>
-		</modal>
 	</div>
 </template>
 
 <script>
 import CatalogListItem from '@/components/ListPanel/submissions/CatalogListItem.vue';
 import ListPanel from '@/components/ListPanel/ListPanel.vue';
-import Modal from '@/components/Modal/Modal.vue';
 import Notification from '@/components/Notification/Notification.vue';
 import Pagination from '@/components/Pagination/Pagination.vue';
-import PkpForm from '@/components/Form/Form.vue';
 import PkpHeader from '@/components/Header/Header.vue';
 import PkpFilter from '@/components/Filter/Filter.vue';
+import CatalogEditModal from './CatalogEditModal.vue';
 import Search from '@/components/Search/Search.vue';
 import ajaxError from '@/mixins/ajaxError';
 import fetch from '@/mixins/fetch';
+import {useModal} from '@/composables/useModal';
 
 export default {
 	components: {
 		CatalogListItem,
 		ListPanel,
-		Modal,
 		Notification,
 		Pagination,
-		PkpForm,
 		PkpHeader,
 		PkpFilter,
 		Search,
@@ -233,7 +218,6 @@ export default {
 			newEntries: [],
 			isOrdering: false,
 			isSidebarVisible: false,
-			isModalOpenedAddCatalogEntry: false,
 		};
 	},
 	computed: {
@@ -386,11 +370,25 @@ export default {
 			this.get();
 		},
 
+		/**
+		 * Open add entry form
+		 */
+
+		openAddEntryForm() {
+			const {openSideModal} = useModal();
+
+			openSideModal(CatalogEditModal, {
+				activeForm: this.addEntryForm,
+				onSetAddEntryForm: this.setAddEntryForm,
+				onAddEntryFormSuccess: this.addEntryFormSuccess,
+			});
+		},
 		/**
 		 * When the add entry modal is closed
 		 */
 		closeAddEntryForm() {
-			this.isModalOpenedAddCatalogEntry = false;
+			const {closeSideModal} = useModal();
+			closeSideModal(CatalogEditModal);
 			this.addEntryForm.fields.find(
 				(f) => f.name === 'submissionIds',
 			).selected = [];
diff --git a/src/components/Modal/Dialog.mdx b/src/components/Modal/Dialog.mdx
new file mode 100644
index 000000000..3e298eae3
--- /dev/null
+++ b/src/components/Modal/Dialog.mdx
@@ -0,0 +1,30 @@
+import {
+	Primary,
+	Controls,
+	Stories,
+	Meta,
+	ArgTypes,
+	Source,
+} from '@storybook/blocks';
+import Dialog from './Dialog.vue';
+import * as DialogStories from './Dialog.stories.js';
+
+<Meta of={DialogStories} />
+
+# Dialog
+
+Dialog purpose is to display simple feedback like success and error messages. Or request confirmation for example before deleting content.
+
+## Usage
+
+Dialog are opened via method `openDialog` from [useModal](../?path=/docs/composables-usemodal--docs#opensidemodal) composable. Check out the props description for details.
+
+## Accessibility
+
+To correctly handle accessibility (title, description) and focus management - [headless-ui](https://headlessui.com) library is used.
+
+### Defining Modal Component
+
+<ArgTypes of={Dialog} />
+
+<Stories />
diff --git a/src/composables/useModal.stories.js b/src/components/Modal/Dialog.stories.js
similarity index 64%
rename from src/composables/useModal.stories.js
rename to src/components/Modal/Dialog.stories.js
index aaba9ca85..25b577c15 100644
--- a/src/composables/useModal.stories.js
+++ b/src/components/Modal/Dialog.stories.js
@@ -1,10 +1,11 @@
+import PkpDialog from './Dialog.vue';
+import {useModal} from '@/composables/useModal.js';
 import {within, userEvent} from '@storybook/test';
-
-import {useModal} from './useModal';
 import PkpButton from '@/components/Button/Button.vue';
 
 export default {
-	title: 'composables/useModal',
+	title: 'Components/Dialog',
+	component: PkpDialog,
 	render: (args) => ({
 		components: {PkpButton},
 		setup() {
@@ -16,6 +17,11 @@ export default {
 			<PkpButton @click="openDialog(args)">{{args.buttonName}}</PkpButton> 
 		`,
 	}),
+	decorators: [
+		() => ({
+			template: '<div style="height: 400px"><story/></div>',
+		}),
+	],
 };
 
 export const DialogBasic = {
@@ -47,11 +53,51 @@ export const DialogBasic = {
 
 		await user.click(canvas.getByText('Basic Example'));
 	},
-	decorators: [
-		() => ({
-			template: '<div style="height: 400px"><story/></div>',
-		}),
-	],
+};
+
+const DialogBodyComponent = {
+	template: `
+    	<p>{{ 'Some DOI(s) could not be updated' }}</p>
+        <ul>
+            <li v-for="errorMessage in failedDoiActions" :key="errorMessage.index">
+                {{ errorMessage }}
+            </li>
+        </ul>
+    `,
+	props: {
+		failedDoiActions: {type: Array, required: true},
+	},
+};
+
+export const WithBodyComponent = {
+	args: {
+		buttonName: 'With Body Component',
+		title: 'Submit Article',
+		bodyComponent: DialogBodyComponent,
+		bodyProps: {
+			failedDoiActions: ['First error to display', 'Second error to display'],
+		},
+		actions: [
+			{
+				label: 'Ok',
+				isPrimary: true,
+				callback: (close) => {
+					// user has confirmed
+					close();
+				},
+			},
+		],
+		close: () => {
+			// dialog has been closed
+		},
+	},
+	play: async ({canvasElement}) => {
+		// Assigns canvas to the component root element
+		const canvas = within(canvasElement);
+		const user = userEvent.setup();
+
+		await user.click(canvas.getByText('With Body Component'));
+	},
 };
 
 export const DialogComplex = {
@@ -91,9 +137,4 @@ export const DialogComplex = {
 
 		await user.click(canvas.getByText('Full Example'));
 	},
-	decorators: [
-		() => ({
-			template: '<div style="height: 400px"><story/></div>',
-		}),
-	],
 };
diff --git a/src/components/Modal/Dialog.vue b/src/components/Modal/Dialog.vue
index dbf71b3e2..e1feabe7b 100644
--- a/src/components/Modal/Dialog.vue
+++ b/src/components/Modal/Dialog.vue
@@ -32,10 +32,10 @@
 						>
 							<div class="flex min-h-12 items-center">
 								<DialogTitle
-									v-if="dialogProps.title"
+									v-if="title"
 									class="m-0 min-w-[1px] overflow-x-hidden overflow-ellipsis whitespace-nowrap px-4 py-2 text-xl-bold"
 								>
-									{{ dialogProps.title }}
+									{{ title }}
 								</DialogTitle>
 								<button
 									class="me-2 ms-auto cursor-pointer border-0 bg-transparent text-center"
@@ -47,17 +47,22 @@
 										:aria-hidden="true"
 									/>
 									<span class="-screenReader">
-										{{ dialogProps.closeLabel || t('common.close') }}
+										{{ t('common.close') }}
 									</span>
 								</button>
 							</div>
 							<div class="modal-content p-4">
-								<div v-html="dialogProps.message" />
+								<div v-html="message" />
+								<component
+									:is="bodyComponent"
+									v-if="bodyComponent"
+									v-bind="bodyProps"
+								/>
 							</div>
 							<div class="flex items-center justify-end p-4">
 								<spinner v-if="isLoading" />
 								<pkp-button
-									v-for="action in dialogProps.actions"
+									v-for="action in actions"
 									:key="action.label"
 									class="ms-2"
 									:element="action.element || 'button'"
@@ -81,8 +86,7 @@
 </template>
 
 <script setup>
-import {ref, computed, onMounted, onUnmounted, watch} from 'vue';
-import {storeToRefs} from 'pinia';
+import {ref, watch} from 'vue';
 
 import {
 	Dialog as HLDialog,
@@ -92,17 +96,24 @@ import {
 	TransitionChild,
 } from '@headlessui/vue';
 
-import {useModalStore} from '@/stores/modalStore';
-
-const myLevel = ref(0);
-const modalStore = useModalStore();
-const {dialogProps, dialogOpened, dialogLevel} = storeToRefs(modalStore);
-
-const {closeDialog, increaseDialogLevel, decreaseDialogLevel} = modalStore;
+const props = defineProps({
+	/** Used only internally, don't pass this prop via openDialog */
+	opened: {type: Boolean, default: false},
+	/** Title of the dialog */
+	title: {type: String, required: true},
+	/** Message to be displayed, for more complex messages use bodyComponent&bodyProps */
+	message: {type: String, default: null},
+	/** For more complex messages Vue.js component can be passed */
+	bodyComponent: {type: Object, default: null},
+	/** Props to be passed to bodyComponent */
+	bodyProps: {type: Object, default: null},
+	/** Array of button props to display actions, following props are passed to button component: label, element, href, isPrimary, isWarnable, callback */
+	actions: {type: Array, default: () => []},
+	/** Callback when dialog is being closed by close button or clicking outside of the modal */
+	close: {type: Function, default: null},
+});
 
-const opened = computed(
-	() => dialogOpened.value && myLevel.value === dialogLevel.value,
-);
+const emit = defineEmits(['close']);
 
 const isLoading = ref(false);
 
@@ -110,17 +121,20 @@ const isLoading = ref(false);
 // this is not ideal approach, but given how little state the dialog has
 // its less complex than splitting dialog into two components to have proper life cycle
 // as we do with SideModal and SideModalBody
-watch(opened, (prevOpened, nextOpened) => {
-	if (prevOpened === true && nextOpened === false) {
-		isLoading.value = false;
-	}
-});
+watch(
+	() => props.opened,
+	(prevOpened, nextOpened) => {
+		if (prevOpened === true && nextOpened === false) {
+			isLoading.value = false;
+		}
+	},
+);
 
 function onClose() {
-	if (dialogProps.value.close) {
-		dialogProps.value.close();
+	if (props.close) {
+		props.close();
 	}
-	closeDialog();
+	emit('close');
 }
 
 function fireCallback(callback) {
@@ -131,23 +145,4 @@ function fireCallback(callback) {
 		});
 	}
 }
-
-onMounted(() => {
-	increaseDialogLevel();
-	myLevel.value = dialogLevel.value;
-});
-
-onUnmounted(() => {
-	decreaseDialogLevel();
-});
 </script>
-
-<style scoped>
-.modal-content > p:first-child {
-	margin-top: 0;
-}
-
-.modal-content > p:last-child {
-	margin-bottom: 0;
-}
-</style>
diff --git a/src/components/Modal/Modal.mdx b/src/components/Modal/Modal.mdx
index 325afe48b..2eb2c49d3 100644
--- a/src/components/Modal/Modal.mdx
+++ b/src/components/Modal/Modal.mdx
@@ -6,7 +6,7 @@ import * as ModalStories from './Modal.stories.js';
 
 # Modal
 
-**Deprecated** in favour of SideModal.
+**Deprecated** in favour of SideModal. Please migrate to use SideModal and `openSideModal` function from [useModal](../?path=/docs/composables-usemodal--docs#opensidemodal) composable.
 
 ## Usage
 
diff --git a/src/components/Modal/ModalManager.vue b/src/components/Modal/ModalManager.vue
index 571b07961..ffdb861f8 100644
--- a/src/components/Modal/ModalManager.vue
+++ b/src/components/Modal/ModalManager.vue
@@ -6,6 +6,12 @@
 		@close="() => close(sideModal1?.modalId)"
 	>
 		<component :is="component1" v-bind="sideModal1?.props" />
+		<PkpDialog
+			:opened="dialogOpened && dialogLevel === 1"
+			v-bind="dialogProps"
+			@close="closeDialog"
+		></PkpDialog>
+
 		<SideModal
 			close-label="Close"
 			:modal-level="2"
@@ -13,9 +19,18 @@
 			@close="() => close(sideModal2?.modalId)"
 		>
 			<component :is="component2" v-bind="sideModal2?.props" />
+			<PkpDialog
+				:opened="dialogOpened && dialogLevel === 2"
+				v-bind="dialogProps"
+				@close="closeDialog"
+			></PkpDialog>
 		</SideModal>
 	</SideModal>
-	<PkpDialog></PkpDialog>
+	<PkpDialog
+		:opened="dialogOpened && dialogLevel === 0"
+		v-bind="dialogProps"
+		@close="closeDialog"
+	></PkpDialog>
 </template>
 
 <script setup>
@@ -30,7 +45,8 @@ import WorkflowLogResponseForModal from '@/pages/workflow/WorkflowLogResponseFor
 const GlobalModals = {LegacyAjax, WorkflowLogResponseForModal};
 
 const modalStore = useModalStore();
-const {sideModal1, sideModal2} = storeToRefs(useModalStore());
+const {sideModal1, sideModal2, dialogProps, dialogOpened, dialogLevel} =
+	storeToRefs(useModalStore());
 
 // Component can be either string or vue component
 const component1 = computed(() => {
@@ -48,6 +64,10 @@ const component2 = computed(() => {
 });
 
 function close(modalId) {
-	modalStore.closeSideModal(true, modalId);
+	modalStore.closeSideModalById(true, modalId);
+}
+
+function closeDialog() {
+	modalStore.closeDialog();
 }
 </script>
diff --git a/src/components/Modal/SideModal.mdx b/src/components/Modal/SideModal.mdx
index 19a37ed05..c6180e810 100644
--- a/src/components/Modal/SideModal.mdx
+++ b/src/components/Modal/SideModal.mdx
@@ -13,13 +13,15 @@ import * as SideModalStories from './SideModal.stories.js';
 
 # Side Modal
 
-Side modal has been introduced with new submission listing and will gradually replace both legacy jQuery modal and Vue.js central modal.
-
-To correctly handle accessibility (title, description) and focus management - [headless-ui](https://headlessui.com) library is used.
+Side modal has been introduced in 3.5 all existing modals, including jquery legacy ones are now rendered as SideModal.
 
 ## Usage
 
-We recommend to define modals as individual component files, rather than inline them, that ensures that the `setup` function and any other component life cycle event are triggered as modal is opened/closed. Therefore its easier to control when for example to fetch data from API. We might introduce option to define inline modals for basic use cases in future
+It's important to create modals as separate files, which works best with our [useModal](../?path=/docs/composables-usemodal--docs#opensidemodal) composable. Also having them defined as individual components ensures that the `setup` function and any other component life cycle event are triggered as modal is opened/closed. Therefore, it's easier to control when for example to fetch data from API.
+
+## Accessibility
+
+To correctly handle accessibility (title, description) and focus management - [headless-ui](https://headlessui.com) library is used.
 
 ### Defining Modal Component
 
@@ -42,9 +44,7 @@ We recommend to define modals as individual component files, rather than inline
 			</PkpButton>
 		</template>
 
-		<div class="p-4">
-			<div class="bg-secondary p-4">CONTENT</div>
-		</div>
+		<SideModalLayoutBasic>CONTENT</SideModalLayoutBasic>
 	</SideModalBody>
 </template>
 
diff --git a/src/components/Modal/SideModal.stories.js b/src/components/Modal/SideModal.stories.js
index 455d0d1e6..b5ac1bcda 100644
--- a/src/components/Modal/SideModal.stories.js
+++ b/src/components/Modal/SideModal.stories.js
@@ -3,6 +3,7 @@ import {ref, inject} from 'vue';
 import SideModal from './SideModal.vue';
 import {useModal} from '@/composables/useModal.js';
 import SideModalBody from './SideModalBody.vue';
+import SideModalLayoutBasic from './SideModalLayoutBasic.vue';
 import SideModalLayout2Columns from './SideModalLayout2Columns.vue';
 import PkpForm from '@/components/Form/Form.vue';
 import cloneDeep from 'clone-deep';
@@ -18,7 +19,7 @@ export default {
 };
 
 const SideModalBase = {
-	components: {SideModalBody},
+	components: {SideModalBody, SideModalLayoutBasic},
 	template: `
 		<SideModalBody>
 			<template #pre-title>325</template>
@@ -35,9 +36,7 @@ const SideModalBase = {
 				</PkpButton>
 			</template>
 
-			<div class="p-4">
-				<div class="bg-secondary p-4">CONTENT</div>
-			</div>
+			<SideModalLayoutBasic>CONTENT</SideModalLayoutBasic>
 		</SideModalBody>
 	`,
 };
diff --git a/src/components/Modal/SideModalBody.vue b/src/components/Modal/SideModalBody.vue
index 58785767e..71ad822cf 100644
--- a/src/components/Modal/SideModalBody.vue
+++ b/src/components/Modal/SideModalBody.vue
@@ -51,8 +51,6 @@
 				<slot :close-modal="closeModal" />
 			</div>
 		</div>
-		<!-- Make dialog available inside Modals as it needs to be nested in the DOM to work correclty-->
-		<PkpDialog></PkpDialog>
 	</DialogPanel>
 </template>
 
@@ -60,7 +58,6 @@
 import {inject, computed} from 'vue';
 import {DialogPanel, DialogTitle, DialogDescription} from '@headlessui/vue';
 import Icon from '@/components/Icon/Icon.vue';
-import PkpDialog from '@/components/Modal/Dialog.vue';
 
 import {useLocalize} from '@/composables/useLocalize';
 
diff --git a/src/components/Modal/SideModalLayoutBasic.vue b/src/components/Modal/SideModalLayoutBasic.vue
new file mode 100644
index 000000000..f90b1ff55
--- /dev/null
+++ b/src/components/Modal/SideModalLayoutBasic.vue
@@ -0,0 +1,7 @@
+<template>
+	<div class="p-4">
+		<div class="bg-secondary p-4">
+			<slot></slot>
+		</div>
+	</div>
+</template>
diff --git a/src/composables/useModal.js b/src/composables/useModal.js
index 548a1b54b..f269e93cd 100644
--- a/src/composables/useModal.js
+++ b/src/composables/useModal.js
@@ -11,5 +11,13 @@ export function useModal() {
 		modalStore.openSideModal(component, props, opts);
 	}
 
-	return {openDialog, openSideModal};
+	function closeSideModal(component) {
+		modalStore.closeSideModal(component);
+	}
+
+	function isSideModalOpened(component) {
+		modalStore.isSideModalOpened(component);
+	}
+
+	return {openDialog, openSideModal, closeSideModal, isSideModalOpened};
 }
diff --git a/src/composables/useModal.mdx b/src/composables/useModal.mdx
index a5e494b25..0d07423cb 100644
--- a/src/composables/useModal.mdx
+++ b/src/composables/useModal.mdx
@@ -1,14 +1,10 @@
 import {Primary, Controls, Stories, Meta, ArgTypes} from '@storybook/blocks';
 
-import * as useModalStories from './useModal.stories.js';
-
-<Meta of={useModalStories} />
-
 # useModal
 
 ## openDialog
 
-Dialogs provide a quick way to show a simple confirmation prompt. Import `useModal` composable and use the openDialog() method to create a dialog.
+Dialog component's purpose is to display simple feedback like success and error messages. Or request confirmation for example before deleting some content. Import `useModal` composable and use the openDialog() method to create a dialog. Check [Dialog](../?path=/docs/components-dialog--docs) component for more details on available props.
 
 ```html
 <template>
@@ -22,7 +18,6 @@ Dialogs provide a quick way to show a simple confirmation prompt. Import `useMod
 
 	function openWarningDialog() {
 		openDialog({
-			name: 'example',
 			title: 'Submit Article',
 			message: 'Are you sure you want to submit this article?',
 			actions: [
@@ -70,3 +65,27 @@ Alternatively its possible to pass component name if its globally registered.
 </script>
 
 ```
+
+### Using openSideModal from Options API Component
+
+Using `openSideModal()` works well also from components that are still created in Options API.
+
+One thing to watch out is reactivity. Most new modals should be used in a way, that are managing its own state and they just return (emit) to the parent, when the modal actions are done. But some of our existing modals have lots of state passed from its parent and its important that modals rerenders as this state changes. With composition API, this works perfectly fine out of the box because we define all the state via `refs`. But when for example boolean is passed (this.isSaving), it just passes the value and modal can't track the changes. This can be compensated by wrapping it as computed property in example below.
+
+```javascript
+
+openVersionModal() {
+	const {openSideModal} = useModal();
+	openSideModal(DoiItemVersionModal, {
+		isSaving: computed(() => this.isSaving),
+		isDeposited: computed(() => this.isDeposited),
+		item: this.item,
+		doiListColumns: this.doiListColumns,
+		mutableDois: this.mutableDois,
+		isEditingDois: computed(() => this.isEditingDois),
+		onSaveDois: this.saveDois,
+		onEditDois: this.editDois,
+	});
+},
+
+```
diff --git a/src/pages/manageEmails/EditMailableModal.vue b/src/pages/manageEmails/EditMailableModal.vue
new file mode 100644
index 000000000..0928d6726
--- /dev/null
+++ b/src/pages/manageEmails/EditMailableModal.vue
@@ -0,0 +1,69 @@
+<template>
+	<SideModalBody>
+		<template #title>
+			{{ title }}
+		</template>
+		<SideModalLayoutBasic>
+			<p>{{ mailable.description }}</p>
+			<p>{{ t('manager.mailables.addTemplates') }}</p>
+			<ListPanel :items="mailable.emailTemplates">
+				<template #header>
+					<PkpHeader>
+						<h3>{{ t('manager.mailables.templates') }}</h3>
+						<template #actions>
+							<PkpButton @click="() => emit('openTemplate', null)">
+								{{ t('manager.emails.addEmail') }}
+							</PkpButton>
+						</template>
+					</PkpHeader>
+				</template>
+				<template #item-subtitle="{item}">
+					{{ localize(item.name) }}
+				</template>
+				<template #item-actions="{item}">
+					<badge v-if="item.key === mailable.emailTemplateKey">
+						{{ t('common.default') }}
+					</badge>
+					<PkpButton @click="() => emit('openTemplate', item)">
+						{{ t('common.edit') }}
+					</PkpButton>
+					<PkpButton
+						v-if="item.key === mailable.emailTemplateKey && item.id"
+						:is-warnable="true"
+						@click="() => emit('confirmResetTemplate', item)"
+					>
+						{{ t('common.reset') }}
+					</PkpButton>
+					<PkpButton
+						v-else-if="item.id"
+						:is-warnable="true"
+						@click="emit('confirmRemoveTemplate', item)"
+					>
+						{{ t('common.remove') }}
+					</PkpButton>
+				</template>
+			</ListPanel>
+		</SideModalLayoutBasic>
+	</SideModalBody>
+</template>
+<script setup>
+import SideModalBody from '@/components/Modal/SideModalBody.vue';
+import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
+import ListPanel from '@/components/ListPanel/ListPanel.vue';
+import {useLocalize} from '@/composables/useLocalize';
+import PkpHeader from '@/components/Header/Header.vue';
+import PkpButton from '@/components/Button/Button.vue';
+
+const {t, localize} = useLocalize();
+
+defineProps({
+	title: {type: String, required: true},
+	mailable: {type: Object, required: true},
+});
+
+const emit = defineEmits([
+	'openTemplate',
+	'confirmResetTemplate',
+	'confirmRemoveTemplate',
+]);
+</script>
diff --git a/src/pages/manageEmails/EditTemplateModal.vue b/src/pages/manageEmails/EditTemplateModal.vue
new file mode 100644
index 000000000..0ae12712d
--- /dev/null
+++ b/src/pages/manageEmails/EditTemplateModal.vue
@@ -0,0 +1,29 @@
+<template>
+	<SideModalBody>
+		<template #title>
+			{{ title }}
+		</template>
+		<SideModalLayoutBasic>
+			<PkpForm
+				ref="templateForm"
+				class="manageEmails__templateForm"
+				v-bind="currentTemplateForm"
+				@set="(...args) => emit('updateCurrentTemplateForm', ...args)"
+				@success="(...args) => emit('templateSaved', ...args)"
+			></PkpForm>
+		</SideModalLayoutBasic>
+	</SideModalBody>
+</template>
+
+<script setup>
+import SideModalBody from '@/components/Modal/SideModalBody.vue';
+import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
+import PkpForm from '@/components/Form/Form.vue';
+
+defineProps({
+	title: {type: String, required: true},
+	currentTemplateForm: {required: true, type: Object},
+});
+
+const emit = defineEmits(['updateCurrentTemplateForm', 'templateSaved']);
+</script>
diff --git a/src/pages/statsContext/ContextDownloadReportModal.vue b/src/pages/statsContext/ContextDownloadReportModal.vue
new file mode 100644
index 000000000..f3b0178f9
--- /dev/null
+++ b/src/pages/statsContext/ContextDownloadReportModal.vue
@@ -0,0 +1,53 @@
+<template>
+	<SideModalBody>
+		<template #title>
+			{{ t('common.download') }}
+		</template>
+		<SideModalLayoutBasic>
+			<p>{{ t('stats.context.downloadReport.description') }}</p>
+			<table class="pkpTable pkpStats__reportParams">
+				<tr class="pkpTable__row">
+					<th>{{ t('stats.dateRange') }}</th>
+					<td>{{ dateRangeDescription }}</td>
+				</tr>
+			</table>
+			<action-panel class="pkpStats__reportAction">
+				<h2>{{ t('context.context') }}</h2>
+				<p>
+					{{ t('stats.context.downloadReport.downloadContext.description') }}
+				</p>
+				<template #actions>
+					<pkp-button @click="() => emit('downloadReport', null)">
+						{{ t('stats.context.downloadReport.downloadContext') }}
+					</pkp-button>
+				</template>
+			</action-panel>
+			<action-panel class="pkpStats__reportAction">
+				<h2>{{ t('stats.timeline') }}</h2>
+				<p>
+					{{ timelineDescription }}
+				</p>
+				<template #actions>
+					<pkp-button @click="() => emit('downloadReport', 'timeline')">
+						{{ t('stats.timeline.downloadReport.downloadTimeline') }}
+					</pkp-button>
+				</template>
+			</action-panel>
+		</SideModalLayoutBasic>
+	</SideModalBody>
+</template>
+
+<script setup>
+import SideModalBody from '@/components/Modal/SideModalBody.vue';
+import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
+import {useLocalize} from '@/composables/useLocalize';
+import ActionPanel from '@/components/ActionPanel/ActionPanel.vue';
+import PkpButton from '@/components/Button/Button.vue';
+
+const {t} = useLocalize();
+defineProps({
+	dateRangeDescription: {type: String, required: true},
+	timelineDescription: {type: String, required: true},
+});
+const emit = defineEmits(['downloadReport']);
+</script>
diff --git a/src/pages/statsIssues/IssueDownloadReportModal.vue b/src/pages/statsIssues/IssueDownloadReportModal.vue
new file mode 100644
index 000000000..dd7588197
--- /dev/null
+++ b/src/pages/statsIssues/IssueDownloadReportModal.vue
@@ -0,0 +1,58 @@
+<template>
+	<SideModalBody>
+		<template #title>
+			{{ t('common.download') }}
+		</template>
+		<SideModalLayoutBasic>
+			<p>{{ t('stats.issues.downloadReport.description') }}</p>
+			<table class="pkpTable pkpStats__reportParams">
+				<tr class="pkpTable__row">
+					<th>{{ t('stats.dateRange') }}</th>
+					<td>{{ dateRangeDescription }}</td>
+				</tr>
+				<tr v-if="searchPhrase" class="pkpTable__row">
+					<th>{{ t('common.searchPhrase') }}</th>
+					<td>{{ searchPhrase }}</td>
+				</tr>
+			</table>
+			<ActionPanel class="pkpStats__reportAction">
+				<h2>{{ t('issue.issues') }}</h2>
+				<p>
+					{{ t('stats.issues.downloadReport.downloadIssues.description') }}
+				</p>
+				<template #actions>
+					<PkpButton @click="() => emit('downloadReport', null)">
+						{{ t('stats.issues.downloadReport.downloadIssues') }}
+					</PkpButton>
+				</template>
+			</ActionPanel>
+			<ActionPanel class="pkpStats__reportAction">
+				<h2>{{ t('stats.timeline') }}</h2>
+				<p>
+					{{ timelineDescription }}
+				</p>
+				<template #actions>
+					<PkpButton @click="() => emit('downloadReport', 'timeline')">
+						{{ t('stats.timeline.downloadReport.downloadTimeline') }}
+					</PkpButton>
+				</template>
+			</ActionPanel>
+		</SideModalLayoutBasic>
+	</SideModalBody>
+</template>
+
+<script setup>
+import SideModalBody from '@/components/Modal/SideModalBody.vue';
+import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
+import {useLocalize} from '@/composables/useLocalize';
+import ActionPanel from '@/components/ActionPanel/ActionPanel.vue';
+import PkpButton from '@/components/Button/Button.vue';
+
+const {t} = useLocalize();
+defineProps({
+	searchPhrase: {type: String, required: false, default: ''},
+	timelineDescription: {type: String, required: true},
+	dateRangeDescription: {type: String, required: true},
+});
+const emit = defineEmits(['downloadReport']);
+</script>
diff --git a/src/pages/statsPublications/PublicationsDownloadReportModal.vue b/src/pages/statsPublications/PublicationsDownloadReportModal.vue
new file mode 100644
index 000000000..4fee9165c
--- /dev/null
+++ b/src/pages/statsPublications/PublicationsDownloadReportModal.vue
@@ -0,0 +1,106 @@
+<template>
+	<SideModalBody>
+		<template #title>
+			{{ t('common.download') }}
+		</template>
+		<SideModalLayoutBasic>
+			<p>{{ t('stats.publications.downloadReport.description') }}</p>
+			<table class="pkpTable pkpStats__reportParams">
+				<tr class="pkpTable__row">
+					<th>{{ t('stats.dateRange') }}</th>
+					<td>{{ dateRangeDescription }}</td>
+				</tr>
+				<tr
+					v-for="(filterSet, index) in filters"
+					:key="index"
+					class="pkpTable__row"
+				>
+					<th>{{ filterSet.heading }}</th>
+					<td>{{ getFilterDescription(filterSet) }}</td>
+				</tr>
+				<tr v-if="searchPhrase" class="pkpTable__row">
+					<th>{{ t('common.searchPhrase') }}</th>
+					<td>{{ searchPhrase }}</td>
+				</tr>
+			</table>
+			<ActionPanel class="pkpStats__reportAction">
+				<h2>{{ t('common.publications') }}</h2>
+				<p>
+					{{
+						t(
+							'stats.publications.downloadReport.downloadSubmissions.description',
+						)
+					}}
+				</p>
+				<template #actions>
+					<PkpButton @click="() => emit('downloadReport', null)">
+						{{ t('stats.publications.downloadReport.downloadSubmissions') }}
+					</PkpButton>
+				</template>
+			</ActionPanel>
+			<ActionPanel class="pkpStats__reportAction">
+				<h2>{{ t('submission.files') }}</h2>
+				<p>
+					{{ t('stats.publications.downloadReport.downloadFiles.description') }}
+				</p>
+				<template #actions>
+					<PkpButton @click="() => emit('downloadReport', 'files')">
+						{{ t('stats.publications.downloadReport.downloadFiles') }}
+					</PkpButton>
+				</template>
+			</ActionPanel>
+			<ActionPanel class="pkpStats__reportAction">
+				<h2>{{ t('stats.timeline') }}</h2>
+				<p>
+					{{ timelineDescription }}
+				</p>
+				<template #actions>
+					<PkpButton @click="() => emit('downloadReport', 'timeline')">
+						{{ t('stats.timeline.downloadReport.downloadTimeline') }}
+					</PkpButton>
+				</template>
+			</ActionPanel>
+			<ActionPanel v-if="geoReportType" class="pkpStats__reportAction">
+				<h2>
+					{{ t('common.geographic') }}
+					<Tooltip
+						:tooltip="t('stats.geographic.ccAttribution')"
+						:label="t('stats.geographic.tooltip.label')"
+					></Tooltip>
+				</h2>
+				<p>
+					{{
+						t(
+							'stats.publications.downloadReport.downloadGeographic.description',
+						)
+					}}
+				</p>
+				<template #actions>
+					<PkpButton @click="() => emit('downloadReport', geoReportType)">
+						{{ t('stats.publications.downloadReport.downloadGeographic') }}
+					</PkpButton>
+				</template>
+			</ActionPanel>
+		</SideModalLayoutBasic>
+	</SideModalBody>
+</template>
+
+<script setup>
+import SideModalBody from '@/components/Modal/SideModalBody.vue';
+import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
+import {useLocalize} from '@/composables/useLocalize';
+import ActionPanel from '@/components/ActionPanel/ActionPanel.vue';
+import PkpButton from '@/components/Button/Button.vue';
+import Tooltip from '@/components/Tooltip/Tooltip.vue';
+
+const {t} = useLocalize();
+defineProps({
+	searchPhrase: {type: String, required: false, default: ''},
+	dateRangeDescription: {type: String, required: true},
+	timelineDescription: {type: String, required: true},
+	geoReportType: {type: String, required: false, default: null},
+	getFilterDescription: {type: Function, required: true},
+	filters: {type: Array, required: true},
+});
+const emit = defineEmits(['downloadReport']);
+</script>
diff --git a/src/pages/statsUsers/UserExportModal.vue b/src/pages/statsUsers/UserExportModal.vue
new file mode 100644
index 000000000..851426ca2
--- /dev/null
+++ b/src/pages/statsUsers/UserExportModal.vue
@@ -0,0 +1,27 @@
+<template>
+	<SideModalBody>
+		<template #title>
+			{{ t('manager.export.usersToCsv.label') }}
+		</template>
+		<SideModalLayoutBasic>
+			<PkpForm
+				v-bind="usersReportForm"
+				@set="(...args) => emit('set', ...args)"
+				@success="(...args) => emit('loadExport', ...args)"
+			/>
+		</SideModalLayoutBasic>
+	</SideModalBody>
+</template>
+
+<script setup>
+import SideModalBody from '@/components/Modal/SideModalBody.vue';
+import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
+import PkpForm from '@/components/Form/Form.vue';
+import {useLocalize} from '@/composables/useLocalize';
+const {t} = useLocalize();
+
+defineProps({
+	usersReportForm: {type: Object, required: true},
+});
+const emit = defineEmits(['set', 'loadExport']);
+</script>
diff --git a/src/pages/submissionWizard/ReconfigureSubmissionModal.vue b/src/pages/submissionWizard/ReconfigureSubmissionModal.vue
new file mode 100644
index 000000000..c8986082e
--- /dev/null
+++ b/src/pages/submissionWizard/ReconfigureSubmissionModal.vue
@@ -0,0 +1,28 @@
+<template>
+	<SideModalBody>
+		<template #title>
+			{{ t('submission.wizard.changeSubmission') }}
+		</template>
+		<SideModalLayoutBasic>
+			<PkpForm
+				v-bind="reconfigureSubmissionForm"
+				@set="(...args) => emit('set', ...args)"
+				@success="(...args) => emit('reconfigureSubmission', ...args)"
+			/>
+		</SideModalLayoutBasic>
+	</SideModalBody>
+</template>
+
+<script setup>
+import SideModalBody from '@/components/Modal/SideModalBody.vue';
+import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
+import PkpForm from '@/components/Form/Form.vue';
+import {useLocalize} from '@/composables/useLocalize';
+
+const {t} = useLocalize();
+
+defineProps({
+	reconfigureSubmissionForm: {type: Object, required: true},
+});
+const emit = defineEmits(['set', 'reconfigureSubmission']);
+</script>
diff --git a/src/pages/workflow/SelectRevisionDecisionModal.vue b/src/pages/workflow/SelectRevisionDecisionModal.vue
new file mode 100644
index 000000000..b5c605538
--- /dev/null
+++ b/src/pages/workflow/SelectRevisionDecisionModal.vue
@@ -0,0 +1,26 @@
+<template>
+	<SideModalBody>
+		<template #title>
+			{{ t('editor.submission.revisions') }}
+		</template>
+		<SideModalLayoutBasic>
+			<PkpForm
+				v-bind="activeForm"
+				@set="(...args) => emit('set', ...args)"
+				@success="(...args) => emit('goToRevisionDecision', ...args)"
+			/>
+		</SideModalLayoutBasic>
+	</SideModalBody>
+</template>
+
+<script setup>
+import SideModalBody from '@/components/Modal/SideModalBody.vue';
+import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
+import PkpForm from '@/components/Form/Form.vue';
+import {useLocalize} from '@/composables/useLocalize';
+defineProps({
+	activeForm: {type: Object, required: true},
+});
+const {t} = useLocalize();
+const emit = defineEmits(['set', 'goToRevisionDecision']);
+</script>
diff --git a/src/stores/modalStore.js b/src/stores/modalStore.js
index c2090cfb9..94d718c97 100644
--- a/src/stores/modalStore.js
+++ b/src/stores/modalStore.js
@@ -1,5 +1,5 @@
 import {defineStore} from 'pinia';
-import {ref, markRaw} from 'vue';
+import {ref, markRaw, computed} from 'vue';
 import {t} from '@/utils/i18n';
 export const useModalStore = defineStore('modal', () => {
 	/**
@@ -9,20 +9,23 @@ export const useModalStore = defineStore('modal', () => {
 	 * Dialog is also available inside SideModalBody and level helps to track
 	 * which of the existing dialogs should open
 	 */
-	const dialogLevel = ref(0);
-	function increaseDialogLevel() {
-		dialogLevel.value++;
-	}
-
-	function decreaseDialogLevel() {
-		dialogLevel.value--;
-	}
 
+	const dialogLevel = computed(() => {
+		if (sideModal2?.value?.opened) {
+			return 2;
+		} else if (sideModal1?.value?.opened) {
+			return 1;
+		}
+		return 0;
+	});
 	/** dialogProps coming from openDialog */
 	const dialogProps = ref({});
 	const dialogOpened = ref(false);
 
 	function openDialog(_dialogProps) {
+		if (_dialogProps.bodyComponent) {
+			_dialogProps.bodyComponent = markRaw(_dialogProps.bodyComponent);
+		}
 		dialogProps.value = _dialogProps;
 		dialogOpened.value = true;
 	}
@@ -104,7 +107,24 @@ export const useModalStore = defineStore('modal', () => {
 		}
 	}
 
-	function closeSideModal(triggerLegacyCloseHandler = true, _modalId) {
+	function closeSideModal(component) {
+		if (sideModal1?.value?.component === component) {
+			closeSideModalById(false, sideModal1?.value?.modalId);
+		} else if (sideModal2?.value?.component === component) {
+			closeSideModalById(false, sideModal2?.value?.modalId);
+		}
+	}
+
+	function isSideModalOpened(component) {
+		if (sideModal1?.value?.component === component) {
+			return true;
+		} else if (sideModal2?.value?.component === component) {
+			return true;
+		}
+		return false;
+	}
+
+	function closeSideModalById(triggerLegacyCloseHandler = true, _modalId) {
 		let modalToClose = null;
 		if (sideModal1?.value?.modalId === _modalId && sideModal1?.value?.opened) {
 			modalToClose = sideModal1;
@@ -166,7 +186,7 @@ export const useModalStore = defineStore('modal', () => {
 
 	// Listener for close modal requests coming from legacy handler.
 	pkp?.eventBus?.$on('close-modal-vue', (_args) => {
-		closeSideModal(false, _args.modalId);
+		closeSideModalById(false, _args.modalId);
 	});
 
 	// Listener for open dialog modals coming from legacy handler.
@@ -181,10 +201,8 @@ export const useModalStore = defineStore('modal', () => {
 
 	return {
 		/** dialog level */
-		decreaseDialogLevel,
-		increaseDialogLevel,
-		/** opening dialog */
 		dialogLevel,
+		/** opening dialog */
 		dialogProps,
 		dialogOpened,
 		openDialogNetworkError,
@@ -192,6 +210,8 @@ export const useModalStore = defineStore('modal', () => {
 		closeDialog,
 		openSideModal,
 		closeSideModal,
+		closeSideModalById,
+		isSideModalOpened,
 		sideModal1,
 		sideModal2,
 	};