fix(contributions): fix de l'erreur js dans la console quand une CC était présente dans le localStorage (#6445)

Author: carolineBda

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

@@ -4,7 +4,7 @@ import { useContributionTracking } from "./tracking";
 import { isAgreementSupported, isAgreementValid } from "./contributionUtils";
 import { ContributionGenericContent } from "./ContributionGenericContent";
 import { Contribution } from "./type";
-import { useLocalStorageForAgreement } from "../common/useLocalStorage";
+import { useLocalStorageForAgreementOnPageLoad } from "../common/useLocalStorage";
 import { ContributionGenericAgreementSearch } from "./ContributionGenericAgreementSearch";
 import { Button } from "@codegouvfr/react-dsfr/Button";
 import { fr } from "@codegouvfr/react-dsfr";
@@ -20,7 +20,7 @@ export function ContributionGeneric({ contribution }: Props) {
   const [displayGeneric, setDisplayGeneric] = useState(false);
 
   const [selectedAgreement, setSelectedAgreement] =
-    useLocalStorageForAgreement();
+    useLocalStorageForAgreementOnPageLoad();
   const {
     emitAgreementTreatedEvent,
     emitAgreementUntreatedEvent,
@@ -62,7 +62,7 @@ export function ContributionGeneric({ contribution }: Props) {
             emitDisplayAgreementContent(getTitle());
           }
         }}
-        defaultAgreement={selectedAgreement}
+        selectedAgreement={selectedAgreement}
         trackingActionName={getTitle()}
       />
 

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

@@ -20,29 +20,23 @@ type Props = {
   onAgreementSelect: (agreement?: EnterpriseAgreement) => void;
   onDisplayClick: (ev: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
   contribution: Contribution;
-  defaultAgreement?: EnterpriseAgreement;
+  selectedAgreement?: EnterpriseAgreement;
   trackingActionName: string;
 };
 
 export function ContributionGenericAgreementSearch({
   contribution,
   onAgreementSelect,
   onDisplayClick,
-  defaultAgreement,
+  selectedAgreement,
   trackingActionName,
 }: Props) {
   const { slug } = contribution;
-
-  const [selectedAgreement, setSelectedAgreement] =
-    useState<EnterpriseAgreement>();
-  const [isValid, setIsValid] = useState(
-    defaultAgreement ? isAgreementValid(contribution, defaultAgreement) : false
-  );
+  const [isValid, setIsValid] = useState(false);
   useEffect(() => {
-    setIsValid(
-      isAgreementValid(contribution, selectedAgreement ?? defaultAgreement)
-    );
-  }, [selectedAgreement, defaultAgreement]);
+    setIsValid(isAgreementValid(contribution, selectedAgreement));
+  }, [selectedAgreement]);
+
   const selectedAgreementAlert = (agreement: EnterpriseAgreement) => {
     const isSupported = isAgreementSupported(contribution, agreement);
     const isUnextended = isAgreementUnextended(contribution, agreement);
@@ -96,23 +90,19 @@ export function ContributionGenericAgreementSearch({
       </div>
       <div>
         <AgreementSearchForm
-          onAgreementSelect={(agreement) => {
-            onAgreementSelect(agreement);
-            setSelectedAgreement(
-              isAgreementValid(contribution, agreement) ? agreement : undefined
-            );
-          }}
+          onAgreementSelect={onAgreementSelect}
           selectedAgreementAlert={selectedAgreementAlert}
-          defaultAgreement={defaultAgreement}
+          defaultAgreement={selectedAgreement}
           trackingActionName={trackingActionName}
         />
         {((contribution.isNoCDT && isValid) || !contribution.isNoCDT) && (
           <Button
             className={fr.cx("fr-mt-2w")}
             linkProps={{
-              href: isValid
-                ? `/contribution/${(selectedAgreement ?? defaultAgreement)?.num}-${slug}`
-                : "",
+              href:
+                isValid && selectedAgreement
+                  ? `/contribution/${selectedAgreement?.num}-${slug}`
+                  : "",
               onClick: onDisplayClick,
             }}
           >

packages/code-du-travail-frontend/src/modules/convention-collective/AgreementSearch/AgreementSearchForm.tsx

@@ -8,6 +8,7 @@ import {
   EnterpriseAgreement,
   EnterpriseAgreementSearchInput,
 } from "../../enterprise";
+import { AgreementRoute } from "../../../outils/common/type/WizardType";
 
 type Props = {
   onAgreementSelect: (agreement?: EnterpriseAgreement) => void;
@@ -24,9 +25,15 @@ export const AgreementSearchForm = ({
   defaultAgreement,
   trackingActionName,
 }: Props) => {
-  const [mode, setMode] = useState<
-    "agreementSearch" | "enterpriseSearch" | "noSearch" | undefined
-  >(!!defaultAgreement ? "agreementSearch" : undefined);
+  const [selectedRoute, setSelectedRoute] = useState<
+    AgreementRoute | undefined
+  >();
+
+  useEffect(() => {
+    if (defaultAgreement && !selectedRoute) {
+      setSelectedRoute("agreement");
+    }
+  }, [defaultAgreement]);
 
   const { emitClickP1, emitClickP2 } = useContributionTracking();
 
@@ -39,24 +46,24 @@ export const AgreementSearchForm = ({
             label:
               "Je sais quelle est ma convention collective et je la saisis.",
             nativeInputProps: {
-              checked: mode === "agreementSearch",
-              onChange: () => setMode("agreementSearch"),
+              checked: selectedRoute === "agreement",
+              onChange: () => setSelectedRoute("agreement"),
             },
           },
           {
             label:
               "Je cherche mon entreprise pour trouver ma convention collective.",
             nativeInputProps: {
-              checked: mode === "enterpriseSearch",
+              checked: selectedRoute === "enterprise",
               onChange: () => {
                 onAgreementSelect();
-                setMode("enterpriseSearch");
+                setSelectedRoute("enterprise");
               },
             },
           },
         ]}
       />
-      {mode === "agreementSearch" && (
+      {selectedRoute === "agreement" && (
         <AgreementSearchInput
           onAgreementSelect={(agreement) => {
             emitClickP1(trackingActionName);
@@ -67,7 +74,7 @@ export const AgreementSearchForm = ({
           trackingActionName={trackingActionName}
         />
       )}
-      {mode === "enterpriseSearch" && (
+      {selectedRoute === "enterprise" && (
         <EnterpriseAgreementSearchInput
           onAgreementSelect={(agreement) => {
             emitClickP2(trackingActionName);