Update Support Button to Menu

[Bonapara]

Current Behavior

Clicking the Support button opens the chat.

CleanShot.2024-07-04.at.10.48.16.mp4

Desired Behavior

Clicking the Support button should open a menu that allows users to either access the user guide or contact support through the chat.

CleanShot.2024-07-04.at.10.45.42.mp4

[greptile-apps]

To update the Support button to open a menu, follow these steps:

1. Import Dropdown Components:

   import { Dropdown, DropdownItem } from '@/ui/layout/dropdown/components/Dropdown';

2. Update the SupportChat Component:
   Replace the StyledButtonContainer and Button with a Dropdown component:

   return (
     <Dropdown
       trigger={<Button variant="tertiary" size="small" title="Support" Icon={IconHelpCircle} />}
     >
       <DropdownItem onClick={() => window.open('https://twenty.com/user-guide', '_blank')}>User Guide</DropdownItem>
       <DropdownItem onClick={() => window.FrontChat?.('show')}>Contact Support</DropdownItem>
     </Dropdown>
   );

3. Ensure Dropdown Styles:
   Verify that the dropdown styles are correctly applied and adjust if necessary.

4. Update Storybook:
   Update the Storybook story in /packages/twenty-front/src/modules/support/components/__stories__/SupportChat.stories.tsx to reflect the new dropdown menu:

   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('User Guide')).toBeInTheDocument();
       expect(await canvas.findByText('Contact Support')).toBeInTheDocument();
     },
   };

References

/packages/twenty-front/src/modules/support/components/SupportChat.tsx
/packages/twenty-front/src/modules/support/components/stories/SupportChat.stories.tsx
/packages/twenty-front/src/modules/support
/packages/twenty-front/src/modules/ui/layout/dropdown/components/stories/DropdownMenu.stories.tsx

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Ask Greptile · Edit Issue Bot Settings

[FelixMalfait]

On self-hosted instances, redirect Talk to Us to https://twenty.com/Book-a-call

[IlyasOsman]

I would like to work on this.

[FelixMalfait]

Thanks @IlyasOsman! Assigned

[KrishDave1]

Hey Felix I would like to work on this.

[FelixMalfait]

Hey @KrishDave1 - I think @IlyasOsman is already on it. In case he doesn't raise a PR within this week you could work on it but let's give him a shot :)

[IlyasOsman]

Thanks @FelixMalfait. @KrishDave1 please go ahead and tackle the issue.

[KrishDave1]

@FelixMalfait Please assign this task to me

[FelixMalfait]

Thanks!

[KrishDave1]

Hey @FelixMalfait Just getting this error while trying to run frontend.Could you please guide here.Please note I did not change any config files

Command : npx nx start twenty-front

vite v5.0.10 building for production...
transforming...
error TS5023: Unknown compiler option '-'.

———————————————————————————————————————————————————————

NX Running target start for project twenty-front and 2 tasks it depends on failed

Failed tasks:

• twenty-ui:build

Hint: run the command with --verbose for more details.

[FelixMalfait]

@KrishDave1 Sorry, I'm not familiar with this error