fix: open links in parent if is embedded in iframe

BaseAdresseNationale · Jun 4, 2024 · 703ea37 · 703ea37
1 parent e2c9d00
commit 703ea37
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 13 deletions.
diff --git a/src/components/commune/CommuneInfosMessage/PublishedFromMesAdresses.tsx b/src/components/commune/CommuneInfosMessage/PublishedFromMesAdresses.tsx
@@ -3,6 +3,7 @@ import { StyledCommuneInfosMessage } from './CommuneInfosMessage.style'
 import { BALStatusBadge } from '../BALStatusBadge/BALStatusBadge'
 import { MES_ADRESSES_URL } from '../../../hooks/useMesAdresses'
 import { BALMesAdresses } from '../../../types/MesAdresses.types'
+import { isEmbeddedInIframe } from '../../../utils/iframe.utils'
 
 type PublishedFromMesAdressesProps = {
   publishedBals: BALMesAdresses[]
@@ -25,7 +26,7 @@ export const PublishedFromMesAdresses = ({ publishedBals }: PublishedFromMesAdre
             <a
               href={`${MES_ADRESSES_URL}/bal/${bal._id}`}
               className='fr-btn fr-btn--primary'
-              target='_blank'
+              target={isEmbeddedInIframe() ? '_parent' : '_blank'}
               rel='noreferrer'
             >
               Consulter

diff --git a/src/components/commune/CommuneInfosMessage/PublishedFromMoissonneur.tsx b/src/components/commune/CommuneInfosMessage/PublishedFromMoissonneur.tsx
@@ -5,6 +5,7 @@ import { useDataGouv } from '../../../hooks/useDataGouv'
 import { MES_ADRESSES_URL } from '../../../hooks/useMesAdresses'
 import { DataGouvOrganization } from '../../../types/DataGouv.types'
 import { APIDepotRevision } from '../../../types/APIDepot.types'
+import { isEmbeddedInIframe } from '../../../utils/iframe.utils'
 
 type PublishedFromMoissonneurProps = {
   currentRevision: APIDepotRevision
@@ -38,7 +39,7 @@ export const PublishedFromMoissonneur = ({ currentRevision }: PublishedFromMoiss
           <p>
             Une Base Adresse Locale a déjà été publiée par{' '}
             <a
-              target='_blank'
+              target={isEmbeddedInIframe() ? '_parent' : '_blank'}
               href={`${organization.page}`}
               rel='noopener noreferrer'
               className='fr-link'
@@ -51,7 +52,12 @@ export const PublishedFromMoissonneur = ({ currentRevision }: PublishedFromMoiss
             <p>
               Cependant cette organisation ne met plus à jour vos adresses. Afin de reprendre la
               main sur votre adressage, vous pouvez créer une Base Adresse Locale sur{' '}
-              <a href={MES_ADRESSES_URL} className='fr-link' target='_blank' rel='noreferrer'>
+              <a
+                href={MES_ADRESSES_URL}
+                className='fr-link'
+                target={isEmbeddedInIframe() ? '_parent' : '_blank'}
+                rel='noreferrer'
+              >
                 Mes-Adresses
               </a>
               et &quot;Forcer la publication&quot;.
@@ -67,7 +73,12 @@ export const PublishedFromMoissonneur = ({ currentRevision }: PublishedFromMoiss
       <p>
         Toutefois, la commune étant compétente en matière d’adressage, vous pouvez prendre la main
         directement via{' '}
-        <a href={MES_ADRESSES_URL} className='fr-link' target='_blank' rel='noreferrer'>
+        <a
+          href={MES_ADRESSES_URL}
+          className='fr-link'
+          target={isEmbeddedInIframe() ? '_parent' : '_blank'}
+          rel='noreferrer'
+        >
           Mes-Adresses
         </a>
         .

diff --git a/src/components/commune/CommuneInfosMessage/PublishedFromOtherClient.tsx b/src/components/commune/CommuneInfosMessage/PublishedFromOtherClient.tsx
@@ -3,6 +3,7 @@ import { StyledCommuneInfosMessage } from './CommuneInfosMessage.style'
 import ConfigContext from '../../../contexts/configContext'
 import { MES_ADRESSES_URL } from '../../../hooks/useMesAdresses'
 import { APIDepotRevision } from '../../../types/APIDepot.types'
+import { isEmbeddedInIframe } from '../../../utils/iframe.utils'
 
 type PublishedFromOtherClientProps = {
   currentRevision: APIDepotRevision
@@ -35,7 +36,12 @@ export const PublishedFromOtherClient = ({ currentRevision }: PublishedFromOther
         <p>
           Cependant cette organisation ne met plus à jour vos adresses. Afin de reprendre la main
           sur votre adressage, vous pouvez créer une Base Adresse Locale sur{' '}
-          <a href={MES_ADRESSES_URL} className='fr-link' target='_blank' rel='noreferrer'>
+          <a
+            href={MES_ADRESSES_URL}
+            className='fr-link'
+            target={isEmbeddedInIframe() ? '_parent' : '_blank'}
+            rel='noreferrer'
+          >
             Mes-Adresses
           </a>
           et &quot;Forcer la publication&quot;.
@@ -45,7 +51,12 @@ export const PublishedFromOtherClient = ({ currentRevision }: PublishedFromOther
           La commune reste toutefois l’autorité compétente en matière d’adressage, et vous pouvez
           décider à tout moment de reprendre la main sur la publication de votre BAL via
           l&apos;outil{' '}
-          <a href={MES_ADRESSES_URL} className='fr-link' target='_blank' rel='noreferrer'>
+          <a
+            href={MES_ADRESSES_URL}
+            className='fr-link'
+            target={isEmbeddedInIframe() ? '_parent' : '_blank'}
+            rel='noreferrer'
+          >
             Mes-Adresses
           </a>
           .

diff --git a/src/components/particulier/AdresseFoundInBAN/AdresseFoundInBAN.tsx b/src/components/particulier/AdresseFoundInBAN/AdresseFoundInBAN.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import { isEmbeddedInIframe } from '../../../utils/iframe.utils'
 
 function AdresseFoundInBAN() {
   return (
@@ -11,7 +12,7 @@ function AdresseFoundInBAN() {
       <p>
         Vous pouvez consulter la liste de ces organisations à cette page :{' '}
         <a
-          target='_blank'
+          target={isEmbeddedInIframe() ? '_parent' : '_blank'}
           className='fr-link'
           href='https://adresse.data.gouv.fr/donnees-nationales/usages'
           rel='noreferrer'

diff --git a/src/contexts/configContext.tsx b/src/contexts/configContext.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { useBALAdmin } from '../hooks/useBALAdmin'
-
+import { isEmbeddedInIframe } from '../utils/iframe.utils'
 export interface BALWidgetLink {
   label: string
   url: string
@@ -41,7 +41,7 @@ export function ConfigProvider({ children }: ConfigProviderProps) {
   const [config, setConfig] = useState<BALWidgetConfig | null>(null)
   const { getConfig } = useBALAdmin()
   const [isLoading, setIsLoading] = useState(true)
-  const isEmbeddedInIframe = window !== window.parent
+  const isEmbedded = isEmbeddedInIframe()
 
   useEffect(() => {
     function getConfigFromParent(event: { data: { type: string; content: BALWidgetConfig } }) {
@@ -57,17 +57,17 @@ export function ConfigProvider({ children }: ConfigProviderProps) {
       setIsLoading(false)
     }
 
-    if (isEmbeddedInIframe) {
+    if (isEmbedded) {
       window.parent.postMessage({ type: 'BAL_WIDGET_READY' }, '*')
       window.addEventListener('message', getConfigFromParent)
     } else {
       fetchConfig()
     }
 
     return () => {
-      isEmbeddedInIframe && window.removeEventListener('message', getConfigFromParent)
+      isEmbedded && window.removeEventListener('message', getConfigFromParent)
     }
-  }, [isEmbeddedInIframe, getConfig])
+  }, [isEmbedded, getConfig])
 
   return <ConfigContext.Provider value={config}>{!isLoading && children}</ConfigContext.Provider>
 }

diff --git a/src/hooks/useCommuneInfos.tsx b/src/hooks/useCommuneInfos.tsx
@@ -6,6 +6,7 @@ import { useAPIDepot } from './useAPIDepot'
 import { useMesAdressesAPI } from './useMesAdresses'
 import { APIDepotRevision } from '../types/APIDepot.types'
 import { BALMesAdresses } from '../types/MesAdresses.types'
+import { isEmbeddedInIframe } from '../utils/iframe.utils'
 
 const ADRESSE_DATA_GOUV_URL =
   process.env.REACT_APP_ADRESSE_DATA_GOUV_URL || 'https://adresse.data.gouv.fr'
@@ -35,7 +36,12 @@ const formatInfosCommune = (communeInfos: CommuneInfosData) => {
         <p>
           Votre commune n’a pas encore publié sa Base Adresse Locale. Vous trouverez tous les
           renseignements nécessaires à commencer votre adressage sur{' '}
-          <a href={`${ADRESSE_DATA_GOUV_URL}/gerer-mes-adresses`} className='fr-link'>
+          <a
+            href={`${ADRESSE_DATA_GOUV_URL}/gerer-mes-adresses`}
+            target={isEmbeddedInIframe() ? '_parent' : '_blank'}
+            className='fr-link'
+            rel='noreferrer'
+          >
             cette page
           </a>
           .

diff --git a/src/utils/iframe.utils.ts b/src/utils/iframe.utils.ts
@@ -0,0 +1 @@
+export const isEmbeddedInIframe = () => window !== window.parent