feat: LBA-2004 Refacto de la page de détail des recruteurs lba (#1412)

* feat: texte pas d'email dispo pour candidature * feat: refactor component and adding distance to search if relevant * feat: refacto sub component * feat: refacto renaming * feat: bloc intro candidature spont plus refacto fichiers * feat: changement titre * feat: suppression obsolète * feat: progress * feat: progress * feat: bloc 1 ok * feat: should be ok * feat: rename * fix: type check * feat: utilisation context et refacto * feat: use component * feat: externalisation de la marge
mission-apprentissage · Aug 9, 2024 · 7b3569a · 7b3569a
1 parent 14c7ac3
commit 7b3569a
Show file tree

Hide file tree

Showing 20 changed files with 404 additions and 233 deletions.
diff --git a/.talismanrc b/.talismanrc
@@ -139,6 +139,8 @@ fileignoreconfig:
   checksum: 553720667140e5bbf7cef1969c02cbcd3c234defc30bb08208398c1900e29e3b
 - filename: ui/components/ItemDetail/LbaJobDetail.tsx
   checksum: e1c36f9a6cd1cec8d459da178e5c42d723760a63a867dac1f50dd941a334696c
+- filename: ui/components/ItemDetail/LbaRecruteurComponents/LbaRecruteurDetail.tsx
+  checksum: 6e552b66f9238645f70705a0c43c81905e8dbee1c83d364cd89f951f80cb7ea0
 - filename: ui/components/ItemDetail/loadedItemDetail.tsx
   checksum: 9db6a64f202979b07251fd40445961d8db03bdb18b6668f9813bdbdf0d56aa65
 - filename: ui/components/Ressources/conseilsEtAstuces.tsx

diff --git a/ui/components/ItemDetail/AideApprentissage.tsx b/ui/components/ItemDetail/AideApprentissage.tsx
@@ -1,14 +1,11 @@
 import { ExternalLinkIcon } from "@chakra-ui/icons"
 import { Box, Link, Text } from "@chakra-ui/react"
-import { LBA_ITEM_TYPE_OLD } from "shared/constants/lbaitem"
-
-const AideApprentissage = ({ item }) => {
-  const kind = item?.ideaType
 
+const AideApprentissage = () => {
   return (
     <Box pb="0px" mt={6} mb={4} position="relative" background="white" padding="16px 24px" mx={["0", "30px"]}>
       <Text as="h2" variant="itemDetailH2" mt={2}>
-        {kind === LBA_ITEM_TYPE_OLD.FORMATION ? "Ai-je le droit à une aide ?" : "Simuler mes droits aux aides"}
+        Avez-vous droit à des aides financières ?
       </Text>
 
       <Box color="grey.700" mt={6}>

diff --git a/ui/components/ItemDetail/CandidatureLba/CandidatureLba.tsx b/ui/components/ItemDetail/CandidatureLba/CandidatureLba.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Image, Modal, ModalContent, ModalHeader, ModalOverlay, Text, useDisclosure } from "@chakra-ui/react"
+import { Box, Button, Flex, Image, Modal, ModalContent, ModalHeader, ModalOverlay, Text, useDisclosure } from "@chakra-ui/react"
 import { useFormik } from "formik"
 import { useEffect, useState } from "react"
 import { LBA_ITEM_TYPE_OLD } from "shared/constants/lbaitem"
@@ -17,6 +17,19 @@ import hasAlreadySubmittedCandidature from "./services/hasAlreadySubmittedCandid
 import submitCandidature from "./services/submitCandidature"
 import useLocalStorage from "./services/useLocalStorage"
 
+export const NoCandidatureLba = () => {
+  return (
+    <Flex alignItems="center" maxWidth="640px" my={4} backgroundColor="#FEF7DA" p={1}>
+      <Box fontSize="20px" mr={2}>
+        🕵️
+      </Box>
+      <Text color="#66673D" fontSize="12px" fontStyle="italic">
+        Nous n’avons pas de contact pour cette entreprise, peut-être que vous en trouverez un sur internet !
+      </Text>
+    </Flex>
+  )
+}
+
 const CandidatureLba = ({ item, fakeLocalStorage = undefined }) => {
   const { isOpen, onOpen, onClose } = useDisclosure()
   const [sendingState, setSendingState] = useState("not_sent")

diff --git a/ui/components/ItemDetail/CandidatureLba/CandidatureLbaExplanation.tsx b/ui/components/ItemDetail/CandidatureLba/CandidatureLbaExplanation.tsx
diff --git a/ui/components/ItemDetail/ItemDetail.tsx b/ui/components/ItemDetail/ItemDetail.tsx
@@ -16,8 +16,8 @@ import ErrorMessage from "../ErrorMessage"
 
 import getActualTitle from "./ItemDetailServices/getActualTitle"
 import { BuildSwipe, getNavigationButtons } from "./ItemDetailServices/getButtons"
-import getSoustitre from "./ItemDetailServices/getSoustitre"
 import getTags from "./ItemDetailServices/getTags"
+import ItemDetailCard from "./ItemDetailServices/ItemDetailCard"
 import LoadedItemDetail from "./loadedItemDetail"
 
 const getItemDetails = async ({ selectedItem, trainings, jobs, setTrainingsAndSelectedItem, setJobsAndSelectedItem, setHasError }) => {
@@ -158,7 +158,7 @@ const ItemDetail = ({ handleClose, handleSelectItem }) => {
             {actualTitle || ""}
           </Text>
 
-          {getSoustitre({ selectedItem })}
+          <ItemDetailCard selectedItem={selectedItem} />
         </Box>
       </Box>
       <Box>

diff --git a/...etail/ItemDetailServices/getSoustitre.tsx → ...ail/ItemDetailServices/ItemDetailCard.tsx b/...etail/ItemDetailServices/getSoustitre.tsx → ...ail/ItemDetailServices/ItemDetailCard.tsx
@@ -1,7 +1,9 @@
 import { Box, Flex, Text } from "@chakra-ui/react"
 import React from "react"
 
-export default function getSoustitre({ selectedItem }) {
+import ItemDistanceToCenter from "./ItemDistanceToCenter"
+
+export default function ItemDetailCard({ selectedItem }) {
   const res = selectedItem?.company?.mandataire ? (
     <Box color="grey.700" textAlign="left" mt={6}>
       <Flex alignItems="center">
@@ -33,8 +35,11 @@ export default function getSoustitre({ selectedItem }) {
           fill="#2A2A2A"
         />
       </svg>
-      <Text as="span">&nbsp;{selectedItem?.place?.zipCode}</Text>
-      <Text as="span">&nbsp;{selectedItem?.place?.city || selectedItem?.place?.address}</Text>
+      <Text ml={1}>{selectedItem?.place?.zipCode}</Text>
+      <Text ml={1} mr={2}>
+        {selectedItem?.place?.city || selectedItem?.place?.address}
+      </Text>
+      <ItemDistanceToCenter item={selectedItem} />
     </Flex>
   )
 

diff --git a/ui/components/ItemDetail/ItemDetailServices/ItemDistanceToCenter.tsx b/ui/components/ItemDetail/ItemDetailServices/ItemDistanceToCenter.tsx
@@ -0,0 +1,17 @@
+import { ILbaItemFormation2, ILbaItemFtJob, ILbaItemLbaCompany, ILbaItemLbaJob } from "@/../shared"
+import { Text } from "@chakra-ui/react"
+import { useContext } from "react"
+
+import { DisplayContext } from "@/context/DisplayContextProvider"
+
+export default function ItemDistanceToCenter({ item }: { item: ILbaItemFormation2 | ILbaItemLbaCompany | ILbaItemLbaJob | ILbaItemFtJob }) {
+  const { formValues } = useContext(DisplayContext)
+
+  return formValues?.location?.value && (item?.place?.distance ?? -1) >= 0 ? (
+    <Text color="grey.425" fontSize={14}>
+      {item?.place?.distance} km(s) du lieu de recherche
+    </Text>
+  ) : (
+    <></>
+  )
+}
diff --git a/...ail/ItemDetailServices/getJobSurtitre.tsx → .../ItemDetailServices/JobItemCardHeader.tsx b/...ail/ItemDetailServices/getJobSurtitre.tsx → .../ItemDetailServices/JobItemCardHeader.tsx
@@ -10,7 +10,7 @@ const detailActivityProperties = {
   color: "grey.600",
 }
 
-export default function getJobSurtitre({ selectedItem, kind, isMandataire, isCollapsedHeader = undefined }) {
+export default function JobItemCardHeader({ selectedItem, kind, isMandataire, isCollapsedHeader = undefined }) {
   let res = <></>
   const companyName = selectedItem?.company?.name || ""
 

diff --git a/ui/components/ItemDetail/ItemDetailServices/getCompanyGoogleSearchLink.ts b/ui/components/ItemDetail/ItemDetailServices/getCompanyGoogleSearchLink.ts
@@ -0,0 +1,5 @@
+import { ILbaItemFormation2, ILbaItemFtJob, ILbaItemLbaCompany, ILbaItemLbaJob } from "@/../shared"
+
+export const getCompanyGoogleSearchLink = (item: ILbaItemLbaJob | ILbaItemLbaCompany | ILbaItemFtJob | ILbaItemFormation2) => {
+  return `https://www.google.fr/search?q=${encodeURIComponent(`${item.company.name} ${item.place.city || item.place.address}`)}`
+}
diff --git a/ui/components/ItemDetail/ItemDetailServices/getCompanySize.ts b/ui/components/ItemDetail/ItemDetailServices/getCompanySize.ts
@@ -0,0 +1,17 @@
+import { ILbaItemFormation2, ILbaItemFtJob, ILbaItemLbaCompany, ILbaItemLbaJob } from "@/../shared"
+
+import { endsWithNumber } from "@/utils/strutils"
+
+export const getCompanySize = (item: ILbaItemLbaJob | ILbaItemLbaCompany | ILbaItemFtJob | ILbaItemFormation2) => {
+  let companySize = item?.company?.size?.toLowerCase()
+  if (!companySize) {
+    companySize = "non renseigné"
+  } else if (companySize.startsWith("0")) {
+    companySize = "0 à 9 salariés"
+  }
+  if (endsWithNumber(companySize)) {
+    companySize += " salariés"
+  }
+
+  return companySize
+}
diff --git a/ui/components/ItemDetail/LbaJobDetail.tsx → ...mDetail/LbaJobComponents/LbaJobDetail.tsx b/ui/components/ItemDetail/LbaJobDetail.tsx → ...mDetail/LbaJobComponents/LbaJobDetail.tsx
@@ -2,16 +2,16 @@ import { Accordion, Box, Flex, Image, Link, Text } from "@chakra-ui/react"
 import React, { useEffect } from "react"
 import { ILbaItemLbaJob } from "shared"
 
-import { DisplayContext } from "../../context/DisplayContextProvider"
-import { notifyLbaJobDetailView } from "../../services/notifyLbaJobDetailView"
-import { SendPlausibleEvent } from "../../utils/plausible"
-import { formatDate } from "../../utils/strutils"
+import { DisplayContext } from "../../../context/DisplayContextProvider"
+import { notifyLbaJobDetailView } from "../../../services/notifyLbaJobDetailView"
+import { SendPlausibleEvent } from "../../../utils/plausible"
+import { formatDate } from "../../../utils/strutils"
 
-import LbaJobAcces from "./LbaJobComponents/LbaJobAcces"
-import LbaJobCompetences from "./LbaJobComponents/LbaJobCompetences"
-import LbaJobDescription from "./LbaJobComponents/LbaJobDescription"
-import LbaJobQualites from "./LbaJobComponents/LbaJobQualites"
-import LbaJobTechniques from "./LbaJobComponents/LbaJobTechniques"
+import LbaJobAcces from "./LbaJobAcces"
+import LbaJobCompetences from "./LbaJobCompetences"
+import LbaJobDescription from "./LbaJobDescription"
+import LbaJobQualites from "./LbaJobQualites"
+import LbaJobTechniques from "./LbaJobTechniques"
 
 const getContractTypes = (contractTypes) => {
   return contractTypes instanceof Array ? contractTypes.join(", ") : contractTypes

diff --git a/ui/components/ItemDetail/LbbCompanyDetail.tsx b/ui/components/ItemDetail/LbbCompanyDetail.tsx
diff --git a/ui/components/ItemDetail/LocationDetail.tsx b/ui/components/ItemDetail/LocationDetail.tsx
@@ -2,25 +2,16 @@ import { ExternalLinkIcon } from "@chakra-ui/icons"
 import { Box, Flex, Image, Link, Text } from "@chakra-ui/react"
 import { LBA_ITEM_TYPE_OLD } from "shared/constants/lbaitem"
 
-import { endsWithNumber } from "../../utils/strutils"
 import { getCompanyPathLink, getPathLink } from "../../utils/tools"
 
+import { getCompanyGoogleSearchLink } from "./ItemDetailServices/getCompanyGoogleSearchLink"
+import { getCompanySize } from "./ItemDetailServices/getCompanySize"
+import ItemDistanceToCenter from "./ItemDetailServices/ItemDistanceToCenter"
+
 const LocationDetail = ({ item, isCfa }) => {
   const kind: LBA_ITEM_TYPE_OLD = item?.ideaType
 
-  const getGoogleSearchParameters = () => {
-    return encodeURIComponent(`${item.company.name} ${item.place.city || item.place.address}`)
-  }
-
-  let companySize = item?.company?.size?.toLowerCase()
-  if (!companySize) {
-    companySize = "non renseigné"
-  } else if (companySize.startsWith("0")) {
-    companySize = "0 à 9 salariés"
-  }
-  if (endsWithNumber(companySize)) {
-    companySize += " salariés"
-  }
+  const companySize = getCompanySize(item)
 
   const getTitle = (oneItem) => {
     const oneKind = oneItem?.ideaType
@@ -56,7 +47,7 @@ const LocationDetail = ({ item, isCfa }) => {
           <Box mt={3} color="grey.700">
             {item?.company?.place?.city}
           </Box>
-          {item?.place?.distance !== null && <Box fontSize="14px" color="grey.600">{`${item?.place?.distance} km(s) du lieu de recherche`}</Box>}
+          <ItemDistanceToCenter item={item} />
 
           {companyPathLink && (
             <Flex mt={4} alignItems="center" direction="row">
@@ -86,7 +77,7 @@ const LocationDetail = ({ item, isCfa }) => {
           {item?.place?.fullAddress}
         </Box>
 
-        {item?.place?.distance !== null && !item?.company?.mandataire && <Box color="grey.600" fontSize="14px">{`${item?.place?.distance} km(s) du lieu de recherche`}</Box>}
+        {!item?.company?.mandataire && <ItemDistanceToCenter item={item} />}
 
         <Flex mt={4} alignItems="center" direction="row">
           <Box width="30px" minWidth="30px" pl="1px" mr={2}>
@@ -177,13 +168,7 @@ const LocationDetail = ({ item, isCfa }) => {
               </Box>
               <Text as="span">
                 En savoir plus sur
-                <Link
-                  ml="2px"
-                  isExternal
-                  variant="basicUnderlined"
-                  href={`https://www.google.fr/search?q=${getGoogleSearchParameters()}`}
-                  aria-label="Recherche de l'entreprise sur google.fr - nouvelle fenêtre"
-                >
+                <Link ml="2px" isExternal variant="basicUnderlined" href={getCompanyGoogleSearchLink(item)} aria-label="Recherche de l'entreprise sur google.fr - nouvelle fenêtre">
                   {item.company.name} <ExternalLinkIcon mb="3px" ml="2px" />
                 </Link>
               </Text>

diff --git a/ui/components/ItemDetail/LbbCompany.tsx → ...l/RecruteurLbaComponents/RecruteurLba.tsx b/ui/components/ItemDetail/LbbCompany.tsx → ...l/RecruteurLbaComponents/RecruteurLba.tsx
@@ -4,16 +4,15 @@ import React, { useState } from "react"
 
 import { focusWithin } from "@/theme/theme-lba-tools"
 
-import { DisplayContext } from "../../context/DisplayContextProvider"
-import { SearchResultContext } from "../../context/SearchResultContextProvider"
-import { fetchAddresses } from "../../services/baseAdresse"
-import { getItemQueryParameters } from "../../utils/getItemId"
-import { getSearchQueryParameters } from "../../utils/getSearchParameters"
-import { setSelectedMarker } from "../../utils/mapTools"
-
-import TagCandidatureSpontanee from "./TagCandidatureSpontanee"
-
-const LbbCompany = ({ company, handleSelectItem, showTextOnly = undefined, searchForTrainingsOnNewCenter }) => {
+import { DisplayContext } from "../../../context/DisplayContextProvider"
+import { SearchResultContext } from "../../../context/SearchResultContextProvider"
+import { fetchAddresses } from "../../../services/baseAdresse"
+import { getItemQueryParameters } from "../../../utils/getItemId"
+import { getSearchQueryParameters } from "../../../utils/getSearchParameters"
+import { setSelectedMarker } from "../../../utils/mapTools"
+import TagCandidatureSpontanee from "../TagCandidatureSpontanee"
+
+const RecruteurLba = ({ company, handleSelectItem, showTextOnly = undefined, searchForTrainingsOnNewCenter }) => {
   const { selectedMapPopupItem } = React.useContext(SearchResultContext)
   const { formValues } = React.useContext(DisplayContext)
 
@@ -170,4 +169,4 @@ const LbbCompany = ({ company, handleSelectItem, showTextOnly = undefined, searc
   )
 }
 
-export default LbbCompany
+export default RecruteurLba