fix(contribution): bloquer "Afficher les informations" sans CC sélectionnée

packages/code-du-travail-frontend/src/modules/contributions/ContributionGenericAgreementSearch.tsx

@@ -16,6 +16,7 @@ import { Contribution } from "./type";
 import Link from "../common/Link";
 import BlueCard from "../common/BlueCard";
 import { AgreementSearchForm } from "../convention-collective/AgreementSearch/AgreementSearchForm";
+import { AccessibleAlert } from "../outils/common/components/AccessibleAlert";
 
 type Props = {
   onAgreementSelect: (agreement?: Agreement) => void;
@@ -37,9 +38,12 @@ export function ContributionGenericAgreementSearch({
   const router = useRouter();
   const { slug } = contribution;
   const [isValid, setIsValid] = useState(false);
+  const [showMissingAgreementError, setShowMissingAgreementError] =
+    useState(false);
 
   useEffect(() => {
     setIsValid(isAgreementValid(contribution, selectedAgreement));
+    setShowMissingAgreementError(false);
   }, [selectedAgreement]);
 
   const selectedAgreementAlert = (agreement: Agreement) => {
@@ -125,24 +129,49 @@ export function ContributionGenericAgreementSearch({
           }}
         />
         {((contribution.isNoCDT && isValid) || !contribution.isNoCDT) && (
-          <Button
-            className={fr.cx("fr-mt-2w")}
-            type="button"
-            onClick={(event) => {
-              onDisplayClick(isValid && !!selectedAgreement);
-              if (isValid && selectedAgreement) {
-                router.push(
-                  slug === "les-conges-pour-evenements-familiaux"
-                    ? `/contribution/${slug}/${selectedAgreement?.slug || selectedAgreement?.num}`
-                    : `/contribution/${selectedAgreement?.num}-${slug}`
-                );
-              } else {
-                event.preventDefault();
-              }
-            }}
-          >
-            Afficher les informations
-          </Button>
+          <>
+            {showMissingAgreementError && (
+              <AccessibleAlert
+                title="Veuillez sélectionner une convention collective"
+                description={
+                  <p>
+                    Pour afficher des informations personnalisées, vous devez
+                    d’abord sélectionner une convention collective. Si vous ne
+                    souhaitez pas en sélectionner, vous pouvez cliquer sur
+                    «&nbsp;Afficher les informations sans sélectionner une
+                    convention collective&nbsp;» ci-dessous.
+                  </p>
+                }
+                severity="error"
+                className={["fr-mt-2w"]}
+                data-testid="missing-agreement-error"
+              />
+            )}
+            <Button
+              className={fr.cx("fr-mt-2w")}
+              type="button"
+              onClick={(event) => {
+                if (!selectedAgreement) {
+                  event.preventDefault();
+                  setShowMissingAgreementError(true);
+                  return;
+                }
+                setShowMissingAgreementError(false);
+                onDisplayClick(isValid && !!selectedAgreement);
+                if (isValid && selectedAgreement) {
+                  router.push(
+                    slug === "les-conges-pour-evenements-familiaux"
+                      ? `/contribution/${slug}/${selectedAgreement?.slug || selectedAgreement?.num}`
+                      : `/contribution/${selectedAgreement?.num}-${slug}`
+                  );
+                } else {
+                  event.preventDefault();
+                }
+              }}
+            >
+              Afficher les informations
+            </Button>
+          </>
         )}
       </div>
     </BlueCard>

packages/code-du-travail-frontend/src/modules/contributions/__tests__/contributions.test.tsx

@@ -124,6 +124,54 @@ describe("<ContributionLayout />", () => {
       expect(rendering.getByText("my content")).toBeInTheDocument();
     });
 
+    it("should display an error and not navigate when clicking 'Afficher les informations' without selecting any agreement", async () => {
+      fireEvent.click(ccUi.radio.agreementSearchOption.get());
+      expect(ui.generic.missingAgreementError.query()).not.toBeInTheDocument();
+
+      fireEvent.click(ccUi.buttonDisplayInfo.get());
+
+      expect(ui.generic.missingAgreementError.query()).toBeInTheDocument();
+      expect(pushMock).not.toHaveBeenCalled();
+      // The fallback link should still be available
+      expect(ui.generic.linkDisplayInfo.query()).toBeInTheDocument();
+    });
+
+    it("should hide the error when an agreement is selected after the error is shown", async () => {
+      (searchAgreement as jest.Mock).mockImplementation(() =>
+        Promise.resolve([
+          {
+            id: "0016",
+            num: 16,
+            url: "https://www.legifrance.gouv.fr/affichIDCC.do?idConvention=KALICONT000005635624",
+            shortTitle:
+              "Transports routiers et activités auxiliaires du transport",
+            slug: "16-transports-routiers-et-activites-auxiliaires-du-transport",
+            title:
+              "Convention collective nationale des transports routiers et activités auxiliaires du transport du 21 décembre 1950",
+          },
+        ])
+      );
+      fireEvent.click(ccUi.radio.agreementSearchOption.get());
+      fireEvent.click(ccUi.buttonDisplayInfo.get());
+      expect(ui.generic.missingAgreementError.query()).toBeInTheDocument();
+
+      await userEvent.click(ccUi.searchByName.input.get());
+      await userEvent.type(ccUi.searchByName.input.get(), "16");
+      fireEvent.click(ccUi.searchByName.autocompleteLines.IDCC16.name.get());
+
+      expect(ui.generic.missingAgreementError.query()).not.toBeInTheDocument();
+    });
+
+    it("should still allow displaying generic content via the fallback link when no agreement is selected", async () => {
+      fireEvent.click(ccUi.radio.agreementSearchOption.get());
+      // The user clicks the fallback link directly without selecting any CC
+      fireEvent.click(ui.generic.linkDisplayInfo.get());
+      expect(ui.generic.missingAgreementError.query()).not.toBeInTheDocument();
+      expect(ui.generic.linkDisplayInfo.query()).not.toBeInTheDocument();
+      expect(rendering.getByText("my content")).toBeInTheDocument();
+      expect(pushMock).not.toHaveBeenCalled();
+    });
+
     it("should display correctly when a treated agreement is selected", async () => {
       (searchAgreement as jest.Mock).mockImplementation(() =>
         Promise.resolve([

packages/code-du-travail-frontend/src/modules/contributions/__tests__/ui.ts

@@ -1,4 +1,4 @@
-import { byText } from "testing-library-selector";
+import { byTestId, byText } from "testing-library-selector";
 import { searchAgreement } from "../../convention-collective";
 
 export const ui = {
@@ -10,6 +10,7 @@ export const ui = {
     nonTreatedInfo: byText(
       /Cette réponse correspond à ce que prévoit le code du travail/
     ),
+    missingAgreementError: byTestId("missing-agreement-error"),
   },
 };
 export const mockAgreementSearch = (idcc) =>