From 14caaf298ae02ce6304a04d9d0717c97c9e203e0 Mon Sep 17 00:00:00 2001
From: Emilien Chauvet <emilien.chauvet.enpc@gmail.com>
Date: Tue, 11 Jul 2023 13:35:43 -0700
Subject: [PATCH] Feat/add invite link (#603)

* Add UI for invite link

* Use invite link

* Isolate link component

* Improve UX
---
 front/src/generated/graphql.tsx               |  3 +-
 front/src/modules/users/queries/index.ts      |  1 +
 .../components/WorkspaceInviteLink.tsx        | 49 +++++++++++++++++++
 .../settings/SettingsWorkspaceMembers.tsx     | 17 ++++++-
 4 files changed, 68 insertions(+), 2 deletions(-)
 create mode 100644 front/src/modules/workspace/components/WorkspaceInviteLink.tsx

diff --git a/front/src/generated/graphql.tsx b/front/src/generated/graphql.tsx
index fc6a5fbcb..2a3f1d5fe 100644
--- a/front/src/generated/graphql.tsx
+++ b/front/src/generated/graphql.tsx
@@ -3397,7 +3397,7 @@ export type SearchCompanyQuery = { __typename?: 'Query', searchResults: Array<{
 export type GetCurrentUserQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type GetCurrentUserQuery = { __typename?: 'Query', currentUser: { __typename?: 'User', id: string, email: string, displayName: string, firstName?: string | null, lastName?: string | null, avatarUrl?: string | null, workspaceMember?: { __typename?: 'WorkspaceMember', id: string, workspace: { __typename?: 'Workspace', id: string, domainName?: string | null, displayName?: string | null, logo?: string | null } } | null } };
+export type GetCurrentUserQuery = { __typename?: 'Query', currentUser: { __typename?: 'User', id: string, email: string, displayName: string, firstName?: string | null, lastName?: string | null, avatarUrl?: string | null, workspaceMember?: { __typename?: 'WorkspaceMember', id: string, workspace: { __typename?: 'Workspace', id: string, domainName?: string | null, displayName?: string | null, logo?: string | null, inviteHash?: string | null } } | null } };
 
 export type GetUsersQueryVariables = Exact<{ [key: string]: never; }>;
 
@@ -5051,6 +5051,7 @@ export const GetCurrentUserDocument = gql`
         domainName
         displayName
         logo
+        inviteHash
       }
     }
   }
diff --git a/front/src/modules/users/queries/index.ts b/front/src/modules/users/queries/index.ts
index d0d8e2c85..a237ff582 100644
--- a/front/src/modules/users/queries/index.ts
+++ b/front/src/modules/users/queries/index.ts
@@ -17,6 +17,7 @@ export const GET_CURRENT_USER = gql`
           domainName
           displayName
           logo
+          inviteHash
         }
       }
     }
diff --git a/front/src/modules/workspace/components/WorkspaceInviteLink.tsx b/front/src/modules/workspace/components/WorkspaceInviteLink.tsx
new file mode 100644
index 000000000..dc094b354
--- /dev/null
+++ b/front/src/modules/workspace/components/WorkspaceInviteLink.tsx
@@ -0,0 +1,49 @@
+import { useState } from 'react';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { Button } from '@/ui/components/buttons/Button';
+import { TextInput } from '@/ui/components/inputs/TextInput';
+import { IconCheck, IconLink } from '@/ui/icons';
+
+const StyledContainer = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+`;
+
+const StyledLinkContainer = styled.div`
+  flex: 1;
+  margin-right: ${({ theme }) => theme.spacing(2)};
+`;
+
+type OwnProps = {
+  inviteLink: string;
+};
+
+export function WorkspaceInviteLink({ inviteLink }: OwnProps) {
+  const theme = useTheme();
+  const [isCopied, setIsCopied] = useState(false);
+  return (
+    <StyledContainer>
+      <StyledLinkContainer>
+        <TextInput value={inviteLink} disabled fullWidth />
+      </StyledLinkContainer>
+      <Button
+        icon={
+          isCopied ? (
+            <IconCheck size={theme.icon.size.md} />
+          ) : (
+            <IconLink size={theme.icon.size.md} />
+          )
+        }
+        variant="primary"
+        title={isCopied ? 'Copied' : 'Copy link'}
+        onClick={() => {
+          setIsCopied(true);
+          navigator.clipboard.writeText(inviteLink);
+        }}
+      />
+    </StyledContainer>
+  );
+}
diff --git a/front/src/pages/settings/SettingsWorkspaceMembers.tsx b/front/src/pages/settings/SettingsWorkspaceMembers.tsx
index b8ee1e349..f23a8080c 100644
--- a/front/src/pages/settings/SettingsWorkspaceMembers.tsx
+++ b/front/src/pages/settings/SettingsWorkspaceMembers.tsx
@@ -1,3 +1,4 @@
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
 
@@ -7,6 +8,7 @@ import { MainSectionTitle } from '@/ui/components/section-titles/MainSectionTitl
 import { SubSectionTitle } from '@/ui/components/section-titles/SubSectionTitle';
 import { IconTrash } from '@/ui/icons';
 import { NoTopBarContainer } from '@/ui/layout/containers/NoTopBarContainer';
+import { WorkspaceInviteLink } from '@/workspace/components/WorkspaceInviteLink';
 import { WorkspaceMemberCard } from '@/workspace/components/WorkspaceMemberCard';
 import {
   useGetWorkspaceMembersQuery,
@@ -32,6 +34,8 @@ const ButtonContainer = styled.div`
 
 export function SettingsWorkspaceMembers() {
   const [currentUser] = useRecoilState(currentUserState);
+  const workspace = currentUser?.workspaceMember?.workspace;
+  const theme = useTheme();
 
   const { data } = useGetWorkspaceMembersQuery();
 
@@ -74,6 +78,17 @@ export function SettingsWorkspaceMembers() {
     <NoTopBarContainer>
       <StyledContainer>
         <MainSectionTitle>Members</MainSectionTitle>
+        {workspace?.inviteHash && (
+          <>
+            <SubSectionTitle
+              title="Invite"
+              description="Send an invitation to use Twenty"
+            />
+            <WorkspaceInviteLink
+              inviteLink={`${window.location.origin}/auth/invite/${workspace?.inviteHash}`}
+            />
+          </>
+        )}
         <SubSectionTitle
           title="Members"
           description="Manage the members of your space here"
@@ -89,7 +104,7 @@ export function SettingsWorkspaceMembers() {
                     onClick={() => handleRemoveWorkspaceMember(member.user.id)}
                     variant="tertiary"
                     size="small"
-                    icon={<IconTrash size={16} />}
+                    icon={<IconTrash size={theme.icon.size.md} />}
                   />
                 </ButtonContainer>
               )