Update playwright tests to have a two stage on the consent bar.

playwright/e2e/room/room-status-bar.spec.ts

@@ -83,6 +83,13 @@ test.describe("Room Status Bar", () => {
             const banner = page.getByRole("region", { name: "Room status bar" });
             await expect(banner).toBeVisible({ timeout: 15000 });
             await expect(banner).toMatchScreenshot("consent.png");
+
+            // Click consent
+            await banner.getByRole("link", { name: "View Terms and Conditions" }).click();
+            await page.unroute("**/_matrix/client/**/send**");
+            // Should now be allowed to retry.
+            await banner.getByRole("button", { name: "Retry all" }).click();
+            await expect(banner).not.toBeVisible();
         },
     );
     test.describe("Message fails to send", () => {
@@ -161,7 +168,7 @@ test.describe("Room Status Bar", () => {
                 await composer.fill("Hello");
                 await composer.press("Enter");
 
-                const banner = page.getByText("!Some of your messages have");
+                const banner = page.getByRole("status", { name: "Could not start a chat with this user" });
                 await expect(banner).toBeVisible();
                 await expect(banner).toMatchScreenshot("local_room_create_failed.png");
 

src/viewmodels/room/RoomStatusBar.ts

@@ -45,11 +45,20 @@ export class RoomStatusBarViewModel
     extends BaseViewModel<RoomStatusBarViewSnapshot, Props>
     implements RoomStatusBarViewModelInterface
 {
-    private static readonly determineStateForUnreadMessages = (room: Room): RoomStatusBarViewSnapshot["state"] => {
+    private static readonly determineStateForUnreadMessages = (
+        room: Room,
+        hasClickedTermsAndConditions: boolean,
+    ): RoomStatusBarViewSnapshot["state"] => {
         const unsentMessages = room.getPendingEvents().filter((ev) => ev.status === EventStatus.NOT_SENT);
         if (unsentMessages.length === 0) {
             return null;
         }
+        if (hasClickedTermsAndConditions) {
+            // The user has just clicked (and we assume accepted) the terms and contitions, so show them the retry buttons
+            return {
+                isResending: false,
+            };
+        }
         let resourceLimitError: MatrixError | null = null;
         for (const m of unsentMessages) {
             if (m.error) {
@@ -80,20 +89,13 @@ export class RoomStatusBarViewModel
         room: Room,
         client: MatrixClient,
         isResending: boolean,
-        isRetryingRoomCreation: boolean,
+        hasClickedTermsAndConditions: boolean,
     ): RoomStatusBarViewSnapshot => {
         if (room instanceof LocalRoom) {
-            if (isRetryingRoomCreation) {
-                return {
-                    state: {
-                        isRetryingRoomCreation,
-                    },
-                };
-            }
             if (room.isError) {
                 return {
                     state: {
-                        isRetryingRoomCreation,
+                        shouldRetryRoomCreation: true,
                     },
                 };
             } else {
@@ -113,20 +115,15 @@ export class RoomStatusBarViewModel
         const syncState = client.getSyncState();
 
         // Highest priority.
+        // no conn bar trumps the "some not sent" msg since you can't resend without
+        // a connection!
         if (syncState === SyncState.Error) {
-            // no conn bar trumps the "some not sent" msg since you can't resend without
-            // a connection!
-            // There's one situation in which we don't show this 'no connection' bar, and that's
-            // if it's a resource limit exceeded error: those are shown in the top bar.
             const syncData = client.getSyncStateData();
             if (syncData?.error?.name === "M_RESOURCE_LIMIT_EXCEEDED") {
-                const error = syncData.error as MatrixError;
+                // There's one situation in which we don't show this 'no connection' bar, and that's
+                // if it's a M_RESOURCE_LIMIT_EXCEEDED error: those are shown as a toast by LoggedInView.
                 return {
-                    state: {
-                        // TODO: Correct limit
-                        resourceLimit: error.data.limit_type ?? "",
-                        adminContactHref: error.data.admin_contact,
-                    },
+                    state: null,
                 };
             } else {
                 return {
@@ -138,7 +135,7 @@ export class RoomStatusBarViewModel
         }
 
         // Then check messages.
-        return { state: this.determineStateForUnreadMessages(room) };
+        return { state: this.determineStateForUnreadMessages(room, hasClickedTermsAndConditions) };
     };
 
     private readonly client: MatrixClient;
@@ -160,7 +157,7 @@ export class RoomStatusBarViewModel
     };
 
     private isResending = false;
-    private isRetryingRoomCreation = false;
+    private hasClickedTermsAndConditions = false;
 
     private setSnapshot(): void {
         this.snapshot.set(
@@ -168,9 +165,13 @@ export class RoomStatusBarViewModel
                 this.props.room,
                 this.client,
                 this.isResending,
-                this.isRetryingRoomCreation,
+                this.hasClickedTermsAndConditions,
             ),
         );
+        // Reset `hasClickedTermsAndConditions` once the state has cleared.
+        if (this.hasClickedTermsAndConditions && !this.snapshot.current.state) {
+            this.hasClickedTermsAndConditions = false;
+        }
     }
 
     public dispose(): void {
@@ -179,6 +180,11 @@ export class RoomStatusBarViewModel
         super.dispose();
     }
 
+    public onTermsAndConditionsClicked = (): void => {
+        this.hasClickedTermsAndConditions = true;
+        this.setSnapshot();
+    };
+
     public onDeleteAllClick = (): void => {
         Resend.cancelUnsentEvents(this.props.room);
         dis.fire(Action.FocusSendMessageComposer);