-
Notifications
You must be signed in to change notification settings - Fork 1.4k
/
SupportChat.tsx
119 lines (109 loc) · 3.62 KB
/
SupportChat.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
import { useCallback, useEffect, useState } from 'react';
import styled from '@emotion/styled';
import { isNonEmptyString } from '@sniptt/guards';
import { useRecoilValue } from 'recoil';
import { IconHelpCircle } from 'twenty-ui';
import { currentUserState } from '@/auth/states/currentUserState';
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
import { supportChatState } from '@/client-config/states/supportChatState';
import { useIsPrefetchLoading } from '@/prefetch/hooks/useIsPrefetchLoading';
import { SupportChatSkeletonLoader } from '@/support/components/SupportChatSkeletonLoader';
import { Button } from '@/ui/input/button/components/Button';
import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
import { User } from '~/generated/graphql';
import { isDefined } from '~/utils/isDefined';
const StyledButtonContainer = styled.div`
display: flex;
`;
const insertScript = ({
src,
innerHTML,
onLoad,
}: {
src?: string;
innerHTML?: string;
onLoad?: (...args: any[]) => void;
}) => {
const script = document.createElement('script');
if (isNonEmptyString(src)) script.src = src;
if (isNonEmptyString(innerHTML)) script.innerHTML = innerHTML;
if (isDefined(onLoad)) script.onload = onLoad;
document.body.appendChild(script);
};
export const SupportChat = () => {
const currentUser = useRecoilValue(currentUserState);
const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
const supportChat = useRecoilValue(supportChatState);
const [isFrontChatLoaded, setIsFrontChatLoaded] = useState(false);
const loading = useIsPrefetchLoading();
const configureFront = useCallback(
(
chatId: string,
currentUser: Pick<User, 'email' | 'supportUserHash'>,
currentWorkspaceMember: Pick<WorkspaceMember, 'name'>,
) => {
const url = 'https://chat-assets.frontapp.com/v1/chat.bundle.js';
let script = document.querySelector(`script[src="${url}"]`);
// This function only gets called when front chat is not loaded
// If the script is already defined, but front chat is not loaded
// then there was an error loading the script; reload the script
if (isDefined(script)) {
script.parentNode?.removeChild(script);
script = null;
}
insertScript({
src: url,
onLoad: () => {
window.FrontChat?.('init', {
chatId,
useDefaultLauncher: false,
email: currentUser.email,
name:
currentWorkspaceMember.name.firstName +
' ' +
currentWorkspaceMember.name.lastName,
userHash: currentUser?.supportUserHash,
});
setIsFrontChatLoaded(true);
},
});
},
[],
);
useEffect(() => {
if (
supportChat?.supportDriver === 'front' &&
isNonEmptyString(supportChat.supportFrontChatId) &&
isNonEmptyString(currentUser?.email) &&
isDefined(currentWorkspaceMember) &&
!isFrontChatLoaded
) {
configureFront(
supportChat.supportFrontChatId,
currentUser,
currentWorkspaceMember,
);
}
}, [
configureFront,
currentUser,
isFrontChatLoaded,
supportChat?.supportDriver,
supportChat.supportFrontChatId,
currentWorkspaceMember,
]);
if (loading) {
return <SupportChatSkeletonLoader />;
}
return isFrontChatLoaded ? (
<StyledButtonContainer>
<Button
variant="tertiary"
size="small"
title="Support"
Icon={IconHelpCircle}
onClick={() => window.FrontChat?.('show')}
/>
</StyledButtonContainer>
) : null;
};