diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/EditInviteLink.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/EditInviteLink.tsx
index a7698c83fbb81..a666d287d883d 100644
--- a/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/EditInviteLink.tsx
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/EditInviteLink.tsx
@@ -1,7 +1,7 @@
 import type { SelectOption } from '@rocket.chat/fuselage';
 import { Box, Field, FieldLabel, FieldRow, Select, Button } from '@rocket.chat/fuselage';
 import type { ReactElement } from 'react';
-import { useMemo } from 'react';
+import { useId, useMemo } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
@@ -17,6 +17,8 @@ const EditInviteLink = ({ daysAndMaxUses, onClickNewLink }: EditInviteLinkProps)
 		formState: { isDirty, isSubmitting },
 		control,
 	} = useForm({ defaultValues: { days: daysAndMaxUses.days, maxUses: daysAndMaxUses.maxUses } });
+	const expirationId = useId();
+	const maxUsesId = useId();
 
 	const daysOptions: SelectOption[] = useMemo(
 		() => [
@@ -44,25 +46,29 @@ const EditInviteLink = ({ daysAndMaxUses, onClickNewLink }: EditInviteLinkProps)
 	return (
 		<>
 			<Field>
-				<FieldLabel flexGrow={0}>{t('Expiration_(Days)')}</FieldLabel>
+				<FieldLabel htmlFor={expirationId} flexGrow={0}>
+					{t('Expiration_(Days)')}
+				</FieldLabel>
 				<FieldRow>
 					<Controller
 						name='days'
 						control={control}
 						render={({ field: { onChange, value, name } }): ReactElement => (
-							<Select name={name} value={value} onChange={onChange} options={daysOptions} />
+							<Select id={expirationId} name={name} value={value} onChange={onChange} options={daysOptions} />
 						)}
 					/>
 				</FieldRow>
 			</Field>
 			<Field>
-				<FieldLabel flexGrow={0}>{t('Max_number_of_uses')}</FieldLabel>
+				<FieldLabel htmlFor={maxUsesId} flexGrow={0}>
+					{t('Max_number_of_uses')}
+				</FieldLabel>
 				<FieldRow>
 					<Controller
 						name='maxUses'
 						control={control}
 						render={({ field: { onChange, value, name } }): ReactElement => (
-							<Select name={name} value={value} onChange={onChange} options={maxUsesOptions} />
+							<Select id={maxUsesId} name={name} value={value} onChange={onChange} options={maxUsesOptions} />
 						)}
 					/>
 				</FieldRow>
diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteLink.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteLink.tsx
index 5535b952417c4..7de3980a9960e 100644
--- a/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteLink.tsx
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteLink.tsx
@@ -1,5 +1,5 @@
 import { Box, Field, FieldLabel, FieldRow, UrlInput, Icon, Button, InputBox } from '@rocket.chat/fuselage';
-import type { ReactElement } from 'react';
+import { useId, type ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import useClipboardWithToast from '../../../../../hooks/useClipboardWithToast';
@@ -13,14 +13,19 @@ type InviteLinkProps = {
 const InviteLink = ({ linkText, captionText, onClickEdit }: InviteLinkProps): ReactElement => {
 	const { t } = useTranslation();
 	const { copy } = useClipboardWithToast(linkText);
+	const inviteLinkId = useId();
 
 	return (
 		<>
 			<Field>
-				<FieldLabel flexGrow={0}>{t('Invite_Link')}</FieldLabel>
+				<FieldLabel htmlFor={inviteLinkId} flexGrow={0}>
+					{t('Invite_Link')}
+				</FieldLabel>
 				<FieldRow>
 					{!linkText && <InputBox.Skeleton />}
-					{linkText && <UrlInput value={linkText} addon={<Icon onClick={(): Promise<void> => copy()} name='copy' size='x16' />} />}
+					{linkText && (
+						<UrlInput id={inviteLinkId} value={linkText} addon={<Icon onClick={(): Promise<void> => copy()} name='copy' size='x16' />} />
+					)}
 				</FieldRow>
 				{captionText && (
 					<Box pb={8} color='annotation' fontScale='c2'>
diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsers.spec.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsers.spec.tsx
new file mode 100644
index 0000000000000..f61063044669e
--- /dev/null
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsers.spec.tsx
@@ -0,0 +1,30 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import { composeStories } from '@storybook/react';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import * as stories from './InviteUsers.stories';
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
+
+beforeEach(() => {
+	jest.mock('react', () => ({
+		...jest.requireActual('react'),
+		useId: () => 1,
+	}));
+});
+
+test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
+	const view = render(<Story />);
+	expect(view.baseElement).toMatchSnapshot();
+});
+
+test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => {
+	const { container } = render(<Story />);
+
+	/**
+	 ** Disable 'nested-interactive' rule because our `Select` component is still not a11y compliant
+	 **/
+	const results = await axe(container, { rules: { 'nested-interactive': { enabled: false } } });
+	expect(results).toHaveNoViolations();
+});
diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsers.stories.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsers.stories.tsx
index bfa75ca775f94..c7b2c635f5354 100644
--- a/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsers.stories.tsx
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsers.stories.tsx
@@ -1,6 +1,10 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
 import type { Meta, StoryFn } from '@storybook/react';
 
 import InviteUsers from './InviteUsers';
+import InviteUsersEdit from './InviteUsersEdit';
+import InviteUsersError from './InviteUsersError';
+import InviteUsersLoading from './InviteUsersLoading';
 import { Contextualbar } from '../../../../../components/Contextualbar';
 
 export default {
@@ -10,12 +14,31 @@ export default {
 		layout: 'fullscreen',
 		actions: { argTypesRegex: '^on.*' },
 	},
-	decorators: [(fn) => <Contextualbar height='100vh'>{fn()}</Contextualbar>],
+	decorators: [
+		(fn) => <Contextualbar height='100vh'>{fn()}</Contextualbar>,
+		mockAppRoot()
+			.withTranslations('en', 'core', {
+				'Edit_Invite': 'Edit invite',
+				'Invite_Users': 'Invite users',
+				'Invite_Link': 'Invite link',
+				'Expiration_(Days)': 'Expiration (Days)',
+				'Max_number_of_uses': 'Max number of uses',
+			})
+			.buildStoryDecorator(),
+	],
 } satisfies Meta<typeof InviteUsers>;
 
 export const Default: StoryFn<typeof InviteUsers> = (args) => <InviteUsers {...args} />;
-Default.storyName = 'InviteUsers';
+Default.storyName = 'Invite Link';
 Default.args = {
 	linkText: 'https://go.rocket.chat/invite?host=open.rocket.chat&path=invite%2F5sBs3a',
 	captionText: 'Expire on February 4, 2020 4:45 PM.',
 };
+
+export const InviteEdit: StoryFn<typeof InviteUsersEdit> = (args) => (
+	<InviteUsersEdit {...args} daysAndMaxUses={{ days: '1', maxUses: '5' }} />
+);
+
+export const InviteLoading: StoryFn<typeof InviteUsersLoading> = (args) => <InviteUsersLoading {...args} />;
+
+export const InviteError: StoryFn<typeof InviteUsersError> = (args) => <InviteUsersError {...args} error={new Error('Error message')} />;
diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsers.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsers.tsx
index 2a8648152ec60..d8c13278b58da 100644
--- a/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsers.tsx
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsers.tsx
@@ -1,58 +1,20 @@
-import { Callout } from '@rocket.chat/fuselage';
 import type { ReactElement } from 'react';
-import { useTranslation } from 'react-i18next';
 
-import EditInviteLink from './EditInviteLink';
 import InviteLink from './InviteLink';
-import {
-	ContextualbarHeader,
-	ContextualbarTitle,
-	ContextualbarBack,
-	ContextualbarClose,
-	ContextualbarScrollableContent,
-} from '../../../../../components/Contextualbar';
+import InviteUsersWrapper from './InviteUsersWrapper';
 
 type InviteUsersProps = {
 	onClickBackMembers?: () => void;
-	onClickBackLink?: () => void;
-	onClickNewLink: (daysAndMaxUses: { days: string; maxUses: string }) => void;
 	onClose: () => void;
-	isEditing: boolean;
-	daysAndMaxUses: { days: string; maxUses: string };
 	onClickEdit: () => void;
 	captionText: string;
 	linkText: string;
-	error?: Error;
 };
 
-const InviteUsers = ({
-	onClickBackMembers,
-	onClickBackLink,
-	onClickNewLink,
-	onClose,
-	isEditing,
-	onClickEdit,
-	daysAndMaxUses,
-	captionText,
-	linkText,
-	error,
-}: InviteUsersProps): ReactElement => {
-	const { t } = useTranslation();
-
-	return (
-		<>
-			<ContextualbarHeader>
-				{(onClickBackMembers || onClickBackLink) && <ContextualbarBack onClick={isEditing ? onClickBackLink : onClickBackMembers} />}
-				<ContextualbarTitle>{t('Invite_Users')}</ContextualbarTitle>
-				{onClose && <ContextualbarClose onClick={onClose} />}
-			</ContextualbarHeader>
-			<ContextualbarScrollableContent>
-				{error && <Callout type='danger'>{error.toString()}</Callout>}
-				{isEditing && !error && <EditInviteLink onClickNewLink={onClickNewLink} daysAndMaxUses={daysAndMaxUses} />}
-				{!isEditing && !error && <InviteLink captionText={captionText} onClickEdit={onClickEdit} linkText={linkText} />}
-			</ContextualbarScrollableContent>
-		</>
-	);
-};
+const InviteUsers = ({ onClickBackMembers, onClose, onClickEdit, captionText, linkText }: InviteUsersProps): ReactElement => (
+	<InviteUsersWrapper onClickBack={onClickBackMembers} onClose={onClose}>
+		<InviteLink captionText={captionText} onClickEdit={onClickEdit} linkText={linkText} />
+	</InviteUsersWrapper>
+);
 
 export default InviteUsers;
diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsersEdit.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsersEdit.tsx
new file mode 100644
index 0000000000000..0c9a0bb71e80a
--- /dev/null
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsersEdit.tsx
@@ -0,0 +1,21 @@
+import type { ReactElement } from 'react';
+
+import EditInviteLink from './EditInviteLink';
+import InviteUsersWrapper from './InviteUsersWrapper';
+
+type InviteUsersEditProps = {
+	onClickBackLink?: () => void;
+	onClickNewLink: (daysAndMaxUses: { days: string; maxUses: string }) => void;
+	onClose: () => void;
+	daysAndMaxUses: { days: string; maxUses: string };
+};
+
+const InviteUsersEdit = ({ onClickBackLink, onClickNewLink, onClose, daysAndMaxUses }: InviteUsersEditProps): ReactElement => {
+	return (
+		<InviteUsersWrapper onClickBack={onClickBackLink} onClose={onClose}>
+			<EditInviteLink onClickNewLink={onClickNewLink} daysAndMaxUses={daysAndMaxUses} />
+		</InviteUsersWrapper>
+	);
+};
+
+export default InviteUsersEdit;
diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsersError.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsersError.tsx
new file mode 100644
index 0000000000000..3ffb5efe1b6e4
--- /dev/null
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsersError.tsx
@@ -0,0 +1,18 @@
+import { Callout } from '@rocket.chat/fuselage';
+import type { ReactElement } from 'react';
+
+import InviteUsersWrapper from './InviteUsersWrapper';
+
+type InviteUsersProps = {
+	onClose: () => void;
+	error: Error;
+	onClickBack?: (() => void) | undefined;
+};
+
+const InviteUsersError = ({ onClose, error, onClickBack }: InviteUsersProps): ReactElement => (
+	<InviteUsersWrapper onClose={onClose} onClickBack={onClickBack}>
+		<Callout type='danger'>{(error || '').toString()}</Callout>
+	</InviteUsersWrapper>
+);
+
+export default InviteUsersError;
diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsersLoading.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsersLoading.tsx
new file mode 100644
index 0000000000000..67d80d0c0a87d
--- /dev/null
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsersLoading.tsx
@@ -0,0 +1,17 @@
+import { Skeleton } from '@rocket.chat/fuselage';
+import type { ReactElement } from 'react';
+
+import InviteUsersWrapper from './InviteUsersWrapper';
+
+type InviteUsersProps = {
+	onClose: () => void;
+	onClickBack: (() => void) | undefined;
+};
+
+const InviteUsersLoading = ({ onClose, onClickBack: onClickBackMembers }: InviteUsersProps): ReactElement => (
+	<InviteUsersWrapper onClose={onClose} onClickBack={onClickBackMembers}>
+		<Skeleton w='full' />
+	</InviteUsersWrapper>
+);
+
+export default InviteUsersLoading;
diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsersWithData.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsersWithData.tsx
index 56b83d1975df4..f514b3b3fc4fd 100644
--- a/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsersWithData.tsx
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsersWithData.tsx
@@ -1,10 +1,14 @@
 import type { IRoom } from '@rocket.chat/core-typings';
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useEndpoint, useTranslation, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
 import type { ReactElement } from 'react';
 import { useState, useEffect } from 'react';
 
 import InviteUsers from './InviteUsers';
+import InviteUsersEdit from './InviteUsersEdit';
+import InviteUsersError from './InviteUsersError';
+import InviteUsersLoading from './InviteUsersLoading';
 import { useFormatDateAndTime } from '../../../../../hooks/useFormatDateAndTime';
 import { useRoomToolbox } from '../../../contexts/RoomToolboxContext';
 
@@ -19,18 +23,12 @@ const InviteUsersWithData = ({ rid, onClickBack }: InviteUsersWithDataProps): Re
 	const [
 		{
 			isEditing,
-			url,
-			caption,
-			error,
 			daysAndMaxUses: { days, maxUses },
 		},
 		setInviteState,
 	] = useState({
 		isEditing: false,
 		daysAndMaxUses: { days: '1', maxUses: '0' },
-		url: '',
-		caption: '',
-		error: undefined as Error | undefined,
 	});
 
 	const { closeTab } = useRoomToolbox();
@@ -41,7 +39,7 @@ const InviteUsersWithData = ({ rid, onClickBack }: InviteUsersWithDataProps): Re
 	const handleBackToLink = useEffectEvent(() => setInviteState((prevState) => ({ ...prevState, isEditing: false })));
 
 	const linkExpirationText = useEffectEvent(
-		(data: {
+		(data?: {
 			days: number;
 			maxUses: number;
 			rid: string;
@@ -79,36 +77,53 @@ const InviteUsersWithData = ({ rid, onClickBack }: InviteUsersWithDataProps): Re
 		},
 	);
 
+	const { data, isSuccess, error, isError, isLoading } = useQuery({
+		queryKey: ['findOrCreateInvite', days, maxUses],
+		queryFn: async () => findOrCreateInvite({ rid, days: Number(days), maxUses: Number(maxUses) }),
+	});
+
 	useEffect(() => {
-		(async (): Promise<void> => {
-			try {
-				const data = await findOrCreateInvite({ rid, days: Number(days), maxUses: Number(maxUses) });
-				setInviteState((prevState) => ({ ...prevState, url: data?.url, caption: linkExpirationText(data) }));
-				dispatchToastMessage({ type: 'success', message: t('Invite_link_generated') });
-			} catch (error) {
-				setInviteState((prevState) => ({ ...prevState, error: error as Error }));
-			}
-		})();
-	}, [dispatchToastMessage, t, findOrCreateInvite, linkExpirationText, rid, days, maxUses]);
+		if (isSuccess) {
+			dispatchToastMessage({ type: 'success', message: t('Invite_link_generated') });
+		}
+	}, [dispatchToastMessage, isSuccess, t]);
 
 	const handleGenerateLink = useEffectEvent((daysAndMaxUses: { days: string; maxUses: string }) => {
 		setInviteState((prevState) => ({ ...prevState, daysAndMaxUses, isEditing: false }));
 	});
 
-	return (
-		<InviteUsers
-			isEditing={isEditing}
-			error={error}
-			linkText={url}
-			captionText={caption}
-			daysAndMaxUses={{ days, maxUses }}
-			onClose={closeTab}
-			onClickBackMembers={onClickBack}
-			onClickBackLink={handleBackToLink}
-			onClickEdit={handleEdit}
-			onClickNewLink={handleGenerateLink}
-		/>
-	);
+	if (isError) {
+		return <InviteUsersError error={error} onClose={closeTab} onClickBack={onClickBack} />;
+	}
+
+	if (isLoading) {
+		return <InviteUsersLoading onClose={closeTab} onClickBack={onClickBack} />;
+	}
+
+	if (isEditing) {
+		return (
+			<InviteUsersEdit
+				daysAndMaxUses={{ days, maxUses }}
+				onClickBackLink={handleBackToLink}
+				onClickNewLink={handleGenerateLink}
+				onClose={closeTab}
+			/>
+		);
+	}
+
+	if (isSuccess) {
+		return (
+			<InviteUsers
+				linkText={data.url}
+				captionText={linkExpirationText(data)}
+				onClose={closeTab}
+				onClickBackMembers={onClickBack}
+				onClickEdit={handleEdit}
+			/>
+		);
+	}
+
+	return <InviteUsersError error={new Error(t('Something_Went_Wrong'))} onClose={closeTab} onClickBack={onClickBack} />;
 };
 
 export default InviteUsersWithData;
diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsersWrapper.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsersWrapper.tsx
new file mode 100644
index 0000000000000..ad330f0af83bc
--- /dev/null
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsersWrapper.tsx
@@ -0,0 +1,33 @@
+import type { ReactElement } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import {
+	ContextualbarHeader,
+	ContextualbarTitle,
+	ContextualbarBack,
+	ContextualbarClose,
+	ContextualbarScrollableContent,
+} from '../../../../../components/Contextualbar';
+
+type InviteUsersWrapperProps = {
+	children: ReactElement;
+	onClickBack: (() => void) | undefined;
+	onClose: () => void;
+};
+
+const InviteUsersWrapper = ({ children, onClickBack, onClose }: InviteUsersWrapperProps): ReactElement => {
+	const { t } = useTranslation();
+
+	return (
+		<>
+			<ContextualbarHeader>
+				<ContextualbarBack onClick={onClickBack} />
+				<ContextualbarTitle>{t('Invite_Users')}</ContextualbarTitle>
+				<ContextualbarClose onClick={onClose} />
+			</ContextualbarHeader>
+			<ContextualbarScrollableContent>{children}</ContextualbarScrollableContent>
+		</>
+	);
+};
+
+export default InviteUsersWrapper;
diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/__snapshots__/InviteUsers.spec.tsx.snap b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/__snapshots__/InviteUsers.spec.tsx.snap
new file mode 100644
index 0000000000000..1e741aeddd016
--- /dev/null
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/__snapshots__/InviteUsers.spec.tsx.snap
@@ -0,0 +1,667 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders Default without crashing 1`] = `
+<body>
+  <div>
+    <div
+      class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-ucmcg1"
+    >
+      <div
+        class="rcx-box rcx-box--full rcx-css-ftwpdg"
+      >
+        <div
+          class="rcx-box rcx-box--full rcx-css-1sl6k6j"
+        >
+          <button
+            class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-x7bl3q rcx-css-1yzvz7u"
+            title="Back"
+            type="button"
+          >
+            <i
+              aria-hidden="true"
+              class="rcx-box rcx-box--full rcx-icon--name-arrow-back rcx-icon rcx-css-4pvxx3"
+            >
+              ⦉
+            </i>
+          </button>
+          <div
+            class="rcx-box rcx-box--full rcx-css-x7bl3q rcx-css-1to6ka7"
+            id="contextualbarTitle"
+          >
+            Invite users
+          </div>
+          <button
+            aria-label="Close"
+            class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-x7bl3q rcx-css-1yzvz7u"
+            data-qa="ContextualbarActionClose"
+            type="button"
+          >
+            <i
+              aria-hidden="true"
+              class="rcx-box rcx-box--full rcx-icon--name-cross rcx-icon rcx-css-4pvxx3"
+            >
+              
+            </i>
+          </button>
+        </div>
+      </div>
+      <div
+        class="rcx-box rcx-box--full rcx-css-1svuzur"
+      >
+        <div
+          class="rcx-box rcx-box--full rcx-css-pln26h rcx-css-1cb6i7s"
+          data-overlayscrollbars="host"
+        >
+          <div
+            class="os-size-observer"
+          >
+            <div
+              class="os-size-observer-listener"
+            />
+          </div>
+          <div
+            class=""
+            data-overlayscrollbars-padding=""
+            style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; top: 0px; left: 0px; width: calc(100% + 0px);"
+          >
+            <div
+              class=""
+              data-overlayscrollbars-viewport="overflowXHidden overflowYHidden"
+              style="padding: 0px 0px 0px 0px;"
+              tabindex="-1"
+            >
+              <div
+                class="rcx-box rcx-box--full rcx-css-iag4sp"
+              >
+                <div
+                  class="rcx-box rcx-box--full rcx-field rcx-css-1fuhgt0"
+                >
+                  <label
+                    class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-field__label rcx-css-irxdij"
+                    for=":r0:"
+                  >
+                    Invite link
+                  </label>
+                  <span
+                    class="rcx-box rcx-box--full rcx-field__row"
+                  >
+                    <label
+                      class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+                    >
+                      <input
+                        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box"
+                        id=":r0:"
+                        size="1"
+                        type="url"
+                        value="https://go.rocket.chat/invite?host=open.rocket.chat&path=invite%2F5sBs3a"
+                      />
+                      <span
+                        class="rcx-box rcx-box--full rcx-input-box__addon"
+                      >
+                        <i
+                          aria-hidden="true"
+                          class="rcx-box rcx-box--full rcx-icon--name-copy rcx-icon rcx-css-1g87xs3"
+                        >
+                          
+                        </i>
+                      </span>
+                    </label>
+                  </span>
+                  <div
+                    class="rcx-box rcx-box--full rcx-css-ox4caw"
+                  >
+                    Expire on February 4, 2020 4:45 PM.
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="os-scrollbar os-scrollbar-horizontal os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
+            style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
+          >
+            <div
+              class="os-scrollbar-track"
+            >
+              <div
+                class="os-scrollbar-handle"
+              />
+            </div>
+          </div>
+          <div
+            class="os-scrollbar os-scrollbar-vertical os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
+            style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
+          >
+            <div
+              class="os-scrollbar-track"
+            >
+              <div
+                class="os-scrollbar-handle"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`renders InviteEdit without crashing 1`] = `
+<body>
+  <div>
+    <div
+      class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-ucmcg1"
+    >
+      <div
+        class="rcx-box rcx-box--full rcx-css-ftwpdg"
+      >
+        <div
+          class="rcx-box rcx-box--full rcx-css-1sl6k6j"
+        >
+          <button
+            class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-x7bl3q rcx-css-1yzvz7u"
+            title="Back"
+            type="button"
+          >
+            <i
+              aria-hidden="true"
+              class="rcx-box rcx-box--full rcx-icon--name-arrow-back rcx-icon rcx-css-4pvxx3"
+            >
+              ⦉
+            </i>
+          </button>
+          <div
+            class="rcx-box rcx-box--full rcx-css-x7bl3q rcx-css-1to6ka7"
+            id="contextualbarTitle"
+          >
+            Invite users
+          </div>
+          <button
+            aria-label="Close"
+            class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-x7bl3q rcx-css-1yzvz7u"
+            data-qa="ContextualbarActionClose"
+            type="button"
+          >
+            <i
+              aria-hidden="true"
+              class="rcx-box rcx-box--full rcx-icon--name-cross rcx-icon rcx-css-4pvxx3"
+            >
+              
+            </i>
+          </button>
+        </div>
+      </div>
+      <div
+        class="rcx-box rcx-box--full rcx-css-1svuzur"
+      >
+        <div
+          class="rcx-box rcx-box--full rcx-css-pln26h rcx-css-1cb6i7s"
+          data-overlayscrollbars="host"
+        >
+          <div
+            class="os-size-observer"
+          >
+            <div
+              class="os-size-observer-listener"
+            />
+          </div>
+          <div
+            class=""
+            data-overlayscrollbars-padding=""
+            style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; top: 0px; left: 0px; width: calc(100% + 0px);"
+          >
+            <div
+              class=""
+              data-overlayscrollbars-viewport="overflowXHidden overflowYHidden"
+              style="padding: 0px 0px 0px 0px;"
+              tabindex="-1"
+            >
+              <div
+                class="rcx-box rcx-box--full rcx-css-iag4sp"
+              >
+                <div
+                  class="rcx-box rcx-box--full rcx-field rcx-css-1fuhgt0"
+                >
+                  <label
+                    class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-field__label rcx-css-irxdij"
+                    for=":r1:"
+                  >
+                    Expiration (Days)
+                  </label>
+                  <span
+                    class="rcx-box rcx-box--full rcx-field__row"
+                  >
+                    <button
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      aria-labelledby="react-aria-:ra:"
+                      class="rcx-box rcx-box--full rcx-select rcx-css-1vw6rc6"
+                      id=":r1:"
+                      type="button"
+                    >
+                      <div
+                        aria-hidden="true"
+                        data-a11y-ignore="aria-hidden-focus"
+                        data-react-aria-prevent-focus="true"
+                        data-testid="hidden-select-container"
+                        style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+                      >
+                        <label>
+                          <select
+                            name="days"
+                            tabindex="-1"
+                          >
+                            <option />
+                            <option
+                              value="1"
+                            >
+                              1
+                            </option>
+                            <option
+                              value="7"
+                            >
+                              7
+                            </option>
+                            <option
+                              value="15"
+                            >
+                              15
+                            </option>
+                            <option
+                              value="30"
+                            >
+                              30
+                            </option>
+                            <option
+                              value="0"
+                            >
+                              0
+                            </option>
+                          </select>
+                        </label>
+                      </div>
+                      <span
+                        class="rcx-box rcx-box--full rcx-css-4w7o7u"
+                        id="react-aria-:ra:"
+                      >
+                        1
+                      </span>
+                      <i
+                        aria-hidden="true"
+                        class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-6vi44e"
+                      >
+                        
+                      </i>
+                    </button>
+                  </span>
+                </div>
+                <div
+                  class="rcx-box rcx-box--full rcx-field rcx-css-1fuhgt0"
+                >
+                  <label
+                    class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-field__label rcx-css-irxdij"
+                    for=":r2:"
+                  >
+                    Max number of uses
+                  </label>
+                  <span
+                    class="rcx-box rcx-box--full rcx-field__row"
+                  >
+                    <button
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      aria-labelledby="react-aria-:ri:"
+                      class="rcx-box rcx-box--full rcx-select rcx-css-1vw6rc6"
+                      id=":r2:"
+                      type="button"
+                    >
+                      <div
+                        aria-hidden="true"
+                        data-a11y-ignore="aria-hidden-focus"
+                        data-react-aria-prevent-focus="true"
+                        data-testid="hidden-select-container"
+                        style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+                      >
+                        <label>
+                          <select
+                            name="maxUses"
+                            tabindex="-1"
+                          >
+                            <option />
+                            <option
+                              value="5"
+                            >
+                              5
+                            </option>
+                            <option
+                              value="10"
+                            >
+                              10
+                            </option>
+                            <option
+                              value="25"
+                            >
+                              25
+                            </option>
+                            <option
+                              value="50"
+                            >
+                              50
+                            </option>
+                            <option
+                              value="100"
+                            >
+                              100
+                            </option>
+                            <option
+                              value="0"
+                            >
+                              0
+                            </option>
+                          </select>
+                        </label>
+                      </div>
+                      <span
+                        class="rcx-box rcx-box--full rcx-css-4w7o7u"
+                        id="react-aria-:ri:"
+                      >
+                        5
+                      </span>
+                      <i
+                        aria-hidden="true"
+                        class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-6vi44e"
+                      >
+                        
+                      </i>
+                    </button>
+                  </span>
+                </div>
+                <div
+                  class="rcx-box rcx-box--full rcx-css-31obua"
+                >
+                  <button
+                    class="rcx-box rcx-box--full rcx-button--primary rcx-button"
+                    disabled=""
+                    type="button"
+                  >
+                    <span
+                      class="rcx-button--content"
+                    >
+                      Generate_New_Link
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="os-scrollbar os-scrollbar-horizontal os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
+            style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
+          >
+            <div
+              class="os-scrollbar-track"
+            >
+              <div
+                class="os-scrollbar-handle"
+              />
+            </div>
+          </div>
+          <div
+            class="os-scrollbar os-scrollbar-vertical os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
+            style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
+          >
+            <div
+              class="os-scrollbar-track"
+            >
+              <div
+                class="os-scrollbar-handle"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`renders InviteError without crashing 1`] = `
+<body>
+  <div>
+    <div
+      class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-ucmcg1"
+    >
+      <div
+        class="rcx-box rcx-box--full rcx-css-ftwpdg"
+      >
+        <div
+          class="rcx-box rcx-box--full rcx-css-1sl6k6j"
+        >
+          <button
+            class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-x7bl3q rcx-css-1yzvz7u"
+            title="Back"
+            type="button"
+          >
+            <i
+              aria-hidden="true"
+              class="rcx-box rcx-box--full rcx-icon--name-arrow-back rcx-icon rcx-css-4pvxx3"
+            >
+              ⦉
+            </i>
+          </button>
+          <div
+            class="rcx-box rcx-box--full rcx-css-x7bl3q rcx-css-1to6ka7"
+            id="contextualbarTitle"
+          >
+            Invite users
+          </div>
+          <button
+            aria-label="Close"
+            class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-x7bl3q rcx-css-1yzvz7u"
+            data-qa="ContextualbarActionClose"
+            type="button"
+          >
+            <i
+              aria-hidden="true"
+              class="rcx-box rcx-box--full rcx-icon--name-cross rcx-icon rcx-css-4pvxx3"
+            >
+              
+            </i>
+          </button>
+        </div>
+      </div>
+      <div
+        class="rcx-box rcx-box--full rcx-css-1svuzur"
+      >
+        <div
+          class="rcx-box rcx-box--full rcx-css-pln26h rcx-css-1cb6i7s"
+          data-overlayscrollbars="host"
+        >
+          <div
+            class="os-size-observer"
+          >
+            <div
+              class="os-size-observer-listener"
+            />
+          </div>
+          <div
+            class=""
+            data-overlayscrollbars-padding=""
+            style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; top: 0px; left: 0px; width: calc(100% + 0px);"
+          >
+            <div
+              class=""
+              data-overlayscrollbars-viewport="overflowXHidden overflowYHidden"
+              style="padding: 0px 0px 0px 0px;"
+              tabindex="-1"
+            >
+              <div
+                class="rcx-box rcx-box--full rcx-css-iag4sp"
+              >
+                <section
+                  class="rcx-box rcx-box--full rcx-callout rcx-callout--danger rcx-css-1jggbrp rcx-css-1fuhgt0"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-ban rcx-icon rcx-callout__icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                  <div
+                    class="rcx-box rcx-box--full rcx-callout__wrapper"
+                  >
+                    <div
+                      class="rcx-box rcx-box--full rcx-callout__wrapper-content"
+                    >
+                      <div
+                        class="rcx-box rcx-box--full rcx-callout__content"
+                      >
+                        Error: Error message
+                      </div>
+                    </div>
+                  </div>
+                </section>
+              </div>
+            </div>
+          </div>
+          <div
+            class="os-scrollbar os-scrollbar-horizontal os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
+            style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
+          >
+            <div
+              class="os-scrollbar-track"
+            >
+              <div
+                class="os-scrollbar-handle"
+              />
+            </div>
+          </div>
+          <div
+            class="os-scrollbar os-scrollbar-vertical os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
+            style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
+          >
+            <div
+              class="os-scrollbar-track"
+            >
+              <div
+                class="os-scrollbar-handle"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`renders InviteLoading without crashing 1`] = `
+<body>
+  <div>
+    <div
+      class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-ucmcg1"
+    >
+      <div
+        class="rcx-box rcx-box--full rcx-css-ftwpdg"
+      >
+        <div
+          class="rcx-box rcx-box--full rcx-css-1sl6k6j"
+        >
+          <button
+            class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-x7bl3q rcx-css-1yzvz7u"
+            title="Back"
+            type="button"
+          >
+            <i
+              aria-hidden="true"
+              class="rcx-box rcx-box--full rcx-icon--name-arrow-back rcx-icon rcx-css-4pvxx3"
+            >
+              ⦉
+            </i>
+          </button>
+          <div
+            class="rcx-box rcx-box--full rcx-css-x7bl3q rcx-css-1to6ka7"
+            id="contextualbarTitle"
+          >
+            Invite users
+          </div>
+          <button
+            aria-label="Close"
+            class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-x7bl3q rcx-css-1yzvz7u"
+            data-qa="ContextualbarActionClose"
+            type="button"
+          >
+            <i
+              aria-hidden="true"
+              class="rcx-box rcx-box--full rcx-icon--name-cross rcx-icon rcx-css-4pvxx3"
+            >
+              
+            </i>
+          </button>
+        </div>
+      </div>
+      <div
+        class="rcx-box rcx-box--full rcx-css-1svuzur"
+      >
+        <div
+          class="rcx-box rcx-box--full rcx-css-pln26h rcx-css-1cb6i7s"
+          data-overlayscrollbars="host"
+        >
+          <div
+            class="os-size-observer"
+          >
+            <div
+              class="os-size-observer-listener"
+            />
+          </div>
+          <div
+            class=""
+            data-overlayscrollbars-padding=""
+            style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; top: 0px; left: 0px; width: calc(100% + 0px);"
+          >
+            <div
+              class=""
+              data-overlayscrollbars-viewport="overflowXHidden overflowYHidden"
+              style="padding: 0px 0px 0px 0px;"
+              tabindex="-1"
+            >
+              <div
+                class="rcx-box rcx-box--full rcx-css-iag4sp"
+              >
+                <span
+                  class="rcx-skeleton rcx-skeleton--text rcx-css-1jggbrp rcx-css-1qcz93u"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="os-scrollbar os-scrollbar-horizontal os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
+            style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
+          >
+            <div
+              class="os-scrollbar-track"
+            >
+              <div
+                class="os-scrollbar-handle"
+              />
+            </div>
+          </div>
+          <div
+            class="os-scrollbar os-scrollbar-vertical os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
+            style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
+          >
+            <div
+              class="os-scrollbar-track"
+            >
+              <div
+                class="os-scrollbar-handle"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;