feat(console): invite members dialog

packages/console/src/pages/TenantSettings/TenantMembers/EditMemberModal/index.tsx

@@ -3,15 +3,14 @@ import { getUserDisplayName } from '@logto/shared/universal';
 import { useContext, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import ReactModal from 'react-modal';
-import { z } from 'zod';
 
 import { useAuthedCloudApi } from '@/cloud/hooks/use-cloud-api';
 import { type TenantMemberResponse } from '@/cloud/types/router';
 import { TenantsContext } from '@/contexts/TenantsProvider';
 import Button from '@/ds-components/Button';
 import FormField from '@/ds-components/FormField';
 import ModalLayout from '@/ds-components/ModalLayout';
-import Select from '@/ds-components/Select';
+import Select, { type Option } from '@/ds-components/Select';
 import * as modalStyles from '@/scss/modal.module.scss';
 
 type Props = {
@@ -28,7 +27,7 @@ function EditMemberModal({ user, isOpen, onClose }: Props) {
   const [role, setRole] = useState(TenantRole.Member);
   const cloudApi = useAuthedCloudApi();
 
-  const roleOptions = useMemo(
+  const roleOptions: Array<Option<TenantRole>> = useMemo(
     () => [
       { value: TenantRole.Admin, title: t('admin') },
       { value: TenantRole.Member, title: t('member') },
@@ -74,8 +73,9 @@ function EditMemberModal({ user, isOpen, onClose }: Props) {
             options={roleOptions}
             value={role}
             onChange={(value) => {
-              const guardResult = z.nativeEnum(TenantRole).safeParse(value);
-              setRole(guardResult.success ? guardResult.data : TenantRole.Member);
+              if (value) {
+                setRole(value);
+              }
             }}
           />
         </FormField>

packages/console/src/pages/TenantSettings/TenantMembers/Invitations/index.tsx

@@ -1,22 +1,31 @@
 import { OrganizationInvitationStatus } from '@logto/schemas';
 import { format } from 'date-fns';
 import { useContext, useState } from 'react';
+import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
 import useSWR from 'swr';
 
+import Delete from '@/assets/icons/delete.svg';
+import Invite from '@/assets/icons/invitation.svg';
+import More from '@/assets/icons/more.svg';
 import Plus from '@/assets/icons/plus.svg';
+import Redo from '@/assets/icons/redo.svg';
 import UsersEmptyDark from '@/assets/images/users-empty-dark.svg';
 import UsersEmpty from '@/assets/images/users-empty.svg';
 import { useAuthedCloudApi } from '@/cloud/hooks/use-cloud-api';
 import { type TenantInvitationResponse } from '@/cloud/types/router';
-import ActionsButton from '@/components/ActionsButton';
 import { RoleOption } from '@/components/OrganizationRolesSelect';
 import { TenantsContext } from '@/contexts/TenantsProvider';
+import ActionMenu, { ActionMenuItem } from '@/ds-components/ActionMenu';
 import Button from '@/ds-components/Button';
+import DynamicT from '@/ds-components/DynamicT';
 import Table from '@/ds-components/Table';
 import TablePlaceholder from '@/ds-components/Table/TablePlaceholder';
 import Tag, { type Props as TagProps } from '@/ds-components/Tag';
 import { type RequestError } from '@/hooks/use-api';
+import { useConfirmModal } from '@/hooks/use-confirm-modal';
+
+import InviteMemberModal from '../InviteMemberModal';
 
 const convertInvitationStatusToTagStatus = (
   status: OrganizationInvitationStatus
@@ -49,6 +58,42 @@ function Invitations() {
   );
 
   const [showInviteModal, setShowInviteModal] = useState(false);
+  const { show } = useConfirmModal();
+
+  const handleRevoke = async (invitationId: string) => {
+    const [result] = await show({
+      ModalContent: t('revoke_invitation_confirm'),
+      confirmButtonText: 'general.confirm',
+    });
+
+    if (!result) {
+      return;
+    }
+
+    await cloudApi.patch(`/api/tenants/:tenantId/invitations/:invitationId/status`, {
+      params: { tenantId: currentTenantId, invitationId },
+      body: { status: OrganizationInvitationStatus.Revoked },
+    });
+    void mutate();
+    toast.success(t('messages.invitation_revoked'));
+  };
+
+  const handleDelete = async (invitationId: string) => {
+    const [result] = await show({
+      ModalContent: t('delete_user_confirm'),
+      confirmButtonText: 'general.delete',
+    });
+
+    if (!result) {
+      return;
+    }
+
+    await cloudApi.delete(`/api/tenants/:tenantId/invitations/:invitationId`, {
+      params: { tenantId: currentTenantId, invitationId },
+    });
+    void mutate();
+    toast.success(t('messages.invitation_deleted'));
+  };
 
   return (
     <>
@@ -124,29 +169,65 @@ function Invitations() {
           {
             dataIndex: 'actions',
             title: null,
-            render: (invitation) => (
-              <ActionsButton
-                deleteConfirmation="tenant_members.delete_user_confirm"
-                fieldName="tenant_members.user"
-                textOverrides={{
-                  edit: 'tenant_members.menu_options.resend_invite',
-                  delete: 'tenant_members.menu_options.revoke',
-                  deleteConfirmation: 'general.remove',
-                }}
-                onDelete={async () => {
-                  await cloudApi.delete(`/api/tenants/:tenantId/invitations/:invitationId`, {
-                    params: { tenantId: currentTenantId, invitationId: invitation.id },
-                  });
-                  void mutate();
-                }}
-              />
+            render: ({ id, status }) => (
+              <ActionMenu
+                icon={<More />}
+                iconSize="small"
+                title={<DynamicT forKey="general.more_options" />}
+              >
+                {status !== OrganizationInvitationStatus.Accepted && (
+                  <ActionMenuItem
+                    icon={<Invite />}
+                    onClick={async () => {
+                      await cloudApi.post(
+                        '/api/tenants/:tenantId/invitations/:invitationId/message',
+                        {
+                          params: { tenantId: currentTenantId, invitationId: id },
+                        }
+                      );
+                      toast.success(t('messages.invitation_sent'));
+                    }}
+                  >
+                    {t('menu_options.resend_invite')}
+                  </ActionMenuItem>
+                )}
+                {status === OrganizationInvitationStatus.Pending && (
+                  <ActionMenuItem
+                    icon={<Redo />}
+                    type="danger"
+                    onClick={() => {
+                      void handleRevoke(id);
+                    }}
+                  >
+                    {t('menu_options.revoke')}
+                  </ActionMenuItem>
+                )}
+                {status !== OrganizationInvitationStatus.Pending && (
+                  <ActionMenuItem
+                    icon={<Delete />}
+                    type="danger"
+                    onClick={() => {
+                      void handleDelete(id);
+                    }}
+                  >
+                    {t('menu_options.delete_invitation_record')}
+                  </ActionMenuItem>
+                )}
+              </ActionMenu>
             ),
           },
         ]}
         rowIndexKey="id"
       />
-      {/* TODO: Implemented in the follow-up PR */}
-      {/* {showInviteModal && <InviteModal isOpen={showInviteModal} />} */}
+      {showInviteModal && (
+        <InviteMemberModal
+          isOpen={showInviteModal}
+          onClose={() => {
+            setShowInviteModal(false);
+            void mutate();
+          }}
+        />
+      )}
     </>
   );
 }

packages/console/src/pages/TenantSettings/TenantMembers/InviteEmailsInput/index.module.scss

@@ -0,0 +1,88 @@
+@use '@/scss/underscore' as _;
+
+.input {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 96px;
+  padding: 0 _.unit(2) 0 _.unit(3);
+  background: var(--color-layer-1);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  outline: 3px solid transparent;
+  transition-property: outline, border;
+  transition-timing-function: ease-in-out;
+  transition-duration: 0.2s;
+  font: var(--font-body-2);
+  cursor: pointer;
+  position: relative;
+
+  &.multiple {
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    gap: _.unit(2);
+    padding: _.unit(1.5) _.unit(3);
+    cursor: text;
+
+    .tag {
+      cursor: auto;
+      display: flex;
+      align-items: center;
+      gap: _.unit(1);
+      position: relative;
+
+      &.focused::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: var(--color-overlay-default-focused);
+      }
+
+      &.info {
+        background: var(--color-error-container);
+      }
+    }
+
+    .close {
+      width: 16px;
+      height: 16px;
+    }
+
+    .delete {
+      width: 20px;
+      height: 20px;
+      margin-right: _.unit(-0.5);
+    }
+
+    input {
+      color: var(--color-text);
+      font: var(--font-body-2);
+      background: transparent;
+      flex-grow: 1;
+      padding: _.unit(0.5);
+
+      &::placeholder {
+        color: var(--color-placeholder);
+      }
+    }
+  }
+
+  &:focus-within {
+    border-color: var(--color-primary);
+    outline-color: var(--color-focused-variant);
+  }
+
+  &.error {
+    border-color: var(--color-error);
+
+    &:focus-within {
+      outline-color: var(--color-danger-focused);
+    }
+  }
+}
+
+.errorMessage {
+  font: var(--font-body-2);
+  color: var(--color-error);
+  margin-top: _.unit(1);
+}