diff --git a/packages/frontend/core/src/components/affine/new-workspace-setting-detail/members.tsx b/packages/frontend/core/src/components/affine/new-workspace-setting-detail/members.tsx
index 38c425c9c4..66eef647c6 100644
--- a/packages/frontend/core/src/components/affine/new-workspace-setting-detail/members.tsx
+++ b/packages/frontend/core/src/components/affine/new-workspace-setting-detail/members.tsx
@@ -10,9 +10,9 @@ import { pushNotificationAtom } from '@affine/component/notification-center';
import { SettingRow } from '@affine/component/setting-components';
import type { AffineOfficialWorkspace } from '@affine/env/workspace';
import { WorkspaceFlavour } from '@affine/env/workspace';
-import { Permission } from '@affine/graphql';
+import { Permission, SubscriptionPlan } from '@affine/graphql';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { MoreVerticalIcon } from '@blocksuite/icons';
+import { ArrowRightBigIcon, MoreVerticalIcon } from '@blocksuite/icons';
import { Avatar } from '@toeverything/components/avatar';
import { Button, IconButton } from '@toeverything/components/button';
import { Loading } from '@toeverything/components/loading';
@@ -31,16 +31,24 @@ import {
} from 'react';
import { ErrorBoundary } from 'react-error-boundary';
+import { openSettingModalAtom } from '../../../atoms';
import type { CheckedUser } from '../../../hooks/affine/use-current-user';
import { useCurrentUser } from '../../../hooks/affine/use-current-user';
import { useInviteMember } from '../../../hooks/affine/use-invite-member';
import { useMemberCount } from '../../../hooks/affine/use-member-count';
import { type Member, useMembers } from '../../../hooks/affine/use-members';
import { useRevokeMemberPermission } from '../../../hooks/affine/use-revoke-member-permission';
+import { useUserSubscription } from '../../../hooks/use-subscription';
import { AnyErrorBoundary } from '../any-error-boundary';
import * as style from './style.css';
import type { WorkspaceSettingDetailProps } from './types';
+enum MemberLimitCount {
+ Free = '3',
+ Pro = '10',
+ Other = '?',
+}
+
const COUNT_PER_PAGE = 8;
export interface MembersPanelProps extends WorkspaceSettingDetailProps {
workspace: AffineOfficialWorkspace;
@@ -130,11 +138,47 @@ export const CloudWorkspaceMembersPanel = ({
[pushNotification, revokeMemberPermission, t]
);
+ const setSettingModalAtom = useSetAtom(openSettingModalAtom);
+ const handleUpgrade = useCallback(() => {
+ setSettingModalAtom({
+ open: true,
+ activeTab: 'plans',
+ workspaceId: null,
+ });
+ }, [setSettingModalAtom]);
+
+ const [subscription] = useUserSubscription();
+ const plan = subscription?.plan ?? SubscriptionPlan.Free;
+ const memberLimit = useMemo(() => {
+ if (plan === SubscriptionPlan.Free) {
+ return MemberLimitCount.Free;
+ }
+ if (plan === SubscriptionPlan.Pro) {
+ return MemberLimitCount.Pro;
+ }
+ return MemberLimitCount.Other;
+ }, [plan]);
+ const desc = useMemo(() => {
+ return (
+
+ {t['com.affine.payment.member.description']({
+ planName: plan,
+ memberLimit,
+ })}
+ ,
+
+
+ );
+ }, [handleUpgrade, memberLimit, plan, t]);
+
return (
<>
{isOwner ? (
diff --git a/packages/frontend/core/src/components/affine/new-workspace-setting-detail/style.css.ts b/packages/frontend/core/src/components/affine/new-workspace-setting-detail/style.css.ts
index 988c1d32e8..a716ec60c5 100644
--- a/packages/frontend/core/src/components/affine/new-workspace-setting-detail/style.css.ts
+++ b/packages/frontend/core/src/components/affine/new-workspace-setting-detail/style.css.ts
@@ -182,3 +182,22 @@ export const workspaceLabel = style({
lineHeight: '20px',
whiteSpace: 'nowrap',
});
+
+export const goUpgrade = style({
+ fontSize: 'var(--affine-font-xs)',
+ color: 'var(--affine-text-emphasis-color)',
+ cursor: 'pointer',
+ marginLeft: '4px',
+ display: 'inline',
+});
+
+export const goUpgradeWrapper = style({
+ display: 'inline-flex',
+ alignItems: 'center',
+});
+
+export const arrowRight = style({
+ fontSize: '16px',
+ color: 'var(--affine-text-emphasis-color)',
+ cursor: 'pointer',
+});
diff --git a/packages/frontend/i18n/src/resources/en.json b/packages/frontend/i18n/src/resources/en.json
index d8b0c50c4d..52fad8b4fb 100644
--- a/packages/frontend/i18n/src/resources/en.json
+++ b/packages/frontend/i18n/src/resources/en.json
@@ -711,5 +711,6 @@
"com.affine.payment.billing-setting.resume-subscription": "Resume",
"com.affine.payment.billing-setting.no-invoice": "There are no invoices to display.",
"com.affine.payment.billing-setting.paid": "Paid",
- "com.affine.payment.billing-setting.view-invoice": "View Invoice"
+ "com.affine.payment.billing-setting.view-invoice": "View Invoice",
+ "com.affine.payment.member.description": "Manage members here. {{planName}} Users can invite up to {{memberLimit}}"
}