mirror of
https://github.com/suitenumerique/docs
synced 2026-04-21 13:37:20 +00:00
🚸(frontend) show Crisp from the help menu
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.
This commit is contained in:
Anthony LC
parent
599b909318
commit
572074d141
11 changed files with 136 additions and 43 deletions
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,20 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.2598 12.8799C12.4143 12.88 12.5453 12.9359 12.6523 13.0488C12.7653 13.1558 12.8212 13.2869 12.8213 13.4414C12.8213 13.5959 12.7651 13.727 12.6523 13.834C12.5453 13.941 12.4143 13.995 12.2598 13.9951H7.46191C7.30722 13.9951 7.17643 13.9411 7.06934 13.834C6.96232 13.7269 6.9082 13.596 6.9082 13.4414C6.90828 13.2869 6.95948 13.1558 7.06055 13.0488C7.16759 12.936 7.30143 12.8799 7.46191 12.8799H12.2598Z" fill="#222631"/>
|
||||
<path d="M16.4395 10.0322C16.6001 10.0322 16.7347 10.0891 16.8418 10.2021C16.9488 10.3152 17.002 10.4432 17.002 10.5859C17.0019 10.7464 16.9487 10.8803 16.8418 10.9873C16.7347 11.0944 16.6001 11.1484 16.4395 11.1484H7.46191C7.30723 11.1484 7.17643 11.0944 7.06934 10.9873C6.96225 10.8802 6.90821 10.7466 6.9082 10.5859C6.9082 10.4431 6.9594 10.3152 7.06055 10.2021C7.16761 10.0892 7.30136 10.0322 7.46191 10.0322H16.4395Z" fill="#222631"/>
|
||||
<path d="M16.4395 7.20312C16.6001 7.20312 16.7347 7.25716 16.8418 7.36426C16.9488 7.47131 17.002 7.5994 17.002 7.74805C17.0019 7.90259 16.9487 8.03645 16.8418 8.14941C16.7347 8.25651 16.6001 8.31055 16.4395 8.31055H7.46191C7.30726 8.31055 7.17642 8.25645 7.06934 8.14941C6.96228 8.03641 6.90824 7.90267 6.9082 7.74805C6.9082 7.5993 6.9594 7.47135 7.06055 7.36426C7.16762 7.25725 7.30134 7.20312 7.46191 7.20312H16.4395Z" fill="#222631"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.8057 3C18.7039 3.00003 19.4652 3.16689 20.0898 3.5C20.7085 3.83314 21.1816 4.31192 21.5088 4.93652C21.836 5.55524 22 6.30792 22 7.19434V14.1201C22 15.0066 21.836 15.762 21.5088 16.3867C21.1756 17.0055 20.7027 17.4813 20.0898 17.8145C19.4711 18.1476 18.7307 18.3144 17.8682 18.3145H17.3857V20.5098C17.3857 20.9083 17.288 21.224 17.0918 21.4561C16.8896 21.688 16.6097 21.8036 16.2529 21.8037C16.0031 21.8037 15.768 21.7383 15.5479 21.6074C15.3277 21.4825 15.0652 21.2863 14.7617 21.0186L11.71 18.3145H6.19434C5.30197 18.3144 4.54362 18.1476 3.91895 17.8145C3.29424 17.4813 2.81844 17.0055 2.49121 16.3867C2.16399 15.762 2.00001 15.0066 2 14.1201V7.19434C2.00003 6.30792 2.164 5.55524 2.49121 4.93652C2.81844 4.31192 3.2943 3.83314 3.91895 3.5C4.54361 3.16685 5.30199 3.00003 6.19434 3H17.8057ZM6.24805 4.75781C5.40331 4.75782 4.7786 4.96927 4.37402 5.3916C3.9635 5.80807 3.75782 6.42701 3.75781 7.24805V14.0576C3.75782 14.8846 3.9635 15.5092 4.37402 15.9316C4.7786 16.3481 5.40321 16.5566 6.24805 16.5566H11.7988C12.0725 16.5566 12.2934 16.5889 12.46 16.6543C12.6205 16.7138 12.796 16.839 12.9863 17.0293L15.8154 19.832V17.2881C15.8155 17.0204 15.8752 16.8327 15.9941 16.7256C16.1072 16.6128 16.2885 16.5567 16.5381 16.5566H17.7607C18.5996 16.5566 19.2242 16.3481 19.6348 15.9316C20.0393 15.5092 20.2422 14.8846 20.2422 14.0576V7.24805C20.2422 6.42701 20.0393 5.80807 19.6348 5.3916C19.2242 4.96931 18.5995 4.75781 17.7607 4.75781H6.24805Z" fill="#222631"/>
|
||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M12.2598 12.8799C12.4143 12.88 12.5453 12.9359 12.6523 13.0488C12.7653 13.1558 12.8212 13.2869 12.8213 13.4414C12.8213 13.5959 12.7651 13.727 12.6523 13.834C12.5453 13.941 12.4143 13.995 12.2598 13.9951H7.46191C7.30722 13.9951 7.17643 13.9411 7.06934 13.834C6.96232 13.7269 6.9082 13.596 6.9082 13.4414C6.90828 13.2869 6.95948 13.1558 7.06055 13.0488C7.16759 12.936 7.30143 12.8799 7.46191 12.8799H12.2598Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M16.4395 10.0322C16.6001 10.0322 16.7347 10.0891 16.8418 10.2021C16.9488 10.3152 17.002 10.4432 17.002 10.5859C17.0019 10.7464 16.9487 10.8803 16.8418 10.9873C16.7347 11.0944 16.6001 11.1484 16.4395 11.1484H7.46191C7.30723 11.1484 7.17643 11.0944 7.06934 10.9873C6.96225 10.8802 6.90821 10.7466 6.9082 10.5859C6.9082 10.4431 6.9594 10.3152 7.06055 10.2021C7.16761 10.0892 7.30136 10.0322 7.46191 10.0322H16.4395Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M16.4395 7.20312C16.6001 7.20312 16.7347 7.25716 16.8418 7.36426C16.9488 7.47131 17.002 7.5994 17.002 7.74805C17.0019 7.90259 16.9487 8.03645 16.8418 8.14941C16.7347 8.25651 16.6001 8.31055 16.4395 8.31055H7.46191C7.30726 8.31055 7.17642 8.25645 7.06934 8.14941C6.96228 8.03641 6.90824 7.90267 6.9082 7.74805C6.9082 7.5993 6.9594 7.47135 7.06055 7.36426C7.16762 7.25725 7.30134 7.20312 7.46191 7.20312H16.4395Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M17.8057 3C18.7039 3.00003 19.4652 3.16689 20.0898 3.5C20.7085 3.83314 21.1816 4.31192 21.5088 4.93652C21.836 5.55524 22 6.30792 22 7.19434V14.1201C22 15.0066 21.836 15.762 21.5088 16.3867C21.1756 17.0055 20.7027 17.4813 20.0898 17.8145C19.4711 18.1476 18.7307 18.3144 17.8682 18.3145H17.3857V20.5098C17.3857 20.9083 17.288 21.224 17.0918 21.4561C16.8896 21.688 16.6097 21.8036 16.2529 21.8037C16.0031 21.8037 15.768 21.7383 15.5479 21.6074C15.3277 21.4825 15.0652 21.2863 14.7617 21.0186L11.71 18.3145H6.19434C5.30197 18.3144 4.54362 18.1476 3.91895 17.8145C3.29424 17.4813 2.81844 17.0055 2.49121 16.3867C2.16399 15.762 2.00001 15.0066 2 14.1201V7.19434C2.00003 6.30792 2.164 5.55524 2.49121 4.93652C2.81844 4.31192 3.2943 3.83314 3.91895 3.5C4.54361 3.16685 5.30199 3.00003 6.19434 3H17.8057ZM6.24805 4.75781C5.40331 4.75782 4.7786 4.96927 4.37402 5.3916C3.9635 5.80807 3.75782 6.42701 3.75781 7.24805V14.0576C3.75782 14.8846 3.9635 15.5092 4.37402 15.9316C4.7786 16.3481 5.40321 16.5566 6.24805 16.5566H11.7988C12.0725 16.5566 12.2934 16.5889 12.46 16.6543C12.6205 16.7138 12.796 16.839 12.9863 17.0293L15.8154 19.832V17.2881C15.8155 17.0204 15.8752 16.8327 15.9941 16.7256C16.1072 16.6128 16.2885 16.5567 16.5381 16.5566H17.7607C18.5996 16.5566 19.2242 16.3481 19.6348 15.9316C20.0393 15.5092 20.2422 14.8846 20.2422 14.0576V7.24805C20.2422 6.42701 20.0393 5.80807 19.6348 5.3916C19.2242 4.96931 18.5995 4.75781 17.7607 4.75781H6.24805Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
|
|
@ -1,3 +1,6 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.9951 22.2189C10.5837 22.2189 9.26145 21.9518 8.02819 21.4176C6.79493 20.89 5.71006 20.158 4.77358 19.2215C3.83709 18.2916 3.10176 17.21 2.56756 15.9768C2.03997 14.7369 1.77617 13.4113 1.77617 12C1.77617 10.5887 2.03997 9.26641 2.56756 8.03315C3.10176 6.7933 3.83709 5.70513 4.77358 4.76865C5.71006 3.83216 6.79493 3.10012 8.02819 2.57252C9.26145 2.04493 10.5837 1.78113 11.9951 1.78113C13.4064 1.78113 14.7287 2.04493 15.9619 2.57252C17.2018 3.10012 18.2899 3.83216 19.2264 4.76865C20.1629 5.70513 20.895 6.7933 21.4226 8.03315C21.9567 9.26641 22.2238 10.5887 22.2238 12C22.2238 13.4113 21.9567 14.7369 21.4226 15.9768C20.895 17.21 20.1629 18.2916 19.2264 19.2215C18.2899 20.158 17.2018 20.89 15.9619 21.4176C14.7287 21.9518 13.4064 22.2189 11.9951 22.2189ZM11.9951 20.2009C13.1294 20.2009 14.1912 19.9865 15.1804 19.5578C16.1697 19.1358 17.0402 18.5488 17.792 17.797C18.5505 17.0452 19.1407 16.1746 19.5628 15.1854C19.9849 14.1961 20.1959 13.1344 20.1959 12C20.1959 10.8657 19.9849 9.8039 19.5628 8.81465C19.1407 7.81881 18.5505 6.94828 17.792 6.20305C17.0402 5.45122 16.1697 4.86427 15.1804 4.44219C14.1912 4.01352 13.1294 3.79919 11.9951 3.79919C10.8673 3.79919 9.80553 4.01352 8.80969 4.44219C7.82045 4.86427 6.94992 5.45122 6.19809 6.20305C5.44626 6.94828 4.85602 7.81881 4.42734 8.81465C4.00527 9.8039 3.79423 10.8657 3.79423 12C3.79423 13.1344 4.00527 14.1961 4.42734 15.1854C4.85602 16.1746 5.44626 17.0452 6.19809 17.797C6.94992 18.5488 7.82045 19.1358 8.80969 19.5578C9.80553 19.9865 10.8673 20.2009 11.9951 20.2009ZM11.7774 13.9686C11.1509 13.9686 10.8376 13.6883 10.8376 13.1278C10.8376 13.108 10.8376 13.0882 10.8376 13.0684C10.8376 13.0486 10.8376 13.0321 10.8376 13.0189C10.8376 12.5639 10.9498 12.1946 11.174 11.911C11.4048 11.6274 11.6983 11.3636 12.0544 11.1196C12.4765 10.8294 12.7898 10.5821 12.9942 10.3777C13.2052 10.1732 13.3108 9.91601 13.3108 9.60605C13.3108 9.26971 13.1855 8.99602 12.9348 8.78498C12.6908 8.56734 12.3677 8.45853 11.9654 8.45853C11.7675 8.45853 11.5829 8.4915 11.4114 8.55745C11.2465 8.6234 11.0916 8.71903 10.9465 8.84433C10.808 8.96304 10.6827 9.11143 10.5705 9.28949L10.4123 9.49723C10.3199 9.62254 10.2078 9.72146 10.0759 9.79401C9.95062 9.86655 9.79894 9.90282 9.62087 9.90282C9.41643 9.90282 9.23507 9.83358 9.07679 9.69508C8.91851 9.55659 8.83937 9.36863 8.83937 9.13121C8.83937 9.03888 8.84597 8.95315 8.85916 8.87401C8.87894 8.78827 8.90532 8.70254 8.9383 8.61681C9.08998 8.15516 9.43951 7.75616 9.9869 7.41982C10.5409 7.08348 11.2432 6.91531 12.094 6.91531C12.6743 6.91531 13.2085 7.01753 13.6966 7.22197C14.1912 7.42641 14.5869 7.71989 14.8837 8.1024C15.1804 8.48491 15.3288 8.94985 15.3288 9.49723C15.3288 10.0776 15.1804 10.5359 14.8837 10.8723C14.5935 11.2086 14.2077 11.5384 13.7262 11.8615C13.3965 12.0726 13.1459 12.2737 12.9744 12.465C12.8029 12.6562 12.7106 12.8804 12.6974 13.1377C12.6974 13.1508 12.6974 13.1706 12.6974 13.197C12.6974 13.2168 12.6941 13.2366 12.6875 13.2564C12.6743 13.4542 12.5853 13.6224 12.4204 13.7609C12.2622 13.8994 12.0478 13.9686 11.7774 13.9686ZM11.7576 17.0056C11.4411 17.0056 11.1674 16.9034 10.9366 16.6989C10.7123 16.4879 10.6002 16.2274 10.6002 15.9174C10.6002 15.6075 10.7123 15.3503 10.9366 15.1458C11.1608 14.9348 11.4345 14.8293 11.7576 14.8293C12.0808 14.8293 12.3545 14.9315 12.5787 15.1359C12.8029 15.3404 12.9151 15.6009 12.9151 15.9174C12.9151 16.234 12.8029 16.4945 12.5787 16.6989C12.3545 16.9034 12.0808 17.0056 11.7576 17.0056Z" fill="#222631"/>
|
||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M11.9951 22.2189C10.5837 22.2189 9.26145 21.9518 8.02819 21.4176C6.79493 20.89 5.71006 20.158 4.77358 19.2215C3.83709 18.2916 3.10176 17.21 2.56756 15.9768C2.03997 14.7369 1.77617 13.4113 1.77617 12C1.77617 10.5887 2.03997 9.26641 2.56756 8.03315C3.10176 6.7933 3.83709 5.70513 4.77358 4.76865C5.71006 3.83216 6.79493 3.10012 8.02819 2.57252C9.26145 2.04493 10.5837 1.78113 11.9951 1.78113C13.4064 1.78113 14.7287 2.04493 15.9619 2.57252C17.2018 3.10012 18.2899 3.83216 19.2264 4.76865C20.1629 5.70513 20.895 6.7933 21.4226 8.03315C21.9567 9.26641 22.2238 10.5887 22.2238 12C22.2238 13.4113 21.9567 14.7369 21.4226 15.9768C20.895 17.21 20.1629 18.2916 19.2264 19.2215C18.2899 20.158 17.2018 20.89 15.9619 21.4176C14.7287 21.9518 13.4064 22.2189 11.9951 22.2189ZM11.9951 20.2009C13.1294 20.2009 14.1912 19.9865 15.1804 19.5578C16.1697 19.1358 17.0402 18.5488 17.792 17.797C18.5505 17.0452 19.1407 16.1746 19.5628 15.1854C19.9849 14.1961 20.1959 13.1344 20.1959 12C20.1959 10.8657 19.9849 9.8039 19.5628 8.81465C19.1407 7.81881 18.5505 6.94828 17.792 6.20305C17.0402 5.45122 16.1697 4.86427 15.1804 4.44219C14.1912 4.01352 13.1294 3.79919 11.9951 3.79919C10.8673 3.79919 9.80553 4.01352 8.80969 4.44219C7.82045 4.86427 6.94992 5.45122 6.19809 6.20305C5.44626 6.94828 4.85602 7.81881 4.42734 8.81465C4.00527 9.8039 3.79423 10.8657 3.79423 12C3.79423 13.1344 4.00527 14.1961 4.42734 15.1854C4.85602 16.1746 5.44626 17.0452 6.19809 17.797C6.94992 18.5488 7.82045 19.1358 8.80969 19.5578C9.80553 19.9865 10.8673 20.2009 11.9951 20.2009ZM11.7774 13.9686C11.1509 13.9686 10.8376 13.6883 10.8376 13.1278C10.8376 13.108 10.8376 13.0882 10.8376 13.0684C10.8376 13.0486 10.8376 13.0321 10.8376 13.0189C10.8376 12.5639 10.9498 12.1946 11.174 11.911C11.4048 11.6274 11.6983 11.3636 12.0544 11.1196C12.4765 10.8294 12.7898 10.5821 12.9942 10.3777C13.2052 10.1732 13.3108 9.91601 13.3108 9.60605C13.3108 9.26971 13.1855 8.99602 12.9348 8.78498C12.6908 8.56734 12.3677 8.45853 11.9654 8.45853C11.7675 8.45853 11.5829 8.4915 11.4114 8.55745C11.2465 8.6234 11.0916 8.71903 10.9465 8.84433C10.808 8.96304 10.6827 9.11143 10.5705 9.28949L10.4123 9.49723C10.3199 9.62254 10.2078 9.72146 10.0759 9.79401C9.95062 9.86655 9.79894 9.90282 9.62087 9.90282C9.41643 9.90282 9.23507 9.83358 9.07679 9.69508C8.91851 9.55659 8.83937 9.36863 8.83937 9.13121C8.83937 9.03888 8.84597 8.95315 8.85916 8.87401C8.87894 8.78827 8.90532 8.70254 8.9383 8.61681C9.08998 8.15516 9.43951 7.75616 9.9869 7.41982C10.5409 7.08348 11.2432 6.91531 12.094 6.91531C12.6743 6.91531 13.2085 7.01753 13.6966 7.22197C14.1912 7.42641 14.5869 7.71989 14.8837 8.1024C15.1804 8.48491 15.3288 8.94985 15.3288 9.49723C15.3288 10.0776 15.1804 10.5359 14.8837 10.8723C14.5935 11.2086 14.2077 11.5384 13.7262 11.8615C13.3965 12.0726 13.1459 12.2737 12.9744 12.465C12.8029 12.6562 12.7106 12.8804 12.6974 13.1377C12.6974 13.1508 12.6974 13.1706 12.6974 13.197C12.6974 13.2168 12.6941 13.2366 12.6875 13.2564C12.6743 13.4542 12.5853 13.6224 12.4204 13.7609C12.2622 13.8994 12.0478 13.9686 11.7774 13.9686ZM11.7576 17.0056C11.4411 17.0056 11.1674 16.9034 10.9366 16.6989C10.7123 16.4879 10.6002 16.2274 10.6002 15.9174C10.6002 15.6075 10.7123 15.3503 10.9366 15.1458C11.1608 14.9348 11.4345 14.8293 11.7576 14.8293C12.0808 14.8293 12.3545 14.9315 12.5787 15.1359C12.8029 15.3404 12.9151 15.6009 12.9151 15.9174C12.9151 16.234 12.8029 16.4945 12.5787 16.6989C12.3545 16.9034 12.0808 17.0056 11.7576 17.0056Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.5 KiB |
|
|
@ -1,3 +1,6 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.4 21L3 19.6L10.525 12.05L6 10.925L10.95 7.85L10.525 2L15 5.775L20.4 3.575L18.225 9L22 13.45L16.15 13.05L13.05 18L11.925 13.475L4.4 21ZM5 8L3 6L5 4L7 6L5 8ZM13.875 12.925L15.075 10.95L17.4 11.125L15.9 9.35L16.775 7.2L14.625 8.075L12.85 6.6L13.025 8.9L11.05 10.125L13.3 10.675L13.875 12.925ZM18 21L16 19L18 17L20 19L18 21Z" fill="#222631"/>
|
||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M4.4 21L3 19.6L10.525 12.05L6 10.925L10.95 7.85L10.525 2L15 5.775L20.4 3.575L18.225 9L22 13.45L16.15 13.05L13.05 18L11.925 13.475L4.4 21ZM5 8L3 6L5 4L7 6L5 8ZM13.875 12.925L15.075 10.95L17.4 11.125L15.9 9.35L16.775 7.2L14.625 8.075L12.85 6.6L13.025 8.9L11.05 10.125L13.3 10.675L13.875 12.925ZM18 21L16 19L18 17L20 19L18 21Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 454 B After Width: | Height: | Size: 449 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 381 B |
|
|
@ -1,4 +0,0 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.3136 21.6055L17.2529 8.63648C17.5035 8.38587 17.6288 8.0858 17.6288 7.73626C17.6288 7.38673 17.5068 7.08666 17.2628 6.83605C17.0254 6.58544 16.7286 6.46014 16.3725 6.46014C16.0098 6.46014 15.7031 6.58544 15.4525 6.83605L2.51318 19.805C2.26257 20.0622 2.13726 20.3623 2.13726 20.7053C2.13726 21.0548 2.25927 21.3549 2.50328 21.6055C2.7407 21.8561 3.04078 21.9814 3.4035 21.9814C3.75963 21.988 4.06299 21.8627 4.3136 21.6055ZM12.9101 11.7526L12.3463 11.1986L15.9471 7.58788C16.0263 7.50874 16.1219 7.46917 16.234 7.46917C16.3395 7.46917 16.4318 7.50874 16.511 7.58788C16.5901 7.66702 16.6297 7.76264 16.6297 7.87476C16.6297 7.98028 16.5901 8.06931 16.511 8.14185L12.9101 11.7526ZM7.49897 9.71475C7.59789 9.71475 7.67703 9.68837 7.73639 9.63561C7.79574 9.58285 7.82872 9.51031 7.83531 9.41798C7.93424 8.82443 8.04635 8.3397 8.17165 7.96379C8.29036 7.58128 8.46183 7.27791 8.68606 7.05369C8.90369 6.82286 9.20047 6.6481 9.57638 6.52939C9.95229 6.40408 10.4436 6.29197 11.0504 6.19304C11.2548 6.16007 11.357 6.05455 11.357 5.87648C11.357 5.67864 11.2548 5.56652 11.0504 5.54014C10.437 5.45441 9.9457 5.34889 9.57638 5.22358C9.20047 5.09168 8.90369 4.91362 8.68606 4.68939C8.46843 4.46516 8.30026 4.16509 8.18155 3.78918C8.06284 3.40667 7.94742 2.91535 7.83531 2.31521C7.80234 2.11736 7.69022 2.01843 7.49897 2.01843C7.3275 2.01843 7.22198 2.12065 7.18241 2.3251C7.09008 2.91205 6.98126 3.39678 6.85596 3.77929C6.73066 4.1552 6.55919 4.45857 6.34155 4.68939C6.12392 4.91362 5.82715 5.09168 5.45123 5.22358C5.06873 5.34889 4.5708 5.45441 3.95747 5.54014C3.75962 5.56652 3.6607 5.67864 3.6607 5.87648C3.6607 6.06114 3.75962 6.16666 3.95747 6.19304C4.5774 6.28537 5.07532 6.39419 5.45123 6.51949C5.82715 6.6448 6.12392 6.81956 6.34155 7.04379C6.55259 7.26802 6.71747 7.57469 6.83617 7.96379C6.95488 8.3463 7.0703 8.83432 7.18241 9.42787C7.1956 9.51361 7.23517 9.58285 7.30112 9.63561C7.36047 9.68837 7.42642 9.71475 7.49897 9.71475ZM19.0138 17.8463C19.1786 17.8463 19.2743 17.7573 19.3007 17.5792C19.3732 17.111 19.4424 16.7417 19.5084 16.4713C19.5677 16.2009 19.6667 15.9965 19.8052 15.858C19.9371 15.7129 20.1448 15.6008 20.4284 15.5216C20.7054 15.4425 21.0978 15.3633 21.6056 15.2842C21.7771 15.2512 21.8628 15.1556 21.8628 14.9973C21.8628 14.8324 21.7738 14.7368 21.5957 14.7104C21.0945 14.6313 20.7054 14.5555 20.4284 14.4829C20.1448 14.4038 19.9371 14.2917 19.8052 14.1466C19.6667 14.0015 19.5677 13.7937 19.5084 13.5233C19.4424 13.2464 19.3732 12.877 19.3007 12.4154C19.2743 12.2373 19.1786 12.1483 19.0138 12.1483C18.8489 12.1483 18.7533 12.2373 18.7269 12.4154C18.6543 12.877 18.5851 13.2431 18.5191 13.5134C18.4532 13.7838 18.3543 13.9916 18.2224 14.1367C18.0905 14.2818 17.886 14.3939 17.609 14.473C17.3255 14.5522 16.9298 14.6313 16.422 14.7104C16.2505 14.7368 16.1647 14.8324 16.1647 14.9973C16.1647 15.1556 16.2505 15.2512 16.422 15.2842C16.9298 15.3633 17.3222 15.4425 17.5992 15.5216C17.8761 15.5942 18.0839 15.703 18.2224 15.8481C18.3543 15.9866 18.4532 16.1943 18.5191 16.4713C18.5851 16.7417 18.6543 17.111 18.7269 17.5792C18.7533 17.7573 18.8489 17.8463 19.0138 17.8463ZM15.6701 20.6954C15.7888 20.6954 15.868 20.6228 15.9075 20.4777C15.9801 20.115 16.046 19.8512 16.1054 19.6863C16.1582 19.5149 16.267 19.3962 16.4318 19.3302C16.5901 19.2643 16.877 19.1884 17.2925 19.1027C17.4244 19.0763 17.4903 19.0005 17.4903 18.8752C17.4903 18.7498 17.4211 18.6707 17.2826 18.6377C16.8737 18.5718 16.5868 18.5058 16.422 18.4399C16.2571 18.3673 16.1483 18.2486 16.0955 18.0838C16.0427 17.9123 15.9801 17.6419 15.9075 17.2726C15.868 17.1275 15.7888 17.0549 15.6701 17.0549C15.5382 17.0549 15.4591 17.1242 15.4327 17.2627C15.3668 17.6386 15.3074 17.909 15.2546 18.0739C15.2019 18.2387 15.0931 18.3542 14.9282 18.4201C14.7567 18.4861 14.4632 18.5586 14.0478 18.6377C13.9159 18.6641 13.8499 18.7433 13.8499 18.8752C13.8499 19.0005 13.9192 19.0763 14.0577 19.1027C14.4665 19.1884 14.7567 19.2643 14.9282 19.3302C15.0997 19.3962 15.2118 19.5149 15.2645 19.6863C15.3173 19.8512 15.3734 20.115 15.4327 20.4777C15.4591 20.6228 15.5382 20.6954 15.6701 20.6954Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 4.1 KiB |
|
|
@ -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<DropdownMenuOption[]>(
|
||||
() => [
|
||||
{
|
||||
label: t('Get Support'),
|
||||
icon: <BubbleTextIcon aria-hidden="true" width="24" height="24" />,
|
||||
callback: openCrispChat,
|
||||
show: crispEnabled,
|
||||
},
|
||||
{
|
||||
label: t('Onboarding'),
|
||||
icon: <WandAndStarsIcon aria-hidden="true" />,
|
||||
icon: <WandAndStarsIcon aria-hidden="true" width="24" height="24" />,
|
||||
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={<HelpOutlineIcon aria-hidden="true" />}
|
||||
icon={
|
||||
<HelpIcon
|
||||
aria-hidden="true"
|
||||
color="inherit"
|
||||
width="24"
|
||||
height="24"
|
||||
/>
|
||||
}
|
||||
onClick={toggleMenu}
|
||||
/>
|
||||
</Box>
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<Box
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
* Configure Crisp chat for real-time support across all pages.
|
||||
*/
|
||||
|
||||
import { Crisp } from 'crisp-sdk-web';
|
||||
import { ChatboxPosition, Crisp } from 'crisp-sdk-web';
|
||||
import { JSX, PropsWithChildren, ReactNode, useEffect, useState } from 'react';
|
||||
import { createGlobalStyle } from 'styled-components';
|
||||
|
||||
|
|
@ -10,14 +10,17 @@ import { User } from '@/features/auth';
|
|||
import { AbstractAnalytic, AnalyticEvent } from '@/libs';
|
||||
|
||||
const CrispStyle = createGlobalStyle`
|
||||
#crisp-chatbox a{
|
||||
zoom: 0.8;
|
||||
#crisp-chatbox div[role="button"] {
|
||||
zoom: 0.7;
|
||||
right: auto !important;
|
||||
left: 24px !important;
|
||||
}
|
||||
|
||||
@media screen and (width <= 1024px) {
|
||||
.c__modals--opened #crisp-chatbox {
|
||||
display: none!important;
|
||||
}
|
||||
#crisp-chatbox div[data-chat-status="initial"] {
|
||||
bottom: 65px!important;
|
||||
left: 24px !important;
|
||||
margin-left: var(--crisp-customization-button-horizontal) !important;
|
||||
right: auto !important;
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
@ -35,6 +38,22 @@ export const configureCrispSession = (websiteId: string) => {
|
|||
}
|
||||
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 = () => {
|
||||
|
|
|
|||
Loading…
Reference in a new issue