[Agents] Module feedback / recrutement (#955)

* feat: add feedback widget for agents

- add feedback modal component
- add feedback button when agent is logged in
- add form to send feedback to crisp
- add registration to beta-tester list
- various error handling

* refactor: use httpclient instead of crisp sdk

* test: add TVA tests

* style: change following code review

* fix: changes following PR review

* chore: PR review

.env.dev

@@ -37,3 +37,7 @@ FRANCECONNECT_URL=https://fcp.integ01.dev-franceconnect.fr
 FRANCECONNECT_REDIRECT_URI=http://localhost:3000/api/auth/france-connect/callback
 FRANCECONNECT_POST_LOGOUT_REDIRECT_URI=http://localhost:3000/api/auth/france-connect/logout-callback
 
+
+CRISP_TOKEN_ID=
+CRISP_TOKEN_KEY=
+CRISP_WEBSITE_ID="064fca1b-bdd6-4a81-af56-9f38e40953ad"

app/(header-default)/layout.tsx

@@ -1,10 +1,11 @@
 import { Metadata } from 'next';
-import { Question } from '#components-ui/question';
 import { NPSBanner } from '#components/banner/nps';
 import Footer from '#components/footer';
 import { HeaderServer } from '#components/header/header-server';
 import { meta } from '#components/meta/meta-server';
 import SocialNetworks from '#components/social-network';
+import getSession from '#utils/server-side-helper/app/get-session';
+import QuestionOrFeedback from 'app/_component/question-or-feedback';
 
 export const metadata: Metadata = meta({});
 
@@ -13,13 +14,14 @@ export default async function LayoutWithSearchBar({
 }: {
   children: React.ReactNode;
 }) {
+  const session = await getSession();
   return (
     <>
       <NPSBanner />
       <HeaderServer useSearchBar={true} useAgentCTA={true} />
       <main className="fr-container">{children}</main>
       <SocialNetworks />
-      <Question />
+      <QuestionOrFeedback session={session} />
       <Footer />
     </>
   );

app/(header-home)/layout.tsx

@@ -1,25 +1,27 @@
 import { Metadata } from 'next';
-import { Question } from '#components-ui/question';
 import { NPSBanner } from '#components/banner/nps';
 import Footer from '#components/footer';
 import { HeaderServer } from '#components/header/header-server';
 import { meta } from '#components/meta/meta-server';
 import SocialNetworks from '#components/social-network';
+import getSession from '#utils/server-side-helper/app/get-session';
+import QuestionOrFeedback from 'app/_component/question-or-feedback';
 
 export const metadata: Metadata = meta({});
 
-export default function HomeLayout({
+export default async function HomeLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  const session = await getSession();
   return (
     <>
       <NPSBanner />
       <HeaderServer useSearchBar={false} useAgentCTA={true} />
       <main className="fr-container">{children}</main>
       <SocialNetworks />
-      <Question />
+      <QuestionOrFeedback session={session} />
       <Footer />
     </>
   );

app/(header-minimal)/layout.tsx

@@ -1,20 +1,22 @@
 import { Metadata } from 'next';
-import { Question } from '#components-ui/question';
 import { HeaderServer } from '#components/header/header-server';
 import { meta } from '#components/meta/meta-server';
+import getSession from '#utils/server-side-helper/app/get-session';
+import QuestionOrFeedback from 'app/_component/question-or-feedback';
 
 export const metadata: Metadata = meta({});
 
-export default function HomeLayout({
+export default async function HomeLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  const session = await getSession();
   return (
     <>
       <HeaderServer useSearchBar={false} useAgentCTA={false} />
       <main className="fr-container">{children}</main>
-      <Question />
+      <QuestionOrFeedback session={session} />
     </>
   );
 }

app/(header-search)/layout.tsx

@@ -1,18 +1,20 @@
 import { Metadata } from 'next';
-import { Question } from '#components-ui/question';
 import { meta } from '#components/meta/meta-server';
+import getSession from '#utils/server-side-helper/app/get-session';
+import QuestionOrFeedback from 'app/_component/question-or-feedback';
 
 export const metadata: Metadata = meta({});
 
-export default function HomeLayout({
+export default async function HomeLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  const session = await getSession();
   return (
     <>
       {children}
-      <Question />
+      <QuestionOrFeedback session={session} />
     </>
   );
 }

app/(header-without-search)/layout.tsx

@@ -1,10 +1,11 @@
 import { Metadata } from 'next';
-import { Question } from '#components-ui/question';
 import { NPSBanner } from '#components/banner/nps';
 import Footer from '#components/footer';
 import { HeaderServer } from '#components/header/header-server';
 import { meta } from '#components/meta/meta-server';
 import SocialNetworks from '#components/social-network';
+import getSession from '#utils/server-side-helper/app/get-session';
+import QuestionOrFeedback from 'app/_component/question-or-feedback';
 
 export const metadata: Metadata = meta({});
 
@@ -13,13 +14,14 @@ export default async function LayoutWithSearchBar({
 }: {
   children: React.ReactNode;
 }) {
+  const session = await getSession();
   return (
     <>
       <NPSBanner />
       <HeaderServer useSearchBar={false} useAgentCTA={true} useLogo />
       <main className="fr-container">{children}</main>
       <SocialNetworks />
-      <Question />
+      <QuestionOrFeedback session={session} />
       <Footer />
     </>
   );

app/_component/question-or-feedback.tsx

@@ -0,0 +1,29 @@
+import FeedbackModal from '#components/feedback-modal';
+import { IAgentContactInfo } from '#components/feedback-modal/type';
+import { Question } from '#components/question';
+import { EScope, hasRights } from '#models/user/rights';
+import { ISession } from '#models/user/session';
+
+export default function QuestionOrFeedback({
+  session,
+}: {
+  session: ISession | null;
+}) {
+  const agentContactInfo = getAgentContactInfo(session);
+  if (!agentContactInfo) {
+    return <Question />;
+  }
+  return <FeedbackModal agentContactInfo={agentContactInfo} />;
+}
+
+const getAgentContactInfo = (
+  session: ISession | null
+): IAgentContactInfo | null => {
+  if (!hasRights(session, EScope.isAgent) || !session?.user?.email) {
+    return null;
+  }
+  return {
+    email: session.user.email,
+    name: session.user.fullName,
+  };
+};

app/layout.tsx

@@ -5,7 +5,7 @@ import { meta } from '#components/meta/meta-server';
 import getSession from '#utils/server-side-helper/app/get-session';
 import '../style/dsfr.min.css';
 import '../style/globals.css';
-import { PrefetchImgs } from './component/prefetch-dsfr-imgs';
+import { PrefetchImgs } from './_component/prefetch-dsfr-imgs';
 import { marianne } from './fonts';
 
 export const metadata: Metadata = meta({});

clients/_test/clientTVA/index.test.ts

@@ -9,6 +9,8 @@ describe('clientTVA', () => {
       // '30487444697',
       // '27552032534',
       // '39356000000',
+      '883010316', // Non assujetie
+      '423208180', // Non assujetie
       '43842019051',
       '72217500016',
     ];

clients/routes.ts

@@ -168,6 +168,7 @@ const routes = {
       'https://recherche-entreprises.api.gouv.fr/search',
   },
   tooling: {
+    crisp: 'https://api.crisp.chat/v1/website/',
     grist: 'https://grist.incubateur.net/api/docs/',
     matomo: {
       report: {

components-ui/button/button-close.tsx

@@ -0,0 +1,24 @@
+type IProps = {
+  onClick: () => void;
+  ariaControls: string;
+  ariaLabel: string;
+  className?: string;
+};
+
+export default function ButtonClose({
+  onClick,
+  ariaControls,
+  ariaLabel,
+  className,
+}: IProps) {
+  return (
+    <button
+      onClick={onClick}
+      className={'fr-btn fr-btn--tertiary-no-outline ' + (className ?? '')}
+      aria-label={ariaLabel}
+      aria-controls={ariaControls}
+    >
+      × Fermer
+    </button>
+  );
+}

components-ui/button/index.tsx

@@ -6,18 +6,22 @@ type IProps = {
   small?: boolean;
   to?: string;
   type?: 'submit' | null;
+  disabled?: boolean;
   alt?: boolean;
   target?: '_blank';
+  ariaLabel?: string;
   nofollow?: boolean;
   onClick?: MouseEventHandler;
 };
 
 const ButtonLink: React.FC<PropsWithChildren<IProps>> = ({
   role,
+  disabled,
   to,
   children,
   small = false,
   alt = false,
+  ariaLabel,
   target = '',
   nofollow = false,
   onClick = () => {},
@@ -28,6 +32,8 @@ const ButtonLink: React.FC<PropsWithChildren<IProps>> = ({
         role={role}
         type="submit"
         onClick={onClick}
+        disabled={disabled}
+        aria-label={ariaLabel}
         className={`fr-btn ${alt ? ' fr-btn--secondary ' : ''} ${
           small ? ' fr-btn--sm ' : ''
         }`}
@@ -37,6 +43,7 @@ const ButtonLink: React.FC<PropsWithChildren<IProps>> = ({
     ) : (
       <a
         role={role}
+        aria-label={ariaLabel}
         target={target}
         rel={
           (target === '_blank' ? 'noopener noreferrer' : '') +

components-ui/filter-menu/filter-menu.tsx

@@ -1,7 +1,7 @@
 'use client';
-
-import { PropsWithChildren, useState } from 'react';
+import { PropsWithChildren, useId, useState } from 'react';
 import ButtonLink from '#components-ui/button';
+import ButtonClose from '#components-ui/button/button-close';
 import { Icon } from '#components-ui/icon/wrapper';
 import constants from '#models/constants';
 import {
@@ -40,6 +40,7 @@ export const FilterMenu: React.FC<PropsWithChildren<FilterMenuProps>> = ({
   const ref = useOutsideClick(() => {
     setOpen(false);
   });
+  const id = useId();
 
   return (
     <>
@@ -69,12 +70,12 @@ export const FilterMenu: React.FC<PropsWithChildren<FilterMenuProps>> = ({
             )}
           </label>
           {open && (
-            <label
+            <ButtonClose
               onClick={() => setOpen(false)}
               className={styles['close-container']}
-            >
-              Fermer ✕
-            </label>
+              ariaControls={id}
+              ariaLabel="Fermer les filtres"
+            />
           )}
         </div>
         <div

components-ui/filter-menu/style.module.css

@@ -8,17 +8,19 @@
   border-radius: 3px;
   border: 1px solid var(--annuaire-colors-frBlue);
 }
+
 .selected-filter-container:hover {
   border-color: #0a76f6;
 }
 
-.selected-filter-container > a {
+.selected-filter-container>a {
   padding: 5px 10px 5px 5px;
   font-weight: bold;
   position: absolute;
   right: 0;
 }
-.selected-filter-container > a:hover {
+
+.selected-filter-container>a:hover {
   background-color: #00009111;
 }
 
@@ -43,22 +45,22 @@ span.search-filter-label {
   border-radius: 3px;
   padding: 5px 10px;
 }
-span.search-filter-label > span {
+
+span.search-filter-label>span {
   color: var(--annuaire-colors-frBlue);
 }
+
 span.search-filter-label:hover {
   border-color: #0a76f6;
   background-color: #fefefe;
 }
 
-label.close-container {
+.close-container {
   z-index: 10010;
   display: none;
   position: fixed;
   top: 20px;
   right: 20px;
-  content: 'Fermer ✕';
-  cursor: pointer;
 }
 
 .container {
@@ -73,18 +75,20 @@ label.close-container {
   width: 480px;
   z-index: 1000;
 }
+
 .container:before {
   content: ' ';
   position: absolute;
-  bottom: 100%; /* At the bottom of the tooltip */
+  bottom: 100%;
+  /* At the bottom of the tooltip */
   left: 10%;
   margin-left: 0;
   border-width: 10px;
   border-style: solid;
   border-color: transparent transparent white transparent;
 }
 
-.container > .filter-container {
+.container>.filter-container {
   max-height: 400px;
   overflow-y: auto;
   z-index: 100;
@@ -101,7 +105,8 @@ label.close-container {
     height: 100vh;
     margin-top: 0;
   }
-  label.close-container {
+
+  .close-container {
     display: block;
   }
-}
+}