fix: LBA-2202 affichage erreur pj sur formulaire candidatuer (#1603)

* fix: qq souci de dom nesting

* fix: affichage champ en erreur

* feat: espacement

.talismanrc

@@ -65,6 +65,10 @@ fileignoreconfig:
   checksum: 71dd55af4f1f44fd2b69dee91f0fc8006f3b9e0bd80d40271c73697d4eea9ea2
 - filename: server/src/http/controllers/user.controller.test.ts
   checksum: 2c8a4a9e141d7829c7f717dc5a179435313f157a052df3dfe55fd64104754a35
+- filename: server/src/http/controllers/v2/applications.controller.v2.test.ts
+  checksum: bbbbd6c52ef2491fb6b0468a730c91fc3aaa77154429c220f8270b46b83afa07
+- filename: server/src/http/controllers/v2/appointment.controller.v2.test.ts
+  checksum: bf324d263445d1ffb1acc6b5203e36449973dea7d7fce6832b933d7a375f74bc
 - filename: server/src/http/controllers/v2/jobs.controller.v2.test.ts
   checksum: 06366000e6615ce90b5dedbd4792eac0a93ce5a0cf1459273e3cc9bbdf867e4f
 - filename: server/src/http/routes/appointmentRequest.controller.ts
@@ -139,8 +143,12 @@ fileignoreconfig:
   checksum: 27b6e1af0a5e079720d525534486bb02552431fe4cff9560ebf2cc9e16468b7b
 - filename: shared/constants/recruteur.ts
   checksum: af4631fe998b78b13691dbc821a8ffa71ffc2f4cb6967361cb5ef19965dc95cb
+- filename: shared/fixtures/appointment.fixture.ts
+  checksum: 9090cddf673370dec0a6196d368ac1e99f8922feb1e55ada277c1e0339bdb016
 - filename: shared/fixtures/recruiter.fixture.ts
   checksum: c540cb13c2235d69c13e1964e3391b9c935bf7991dafe2cc21e9965c974378e6
+- filename: shared/fixtures/referentiel/onisep.fixture.ts
+  checksum: 3f54d57761ea54731e3cfa80013d3f8b300a5f275beb8a29cfca235b6a8d44f7
 - filename: shared/fixtures/userWithAccount.fixture.ts
   checksum: bf864b963375d5836150faf3e343e482a8612552581bd39be21b4f1e8f566971
 - filename: shared/helpers/generateUri.ts
@@ -177,6 +185,8 @@ fileignoreconfig:
   checksum: cdeae2ef94431bbe8fd1bb0f1bc0c007c938c1a1d4513316cc44cb966b7f4268
 - filename: ui/components/InfoBanner/InfoBanner.tsx
   checksum: e5f8bd78ea46335fbb8784eabc01391be68922960f7d04ce9e8755484d10ce32
+- filename: ui/components/ItemDetail/DidYouKnow.tsx
+  checksum: 88f2245cd7c4d0f962f53bb6e3dd8179ac98cfd8202f1d985f46c4b07c1d75ee
 - filename: ui/components/ItemDetail/ItemDetail.tsx
   checksum: 1fcc0442306f83b5e45bf7da67304527598d7749b9e2642c6d4628d3b4f15a9c
 - filename: ui/components/ItemDetail/LbaJobComponents/LbaJobTechniques.tsx
@@ -223,14 +233,6 @@ fileignoreconfig:
   checksum: 1ad48425b890a5ed3de19d079692e2ef7eac76483339a469a6cd9bc6d796ad26
 - filename: ui/utils/api.utils.ts
   checksum: 324cd501354cfff65447c2599c4cc8966aa8aac30dda7854623dd6f7f7b0d34e
-- filename: server/src/http/controllers/v2/applications.controller.v2.test.ts
-  checksum: bbbbd6c52ef2491fb6b0468a730c91fc3aaa77154429c220f8270b46b83afa07
-- filename: shared/fixtures/referentiel/onisep.fixture.ts
-  checksum: 3f54d57761ea54731e3cfa80013d3f8b300a5f275beb8a29cfca235b6a8d44f7
-- filename: server/src/http/controllers/v2/appointment.controller.v2.test.ts
-  checksum: bf324d263445d1ffb1acc6b5203e36449973dea7d7fce6832b933d7a375f74bc
-- filename: shared/fixtures/appointment.fixture.ts
-  checksum: 9090cddf673370dec0a6196d368ac1e99f8922feb1e55ada277c1e0339bdb016
 scopeconfig:
 - scope: node
 custom_patterns:

ui/components/ItemDetail/CandidatureLba/CandidatureLbaFileDropzone.tsx

@@ -6,7 +6,7 @@ import { useDropzone } from "react-dropzone"
 const CandidatureLbaFileDropzone = ({ setFileValue, formik }) => {
   const [fileData, setFileData] = useState(formik.values.fileName ? { fileName: formik.values.fileName, fileContent: formik.values.fileContent } : null)
   const [fileLoading, setFileLoading] = useState(false)
-  const [showUnacceptedFileMessage, setShowUnacceptedFileMessages] = useState(false)
+  const [showUnacceptedFileMessages, setShowUnacceptedFileMessages] = useState(false)
 
   const onRemoveFile = () => {
     setFileValue(null)
@@ -58,7 +58,7 @@ const CandidatureLbaFileDropzone = ({ setFileValue, formik }) => {
 
   const getFileDropzone = () => {
     return (
-      <FormControl cursor={hasSelectedFile() ? "auto" : "pointer"} data-testid="fileDropzone" isInvalid={formik.touched.fileName && formik.errors.fileName}>
+      <FormControl cursor={hasSelectedFile() ? "auto" : "pointer"} data-testid="fileDropzone" isInvalid={showUnacceptedFileMessages}>
         {/* @ts-expect-error: TODO */}
         <Input {...getInputProps()} />
         {isDragActive ? (
@@ -76,7 +76,7 @@ const CandidatureLbaFileDropzone = ({ setFileValue, formik }) => {
             </Box>
           </Flex>
         )}
-        {showUnacceptedFileMessage && <FormErrorMessage ml={6}>⚠ Le fichier n&apos;est pas au bon format (autorisé : .docx ou .pdf, &lt;3mo, max 1 fichier)</FormErrorMessage>}
+        {showUnacceptedFileMessages && <FormErrorMessage ml={6}>⚠ Le fichier n&apos;est pas au bon format (autorisé : .docx ou .pdf, &lt;3mo, max 1 fichier)</FormErrorMessage>}
         <FormErrorMessage ml={6}>{formik.errors.fileName}</FormErrorMessage>
       </FormControl>
     )
@@ -119,6 +119,7 @@ const CandidatureLbaFileDropzone = ({ setFileValue, formik }) => {
     maxFiles: 1,
     onDropRejected(fileRejections) {
       const [fileRejection] = fileRejections
+      setShowUnacceptedFileMessages(true)
       const { errors } = fileRejection ?? {}
       const [error] = errors
       const { message } = error ?? {}
@@ -129,7 +130,7 @@ const CandidatureLbaFileDropzone = ({ setFileValue, formik }) => {
   })
 
   return (
-    <Box p="20px" width="97%" border="1px dashed" borderColor="grey.600" {...getRootProps()}>
+    <Box p="20px" width="97%" border="1px dashed" borderColor={showUnacceptedFileMessages ? "red.500" : "grey.600"} {...getRootProps()}>
       {fileLoading ? getSpinner() : hasSelectedFile() ? getSelectedFile() : getFileDropzone()}
     </Box>
   )

ui/components/ItemDetail/DidYouKnow.tsx

@@ -18,17 +18,16 @@ const DidYouKnow = () => {
         <TagCandidatureSpontanee />
       </Box>
       <Text pb={4}>
-        <Text>Un employeur vous a proposé un entretien ?</Text>
-        <Text>
-          <Link
-            isExternal
-            href="https://dinum.didask.com/courses/demonstration/60d1adbb877dae00003f0eac"
-            variant="basicUnderlined"
-            aria-label="Conseils de préparation à un entretien - nouvelle fenêtre"
-          >
-            On vous donne des conseils pour vous aider à le préparer. <ExternalLinkIcon mb="3px" ml="2px" />
-          </Link>
-        </Text>
+        Un employeur vous a proposé un entretien ?
+        <br />
+        <Link
+          isExternal
+          href="https://dinum.didask.com/courses/demonstration/60d1adbb877dae00003f0eac"
+          variant="basicUnderlined"
+          aria-label="Conseils de préparation à un entretien - nouvelle fenêtre"
+        >
+          On vous donne des conseils pour vous aider à le préparer. <ExternalLinkIcon mb="3px" ml="2px" />
+        </Link>
       </Text>
     </Box>
   )

ui/components/ItemDetail/ItemDetailServices/ItemDetailCard.tsx

@@ -42,6 +42,7 @@ export default function ItemDetailCard({ selectedItem }) {
         <Text whiteSpace="nowrap" ml={1} mr={2}>
           {selectedItem?.place?.city || selectedItem?.place?.address}
         </Text>
+        <br />
         <ItemDistanceToCenter item={selectedItem} />
       </Flex>
     </Flex>

ui/components/ItemDetail/ItemDetailServices/ItemDistanceToCenter.tsx

@@ -8,7 +8,7 @@ export default function ItemDistanceToCenter({ item }: { item: ILbaItemFormation
   const { formValues } = useContext(DisplayContext)
 
   return formValues?.location?.value && (item?.place?.distance ?? -1) >= 0 ? (
-    <Text color="grey.425" whiteSpace="nowrap" fontSize={14}>
+    <Text as="span" color="grey.425" whiteSpace="nowrap" fontSize={14}>
       {item?.place?.distance} km(s) du lieu de recherche
     </Text>
   ) : (

ui/components/ItemDetail/ItemDetailServices/ItemLocalisation.tsx

@@ -18,6 +18,7 @@ export default function ItemLocalisation({ item }: { item: ILbaItemFormation2 |
           <ExternalLinkIcon mb="3px" ml="2px" />
         </Link>
       </Text>
+      <br />
       <ItemDistanceToCenter item={item} />
     </Text>
   )

ui/components/ItemDetail/LbaJobComponents/LbaJobDetail.tsx

@@ -187,6 +187,7 @@ const LbaJobDetail = ({ job }) => {
               Localisation :{" "}
             </Text>
             <Text as="span">{job.place.city}</Text>
+            <br />
             <ItemDistanceToCenter item={job} />
           </Text>
         )}

ui/components/ItemDetail/RecruteurLbaComponents/RecruteurLbaDetail.tsx

@@ -191,14 +191,16 @@ const RecruteurLbaDetail = ({ recruteurLba }: { recruteurLba: ILbaItemLbaCompany
                     <br />
                     Voici un exemple de relance par téléphone :
                     <br />
-                    <Text py={4} fontStyle="italic" color="grey.425">
+                    <Text as="span" py={4} fontStyle="italic" color="grey.425">
                       “Bonjour,
                       <br />
                       Je suis [Prénom Nom]. Je vous appelle car je vous ai envoyé ma candidature par mail le [jour/mois] pour un poste d'apprenti [intitulé du poste visé]. N'ayant
                       pas reçu de réponse, je me permets de vous relancer car je suis vraiment très intéressé·e par votre entreprise. Je serai heureux·se de vous expliquer plus en
                       détail ma motivation lors d'un rendez-vous. Pourriez-vous me dire à qui je dois m’adresser pour savoir où en est ma candidature et quand puis-je espérer
                       recevoir une réponse ?”
                     </Text>
+                    <br />
+                    <br />
                     <strong>Vous avez une proposition d’entretien ?</strong>
                     <br />
                     Préparez-vous avec ce quizz interactif :