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

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';

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>
+        )
+      }
+    />
+  );
+};