From bed14c26e50cc667f97a1808e34bd6083698ed1d Mon Sep 17 00:00:00 2001
From: Blesilda Ramirez <ramirezblesilda@gmail.com>
Date: Sat, 25 Jan 2025 00:22:38 -0500
Subject: [PATCH 1/4] pkp/pkp-lib#10820 Add FormErrorSummary component

---
 src/components/Form/Form.stories.js      | 40 ++++++++++++++++++++++++
 src/components/Form/FormErrorSummary.vue | 32 +++++++++++++++++++
 2 files changed, 72 insertions(+)
 create mode 100644 src/components/Form/FormErrorSummary.vue

diff --git a/src/components/Form/Form.stories.js b/src/components/Form/Form.stories.js
index 3acca87b5..9a91c90e0 100644
--- a/src/components/Form/Form.stories.js
+++ b/src/components/Form/Form.stories.js
@@ -1,4 +1,5 @@
 import Form from './Form.vue';
+import FormErrorSummary from './FormErrorSummary.vue';
 import {useContainerStateManager} from '@/composables/useContainerStateManager';
 import FormBase from './mocks/form-base';
 import FormMultilingual from './mocks/form-multilingual';
@@ -126,3 +127,42 @@ export const WithErrors = {
 
 	args: {},
 };
+
+export const WithErrorSummary = {
+	render: (args) => ({
+		components: {PkpForm: Form, FormErrorSummary},
+		setup() {
+			const {get, set, components} = useContainerStateManager();
+			const errors = {
+				email: ['Please provide a valid email address'],
+				affiliation: {
+					en: ['You must enter your affiliation in English.'],
+					fr_CA: ['You must enter your affiliation in French.'],
+					ar: ['You must enter your affiliation in Arabic.'],
+				},
+				'user-locales': ['You must select at least two options.'],
+				bio: {
+					en: ['Please provide a bio statement to accompany your publication.'],
+				},
+				country: ['Please select your country.'],
+				'mailing-address': [
+					'You must enter a mailing address where you can receive post.',
+				],
+			};
+			set('errorSummary', {
+				...FormUser,
+				...args,
+				errors,
+			});
+			return {args, errors, get, set, components};
+		},
+		template: `
+			<FormErrorSummary :errors="errors"/>
+			<PkpForm v-bind="components.errorSummary" @set="set" />
+		`,
+	}),
+
+	args: {
+		showErrorFooter: false,
+	},
+};
diff --git a/src/components/Form/FormErrorSummary.vue b/src/components/Form/FormErrorSummary.vue
new file mode 100644
index 000000000..3fa04d4bd
--- /dev/null
+++ b/src/components/Form/FormErrorSummary.vue
@@ -0,0 +1,32 @@
+<template>
+	<div
+		v-if="errorsCount"
+		class="inline-flex w-full gap-x-1 rounded border border-s-4 border-attention p-2"
+	>
+		<div class="leading-none">
+			<Icon icon="Error" class="h-5 w-5" :inline="true" />
+		</div>
+		<span class="text-lg-normal">
+			{{ message }}
+		</span>
+	</div>
+</template>
+
+<script setup>
+import {computed} from 'vue';
+import Icon from '@/components/Icon/Icon.vue';
+
+const props = defineProps({
+	errors: {
+		type: Object,
+		default: () => {},
+	},
+});
+
+const errorsCount = computed(() => Object.keys(props.errors).length);
+
+const message = computed(() => {
+	const error = errorsCount.value > 1 ? 'errors' : 'error';
+	return `${errorsCount.value} ${error} detected! Please correct the following ${error} before proceeding.`;
+});
+</script>

From 7a898b825bcd2ad042c47dabf7d769208f08ac70 Mon Sep 17 00:00:00 2001
From: Blesilda Ramirez <ramirezblesilda@gmail.com>
Date: Sat, 25 Jan 2025 00:25:02 -0500
Subject: [PATCH 2/4] pkp/pkp-lib#10820 Add showErrorFooter prop in Form and
 FormPage components

---
 src/components/Form/Form.vue     | 8 ++++++++
 src/components/Form/FormPage.vue | 8 +++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/Form/Form.vue b/src/components/Form/Form.vue
index cd3555845..2a5512260 100644
--- a/src/components/Form/Form.vue
+++ b/src/components/Form/Form.vue
@@ -61,6 +61,7 @@
 				:visible-locales="visibleLocales"
 				:available-locales="availableLocales"
 				:is-saving="isSaving"
+				:show-error-footer="showErrorFooter"
 				@change="fieldChanged"
 				@page-submitted="nextPage"
 				@previous-page="setCurrentPage(false)"
@@ -135,6 +136,13 @@ export default {
 		 *  Async function, receiving data from form and returning {validationError, data} from useFetch
 		 */
 		customSubmit: Function,
+		/** If the error summary is shown in the form's footer. */
+		showErrorFooter: {
+			type: Boolean,
+			default() {
+				return true;
+			},
+		},
 	},
 	emits: [
 		/** When the form props need to be updated. The payload is an object with any keys that need to be modified. */
diff --git a/src/components/Form/FormPage.vue b/src/components/Form/FormPage.vue
index 72af383a4..e20b01527 100644
--- a/src/components/Form/FormPage.vue
+++ b/src/components/Form/FormPage.vue
@@ -20,7 +20,7 @@
 			aria-live="polite"
 		>
 			<FormErrors
-				v-if="Object.keys(errors).length"
+				v-if="Object.keys(errors).length && showErrorFooter"
 				:errors="errors"
 				:fields="fields"
 				@showField="showField"
@@ -108,6 +108,12 @@ export default {
 			},
 		},
 		isSaving: Boolean,
+		showErrorFooter: {
+			type: Boolean,
+			default() {
+				return true;
+			},
+		},
 	},
 	data() {
 		return {

From 897f48765f6d5ab8289c8c7dd87cfe7dc2da216e Mon Sep 17 00:00:00 2001
From: Blesilda Ramirez <ramirezblesilda@gmail.com>
Date: Sat, 25 Jan 2025 00:27:19 -0500
Subject: [PATCH 3/4] pkp/pkp-lib#10820 Use FormErrorSummary in
 UserInvitationDetailsFormStep component

---
 src/pages/userInvitation/UserInvitationDetailsFormStep.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/pages/userInvitation/UserInvitationDetailsFormStep.vue b/src/pages/userInvitation/UserInvitationDetailsFormStep.vue
index ce0e97851..7ac9b8a28 100644
--- a/src/pages/userInvitation/UserInvitationDetailsFormStep.vue
+++ b/src/pages/userInvitation/UserInvitationDetailsFormStep.vue
@@ -1,8 +1,12 @@
 <template>
 	<div v-if="store.invitationPayload.userId === null">
+		<div v-if="Object.keys(store.errors).length" class="p-4">
+			<FormErrorSummary :errors="store.errors" />
+		</div>
 		<PkpForm
 			v-bind="userForm"
 			class="userInvitation__stepForm"
+			:show-error-footer="false"
 			@set="updateUserForm"
 		></PkpForm>
 	</div>
@@ -60,6 +64,7 @@ import {useTranslation} from '@/composables/useTranslation';
 import UserInvitationUserGroupsTable from './UserInvitationUserGroupsTable.vue';
 import {useUserInvitationPageStore} from './UserInvitationPageStore';
 import {useForm} from '@/composables/useForm';
+import FormErrorSummary from '@/components/Form/FormErrorSummary.vue';
 
 /**
  * Update the payload by using form values on multilingual or not

From 09e4ca3483fe4e0294778ff5f0fba5794986910f Mon Sep 17 00:00:00 2001
From: Blesilda Ramirez <ramirezblesilda@gmail.com>
Date: Wed, 5 Feb 2025 13:37:48 -0500
Subject: [PATCH 4/4] pkp/pkp-lib#10820 Add locale keys for new error summary
 message

---
 public/globals.js                        |  8 +++--
 src/components/Form/Form.stories.js      | 44 +++++++++++++-----------
 src/components/Form/FormErrorSummary.vue | 10 ++++--
 3 files changed, 37 insertions(+), 25 deletions(-)

diff --git a/public/globals.js b/public/globals.js
index 9e0dbf984..8ffd917d6 100644
--- a/public/globals.js
+++ b/public/globals.js
@@ -431,6 +431,10 @@ window.pkp = {
 		'form.errorOne': 'Please correct one error.',
 		'form.errors':
 			'The form was not saved because {$count} error(s) were encountered. Please correct these errors and try again.',
+		'form.errorSummaryOne':
+			'1 error detected! Please correct the error below before proceeding.',
+		'form.errorSummaryMany':
+			'{$count} errors detected! Please correct the errors below before proceeding.',
 		'form.multilingualLabel': '{$label} in {$localeName}',
 		'form.multilingualProgress': '{$count}/{$total} languages completed',
 		'form.saved': 'Saved',
@@ -454,8 +458,8 @@ window.pkp = {
 		'grid.noItems': 'No Items',
 		'grid.user.confirmLogInAs':
 			'Log in as this user? All actions you perform will be attributed to this user.',
-		'grid.user.currentUsers':'Current Users',
-		'grid.action.mergeUser':'Merge User',
+		'grid.user.currentUsers': 'Current Users',
+		'grid.action.mergeUser': 'Merge User',
 		'help.help': 'Help',
 		'informationCenter.informationCenter': 'Information Center',
 		'invitation.cancelInvite.actionName': 'Cancel Invite',
diff --git a/src/components/Form/Form.stories.js b/src/components/Form/Form.stories.js
index 9a91c90e0..497dd0c36 100644
--- a/src/components/Form/Form.stories.js
+++ b/src/components/Form/Form.stories.js
@@ -133,32 +133,34 @@ export const WithErrorSummary = {
 		components: {PkpForm: Form, FormErrorSummary},
 		setup() {
 			const {get, set, components} = useContainerStateManager();
-			const errors = {
-				email: ['Please provide a valid email address'],
-				affiliation: {
-					en: ['You must enter your affiliation in English.'],
-					fr_CA: ['You must enter your affiliation in French.'],
-					ar: ['You must enter your affiliation in Arabic.'],
-				},
-				'user-locales': ['You must select at least two options.'],
-				bio: {
-					en: ['Please provide a bio statement to accompany your publication.'],
-				},
-				country: ['Please select your country.'],
-				'mailing-address': [
-					'You must enter a mailing address where you can receive post.',
-				],
-			};
-			set('errorSummary', {
+			set('example', {
 				...FormUser,
 				...args,
-				errors,
+				errors: {
+					email: ['Please provide a valid email address'],
+					affiliation: {
+						en: ['You must enter your affiliation in English.'],
+						fr_CA: ['You must enter your affiliation in French.'],
+						ar: ['You must enter your affiliation in Arabic.'],
+					},
+					'user-locales': ['You must select at least two options.'],
+					bio: {
+						en: [
+							'Please provide a bio statement to accompany your publication.',
+						],
+					},
+					country: ['Please select your country.'],
+					'mailing-address': [
+						'You must enter a mailing address where you can receive post.',
+					],
+				},
 			});
-			return {args, errors, get, set, components};
+
+			return {args, get, set, components};
 		},
 		template: `
-			<FormErrorSummary :errors="errors"/>
-			<PkpForm v-bind="components.errorSummary" @set="set" />
+			<FormErrorSummary :errors="components.example.errors"/>
+			<PkpForm v-bind="components.example" @set="set" />
 		`,
 	}),
 
diff --git a/src/components/Form/FormErrorSummary.vue b/src/components/Form/FormErrorSummary.vue
index 3fa04d4bd..cd2aad382 100644
--- a/src/components/Form/FormErrorSummary.vue
+++ b/src/components/Form/FormErrorSummary.vue
@@ -15,6 +15,9 @@
 <script setup>
 import {computed} from 'vue';
 import Icon from '@/components/Icon/Icon.vue';
+import {useLocalize} from '@/composables/useLocalize';
+
+const {t} = useLocalize();
 
 const props = defineProps({
 	errors: {
@@ -26,7 +29,10 @@ const props = defineProps({
 const errorsCount = computed(() => Object.keys(props.errors).length);
 
 const message = computed(() => {
-	const error = errorsCount.value > 1 ? 'errors' : 'error';
-	return `${errorsCount.value} ${error} detected! Please correct the following ${error} before proceeding.`;
+	const count = errorsCount.value;
+	if (count > 1) {
+		return t('form.errorSummaryMany', {count});
+	}
+	return t('form.errorSummaryOne');
 });
 </script>