fix(core): workspace billing cannot be opened (#9091)

packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/billing/index.tsx

@@ -8,8 +8,10 @@ import {
 import { getUpgradeQuestionnaireLink } from '@affine/core/components/hooks/affine/use-subscription-notify';
 import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
 import { useMutation } from '@affine/core/components/hooks/use-mutation';
+import { useWorkspace } from '@affine/core/components/hooks/use-workspace';
 import {
   AuthService,
+  SubscriptionService,
   WorkspaceInvoicesService,
   WorkspaceSubscriptionService,
 } from '@affine/core/modules/cloud';
@@ -27,7 +29,7 @@ import {
   FrameworkScope,
   useLiveData,
   useService,
-  WorkspaceService,
+  type WorkspaceMetadata,
 } from '@toeverything/infra';
 import { cssVar } from '@toeverything/theme';
 import { useCallback, useEffect, useMemo, useState } from 'react';
@@ -38,18 +40,29 @@ import {
 } from '../../general-setting/plans/actions';
 import * as styles from './styles.css';
 
-export const WorkspaceSettingBilling = () => {
+export const WorkspaceSettingBilling = ({
+  workspaceMetadata,
+}: {
+  workspaceMetadata: WorkspaceMetadata;
+}) => {
+  // useWorkspace hook is a vary heavy operation here, but we need syncing name and avatar changes here,
+  // we don't have a better way to do this now
+  const workspace = useWorkspace(workspaceMetadata);
+
   const t = useI18n();
-  const workspace = useService(WorkspaceService).workspace;
-  const subscriptionService = useService(WorkspaceSubscriptionService);
-  const subscription = useLiveData(
-    subscriptionService.subscription.subscription$
+
+  const subscriptionService = workspace?.scope.get(
+    WorkspaceSubscriptionService
   );
-  const title = useLiveData(workspace.name$) || 'untitled';
+  const subscription = useLiveData(
+    subscriptionService?.subscription.subscription$
+  );
+
+  useEffect(() => {
+    subscriptionService?.subscription.revalidate();
+  }, [subscriptionService]);
 
   if (workspace === null) {
-    console.log('workspace is null', title);
-
     return null;
   }
 
@@ -83,17 +96,20 @@ export const WorkspaceSettingBilling = () => {
 
 const TeamCard = () => {
   const t = useI18n();
-  const subscriptionService = useService(WorkspaceSubscriptionService);
+  const workspaceSubscriptionService = useService(WorkspaceSubscriptionService);
+  const subscriptionService = useService(SubscriptionService);
+
   const teamSubscription = useLiveData(
-    subscriptionService.subscription.subscription$
+    workspaceSubscriptionService.subscription.subscription$
   );
   const teamPrices = useLiveData(subscriptionService.prices.teamPrice$);
 
   const [openCancelModal, setOpenCancelModal] = useState(false);
+
   useEffect(() => {
-    subscriptionService.subscription.revalidate();
-    subscriptionService.prices.revalidate();
-  }, [subscriptionService]);
+    workspaceSubscriptionService.subscription.revalidate();
+  }, [workspaceSubscriptionService.subscription]);
+
   const expiration = teamSubscription?.end;
   const nextBillingDate = teamSubscription?.nextBillAt;
   const recurring = teamSubscription?.recurring;

packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/index.tsx

@@ -31,7 +31,7 @@ export const WorkspaceSetting = ({
         <WorkspaceSettingProperties workspaceMetadata={workspaceMetadata} />
       );
     case 'workspace:billing':
-      return <WorkspaceSettingBilling />;
+      return <WorkspaceSettingBilling workspaceMetadata={workspaceMetadata} />;
   }
   return null;
 };

packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/members/cloud-members-panel.tsx

@@ -1,7 +1,5 @@
 import { Button, Loading, notify } from '@affine/component';
 import {
-  InviteModal,
-  type InviteModalProps,
   InviteTeamMemberModal,
   type InviteTeamMemberModalProps,
   MemberLimitModal,
@@ -98,25 +96,6 @@ export const CloudWorkspaceMembersPanel = ({
     return success;
   }, [permissionService.permission]);
 
-  const onInviteConfirm = useCallback<InviteModalProps['onConfirm']>(
-    async ({ email, permission }) => {
-      setIsMutating(true);
-      const success = await permissionService.permission.inviteMember(
-        email,
-        permission,
-        true
-      );
-      if (success) {
-        notify.success({
-          title: t['Invitation sent'](),
-          message: t['Invitation sent hint'](),
-        });
-        setOpen(false);
-      }
-      setIsMutating(false);
-    },
-    [permissionService.permission, t]
-  );
   const onInviteBatchConfirm = useCallback<
     InviteTeamMemberModalProps['onConfirm']
   >(
@@ -208,18 +187,7 @@ export const CloudWorkspaceMembersPanel = ({
         {isOwner ? (
           <>
             <Button onClick={openModal}>{t['Invite Members']()}</Button>
-            {isTeam ? (
-              <InviteTeamMemberModal
-                open={open}
-                setOpen={setOpen}
-                onConfirm={onInviteBatchConfirm}
-                isMutating={isMutating}
-                copyTextToClipboard={copyTextToClipboard}
-                onGenerateInviteLink={onGenerateInviteLink}
-                onRevokeInviteLink={onRevokeInviteLink}
-                importCSV={<ImportCSV onImport={onImportCSV} />}
-              />
-            ) : isLimited ? (
+            {isLimited && !isTeam ? (
               <MemberLimitModal
                 isFreePlan={!plan}
                 open={open}
@@ -229,11 +197,15 @@ export const CloudWorkspaceMembersPanel = ({
                 onConfirm={handleUpgradeConfirm}
               />
             ) : (
-              <InviteModal
+              <InviteTeamMemberModal
                 open={open}
                 setOpen={setOpen}
-                onConfirm={onInviteConfirm}
+                onConfirm={onInviteBatchConfirm}
                 isMutating={isMutating}
+                copyTextToClipboard={copyTextToClipboard}
+                onGenerateInviteLink={onGenerateInviteLink}
+                onRevokeInviteLink={onRevokeInviteLink}
+                importCSV={<ImportCSV onImport={onImportCSV} />}
               />
             )}
           </>