feat: LBA-481 bouton de partage d'offres (#1534)

* feat: new icons * feat: embryon * feat: copy ui candidat ok * feat: ui candidat ok with tracking * feat: copie lien côté espace pro ok * feat: couleur correcte * feat: couleur corrigée * fix: correction séléction offre ft on startup * feat: utilisation constantes * feat: gestion cas lba recruteur sur france entière --------- Co-authored-by: Kevin Barnoin <[email protected]>
mission-apprentissage · Oct 2, 2024 · a05d1ff · a05d1ff
1 parent 0eda235
commit a05d1ff
Show file tree

Hide file tree

Showing 7 changed files with 121 additions and 20 deletions.
diff --git a/shared/constants/lbaitem.ts b/shared/constants/lbaitem.ts
@@ -36,11 +36,10 @@ export const oldItemTypeToNewItemType = (lbaItemType: LBA_ITEM_TYPE_OLD): LBA_IT
     case LBA_ITEM_TYPE_OLD.LBB:
       return LBA_ITEM_TYPE.RECRUTEURS_LBA
     case LBA_ITEM_TYPE_OLD.PE:
-      return LBA_ITEM_TYPE.OFFRES_EMPLOI_PARTENAIRES
     case LBA_ITEM_TYPE_OLD.PEJOB:
-      throw new Error("not used")
+      return LBA_ITEM_TYPE.OFFRES_EMPLOI_PARTENAIRES
     case LBA_ITEM_TYPE_OLD.FORMATION:
-      throw new Error("not used")
+      return LBA_ITEM_TYPE.FORMATION
     default:
       assertUnreachable(lbaItemType)
   }

diff --git a/ui/components/ItemDetail/ShareLink.tsx b/ui/components/ItemDetail/ShareLink.tsx
@@ -0,0 +1,67 @@
+import { Button, Image, Text } from "@chakra-ui/react"
+import { useContext, useEffect, useState } from "react"
+import { ILbaItemFormation, ILbaItemFtJob, ILbaItemLbaCompany, ILbaItemLbaJob } from "shared"
+import { LBA_ITEM_TYPE_OLD, oldItemTypeToNewItemType } from "shared/constants/lbaitem"
+
+import { DisplayContext } from "@/context/DisplayContextProvider"
+
+const ShareLink = ({ item }: { item: ILbaItemFormation | ILbaItemFtJob | ILbaItemLbaCompany | ILbaItemLbaJob }) => {
+  const [copied, setCopied] = useState(false)
+
+  const { formValues } = useContext(DisplayContext)
+
+  useEffect(() => {
+    setCopied(false)
+  }, [item.id])
+
+  const copyLink = (e) => {
+    e.preventDefault()
+
+    const link =
+      item.ideaType === LBA_ITEM_TYPE_OLD.LBA && !formValues?.location?.value
+        ? `${window.location.origin}${window.location.pathname}?display=list&page=fiche&type=lba&itemId=${item.id}`
+        : window.location.href
+    navigator.clipboard.writeText(link).then(function () {
+      setCopied(true)
+    })
+  }
+
+  return (
+    <Button
+      sx={copied ? {} : { borderBottom: "1px solid #000091" }}
+      mx={2}
+      mb={4}
+      px={0}
+      pb={0}
+      height={7}
+      borderRadius={0}
+      _hover={{ bg: "none" }}
+      _focus={{ bg: "none" }}
+      background="none"
+      border="none"
+      display="flex"
+      alignItems="center"
+      fontWeight={400}
+      onClick={copyLink}
+      data-tracking-id={`partager-${oldItemTypeToNewItemType(item.ideaType)}`}
+    >
+      {copied ? (
+        <>
+          <Image mr={2} src="/images/icons/share_copied_icon.svg" aria-hidden={true} alt="" />
+          <Text fontSize={14} color="#18753C">
+            Lien copié !
+          </Text>
+        </>
+      ) : (
+        <>
+          <Image mr={2} src="/images/icons/share_icon.svg" aria-hidden={true} alt="" />
+          <Text fontSize={14} color="bluefrance.500">
+            Partager
+          </Text>
+        </>
+      )}
+    </Button>
+  )
+}
+
+export default ShareLink
diff --git a/ui/components/ItemDetail/loadedItemDetail.tsx b/ui/components/ItemDetail/loadedItemDetail.tsx
@@ -29,6 +29,7 @@ import ItemDetailCard from "./ItemDetailServices/ItemDetailCard"
 import JobItemCardHeader from "./ItemDetailServices/JobItemCardHeader"
 import LbaJobDetail from "./LbaJobComponents/LbaJobDetail"
 import RecruteurLbaDetail from "./RecruteurLbaComponents/RecruteurLbaDetail"
+import ShareLink from "./ShareLink"
 import TrainingDetail from "./TrainingDetail"
 
 const LoadedItemDetail = ({ handleClose, handleSelectItem }) => {
@@ -157,22 +158,23 @@ const LoadedItemDetail = ({ handleClose, handleSelectItem }) => {
             </Box>
           )}
 
-          {isCandidatureLba(selectedItem) && (
-            <>
-              <Divider my={2} />
-              <CandidatureLba item={selectedItem} />
-            </>
-          )}
+          <Divider my={2} />
 
-          {kind === LBA_ITEM_TYPE_OLD.LBA && !isCandidatureLba(selectedItem) && <NoCandidatureLba />}
+          <Flex>
+            <Box flex={1}>
+              {isCandidatureLba(selectedItem) && <CandidatureLba item={selectedItem} />}
 
-          {selectedItem.ideaType === LBA_ITEM_TYPE_OLD.FORMATION && buttonRdvShouldBeDisplayed(selectedItem) && !hasApplied(selectedItem) && (
-            <>
-              <Divider my={2} />
-              <DemandeDeContact context={selectedItem.rdvContext} referrer="LBA" showInModal />
-            </>
-          )}
-          {selectedItem.ideaType === LBA_ITEM_TYPE_OLD.FORMATION && <ItemDetailApplicationsStatus item={selectedItem} mt={2} mb={2} />}
+              {kind === LBA_ITEM_TYPE_OLD.LBA && !isCandidatureLba(selectedItem) && <NoCandidatureLba />}
+
+              {selectedItem.ideaType === LBA_ITEM_TYPE_OLD.FORMATION && buttonRdvShouldBeDisplayed(selectedItem) && !hasApplied(selectedItem) && (
+                <DemandeDeContact context={selectedItem.rdvContext} referrer="LBA" showInModal />
+              )}
+              {selectedItem.ideaType === LBA_ITEM_TYPE_OLD.FORMATION && <ItemDetailApplicationsStatus item={selectedItem} mt={2} mb={2} />}
+            </Box>
+            <Box pt={4}>
+              <ShareLink item={selectedItem} />
+            </Box>
+          </Flex>
         </Box>
       </Box>
 

diff --git a/ui/components/SearchForTrainingsAndJobs/services/searchForJobs.ts b/ui/components/SearchForTrainingsAndJobs/services/searchForJobs.ts
@@ -1,4 +1,5 @@
 import axios from "axios"
+import { LBA_ITEM_TYPE_OLD } from "shared/constants/lbaitem"
 
 import { factorInternalJobsForMap, factorPartnerJobsForMap, layerType, setJobMarkers } from "@/utils/mapTools"
 
@@ -74,7 +75,7 @@ export const searchForJobsFunction = async ({
         results.matchas = results.matchas.filter((matcha) => !matcha.company.mandataire)
       }
 
-      if (followUpItem && ["matcha", "lba"].includes(followUpItem.parameters.type)) {
+      if (followUpItem && [LBA_ITEM_TYPE_OLD.MATCHA, LBA_ITEM_TYPE_OLD.LBA].includes(followUpItem.parameters.type)) {
         selectFollowUpItem({
           itemId: followUpItem.parameters.itemId,
           type: followUpItem.parameters.type,
@@ -184,7 +185,7 @@ export const searchForPartnerJobsFunction = async ({
         peJobs: response.data.peJobs.result && response.data.peJobs.result === "error" ? null : peJobs,
       }
 
-      if (followUpItem && followUpItem.parameters.type === "offres") {
+      if (followUpItem && followUpItem.parameters.type === LBA_ITEM_TYPE_OLD.PEJOB) {
         selectFollowUpItem({
           itemId: followUpItem.parameters.itemId,
           type: followUpItem.parameters.type,

diff --git a/ui/components/espace_pro/OffresTabs.tsx b/ui/components/espace_pro/OffresTabs.tsx
@@ -72,6 +72,7 @@ export const OffresTabs = ({ recruiter, establishmentId, showStats = false }: {
   const { user } = useAuth()
   const confirmationSuppression = useDisclosure()
   const [currentOffre, setCurrentOffre] = useState()
+  const [copied, setCopied] = useState(false)
 
   const jobs: (IJob & { candidatures: number; geo_coordinates: string })[] = recruiter?.jobs ?? []
 
@@ -169,7 +170,11 @@ export const OffresTabs = ({ recruiter, establishmentId, showStats = false }: {
         const isDisable = row.job_status === "Annulée" || row.job_status === "Pourvue" ? true : false
         return (
           <Box display={["none", isDisable ? "none" : "block"]}>
-            <Menu>
+            <Menu
+              onOpen={() => {
+                setCopied(false)
+              }}
+            >
               {({ isOpen }) => (
                 <>
                   <MenuButton isActive={isOpen} as={Button} variant="navdot">
@@ -220,6 +225,27 @@ export const OffresTabs = ({ recruiter, establishmentId, showStats = false }: {
                         <ExternalLinkLine ml={1} color="bluefrance.500" />
                       </Link>
                     </MenuItem>
+                    <MenuItem>
+                      <Link
+                        onClick={(e) => {
+                          e.preventDefault()
+                          e.stopPropagation()
+                          navigator.clipboard.writeText(`${publicConfig.baseUrl}/recherche-apprentissage?&type=${LBA_ITEM_TYPE_OLD.MATCHA}&itemId=${row._id}`).then(function () {
+                            setCopied(true)
+                          })
+                        }}
+                        aria-label="Copier le lien de partage de l'offre dans le presse papier"
+                      >
+                        {copied ? (
+                          <Flex>
+                            <Image mr={2} src="/images/icons/share_copied_icon.svg" aria-hidden={true} alt="" />
+                            <Text color="#18753C">Lien copié !</Text>
+                          </Flex>
+                        ) : (
+                          "Partager l'offre"
+                        )}
+                      </Link>
+                    </MenuItem>
                     {user.type !== AUTHTYPE.CFA && (
                       <MenuItem>
                         <Link

diff --git a/ui/public/images/icons/share_copied_icon.svg b/ui/public/images/icons/share_copied_icon.svg
diff --git a/ui/public/images/icons/share_icon.svg b/ui/public/images/icons/share_icon.svg