Fix error shown if accepting a 3pid invite (#31735)

* Fix error shown if accepting a 3pid invite

If no matrix ID was bound to the email address, the code would
just throw an exception and display a very generic error.

* Unused import

* I hate you too, yarn.

* i18n

* Add test

src/components/views/rooms/RoomPreviewBar.tsx

@@ -19,7 +19,7 @@ import { AskToJoinIcon } from "@vector-im/compound-design-tokens/assets/web/icon
 
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import dis from "../../../dispatcher/dispatcher";
-import { _t, UserFriendlyError } from "../../../languageHandler";
+import { _t } from "../../../languageHandler";
 import SdkConfig from "../../../SdkConfig";
 import IdentityAuthClient from "../../../IdentityAuthClient";
 import InviteReason from "../elements/InviteReason";
@@ -112,7 +112,8 @@ interface IProps {
 interface IState {
     busy: boolean;
     accountEmails?: string[];
-    invitedEmailMxid?: string;
+    // The email address that was invited. undefined === not yet loaded, null === no associated email
+    invitedEmailMxid?: string | null;
     threePidFetchError?: MatrixError;
     reason?: string;
 }
@@ -165,10 +166,7 @@ class RoomPreviewBar extends React.Component<IProps, IState> {
                     this.props.invitedEmail,
                     identityAccessToken!,
                 );
-                if (!("mxid" in result)) {
+                this.setState({ invitedEmailMxid: result.mxid ?? null });
-                    throw new UserFriendlyError("room|error_3pid_invite_email_lookup");
-                }
-                this.setState({ invitedEmailMxid: result.mxid });
             } catch (err) {
                 this.setState({ threePidFetchError: err as MatrixError });
             }
@@ -212,7 +210,7 @@ class RoomPreviewBar extends React.Component<IProps, IState> {
         }
 
         if (this.props.inviterName) {
-            if (this.props.invitedEmail) {
+            if (this.props.invitedEmail !== undefined) {
                 if (this.state.threePidFetchError) {
                     return MessageCase.OtherThreePIDError;
                 } else if (this.state.accountEmails && !this.state.accountEmails.includes(this.props.invitedEmail)) {

src/i18n/strings/en_EN.json

@@ -1995,7 +1995,6 @@
         "dm_invite_title": "Do you want to chat with %(user)s?",
         "drop_file_prompt": "Drop file here to upload",
         "edit_topic": "Edit topic",
-        "error_3pid_invite_email_lookup": "Unable to find user by email",
         "error_cancel_knock_title": "Failed to cancel",
         "error_join_403": "You need an invite to access this room.",
         "error_join_404_1": "You attempted to join using a room ID without providing a list of servers to join through. Room IDs are internal identifiers and cannot be used to join a room without additional information.",

test/unit-tests/components/views/rooms/RoomPreviewBar-test.tsx

@@ -423,6 +423,20 @@ describe("<RoomPreviewBar />", () => {
                     await testJoinButton({ inviterName, invitedEmail })();
                 });
 
+                it("renders email mismatch message when no email bound", async () => {
+                    MatrixClientPeg.safeGet().lookupThreePid = jest.fn().mockReturnValue({});
+                    const component = getComponent({ inviterName, invitedEmail });
+                    await waitForElementToBeRemoved(() => component.queryByRole("progressbar"));
+
+                    expect(getMessage(component)).toMatchSnapshot();
+                    expect(MatrixClientPeg.safeGet().lookupThreePid).toHaveBeenCalledWith(
+                        "email",
+                        invitedEmail,
+                        "mock-token",
+                    );
+                    await testJoinButton({ inviterName, invitedEmail })();
+                });
+
                 it("renders invite message when invite email mxid match", async () => {
                     MatrixClientPeg.safeGet().lookupThreePid = jest.fn().mockReturnValue({ mxid: userId });
                     const component = getComponent({ inviterName, invitedEmail });

test/unit-tests/components/views/rooms/__snapshots__/RoomPreviewBar-test.tsx.snap

@@ -252,6 +252,19 @@ exports[`<RoomPreviewBar /> with an invite with an invited email when client has
 </div>
 `;
 
+exports[`<RoomPreviewBar /> with an invite with an invited email when client has an identity server connected renders email mismatch message when no email bound 1`] = `
+<div
+  class="mx_RoomPreviewBar_message"
+>
+  <h3>
+    This invite to RoomPreviewBar-test-room was sent to test@test.com
+  </h3>
+  <p>
+    Share this email in Settings to receive invites directly in Element.
+  </p>
+</div>
+`;
+
 exports[`<RoomPreviewBar /> with an invite with an invited email when client has an identity server connected renders invite message when invite email mxid match 1`] = `
 <div
   class="mx_RoomPreviewBar_message"