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,24 +111,42 @@ 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>
-        <Menu
-          items={items}
-          contentOptions={{
-            style: {
-              width: 'var(--radix-dropdown-menu-trigger-width)',
-            },
-          }}
-        >
-          <MenuTrigger style={{ width: '100%' }}>
-            {currentSelectedLabel}
-          </MenuTrigger>
-        </Menu>
+        {invitationLink ? (
+          <Input
+            value={expireTime}
+            disabled
+            style={{
+              backgroundColor: cssVarV2('input/background'),
+            }}
+          />
+        ) : (
+          <Menu
+            items={items}
+            contentOptions={{
+              style: {
+                width: 'var(--radix-dropdown-menu-trigger-width)',
+              },
+            }}
+          >
+            <MenuTrigger style={{ width: '100%' }}>
+              {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",