admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Wrap up Front chat (#1085)

Browse Source 
* Wrap up Front chat

* Wrap up Front chat
This commit is contained in:
Charles Bochet
2023-08-04 19:22:54 -07:00
committed by GitHub
parent 57c465176a
commit 6008789a17
19 changed files with 91 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
front/src/generated/graphql.tsx
View File

@ -548,7 +548,7 @@ export type ClientConfig = {
authProviders: AuthProviders;
debugMode: Scalars['Boolean'];
signInPrefilled: Scalars['Boolean'];
supportChat: SupportChat;
support: Support;
telemetry: Telemetry;
};
@ -1907,10 +1907,10 @@ export type StringNullableFilter = {
startsWith?: InputMaybe<Scalars['String']>;
};
export type SupportChat = {
__typename?: 'SupportChat';
export type Support = {
__typename?: 'Support';
supportDriver: Scalars['String'];
supportFrontendKey?: Maybe<Scalars['String']>;
supportFrontChatId?: Maybe<Scalars['String']>;
};
export type Telemetry = {
@ -1942,7 +1942,7 @@ export type User = {
phoneNumber?: Maybe<Scalars['String']>;
settings: UserSettings;
settingsId: Scalars['String'];
supportHMACKey?: Maybe<Scalars['String']>;
supportUserHash: Scalars['String'];
updatedAt: Scalars['DateTime'];
workspaceMember?: Maybe<WorkspaceMember>;
};
@ -2437,7 +2437,7 @@ export type VerifyMutationVariables = Exact<{
}>;
export type VerifyMutation = { __typename?: 'Mutation', verify: { __typename?: 'Verify', user: { __typename?: 'User', id: string, email: string, displayName: string, firstName?: string | null, lastName?: string | null, canImpersonate: boolean, workspaceMember?: { __typename?: 'WorkspaceMember', id: string, allowImpersonation: boolean, workspace: { __typename?: 'Workspace', id: string, domainName?: string | null, displayName?: string | null, logo?: string | null, inviteHash?: string | null } } | null, settings: { __typename?: 'UserSettings', id: string, colorScheme: ColorScheme, locale: string } }, tokens: { __typename?: 'AuthTokenPair', accessToken: { __typename?: 'AuthToken', token: string, expiresAt: string }, refreshToken: { __typename?: 'AuthToken', token: string, expiresAt: string } } } };
export type VerifyMutation = { __typename?: 'Mutation', verify: { __typename?: 'Verify', user: { __typename?: 'User', id: string, email: string, displayName: string, firstName?: string | null, lastName?: string | null, canImpersonate: boolean, supportUserHash: string, workspaceMember?: { __typename?: 'WorkspaceMember', id: string, allowImpersonation: boolean, workspace: { __typename?: 'Workspace', id: string, domainName?: string | null, displayName?: string | null, logo?: string | null, inviteHash?: string | null } } | null, settings: { __typename?: 'UserSettings', id: string, colorScheme: ColorScheme, locale: string } }, tokens: { __typename?: 'AuthTokenPair', accessToken: { __typename?: 'AuthToken', token: string, expiresAt: string }, refreshToken: { __typename?: 'AuthToken', token: string, expiresAt: string } } } };
export type RenewTokenMutationVariables = Exact<{
refreshToken: Scalars['String'];
@ -2451,12 +2451,12 @@ export type ImpersonateMutationVariables = Exact<{
}>;
export type ImpersonateMutation = { __typename?: 'Mutation', impersonate: { __typename?: 'Verify', user: { __typename?: 'User', id: string, email: string, displayName: string, firstName?: string | null, lastName?: string | null, canImpersonate: boolean, workspaceMember?: { __typename?: 'WorkspaceMember', id: string, allowImpersonation: boolean, workspace: { __typename?: 'Workspace', id: string, domainName?: string | null, displayName?: string | null, logo?: string | null, inviteHash?: string | null } } | null, settings: { __typename?: 'UserSettings', id: string, colorScheme: ColorScheme, locale: string } }, tokens: { __typename?: 'AuthTokenPair', accessToken: { __typename?: 'AuthToken', token: string, expiresAt: string }, refreshToken: { __typename?: 'AuthToken', token: string, expiresAt: string } } } };
export type ImpersonateMutation = { __typename?: 'Mutation', impersonate: { __typename?: 'Verify', user: { __typename?: 'User', id: string, email: string, displayName: string, firstName?: string | null, lastName?: string | null, canImpersonate: boolean, supportUserHash: string, workspaceMember?: { __typename?: 'WorkspaceMember', id: string, allowImpersonation: boolean, workspace: { __typename?: 'Workspace', id: string, domainName?: string | null, displayName?: string | null, logo?: string | null, inviteHash?: string | null } } | null, settings: { __typename?: 'UserSettings', id: string, colorScheme: ColorScheme, locale: string } }, tokens: { __typename?: 'AuthTokenPair', accessToken: { __typename?: 'AuthToken', token: string, expiresAt: string }, refreshToken: { __typename?: 'AuthToken', token: string, expiresAt: string } } } };
export type GetClientConfigQueryVariables = Exact<{ [key: string]: never; }>;
export type GetClientConfigQuery = { __typename?: 'Query', clientConfig: { __typename?: 'ClientConfig', signInPrefilled: boolean, debugMode: boolean, authProviders: { __typename?: 'AuthProviders', google: boolean, password: boolean }, telemetry: { __typename?: 'Telemetry', enabled: boolean, anonymizationEnabled: boolean }, supportChat: { __typename?: 'SupportChat', supportDriver: string, supportFrontendKey?: string | null } } };
export type GetClientConfigQuery = { __typename?: 'Query', clientConfig: { __typename?: 'ClientConfig', signInPrefilled: boolean, debugMode: boolean, authProviders: { __typename?: 'AuthProviders', google: boolean, password: boolean }, telemetry: { __typename?: 'Telemetry', enabled: boolean, anonymizationEnabled: boolean }, support: { __typename?: 'Support', supportDriver: string, supportFrontChatId?: string | null } } };
export type GetCompaniesQueryVariables = Exact<{
orderBy?: InputMaybe<Array<CompanyOrderByWithRelationInput> | CompanyOrderByWithRelationInput>;
@ -2685,7 +2685,7 @@ export type SearchActivityQuery = { __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, canImpersonate: boolean, supportHMACKey?: string | null, workspaceMember?: { __typename?: 'WorkspaceMember', id: string, allowImpersonation: boolean, workspace: { __typename?: 'Workspace', id: string, domainName?: string | null, displayName?: string | null, logo?: string | null, inviteHash?: string | null } } | null, settings: { __typename?: 'UserSettings', id: string, locale: string, colorScheme: ColorScheme } } };
export type GetCurrentUserQuery = { __typename?: 'Query', currentUser: { __typename?: 'User', id: string, email: string, displayName: string, firstName?: string | null, lastName?: string | null, avatarUrl?: string | null, canImpersonate: boolean, supportUserHash: string, workspaceMember?: { __typename?: 'WorkspaceMember', id: string, allowImpersonation: boolean, workspace: { __typename?: 'Workspace', id: string, domainName?: string | null, displayName?: string | null, logo?: string | null, inviteHash?: string | null } } | null, settings: { __typename?: 'UserSettings', id: string, locale: string, colorScheme: ColorScheme } } };
export type GetUsersQueryVariables = Exact<{ [key: string]: never; }>;
@ -3479,6 +3479,7 @@ export const VerifyDocument = gql`
firstName
lastName
canImpersonate
supportUserHash
workspaceMember {
id
allowImpersonation
@ -3587,6 +3588,7 @@ export const ImpersonateDocument = gql`
firstName
lastName
canImpersonate
supportUserHash
workspaceMember {
id
allowImpersonation
@ -3656,9 +3658,9 @@ export const GetClientConfigDocument = gql`
enabled
anonymizationEnabled
}
supportChat {
support {
supportDriver
supportFrontendKey
supportFrontChatId
}
}
}
@ -4907,7 +4909,7 @@ export const GetCurrentUserDocument = gql`
locale
colorScheme
}
supportHMACKey
supportUserHash
}
}
`;

2
front/src/modules/auth/queries/update.ts
View File

@ -40,6 +40,7 @@ export const VERIFY = gql`
firstName
lastName
canImpersonate
supportUserHash
workspaceMember {
id
allowImpersonation
@ -99,6 +100,7 @@ export const IMPERSONATE = gql`
firstName
lastName
canImpersonate
supportUserHash
workspaceMember {
id
allowImpersonation

2
front/src/modules/client-config/components/ClientConfigProvider.tsx
View File

@ -33,7 +33,7 @@ export const ClientConfigProvider: React.FC<React.PropsWithChildren> = ({
setDebugMode(data?.clientConfig.debugMode);
setSignInPrefilled(data?.clientConfig.signInPrefilled);
setTelemetry(data?.clientConfig.telemetry);
setSupportChat(data?.clientConfig.supportChat);
setSupportChat(data?.clientConfig.support);
}
}, [
data,

4
front/src/modules/client-config/queries/index.tsx
View File

@ -13,9 +13,9 @@ export const GET_CLIENT_CONFIG = gql`
enabled
anonymizationEnabled
}
supportChat {
support {
supportDriver
supportFrontendKey
supportFrontChatId
}
}
}

8
front/src/modules/client-config/states/supportChatState.ts
View File

@ -1,11 +1,11 @@
import { atom } from 'recoil';
import { SupportChat } from '~/generated/graphql';
import { Support } from '~/generated/graphql';
export const supportChatState = atom<SupportChat>({
export const supportChatState = atom<Support>({
key: 'supportChatState',
default: {
supportDriver: 'front',
supportFrontendKey: null,
supportDriver: 'none',
supportFrontChatId: null,
},
});

2
front/src/modules/ui/button/components/Button.tsx
View File

@ -129,7 +129,7 @@ const StyledButton = styled.button<
return theme.font.weight.medium;
}
}};
gap: ${({ theme }) => theme.spacing(2)};
gap: ${({ theme }) => theme.spacing(1)};
height: ${({ size }) => (size === 'small' ? '24px' : '32px')};
justify-content: flex-start;
padding: ${({ theme, title }) => {

1
front/src/modules/ui/icon/index.ts
View File

@ -52,3 +52,4 @@ export { IconCalendar } from '@tabler/icons-react';
export { IconPencil } from '@tabler/icons-react';
export { IconCircleDot } from '@tabler/icons-react';
export { IconTag } from '@tabler/icons-react';
export { IconHelpCircle } from '@tabler/icons-react';

33
front/src/modules/ui/navbar/components/SupportChat.tsx
View File

@ -1,4 +1,5 @@
import { useEffect, useState } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
@ -9,24 +10,12 @@ import {
ButtonSize,
ButtonVariant,
} from '@/ui/button/components/Button';
import { IconHelpCircle } from '@/ui/icon';
const StyledButtonContainer = styled.div`
display: flex;
`;
const StyledQuestionMark = styled.div`
align-items: center;
border-radius: 50%;
border-style: solid;
border-width: ${({ theme }) => theme.spacing(0.25)};
display: flex;
height: ${({ theme }) => theme.spacing(3.5)};
justify-content: center;
margin-right: ${({ theme }) => theme.spacing(1)};
width: ${({ theme }) => theme.spacing(3.5)};
`;
// insert a script tag into the DOM right before the closing body tag
function insertScript({
src,
innerHTML,
@ -63,41 +52,39 @@ function configureFront(chatId: string) {
}
export default function SupportChat() {
const theme = useTheme();
const user = useRecoilValue(currentUserState);
const supportChatConfig = useRecoilValue(supportChatState);
const [isFrontChatLoaded, setIsFrontChatLoaded] = useState(false);
const [isChatShowing, setIsChatShowing] = useState(false);
useEffect(() => {
if (
supportChatConfig?.supportDriver === 'front' &&
supportChatConfig.supportFrontendKey &&
supportChatConfig.supportFrontChatId &&
!isFrontChatLoaded
) {
configureFront(supportChatConfig.supportFrontendKey);
configureFront(supportChatConfig.supportFrontChatId);
setIsFrontChatLoaded(true);
}
if (user?.email && isFrontChatLoaded) {
window.FrontChat?.('identity', {
email: user.email,
name: user.displayName,
userHash: user?.supportHMACKey,
userHash: user?.supportUserHash,
});
}
}, [
isFrontChatLoaded,
supportChatConfig?.supportDriver,
supportChatConfig.supportFrontendKey,
supportChatConfig.supportFrontChatId,
user?.displayName,
user?.email,
user?.supportHMACKey,
user?.supportUserHash,
]);
function handleSupportClick() {
if (supportChatConfig?.supportDriver === 'front') {
const action = isChatShowing ? 'hide' : 'show';
setIsChatShowing(!isChatShowing);
window.FrontChat?.(action);
window.FrontChat?.('show');
}
}
@ -107,7 +94,7 @@ export default function SupportChat() {
variant={ButtonVariant.Tertiary}
size={ButtonSize.Small}
title="Support"
icon={<StyledQuestionMark>?</StyledQuestionMark>}
icon={<IconHelpCircle size={theme.icon.size.md} />}
onClick={handleSupportClick}
/>
</StyledButtonContainer>

2
front/src/modules/users/queries/index.ts
View File

@ -27,7 +27,7 @@ export const GET_CURRENT_USER = gql`
locale
colorScheme
}
supportHMACKey
supportUserHash
}
}
`;

4
front/src/testing/graphqlMocks.ts
View File

@ -207,9 +207,9 @@ export const graphqlMocks = [
debugMode: false,
authProviders: { google: true, password: true, magicLink: false },
telemetry: { enabled: false, anonymizationEnabled: true },
supportChat: {
support: {
supportDriver: 'front',
supportFrontendKey: null,
supportFrontChatId: null,
},
},
}),

4
front/src/testing/mock-data/users.ts
View File

@ -17,6 +17,7 @@ export const mockedUsersData: Array<MockedUser> = [
lastName: 'Test',
avatarUrl: null,
canImpersonate: false,
supportUserHash: '',
workspaceMember: {
__typename: 'WorkspaceMember',
id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
@ -45,6 +46,7 @@ export const mockedUsersData: Array<MockedUser> = [
firstName: 'Felix',
lastName: 'Test',
canImpersonate: false,
supportUserHash: '',
workspaceMember: {
__typename: 'WorkspaceMember',
id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
@ -77,6 +79,7 @@ export const mockedOnboardingUsersData: Array<MockedUser> = [
lastName: '',
avatarUrl: null,
canImpersonate: false,
supportUserHash: '',
workspaceMember: {
__typename: 'WorkspaceMember',
id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
@ -106,6 +109,7 @@ export const mockedOnboardingUsersData: Array<MockedUser> = [
lastName: '',
avatarUrl: null,
canImpersonate: false,
supportUserHash: '',
workspaceMember: {
__typename: 'WorkspaceMember',
id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',