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/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}>

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

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

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`,