From 572074d14192ce0411b478be2fe72255aea22e90 Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Fri, 17 Apr 2026 09:47:24 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8(frontend)=20show=20Crisp=20from=20?= =?UTF-8?q?the=20help=20menu?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The Crisp button is very intrusive, it often overlaps with element of the app. We now show the Crisp modal only when the user clicks on the "Get Support" button in the help menu. --- CHANGELOG.md | 1 + .../e2e/__tests__/app-impress/config.spec.ts | 13 ----- .../e2e/__tests__/app-impress/help.spec.ts | 56 +++++++++++++++++++ .../src/assets/icons/ui-kit/bubble-text.svg | 24 ++++++-- .../src/assets/icons/ui-kit/question-mark.svg | 7 ++- .../src/assets/icons/ui-kit/wand_stars.svg | 7 ++- .../src/features/help/assets/help-outline.svg | 3 - .../features/help/assets/wand-and-stars.svg | 4 -- .../src/features/help/components/HelpMenu.tsx | 27 +++++++-- .../left-panel/components/LeftPanel.tsx | 4 +- .../apps/impress/src/services/Crisp.tsx | 33 ++++++++--- 11 files changed, 136 insertions(+), 43 deletions(-) delete mode 100644 src/frontend/apps/impress/src/features/help/assets/help-outline.svg delete mode 100644 src/frontend/apps/impress/src/features/help/assets/wand-and-stars.svg diff --git a/CHANGELOG.md b/CHANGELOG.md index 41c0f7aa..dcfcf513 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ and this project adheres to ### Changed +- 🚸(frontend) show Crisp from the help menu #2222 - ♿️(frontend) structure correctly 5xx error alerts #2128 - ♿️(frontend) make doc search result labels uniquely identifiable #2212 diff --git a/src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts index ce0746a6..52f67e87 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts @@ -78,19 +78,6 @@ test.describe('Config', () => { expect(webSocket.url()).toContain(`${process.env.COLLABORATION_WS_URL}`); }); - test('it checks that Crisp is trying to init from config endpoint', async ({ - page, - }) => { - await overrideConfig(page, { - CRISP_WEBSITE_ID: '1234', - }); - - await page.goto('/'); - - const crispElement = page.locator('#crisp-chatbox'); - await expect(crispElement).toBeAttached(); - }); - test('it checks FRONTEND_CSS_URL config', async ({ page }) => { await overrideConfig(page, { FRONTEND_CSS_URL: 'http://localhost:123465/css/style.css', diff --git a/src/frontend/apps/e2e/__tests__/app-impress/help.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/help.spec.ts index d8e9dca8..9f43eb4d 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/help.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/help.spec.ts @@ -2,11 +2,67 @@ import { expect, test } from '@playwright/test'; import { TestLanguage, + getCurrentConfig, overrideConfig, waitForLanguageSwitch, } from './utils-common'; test.describe('Help feature', () => { + test.describe('Support button', () => { + if (process.env.IS_INSTANCE !== 'true') { + test('is not displayed if CRISP_WEBSITE_ID is not set', async ({ + page, + }) => { + await overrideConfig(page, { + CRISP_WEBSITE_ID: '', + }); + + await page.goto('/'); + + await page.getByRole('button', { name: 'Open help menu' }).click(); + await expect( + page.getByRole('menuitem', { name: 'Get Support' }), + ).toBeHidden(); + }); + + test('is displayed if CRISP_WEBSITE_ID is set', async ({ page }) => { + await overrideConfig(page, { + CRISP_WEBSITE_ID: 'test_website_id', + }); + + await page.goto('/'); + + await page.getByRole('button', { name: 'Open help menu' }).click(); + await expect( + page.getByRole('menuitem', { + name: 'Get Support', + }), + ).toBeVisible(); + }); + } + + if (process.env.IS_INSTANCE === 'true') { + test('it displays Crisp chatbox', async ({ page }) => { + const currentConfig = await getCurrentConfig(page); + test.skip( + !currentConfig.CRISP_WEBSITE_ID, + 'Crisp chatbox is not enabled', + ); + await page.goto('/'); + + await page.getByRole('button', { name: 'Open help menu' }).click(); + await page + .getByRole('menuitem', { + name: 'Get Support', + }) + .click(); + + const crispElement = page.locator('#crisp-chatbox'); + await expect(crispElement).toBeAttached(); + }); + } + }); + test.describe('Onboarding modal', () => { test('Help menu not displayed if onboarding is disabled', async ({ page, diff --git a/src/frontend/apps/impress/src/assets/icons/ui-kit/bubble-text.svg b/src/frontend/apps/impress/src/assets/icons/ui-kit/bubble-text.svg index 4b948be3..b42f9613 100644 --- a/src/frontend/apps/impress/src/assets/icons/ui-kit/bubble-text.svg +++ b/src/frontend/apps/impress/src/assets/icons/ui-kit/bubble-text.svg @@ -1,6 +1,20 @@ - - - - - + + + + + diff --git a/src/frontend/apps/impress/src/assets/icons/ui-kit/question-mark.svg b/src/frontend/apps/impress/src/assets/icons/ui-kit/question-mark.svg index 23db2700..38d52f41 100644 --- a/src/frontend/apps/impress/src/assets/icons/ui-kit/question-mark.svg +++ b/src/frontend/apps/impress/src/assets/icons/ui-kit/question-mark.svg @@ -1,3 +1,6 @@ - - + + diff --git a/src/frontend/apps/impress/src/assets/icons/ui-kit/wand_stars.svg b/src/frontend/apps/impress/src/assets/icons/ui-kit/wand_stars.svg index 4020b8b8..3049ebad 100644 --- a/src/frontend/apps/impress/src/assets/icons/ui-kit/wand_stars.svg +++ b/src/frontend/apps/impress/src/assets/icons/ui-kit/wand_stars.svg @@ -1,3 +1,6 @@ - - + + diff --git a/src/frontend/apps/impress/src/features/help/assets/help-outline.svg b/src/frontend/apps/impress/src/features/help/assets/help-outline.svg deleted file mode 100644 index 4921dfbd..00000000 --- a/src/frontend/apps/impress/src/features/help/assets/help-outline.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/frontend/apps/impress/src/features/help/assets/wand-and-stars.svg b/src/frontend/apps/impress/src/features/help/assets/wand-and-stars.svg deleted file mode 100644 index af9d91e0..00000000 --- a/src/frontend/apps/impress/src/features/help/assets/wand-and-stars.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/frontend/apps/impress/src/features/help/components/HelpMenu.tsx b/src/frontend/apps/impress/src/features/help/components/HelpMenu.tsx index 46c8d060..7173d32e 100644 --- a/src/frontend/apps/impress/src/features/help/components/HelpMenu.tsx +++ b/src/frontend/apps/impress/src/features/help/components/HelpMenu.tsx @@ -8,11 +8,12 @@ import { useCallback, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { css } from 'styled-components'; +import BubbleTextIcon from '@/assets/icons/ui-kit/bubble-text.svg'; +import HelpIcon from '@/assets/icons/ui-kit/question-mark.svg'; +import WandAndStarsIcon from '@/assets/icons/ui-kit/wand-and-stars.svg'; import { Box, DropdownMenuOption } from '@/components'; import { useConfig } from '@/core'; - -import HelpOutlineIcon from '../assets/help-outline.svg'; -import WandAndStarsIcon from '../assets/wand-and-stars.svg'; +import { openCrispChat } from '@/services'; import { OnBoarding } from './OnBoarding'; @@ -26,6 +27,7 @@ export const HelpMenu = ({ const modalOnbording = useModal(); const { data: config } = useConfig(); const onboardingEnabled = config?.theme_customization?.onboarding?.enabled; + const crispEnabled = !!config?.CRISP_WEBSITE_ID; const toggleMenu = useCallback(() => { setIsMenuOpen((open) => !open); @@ -33,14 +35,20 @@ export const HelpMenu = ({ const options = useMemo( () => [ + { + label: t('Get Support'), + icon: , + callback: openCrispChat, + show: crispEnabled, + }, { label: t('Onboarding'), - icon: , + icon: , callback: modalOnbording.open, show: onboardingEnabled, }, ], - [modalOnbording.open, t, onboardingEnabled], + [modalOnbording.open, t, onboardingEnabled, crispEnabled], ); return ( @@ -64,7 +72,14 @@ export const HelpMenu = ({ color={colorButton || 'neutral'} variant="tertiary" iconPosition="left" - icon={} + icon={ + + } onClick={toggleMenu} /> diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx index 01b07f8b..59966e10 100644 --- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx +++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx @@ -40,7 +40,9 @@ export const LeftPanelDesktop = () => { * TODO: As soon as we get more than one fixed element in the help menu, * we should remove this condition and display the help menu even if the onboarding is disabled */ - const showHelpMenu = config?.theme_customization?.onboarding?.enabled; + const showHelpMenu = + config?.theme_customization?.onboarding?.enabled || + !!config?.CRISP_WEBSITE_ID; return ( { } Crisp.configure(websiteId); Crisp.setSafeMode(true); + Crisp.setPosition(ChatboxPosition.Left); + Crisp.chat.hide(); + Crisp.chat.onChatClosed(() => { + Crisp.chat.hide(); + }); +}; + +export const openCrispChat = () => { + if (!Crisp.isCrispInjected()) { + return; + } + Crisp.setPosition(ChatboxPosition.Left); + Crisp.chat.show(); + setTimeout(() => { + Crisp.chat.open(); + }, 300); }; export const terminateCrispSession = () => {