feat(core): add self-host license tab to workspace setting

Author: JimmFly

packages/backend/server/src/plugins/license/service.ts

@@ -56,7 +56,7 @@ export class LicenseService {
       throw new WorkspaceLicenseAlreadyExists();
     }
 
-    const data = await this.fetch<License>(
+    const data = await this.fetchAffinePro<License>(
       `/api/team/licenses/${licenseKey}/activate`,
       {
         method: 'POST',
@@ -106,7 +106,7 @@ export class LicenseService {
       throw new LicenseNotFound();
     }
 
-    await this.fetch(`/api/team/licenses/${license.key}/deactivate`, {
+    await this.fetchAffinePro(`/api/team/licenses/${license.key}/deactivate`, {
       method: 'POST',
     });
 
@@ -121,10 +121,11 @@ export class LicenseService {
       plan: SubscriptionPlan.SelfHostedTeam,
       recurring: SubscriptionRecurring.Monthly,
     });
+    return true;
   }
 
   async updateTeamRecurring(key: string, recurring: SubscriptionRecurring) {
-    await this.fetch(`/api/team/licenses/${key}/recurring`, {
+    await this.fetchAffinePro(`/api/team/licenses/${key}/recurring`, {
       method: 'POST',
       body: JSON.stringify({
         recurring,
@@ -143,7 +144,7 @@ export class LicenseService {
       throw new LicenseNotFound();
     }
 
-    return this.fetch<{ url: string }>(
+    return this.fetchAffinePro<{ url: string }>(
       `/api/team/licenses/${license.key}/create-customer-portal`,
       {
         method: 'POST',
@@ -169,7 +170,7 @@ export class LicenseService {
       return;
     }
 
-    await this.fetch(`/api/team/licenses/${license.key}/seats`, {
+    await this.fetchAffinePro(`/api/team/licenses/${license.key}/seats`, {
       method: 'POST',
       body: JSON.stringify({
         quantity: count,
@@ -223,7 +224,7 @@ export class LicenseService {
 
   private async revalidateLicense(license: InstalledLicense) {
     try {
-      const res = await this.fetch<License>(
+      const res = await this.fetchAffinePro<License>(
         `/api/team/licenses/${license.key}/health`
       );
 
@@ -267,7 +268,7 @@ export class LicenseService {
     }
   }
 
-  private async fetch<T = any>(
+  private async fetchAffinePro<T = any>(
     path: string,
     init?: RequestInit
   ): Promise<T & { res: Response }> {

packages/frontend/component/src/components/member-components/invite-modal.tsx

@@ -21,7 +21,7 @@ export const InviteModal = ({
 }: InviteModalProps) => {
   const t = useI18n();
   const [inviteEmail, setInviteEmail] = useState('');
-  const [permission] = useState(Permission.Write);
+  const [permission] = useState(Permission.Collaborator);
   const [isValidEmail, setIsValidEmail] = useState(true);
 
   const handleConfirm = useCallback(() => {

packages/frontend/core/src/components/affine/quota-reached-modal/cloud-quota-modal.tsx

@@ -1,6 +1,5 @@
 import { ConfirmModal } from '@affine/component/ui/modal';
 import { openQuotaModalAtom } from '@affine/core/components/atoms';
-import { UserQuotaService } from '@affine/core/modules/cloud';
 import { WorkspaceDialogService } from '@affine/core/modules/dialogs';
 import { WorkspacePermissionService } from '@affine/core/modules/permissions';
 import { WorkspaceQuotaService } from '@affine/core/modules/quota';
@@ -30,18 +29,6 @@ export const CloudQuotaModal = () => {
     permissionService.permission.revalidate();
   }, [permissionService]);
 
-  const quotaService = useService(UserQuotaService);
-  const userQuota = useLiveData(
-    quotaService.quota.quota$.map(q =>
-      q
-        ? {
-            name: q.humanReadable.name,
-            blobLimit: q.humanReadable.blobLimit,
-          }
-        : null
-    )
-  );
-
   const workspaceDialogService = useService(WorkspaceDialogService);
   const handleUpgradeConfirm = useCallback(() => {
     workspaceDialogService.open('setting', {
@@ -54,18 +41,19 @@ export const CloudQuotaModal = () => {
   }, [workspaceDialogService, setOpen]);
 
   const description = useMemo(() => {
-    if (userQuota && isOwner) {
-      return <OwnerDescription quota={userQuota.blobLimit} />;
-    }
-    if (workspaceQuota) {
-      return t['com.affine.payment.blob-limit.description.member']({
-        quota: workspaceQuota.humanReadable.blobLimit,
-      });
-    } else {
-      // loading
+    if (!workspaceQuota) {
       return null;
     }
-  }, [userQuota, isOwner, workspaceQuota, t]);
+    if (isOwner) {
+      return (
+        <OwnerDescription quota={workspaceQuota.humanReadable.blobLimit} />
+      );
+    }
+
+    return t['com.affine.payment.blob-limit.description.member']({
+      quota: workspaceQuota.humanReadable.blobLimit,
+    });
+  }, [isOwner, workspaceQuota, t]);
 
   const onAbortLargeBlob = useAsyncCallback(
     async (byteSize: number) => {

packages/frontend/core/src/components/hooks/affine/use-enable-cloud.tsx

@@ -71,13 +71,17 @@ export const useEnableCloud = () => {
       // not logged in, open login modal
       if (loginStatus === 'unauthenticated') {
         openSignIn();
+        closeConfirmModal();
+        return;
       }
+      // FIXME: session status is not updated after login,
+      // the confirm modal can not get the latest status
 
       if (loginStatus === 'authenticated') {
         await enableCloud(...args);
       }
     },
-    [enableCloud, loginStatus, openSignIn]
+    [closeConfirmModal, enableCloud, loginStatus, openSignIn]
   );
 
   const confirmEnableCloud = useCallback(

packages/frontend/core/src/desktop/dialogs/setting/general-setting/plans/plan-card.tsx

@@ -10,7 +10,6 @@ import {
 import { GlobalDialogService } from '@affine/core/modules/dialogs';
 import {
   type CreateCheckoutSessionInput,
-  ServerDeploymentType,
   SubscriptionPlan,
   SubscriptionRecurring,
   SubscriptionStatus,
@@ -122,21 +121,13 @@ const ActionButton = ({ detail, recurring }: PlanCardProps) => {
   const isOnetime = useLiveData(subscriptionService.subscription.isOnetimePro$);
   const isFree = detail.plan === SubscriptionPlan.Free;
 
-  const serverService = useService(ServerService);
-  const isSelfHosted = useLiveData(
-    serverService.server.config$.selector(
-      c => c.type === ServerDeploymentType.Selfhosted
-    )
-  );
-
   const signUpText = useMemo(
     () => getSignUpText(detail.plan, t),
     [detail.plan, t]
   );
 
   // branches:
   //  if contact                                => 'Contact Sales'
-  //  if self-hosted team                       => 'Upgrade'
   //  if not signed in:
   //    if free                                 => 'Sign up free'
   //    if team                                 => 'Upgrade'
@@ -154,13 +145,6 @@ const ActionButton = ({ detail, recurring }: PlanCardProps) => {
   //    if currentRecurring !== recurring       => 'Change to {recurring} Billing'
   //    else                                    => 'Upgrade'
 
-  // self-hosted team
-  if (isSelfHosted || detail.plan === SubscriptionPlan.SelfHostedTeam) {
-    return (
-      <UpgradeToSelfHostTeam recurring={recurring as SubscriptionRecurring} />
-    );
-  }
-
   // not signed in
   if (!loggedIn) {
     return <SignUpAction>{signUpText}</SignUpAction>;
@@ -284,51 +268,6 @@ const UpgradeToTeam = ({ recurring }: { recurring: SubscriptionRecurring }) => {
     </a>
   );
 };
-const UpgradeToSelfHostTeam = ({
-  recurring,
-}: {
-  recurring: SubscriptionRecurring;
-}) => {
-  const t = useI18n();
-
-  const handleBeforeCheckout = useCallback(() => {
-    track.$.settingsPanel.plans.checkout({
-      plan: SubscriptionPlan.SelfHostedTeam,
-      recurring: recurring,
-    });
-  }, [recurring]);
-
-  const checkoutOptions = useMemo(
-    () => ({
-      recurring,
-      plan: SubscriptionPlan.SelfHostedTeam,
-      variant: null,
-      coupon: null,
-      successCallbackLink: generateSubscriptionCallbackLink(
-        null,
-        SubscriptionPlan.SelfHostedTeam,
-        recurring
-      ),
-    }),
-    [recurring]
-  );
-
-  return (
-    <CheckoutSlot
-      onBeforeCheckout={handleBeforeCheckout}
-      checkoutOptions={checkoutOptions}
-      renderer={props => (
-        <Button
-          className={clsx(styles.planAction)}
-          variant="primary"
-          {...props}
-        >
-          {t['com.affine.payment.upgrade']()}
-        </Button>
-      )}
-    />
-  );
-};
 
 export const Upgrade = ({
   className,

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

@@ -1,6 +1,8 @@
 import { useWorkspaceInfo } from '@affine/core/components/hooks/use-workspace-info';
+import { ServerService } from '@affine/core/modules/cloud';
 import type { SettingTab } from '@affine/core/modules/dialogs/constant';
 import { WorkspaceService } from '@affine/core/modules/workspace';
+import { ServerDeploymentType } from '@affine/graphql';
 import { useI18n } from '@affine/i18n';
 import {
   CollaborationIcon,
@@ -9,11 +11,12 @@ import {
   SaveIcon,
   SettingsIcon,
 } from '@blocksuite/icons/rc';
-import { useService } from '@toeverything/infra';
+import { useLiveData, useService } from '@toeverything/infra';
 import { useMemo } from 'react';
 
 import type { SettingSidebarItem, SettingState } from '../types';
 import { WorkspaceSettingBilling } from './billing';
+import { WorkspaceSettingLicense } from './license';
 import { MembersPanel } from './members';
 import { WorkspaceSettingDetail } from './preference';
 import { WorkspaceSettingProperties } from './properties';
@@ -44,6 +47,8 @@ export const WorkspaceSetting = ({
       return <WorkspaceSettingBilling />;
     case 'workspace:storage':
       return <WorkspaceSettingStorage onCloseSetting={onCloseSetting} />;
+    case 'workspace:license':
+      return <WorkspaceSettingLicense />;
     default:
       return null;
   }
@@ -52,10 +57,18 @@ export const WorkspaceSetting = ({
 export const useWorkspaceSettingList = (): SettingSidebarItem[] => {
   const workspaceService = useService(WorkspaceService);
   const information = useWorkspaceInfo(workspaceService.workspace);
+  const serverService = useService(ServerService);
+
+  const isSelfhosted = useLiveData(
+    serverService.server.config$.selector(
+      c => c.type === ServerDeploymentType.Selfhosted
+    )
+  );
 
   const t = useI18n();
 
   const showBilling = information?.isTeam && information?.isOwner;
+  const showLicense = information?.isOwner && isSelfhosted;
   const items = useMemo<SettingSidebarItem[]>(() => {
     return [
       {
@@ -88,10 +101,14 @@ export const useWorkspaceSettingList = (): SettingSidebarItem[] => {
         icon: <PaymentIcon />,
         testId: 'workspace-setting:billing',
       },
-
-      // todo(@pengx17): add selfhost's team license
+      showLicense && {
+        key: 'workspace:license' as SettingTab,
+        title: t['com.affine.settings.workspace.license'](),
+        icon: <PaymentIcon />,
+        testId: 'workspace-setting:license',
+      },
     ].filter((item): item is SettingSidebarItem => !!item);
-  }, [showBilling, t]);
+  }, [showBilling, showLicense, t]);
 
   return items;
 };