diff --git a/public/globals.js b/public/globals.js
index 6a685d1f3..eee6b9066 100644
--- a/public/globals.js
+++ b/public/globals.js
@@ -378,6 +378,21 @@ window.pkp = {
 		'submission.upload.percentComplete': 'Uploading {$percent}% complete',
 		'submissions.incomplete': 'Incomplete',
 		'validator.required': 'This field is required.',
+		'invitation.notification.title': 'Invitation sent',
+		'invitation.wizard.success': "{$email} has been invited to a new role in OJS. You can be updated about the user's decision on the User & Role page, your OJS notification and/or your email",
+		'user.email': 'Email',
+		'user.username': 'Username',
+		'user.orcid': 'ORCID iD',
+		'invitation.notification.closeBtn':'View all users',
+		'user.password': 'Password',
+		'invitation.role.selectRole':'Select a new role',
+		'invitation.role.dateEnd' : 'End Date',
+  		'invitation.role.dateStart' : 'Start Date',
+  		'invitation.role.masthead' : 'Journal Masthead',
+  		'invitation.role.removeRole.button' : 'Remove Role',
+		'invitation.role.addRole.button':'Add Another Role',
+		'invitation.orcid.message':'Add Another Role',
+
 	},
 
 	tinyMCE: {
diff --git a/src/components/Container/PageOJS.vue b/src/components/Container/PageOJS.vue
index 2b034b21e..dd798b54e 100644
--- a/src/components/Container/PageOJS.vue
+++ b/src/components/Container/PageOJS.vue
@@ -1,10 +1,12 @@
 <script>
 import Page from '@/components/Container/Page.vue';
 import SubmissionsPage from '@/pages/submissions/SubmissionsPage.vue';
+import UserInvitationPage from '@/pages/userInvitation/UserInvitationPage.vue';
 
 export default {
 	components: {
 		SubmissionsPage,
+		UserInvitationPage,
 	},
 	extends: Page,
 };
diff --git a/src/composables/useForm.js b/src/composables/useForm.js
index 0c91a01c4..8aba64950 100644
--- a/src/composables/useForm.js
+++ b/src/composables/useForm.js
@@ -1,4 +1,4 @@
-import {ref} from 'vue';
+import {ref, watch} from 'vue';
 
 function getField(form, name) {
 	const fields = form.fields;
@@ -6,6 +6,12 @@ function getField(form, name) {
 	return fields.find((field) => field.name === name);
 }
 
+function doesFieldExist(form, name) {
+	const fields = form.fields;
+
+	return !!fields.find((field) => field.name === name);
+}
+
 function getClearValue(field, localeKey = null) {
 	if (localeKey) {
 		if (field.component === 'field-slider') {
@@ -27,6 +33,48 @@ function mapFromSelectedToValue(selected) {
 export function useForm(_form) {
 	const form = ref(_form);
 
+	function connectWithPayload(payload) {
+		watch(
+			payload,
+			(newPayload) => {
+				Object.keys(newPayload).forEach((key) => {
+					if (doesFieldExist(form.value, key)) {
+						if (getValue(key) !== newPayload[key]) {
+							setValue(key, newPayload[key]);
+						}
+					}
+				});
+			},
+			{immediate: true},
+		);
+	}
+
+	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];
+		});
+	}
+
+	function getValue(name) {
+		const field = getField(form.value, name);
+
+		return field.value;
+	}
+
 	function setValue(name, inputValue) {
 		const field = getField(form.value, name);
 		if (!field) {
@@ -69,8 +117,12 @@ export function useForm(_form) {
 	}
 
 	return {
+		set,
 		setValue,
+		getValue,
 		clearForm,
 		form,
+		connectWithPayload,
+		connectWithErrors,
 	};
 }
diff --git a/src/pages/userInvitation/UserInvitationDetailsFormStep.vue b/src/pages/userInvitation/UserInvitationDetailsFormStep.vue
new file mode 100644
index 000000000..8ec3a8cdb
--- /dev/null
+++ b/src/pages/userInvitation/UserInvitationDetailsFormStep.vue
@@ -0,0 +1,114 @@
+<template>
+	<div v-if="store.invitationPayload.userId === null">
+		<pkp-form
+			v-bind="userForm"
+			class="userInvitation__stepForm"
+			@set="updateUserForm"
+		></pkp-form>
+	</div>
+	<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.invitationPayload.email }}
+			</div>
+			<h4 class="userInvitation__reviewPanel__item__header">ORCID ID</h4>
+			<div class="userInvitation__reviewPanel__item__value">
+				{{
+					store.invitationPayload.orcid
+						? store.invitationPayload.orcid
+						: t('invitation.orcid.message')
+				}}
+				<icon
+					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.invitationPayload.givenName }}
+			</div>
+			<h4 class="userInvitation__reviewPanel__item__header">Family Name</h4>
+			<div class="userInvitation__reviewPanel__item__value">
+				{{ store.invitationPayload.familyName }}
+			</div>
+			<h4 class="userInvitation__reviewPanel__item__header">Affiliation</h4>
+			<div class="userInvitation__reviewPanel__item__value">
+				{{ store.invitationPayload.affiliation }}
+			</div>
+		</div>
+	</div>
+	<br />
+	<UserInvitationUserGroupsTable
+		:user-groups="userGroups"
+		:errors="sectionErrors"
+	/>
+</template>
+
+<script setup>
+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) {
+	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({
+	form: {type: Object, required: true},
+	userGroups: {type: Object, required: true},
+	validateFields: {type: Array, required: true},
+});
+const {
+	form: userForm,
+	connectWithPayload,
+	connectWithErrors,
+} = useForm(props.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 {
+	width: 13rem !important;
+}
+.userInvitation__reviewPanel__item {
+	&:last-child {
+		border-bottom: none;
+	}
+}
+
+.userInvitation__reviewPanel__item__header {
+	margin: 0;
+	font-size: 0.875rem;
+	line-height: 1.5rem;
+}
+
+.userInvitation__reviewPanel__item__value {
+	margin-bottom: 1rem;
+	font-size: 0.875rem;
+	line-height: 1.5rem;
+}
+</style>
diff --git a/src/pages/userInvitation/UserInvitationEmailComposerStep.vue b/src/pages/userInvitation/UserInvitationEmailComposerStep.vue
new file mode 100644
index 000000000..148b44123
--- /dev/null
+++ b/src/pages/userInvitation/UserInvitationEmailComposerStep.vue
@@ -0,0 +1,89 @@
+<template>
+	<composer
+		:id="store.currentStep.id"
+		:add-c-c-label="t('common.addCCBCC')"
+		:attach-files-label="t('common.attachFiles')"
+		:attached-files-label="t('common.attachedFiles')"
+		: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="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="props.email.emailTemplates"
+		:email-templates-api-url="store.emailTemplatesApiUrl"
+		:errors="sectionErrors.emailComposer"
+		:find-template-label="t('common.findTemplate')"
+		: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="props.email.locale"
+		:locales="props.email.locales"
+		:more-search-results-label="t('common.numberedMore')"
+		: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="props.email.variables"
+		v-bind="emailComposer"
+		@set="(componentName, update) => updateEmail(update)"
+	></composer>
+</template>
+
+<script setup>
+import {computed} from 'vue';
+import Composer from '@/components/Composer/Composer.vue';
+import {useTranslation} from '@/composables/useTranslation';
+import {defineProps} from 'vue';
+import {useUserInvitationPageStore} from './UserInvitationPageStore';
+
+const props = defineProps({
+	email: {type: Object, required: true},
+	validateFields: {
+		type: Array,
+		default() {
+			return null;
+		},
+	},
+});
+const {t} = useTranslation();
+
+const store = useUserInvitationPageStore();
+const emailComposer = computed(() => store.invitationPayload.emailComposer);
+
+function updateEmail(update) {
+	const emailComposerUpdate = {
+		...store.invitationPayload.emailComposer,
+		...update,
+	};
+	store.updatePayload('emailComposer', emailComposerUpdate);
+}
+
+if (!store.invitationPayload.body) {
+	updateEmail({
+		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>
diff --git a/src/pages/userInvitation/UserInvitationHeader.vue b/src/pages/userInvitation/UserInvitationHeader.vue
new file mode 100644
index 000000000..f67629358
--- /dev/null
+++ b/src/pages/userInvitation/UserInvitationHeader.vue
@@ -0,0 +1,17 @@
+<template>
+	<h1 ref="wrapper" class="app__pageHeading">
+		{{ pageTitle }}
+	</h1>
+	<p>
+		{{ pageTitleDescription }}
+	</p>
+</template>
+
+<script setup>
+import {defineProps} from 'vue';
+
+defineProps({
+	pageTitle: {type: String, required: true},
+	pageTitleDescription: {type: String, required: true},
+});
+</script>
diff --git a/src/pages/userInvitation/UserInvitationPage.mdx b/src/pages/userInvitation/UserInvitationPage.mdx
new file mode 100644
index 000000000..67e6c1131
--- /dev/null
+++ b/src/pages/userInvitation/UserInvitationPage.mdx
@@ -0,0 +1,9 @@
+import {Primary, Controls, Stories, Meta, ArgTypes} from '@storybook/blocks';
+
+import * as UserInvitationPage from './UserInvitationPage.stories.js';
+
+<Meta of={UserInvitationPage} />
+
+# User Invitation page
+
+<ArgTypes />
diff --git a/src/pages/userInvitation/UserInvitationPage.stories.js b/src/pages/userInvitation/UserInvitationPage.stories.js
new file mode 100644
index 000000000..c5d3927dc
--- /dev/null
+++ b/src/pages/userInvitation/UserInvitationPage.stories.js
@@ -0,0 +1,115 @@
+import UserInvitationPage from './UserInvitationPage.vue';
+import {http, HttpResponse} from 'msw';
+import userMock from './mocks/userMock.js';
+import PageInitConfigMock from './mocks/pageInitConfig';
+
+export default {title: 'Pages/UserInvitation', component: UserInvitationPage};
+
+export const Init = {
+	render: (args) => ({
+		components: {UserInvitationPage},
+		setup() {
+			return {args};
+		},
+		template: '<UserInvitationPage v-bind="args" />',
+	}),
+	parameters: {
+		msw: {
+			handlers: [
+				http.get(
+					'https://mock/index.php/publicknowledge/api/v1/_user',
+					({request}) => {
+						const url = new URL(request.url);
+						let params = new URLSearchParams(url.search);
+
+						// To store the parameters in a simple object
+						let allParams = {};
+						for (let param of params) {
+							allParams[param[0]] = param[1];
+						}
+						if (
+							allParams.searchPhrase.replaceAll(/\s/g, '') ===
+							'carlo@mailinator.com'
+						) {
+							return HttpResponse.json(userMock);
+						} else {
+							return HttpResponse.json({
+								itemsMax: 0,
+								items: [],
+							});
+						}
+					},
+				),
+				http.post(
+					'https://mock/index.php/publicknowledge/api/v1/invitations',
+					() => {
+						return HttpResponse.json({invitationId: 15});
+					},
+				),
+				http.post(
+					'https://mock/index.php/publicknowledge/api/v1/invitations/15',
+					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(
+					'https://mock/index.php/publicknowledge/api/v1/invitations/15/submit',
+					() => {
+						return HttpResponse.json({});
+					},
+				),
+				http.post(
+					'https://mock/index.php/publicknowledge/api/v1/user/_invite',
+					() => {
+						return HttpResponse.json('invitation send successfully');
+					},
+				),
+			],
+		},
+	},
+	args: PageInitConfigMock,
+};
diff --git a/src/pages/userInvitation/UserInvitationPage.vue b/src/pages/userInvitation/UserInvitationPage.vue
new file mode 100644
index 000000000..8a0aa1124
--- /dev/null
+++ b/src/pages/userInvitation/UserInvitationPage.vue
@@ -0,0 +1,376 @@
+<template>
+	<div class="userInvitation">
+		<UserInvitationHeader
+			:page-title="store.pageTitle"
+			:page-title-description="store.pageTitleDescription"
+		/>
+		<steps
+			v-if="store.steps.length"
+			class="userInvitation__steps"
+			:current="store.currentStep.id"
+			:started-steps="store.startedSteps"
+			:label="t('invitation.wizard.completeSteps')"
+			:progress-label="t('common.showingSteps')"
+			:show-steps-label="t('common.showingSteps')"
+			:scroll-to="wrapper"
+			@step:open="store.openStep"
+		>
+			<step
+				v-for="step in store.steps"
+				:id="step.id"
+				:key="step.id"
+				:label="step.name"
+			>
+				<panel
+					v-if="store.currentStep.id === step.id"
+					class="decision__stepPanel"
+				>
+					<panel-section class="decision__stepHeader">
+						<h2>{{ store.stepTitle }}</h2>
+						<p class="error">{{ store.errors.error }}</p>
+						<p>{{ step.description }}</p>
+					</panel-section>
+					<panel-section v-for="section in step.sections" :key="section.id">
+						<component
+							:is="userInvitationComponents[section.sectionComponent]"
+							:key="section.sectionComponent"
+							v-bind="section.props"
+						/>
+					</panel-section>
+				</panel>
+			</step>
+		</steps>
+		<button-row class="panel panel--wide userInvitationForm__footer">
+			<pkp-button @click="store.cancel">Cancel</pkp-button>
+			<pkp-button @click="store.previousStep">Previous</pkp-button>
+			<pkp-button :is-primary="true" @click="store.nextStep">
+				{{ store.currentStep.nextButtonLabel }}
+			</pkp-button>
+		</button-row>
+		<modal
+			:close-label="t('common.close')"
+			:name="t('invitation.notification.title')"
+			:title="t('invitation.notification.title')"
+			:open="store.isModalOpened"
+			@close="store.isModalClosed"
+		>
+			<div class="userInvitationModal__body userInvitationModal__body_success">
+				{{ t('invitation.wizard.success', {email: store.email}) }}
+			</div>
+			<pkp-button @click="store.isModalClosed">
+				{{ t('invitation.notification.closeBtn') }}
+			</pkp-button>
+		</modal>
+	</div>
+</template>
+
+<script setup>
+import ButtonRow from '@/components/ButtonRow/ButtonRow.vue';
+import Modal from '@/components/Modal/Modal.vue';
+import PkpButton from '@/components/Button/Button.vue';
+import Panel from '@/components/Panel/Panel.vue';
+import PanelSection from '@/components/Panel/PanelSection.vue';
+import Steps from '@/components/Steps/Steps.vue';
+import Step from '@/components/Steps/Step.vue';
+import {useUserInvitationPageStore} from './UserInvitationPageStore';
+import {useTranslation} from '@/composables/useTranslation';
+import {ref} from 'vue';
+import UserInvitationHeader from './UserInvitationHeader.vue';
+import UserInvitationDetailsFormStep from './UserInvitationDetailsFormStep.vue';
+import UserInvitationSearchFormStep from './UserInvitationSearchFormStep.vue';
+import UserInvitationEmailComposerStep from './UserInvitationEmailComposerStep.vue';
+
+const props = defineProps({
+	/** steps for invite user */
+	steps: {
+		type: Array,
+		required: true,
+	},
+	/** primary language */
+	primaryLocale: {
+		type: String,
+		required: true,
+	},
+	/** API url for fetching email templates */
+	emailTemplatesApiUrl: {
+		type: String,
+		required: true,
+	},
+	pageTitle: {
+		type: String,
+		required: true,
+	},
+	pageTitleDescription: {
+		type: String,
+		required: true,
+	},
+	invitationPayload: {
+		type: Object,
+		required: true,
+	},
+});
+const {t} = useTranslation();
+const wrapper = ref(null);
+const store = useUserInvitationPageStore(props);
+const userInvitationComponents = {
+	UserInvitationDetailsFormStep,
+	UserInvitationSearchFormStep,
+	UserInvitationEmailComposerStep,
+};
+</script>
+
+<style lang="less">
+@import '../../styles/_import';
+
+.userInvitation .app__pageHeading {
+	display: flex;
+	margin: 2rem 0 0.25rem;
+
+	> .pkpButton {
+		margin-inline-start: auto;
+	}
+}
+
+.submissionWizard__steps {
+	margin-top: 2rem;
+}
+
+.userInvitation .pkpSteps__buttonWrapper {
+	border: @bg-border-light;
+	border-bottom: 0;
+	border-top-left-radius: @radius;
+	border-top-right-radius: @radius;
+}
+
+.userInvitation__submissionDetails,
+.userInvitation__submissionConfiguration {
+	font-size: @font-sml;
+	line-height: @line-sml;
+}
+
+// Override the form locale switcher styles
+.userInvitation__stepForm .pkpFormLocales {
+	border: none;
+	margin-top: -1rem;
+	margin-bottom: 1rem;
+	padding-right: 0;
+
+	.pkpFormLocales__locale--isPrimary {
+		border: none;
+	}
+}
+
+// Hide the form footer for each form, since
+// buttons and errors are handled separately
+.userInvitation__stepForm .pkpFormPage__footer {
+	display: none;
+}
+
+// buttons and errors are handled separately
+.userInvitationForm__footer {
+	padding: 2rem;
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	border: none;
+
+	* + .pkpButton {
+		margin-inline-start: 0.5rem;
+	}
+}
+
+// Review step
+.submissionWizard__reviewPanel {
+	border: @bg-border-light;
+	border-radius: @radius;
+
+	+ .submissionWizard__reviewPanel {
+		margin-top: 2rem;
+	}
+}
+
+.submissionWizard__reviewPanel__header {
+	display: flex;
+	align-items: center;
+	padding: 0.5rem 1rem;
+	border-bottom: @bg-border-light;
+
+	h3 {
+		margin: 0;
+		font-size: @font-base;
+		line-height: @line-base;
+	}
+}
+
+.submissionWizard__reviewPanel__edit {
+	margin-inline-start: auto;
+}
+
+.submissionWizard__reviewPanel__body {
+	font-size: @font-sml;
+	line-height: @line-sml;
+}
+
+.submissionWizard__reviewPanel__list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+
+	li {
+		display: flex;
+		align-items: center;
+		margin: 1rem;
+	}
+
+	.pkpBadge {
+		white-space: nowrap;
+	}
+}
+
+.submissionWizard__reviewPanel__list__name {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.submissionWizard__reviewPanel__list__actions {
+	margin-inline-start: auto;
+	white-space: nowrap;
+
+	> * {
+		margin-inline-start: 0.5rem;
+	}
+}
+
+.submissionWizard__review_errors {
+	margin-bottom: 2rem;
+}
+
+.submissionWizard__reviewPanel__fileLink {
+	display: block;
+	margin-left: -0.25rem;
+	padding: 0.25rem;
+	border: 1px solid transparent;
+	border-radius: @radius;
+	color: @text;
+	text-decoration: none;
+
+	&:hover,
+	&:focus {
+		color: @text;
+		border-color: @primary;
+		outline: 0;
+	}
+}
+
+.submissionWizard__reviewPanel__download {
+	text-align: center;
+}
+
+.submissionWizard__reviewPanel__item {
+	padding: 1rem;
+	border-bottom: @bg-border-light;
+
+	&:last-child {
+		border-bottom: none;
+	}
+
+	.pkpNotification {
+		margin-bottom: 0.5rem;
+	}
+}
+
+.submissionWizard__reviewPanel__item__header,
+.submissionWizard__reviewPanel__item__value {
+	margin: 0;
+	font-size: @font-sml;
+	line-height: @line-sml;
+}
+
+.submissionWizard__reviewPanel__item__value {
+	> p:first-child,
+	> ul:first-child {
+		margin-top: 0;
+	}
+
+	> p:last-child,
+	> ul:last-child {
+		margin-bottom: 0;
+	}
+}
+
+.submissionWizard__reviewEmptyWarning {
+	margin: 1rem;
+}
+
+// When the data being reviewed is a list of items
+ul.submissionWizard__reviewPanel__item__value {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+// A table used for a review
+.submissionWizard__reviewPanel__body {
+	.pkpTable {
+		border: none;
+	}
+}
+
+.submissionWizard__reviewPanel__citation,
++ .submissionWizard__reviewPanel__citation {
+	margin-top: 1rem;
+}
+
+.submissionWizard__footer {
+	padding: 2rem;
+	background: @lift;
+	border: @bg-border-light;
+	border-top: none;
+}
+
+.submissionWizard__lastSaved {
+	margin-right: 0.5rem;
+	font-size: @font-sml;
+	line-height: @line-sml;
+}
+
+.submissionWizard__lastSaved--disconnected {
+	color: @no-red;
+
+	.pkpSpinner:before {
+		border-top-color: @no-red;
+		border-left-color: @no-red;
+	}
+}
+
+// Loading screen when review is opened
+.submissionWizard__loadingReview {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 2;
+	transition: opacity 0.3s;
+	background: rgba(255, 255, 255, 0.75);
+	text-align: center;
+	font-size: @font-sml;
+}
+
+.submissionWizard__reviewLoading-enter,
+.submissionWizard__reviewLoading-leave-to {
+	opacity: 0;
+}
+
+.error {
+	color: red;
+	font-weight: bold;
+}
+.userInvitationModal__body {
+	padding: 0.5rem 0.75rem;
+}
+.userInvitationModal__body_success {
+	box-shadow: inset 0.25rem 0 #00b24e;
+}
+</style>
diff --git a/src/pages/userInvitation/UserInvitationPageStore.js b/src/pages/userInvitation/UserInvitationPageStore.js
new file mode 100644
index 000000000..eb5317507
--- /dev/null
+++ b/src/pages/userInvitation/UserInvitationPageStore.js
@@ -0,0 +1,309 @@
+import {defineComponentStore} from '@/utils/defineComponentStore';
+import {useFetch} from '@/composables/useFetch';
+import {useUrl} from '@/composables/useUrl';
+import {computed, onMounted, ref, watch} from 'vue';
+import {useModal} from '@/composables/useModal';
+export const useUserInvitationPageStore = defineComponentStore(
+	'userInvitationPage',
+	(pageInitConfig) => {
+		const {openDialog} = useModal();
+
+		/** Invitation payload, initial value */
+		const invitationPayload = ref({...pageInitConfig.invitationPayload});
+
+		function updatePayload(fieldName, value) {
+			invitationPayload.value[fieldName] = value;
+		}
+
+		/** Steps */
+		const currentStepId = ref(pageInitConfig.steps[0].id);
+		const steps = ref(pageInitConfig.steps);
+		const startedSteps = ref([]);
+
+		/**
+		 * 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?
+		 */
+		const isOnFirstStep = computed(() => {
+			return !currentStepIndex.value;
+		});
+
+		/**
+		 * Is the current step the last step?
+		 */
+		const isOnLastStep = computed(() => {
+			return currentStepIndex.value === steps.value.length - 1;
+		});
+
+		/**
+		 * 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 (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
+		 */
+		const pageTitle = computed(() => {
+			if (!currentStep.value) {
+				return '';
+			}
+			return currentStep.value.name.replace('{$step}', currentStep.value);
+		});
+
+		/**
+		 * The step title to show at the top of the step
+		 */
+		const stepTitle = computed(() => {
+			if (!currentStep.value) {
+				return '';
+			}
+			return currentStep.value.reviewName.replace(
+				'{$step}',
+				'STEP -' + (1 + currentStepIndex.value),
+			);
+		});
+
+		/** 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);
+		/**
+		 * Create invitation
+		 */
+		async function createInvitation() {
+			const {apiUrl} = useUrl('invitations');
+
+			const {data, fetch: createInvitation} = useFetch(apiUrl, {
+				method: 'POST',
+				body: {type: pageInitConfig.invitationType},
+			});
+			await createInvitation();
+			invitationId.value = data.value.invitationId;
+		}
+
+		/** Update Invitation */
+		async function updateInvitation() {
+			if (!invitationId.value) {
+				await createInvitation();
+			}
+
+			const {apiUrl} = useUrl(`invitations/${invitationId.value}`);
+
+			const {fetch, validationError} = useFetch(apiUrl, {
+				method: 'POST',
+				body: invitationPayload.value,
+				expectValidationError: true,
+			});
+			await fetch();
+			if (validationError.value) {
+				errors.value = validationError.value;
+			} else {
+				errors.value = [];
+			}
+		}
+
+		/** Submit invitation */
+		async function submitInvitation() {
+			await updateInvitation();
+			if (isValid.value) {
+				const {apiUrl} = useUrl(`invitations/${invitationId.value}/submit`);
+
+				const {data, fetch} = useFetch(apiUrl, {
+					method: 'POST',
+					body: {},
+				});
+
+				await fetch();
+				if (data.value) {
+					openDialog({
+						title: 'Invitation sent',
+						actions: [
+							{
+								label: 'Ok',
+								callback: (close) => {
+									close();
+								},
+							},
+						],
+					});
+				}
+			}
+		}
+
+		const registeredActionsForSteps = {};
+		function registerActionForStepId(stepId, callback) {
+			registeredActionsForSteps[stepId] = callback;
+		}
+
+		onMounted(() => {
+			/**
+			 * Open the correct step when the page is loaded
+			 */
+			if (!window.location.hash) {
+				openStep(steps.value[0].id);
+			}
+		});
+
+		return {
+			invitationPayload,
+			updatePayload,
+			registerActionForStepId,
+			//computed
+			currentStep,
+			currentStepIndex,
+			isOnFirstStep,
+			isOnLastStep,
+			isValid,
+			pageTitle,
+			startedSteps,
+			stepTitle,
+			openStep,
+			currentStepErrorsPerSection,
+
+			//page values
+			steps,
+			pageTitleDescription,
+			errors,
+
+			//form feilds
+			primaryLocale,
+
+			//methods
+			nextStep,
+			previousStep,
+		};
+	},
+);
diff --git a/src/pages/userInvitation/UserInvitationSearchFormStep.vue b/src/pages/userInvitation/UserInvitationSearchFormStep.vue
new file mode 100644
index 000000000..bc055b37b
--- /dev/null
+++ b/src/pages/userInvitation/UserInvitationSearchFormStep.vue
@@ -0,0 +1,105 @@
+<template>
+	<field-text
+		:label="t('user.email')"
+		:value="fields.email"
+		name="email"
+		size="large"
+		@change="updateField"
+	/>
+	<br />
+	<p>or</p>
+	<br />
+	<field-text
+		:label="t('user.username')"
+		:value="fields.username"
+		name="username"
+		size="large"
+		@change="updateField"
+	/>
+	<br />
+	<p>or</p>
+	<br />
+	<field-text
+		:label="t('user.orcid')"
+		:value="fields.orcid"
+		name="orcid"
+		size="large"
+		@change="updateField"
+	/>
+</template>
+
+<script setup>
+import {defineProps, ref, computed} from 'vue';
+import FieldText from '@/components/Form/fields/FieldText.vue';
+import {useUserInvitationPageStore} from './UserInvitationPageStore';
+import {useFetch} from '@/composables/useFetch';
+import {useUrl} from '@/composables/useUrl';
+
+defineProps({
+	validateFields: {
+		type: Array,
+		default() {
+			return null;
+		},
+	},
+});
+
+const store = useUserInvitationPageStore();
+store.registerActionForStepId('searchUser', searchUser);
+
+const fields = ref({email: '', username: '', orcid: ''});
+
+function updateField(fieldName, b, fieldValue) {
+	fields.value[fieldName] = fieldValue;
+}
+
+const searchPhrase = computed(() => {
+	let searchText = '';
+	if (fields.value.email) {
+		searchText = fields.value.email + ' ';
+	}
+	if (fields.value.orcid) {
+		searchText = searchText + fields.value.orcid + ' ';
+	}
+	if (fields.value.username) {
+		searchText = searchText + fields.value.username;
+	}
+
+	return searchText;
+});
+
+async function searchUser() {
+	if (searchPhrase.value !== '') {
+		const {apiUrl} = useUrl('_user');
+
+		const {data: userData, fetch} = useFetch(apiUrl, {
+			query: {searchPhrase: searchPhrase.value, status: 'all'},
+		});
+		await fetch();
+		if (userData.value.items.length > 0) {
+			const user = userData.value.items[0];
+			store.updatePayload('email', user.email);
+			store.updatePayload('userId', user.id);
+			// we need to pass the givenName and familyName from API!!
+			store.updatePayload('givenName', user.fullName.split(' ')[0]);
+			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 = {
+				error: t('invitation.noUserFound'),
+			};*/
+			// TODO: update field which has some value
+			store.updatePayload('email', fields.value.email);
+		}
+	} else {
+		// TODO: add back error handling
+		/*errors.value = {
+			error: t('invitation.emptySearchFields'),
+		};*/
+	}
+	return true;
+}
+</script>
diff --git a/src/pages/userInvitation/UserInvitationUserGroupsTable.vue b/src/pages/userInvitation/UserInvitationUserGroupsTable.vue
new file mode 100644
index 000000000..6140a63a1
--- /dev/null
+++ b/src/pages/userInvitation/UserInvitationUserGroupsTable.vue
@@ -0,0 +1,176 @@
+<template>
+	<PkpTable aria-label="Example for basic table">
+		<TableHeader>
+			<TableColumn>Title</TableColumn>
+			<TableColumn>Start Date</TableColumn>
+			<TableColumn>End Date</TableColumn>
+			<TableColumn>Journal Masthead</TableColumn>
+			<TableColumn></TableColumn>
+		</TableHeader>
+		<TableBody>
+			<TableRow
+				v-for="(row, index) in store.invitationPayload.currentUserGroups"
+				:key="index"
+			>
+				<TableCell>
+					{{ row.name[store.primaryLocale] }}
+				</TableCell>
+				<TableCell>
+					{{ row.name.date_start ? row.name.date_start : '---' }}
+				</TableCell>
+				<TableCell>
+					{{ row.name.date_end ? row.name.date_end : '---' }}
+				</TableCell>
+				<TableCell>
+					{{ row.masthead ? row.masthead : '---' }}
+				</TableCell>
+				<TableCell>
+					<pkp-button :is-warnable="true" @click="removeUserGroup(row, index)">
+						{{ t('invitation.role.removeRole.button') }}
+					</pkp-button>
+				</TableCell>
+			</TableRow>
+			<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) =>
+								updateUserGroup(index, fieldName, newValue)
+						"
+					/>
+				</TableCell>
+				<TableCell>
+					<field-text
+						name="dateStart"
+						:label="t('invitation.role.dateStart')"
+						input-type="date"
+						:is-required="true"
+						:value="row.dateStart"
+						:all-errors="userGroupErrors[index]"
+						@change="
+							(fieldName, propName, newValue, localeKey) =>
+								updateUserGroup(index, fieldName, newValue)
+						"
+					/>
+				</TableCell>
+				<TableCell>
+					<field-text
+						name="dateEnd"
+						:label="t('invitation.role.dateEnd')"
+						input-type="date"
+						:value="row.dateEnd"
+						:is-required="true"
+						:all-errors="userGroupErrors[index]"
+						@change="
+							(fieldName, propName, newValue, localeKey) =>
+								updateUserGroup(index, fieldName, newValue)
+						"
+					/>
+				</TableCell>
+				<TableCell>
+					<field-select
+						name="masthead"
+						:label="t('invitation.role.masthead')"
+						:is-required="true"
+						:value="row.masthead"
+						:options="[
+							{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)
+						"
+					/>
+				</TableCell>
+				<TableCell></TableCell>
+			</TableRow>
+			<TableRow>
+				<TableCell>
+					<pkp-button @click="addUserGroup()">
+						{{ t('invitation.role.addRole.button') }}
+					</pkp-button>
+				</TableCell>
+				<TableCell></TableCell>
+				<TableCell></TableCell>
+				<TableCell></TableCell>
+				<TableCell></TableCell>
+			</TableRow>
+		</TableBody>
+	</PkpTable>
+</template>
+
+<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';
+import TableColumn from '@/components/TableNext/TableColumn.vue';
+import TableBody from '@/components/TableNext/TableBody.vue';
+import TableRow from '@/components/TableNext/TableRow.vue';
+import FieldSelect from '@/components/Form/fields/FieldSelect.vue';
+import PkpButton from '@/components/Button/Button.vue';
+import FieldText from '@/components/Form/fields/FieldText.vue';
+import {useUserInvitationPageStore} from './UserInvitationPageStore';
+
+const store = useUserInvitationPageStore();
+const {t} = useTranslation();
+
+const allUserGroups = computed(() => store.invitationPayload.userGroupsToAdd);
+
+const props = defineProps({
+	userGroups: {type: Object, required: true},
+});
+
+function updateUserGroup(index, fieldName, newValue) {
+	const userGroupsUpdate = [...store.invitationPayload.userGroupsToAdd];
+
+	userGroupsUpdate[index][fieldName] = newValue;
+
+	store.updatePayload('userGroupsToAdd', userGroupsUpdate);
+}
+
+const availableUserGroups = computed(() => {
+	return props.userGroups.filter((element) => {
+		return !store.invitationPayload.currentUserGroups.find(
+			(data) => data.id === element.value,
+		);
+	});
+});
+
+function addUserGroup() {
+	const userGroupsUpdate = [...store.invitationPayload.userGroupsToAdd];
+	userGroupsUpdate.push({
+		userGroup: null,
+		dateStart: null,
+		dateEnd: null,
+		masthead: null,
+	});
+	store.updatePayload('userGroupsToAdd', 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 {
+	width: 13rem !important;
+}
+</style>
diff --git a/src/pages/userInvitation/mocks/pageInitConfig.js b/src/pages/userInvitation/mocks/pageInitConfig.js
new file mode 100644
index 000000000..922d36679
--- /dev/null
+++ b/src/pages/userInvitation/mocks/pageInitConfig.js
@@ -0,0 +1,345 @@
+import InsertContentMock from '@/mocks/insertContent';
+import emailTemplate from '@/mocks/emailTemplate';
+
+const recipientOptions = [
+	{
+		value: 2,
+		label: {
+			en: 'Carlo Corino',
+			fr_CA: 'Carlo Fr Corino',
+		},
+	},
+	{
+		value: 3,
+		label: {
+			en: 'Daniel Barnes',
+			fr_CA: 'Daniel Fr Barnes',
+		},
+	},
+	{
+		value: 4,
+		label: {
+			en: 'Stephanie Minoue',
+			fr_CA: 'Stephanie Fr Minoue',
+		},
+	},
+	{
+		value: 5,
+		label: {
+			en: 'Paul Hudson',
+			fr_CA: 'Paul Fr Hudson',
+		},
+	},
+];
+
+export default {
+	emailTemplatesApiUrl:
+		'https://mock/index.php/publicknowledge/api/v1/EmailTemplateMocks',
+	pageTitle: 'Invite user to take a role',
+	pageTitleDescription:
+		'You are inviting a user to take a role in OJS along with appearing in the journal masthead',
+	primaryLocale: 'en',
+	invitationType: 'RoleUpdateForNewUser',
+	invitationPayload: {
+		userId: null,
+		email: '',
+		orcid: '',
+		givenName: '',
+		familyName: '',
+		affiliation: '',
+		country: '',
+		orcidValidation: false,
+		userGroupsToAdd: [
+			{userGroup: null, dateStart: null, dateEnd: null, masthead: null},
+		],
+		currentUserGroups: [],
+		userGroupsToRemove: [],
+		emailComposer: {
+			body: '',
+			subject: '',
+		},
+	},
+	steps: [
+		{
+			id: 'searchUser',
+			name: 'Search User',
+			reviewName: '{$step} - Search User',
+			description:
+				'Search for the user using their email address, username or ORCID ID. Enter at least one details to get started. If user does not exist, ypu can invite them to take up roles and be a part of your journal. If the user already exist in the system, you can view user information and invite to take a additional roles.',
+			nextButtonLabel: 'Search user (t)',
+			skipInvitationUpdate: true,
+			sections: [
+				{
+					id: 'searchUserForm',
+					sectionComponent: 'UserInvitationSearchFormStep',
+					props: {
+						validateFields: [],
+					},
+				},
+			],
+		},
+		{
+			id: 'userDetails',
+			name: 'Enter details',
+			reviewName: '{$step} - Enter details and invite for roles',
+			type: 'form',
+			description: 'You can invite them to take up a role in OJS',
+			nextButtonLabel: 'Save And Continue (t)',
+			skipInvitationUpdate: false,
+			sections: [
+				{
+					id: 'userDetailsForm',
+					type: 'form',
+					description:
+						'<p>Please provide the following details to help us manage your submission in our system.</p>',
+					sectionComponent: 'UserInvitationDetailsFormStep',
+					props: {
+						userGroups: [
+							{
+								value: 2,
+								label: 'Journal manager',
+								disabled: false,
+							},
+							{
+								value: 3,
+								label: 'Journal editor',
+								disabled: false,
+							},
+							{
+								value: 4,
+								label: 'Production editor',
+								disabled: false,
+							},
+							{
+								value: 5,
+								label: 'Section editor',
+								disabled: false,
+							},
+							{
+								value: 6,
+								label: 'Guest editor',
+								disabled: false,
+							},
+							{
+								value: 7,
+								label: 'Copyeditor',
+								disabled: false,
+							},
+							{
+								value: 8,
+								label: 'Designer',
+								disabled: false,
+							},
+							{
+								value: 9,
+								label: 'Funding coordinator',
+								disabled: false,
+							},
+							{
+								value: 10,
+								label: 'Indexer',
+								disabled: false,
+							},
+							{
+								value: 11,
+								label: 'Layout Editor',
+								disabled: false,
+							},
+							{
+								value: 12,
+								label: 'Marketing and sales coordinator',
+								disabled: false,
+							},
+							{
+								value: 13,
+								label: 'Proofreader',
+								disabled: false,
+							},
+							{
+								value: 14,
+								label: 'Author',
+								disabled: false,
+							},
+							{
+								value: 15,
+								label: 'Translator',
+								disabled: false,
+							},
+							{
+								value: 16,
+								label: 'Reviewer',
+								disabled: false,
+							},
+							{
+								value: 17,
+								label: 'Reader',
+								disabled: false,
+							},
+							{
+								value: 18,
+								label: 'Subscription Manager',
+								disabled: false,
+							},
+						],
+						form: {
+							id: 'userDetails',
+							method: 'POST',
+							action:
+								'http://localhost/ojs/index.php/publicknowledge/api/v1/users',
+							fields: [
+								{
+									name: 'email',
+									component: 'field-text',
+									label: 'Email address',
+									groupId: 'default',
+									isRequired: true,
+									isMultilingual: false,
+									value: 'null',
+									inputType: 'text',
+									optIntoEdit: false,
+									optIntoEditLabel: '',
+									size: 'large',
+									prefix: '',
+								},
+								{
+									name: 'orcid',
+									component: 'field-text',
+									label: 'ORCID iD',
+									groupId: 'default',
+									isRequired: false,
+									isMultilingual: false,
+									value: null,
+									inputType: 'text',
+									optIntoEdit: false,
+									optIntoEditLabel: '',
+									size: 'large',
+									prefix: '',
+								},
+								{
+									name: 'givenName',
+									component: 'field-text',
+									label: 'Given Name',
+									groupId: 'default',
+									isRequired: false,
+									isMultilingual: false,
+									value: null,
+									inputType: 'text',
+									optIntoEdit: false,
+									optIntoEditLabel: '',
+									size: 'large',
+									prefix: '',
+								},
+								{
+									name: 'familyName',
+									component: 'field-text',
+									label: 'Family Name',
+									groupId: 'default',
+									isRequired: false,
+									isMultilingual: false,
+									value: null,
+									inputType: 'text',
+									optIntoEdit: false,
+									optIntoEditLabel: '',
+									size: 'large',
+									prefix: '',
+								},
+							],
+							groups: [
+								{
+									id: 'default',
+									pageId: 'default',
+								},
+							],
+							hiddenFields: {},
+							pages: [
+								{
+									id: 'default',
+									submitButton: {
+										label: 'Save',
+									},
+								},
+							],
+							primaryLocale: 'en',
+							visibleLocales: ['en'],
+							supportedFormLocales: [
+								{
+									key: 'en',
+									label: 'English',
+								},
+								{
+									key: 'fr_CA',
+									label: 'French',
+								},
+							],
+							errors: {},
+						},
+						validateFields: [
+							'orcid',
+							'email',
+							'givenName',
+							'familyName',
+							'userGroupsToAdd',
+						],
+					},
+				},
+			],
+		},
+		{
+			id: 'userInvitedEmail',
+			name: 'Review & invite for roles',
+			reviewName: '{$step} - Modify email shared with the user',
+			type: 'email',
+			description:
+				'Send the user an email to let them know about the invitation, next steps, journal GDPR polices and ORCiD verification',
+			nextButtonLabel: 'Invite user to the role (t)',
+			sections: [
+				{
+					id: 'userInvited',
+					type: 'email',
+					description:
+						'<p>Please provide the following details to help us manage your submission in our system.</p></p>',
+					sectionComponent: 'UserInvitationEmailComposerStep',
+					props: {
+						email: {
+							id: 'userInvited',
+							type: 'email',
+							name: 'Invite Users',
+							attachers: [],
+							canChangeRecipients: false,
+							canSkip: true,
+							description:
+								'Send an email to the authors to let them know that this submission will be sent for peer review. If possible, give the authors some indication of how long the peer review process might take and when they should expect to hear from the editors again. This email will not be sent until the decision is recorded.',
+							errors: {},
+							initialTemplateKey: 'EDITOR_DECISION_ACCEPT',
+							anonymousRecipients: false,
+							locale: 'en',
+							body: "{$recipientName}<br />\\n\n<br />\\n\nYou have now been registered as a user with Journal of Public Knowledge. We have included your username and password in this email, which are needed for all work with this journal through its website. At any point, you can ask to be removed from the journal's list of users by contacting me.<br />\\n\n<br />\\n\naccept url: {$acceptUrl}<br />\\n\ndecline url: {$declineUrl}<br />\\n\n<br />\\n\nThank you,<br />\\n\n<p>admin admin</p>\n",
+							subject: 'User invited',
+							emailTemplates: [emailTemplate],
+							emailTemplatesApiUrl:
+								'https://httbin.org/publicknowledge/api/v1/emailTemplates',
+							locales: [
+								{
+									locale: 'en',
+									name: 'English',
+								},
+								{
+									locale: 'fr_CA',
+									name: 'French',
+								},
+							],
+							to: [2, 3],
+							recipientOptions: recipientOptions,
+							recipients: recipientOptions.map((r) => r.value),
+							variables: {
+								en: [...InsertContentMock],
+								fr_CA: [...InsertContentMock],
+							},
+						},
+						validateFields: ['emailComposer'],
+					},
+				},
+			],
+		},
+	],
+};
diff --git a/src/pages/userInvitation/mocks/userMock.js b/src/pages/userInvitation/mocks/userMock.js
new file mode 100644
index 000000000..27e6fbd34
--- /dev/null
+++ b/src/pages/userInvitation/mocks/userMock.js
@@ -0,0 +1,67 @@
+export default {
+	itemsMax: 1,
+	items: [
+		{
+			_href: 'http://localhost/ojs/index.php/publicknowledge/api/v1/users/35',
+			affiliation: {
+				en: 'CUNY',
+				fr_CA: '',
+			},
+			biography: {
+				en: '',
+				fr_CA: '',
+			},
+			disabled: false,
+			email: 'carlo@mailinator.com',
+			fullName: 'Carlo Corino',
+			groups: [
+				{
+					id: 17,
+					name: {
+						en: 'Reader',
+						fr_CA: 'Lecteur-trice',
+					},
+					abbrev: {
+						en: 'Read',
+						fr_CA: 'Lect',
+					},
+					roleId: 1048576,
+					showTitle: true,
+					permitSelfRegistration: true,
+					permitMetadataEdit: false,
+					recommendOnly: false,
+				},
+				{
+					id: 14,
+					name: {
+						en: 'Author',
+						fr_CA: 'Auteur-e',
+					},
+					abbrev: {
+						en: 'AU',
+						fr_CA: 'AU',
+					},
+					roleId: 65536,
+					showTitle: true,
+					permitSelfRegistration: true,
+					permitMetadataEdit: false,
+					recommendOnly: false,
+				},
+			],
+			id: 35,
+			interests: [],
+			orcid: null,
+			orcidAccessDenied: null,
+			orcidAccessExpiresOn: null,
+			orcidAccessScope: null,
+			orcidAccessToken: null,
+			orcidRefreshToken: null,
+			orcidReviewPutCode: null,
+			preferredPublicName: {
+				en: '',
+				fr_CA: '',
+			},
+			userName: 'zwoods',
+		},
+	],
+};