feat(invitation): Improve invitation flow - Milestone 2 (#6804)

From PR: #6626 
Resolves #6763 
Resolves #6055 
Resolves #6782

## GTK
I retain the 'Invite by link' feature to prevent any breaking changes.
We could make the invitation by link optional through an admin setting,
allowing users to rely solely on personal invitations.

## Todo
- [x] Add an expiration date to an invitation
- [x] Allow to renew an invitation to postpone the expiration date
- [x] Refresh the UI
- [x] Add the new personal token in the link sent to new user
- [x] Display an error if a user tries to use an expired invitation
- [x] Display an error if a user uses another mail than the one in the
invitation

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/workspace-invitation/graphql/mutations/deleteWorkspaceInvitation.ts

@@ -0,0 +1,7 @@
+import { gql } from '@apollo/client';
+
+export const DELETE_WORKSPACE_INVITATION = gql`
+  mutation DeleteWorkspaceInvitation($appTokenId: String!) {
+    deleteWorkspaceInvitation(appTokenId: $appTokenId)
+  }
+`;

packages/twenty-front/src/modules/workspace-invitation/graphql/mutations/resendWorkspaceInvitation.ts

@@ -0,0 +1,17 @@
+import { gql } from '@apollo/client';
+
+export const RESEND_WORKSPACE_INVITATION = gql`
+  mutation ResendWorkspaceInvitation($appTokenId: String!) {
+    resendWorkspaceInvitation(appTokenId: $appTokenId) {
+      success
+      errors
+      result {
+        ... on WorkspaceInvitation {
+          id
+          email
+          expiresAt
+        }
+      }
+    }
+  }
+`;

packages/twenty-front/src/modules/workspace-invitation/graphql/mutations/sendInvitations.ts

@@ -0,0 +1,17 @@
+import { gql } from '@apollo/client';
+
+export const SEND_INVITATIONS = gql`
+  mutation SendInvitations($emails: [String!]!) {
+    sendInvitations(emails: $emails) {
+      success
+      errors
+      result {
+        ... on WorkspaceInvitation {
+          id
+          email
+          expiresAt
+        }
+      }
+    }
+  }
+`;

packages/twenty-front/src/modules/workspace-invitation/graphql/queries/getWorkspaceInvitations.ts

@@ -0,0 +1,11 @@
+import { gql } from '@apollo/client';
+
+export const GET_WORKSPACE_INVITATIONS = gql`
+  query GetWorkspaceInvitations {
+    findWorkspaceInvitations {
+      id
+      email
+      expiresAt
+    }
+  }
+`;

packages/twenty-front/src/modules/workspace-invitation/hooks/useCreateWorkspaceInvitation.ts

@@ -0,0 +1,26 @@
+import { useSetRecoilState } from 'recoil';
+import { useSendInvitationsMutation } from '~/generated/graphql';
+import { SendInvitationsMutationVariables } from '../../../generated/graphql';
+import { workspaceInvitationsState } from '../states/workspaceInvitationsStates';
+
+export const useCreateWorkspaceInvitation = () => {
+  const [sendInvitationsMutation] = useSendInvitationsMutation();
+
+  const setWorkspaceInvitations = useSetRecoilState(workspaceInvitationsState);
+
+  const sendInvitation = async (emails: SendInvitationsMutationVariables) => {
+    return await sendInvitationsMutation({
+      variables: emails,
+      onCompleted: (data) => {
+        setWorkspaceInvitations((workspaceInvitations) => [
+          ...workspaceInvitations,
+          ...data.sendInvitations.result,
+        ]);
+      },
+    });
+  };
+
+  return {
+    sendInvitation,
+  };
+};

packages/twenty-front/src/modules/workspace-invitation/hooks/useDeleteWorkspaceInvitation.ts

@@ -0,0 +1,34 @@
+import { useSetRecoilState } from 'recoil';
+import {
+  DeleteWorkspaceInvitationMutationVariables,
+  useDeleteWorkspaceInvitationMutation,
+} from '~/generated/graphql';
+import { workspaceInvitationsState } from '../states/workspaceInvitationsStates';
+
+export const useDeleteWorkspaceInvitation = () => {
+  const [deleteWorkspaceInvitationMutation] =
+    useDeleteWorkspaceInvitationMutation();
+
+  const setWorkspaceInvitations = useSetRecoilState(workspaceInvitationsState);
+
+  const deleteWorkspaceInvitation = async ({
+    appTokenId,
+  }: DeleteWorkspaceInvitationMutationVariables) => {
+    return await deleteWorkspaceInvitationMutation({
+      variables: {
+        appTokenId,
+      },
+      onCompleted: () => {
+        setWorkspaceInvitations((workspaceInvitations) =>
+          workspaceInvitations.filter(
+            (workspaceInvitation) => workspaceInvitation.id !== appTokenId,
+          ),
+        );
+      },
+    });
+  };
+
+  return {
+    deleteWorkspaceInvitation,
+  };
+};

packages/twenty-front/src/modules/workspace-invitation/hooks/useResendWorkspaceInvitation.ts

@@ -0,0 +1,35 @@
+import { useSetRecoilState } from 'recoil';
+import {
+  ResendWorkspaceInvitationMutationVariables,
+  useResendWorkspaceInvitationMutation,
+} from '~/generated/graphql';
+import { workspaceInvitationsState } from '../states/workspaceInvitationsStates';
+
+export const useResendWorkspaceInvitation = () => {
+  const [resendWorkspaceInvitationMutation] =
+    useResendWorkspaceInvitationMutation();
+
+  const setWorkspaceInvitations = useSetRecoilState(workspaceInvitationsState);
+
+  const resendInvitation = async ({
+    appTokenId,
+  }: ResendWorkspaceInvitationMutationVariables) => {
+    return await resendWorkspaceInvitationMutation({
+      variables: {
+        appTokenId,
+      },
+      onCompleted: (data) => {
+        setWorkspaceInvitations((workspaceInvitations) => [
+          ...data.resendWorkspaceInvitation.result,
+          ...workspaceInvitations.filter(
+            (workspaceInvitation) => workspaceInvitation.id !== appTokenId,
+          ),
+        ]);
+      },
+    });
+  };
+
+  return {
+    resendInvitation,
+  };
+};

packages/twenty-front/src/modules/workspace-invitation/states/workspaceInvitationsStates.ts

@@ -0,0 +1,9 @@
+import { createState } from 'twenty-ui';
+import { WorkspaceInvitation } from '@/workspace-member/types/WorkspaceMember';
+
+export const workspaceInvitationsState = createState<
+  Omit<WorkspaceInvitation, '__typename'>[]
+>({
+  key: 'workspaceInvitationsState',
+  defaultValue: [],
+});