Show "invited to organization" dialog on top of content instead of replacing content

app/dashboard/src/appUtils.tsx

@@ -37,6 +37,10 @@ export const ALL_PATHS_REGEX = new RegExp(
 // === Constants related to URLs ===
 
 export const SEARCH_PARAMS_PREFIX = 'cloud-ide_'
+/** Return the email address for contacting support. */
+export const SUPPORT_EMAIL = 'cloud@enso.org'
+/** Return the `mailto:` URL for contacting support. */
+export const SUPPORT_EMAIL_URL = `mailto:${SUPPORT_EMAIL}`
 
 /**
  * Build a Subscription URL for a given plan.

app/dashboard/src/modals/InvitedToOrganizationModal.tsx

@@ -1,6 +1,7 @@
 /** @file Modal for accepting or rejecting an invite to an organization. */
 import * as router from 'react-router'
 
+import { SUPPORT_EMAIL, SUPPORT_EMAIL_URL } from '#/appUtils'
 import { Button, ButtonGroup, Dialog, Text } from '#/components/AriaComponents'
 import { backendMutationOptions } from '#/hooks/backendHooks'
 import { useAuth, useFullUserSession } from '#/providers/AuthProvider'
@@ -30,55 +31,77 @@ export function InvitedToOrganizationModal() {
   if (!shouldDisplay) {
     return <router.Outlet context={session} />
   } else {
-    const status = user.newOrganizationInvite
-    const statusMessage = (() => {
-      switch (status) {
-        case 'pending': {
-          return getText('organizationInviteOpenMessage')
-        }
-        case 'error': {
-          return getText('organizationInviteErrorMessage')
-        }
+    switch (user.newOrganizationInvite) {
+      case 'pending': {
+        return (
+          <>
+            <router.Outlet context={session} />
+            <Dialog
+              title={getText('organizationInviteTitle')}
+              isKeyboardDismissDisabled
+              isDismissable={false}
+              hideCloseButton
+              modalProps={{ defaultOpen: true }}
+            >
+              {({ close }) => (
+                <div className="flex flex-col items-center gap-4">
+                  <div className="text-center">
+                    <Text>{getText('organizationInviteMessage')}</Text>
+                    <Text className="text-sm font-bold">{user.newOrganizationName}</Text>
+                    <Text>{getText('organizationInviteOpenMessage')}</Text>
+                  </div>
+                  <ButtonGroup className="w-min">
+                    <Button
+                      variant="tertiary"
+                      onPress={async () => {
+                        await acceptInvitation([])
+                        close()
+                      }}
+                    >
+                      {getText('accept')}
+                    </Button>
+                    <Button
+                      variant="outline"
+                      onPress={async () => {
+                        await declineInvitation([user.email])
+                        close()
+                      }}
+                    >
+                      {getText('decline')}
+                    </Button>
+                  </ButtonGroup>
+                </div>
+              )}
+            </Dialog>
+          </>
+        )
       }
-    })()
-    return (
-      <Dialog
-        title={getText('organizationInviteTitle')}
-        isKeyboardDismissDisabled
-        isDismissable={false}
-        hideCloseButton
-        modalProps={{ defaultOpen: true }}
-      >
-        {({ close }) => (
-          <div className="flex flex-col items-center gap-4">
-            <div className="text-center">
-              <Text>{getText('organizationInviteMessage')}</Text>
-              <Text className="text-sm font-bold">{user.newOrganizationName}</Text>
-              <Text>{statusMessage}</Text>
-            </div>
-            <ButtonGroup className="w-min">
-              <Button
-                variant="tertiary"
-                onPress={async () => {
-                  await acceptInvitation([])
-                  close()
-                }}
-              >
-                {getText('accept')}
-              </Button>
-              <Button
-                variant="outline"
-                onPress={async () => {
-                  await declineInvitation([user.email])
-                  close()
-                }}
-              >
-                {getText('decline')}
-              </Button>
-            </ButtonGroup>
-          </div>
-        )}
-      </Dialog>
-    )
+      case 'error': {
+        return (
+          <>
+            <router.Outlet context={session} />
+            <Dialog
+              title={getText('organizationInviteTitle')}
+              // For now, allow dismissing the modal as the user account is still usable.
+              hideCloseButton
+              modalProps={{ defaultOpen: true }}
+            >
+              <div className="text-center">
+                <Text>{getText('organizationInviteMessage')}</Text>
+                <Text className="text-sm font-bold">{user.newOrganizationName}</Text>
+                <Text className="text-danger">
+                  {getText('organizationInviteErrorMessage')}{' '}
+                  {
+                    <Button variant="link" href={SUPPORT_EMAIL_URL}>
+                      {SUPPORT_EMAIL}
+                    </Button>
+                  }
+                </Text>
+              </div>
+            </Dialog>
+          </>
+        )
+      }
+    }
   }
 }

app/ide-desktop/common/src/text/english.json

@@ -426,7 +426,7 @@
   "organizationInviteTitle": "You are being invited!",
   "organizationInviteMessage": "An organization is inviting you:",
   "organizationInviteOpenMessage": "Would you like to accept? All your assets will be moved with you to your personal space.",
-  "organizationInviteErrorMessage": "Something went wrong. Please contact the administrators: cloud@enso.org",
+  "organizationInviteErrorMessage": "Something went wrong. Please contact the administrators at",
 
   "deleteLabelActionText": "delete the label '$0'",
   "deleteSelectedAssetActionText": "delete '$0'",