From 9d51af3b41dc587099141c54fc797a11e5378f48 Mon Sep 17 00:00:00 2001 From: NitinPSingh <71833171+NitinPSingh@users.noreply.github.com> Date: Sat, 27 Jul 2024 22:10:34 +0530 Subject: [PATCH] fix #6127 updated support button (#6422) fix #6127 updated the Support button toopen a menu that allows users to either access the [user guide](https://twenty.com/user-guide) or contact support through the chat. ![Screenshot (675)](https://github.com/user-attachments/assets/026e48ee-c397-44ae-bee7-e76698298a52) --------- Co-authored-by: Charles Bochet --- .../components/AppNavigationDrawer.tsx | 4 +- .../{SupportChat.tsx => SupportButton.tsx} | 8 +-- ...er.tsx => SupportButtonSkeletonLoader.tsx} | 2 +- .../support/components/SupportDropdown.tsx | 51 +++++++++++++++++++ ....stories.tsx => SupportButton.stories.tsx} | 17 ++++--- .../src/pages/settings/SettingsBilling.tsx | 4 +- .../display/icon/components/TablerIcons.ts | 1 + 7 files changed, 72 insertions(+), 15 deletions(-) rename packages/twenty-front/src/modules/support/components/{SupportChat.tsx => SupportButton.tsx} (95%) rename packages/twenty-front/src/modules/support/components/{SupportChatSkeletonLoader.tsx => SupportButtonSkeletonLoader.tsx} (87%) create mode 100644 packages/twenty-front/src/modules/support/components/SupportDropdown.tsx rename packages/twenty-front/src/modules/support/components/__stories__/{SupportChat.stories.tsx => SupportButton.stories.tsx} (74%) diff --git a/packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx b/packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx index 310aadc73..522f76f3e 100644 --- a/packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx +++ b/packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx @@ -3,7 +3,7 @@ import { useRecoilValue, useSetRecoilState } from 'recoil'; import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState'; import { SettingsNavigationDrawerItems } from '@/settings/components/SettingsNavigationDrawerItems'; -import { SupportChat } from '@/support/components/SupportChat'; +import { SupportDropdown } from '@/support/components/SupportDropdown'; import { GithubVersionLink } from '@/ui/navigation/link/components/GithubVersionLink'; import { NavigationDrawer, @@ -53,7 +53,7 @@ export const AppNavigationDrawer = ({ undefined, title: currentWorkspace?.displayName ?? undefined, children: , - footer: , + footer: , }; useEffect(() => { diff --git a/packages/twenty-front/src/modules/support/components/SupportChat.tsx b/packages/twenty-front/src/modules/support/components/SupportButton.tsx similarity index 95% rename from packages/twenty-front/src/modules/support/components/SupportChat.tsx rename to packages/twenty-front/src/modules/support/components/SupportButton.tsx index 05da707b6..11ea7684c 100644 --- a/packages/twenty-front/src/modules/support/components/SupportChat.tsx +++ b/packages/twenty-front/src/modules/support/components/SupportButton.tsx @@ -1,6 +1,6 @@ -import { useCallback, useEffect, useState } from 'react'; 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'; @@ -8,7 +8,7 @@ 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 { SupportButtonSkeletonLoader } from '@/support/components/SupportButtonSkeletonLoader'; import { Button } from '@/ui/input/button/components/Button'; import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember'; import { User } from '~/generated/graphql'; @@ -34,7 +34,7 @@ const insertScript = ({ document.body.appendChild(script); }; -export const SupportChat = () => { +export const SupportButton = () => { const currentUser = useRecoilValue(currentUserState); const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState); const supportChat = useRecoilValue(supportChatState); @@ -102,7 +102,7 @@ export const SupportChat = () => { ]); if (loading) { - return ; + return ; } return isFrontChatLoaded ? ( diff --git a/packages/twenty-front/src/modules/support/components/SupportChatSkeletonLoader.tsx b/packages/twenty-front/src/modules/support/components/SupportButtonSkeletonLoader.tsx similarity index 87% rename from packages/twenty-front/src/modules/support/components/SupportChatSkeletonLoader.tsx rename to packages/twenty-front/src/modules/support/components/SupportButtonSkeletonLoader.tsx index 08d5fc380..86d4d1b93 100644 --- a/packages/twenty-front/src/modules/support/components/SupportChatSkeletonLoader.tsx +++ b/packages/twenty-front/src/modules/support/components/SupportButtonSkeletonLoader.tsx @@ -1,7 +1,7 @@ import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; import { useTheme } from '@emotion/react'; -export const SupportChatSkeletonLoader = () => { +export const SupportButtonSkeletonLoader = () => { const theme = useTheme(); return ( { + const dropdownId = `support-field-active-action-dropdown`; + + const { closeDropdown } = useDropdown(dropdownId); + + const handleTalkToUs = () => { + window.FrontChat?.('show'); + closeDropdown(); + }; + + const handleUserGuide = () => { + window.open('https://twenty.com/user-guide', '_blank'); + closeDropdown(); + }; + + return ( + } + dropdownComponents={ + + + + + + + } + dropdownHotkeyScope={{ + scope: dropdownId, + }} + /> + ); +}; diff --git a/packages/twenty-front/src/modules/support/components/__stories__/SupportChat.stories.tsx b/packages/twenty-front/src/modules/support/components/__stories__/SupportButton.stories.tsx similarity index 74% rename from packages/twenty-front/src/modules/support/components/__stories__/SupportChat.stories.tsx rename to packages/twenty-front/src/modules/support/components/__stories__/SupportButton.stories.tsx index da0c12334..06cb0fe3d 100644 --- a/packages/twenty-front/src/modules/support/components/__stories__/SupportChat.stories.tsx +++ b/packages/twenty-front/src/modules/support/components/__stories__/SupportButton.stories.tsx @@ -1,6 +1,6 @@ import { expect } from '@storybook/jest'; import { Meta, StoryObj } from '@storybook/react'; -import { within } from '@storybook/test'; +import { within, userEvent } from '@storybook/test'; import { useSetRecoilState } from 'recoil'; import { currentUserState } from '@/auth/states/currentUserState'; @@ -14,11 +14,11 @@ import { mockedWorkspaceMemberData, } from '~/testing/mock-data/users'; -import { SupportChat } from '../SupportChat'; +import { SupportDropdown } from '@/support/components/SupportDropdown'; -const meta: Meta = { - title: 'Modules/Support/SupportChat', - component: SupportChat, +const meta: Meta = { + title: 'Modules/Support/SupportDropdown', + component: SupportDropdown, decorators: [ (Story) => { const setCurrentUser = useSetRecoilState(currentUserState); @@ -42,11 +42,16 @@ const meta: Meta = { }; export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Default: Story = { play: async () => { const canvas = within(document.body); + expect(await canvas.findByText('Support')).toBeInTheDocument(); + await userEvent.click(canvas.getByText('Support')); + + expect(await canvas.findByText('Documentation')).toBeInTheDocument(); + expect(await canvas.findByText('Talk to us')).toBeInTheDocument(); }, }; diff --git a/packages/twenty-front/src/pages/settings/SettingsBilling.tsx b/packages/twenty-front/src/pages/settings/SettingsBilling.tsx index fd128ecb2..f348e3455 100644 --- a/packages/twenty-front/src/pages/settings/SettingsBilling.tsx +++ b/packages/twenty-front/src/pages/settings/SettingsBilling.tsx @@ -14,7 +14,7 @@ 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 { SupportChat } from '@/support/components/SupportChat'; +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'; @@ -218,7 +218,7 @@ export const SettingsBilling = () => { )} - +