chore(core): update description of the workspace member (#6492)

close AFF-805

packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/members.tsx

@@ -28,7 +28,7 @@ import { useUserSubscription } from '@affine/core/hooks/use-subscription';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { Permission, SubscriptionPlan } from '@affine/graphql';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { ArrowRightBigIcon, MoreVerticalIcon } from '@blocksuite/icons';
+import { MoreVerticalIcon } from '@blocksuite/icons';
 import clsx from 'clsx';
 import { useSetAtom } from 'jotai';
 import type { ReactElement } from 'react';
@@ -81,7 +81,7 @@ export const CloudWorkspaceMembersPanel = ({
   const quota = useWorkspaceQuota(workspaceId);
   const [subscription] = useUserSubscription();
   const plan = subscription?.plan ?? SubscriptionPlan.Free;
-  const isLimited = checkMemberCountLimit(memberCount, quota?.memberLimit);
+  const isLimited = checkMemberCountLimit(memberCount, quota.memberLimit);
 
   const t = useAFFiNEI18N();
   const { invite, isMutating } = useInviteMember(workspaceId);
@@ -151,27 +151,18 @@ export const CloudWorkspaceMembersPanel = ({
 
   const desc = useMemo(() => {
     if (!quota) return null;
-
-    const humanReadable = quota.humanReadable;
     return (
       <span>
-        {t['com.affine.payment.member.description']({
-          planName: humanReadable.name,
-          memberLimit: humanReadable.memberLimit,
-        })}
+        {t['com.affine.payment.member.description2']()}
         {upgradable ? (
-          <>
-            ,
-            <div
-              className={style.goUpgradeWrapper}
-              onClick={handleUpgradeConfirm}
-            >
-              <span className={style.goUpgrade}>
-                {t['com.affine.payment.member.description.go-upgrade']()}
-              </span>
-              <ArrowRightBigIcon className={style.arrowRight} />
-            </div>
-          </>
+          <div
+            className={style.goUpgradeWrapper}
+            onClick={handleUpgradeConfirm}
+          >
+            <span className={style.goUpgrade}>
+              {t['com.affine.payment.member.description.choose-plan']()}
+            </span>
+          </div>
         ) : null}
       </span>
     );
@@ -180,7 +171,7 @@ export const CloudWorkspaceMembersPanel = ({
   return (
     <>
       <SettingRow
-        name={`${t['Members']()} (${memberCount})`}
+        name={`${t['Members']()} (${memberCount}/${quota.humanReadable.memberLimit})`}
         desc={desc}
         spreadCol={isOwner}
       >
@@ -191,8 +182,8 @@ export const CloudWorkspaceMembersPanel = ({
               <MemberLimitModal
                 isFreePlan={plan === SubscriptionPlan.Free}
                 open={open}
-                plan={quota?.humanReadable.name ?? ''}
-                quota={quota?.humanReadable.memberLimit ?? ''}
+                plan={quota.humanReadable.name}
+                quota={quota.humanReadable.memberLimit}
                 setOpen={setOpen}
                 onConfirm={handleUpgradeConfirm}
               />

packages/frontend/i18n/src/resources/en.json

@@ -970,6 +970,8 @@
   "com.affine.payment.member-limit.title": "You have reached the limit",
   "com.affine.payment.member.description": "Manage members here. {{planName}} Users can invite up to {{memberLimit}}",
   "com.affine.payment.member.description.go-upgrade": "go upgrade",
+  "com.affine.payment.member.description.choose-plan": "Choose your plan",
+  "com.affine.payment.member.description2": "Looking to collaborate with more people?",
   "com.affine.payment.modal.change.cancel": "Cancel",
   "com.affine.payment.modal.change.confirm": "Change",
   "com.affine.payment.modal.change.title": "Change your subscription",

packages/frontend/i18n/src/resources/zh-Hans.json

@@ -894,6 +894,8 @@
   "com.affine.payment.member-limit.title": "成员数量已达到极限",
   "com.affine.payment.member.description": "在此处管理成员。{{planName}} 用户可以邀请最多 {{memberLimit}} 人",
   "com.affine.payment.member.description.go-upgrade": "前往升级",
+  "com.affine.payment.member.description.choose-plan": "选择你的计划",
+  "com.affine.payment.member.description2": "希望与更多人协作？",
   "com.affine.payment.modal.change.cancel": "取消",
   "com.affine.payment.modal.change.confirm": "更改",
   "com.affine.payment.modal.change.title": "更改您的订阅",