fix: format and check phone number from MCP data (#2125)

Author: arturlg

packages/app/src/api/core-domain/infra/auth/MonCompteProProvider.ts

@@ -55,7 +55,7 @@ export function MonCompteProProvider<P extends MonCompteProProfile>(
         id: profile.sub,
         email: profile.email,
         name: profile.given_name,
-        phone_number: profile.phone_number,
+        phone_number: profile.phone_number?.replace(/[.\-\s]/g, ""), //TODO: remove when handled in MCP
       };
     },
     ...options,

packages/app/src/components/RHF/DeclarantFields.tsx

@@ -3,6 +3,7 @@ import Button from "@codegouvfr/react-dsfr/Button";
 import Input from "@codegouvfr/react-dsfr/Input";
 import { cx } from "@codegouvfr/react-dsfr/tools/cx";
 import { type SimpleObject } from "@common/utils/types";
+import { useEffect } from "react";
 import { useFormContext } from "react-hook-form";
 
 import { Grid, GridCol } from "../../design-system/base/Grid";
@@ -31,13 +32,22 @@ export const DeclarantFields = <FormType extends SimpleObject>({
     register,
     formState: { errors },
     setValue,
+    getValues,
+    watch,
+    trigger,
   } = useFormContext<FakeFormType>();
 
   const firstnameKey = firstname as FakeKey;
   const lastnameKey = lastname as FakeKey;
   const phoneNumberKey = phoneNumber as FakeKey;
   const emailKey = email as FakeKey;
 
+  const phoneValue = watch(phoneNumberKey) || getValues(phoneNumberKey);
+
+  useEffect(() => {
+    trigger();
+  }, [phoneValue]);
+
   return (
     <>
       <Grid haveGutters>