feat(core): support install license for self hosted client (#12287)

## Summary by CodeRabbit - **New Features** - Added the ability to upload and replace license files for self-hosted team workspaces via a new modal dialog. - Introduced clearer UI flows for activating, deactivating, and managing team licenses, including one-time purchase licenses. - Provided direct links and guidance for requesting licenses and managing payments. - **Enhancements** - Improved license management interface with updated button labels and descriptions. - Added new styles for better layout and clarity in license dialogs. - Updated internationalization with new and revised texts for license operations. - **Bug Fixes** - Prevented duplicate opening of license or plan dialogs when already open. - **Chores** - Updated support and pricing links for clarity and accuracy.
2026-02-25 02:13:00 +08:00 · 2025-05-27 04:56:13 +00:00
parent 382c237dac
commit 1b715e588c
13 changed files with 714 additions and 75 deletions
--- a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/license/index.tsx
+++ b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/license/index.tsx
@@ -8,6 +8,7 @@ import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hoo
 import { useMutation } from '@affine/core/components/hooks/use-mutation';
 import {
  AuthService,
+  SelfhostLicenseService,
  WorkspaceSubscriptionService,
 } from '@affine/core/modules/cloud';
 import { WorkspacePermissionService } from '@affine/core/modules/permissions';
@@ -18,14 +19,17 @@ import {
  createSelfhostCustomerPortalMutation,
  SubscriptionPlan,
  SubscriptionRecurring,
+  SubscriptionVariant,
 } from '@affine/graphql';
 import { useI18n } from '@affine/i18n';
 import { FrameworkScope, useLiveData, useService } from '@toeverything/infra';
+import { useCallback, useEffect, useState } from 'react';

 import { EnableCloudPanel } from '../preference/enable-cloud';
 import { SelfHostTeamCard } from './self-host-team-card';
 import { SelfHostTeamPlan } from './self-host-team-plan';
 import * as styles from './styles.css';
+import { UploadLicenseModal } from './upload-license-modal';

 export const WorkspaceSettingLicense = ({
  onCloseSetting,
@@ -52,6 +56,7 @@ export const WorkspaceSettingLicense = ({
      ) : (
        <>
          <SelfHostTeamCard />
+          <ReplaceLicenseModal />
          <TypeFormLink />
          <PaymentMethodUpdater />
        </>
@@ -60,6 +65,52 @@ export const WorkspaceSettingLicense = ({
  );
 };

+const ReplaceLicenseModal = () => {
+  const t = useI18n();
+  const selfhostLicenseService = useService(SelfhostLicenseService);
+  const license = useLiveData(selfhostLicenseService.license$);
+  const isOneTimePurchase = license?.variant === SubscriptionVariant.Onetime;
+  const permission = useService(WorkspacePermissionService).permission;
+  const isTeam = useLiveData(permission.isTeam$);
+  const [openUploadModal, setOpenUploadModal] = useState(false);
+
+  const handleClick = useCallback(() => {
+    setOpenUploadModal(true);
+  }, []);
+
+  useEffect(() => {
+    selfhostLicenseService.revalidate();
+  }, [selfhostLicenseService]);
+
+  if (!isTeam || !isOneTimePurchase) {
+    return null;
+  }
+
+  return (
+    <>
+      <SettingRow
+        className={styles.paymentMethod}
+        name={t[
+          'com.affine.settings.workspace.license.self-host-team.replace-license.title'
+        ]()}
+        desc={t[
+          'com.affine.settings.workspace.license.self-host-team.replace-license.description'
+        ]()}
+      >
+        <Button onClick={handleClick}>
+          {t[
+            'com.affine.settings.workspace.license.self-host-team.replace-license.upload'
+          ]()}
+        </Button>
+      </SettingRow>
+      <UploadLicenseModal
+        open={openUploadModal}
+        onOpenChange={setOpenUploadModal}
+      />
+    </>
+  );
+};
+
 const TypeFormLink = () => {
  const t = useI18n();
  const workspaceSubscriptionService = useService(WorkspaceSubscriptionService);
--- a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/license/self-host-team-card.tsx
+++ b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/license/self-host-team-card.tsx
@@ -1,20 +1,29 @@
-import { Button, ConfirmModal, Input, notify } from '@affine/component';
+import { Button, ConfirmModal, Input, Modal, notify } from '@affine/component';
 import { SettingRow } from '@affine/component/setting-components';
 import { useEnableCloud } from '@affine/core/components/hooks/affine/use-enable-cloud';
+import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
+import { useMutation } from '@affine/core/components/hooks/use-mutation';
 import {
  SelfhostLicenseService,
  WorkspaceSubscriptionService,
 } from '@affine/core/modules/cloud';
 import { WorkspacePermissionService } from '@affine/core/modules/permissions';
 import { WorkspaceQuotaService } from '@affine/core/modules/quota';
+import { UrlService } from '@affine/core/modules/url';
 import { WorkspaceService } from '@affine/core/modules/workspace';
 import { UserFriendlyError } from '@affine/error';
+import {
+  createSelfhostCustomerPortalMutation,
+  SubscriptionVariant,
+} from '@affine/graphql';
 import { Trans, useI18n } from '@affine/i18n';
 import { useLiveData, useService } from '@toeverything/infra';
+import { cssVarV2 } from '@toeverything/theme/v2';
 import clsx from 'clsx';
 import { useCallback, useEffect, useMemo, useState } from 'react';

 import * as styles from './styles.css';
+import { UploadLicenseModal } from './upload-license-modal';

 export const SelfHostTeamCard = () => {
  const t = useI18n();
@@ -30,11 +39,13 @@ export const SelfHostTeamCard = () => {
  const isLocalWorkspace = workspace.flavour === 'local';

  const [openModal, setOpenModal] = useState(false);
+  const [openUploadModal, setOpenUploadModal] = useState(false);
  const [loading, setLoading] = useState(false);
  const selfhostLicenseService = useService(SelfhostLicenseService);
  const license = useLiveData(selfhostLicenseService.license$);
+  const isOneTimePurchase = license?.variant === SubscriptionVariant.Onetime;

-  useEffect(() => {
+  const revalidate = useCallback(() => {
    permission.revalidate();
    workspaceQuotaService.quota.revalidate();
    workspaceSubscriptionService.subscription.revalidate();
@@ -46,24 +57,44 @@ export const SelfHostTeamCard = () => {
    workspaceSubscriptionService,
  ]);

+  useEffect(() => {
+    revalidate();
+  }, [revalidate]);
+
  const description = useMemo(() => {
    if (isTeam) {
-      return t[
-        'com.affine.settings.workspace.license.self-host-team.team.description'
-      ]({
-        expirationDate: new Date(license?.expiredAt || 0).toLocaleDateString(),
-        leftDays: Math.floor(
-          (new Date(license?.expiredAt || 0).getTime() - Date.now()) /
-            (1000 * 60 * 60 * 24)
-        ).toLocaleString(),
-      });
+      return (
+        <div>
+          <p>
+            {t[
+              'com.affine.settings.workspace.license.self-host-team.team.description'
+            ]({
+              expirationDate: new Date(
+                license?.expiredAt || 0
+              ).toLocaleDateString(),
+              leftDays: Math.floor(
+                (new Date(license?.expiredAt || 0).getTime() - Date.now()) /
+                  (1000 * 60 * 60 * 24)
+              ).toLocaleString(),
+            })}
+          </p>
+          {isOneTimePurchase ? (
+            <p>
+              <Trans
+                i18nKey="com.affine.settings.workspace.license.self-host-team.team.license"
+                components={{ 1: <strong /> }}
+              />
+            </p>
+          ) : null}
+        </div>
+      );
    }
    return t[
      'com.affine.settings.workspace.license.self-host-team.free.description'
    ]({
      memberCount: workspaceQuota?.humanReadable.memberLimit || '10',
    });
-  }, [isTeam, license, t, workspaceQuota]);
+  }, [isOneTimePurchase, isTeam, license, t, workspaceQuota]);
  const handleClick = useCallback(() => {
    if (isLocalWorkspace) {
      confirmEnableCloud(workspace);
@@ -72,6 +103,10 @@ export const SelfHostTeamCard = () => {
    setOpenModal(true);
  }, [confirmEnableCloud, isLocalWorkspace, workspace]);

+  const handleOpenUploadModal = useCallback(() => {
+    setOpenUploadModal(true);
+  }, []);
+
  const onActivate = useCallback(
    (license: string) => {
      setLoading(true);
@@ -80,8 +115,7 @@ export const SelfHostTeamCard = () => {
        .then(() => {
          setLoading(false);
          setOpenModal(false);
-          permission.revalidate();
-          selfhostLicenseService.revalidate();
+          revalidate();
          notify.success({
            title:
              t['com.affine.settings.workspace.license.activate-success'](),
@@ -99,7 +133,7 @@ export const SelfHostTeamCard = () => {
          });
        });
    },
-    [permission, selfhostLicenseService, t, workspace.id]
+    [revalidate, selfhostLicenseService, t, workspace.id]
  );

  const onDeactivate = useCallback(() => {
@@ -109,7 +143,7 @@ export const SelfHostTeamCard = () => {
      .then(() => {
        setLoading(false);
        setOpenModal(false);
-        permission.revalidate();
+        revalidate();
        notify.success({
          title:
            t['com.affine.settings.workspace.license.deactivate-success'](),
@@ -126,7 +160,7 @@ export const SelfHostTeamCard = () => {
          message: error.message,
        });
      });
-  }, [permission, selfhostLicenseService, t, workspace.id]);
+  }, [revalidate, selfhostLicenseService, t, workspace.id]);

  const handleConfirm = useCallback(
    (license: string) => {
@@ -163,7 +197,7 @@ export const SelfHostTeamCard = () => {
              ]()}
            </span>
            <span>
-              {isTeam
+              {isTeam && !isOneTimePurchase
                ? license?.quantity || ''
                : `${workspaceQuota?.memberCount}/${workspaceQuota?.memberLimit}`}
            </span>
@@ -174,13 +208,24 @@ export const SelfHostTeamCard = () => {
            left: isTeam || isLocalWorkspace,
          })}
        >
+          {!isTeam && !isLocalWorkspace ? (
+            <Button
+              variant="plain"
+              className={styles.uploadButton}
+              onClick={handleOpenUploadModal}
+            >
+              {t[
+                'com.affine.settings.workspace.license.self-host-team.upload-license-file'
+              ]()}
+            </Button>
+          ) : null}
          <Button
            variant="primary"
            className={styles.activeButton}
            onClick={handleClick}
          >
            {t[
-              `com.affine.settings.workspace.license.self-host-team.${isTeam ? 'deactivate-license' : 'active-key'}`
+              `com.affine.settings.workspace.license.self-host-team.${isTeam ? 'deactivate-license' : 'use-purchased-key'}`
            ]()}
          </Button>
        </div>
@@ -191,6 +236,11 @@ export const SelfHostTeamCard = () => {
        isTeam={!!isTeam}
        loading={loading}
        onConfirm={handleConfirm}
+        isOneTimePurchase={isOneTimePurchase}
+      />
+      <UploadLicenseModal
+        open={openUploadModal}
+        onOpenChange={setOpenUploadModal}
      />
    </>
  );
@@ -202,16 +252,41 @@ const ActionModal = ({
  isTeam,
  onConfirm,
  loading,
+  isOneTimePurchase,
 }: {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  isTeam: boolean;
  loading: boolean;
+  isOneTimePurchase: boolean;
  onConfirm: (key: string) => void;
 }) => {
  const t = useI18n();
  const [key, setKey] = useState('');

+  const workspace = useService(WorkspaceService).workspace;
+
+  const { isMutating, trigger } = useMutation({
+    mutation: createSelfhostCustomerPortalMutation,
+  });
+  const urlService = useService(UrlService);
+
+  const update = useAsyncCallback(async () => {
+    await trigger(
+      {
+        workspaceId: workspace.id,
+      },
+      {
+        onSuccess: data => {
+          urlService.openExternal(data.createSelfhostWorkspaceCustomerPortal);
+        },
+      }
+    ).catch(e => {
+      const userFriendlyError = UserFriendlyError.fromAny(e);
+      notify.error(userFriendlyError);
+    });
+  }, [trigger, urlService, workspace.id]);
+
  const handleConfirm = useCallback(() => {
    onConfirm(key);
    setKey('');
@@ -225,23 +300,96 @@ const ActionModal = ({
    [onOpenChange]
  );

+  const handleCancel = useCallback(() => {
+    setKey('');
+    onOpenChange(false);
+  }, [onOpenChange]);
+
+  if (isTeam && isOneTimePurchase) {
+    return (
+      <ConfirmModal
+        width={480}
+        open={open}
+        onOpenChange={handleOpenChange}
+        title={t[
+          `com.affine.settings.workspace.license.deactivate-modal.title`
+        ]()}
+        description={t[
+          'com.affine.settings.workspace.license.deactivate-modal.description-license'
+        ]()}
+        cancelText={t['Cancel']()}
+        cancelButtonOptions={{
+          variant: 'secondary',
+        }}
+        confirmText={t['Confirm']()}
+        confirmButtonOptions={{
+          loading: loading,
+          disabled: loading,
+          variant: 'primary',
+        }}
+        onConfirm={handleConfirm}
+        childrenContentClassName={styles.activateModalContent}
+      />
+    );
+  }
+
+  if (isTeam) {
+    return (
+      <Modal
+        width={480}
+        open={open}
+        onOpenChange={handleOpenChange}
+        title={t[
+          `com.affine.settings.workspace.license.deactivate-modal.title`
+        ]()}
+        description={
+          <Trans
+            i18nKey="com.affine.settings.workspace.license.deactivate-modal.description"
+            components={{
+              1: <strong />,
+            }}
+          />
+        }
+      >
+        <div className={styles.footer}>
+          <Button
+            variant="secondary"
+            onClick={update}
+            loading={isMutating}
+            disabled={isMutating}
+          >
+            {t[
+              'com.affine.settings.workspace.license.deactivate-modal.manage-payment'
+            ]()}
+          </Button>
+          <div className={styles.rightActions}>
+            <Button variant="secondary" onClick={handleCancel}>
+              {t['Cancel']()}
+            </Button>
+            <Button variant="primary" onClick={handleConfirm}>
+              {t['Confirm']()}
+            </Button>
+          </div>
+        </div>
+      </Modal>
+    );
+  }
+
  return (
    <ConfirmModal
      width={480}
      open={open}
      onOpenChange={handleOpenChange}
-      title={t[
-        `com.affine.settings.workspace.license.${isTeam ? 'deactivate' : 'activate'}-modal.title`
-      ]()}
+      title={t['com.affine.settings.workspace.license.activate-modal.title']()}
      description={t[
-        `com.affine.settings.workspace.license.${isTeam ? 'deactivate' : 'activate'}-modal.description`
+        'com.affine.settings.workspace.license.activate-modal.description'
      ]()}
      cancelText={t['Cancel']()}
      cancelButtonOptions={{
        variant: 'secondary',
      }}
      contentOptions={{
-        ['data-testid' as string]: 'invite-modal',
+        ['data-testid' as string]: 'license-modal',
        style: {
          padding: '20px 24px',
        },
@@ -249,46 +397,32 @@ const ActionModal = ({
      confirmText={t['Confirm']()}
      confirmButtonOptions={{
        loading: loading,
-        variant: isTeam ? 'error' : 'primary',
+        variant: 'primary',
        disabled: loading || (!isTeam && !key),
      }}
      onConfirm={handleConfirm}
      childrenContentClassName={styles.activateModalContent}
    >
-      {isTeam ? null : (
-        <>
-          <Input
-            value={key}
-            onChange={setKey}
-            placeholder="AAAA-AAAA-AAAA-AAAA-AAAA"
-          />
-          <span>
-            <Trans
-              i18nKey="com.affine.settings.workspace.license.activate-modal.tips"
-              components={{
-                1: (
-                  <a
-                    href="mailto:support@toeverything.info"
-                    style={{ color: 'var(--affine-link-color)' }}
-                  >
-                    customer support
-                  </a>
-                ),
-                2: (
-                  <a
-                    href="https://affine.pro/pricing/?type=selfhost#table"
-                    target="_blank"
-                    rel="noreferrer"
-                    style={{ color: 'var(--affine-link-color)' }}
-                  >
-                    click to purchase
-                  </a>
-                ),
-              }}
-            />
-          </span>
-        </>
-      )}
+      <Input
+        value={key}
+        onChange={setKey}
+        placeholder="AAAA-AAAA-AAAA-AAAA-AAAA"
+      />
+      <span className={styles.tips}>
+        <Trans
+          i18nKey="com.affine.settings.workspace.license.activate-modal.tips"
+          components={{
+            1: (
+              <a
+                href="https://affine.pro/pricing/?type=selfhost#table"
+                target="_blank"
+                rel="noreferrer"
+                style={{ color: cssVarV2('text/link') }}
+              />
+            ),
+          }}
+        />
+      </span>
    </ConfirmModal>
  );
 };
--- a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/license/styles.css.ts
+++ b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/license/styles.css.ts
@@ -53,6 +53,10 @@ export const buttonContainer = style({
 export const activeButton = style({
  marginTop: '8px',
 });
+export const uploadButton = style({
+  marginTop: '8px',
+  marginRight: '9px',
+});

 export const seat = style({
  fontSize: cssVar('fontXs'),
@@ -72,3 +76,17 @@ export const tips = style({
  color: cssVarV2('text/secondary'),
  fontSize: cssVar('fontSm'),
 });
+
+export const footer = style({
+  marginTop: 'auto',
+  marginBottom: '0',
+  display: 'flex',
+  alignItems: 'center',
+  paddingTop: '20px',
+  justifyContent: 'space-between',
+});
+
+export const rightActions = style({
+  display: 'flex',
+  gap: '20px',
+});
--- a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/license/upload-license-modal.css.ts
+++ b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/license/upload-license-modal.css.ts
@@ -0,0 +1,109 @@
+import { cssVar } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { style } from '@vanilla-extract/css';
+
+export const activateModalContent = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '12px',
+  marginTop: '12px',
+});
+
+export const tipsContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '8px',
+  padding: '8px',
+  color: cssVarV2('text/secondary'),
+  fontSize: cssVar('fontSm'),
+  borderRadius: '8px',
+  backgroundColor: cssVarV2('layer/background/tertiary'),
+});
+
+export const tipsTitle = style({
+  fontWeight: 500,
+});
+
+export const tipsContent = style({
+  fontSize: cssVar('fontSm'),
+});
+export const textLink = style({
+  color: cssVarV2('text/link'),
+  selectors: {
+    '&:visited': {
+      color: cssVarV2('text/link'),
+    },
+  },
+});
+
+export const workspaceIdContainer = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  fontSize: cssVar('fontXs'),
+  alignItems: 'center',
+  '@media': {
+    'screen and (max-width: 768px)': {
+      flexWrap: 'wrap',
+    },
+  },
+});
+
+export const workspaceIdLabel = style({
+  fontWeight: 500,
+});
+
+export const copyButton = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '4px',
+  cursor: 'pointer',
+  padding: '4px 12px',
+  borderRadius: '8px',
+  width: '100%',
+  maxWidth: '300px',
+});
+export const copyButtonContent = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '4px',
+});
+export const copyButtonText = style({
+  fontSize: cssVar('fontXs'),
+  padding: '0 4px',
+  color: cssVarV2('text/secondary'),
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  maxWidth: '100%',
+  flex: 1,
+});
+
+export const copyIcon = style({
+  width: '16px',
+  height: '16px',
+  color: cssVarV2('icon/primary'),
+});
+
+export const uploadButton = style({
+  width: '100%',
+});
+
+export const uploadButtonContent = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
+  justifyContent: 'center',
+});
+
+export const uploadButtonIcon = style({
+  width: '16px',
+  height: '16px',
+  color: cssVarV2('layer/pureWhite'),
+});
+
+export const footer = style({
+  display: 'flex',
+  fontSize: cssVar('fontSm'),
+  fontWeight: 400,
+  color: cssVarV2('text/secondary'),
+});
--- a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/license/upload-license-modal.tsx
+++ b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/license/upload-license-modal.tsx
@@ -0,0 +1,203 @@
+import { Button, Modal, notify, useConfirmModal } from '@affine/component';
+import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
+import { Upload } from '@affine/core/components/pure/file-upload';
+import {
+  SelfhostLicenseService,
+  WorkspaceSubscriptionService,
+} from '@affine/core/modules/cloud';
+import { WorkspacePermissionService } from '@affine/core/modules/permissions';
+import { WorkspaceQuotaService } from '@affine/core/modules/quota';
+import { WorkspaceService } from '@affine/core/modules/workspace';
+import { copyTextToClipboard } from '@affine/core/utils/clipboard';
+import { UserFriendlyError } from '@affine/error';
+import { Trans, useI18n } from '@affine/i18n';
+import { CopyIcon, FileIcon } from '@blocksuite/icons/rc';
+import { useService } from '@toeverything/infra';
+import { useCallback, useEffect, useState } from 'react';
+
+import * as styles from './upload-license-modal.css';
+
+export const UploadLicenseModal = ({
+  open,
+  onOpenChange,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) => {
+  const t = useI18n();
+  const workspaceService = useService(WorkspaceService);
+  const workspace = workspaceService.workspace;
+  const licenseService = useService(SelfhostLicenseService);
+  const quotaService = useService(WorkspaceQuotaService);
+  const workspaceSubscriptionService = useService(WorkspaceSubscriptionService);
+  const permission = useService(WorkspacePermissionService).permission;
+  const { openConfirmModal } = useConfirmModal();
+  const [isInstalling, setIsInstalling] = useState(false);
+
+  const revalidate = useCallback(() => {
+    permission.revalidate();
+    quotaService.quota.revalidate();
+    workspaceSubscriptionService.subscription.revalidate();
+    licenseService.revalidate();
+  }, [licenseService, permission, quotaService, workspaceSubscriptionService]);
+
+  const handleInstallLicense = useAsyncCallback(
+    async (file: File) => {
+      setIsInstalling(true);
+      try {
+        await licenseService.installLicense(workspace.id, file);
+        revalidate();
+        onOpenChange(false);
+        openConfirmModal({
+          title:
+            t[
+              'com.affine.settings.workspace.license.self-host-team.upload-license-file.success.title'
+            ](),
+          description:
+            t[
+              'com.affine.settings.workspace.license.self-host-team.upload-license-file.success.description'
+            ](),
+          confirmText: t['Confirm'](),
+          cancelButtonOptions: {
+            style: {
+              display: 'none',
+            },
+          },
+          confirmButtonOptions: {
+            variant: 'primary',
+          },
+        });
+      } catch (e) {
+        const err = UserFriendlyError.fromAny(e);
+        onOpenChange(false);
+        console.error(err);
+        openConfirmModal({
+          title:
+            t[
+              'com.affine.settings.workspace.license.self-host-team.upload-license-file.failed'
+            ](),
+          description: err.message,
+          confirmText: t['Confirm'](),
+          cancelButtonOptions: {
+            style: {
+              display: 'none',
+            },
+          },
+          confirmButtonOptions: {
+            variant: 'primary',
+          },
+        });
+      }
+      setIsInstalling(false);
+    },
+    [
+      licenseService,
+      onOpenChange,
+      openConfirmModal,
+      revalidate,
+      t,
+      workspace.id,
+    ]
+  );
+
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      onOpenChange(open);
+    },
+    [onOpenChange]
+  );
+
+  const copyWorkspaceId = useCallback(() => {
+    copyTextToClipboard(workspace.id)
+      .then(success => {
+        if (success) {
+          notify.success({ title: t['Copied link to clipboard']() });
+        }
+      })
+      .catch(err => {
+        console.error(err);
+      });
+  }, [t, workspace.id]);
+
+  useEffect(() => {
+    revalidate();
+  }, [revalidate]);
+
+  return (
+    <Modal
+      width={480}
+      open={open}
+      onOpenChange={handleOpenChange}
+      title={t[
+        'com.affine.settings.workspace.license.self-host-team.upload-license-file'
+      ]()}
+      description={t[
+        'com.affine.settings.workspace.license.self-host-team.upload-license-file.description'
+      ]()}
+    >
+      <div className={styles.activateModalContent}>
+        <div className={styles.tipsContainer}>
+          <div className={styles.tipsTitle}>
+            {t[
+              'com.affine.settings.workspace.license.self-host-team.upload-license-file.tips.title'
+            ]()}
+          </div>
+          <div className={styles.tipsContent}>
+            <Trans
+              i18nKey="com.affine.settings.workspace.license.self-host-team.upload-license-file.tips.content"
+              components={{
+                1: (
+                  <a
+                    href={`${BUILD_CONFIG.requestLicenseUrl}?usp=pp_url&entry.1000023=${workspace.id}`}
+                    target="_blank"
+                    rel="noreferrer"
+                    className={styles.textLink}
+                  />
+                ),
+              }}
+            />
+          </div>
+          <div className={styles.workspaceIdContainer}>
+            <div className={styles.workspaceIdLabel}>
+              {t[
+                'com.affine.settings.workspace.license.self-host-team.upload-license-file.tips.workspace-id'
+              ]()}
+            </div>
+            <Button
+              variant="secondary"
+              onClick={copyWorkspaceId}
+              className={styles.copyButton}
+            >
+              <span className={styles.copyButtonContent}>
+                <span className={styles.copyButtonText} title={workspace.id}>
+                  {workspace.id}
+                </span>
+                <CopyIcon className={styles.copyIcon} />
+              </span>
+            </Button>
+          </div>
+        </div>
+        <Upload accept=".lic, .license" fileChange={handleInstallLicense}>
+          <Button
+            variant="primary"
+            className={styles.uploadButton}
+            loading={isInstalling}
+            disabled={isInstalling}
+          >
+            <span className={styles.uploadButtonContent}>
+              <FileIcon className={styles.uploadButtonIcon} />
+              {t[
+                'com.affine.settings.workspace.license.self-host-team.upload-license-file.click-to-upload'
+              ]()}
+            </span>
+          </Button>
+        </Upload>
+        <div className={styles.footer}>
+          {t[
+            'com.affine.settings.workspace.license.self-host-team.upload-license-file.help'
+          ]()}
+        </div>
+      </div>
+    </Modal>
+  );
+};
--- a/packages/frontend/core/src/modules/cloud/services/selfhost-license.ts
+++ b/packages/frontend/core/src/modules/cloud/services/selfhost-license.ts
@@ -56,6 +56,10 @@ export class SelfhostLicenseService extends Service {
    return await this.store.deactivate(workspaceId);
  }

+  async installLicense(workspaceId: string, licenseFile: File) {
+    return await this.store.installLicense(workspaceId, licenseFile);
+  }
+
  clear() {
    this.license$.next(null);
    this.error$.next(null);
--- a/packages/frontend/core/src/modules/cloud/stores/selfhost-license.ts
+++ b/packages/frontend/core/src/modules/cloud/stores/selfhost-license.ts
@@ -2,6 +2,7 @@ import {
  activateLicenseMutation,
  deactivateLicenseMutation,
  getLicenseQuery,
+  installLicenseMutation,
 } from '@affine/graphql';
 import { Store } from '@toeverything/infra';

@@ -63,4 +64,26 @@ export class SelfhostLicenseStore extends Store {

    return data.deactivateLicense;
  }
+
+  async installLicense(
+    workspaceId: string,
+    license: File,
+    signal?: AbortSignal
+  ) {
+    if (!this.workspaceServerService.server) {
+      throw new Error('No Server');
+    }
+    const data = await this.workspaceServerService.server.gql({
+      query: installLicenseMutation,
+      variables: {
+        workspaceId: workspaceId,
+        license: license,
+      },
+      context: {
+        signal,
+      },
+    });
+
+    return data.installLicense;
+  }
 }
--- a/packages/frontend/core/src/modules/quota/views/quota-check.tsx
+++ b/packages/frontend/core/src/modules/quota/views/quota-check.tsx
@@ -37,17 +37,27 @@ export const QuotaCheck = ({
  const isOwner = profile?.isOwner;
  const isTeam = profile?.isTeam;
  const workspaceDialogService = useService(WorkspaceDialogService);
+  const dialog = useLiveData(workspaceDialogService.dialogs$);
  const t = useI18n();

  const onConfirm = useCallback(() => {
    if (!isOwner) {
      return;
    }
+    if (
+      dialog.some(
+        d =>
+          (d.type === 'setting' && d.props.activeTab === 'plans') ||
+          (d.type === 'setting' && d.props.activeTab === 'workspace:license')
+      )
+    ) {
+      return;
+    }
    workspaceDialogService.open('setting', {
      activeTab: 'plans',
      scrollAnchor: 'cloudPricingPlan',
    });
-  }, [workspaceDialogService, isOwner]);
+  }, [dialog, isOwner, workspaceDialogService]);

  useEffect(() => {
    workspaceQuota?.revalidate();