feat(core): show expiration time in link invitation dialog (#11610)

close BS-3095

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

@@ -111,12 +111,29 @@ export const LinkInvite = ({
     });
   }, [revokeInvitationLink]);
 
+  const expireTime = useMemo(() => {
+    return t['com.affine.payment.member.team.invite.expire-at']({
+      expireTime: invitationLink?.expireTime
+        ? new Date(invitationLink.expireTime).toLocaleString()
+        : '',
+    });
+  }, [invitationLink, t]);
+
   return (
     <>
       <div className={styles.invitationLinkContainer}>
         <div className={styles.modalSubTitle}>
           {t['com.affine.payment.member.team.invite.link-expiration']()}
         </div>
+        {invitationLink ? (
+          <Input
+            value={expireTime}
+            disabled
+            style={{
+              backgroundColor: cssVarV2('input/background'),
+            }}
+          />
+        ) : (
           <Menu
             items={items}
             contentOptions={{
@@ -129,6 +146,7 @@ export const LinkInvite = ({
               {currentSelectedLabel}
             </MenuTrigger>
           </Menu>
+        )}
       </div>
       <div className={styles.invitationLinkContainer}>
         <div className={styles.modalSubTitle}>

packages/frontend/i18n/src/i18n.gen.ts

@@ -3952,6 +3952,12 @@ export function useAFFiNEI18N(): {
     ["com.affine.payment.member.team.invite.expiration-date"](options: {
         readonly number: string;
     }): string;
+    /**
+      * `To expire at: {{expireTime}}`
+      */
+    ["com.affine.payment.member.team.invite.expire-at"](options: {
+        readonly expireTime: string;
+    }): string;
     /**
       * `Invitation link`
       */

packages/frontend/i18n/src/resources/en.json

@@ -981,6 +981,7 @@
   "com.affine.payment.member.team.invite.send-invites": "Send Invites",
   "com.affine.payment.member.team.invite.link-expiration": "Link expiration",
   "com.affine.payment.member.team.invite.expiration-date": "{{number}} days",
+  "com.affine.payment.member.team.invite.expire-at": "To expire at: {{expireTime}}",
   "com.affine.payment.member.team.invite.invitation-link": "Invitation link",
   "com.affine.payment.member.team.invite.invitation-link.description": "Generate a link to invite members to your workspace",
   "com.affine.payment.member.team.invite.generate": "Generate",