From 9dd4c7411573d7df4e75662b317d82ae4a50031a Mon Sep 17 00:00:00 2001
From: JimmFly <447268514@qq.com>
Date: Thu, 11 Apr 2024 09:53:03 +0000
Subject: [PATCH] chore(core): update description of the workspace member
 (#6492)

close AFF-805
---
 .../new-workspace-setting-detail/members.tsx  | 37 +++++++------------
 packages/frontend/i18n/src/resources/en.json  |  2 +
 .../frontend/i18n/src/resources/zh-Hans.json  |  2 +
 3 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/members.tsx b/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/members.tsx
index 6c2d22bc5dce..d166d2090253 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/members.tsx
+++ b/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}
               />
diff --git a/packages/frontend/i18n/src/resources/en.json b/packages/frontend/i18n/src/resources/en.json
index 3baccc8c6799..8df5faa65b00 100644
--- a/packages/frontend/i18n/src/resources/en.json
+++ b/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",
diff --git a/packages/frontend/i18n/src/resources/zh-Hans.json b/packages/frontend/i18n/src/resources/zh-Hans.json
index d037f030a9c7..29e93232b8b4 100644
--- a/packages/frontend/i18n/src/resources/zh-Hans.json
+++ b/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": "更改您的订阅",