fix(core): handle invitation failure (#11195)

packages/frontend/component/src/components/member-components/join-failed-page.tsx

@@ -25,13 +25,14 @@ export const JoinFailedPage = ({
               i18nKey={'com.affine.fail-to-join-workspace.description-1'}
               components={{
                 1: (
+                  <div className={styles.avatarWrapper}>
                     <Avatar
                       url={`data:image/png;base64,${inviteInfo.workspace.avatar}`}
                       name={inviteInfo.workspace.name}
                       size={20}
-                    style={{ marginLeft: 4 }}
                       colorfulFallback
                     />
+                  </div>
                 ),
                 2: <span className={styles.inviteName} />,
               }}
@@ -42,7 +43,11 @@ export const JoinFailedPage = ({
             <div>{t['com.affine.fail-to-join-workspace.description-2']()}</div>
           </div>
         ) : (
-          <div>{t['error.' + userFriendlyError.name]()}</div>
+          <div>
+            {t['error.' + userFriendlyError.name]()}
+            <br />
+            {userFriendlyError.message}
+          </div>
         )
       }
     />

packages/frontend/core/src/components/notification/list.tsx

@@ -355,6 +355,7 @@ const InvitationNotificationItem = ({
           // ignore if the user is already in the workspace
           return true;
         }
+        notify.error(userFriendlyError);
         throw err;
       })
       .then(async value => {

packages/frontend/core/src/desktop/pages/invite/index.tsx

@@ -1,3 +1,4 @@
+import { notify } from '@affine/component';
 import {
   AcceptInvitePage,
   ExpiredPage,
@@ -34,6 +35,9 @@ const AcceptInvite = ({ inviteId: targetInviteId }: { inviteId: string }) => {
   const workspaces = useLiveData(workspacesService.list.workspaces$);
   const navigateHelper = useNavigateHelper();
   const [accepted, setAccepted] = useState(false);
+  const [acceptError, setAcceptError] = useState<UserFriendlyError | null>(
+    null
+  );
 
   const openWorkspace = useAsyncCallback(async () => {
     if (!inviteInfo?.workspace.id) {
@@ -70,6 +74,8 @@ const AcceptInvite = ({ inviteId: targetInviteId }: { inviteId: string }) => {
         if (err.is('ALREADY_IN_SPACE')) {
           return openWorkspace();
         }
+        setAcceptError(err);
+        notify.error(err);
       });
   }, [invitationService, openWorkspace, targetInviteId]);
 
@@ -85,8 +91,10 @@ const AcceptInvite = ({ inviteId: targetInviteId }: { inviteId: string }) => {
     return <ExpiredPage onOpenAffine={onOpenAffine} />;
   }
 
-  if (error) {
+  if (error || acceptError) {
-    return <JoinFailedPage inviteInfo={inviteInfo} error={error} />;
+    return (
+      <JoinFailedPage inviteInfo={inviteInfo} error={error || acceptError} />
+    );
   }
 
   // for email invite