feat(core): improve invite link (#9111)

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

@@ -1,5 +1,8 @@
 import { emailRegex } from '@affine/component/auth-components';
-import type { WorkspaceInviteLinkExpireTime } from '@affine/graphql';
+import type {
+  InviteLink,
+  WorkspaceInviteLinkExpireTime,
+} from '@affine/graphql';
 import { useI18n } from '@affine/i18n';
 import { useCallback, useEffect, useState } from 'react';
 
@@ -18,6 +21,7 @@ export interface InviteTeamMemberModalProps {
   ) => Promise<string>;
   onRevokeInviteLink: () => Promise<boolean>;
   importCSV: React.ReactNode;
+  invitationLink: InviteLink | null;
 }
 
 const parseEmailString = (emailString: string): string[] => {
@@ -36,6 +40,7 @@ export const InviteTeamMemberModal = ({
   onGenerateInviteLink,
   onRevokeInviteLink,
   importCSV,
+  invitationLink,
 }: InviteTeamMemberModalProps) => {
   const t = useI18n();
   const [inviteEmails, setInviteEmails] = useState('');
@@ -95,6 +100,7 @@ export const InviteTeamMemberModal = ({
       childrenContentClassName={styles.contentStyle}
     >
       <ModalContent
+        invitationLink={invitationLink}
         inviteEmail={inviteEmails}
         setInviteEmail={setInviteEmails}
         handleConfirm={handleConfirm}

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

@@ -1,4 +1,7 @@
-import { WorkspaceInviteLinkExpireTime } from '@affine/graphql';
+import {
+  type InviteLink,
+  WorkspaceInviteLinkExpireTime,
+} from '@affine/graphql';
 import { useI18n } from '@affine/i18n';
 import { CloseIcon } from '@blocksuite/icons/rc';
 import { cssVar } from '@toeverything/theme';
@@ -39,10 +42,12 @@ const getMenuItems = (t: ReturnType<typeof useI18n>) => [
 ];
 
 export const LinkInvite = ({
+  invitationLink,
   copyTextToClipboard,
   generateInvitationLink,
   revokeInvitationLink,
 }: {
+  invitationLink: InviteLink | null;
   generateInvitationLink: (
     expireTime: WorkspaceInviteLinkExpireTime
   ) => Promise<string>;
@@ -53,7 +58,6 @@ export const LinkInvite = ({
   const [selectedValue, setSelectedValue] = useState(
     WorkspaceInviteLinkExpireTime.OneWeek
   );
-  const [invitationLink, setInvitationLink] = useState('');
   const menuItems = getMenuItems(t);
   const items = useMemo(() => {
     return menuItems.map(item => (
@@ -69,21 +73,20 @@ export const LinkInvite = ({
   );
 
   const onGenerate = useCallback(() => {
-    generateInvitationLink(selectedValue)
-      .then(link => {
-        setInvitationLink(link);
-      })
-      .catch(err => {
-        console.error('Failed to generate invitation link: ', err);
-        notify.error({
-          title: 'Failed to generate invitation link',
-          message: err.message,
-        });
+    generateInvitationLink(selectedValue).catch(err => {
+      console.error('Failed to generate invitation link: ', err);
+      notify.error({
+        title: 'Failed to generate invitation link',
+        message: err.message,
       });
+    });
   }, [generateInvitationLink, selectedValue]);
 
   const onCopy = useCallback(() => {
-    copyTextToClipboard(invitationLink)
+    if (!invitationLink) {
+      return;
+    }
+    copyTextToClipboard(invitationLink.link)
       .then(() =>
         notify.success({
           title: t['Copied link to clipboard'](),
@@ -99,17 +102,13 @@ export const LinkInvite = ({
   }, [copyTextToClipboard, invitationLink, t]);
 
   const onReset = useCallback(() => {
-    revokeInvitationLink()
-      .then(() => {
-        setInvitationLink('');
-      })
-      .catch(err => {
-        console.error('Failed to revoke invitation link: ', err);
-        notify.error({
-          title: 'Failed to revoke invitation link',
-          message: err.message,
-        });
+    revokeInvitationLink().catch(err => {
+      console.error('Failed to revoke invitation link: ', err);
+      notify.error({
+        title: 'Failed to revoke invitation link',
+        message: err.message,
       });
+    });
   }, [revokeInvitationLink]);
 
   return (
@@ -136,7 +135,7 @@ export const LinkInvite = ({
         <Input
           value={
             invitationLink
-              ? invitationLink
+              ? invitationLink.link
               : 'https://your-app.com/invite/xxxxxxxx'
           }
           inputMode="none"

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

@@ -1,4 +1,7 @@
-import type { WorkspaceInviteLinkExpireTime } from '@affine/graphql';
+import type {
+  InviteLink,
+  WorkspaceInviteLinkExpireTime,
+} from '@affine/graphql';
 import { useI18n } from '@affine/i18n';
 import { EmailIcon, LinkIcon } from '@blocksuite/icons/rc';
 
@@ -20,9 +23,11 @@ export const ModalContent = ({
   onGenerateInviteLink,
   onRevokeInviteLink,
   importCSV,
+  invitationLink,
 }: {
   inviteEmail: string;
   importCSV: React.ReactNode;
+  invitationLink: InviteLink | null;
   setInviteEmail: (value: string) => void;
   inviteMethod: InviteMethodType;
   onInviteMethodChange: (value: InviteMethodType) => void;
@@ -78,6 +83,7 @@ export const ModalContent = ({
         />
       ) : (
         <LinkInvite
+          invitationLink={invitationLink}
           copyTextToClipboard={copyTextToClipboard}
           generateInvitationLink={onGenerateInviteLink}
           revokeInvitationLink={onRevokeInviteLink}