send invitation

Author: ipula

src/components/Container/PageOJS.vue

@@ -2,13 +2,11 @@
 import Page from '@/components/Container/Page.vue';
 import SubmissionsPage from '@/pages/submissions/SubmissionsPage.vue';
 import UserInvitationPage from '@/pages/userInvitation/UserInvitationPage.vue';
-import AcceptInvitationPage from '@/pages/acceptInvitation/AcceptInvitationPage.vue';
 
 export default {
 	components: {
 		SubmissionsPage,
 		UserInvitationPage,
-		AcceptInvitationPage,
 	},
 	extends: Page,
 };

src/composables/useForm.js

@@ -49,6 +49,20 @@ export function useForm(_form) {
 		);
 	}
 
+	function connectWithErrors(errors) {
+		watch(
+			errors,
+			(newErrors) => {
+				Object.keys(newErrors).forEach((key) => {
+					if (doesFieldExist(form.value, key)) {
+						form.value.errors[key] = newErrors[key];
+					}
+				});
+			},
+			{immediate: true},
+		);
+	}
+
 	function set(key, data) {
 		Object.keys(data).forEach(function (dataKey) {
 			form.value[dataKey] = data[dataKey];
@@ -109,5 +123,6 @@ export function useForm(_form) {
 		clearForm,
 		form,
 		connectWithPayload,
+		connectWithErrors,
 	};
 }

src/pages/acceptInvitation/AcceptInvitationCreateUserAccount.vue

@@ -1,71 +1,94 @@
 <template>
-	<div v-if="store.user === null">
+	<div v-if="store.invitationPayload.userId === null">
 		<pkp-form
 			v-bind="userForm"
 			class="userInvitation__stepForm"
 			@set="updateUserForm"
 		></pkp-form>
 	</div>
-	<div v-if="store.user !== null">
+	<div v-if="store.invitationPayload.userId !== null">
 		<div class="userInvitation__reviewPanel__item">
 			<h4 class="userInvitation__reviewPanel__item__header">Email Address</h4>
 			<div class="userInvitation__reviewPanel__item__value">
-				{{ store.user.email }}
+				{{ store.invitationPayload.email }}
 			</div>
 			<h4 class="userInvitation__reviewPanel__item__header">ORCID ID</h4>
 			<div class="userInvitation__reviewPanel__item__value">
 				{{
-					store.user.orcid ? store.user.orcid : t('invitation.orcid.message')
+					store.invitationPayload.orcid
+						? store.invitationPayload.orcid
+						: t('invitation.orcid.message')
 				}}
 				<icon
-					v-if="store.user.orcidAccessToken !== null"
+					v-if="store.invitationPayload.orcidValidation"
 					icon="orcid"
 					:inline="true"
 				/>
 			</div>
 			<h4 class="userInvitation__reviewPanel__item__header">Given Name</h4>
 			<div class="userInvitation__reviewPanel__item__value">
-				{{ store.user.fullName }}
+				{{ store.invitationPayload.givenName }}
 			</div>
 			<h4 class="userInvitation__reviewPanel__item__header">Family Name</h4>
 			<div class="userInvitation__reviewPanel__item__value">
-				{{ store.user.fullName }}
+				{{ store.invitationPayload.familyName }}
 			</div>
 			<h4 class="userInvitation__reviewPanel__item__header">Affiliation</h4>
 			<div class="userInvitation__reviewPanel__item__value">
-				{{ store.user.affiliation[store.primaryLocale] }}
+				{{ store.invitationPayload.affiliation }}
 			</div>
 		</div>
 	</div>
 	<br />
-	<UserInvitationUserGroupsTable :section="section" />
+	<UserInvitationUserGroupsTable
+		:user-groups="userGroups"
+		:errors="sectionErrors"
+	/>
 </template>
 
 <script setup>
-import {defineProps} from 'vue';
+import {defineProps, computed} from 'vue';
 import PkpForm from '@/components/Form/Form.vue';
 import {useTranslation} from '@/composables/useTranslation';
 import UserInvitationUserGroupsTable from './UserInvitationUserGroupsTable.vue';
 import {useUserInvitationPageStore} from './UserInvitationPageStore';
 import {useForm} from '@/composables/useForm';
 
 function updateUserForm(a, {fields}, c, d) {
-	fields.forEach((field) => {
-		if (store.invitationPayload[field.name] !== field.value) {
-			store.updatePayload(field.name, field.value);
-		}
-	});
+	if (fields) {
+		fields.forEach((field) => {
+			if (store.invitationPayload[field.name] !== field.value) {
+				store.updatePayload(field.name, field.value);
+			}
+		});
+	}
 }
 
 const {t} = useTranslation();
 const store = useUserInvitationPageStore();
 
 const props = defineProps({
-	section: {type: Object, required: true},
+	form: {type: Object, required: true},
+	userGroups: {type: Object, required: true},
+	validateFields: {type: Array, required: true},
 });
+const {
+	form: userForm,
+	connectWithPayload,
+	connectWithErrors,
+} = useForm(props.form);
 
-const {form: userForm, connectWithPayload} = useForm(props.section.form);
 connectWithPayload(store.invitationPayload);
+
+const sectionErrors = computed(() => {
+	return props.validateFields.reduce((obj, key) => {
+		if (store.errors[key]) {
+			obj[key] = store.errors[key];
+		}
+		return obj;
+	}, {});
+});
+connectWithErrors(sectionErrors);
 </script>
 <style lang="less">
 select {

src/pages/acceptInvitation/AcceptInvitationCreateUserForms.vue

@@ -4,39 +4,39 @@
 		:add-c-c-label="t('common.addCCBCC')"
 		:attach-files-label="t('common.attachFiles')"
 		:attached-files-label="t('common.attachedFiles')"
-		:attachers="section.email.attachers"
-		:attachments="section.email.attachments"
-		:bcc="section.email.bcc"
+		:attachers="props.email.attachers"
+		:attachments="props.email.attachments"
+		:bcc="props.email.bcc"
 		:bcc-label="t('email.bcc')"
 		:body-label="t('stageParticipants.notify.message')"
-		:can-change-recipients="section.email.canChangeRecipients"
-		:cc="section.email.cc"
+		:can-change-recipients="props.email.canChangeRecipients"
+		:cc="props.email.cc"
 		:cc-label="t('email.cc')"
 		:confirm-switch-locale-label="t('email.confirmSwitchLocale')"
 		:deselect-label="t('common.deselect')"
-		:email-templates="section.email.emailTemplates"
+		:email-templates="props.email.emailTemplates"
 		:email-templates-api-url="store.emailTemplatesApiUrl"
-		:errors="section.email.errors"
+		:errors="sectionErrors.emailComposer"
 		:find-template-label="t('common.findTemplate')"
-		:initial-template-key="section.email.initialTemplateKey"
+		:initial-template-key="props.email.initialTemplateKey"
 		:insert-label="t('common.insert')"
 		:insert-modal-label="t('common.insertContent')"
 		:insert-content-label="t('common.content')"
 		:insert-search-label="t('common.insertContentSearch')"
 		:load-template-label="t('common.emailTemplates')"
-		:locale="section.email.locale"
-		:locales="section.email.locales"
+		:locale="props.email.locale"
+		:locales="props.email.locales"
 		:more-search-results-label="t('common.numberedMore')"
-		:recipient-options="section.email.recipientOptions"
-		:recipients="section.email.recipients"
+		:recipient-options="props.email.recipientOptions"
+		:recipients="props.email.recipients"
 		:recipients-label="t('email.to')"
 		:remove-item-label="t('common.removeItem')"
 		:searching-label="t('common.searching')"
 		:search-results-label="t('search.searchResults')"
 		:subject-label="t('email.subject')"
 		:switch-to-label="t('common.switchTo')"
 		:switch-to-named-language-label="t('common.switchToNamedItem')"
-		:variables="section.email.variables"
+		:variables="props.email.variables"
 		v-bind="emailComposer"
 		@set="(componentName, update) => updateEmail(update)"
 	></composer>
@@ -50,7 +50,13 @@ import {defineProps} from 'vue';
 import {useUserInvitationPageStore} from './UserInvitationPageStore';
 
 const props = defineProps({
-	section: {type: Object, required: true},
+	email: {type: Object, required: true},
+	validateFields: {
+		type: Array,
+		default() {
+			return null;
+		},
+	},
 });
 const {t} = useTranslation();
 
@@ -67,8 +73,17 @@ function updateEmail(update) {
 
 if (!store.invitationPayload.body) {
 	updateEmail({
-		subject: props.section.email.subject,
-		body: props.section.email.body,
+		subject: props.email.subject,
+		body: props.email.body,
 	});
 }
+
+const sectionErrors = computed(() => {
+	return props.validateFields.reduce((obj, key) => {
+		if (store.errors[key]) {
+			obj[key] = store.errors[key];
+		}
+		return obj;
+	}, {});
+});
 </script>

src/pages/acceptInvitation/AcceptInvitationHeader.vue

@@ -48,8 +48,52 @@ export const Init = {
 				),
 				http.post(
 					'https://mock/index.php/publicknowledge/api/v1/invitations/15',
-					() => {
-						return HttpResponse.json({});
+					async ({request}) => {
+						const data = await request.json();
+						let errors = {};
+
+						data.userGroupsToAdd.forEach((element, index) => {
+							let objectErrors = {};
+							Object.keys(element).forEach((key) => {
+								if (element[key] === null) {
+									objectErrors[key] = ['This field is required'];
+								}
+							});
+							if (Object.keys(objectErrors).length > 0) {
+								errors['userGroupsToAdd'] = {
+									...errors['userGroupsToAdd'],
+									[index]: objectErrors,
+								};
+							}
+						});
+
+						if (data.email === '') {
+							errors['email'] = ['This field is required'];
+						}
+						if (data.orcid === '') {
+							errors['orcid'] = ['This field is required'];
+						}
+						if (data.familyName === '') {
+							errors['familyName'] = ['This field is required'];
+						}
+						if (data.givenName === '') {
+							errors['givenName'] = ['This field is required'];
+						}
+
+						Object.keys(data.emailComposer).forEach((element) => {
+							if (data.emailComposer[element] === '') {
+								errors['emailComposer'] = {
+									...errors['emailComposer'],
+									[element]: ['This field is required'],
+								};
+							}
+						});
+
+						if (Object.keys(errors).length > 0) {
+							return HttpResponse.json(errors, {status: 422});
+						}
+
+						return HttpResponse.json({status: 201});
 					},
 				),
 				http.post(

src/pages/acceptInvitation/AcceptInvitationPage.mdx

@@ -31,53 +31,12 @@
 						<p>{{ step.description }}</p>
 					</panel-section>
 					<panel-section v-for="section in step.sections" :key="section.id">
-						<template v-if="step.type === 'email'">
-							<notification
-								v-if="Object.keys(store.errors).length > 0"
-								type="warning"
-							>
-								{{ t('invitation.wizard.errors') }}
-							</notification>
-						</template>
 						<component
 							:is="userInvitationComponents[section.sectionComponent]"
 							:key="section.sectionComponent"
-							:section="section"
+							v-bind="section.props"
 						/>
 					</panel-section>
-					<!-- <template v-if="step.type === 'form' && step.sections.length > 0">
-						<panel-section v-for="section in step.sections" :key="section.id">
-							<UserInvitationDetailsFormStep :section="section" />
-						</panel-section>
-					</template>
-					<template v-if="step.type === 'form' && step.sections.length === 0">
-						<panel-section :key="step.id">
-							<UserInvitationSearchFormStep
-								:email-field="store.emailField"
-								:username-field="store.usernameField"
-								:orcid-field="store.orcidField"
-								:email-change="store.emailChange"
-								:orcid-change="store.usernameChange"
-								:username-change="store.orcidChange"
-							/>
-						</panel-section>
-					</template>
-					<template v-else-if="step.type === 'email'">
-						<panel-section v-for="section in step.sections" :key="section.id">
-							<notification
-								v-if="Object.keys(store.errors).length"
-								type="warning"
-							>
-								{{ t('invitation.wizard.errors') }}
-							</notification>
-							<UserInvitationEmailComposerStep
-								:id="step.id"
-								:section="section"
-								:update-step="store.updateStep"
-								:email-templates-api-url="emailTemplatesApiUrl"
-							/>
-						</panel-section>
-					</template> -->
 				</panel>
 			</step>
 		</steps>
@@ -127,11 +86,6 @@ const props = defineProps({
 		type: Array,
 		required: true,
 	},
-	/** API url search user */
-	searchUserApiUrl: {
-		type: String,
-		required: true,
-	},
 	/** primary language */
 	primaryLocale: {
 		type: String,
@@ -142,11 +96,6 @@ const props = defineProps({
 		type: String,
 		required: true,
 	},
-	/** API url for send email invitations for users */
-	inviteUserApiUrl: {
-		type: String,
-		required: true,
-	},
 	pageTitle: {
 		type: String,
 		required: true,
@@ -155,24 +104,10 @@ const props = defineProps({
 		type: String,
 		required: true,
 	},
-	/** Url for redirect to invitations */
-	userInvitationSavedUrl: {
-		type: String,
-		required: true,
-	},
-	/** all user groups */
-	userGroups: {
-		type: Array,
-		required: true,
-	},
-	/** User object for edit invitations */
-	user: {
+	invitationPayload: {
 		type: Object,
-		default() {
-			return null;
-		},
+		required: true,
 	},
-	invitationPayload: {type: Object, required: true},
 });
 const {t} = useTranslation();
 const wrapper = ref(null);

src/pages/acceptInvitation/AcceptInvitationPage.stories.js

@@ -8,7 +8,7 @@ export const useUserInvitationPageStore = defineComponentStore(
 	(pageInitConfig) => {
 		const {openDialog} = useModal();
 
-		/** Invitation payload, initial valu */
+		/** Invitation payload, initial value */
 		const invitationPayload = ref({...pageInitConfig.invitationPayload});
 
 		function updatePayload(fieldName, value) {
@@ -18,27 +18,21 @@ export const useUserInvitationPageStore = defineComponentStore(
 		/** Steps */
 		const currentStepId = ref(pageInitConfig.steps[0].id);
 		const steps = ref(pageInitConfig.steps);
-		const pageTitleDescription = ref(pageInitConfig.pageTitleDescription);
-		const primaryLocale = ref(pageInitConfig.primaryLocale);
-		const errors = ref({});
 		const startedSteps = ref([]);
-		const user = ref(pageInitConfig.user);
 
 		/**
 		 * The currently active step
 		 */
 		const currentStep = computed(() => {
 			return steps.value.find((step) => step.id === currentStepId.value);
 		});
-
 		/**
 		 * The index of the currently active step
 		 * in the steps array
 		 */
 		const currentStepIndex = computed(() => {
 			return steps.value.findIndex((step) => step.id === currentStepId.value);
 		});
-
 		/**
 		 * Is the current step the first step?
 		 */
@@ -54,11 +48,99 @@ export const useUserInvitationPageStore = defineComponentStore(
 		});
 
 		/**
-		 * Are there any validation errors?
+		 * Add a step change to the browser history so the
+		 * user can use the browser's back button
+		 *
+		 * @param {Object} step The step to add
 		 */
-		const isValid = computed(() => {
-			return Object.keys(errors.value).length === 0;
+		function addHistory(step) {
+			window.history.pushState({}, step.name, '#' + step.id);
+		}
+
+		/**
+		 * Go to the next step or submit if this is the last step
+		 */
+		async function nextStep() {
+			if (registeredActionsForSteps[currentStep.value.id]) {
+				let shouldContinue = true;
+				shouldContinue =
+					await registeredActionsForSteps[currentStep.value.id]();
+				if (!shouldContinue) {
+					return;
+				}
+			}
+			if (isOnLastStep.value) {
+				submitInvitation();
+			} else {
+				if (!currentStep.value?.skipInvitationUpdate) {
+					await updateInvitation();
+					// this needs to check only relevant errors for given step using the step.validateFields
+					if (currentStepErrorsPerSection.value.length === 0) {
+						openStep(steps.value[1 + currentStepIndex.value].id);
+					}
+				} else {
+					openStep(steps.value[1 + currentStepIndex.value].id);
+				}
+			}
+		}
+
+		/**
+		 * Go to a step in the wizard
+		 *
+		 * @param {String} stepId
+		 */
+		function openStep(stepId) {
+			const newStep = steps.value.find((step) => step.id === stepId);
+			if (!newStep) {
+				return;
+			}
+			errors.value = [];
+			currentStepId.value = stepId;
+		}
+
+		/**
+		 * Go to the previous step in the wizard
+		 */
+		function previousStep() {
+			const previousIndex = currentStepIndex.value - 1;
+			if (previousIndex >= 0) {
+				openStep(steps.value[previousIndex].id);
+			}
+		}
+		/**
+		 * Update when the step changes
+		 */
+		watch(currentStepIndex, async (newVal, oldVal) => {
+			if (newVal === oldVal) {
+				return;
+			}
+
+			// Update the list of steps that have been started
+			steps.value.forEach((step, i) => {
+				if (
+					!startedSteps.value.includes(step.id) &&
+					i <= currentStepIndex.value
+				) {
+					startedSteps.value.push(step.id);
+				}
+			});
+
+			// Track step changes in the title and browser history
+			const step = steps.value[newVal];
+			// document.title = this.getPageTitle(step);
+			if (step.id !== window.location.hash.replace('#', '')) {
+				addHistory(step);
+			}
+
+			// Trigger validation on the review step
+			if (newVal === steps.value.length - 1) {
+				// validate();
+			}
 		});
+
+		/** Page titles */
+		const pageTitleDescription = ref(pageInitConfig.pageTitleDescription);
+		const primaryLocale = ref(pageInitConfig.primaryLocale);
 		/**
 		 * The title to show at the top of the page
 		 */
@@ -82,6 +164,40 @@ export const useUserInvitationPageStore = defineComponentStore(
 			);
 		});
 
+		/** All Erros */
+		const errors = ref({});
+
+		/**
+		 * Are there any validation errors?
+		 */
+		const isValid = computed(() => {
+			return !Object.keys(errors.value).length;
+		});
+
+		/**
+		 * set current step section errors
+		 */
+		const currentStepErrorsPerSection = computed(() => {
+			let error = [];
+			if (Object.keys(errors.value).length != 0) {
+				currentStep.value.sections.forEach((element, index) => {
+					if (element.props.validateFields.length > 0) {
+						let sectionErr = {};
+						element.props.validateFields.forEach((field) => {
+							if (Object.keys(errors.value).includes(field)) {
+								sectionErr[field] = errors.value[field];
+							}
+						});
+						if (Object.keys(sectionErr).length != 0) {
+							error[index] = sectionErr;
+						}
+					}
+				});
+			}
+
+			return error;
+		});
+
 		/** Handling invitation */
 		const invitationId = ref(null);
 		/**
@@ -111,38 +227,39 @@ export const useUserInvitationPageStore = defineComponentStore(
 				body: invitationPayload.value,
 				expectValidationError: true,
 			});
-
+			await fetch();
 			if (validationError.value) {
 				errors.value = validationError.value;
 			} else {
 				errors.value = [];
 			}
-
-			await fetch();
 		}
 
 		/** Submit invitation */
 		async function submitInvitation() {
-			const {apiUrl} = useUrl(`invitations/${invitationId.value}/submit`);
+			await updateInvitation();
+			if (isValid.value) {
+				const {apiUrl} = useUrl(`invitations/${invitationId.value}/submit`);
 
-			const {data, fetch} = useFetch(apiUrl, {
-				method: 'POST',
-				body: {},
-			});
+				const {data, fetch} = useFetch(apiUrl, {
+					method: 'POST',
+					body: {},
+				});
 
-			await fetch();
-			if (data.value) {
-				openDialog({
-					title: 'Invitation sent',
-					actions: [
-						{
-							label: 'Ok',
-							callback: (close) => {
-								close();
+				await fetch();
+				if (data.value) {
+					openDialog({
+						title: 'Invitation sent',
+						actions: [
+							{
+								label: 'Ok',
+								callback: (close) => {
+									close();
+								},
 							},
-						},
-					],
-				});
+						],
+					});
+				}
 			}
 		}
 
@@ -151,37 +268,6 @@ export const useUserInvitationPageStore = defineComponentStore(
 			registeredActionsForSteps[stepId] = callback;
 		}
 
-		/**
-		 * Update when the step changes
-		 */
-		watch(currentStepIndex, async (newVal, oldVal) => {
-			if (newVal === oldVal) {
-				return;
-			}
-
-			// Update the list of steps that have been started
-			steps.value.forEach((step, i) => {
-				if (
-					!startedSteps.value.includes(step.id) &&
-					i <= currentStepIndex.value
-				) {
-					startedSteps.value.push(step.id);
-				}
-			});
-
-			// Track step changes in the title and browser history
-			const step = steps.value[newVal];
-			// document.title = this.getPageTitle(step);
-			if (step.id !== window.location.hash.replace('#', '')) {
-				addHistory(step);
-			}
-
-			// Trigger validation on the review step
-			if (newVal === steps.value.length - 1) {
-				// validate();
-			}
-		});
-
 		onMounted(() => {
 			/**
 			 * Open the correct step when the page is loaded
@@ -191,66 +277,6 @@ export const useUserInvitationPageStore = defineComponentStore(
 			}
 		});
 
-		/**
-		 * Add a step change to the browser history so the
-		 * user can use the browser's back button
-		 *
-		 * @param {Object} step The step to add
-		 */
-		function addHistory(step) {
-			window.history.pushState({}, step.name, '#' + step.id);
-		}
-
-		/**
-		 * Go to the next step or submit if this is the last step
-		 */
-		async function nextStep() {
-			if (registeredActionsForSteps[currentStep.value.id]) {
-				let shouldContinue = true;
-				shouldContinue =
-					await registeredActionsForSteps[currentStep.value.id]();
-				if (!shouldContinue) {
-					return;
-				}
-			}
-			if (isOnLastStep.value) {
-				submitInvitation();
-			} else {
-				if (!currentStep.value?.skipInvitationUpdate) {
-					await updateInvitation();
-					// this needs to check only relevant errors for given step using the step.validateFields
-					if (!errors.value?.length) {
-						openStep(steps.value[1 + currentStepIndex.value].id);
-					}
-				} else {
-					openStep(steps.value[1 + currentStepIndex.value].id);
-				}
-			}
-		}
-
-		/**
-		 * Go to a step in the wizard
-		 *
-		 * @param {String} stepId
-		 */
-		function openStep(stepId) {
-			const newStep = steps.value.find((step) => step.id === stepId);
-			if (!newStep) {
-				return;
-			}
-			currentStepId.value = stepId;
-		}
-
-		/**
-		 * Go to the previous step in the wizard
-		 */
-		function previousStep() {
-			const previousIndex = currentStepIndex.value - 1;
-			if (previousIndex >= 0) {
-				openStep(steps.value[previousIndex].id);
-			}
-		}
-
 		return {
 			invitationPayload,
 			updatePayload,
@@ -265,12 +291,12 @@ export const useUserInvitationPageStore = defineComponentStore(
 			startedSteps,
 			stepTitle,
 			openStep,
+			currentStepErrorsPerSection,
 
 			//page values
 			steps,
 			pageTitleDescription,
 			errors,
-			user,
 
 			//form feilds
 			primaryLocale,

src/pages/acceptInvitation/AcceptInvitationPage.vue

@@ -34,9 +34,10 @@ import FieldText from '@/components/Form/fields/FieldText.vue';
 import {useUserInvitationPageStore} from './UserInvitationPageStore';
 import {useFetch} from '@/composables/useFetch';
 import {useUrl} from '@/composables/useUrl';
+
 defineProps({
-	section: {
-		type: Object,
+	validateFields: {
+		type: Array,
 		default() {
 			return null;
 		},
@@ -84,6 +85,7 @@ async function searchUser() {
 			store.updatePayload('familyName', user.fullName.split(' ')[1]);
 			store.updatePayload('orcid', user.orcid);
 			store.updatePayload('currentUserGroups', user.groups);
+			store.updatePayload('affiliation', user.affiliation);
 		} else {
 			// TODO: add back error handling
 			/*errors.value = {

src/pages/acceptInvitation/AcceptInvitationPageStore.js

@@ -8,7 +8,10 @@
 			<TableColumn></TableColumn>
 		</TableHeader>
 		<TableBody>
-			<TableRow v-for="(row, index) in store.currentUserGroups" :key="index">
+			<TableRow
+				v-for="(row, index) in store.invitationPayload.currentUserGroups"
+				:key="index"
+			>
 				<TableCell>
 					{{ row.name[store.primaryLocale] }}
 				</TableCell>
@@ -22,22 +25,20 @@
 					{{ row.masthead ? row.masthead : '---' }}
 				</TableCell>
 				<TableCell>
-					<pkp-button
-						:is-warnable="true"
-						@click="store.removeUserGroup(row, index)"
-					>
+					<pkp-button :is-warnable="true" @click="removeUserGroup(row, index)">
 						{{ t('invitation.role.removeRole.button') }}
 					</pkp-button>
 				</TableCell>
 			</TableRow>
-			<TableRow v-for="(row, index) in userGroups" :key="index">
+			<TableRow v-for="(row, index) in allUserGroups" :key="index">
 				<TableCell>
 					<field-select
 						name="userGroup"
 						:label="t('invitation.role.selectRole')"
 						:is-required="true"
 						:value="row.userGroup"
 						:options="availableUserGroups"
+						:all-errors="userGroupErrors[index]"
 						class="userInvitation__roleSelect"
 						@change="
 							(fieldName, propName, newValue, localeKey) =>
@@ -52,6 +53,7 @@
 						input-type="date"
 						:is-required="true"
 						:value="row.dateStart"
+						:all-errors="userGroupErrors[index]"
 						@change="
 							(fieldName, propName, newValue, localeKey) =>
 								updateUserGroup(index, fieldName, newValue)
@@ -65,6 +67,7 @@
 						input-type="date"
 						:value="row.dateEnd"
 						:is-required="true"
+						:all-errors="userGroupErrors[index]"
 						@change="
 							(fieldName, propName, newValue, localeKey) =>
 								updateUserGroup(index, fieldName, newValue)
@@ -81,6 +84,7 @@
 							{label: 'Appear on the masthead', value: true},
 							{label: 'Dose not appear on the masthead', value: false},
 						]"
+						:all-errors="userGroupErrors[index]"
 						@change="
 							(fieldName, propName, newValue, localeKey) =>
 								updateUserGroup(index, fieldName, newValue)
@@ -106,6 +110,7 @@
 
 <script setup>
 import {computed} from 'vue';
+import {useTranslation} from '@/composables/useTranslation';
 import PkpTable from '@/components/TableNext/Table.vue';
 import TableCell from '@/components/TableNext/TableCell.vue';
 import TableHeader from '@/components/TableNext/TableHeader.vue';
@@ -118,41 +123,51 @@ import FieldText from '@/components/Form/fields/FieldText.vue';
 import {useUserInvitationPageStore} from './UserInvitationPageStore';
 
 const store = useUserInvitationPageStore();
+const {t} = useTranslation();
 
-const userGroups = computed(() => store.invitationPayload.userGroups);
+const allUserGroups = computed(() => store.invitationPayload.userGroupsToAdd);
 
 const props = defineProps({
-	section: {type: Object, required: true},
+	userGroups: {type: Object, required: true},
 });
 
 function updateUserGroup(index, fieldName, newValue) {
-	const userGroupsUpdate = [...store.invitationPayload.userGroups];
+	const userGroupsUpdate = [...store.invitationPayload.userGroupsToAdd];
 
 	userGroupsUpdate[index][fieldName] = newValue;
 
-	store.updatePayload('userGroups', userGroupsUpdate);
+	store.updatePayload('userGroupsToAdd', userGroupsUpdate);
 }
 
 const availableUserGroups = computed(() => {
-	return props.section.userGroups.filter((element) => {
+	return props.userGroups.filter((element) => {
 		return !store.invitationPayload.currentUserGroups.find(
 			(data) => data.id === element.value,
 		);
 	});
 });
 
 function addUserGroup() {
-	const userGroupsUpdate = [...store.invitationPayload.userGroups];
+	const userGroupsUpdate = [...store.invitationPayload.userGroupsToAdd];
 	userGroupsUpdate.push({
-		role_name: null,
+		userGroup: null,
 		dateStart: null,
 		dateEnd: null,
 		masthead: null,
-		value: null,
 	});
+	store.updatePayload('userGroupsToAdd', userGroupsUpdate);
+}
 
-	store.updatePayload('userGroups', userGroupsUpdate);
+function removeUserGroup(userGroup, index) {
+	store.invitationPayload.currentUserGroups.splice(index, 1);
+	const userGroupsToRemove = [...store.invitationPayload.userGroupsToRemove];
+	userGroupsToRemove.push(userGroup.id);
+	store.updatePayload('userGroupsToRemove', userGroupsToRemove);
 }
+
+const userGroupErrors = computed(() => {
+	return store.errors.userGroupsToAdd || [];
+});
 </script>
 <style>
 select {