Files
twenty/packages/twenty-front/src/modules/support/hooks/useSupportChat.ts
T
Paul Rastoin 7fd89678b7 [CHORE] Avoid isDefined duplicated reference, move it to twenty-shared (#9967)
# Introduction
Avoid having multiple `isDefined` definition across our pacakges
Also avoid importing `isDefined` from `twenty-ui` which exposes a huge
barrel for a such little util function

## In a nutshell
Removed own `isDefined.ts` definition from `twenty-ui` `twenty-front`
and `twenty-server` to move it to `twenty-shared`.
Updated imports for each packages, and added explicit dependencies to
`twenty-shared` if not already in place

Related PR https://github.com/twentyhq/twenty/pull/9941
2025-02-01 12:10:10 +01:00

96 lines
3.0 KiB
TypeScript

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 { isNonEmptyString } from '@sniptt/guards';
import { useCallback, useEffect, useState } from 'react';
import { useRecoilValue } from 'recoil';
import { isDefined } from 'twenty-shared';
import { User, WorkspaceMember } from '~/generated-metadata/graphql';
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 useSupportChat = () => {
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,
]);
return { loading, isFrontChatLoaded };
};