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, + })} + , +
+ go upgrade + +
+
+ ); + }, [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}}" }