chore: make the support CTA more visible in the menu

inclusion-numerique · Nov 28, 2023 · 1a99c73 · 1a99c73
1 parent 50e83c3
commit 1a99c73
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 17 deletions.
diff --git a/apps/main/src/app/(private)/PrivateLayout.tsx b/apps/main/src/app/(private)/PrivateLayout.tsx
@@ -2,6 +2,7 @@
 
 import { Footer } from '@codegouvfr/react-dsfr/Footer';
 import { Header } from '@codegouvfr/react-dsfr/Header';
+import { HeaderProps } from '@codegouvfr/react-dsfr/Header';
 import { MainNavigationProps } from '@codegouvfr/react-dsfr/MainNavigation';
 import { MenuProps } from '@codegouvfr/react-dsfr/MainNavigation/Menu';
 import Badge from '@mui/material/Badge';
@@ -14,6 +15,7 @@ import { trpc } from '@mediature/main/src/client/trpcClient';
 import { ErrorAlert } from '@mediature/main/src/components/ErrorAlert';
 import { FlashMessage } from '@mediature/main/src/components/FlashMessage';
 import { LoadingArea } from '@mediature/main/src/components/LoadingArea';
+import { useLiveChat } from '@mediature/main/src/components/live-chat/useLiveChat';
 import { UserInterfaceSessionProvider } from '@mediature/main/src/components/user-interface-session/UserInterfaceSessionProvider';
 import { signIn, useSession } from '@mediature/main/src/proxies/next-auth/react';
 import {
@@ -42,6 +44,8 @@ export function PrivateLayout(props: PropsWithChildren) {
     }
   }, [logoutCommitted, router, sessionWrapper.status]);
 
+  const { showLiveChat } = useLiveChat();
+
   if (isLoading || sessionWrapper.status !== 'authenticated') {
     return <LoadingArea ariaLabelTarget="contenu" />;
   } else if (error) {
@@ -248,7 +252,18 @@ export function PrivateLayout(props: PropsWithChildren) {
     });
   }
 
-  const quickAccessItems = [userQuickAccessItem(sessionWrapper.data?.user)];
+  const quickAccessItems: HeaderProps.QuickAccessItem[] = [
+    {
+      iconId: 'fr-icon-questionnaire-line',
+      buttonProps: {
+        onClick: (event) => {
+          showLiveChat();
+        },
+      },
+      text: 'Support',
+    },
+    userQuickAccessItem(sessionWrapper.data?.user),
+  ];
 
   if (userInterfaceSession.agentOf.length) {
     quickAccessItems.unshift(

diff --git a/apps/main/src/app/(visitor-only)/auth/sign-in/SignInPage.tsx b/apps/main/src/app/(visitor-only)/auth/sign-in/SignInPage.tsx
@@ -57,12 +57,8 @@ export function SignInPage() {
           <Typography sx={{ fontWeight: 'bold', textAlign: 'center' }}>D&apos;autres collectivités utilisent la plateforme !</Typography>
           <br />
           <p>
-            Donc si vous rencontrez des difficultés ou avez des idées d&apos;évolution, n&apos;hésitez pas à le partager avec le support en
-            choisissant dans le menu de votre compte{' '}
-            <Typography component="span" sx={{ fontStyle: 'italic' }}>
-              &quot;Obtenir de l&apos;aide&quot;
-            </Typography>
-            . Cela permettra à l&apos;ensemble des collectivités d&apos;en bénéficier.
+            Donc si vous rencontrez des difficultés ou avez des idées d&apos;évolution, n&apos;hésitez pas à les partager avec le support disponible
+            depuis le menu de votre compte. Cela permettra à l&apos;ensemble des collectivités d&apos;en bénéficier.
           </p>
         </Typography>
       </Grid>

diff --git a/apps/main/src/components/HeaderUserItem.tsx b/apps/main/src/components/HeaderUserItem.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import DashboardIcon from '@mui/icons-material/Dashboard';
-import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 import LogoutIcon from '@mui/icons-material/Logout';
 import ManageAccountsIcon from '@mui/icons-material/ManageAccounts';
 import Box from '@mui/material/Box';
@@ -15,7 +14,6 @@ import NextLink from 'next/link';
 import { PropsWithChildren, useEffect, useState } from 'react';
 
 import { Avatar } from '@mediature/main/src/components/Avatar';
-import { useLiveChat } from '@mediature/main/src/components/live-chat/useLiveChat';
 import { TokenUserSchemaType } from '@mediature/main/src/models/entities/user';
 import { logout } from '@mediature/main/src/utils/auth';
 import { linkRegistry } from '@mediature/main/src/utils/routes/registry';
@@ -28,8 +26,6 @@ export interface HeaderUserItemProps {
 }
 
 export function HeaderUserItem(props: PropsWithChildren<HeaderUserItemProps>) {
-  const { showLiveChat } = useLiveChat();
-
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
@@ -90,12 +86,6 @@ export function HeaderUserItem(props: PropsWithChildren<HeaderUserItemProps>) {
             </ListItemIcon>
             Mon compte
           </MenuItem>
-          <MenuItem onClick={showLiveChat}>
-            <ListItemIcon>
-              <HelpOutlineIcon fontSize="small" />
-            </ListItemIcon>
-            Obtenir de l&apos;aide
-          </MenuItem>
           <MenuItem onClick={logout}>
             <ListItemIcon>
               <LogoutIcon fontSize="small" />