🐛 Fixed staff invite error for existing users

apps/admin-x-settings/src/components/settings/general/invite-user-modal.tsx

@@ -1,6 +1,6 @@
 import NiceModal from '@ebay/nice-modal-react';
 import validator from 'validator';
-import {APIError} from '@tryghost/admin-x-framework/errors';
+import {APIError, ValidationError} from '@tryghost/admin-x-framework/errors';
 import {HostLimitError, useLimiter} from '../../../hooks/use-limiter';
 import {Modal, Radio, TextField, showToast} from '@tryghost/admin-x-design-system';
 import {useAddInvite, useBrowseInvites} from '@tryghost/admin-x-framework/api/invites';
@@ -13,6 +13,9 @@ import {useRouting} from '@tryghost/admin-x-framework/routing';
 
 type RoleType = 'administrator' | 'editor' | 'author' | 'contributor' | 'super editor';
 
+const USER_ALREADY_REGISTERED_VALIDATION = 'User is already registered.';
+const USER_ALREADY_EXISTS_ERROR = 'A user with that email address already exists.';
+
 const InviteUserModal = NiceModal.create(() => {
     const modal = NiceModal.useModal();
     const rolesQuery = useBrowseRoles();
@@ -99,7 +102,7 @@ const InviteUserModal = NiceModal.create(() => {
 
         if (users?.some(({email: userEmail}) => userEmail === email)) {
             setErrors({
-                email: 'A user with that email address already exists.'
+                email: USER_ALREADY_EXISTS_ERROR
             });
             return;
         }
@@ -133,6 +136,16 @@ const InviteUserModal = NiceModal.create(() => {
             modal.remove();
             updateRoute('staff?tab=invited');
         } catch (e) {
+            const validationError = e instanceof ValidationError ? e.data?.errors[0] : undefined;
+
+            if (validationError && (validationError.context || validationError.message) === USER_ALREADY_REGISTERED_VALIDATION) {
+                setSaveState('');
+                setErrors({
+                    email: USER_ALREADY_EXISTS_ERROR
+                });
+                return;
+            }
+
             setSaveState('error');
             let title = 'Failed to send invitation';
             let message = (<span>If the problem persists, <a href="https://ghost.org/contact"><u>contact support</u>.</a>.</span>);

apps/admin-x-settings/test/acceptance/general/users/invite.test.ts

@@ -93,6 +93,73 @@ test.describe('User invitations', async () => {
         });
     });
 
+    test('Shows an existing-user validation error when the user is not in the loaded page', async ({page}) => {
+        const firstPageUsers = {
+            ...responseFixtures.users,
+            meta: {
+                pagination: {
+                    page: 1,
+                    limit: 100,
+                    pages: 2,
+                    total: 101,
+                    next: 2,
+                    prev: null
+                }
+            }
+        };
+
+        const {lastApiRequests} = await mockApi({page, requests: {
+            ...globalDataRequests,
+            browseUsers: {method: 'GET', path: '/users/?limit=100&include=roles', response: firstPageUsers},
+            browseInvites: {method: 'GET', path: '/invites/?limit=100&include=roles', response: responseFixtures.invites},
+            browseRoles: {method: 'GET', path: '/roles/?limit=100', response: responseFixtures.roles},
+            browseAssignableRoles: {method: 'GET', path: '/roles/?limit=100&permissions=assign', response: responseFixtures.roles},
+            addInvite: {
+                method: 'POST',
+                path: '/invites/',
+                responseStatus: 422,
+                responseHeaders: {
+                    'content-type': 'application/json'
+                },
+                response: {
+                    errors: [{
+                        id: 'validation-error',
+                        type: 'ValidationError',
+                        message: 'Validation error, cannot save invite.',
+                        context: 'User is already registered.',
+                        details: null,
+                        property: null,
+                        help: null,
+                        code: null,
+                        ghostErrorCode: null
+                    }]
+                }
+            }
+        }});
+
+        await page.goto('/');
+
+        const section = page.getByTestId('users');
+        await section.getByRole('button', {name: 'Invite people'}).click();
+
+        const modal = page.getByTestId('invite-user-modal');
+        await modal.getByLabel('Email address').fill('existing-user-page-2@test.com');
+        await modal.locator('button[value=author]').click();
+        await modal.getByRole('button', {name: 'Send invitation'}).click();
+
+        await expect.poll(() => lastApiRequests.addInvite?.body).toEqual({
+            invites: [{
+                email: 'existing-user-page-2@test.com',
+                expires: null,
+                role_id: '645453f3d254799990dd0e18',
+                status: null,
+                token: null
+            }]
+        });
+        await expect(modal).toContainText('A user with that email address already exists.');
+        await expect(page.getByTestId('toast-error')).not.toBeVisible();
+    });
+
     test('Supports resending invitations', async ({page}) => {
         const {lastApiRequests} = await mockApi({page, requests: {
             ...globalDataRequests,