feat(core): optimize team workspace member management (#9737)

close AF-2106 AF-2077 AF-2089 feat(core): handle need more seat status feat(core): prevent invite members when team plan is canceled
2026-02-24 18:02:47 +08:00 · 2025-02-07 10:08:00 +00:00
parent 85d916f1eb
commit d5a626d9c3
18 changed files with 562 additions and 154 deletions
--- a/packages/frontend/component/src/components/auth-components/auth-page-container.tsx
+++ b/packages/frontend/component/src/components/auth-components/auth-page-container.tsx
@@ -22,7 +22,7 @@ export const AuthPageContainer: FC<
        <div className="wrapper">
          <div className="content">
            <p className="title">{title}</p>
-            <p className="subtitle">{subtitle}</p>
+            <div className="subtitle">{subtitle}</div>
            {children}
          </div>
          <div className={hideInSmallScreen}>
--- a/packages/frontend/component/src/components/member-components/index.tsx
+++ b/packages/frontend/component/src/components/member-components/index.tsx
@@ -1,4 +1,5 @@
 export * from './accept-invite-page';
 export * from './invite-modal';
 export * from './invite-team-modal';
+export * from './join-failed-page';
 export * from './member-limit-modal';
--- a/packages/frontend/component/src/components/member-components/join-failed-page.tsx
+++ b/packages/frontend/component/src/components/member-components/join-failed-page.tsx
@@ -0,0 +1,53 @@
+import { AuthPageContainer } from '@affine/component/auth-components';
+import {
+  ErrorNames,
+  type GetInviteInfoQuery,
+  UserFriendlyError,
+} from '@affine/graphql';
+import { Trans, useI18n } from '@affine/i18n';
+
+import { Avatar } from '../../ui/avatar';
+import * as styles from './styles.css';
+
+export const JoinFailedPage = ({
+  inviteInfo,
+  error,
+}: {
+  inviteInfo: GetInviteInfoQuery['getInviteInfo'];
+  error?: any;
+}) => {
+  const userFriendlyError = UserFriendlyError.fromAnyError(error);
+  const t = useI18n();
+  return (
+    <AuthPageContainer
+      title={t['com.affine.fail-to-join-workspace.title']()}
+      subtitle={
+        userFriendlyError.name === ErrorNames.MEMBER_QUOTA_EXCEEDED ? (
+          <div className={styles.content}>
+            <Trans
+              i18nKey={'com.affine.fail-to-join-workspace.description-1'}
+              components={{
+                1: (
+                  <Avatar
+                    url={`data:image/png;base64,${inviteInfo.workspace.avatar}`}
+                    name={inviteInfo.workspace.name}
+                    size={20}
+                    style={{ marginLeft: 4 }}
+                    colorfulFallback
+                  />
+                ),
+                2: <span className={styles.inviteName} />,
+              }}
+              values={{
+                workspaceName: inviteInfo.workspace.name,
+              }}
+            />
+            <div>{t['com.affine.fail-to-join-workspace.description-2']()}</div>
+          </div>
+        ) : (
+          <div>{t['error.' + userFriendlyError.name]()}</div>
+        )
+      }
+    />
+  );
+};
--- a/packages/frontend/component/src/components/not-found-page/not-found-page.tsx
+++ b/packages/frontend/component/src/components/not-found-page/not-found-page.tsx
@@ -11,6 +11,7 @@ import illustrationLight from '../affine-other-page-layout/assets/other-page.lig
 import type { User } from '../auth-components';
 import {
  illustration,
+  info,
  largeButtonEffect,
  notFoundPageContainer,
  wrapper,
@@ -35,6 +36,30 @@ export const NoPermissionOrNotFound = ({
      <div className={notFoundPageContainer} data-testid="not-found">
        {user ? (
          <>
+            <div className={info}>
+              <p className={wrapper}>{t['404.hint']()}</p>
+              <div className={wrapper}>
+                <Button
+                  variant="primary"
+                  size="extraLarge"
+                  onClick={onBack}
+                  className={largeButtonEffect}
+                >
+                  {t['404.back']()}
+                </Button>
+              </div>
+              <div className={wrapper}>
+                <Avatar url={user.avatar ?? user.image} name={user.label} />
+                <span style={{ margin: '0 12px' }}>{user.email}</span>
+                <IconButton
+                  onClick={onSignOut}
+                  size="20"
+                  tooltip={t['404.signOut']()}
+                >
+                  <SignOutIcon />
+                </IconButton>
+              </div>
+            </div>
            <div className={wrapper}>
              <ThemedImg
                draggable={false}
@@ -43,28 +68,6 @@ export const NoPermissionOrNotFound = ({
                darkSrc={illustrationDark}
              />
            </div>
-            <p className={wrapper}>{t['404.hint']()}</p>
-            <div className={wrapper}>
-              <Button
-                variant="primary"
-                size="extraLarge"
-                onClick={onBack}
-                className={largeButtonEffect}
-              >
-                {t['404.back']()}
-              </Button>
-            </div>
-            <div className={wrapper}>
-              <Avatar url={user.avatar ?? user.image} name={user.label} />
-              <span style={{ margin: '0 12px' }}>{user.email}</span>
-              <IconButton
-                onClick={onSignOut}
-                size="20"
-                tooltip={t['404.signOut']()}
-              >
-                <SignOutIcon />
-              </IconButton>
-            </div>
          </>
        ) : (
          signInComponent
@@ -84,6 +87,32 @@ export const NotFoundPage = ({
  return (
    <AffineOtherPageLayout>
      <div className={notFoundPageContainer} data-testid="not-found">
+        <div className={info}>
+          <p className={wrapper}>{t['404.hint']()}</p>
+          <div className={wrapper}>
+            <Button
+              variant="primary"
+              size="extraLarge"
+              onClick={onBack}
+              className={largeButtonEffect}
+            >
+              {t['404.back']()}
+            </Button>
+          </div>
+          {user ? (
+            <div className={wrapper}>
+              <Avatar url={user.avatar ?? user.image} name={user.label} />
+              <span style={{ margin: '0 12px' }}>{user.email}</span>
+              <IconButton
+                onClick={onSignOut}
+                size="20"
+                tooltip={t['404.signOut']()}
+              >
+                <SignOutIcon />
+              </IconButton>
+            </div>
+          ) : null}
+        </div>
        <div className={wrapper}>
          <ThemedImg
            draggable={false}
@@ -92,31 +121,6 @@ export const NotFoundPage = ({
            darkSrc={illustrationDark}
          />
        </div>
-        <p className={wrapper}>{t['404.hint']()}</p>
-        <div className={wrapper}>
-          <Button
-            variant="primary"
-            size="extraLarge"
-            onClick={onBack}
-            className={largeButtonEffect}
-          >
-            {t['404.back']()}
-          </Button>
-        </div>
-
-        {user ? (
-          <div className={wrapper}>
-            <Avatar url={user.avatar ?? user.image} name={user.label} />
-            <span style={{ margin: '0 12px' }}>{user.email}</span>
-            <IconButton
-              onClick={onSignOut}
-              size="20"
-              tooltip={t['404.signOut']()}
-            >
-              <SignOutIcon />
-            </IconButton>
-          </div>
-        ) : null}
      </div>
    </AffineOtherPageLayout>
  );
--- a/packages/frontend/component/src/components/not-found-page/styles.css.ts
+++ b/packages/frontend/component/src/components/not-found-page/styles.css.ts
@@ -3,11 +3,10 @@ import { style } from '@vanilla-extract/css';
 export const notFoundPageContainer = style({
  fontSize: cssVar('fontBase'),
  color: cssVar('textPrimaryColor'),
-  height: '100vh',
+  height: '100%',
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
-  justifyContent: 'center',
  width: '100%',
  padding: '0 20px',
 });
@@ -15,7 +14,18 @@ export const wrapper = style({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
-  margin: '24px auto 0',
+  margin: '0 auto',
+});
+export const info = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: '24px',
+  textAlign: 'center',
+  marginTop: 'auto',
+  paddingTop: '120px',
+  marginBottom: 'auto',
 });
 export const largeButtonEffect = style({
  boxShadow: `${cssVar('largeButtonEffect')} !important`,
--- a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/plans/actions.tsx
+++ b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/plans/actions.tsx
@@ -1,7 +1,9 @@
+import { notify } from '@affine/component';
 import { useDowngradeNotify } from '@affine/core/components/affine/subscription-landing/notify';
 import { getDowngradeQuestionnaireLink } from '@affine/core/components/hooks/affine/use-subscription-notify';
 import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
 import { SubscriptionPlan } from '@affine/graphql';
+import { useI18n } from '@affine/i18n';
 import { track } from '@affine/track';
 import { useLiveData, useService } from '@toeverything/infra';
 import { nanoid } from 'nanoid';
@@ -231,6 +233,7 @@ export const TeamResumeAction = ({
  const [idempotencyKey, setIdempotencyKey] = useState(nanoid());
  const [isMutating, setIsMutating] = useState(false);
  const subscription = useService(WorkspaceSubscriptionService).subscription;
+  const t = useI18n();

  const resume = useAsyncCallback(async () => {
    try {
@@ -243,10 +246,14 @@ export const TeamResumeAction = ({
      // refresh idempotency key
      setIdempotencyKey(nanoid());
      onOpenChange(false);
+      notify.success({
+        title: t['com.affine.payment.resume.success.title'](),
+        message: t['com.affine.payment.resume.success.team.message'](),
+      });
    } finally {
      setIsMutating(false);
    }
-  }, [subscription, idempotencyKey, onOpenChange]);
+  }, [subscription, idempotencyKey, onOpenChange, t]);

  return (
    <>
--- a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/cloud-members-panel.tsx
+++ b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/cloud-members-panel.tsx
@@ -1,4 +1,4 @@
-import { Button, Loading, notify } from '@affine/component';
+import { Button, Loading, notify, useConfirmModal } from '@affine/component';
 import {
  InviteTeamMemberModal,
  type InviteTeamMemberModalProps,
@@ -7,7 +7,11 @@ import {
 import { SettingRow } from '@affine/component/setting-components';
 import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
 import { Upload } from '@affine/core/components/pure/file-upload';
-import { ServerService, SubscriptionService } from '@affine/core/modules/cloud';
+import {
+  ServerService,
+  SubscriptionService,
+  WorkspaceSubscriptionService,
+} from '@affine/core/modules/cloud';
 import {
  WorkspaceMembersService,
  WorkspacePermissionService,
@@ -17,11 +21,12 @@ import { WorkspaceShareSettingService } from '@affine/core/modules/share-setting
 import { copyTextToClipboard } from '@affine/core/utils/clipboard';
 import { emailRegex } from '@affine/core/utils/email-regex';
 import type { WorkspaceInviteLinkExpireTime } from '@affine/graphql';
-import { UserFriendlyError } from '@affine/graphql';
+import { SubscriptionPlan, UserFriendlyError } from '@affine/graphql';
 import { useI18n } from '@affine/i18n';
 import { track } from '@affine/track';
 import { ExportIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
+import { nanoid } from 'nanoid';
 import { useCallback, useEffect, useMemo, useState } from 'react';

 import type { SettingState } from '../../types';
@@ -51,6 +56,8 @@ export const CloudWorkspaceMembersPanel = ({
  isTeam?: boolean;
 }) => {
  const workspaceShareSettingService = useService(WorkspaceShareSettingService);
+  const subscription = useService(WorkspaceSubscriptionService).subscription;
+  const workspaceSubscription = useLiveData(subscription.subscription$);
  const inviteLink = useLiveData(
    workspaceShareSettingService.sharePreview.inviteLink$
  );
@@ -89,9 +96,77 @@ export const CloudWorkspaceMembersPanel = ({
  const [openMemberLimit, setOpenMemberLimit] = useState(false);
  const [isMutating, setIsMutating] = useState(false);

+  const { openConfirmModal, closeConfirmModal } = useConfirmModal();
+  const goToTeamBilling = useCallback(() => {
+    onChangeSettingState({
+      activeTab: 'workspace:billing',
+    });
+  }, [onChangeSettingState]);
+  const [idempotencyKey, setIdempotencyKey] = useState(nanoid());
+  const resume = useAsyncCallback(async () => {
+    try {
+      setIsMutating(true);
+      await subscription.resumeSubscription(
+        idempotencyKey,
+        SubscriptionPlan.Team
+      );
+      await subscription.waitForRevalidation();
+      // refresh idempotency key
+      setIdempotencyKey(nanoid());
+      closeConfirmModal();
+      notify.success({
+        title: t['com.affine.payment.resume.success.title'](),
+        message: t['com.affine.payment.resume.success.team.message'](),
+      });
+    } catch (err) {
+      const error = UserFriendlyError.fromAnyError(err);
+      notify.error({
+        title: error.name,
+        message: error.message,
+      });
+    } finally {
+      setIsMutating(false);
+    }
+  }, [subscription, idempotencyKey, closeConfirmModal, t]);
  const openInviteModal = useCallback(() => {
+    if (isTeam && workspaceSubscription?.canceledAt) {
+      openConfirmModal({
+        title: t['com.affine.payment.member.team.retry-payment.title'](),
+        description:
+          t[
+            `com.affine.payment.member.team.disabled-subscription.${isOwner ? 'owner' : 'admin'}.description`
+          ](),
+        confirmText:
+          t[
+            isOwner
+              ? 'com.affine.payment.member.team.disabled-subscription.resume-subscription'
+              : 'Got it'
+          ](),
+        cancelText: t['Cancel'](),
+        cancelButtonOptions: {
+          style: {
+            visibility: isOwner ? 'visible' : 'hidden',
+          },
+        },
+        onConfirm: isOwner ? resume : undefined,
+        confirmButtonOptions: {
+          variant: 'primary',
+          loading: isMutating,
+        },
+      });
+
+      return;
+    }
    setOpenInvite(true);
-  }, []);
+  }, [
+    isMutating,
+    isOwner,
+    isTeam,
+    openConfirmModal,
+    resume,
+    t,
+    workspaceSubscription?.canceledAt,
+  ]);

  const onGenerateInviteLink = useCallback(
    async (expireTime: WorkspaceInviteLinkExpireTime) => {
@@ -253,7 +328,11 @@ export const CloudWorkspaceMembersPanel = ({
      </SettingRow>

      <div className={styles.membersPanel}>
-        <MemberList isOwner={!!isOwner} isAdmin={!!isAdmin} />
+        <MemberList
+          isOwner={!!isOwner}
+          isAdmin={!!isAdmin}
+          goToTeamBilling={goToTeamBilling}
+        />
      </div>
    </>
  );
--- a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/member-list.tsx
+++ b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/member-list.tsx
@@ -29,9 +29,11 @@ import * as styles from './styles.css';
 export const MemberList = ({
  isOwner,
  isAdmin,
+  goToTeamBilling,
 }: {
  isOwner: boolean;
  isAdmin: boolean;
+  goToTeamBilling: () => void;
 }) => {
  const membersService = useService(WorkspaceMembersService);
  const memberCount = useLiveData(membersService.members.memberCount$);
@@ -85,6 +87,7 @@ export const MemberList = ({
            member={member}
            isOwner={isOwner}
            isAdmin={isAdmin}
+            goToTeamBilling={goToTeamBilling}
          />
        ))
      )}
@@ -130,11 +133,13 @@ const MemberItem = ({
  isOwner,
  isAdmin,
  currentAccount,
+  goToTeamBilling,
 }: {
  member: Member;
  isAdmin: boolean;
  isOwner: boolean;
  currentAccount: AuthAccountInfo;
+  goToTeamBilling: () => void;
 }) => {
  const t = useI18n();
  const [open, setOpen] = useState(false);
@@ -208,7 +213,10 @@ const MemberItem = ({
      </div>
      <div
        className={clsx(styles.roleOrStatus, {
-          pending: member.status !== WorkspaceMemberStatus.Accepted,
+          pending:
+            member.status !== WorkspaceMemberStatus.Accepted &&
+            member.status !== WorkspaceMemberStatus.NeedMoreSeat,
+          error: member.status === WorkspaceMemberStatus.NeedMoreSeat,
        })}
      >
        {t.t(memberStatus)}
@@ -220,6 +228,7 @@ const MemberItem = ({
            openAssignModal={handleOpenAssignModal}
            isAdmin={isAdmin}
            isOwner={isOwner}
+            goToTeamBilling={goToTeamBilling}
          />
        }
      >
@@ -249,9 +258,10 @@ const MemberItem = ({
 const getMemberStatus = (member: Member): I18nString => {
  switch (member.status) {
    case WorkspaceMemberStatus.NeedMoreSeat:
-    case WorkspaceMemberStatus.NeedMoreSeatAndReview:
+      return 'insufficient-team-seat';
    case WorkspaceMemberStatus.Pending:
      return 'Pending';
+    case WorkspaceMemberStatus.NeedMoreSeatAndReview:
    case WorkspaceMemberStatus.UnderReview:
      return 'Under-Review';
    case WorkspaceMemberStatus.Accepted:
--- a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/member-option.tsx
+++ b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/member-option.tsx
@@ -14,11 +14,13 @@ export const MemberOptions = ({
  isOwner,
  isAdmin,
  openAssignModal,
+  goToTeamBilling,
 }: {
  member: Member;
  isOwner: boolean;
  isAdmin: boolean;
  openAssignModal: () => void;
+  goToTeamBilling: () => void;
 }) => {
  const t = useI18n();
  const membersService = useService(WorkspaceMembersService);
@@ -163,13 +165,49 @@ export const MemberOptions = ({
      });
  }, [member, membersService, t]);

+  const handleRetryPayment = useCallback(() => {
+    openConfirmModal({
+      title: t['com.affine.payment.member.team.retry-payment.title'](),
+      description:
+        t[
+          `com.affine.payment.member.team.retry-payment.${isOwner ? 'owner' : 'admin'}.description`
+        ](),
+      confirmText:
+        t[
+          isOwner
+            ? 'com.affine.payment.member.team.retry-payment.update-payment'
+            : 'Got it'
+        ](),
+      confirmButtonOptions: {
+        variant: 'primary',
+      },
+      onConfirm: isOwner ? goToTeamBilling : undefined,
+      cancelText: t['Cancel'](),
+      cancelButtonOptions: {
+        style: {
+          visibility: isOwner ? 'visible' : 'hidden',
+        },
+      },
+    });
+  }, [goToTeamBilling, isOwner, openConfirmModal, t]);
+
  const operationButtonInfo = useMemo(() => {
    return [
+      {
+        label: t['com.affine.payment.member.team.retry-payment'](),
+        onClick: handleRetryPayment,
+        show: member.status === WorkspaceMemberStatus.NeedMoreSeat,
+      },
      {
        label: t['com.affine.payment.member.team.approve'](),
        onClick: handleApprove,
        show: member.status === WorkspaceMemberStatus.UnderReview,
      },
+      {
+        label: t['com.affine.payment.member.team.approve'](),
+        onClick: handleRetryPayment,
+        show: member.status === WorkspaceMemberStatus.NeedMoreSeatAndReview,
+      },
      {
        label: t['com.affine.payment.member.team.decline'](),
        onClick: handleDecline,
@@ -230,11 +268,13 @@ export const MemberOptions = ({
    handleChangeToCollaborator,
    handleDecline,
    handleRemove,
+    handleRetryPayment,
    handleRevoke,
    isAdmin,
    isOwner,
    isTeam,
-    member,
+    member.permission,
+    member.status,
    t,
  ]);

--- a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/styles.css.ts
+++ b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/styles.css.ts
@@ -97,6 +97,9 @@ export const roleOrStatus = style({
    '&.pending': {
      color: cssVarV2('text/emphasis'),
    },
+    '&.error': {
+      color: cssVarV2('status/error'),
+    },
  },
 });

--- a/packages/frontend/core/src/desktop/pages/invite/index.tsx
+++ b/packages/frontend/core/src/desktop/pages/invite/index.tsx
@@ -1,43 +1,80 @@
-import { AcceptInvitePage } from '@affine/component/member-components';
-import type { GetInviteInfoQuery } from '@affine/graphql';
 import {
-  acceptInviteByInviteIdMutation,
-  ErrorNames,
-  getInviteInfoQuery,
-  UserFriendlyError,
-} from '@affine/graphql';
+  AcceptInvitePage,
+  JoinFailedPage,
+} from '@affine/component/member-components';
+import { ErrorNames, UserFriendlyError } from '@affine/graphql';
 import { useLiveData, useService } from '@toeverything/infra';
-import { useCallback, useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useCallback, useEffect } from 'react';
+import { Navigate, useParams } from 'react-router-dom';

 import {
  RouteLogic,
  useNavigateHelper,
 } from '../../../components/hooks/use-navigate-helper';
-import { AuthService, GraphQLService } from '../../../modules/cloud';
-import { AppContainer } from '../../components/app-container';
+import { AcceptInviteService, AuthService } from '../../../modules/cloud';
+
+const AcceptInvite = ({ inviteId }: { inviteId: string }) => {
+  const { jumpToPage } = useNavigateHelper();
+  const acceptInviteService = useService(AcceptInviteService);
+  const error = useLiveData(acceptInviteService.error$);
+  const inviteInfo = useLiveData(acceptInviteService.inviteInfo$);
+  const accepted = useLiveData(acceptInviteService.accepted$);
+  const loading = useLiveData(acceptInviteService.loading$);
+  const navigateHelper = useNavigateHelper();
+
+  const openWorkspace = useCallback(() => {
+    if (!inviteInfo?.workspace.id) {
+      return;
+    }
+    jumpToPage(inviteInfo.workspace.id, 'all', RouteLogic.REPLACE);
+  }, [jumpToPage, inviteInfo]);
+
+  useEffect(() => {
+    acceptInviteService.revalidate({
+      inviteId,
+    });
+  }, [acceptInviteService, inviteId]);
+
+  useEffect(() => {
+    if (error) {
+      const err = UserFriendlyError.fromAnyError(error);
+      if (err.name === ErrorNames.ALREADY_IN_SPACE) {
+        return navigateHelper.jumpToIndex();
+      }
+    }
+  }, [error, navigateHelper]);
+
+  if (loading) {
+    return null;
+  }
+
+  if (!inviteInfo) {
+    // if invite is expired
+    return <Navigate to="/expired" />;
+  }
+
+  if (error) {
+    return <JoinFailedPage inviteInfo={inviteInfo} error={error} />;
+  }
+
+  if (accepted) {
+    return (
+      <AcceptInvitePage
+        inviteInfo={inviteInfo}
+        onOpenWorkspace={openWorkspace}
+      />
+    );
+  } else {
+    // invite is expired
+    return <Navigate to="/expired" />;
+  }
+};

 /**
 * /invite/:inviteId page
 *
 * only for web
 */
-const AcceptInvite = ({
-  inviteInfo,
-}: {
-  inviteInfo: GetInviteInfoQuery['getInviteInfo'];
-}) => {
-  const { jumpToPage } = useNavigateHelper();
-
-  const openWorkspace = useCallback(() => {
-    jumpToPage(inviteInfo.workspace.id, 'all', RouteLogic.REPLACE);
-  }, [inviteInfo.workspace.id, jumpToPage]);
-
-  return (
-    <AcceptInvitePage inviteInfo={inviteInfo} onOpenWorkspace={openWorkspace} />
-  );
-};
-
 export const Component = () => {
  const authService = useService(AuthService);
  const isRevalidating = useLiveData(authService.session.isRevalidating$);
@@ -57,73 +94,13 @@ export const Component = () => {
    }
  }, [isRevalidating, jumpToSignIn, loginStatus, params.inviteId]);

+  if (!params.inviteId) {
+    return <Navigate to="/expired" />;
+  }
+
  if (loginStatus === 'authenticated') {
-    return <Middle />;
+    return <AcceptInvite inviteId={params.inviteId} />;
  }

  return null;
 };
-
-export const Middle = () => {
-  const graphqlService = useService(GraphQLService);
-  const params = useParams<{ inviteId: string }>();
-  const navigateHelper = useNavigateHelper();
-
-  const [data, setData] = useState<{
-    inviteId: string;
-    inviteInfo: GetInviteInfoQuery['getInviteInfo'];
-  } | null>(null);
-
-  useEffect(() => {
-    (async () => {
-      setData(null);
-      const inviteId = params.inviteId || '';
-      const res = await graphqlService.gql({
-        query: getInviteInfoQuery,
-        variables: {
-          inviteId,
-        },
-      });
-
-      // If the inviteId is invalid, redirect to 404 page
-      if (!res || !res?.getInviteInfo) {
-        return navigateHelper.jumpTo404();
-      }
-
-      // No mater sign in or not, we need to accept the invite
-      await graphqlService.gql({
-        query: acceptInviteByInviteIdMutation,
-        variables: {
-          workspaceId: res.getInviteInfo.workspace.id,
-          inviteId,
-          sendAcceptMail: true,
-        },
-      });
-
-      setData({
-        inviteId,
-        inviteInfo: res.getInviteInfo,
-      });
-      return;
-    })().catch(error => {
-      const userFriendlyError = UserFriendlyError.fromAnyError(error);
-      console.error(userFriendlyError);
-      if (userFriendlyError.name === ErrorNames.ALREADY_IN_SPACE) {
-        return navigateHelper.jumpToIndex();
-      }
-      if (
-        userFriendlyError.name === ErrorNames.USER_NOT_FOUND ||
-        userFriendlyError.name === ErrorNames.SPACE_OWNER_NOT_FOUND
-      ) {
-        return navigateHelper.jumpToExpired();
-      }
-      return navigateHelper.jumpTo404();
-    });
-  }, [graphqlService, navigateHelper, params.inviteId]);
-
-  if (!data) {
-    return <AppContainer fallback />;
-  }
-
-  return <AcceptInvite inviteInfo={data.inviteInfo} />;
-};
--- a/packages/frontend/core/src/modules/cloud/index.ts
+++ b/packages/frontend/core/src/modules/cloud/index.ts
@@ -12,6 +12,7 @@ export { AccountLoggedIn } from './events/account-logged-in';
 export { AccountLoggedOut } from './events/account-logged-out';
 export { ServerInitialized } from './events/server-initialized';
 export { ValidatorProvider } from './provider/validator';
+export { AcceptInviteService } from './services/accept-invite';
 export { AuthService } from './services/auth';
 export { CaptchaService } from './services/captcha';
 export { DefaultServerService } from './services/default-server';
@@ -52,6 +53,7 @@ import { WorkspaceInvoices } from './entities/workspace-invoices';
 import { WorkspaceSubscription } from './entities/workspace-subscription';
 import { ValidatorProvider } from './provider/validator';
 import { ServerScope } from './scopes/server';
+import { AcceptInviteService } from './services/accept-invite';
 import { AuthService } from './services/auth';
 import { CaptchaService } from './services/captcha';
 import { CloudDocMetaService } from './services/cloud-doc-meta';
@@ -71,8 +73,10 @@ import { UserQuotaService } from './services/user-quota';
 import { WorkspaceInvoicesService } from './services/workspace-invoices';
 import { WorkspaceServerService } from './services/workspace-server';
 import { WorkspaceSubscriptionService } from './services/workspace-subscription';
+import { AcceptInviteStore } from './stores/accept-invite';
 import { AuthStore } from './stores/auth';
 import { CloudDocMetaStore } from './stores/cloud-doc-meta';
+import { InviteInfoStore } from './stores/invite-info';
 import { InvoicesStore } from './stores/invoices';
 import { SelfhostGenerateLicenseStore } from './stores/selfhost-generate-license';
 import { SelfhostLicenseStore } from './stores/selfhost-license';
@@ -136,7 +140,10 @@ export function configureCloudModule(framework: Framework) {
    .store(InvoicesStore, [GraphQLService])
    .entity(Invoices, [InvoicesStore])
    .service(SelfhostGenerateLicenseService, [SelfhostGenerateLicenseStore])
-    .store(SelfhostGenerateLicenseStore, [GraphQLService]);
+    .store(SelfhostGenerateLicenseStore, [GraphQLService])
+    .store(InviteInfoStore, [GraphQLService])
+    .service(AcceptInviteService, [AcceptInviteStore, InviteInfoStore])
+    .store(AcceptInviteStore, [GraphQLService]);

  framework
    .scope(WorkspaceScope)
--- a/packages/frontend/core/src/modules/cloud/services/accept-invite.ts
+++ b/packages/frontend/core/src/modules/cloud/services/accept-invite.ts
@@ -0,0 +1,78 @@
+import type { GetInviteInfoQuery } from '@affine/graphql';
+import {
+  backoffRetry,
+  catchErrorInto,
+  effect,
+  fromPromise,
+  LiveData,
+  onComplete,
+  onStart,
+  Service,
+} from '@toeverything/infra';
+import { EMPTY, exhaustMap, mergeMap } from 'rxjs';
+
+import { isBackendError, isNetworkError } from '../error';
+import type { AcceptInviteStore } from '../stores/accept-invite';
+import type { InviteInfoStore } from '../stores/invite-info';
+
+export type InviteInfo = GetInviteInfoQuery['getInviteInfo'];
+
+export class AcceptInviteService extends Service {
+  constructor(
+    private readonly store: AcceptInviteStore,
+    private readonly inviteInfoStore: InviteInfoStore
+  ) {
+    super();
+  }
+  inviteInfo$ = new LiveData<InviteInfo | undefined>(undefined);
+  accepted$ = new LiveData<boolean>(false);
+  loading$ = new LiveData(false);
+  error$ = new LiveData<any>(null);
+
+  readonly revalidate = effect(
+    exhaustMap(({ inviteId }: { inviteId: string }) => {
+      if (!inviteId) {
+        return EMPTY;
+      }
+      return fromPromise(async () => {
+        return await this.inviteInfoStore.getInviteInfo(inviteId);
+      }).pipe(
+        mergeMap(res => {
+          this.inviteInfo$.setValue(res);
+          return fromPromise(async () => {
+            return await this.store.acceptInvite(
+              res.workspace.id,
+              inviteId,
+              true
+            );
+          });
+        }),
+        mergeMap(res => {
+          this.accepted$.next(res);
+          return EMPTY;
+        }),
+        backoffRetry({
+          when: isNetworkError,
+          count: Infinity,
+        }),
+        backoffRetry({
+          when: isBackendError,
+          count: 3,
+        }),
+        catchErrorInto(this.error$),
+        onStart(() => {
+          this.loading$.setValue(true);
+          this.inviteInfo$.setValue(undefined);
+          this.accepted$.setValue(false);
+        }),
+        onComplete(() => {
+          this.loading$.setValue(false);
+        })
+      );
+    })
+  );
+
+  override dispose(): void {
+    this.revalidate.unsubscribe();
+  }
+}
--- a/packages/frontend/core/src/modules/cloud/stores/accept-invite.ts
+++ b/packages/frontend/core/src/modules/cloud/stores/accept-invite.ts
@@ -0,0 +1,30 @@
+import { acceptInviteByInviteIdMutation } from '@affine/graphql';
+import { Store } from '@toeverything/infra';
+
+import type { GraphQLService } from '../services/graphql';
+
+export class AcceptInviteStore extends Store {
+  constructor(private readonly gqlService: GraphQLService) {
+    super();
+  }
+
+  async acceptInvite(
+    workspaceId: string,
+    inviteId: string,
+    sendAcceptMail?: boolean,
+    signal?: AbortSignal
+  ) {
+    const data = await this.gqlService.gql({
+      query: acceptInviteByInviteIdMutation,
+
+      variables: {
+        workspaceId,
+        inviteId,
+        sendAcceptMail,
+      },
+      context: { signal },
+    });
+
+    return data.acceptInviteById;
+  }
+}
--- a/packages/frontend/core/src/modules/cloud/stores/invite-info.ts
+++ b/packages/frontend/core/src/modules/cloud/stores/invite-info.ts
@@ -0,0 +1,25 @@
+import { getInviteInfoQuery } from '@affine/graphql';
+import { Store } from '@toeverything/infra';
+
+import type { GraphQLService } from '../services/graphql';
+
+export class InviteInfoStore extends Store {
+  constructor(private readonly gqlService: GraphQLService) {
+    super();
+  }
+
+  async getInviteInfo(inviteId?: string, signal?: AbortSignal) {
+    if (!inviteId) {
+      throw new Error('No inviteId');
+    }
+    const data = await this.gqlService.gql({
+      query: getInviteInfoQuery,
+      variables: {
+        inviteId,
+      },
+      context: { signal },
+    });
+
+    return data.getInviteInfo;
+  }
+}
--- a/packages/frontend/i18n/src/i18n-completenesses.json
+++ b/packages/frontend/i18n/src/i18n-completenesses.json
@@ -6,7 +6,7 @@
  "el-GR": 90,
  "en": 100,
  "es-AR": 90,
-  "es-CL": 92,
+  "es-CL": 91,
  "es": 90,
  "fa": 90,
  "fr": 90,
--- a/packages/frontend/i18n/src/i18n.gen.ts
+++ b/packages/frontend/i18n/src/i18n.gen.ts
@@ -289,6 +289,10 @@ export function useAFFiNEI18N(): {
      * `Invited members will collaborate with you in current workspace`
      */
    ["Invite Members Message"](): string;
+    /**
+      * `Insufficient team seat`
+      */
+    ["insufficient-team-seat"](): string;
    /**
      * `Joined workspace`
      */
@@ -3881,6 +3885,10 @@ export function useAFFiNEI18N(): {
      * `Remove member`
      */
    ["com.affine.payment.member.team.remove"](): string;
+    /**
+      * `Retry payment`
+      */
+    ["com.affine.payment.member.team.retry-payment"](): string;
    /**
      * `Change role to admin`
      */
@@ -3893,6 +3901,34 @@ export function useAFFiNEI18N(): {
      * `Assign as owner`
      */
    ["com.affine.payment.member.team.assign"](): string;
+    /**
+      * `Insufficient Team Seats`
+      */
+    ["com.affine.payment.member.team.retry-payment.title"](): string;
+    /**
+      * `The payment for adding new team members has failed. To add more seats, please update your payment method and process unpaid invoices.`
+      */
+    ["com.affine.payment.member.team.retry-payment.owner.description"](): string;
+    /**
+      * `The payment for adding new team members has failed. Please contact your workspace owner to update the payment method and process unpaid invoices.`
+      */
+    ["com.affine.payment.member.team.retry-payment.admin.description"](): string;
+    /**
+      * `Update Payment`
+      */
+    ["com.affine.payment.member.team.retry-payment.update-payment"](): string;
+    /**
+      * `Subscription has been disabled for your team workspace. To add more seats, you'll need to resume subscription first.`
+      */
+    ["com.affine.payment.member.team.disabled-subscription.owner.description"](): string;
+    /**
+      * `Your team workspace has subscription disabled, which prevents adding more seats. Please contact your workspace owner to enable subscription.`
+      */
+    ["com.affine.payment.member.team.disabled-subscription.admin.description"](): string;
+    /**
+      * `Resume Subscription`
+      */
+    ["com.affine.payment.member.team.disabled-subscription.resume-subscription"](): string;
    /**
      * `Invitation Revoked`
      */
@@ -4081,6 +4117,14 @@ export function useAFFiNEI18N(): {
      * `Resume`
      */
    ["com.affine.payment.resume"](): string;
+    /**
+      * `Subscription Resumed`
+      */
+    ["com.affine.payment.resume.success.title"](): string;
+    /**
+      * `Your team workspace subscription has been enabled successfully. Changes will take effect immediately.`
+      */
+    ["com.affine.payment.resume.success.team.message"](): string;
    /**
      * `Resume auto-renewal`
      */
@@ -4241,6 +4285,10 @@ export function useAFFiNEI18N(): {
      * `Open in center peek`
      */
    ["com.affine.peek-view-controls.open-doc-in-center-peek"](): string;
+    /**
+      * `Click or drag`
+      */
+    ["com.affine.split-view-drag-handle.tooltip"](): string;
    /**
      * `New`
      */
@@ -6820,6 +6868,14 @@ export function useAFFiNEI18N(): {
      * `Are you sure you want to delete these blob files? This action cannot be undone. Make sure you no longer need them before proceeding.`
      */
    ["com.affine.settings.workspace.storage.unused-blobs.delete.warning"](): string;
+    /**
+      * `Join Failed`
+      */
+    ["com.affine.fail-to-join-workspace.title"](): string;
+    /**
+      * `Please contact your workspace owner to add more seats.`
+      */
+    ["com.affine.fail-to-join-workspace.description-2"](): string;
    /**
      * `An internal error occurred.`
      */
@@ -7072,6 +7128,10 @@ export function useAFFiNEI18N(): {
      * `A Team workspace is required to perform this action.`
      */
    ["error.ACTION_FORBIDDEN_ON_NON_TEAM_WORKSPACE"](): string;
+    /**
+      * `Page default role can not be owner.`
+      */
+    ["error.PAGE_DEFAULT_ROLE_CAN_NOT_BE_OWNER"](): string;
    /**
      * `Unsupported subscription plan: {{plan}}.`
      */
@@ -7690,4 +7750,13 @@ export const TypedTrans: {
    }, {
        ["1"]: JSX.Element;
    }>>;
+    /**
+      * `Unable to join <1/> <2>{{workspaceName}}</2> due to insufficient seats available.`
+      */
+    ["com.affine.fail-to-join-workspace.description-1"]: ComponentType<TypedTransProps<{
+        readonly workspaceName: string;
+    }, {
+        ["1"]: JSX.Element;
+        ["2"]: JSX.Element;
+    }>>;
 } = /*#__PURE__*/ createProxy(createComponent);
--- a/packages/frontend/i18n/src/resources/en.json
+++ b/packages/frontend/i18n/src/resources/en.json
@@ -63,6 +63,7 @@
  "Invite": "Invite",
  "Invite Members": "Invite members",
  "Invite Members Message": "Invited members will collaborate with you in current workspace",
+  "insufficient-team-seat": "Insufficient team seat",
  "Joined Workspace": "Joined workspace",
  "Leave": "Leave",
  "Link": "Hyperlink (with selected text)",
@@ -965,9 +966,17 @@
  "com.affine.payment.member.team.approve": "Approve",
  "com.affine.payment.member.team.decline": "Decline",
  "com.affine.payment.member.team.remove": "Remove member",
+  "com.affine.payment.member.team.retry-payment": "Retry payment",
  "com.affine.payment.member.team.change.admin": "Change role to admin",
  "com.affine.payment.member.team.change.collaborator": "Change role to collaborator",
  "com.affine.payment.member.team.assign": "Assign as owner",
+  "com.affine.payment.member.team.retry-payment.title": "Insufficient Team Seats",
+  "com.affine.payment.member.team.retry-payment.owner.description": "The payment for adding new team members has failed. To add more seats, please update your payment method and process unpaid invoices.",
+  "com.affine.payment.member.team.retry-payment.admin.description": "The payment for adding new team members has failed. Please contact your workspace owner to update the payment method and process unpaid invoices.",
+  "com.affine.payment.member.team.retry-payment.update-payment": "Update Payment",
+  "com.affine.payment.member.team.disabled-subscription.owner.description": "Subscription has been disabled for your team workspace. To add more seats, you'll need to resume subscription first.",
+  "com.affine.payment.member.team.disabled-subscription.admin.description": "Your team workspace has subscription disabled, which prevents adding more seats. Please contact your workspace owner to enable subscription.",
+  "com.affine.payment.member.team.disabled-subscription.resume-subscription": "Resume Subscription",
  "com.affine.payment.member.team.revoke.notify.title": "Invitation Revoked",
  "com.affine.payment.member.team.revoke.notify.message": "You have canceled the invitation for {{name}}",
  "com.affine.payment.member.team.approve.notify.title": "Request approved",
@@ -1011,6 +1020,8 @@
  "com.affine.payment.recurring-monthly": "monthly",
  "com.affine.payment.recurring-yearly": "annually",
  "com.affine.payment.resume": "Resume",
+  "com.affine.payment.resume.success.title": "Subscription Resumed",
+  "com.affine.payment.resume.success.team.message": "Your team workspace subscription has been enabled successfully. Changes will take effect immediately.",
  "com.affine.payment.resume-renewal": "Resume auto-renewal",
  "com.affine.payment.see-all-plans": "See all plans",
  "com.affine.payment.sign-up-free": "Sign up free",
@@ -1701,6 +1712,9 @@
  "com.affine.settings.workspace.storage.unused-blobs.selected": "Selected",
  "com.affine.settings.workspace.storage.unused-blobs.delete.title": "Delete blob files",
  "com.affine.settings.workspace.storage.unused-blobs.delete.warning": "Are you sure you want to delete these blob files? This action cannot be undone. Make sure you no longer need them before proceeding.",
+  "com.affine.fail-to-join-workspace.title": "Join Failed",
+  "com.affine.fail-to-join-workspace.description-1": "Unable to join <1/> <2>{{workspaceName}}</2> due to insufficient seats available.",
+  "com.affine.fail-to-join-workspace.description-2": "Please contact your workspace owner to add more seats.",
  "error.INTERNAL_SERVER_ERROR": "An internal error occurred.",
  "error.TOO_MANY_REQUEST": "Too many requests.",
  "error.NOT_FOUND": "Resource not found.",
@@ -1751,6 +1765,7 @@
  "error.FAILED_TO_SAVE_UPDATES": "Failed to store doc updates.",
  "error.FAILED_TO_UPSERT_SNAPSHOT": "Failed to store doc snapshot.",
  "error.ACTION_FORBIDDEN_ON_NON_TEAM_WORKSPACE": "A Team workspace is required to perform this action.",
+  "error.PAGE_DEFAULT_ROLE_CAN_NOT_BE_OWNER": "Page default role can not be owner.",
  "error.UNSUPPORTED_SUBSCRIPTION_PLAN": "Unsupported subscription plan: {{plan}}.",
  "error.FAILED_TO_CHECKOUT": "Failed to create checkout session.",
  "error.INVALID_CHECKOUT_PARAMETERS": "Invalid checkout parameters provided.",