twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-25 13:02:15 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix 6428/chat open on clicking dropdown (#6429)

Browse Source 
This issue was caused due to last comomit on issue by me only
fix_6127/support_button_updated

I had fixed the chat opening problem , in this commit

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
NitinPSingh 2024-07-29 21:11:33 +05:30 committed by GitHub
parent 6bc7622e1e
commit 0fd3c8b264
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 97 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
packages/twenty-front/src/modules/support/components/SupportButton.tsx
View File

@ -1,105 +1,16 @@
import styled from '@emotion/styled';
import { isNonEmptyString } from '@sniptt/guards';
import { useCallback, useEffect, useState } from 'react';
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 { SupportButtonSkeletonLoader } from '@/support/components/SupportButtonSkeletonLoader';
import { useSupportChat } from '@/support/hooks/useSupportChat';
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 SupportButton = () => {
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,
]);
const { loading, isFrontChatLoaded } = useSupportChat();
if (loading) {
return <SupportButtonSkeletonLoader />;
@ -112,7 +23,6 @@ export const SupportButton = () => {
size="small"
title="Support"
Icon={IconHelpCircle}
onClick={() => window.FrontChat?.('show')}
/>
</StyledButtonContainer>
) : null;

95
packages/twenty-front/src/modules/support/hooks/useSupportChat.ts Normal file
View File

@ -0,0 +1,95 @@
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-ui';
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 };
};

8
packages/twenty-front/src/pages/settings/SettingsBilling.tsx
View File

@ -14,7 +14,6 @@ import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
import { SettingsBillingCoverImage } from '@/billing/components/SettingsBillingCoverImage';
import { useOnboardingStatus } from '@/onboarding/hooks/useOnboardingStatus';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { SupportButton } from '@/support/components/SupportButton';
import { AppPath } from '@/types/AppPath';
import { Info } from '@/ui/display/info/components/Info';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
@ -37,10 +36,6 @@ const StyledH1Title = styled(H1Title)`
margin-bottom: 0;
`;
const StyledInvisibleChat = styled.div`
display: none;
`;
type SwitchInfo = {
newInterval: SubscriptionInterval;
to: string;
@ -217,9 +212,6 @@ export const SettingsBilling = () => {
</>
)}
</SettingsPageContainer>
<StyledInvisibleChat>
<SupportButton />
</StyledInvisibleChat>
<ConfirmationModal
isOpen={isSwitchingIntervalModalOpen}
setIsOpen={setIsSwitchingIntervalModalOpen}