[Map] hide mission and reporting zone when pop-up is closed

frontend/src/features/Reportings/components/ReportingOverlay/MissionToAttach/index.tsx

@@ -1,5 +1,5 @@
-import { MissionCard } from '@features/map/overlays/missions/MissionCard'
 import { OverlayPositionOnCentroid } from '@features/map/overlays/OverlayPositionOnCentroid'
+import { MissionCard } from '@features/missions/Overlays/MissionCard'
 import { useAppSelector } from '@hooks/useAppSelector'
 import { Layers } from 'domain/entities/layers/constants'
 import { convertToFeature } from 'domain/types/map'

frontend/src/features/Semaphore/components/Overlay/index.tsx

@@ -15,7 +15,7 @@ const SUPER_USER_MARGINS = {
   xRight: -55,
   yBottom: 50,
   yMiddle: 100,
-  yTop: -170
+  yTop: -200
 }
 
 const MARGINS = {

frontend/src/features/map/index.tsx

@@ -24,11 +24,11 @@ import { RegulatoryPreviewLayer } from './layers/Regulatory/RegulatoryPreviewLay
 import { MapExtentController } from './MapExtentController'
 import { MapHistory } from './MapHistory'
 import { ActionOverlay } from './overlays/actions'
-import { MissionOverlays } from './overlays/missions'
 import { ZoomListener } from './ZoomListener'
 import { InterestPointLayer } from '../InterestPoint/components/InterestPointLayer'
 import { ReportingToAttachLayer } from '../missions/Layers/ReportingToAttach'
 import { HoveredReportingToAttachLayer } from '../missions/Layers/ReportingToAttach/HoveredReportingToAttachLayer'
+import { MissionOverlays } from '../missions/Overlays'
 import { ReportingToAttachOverlays } from '../missions/Overlays/ReportingToAttach'
 import { MissionToAttachLayer } from '../Reportings/components/ReportingLayer/MissionToAttach'
 import { HoveredMissionToAttachLayer } from '../Reportings/components/ReportingLayer/MissionToAttach/HoveredMissionToAttachLayer'

frontend/src/features/map/overlays/OverlayPositionOnCentroid.tsx

@@ -1,4 +1,6 @@
+import { missionActions } from '@features/missions/slice'
 import { Layers } from 'domain/entities/layers/constants'
+import { reportingActions } from 'domain/shared_slices/reporting'
 import { resetSelectedSemaphore } from 'domain/shared_slices/SemaphoresSlice'
 import { convertToFeature, type MapClickEvent } from 'domain/types/map'
 import { setOpenedOverlay } from 'domain/use_cases/map/setOpenedOverlay'
@@ -173,14 +175,27 @@ export function OverlayPositionOnCentroid({
 
   useEffect(() => {
     const selectedFeature = convertToFeature(mapClickEvent?.feature)
+
     if (selectedFeature) {
-      unselectSemaphore(selectedFeature)
+      unselectPreviousFeature(selectedFeature)
       dispatch(setOpenedOverlay(String(selectedFeature.getId())))
     }
 
-    function unselectSemaphore(semaphoreFeature: Feature<Geometry>) {
-      if (!String(semaphoreFeature.getId()).includes(Layers.SEMAPHORES.code)) {
+    function unselectPreviousFeature(nextFeature: Feature<Geometry>) {
+      const featureId = String(nextFeature.getId())
+      if (!featureId.includes(Layers.SEMAPHORES.code)) {
         dispatch(resetSelectedSemaphore())
+
+        return
+      }
+      if (!featureId.includes(Layers.MISSIONS.code)) {
+        dispatch(missionActions.resetSelectedMissionIdOnMap())
+
+        return
+      }
+
+      if (!featureId.includes(Layers.REPORTINGS.code)) {
+        dispatch(reportingActions.setSelectedReportingIdOnMap(undefined))
       }
     }
   }, [dispatch, mapClickEvent?.feature])

frontend/src/features/map/overlays/position.ts

@@ -110,7 +110,6 @@ export enum OverlayPosition {
  */
 export function getTopLeftMargin(nextOverlayPosition: OverlayPosition, margins: Margins) {
   const { xLeft, xMiddle, xRight, yBottom, yMiddle, yTop } = margins
-
   switch (nextOverlayPosition) {
     case OverlayPosition.TOP_LEFT:
       return [yTop, xLeft]

frontend/src/features/map/overlays/missions/index.tsx → frontend/src/features/missions/Overlays/index.tsx

@@ -3,12 +3,12 @@ import { convertToFeature } from 'domain/types/map'
 import { useState } from 'react'
 
 import { MissionCard } from './MissionCard'
-import { Layers } from '../../../../domain/entities/layers/constants'
-import { useAppSelector } from '../../../../hooks/useAppSelector'
-import { OverlayPositionOnCentroid } from '../OverlayPositionOnCentroid'
+import { Layers } from '../../../domain/entities/layers/constants'
+import { useAppSelector } from '../../../hooks/useAppSelector'
+import { OverlayPositionOnCentroid } from '../../map/overlays/OverlayPositionOnCentroid'
 
-import type { VectorLayerWithName } from '../../../../domain/types/layer'
-import type { BaseMapChildrenProps } from '../../BaseMap'
+import type { VectorLayerWithName } from '../../../domain/types/layer'
+import type { BaseMapChildrenProps } from '../../map/BaseMap'
 
 const OPTIONS = {
   margins: {