fix: workspace invitation status fixes (#3279)

web/components/workspace/settings/members-list-item.tsx

@@ -28,7 +28,8 @@ type Props = {
     display_name: string;
     role: TUserWorkspaceRole;
     status: boolean;
-    member: boolean;
+    is_member: boolean;
+    responded_at: string | null;
     accountCreated: boolean;
   };
 };
@@ -102,9 +103,8 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
   };
 
   const handleRemove = async () => {
-    if (member.member) {
+    if (member.is_member) {
       const memberId = member.memberId;
-
       if (memberId === currentUser?.id) await handleLeaveWorkspace();
       else await handleRemoveMember();
     } else await handleRemoveInvitation();
@@ -154,7 +154,7 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
             </Link>
           )}
           <div>
-            {member.member ? (
+            {member.is_member ? (
               <Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
                 <span className="text-sm font-medium">
                   {member.first_name} {member.last_name}
@@ -175,16 +175,21 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
           </div>
         </div>
         <div className="flex items-center gap-2 text-xs">
-          {!member?.status && (
+          {!member?.status && !member.responded_at && (
             <div className="flex items-center justify-center rounded bg-yellow-500/20 px-2.5 py-1 text-center text-xs font-medium text-yellow-500">
               <p>Pending</p>
             </div>
           )}
-          {member?.status && !member?.accountCreated && (
+          {member?.status && !member.is_member && (
             <div className="flex items-center justify-center rounded bg-blue-500/20 px-2.5 py-1 text-center text-xs font-medium text-blue-500">
               <p>Account not created</p>
             </div>
           )}
+          {!member?.status && member.responded_at && (
+            <div className="flex items-center justify-center rounded bg-red-500/20 px-2.5 py-1 text-center text-xs font-medium text-red-500">
+              <p>Rejected</p>
+            </div>
+          )}
           <CustomSelect
             customButton={
               <div className="item-center flex gap-1 rounded px-2 py-0.5">

web/pages/workspace-invitations/index.tsx

@@ -52,6 +52,19 @@ const WorkspaceInvitationPage: NextPageWithLayout = () => {
       .catch((err) => console.error(err));
   };
 
+  const handleReject = () => {
+    if (!invitationDetail) return;
+    workspaceService
+      .joinWorkspace(invitationDetail.workspace.slug, invitationDetail.id, {
+        accepted: false,
+        email: invitationDetail.email,
+      })
+      .then(() => {
+        router.push("/");
+      })
+      .catch((err) => console.error(err));
+  };
+
   return (
     <div className="flex h-full w-full flex-col items-center justify-center px-3">
       {invitationDetail ? (
@@ -77,13 +90,7 @@ const WorkspaceInvitationPage: NextPageWithLayout = () => {
                   description="Your workspace is where you'll create projects, collaborate on your issues, and organize different streams of work in your Plane account."
                 >
                   <EmptySpaceItem Icon={Check} title="Accept" action={handleAccept} />
-                  <EmptySpaceItem
-                    Icon={X}
-                    title="Ignore"
-                    action={() => {
-                      router.push("/");
-                    }}
-                  />
+                  <EmptySpaceItem Icon={X} title="Ignore" action={handleReject} />
                 </EmptySpace>
               )}
             </>

web/store/workspace/workspace-member.store.ts

@@ -114,8 +114,8 @@ export class WorkspaceMemberStore implements IWorkspaceMemberStore {
         display_name: item.email,
         role: item.role,
         status: item.accepted,
-        member: false,
-        accountCreated: item.accepted,
+        is_member: false,
+        responded_at: item.responded_at,
       })) || []),
       ...(this.workspaceMembers?.map((item) => ({
         id: item.id,
@@ -127,8 +127,8 @@ export class WorkspaceMemberStore implements IWorkspaceMemberStore {
         display_name: item.member?.display_name,
         role: item.role,
         status: true,
-        member: true,
-        accountCreated: true,
+        is_member: true,
+        responded_at: "accepted",
       })) || []),
     ];
   }