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/pages/auth/Invite.tsx

@@ -13,8 +13,12 @@ import { Loader } from '@/ui/feedback/loader/components/Loader';
 import { MainButton } from '@/ui/input/button/components/MainButton';
 import { useWorkspaceSwitching } from '@/ui/navigation/navigation-drawer/hooks/useWorkspaceSwitching';
 import { AnimatedEaseIn } from '@/ui/utilities/animation/components/AnimatedEaseIn';
-import { useAddUserToWorkspaceMutation } from '~/generated/graphql';
+import {
+  useAddUserToWorkspaceMutation,
+  useAddUserToWorkspaceByInviteTokenMutation,
+} from '~/generated/graphql';
 import { isDefined } from '~/utils/isDefined';
+import { useSearchParams } from 'react-router-dom';
 
 const StyledContentContainer = styled.div`
   margin-bottom: ${({ theme }) => theme.spacing(8)};
@@ -24,26 +28,40 @@ const StyledContentContainer = styled.div`
 export const Invite = () => {
   const { workspace: workspaceFromInviteHash, workspaceInviteHash } =
     useWorkspaceFromInviteHash();
+
   const { form } = useSignInUpForm();
   const currentWorkspace = useRecoilValue(currentWorkspaceState);
   const [addUserToWorkspace] = useAddUserToWorkspaceMutation();
+  const [addUserToWorkspaceByInviteToken] =
+    useAddUserToWorkspaceByInviteTokenMutation();
   const { switchWorkspace } = useWorkspaceSwitching();
+  const [searchParams] = useSearchParams();
+  const workspaceInviteToken = searchParams.get('inviteToken');
 
   const title = useMemo(() => {
     return `Join ${workspaceFromInviteHash?.displayName ?? ''} team`;
   }, [workspaceFromInviteHash?.displayName]);
 
   const handleUserJoinWorkspace = async () => {
-    if (
-      !(isDefined(workspaceInviteHash) && isDefined(workspaceFromInviteHash))
+    if (isDefined(workspaceInviteToken) && isDefined(workspaceFromInviteHash)) {
+      await addUserToWorkspaceByInviteToken({
+        variables: {
+          inviteToken: workspaceInviteToken,
+        },
+      });
+    } else if (
+      isDefined(workspaceInviteHash) &&
+      isDefined(workspaceFromInviteHash)
     ) {
+      await addUserToWorkspace({
+        variables: {
+          inviteHash: workspaceInviteHash,
+        },
+      });
+    } else {
       return;
     }
-    await addUserToWorkspace({
-      variables: {
-        inviteHash: workspaceInviteHash,
-      },
-    });
+
     await switchWorkspace(workspaceFromInviteHash.id);
   };