feat: add bal widget

.env.sample

@@ -19,3 +19,4 @@ NEXT_PUBLIC_GHOST_URL_IMAGES_SOURCE=ghost.adresse.data.gouv.fr
 NEXT_PUBLIC_BAL_ADMIN_API_URL=https://bal-admin.adresse.data.gouv.fr/api
 NEXT_PUBLIC_BAL_API_URL=https://api-bal.adresse.data.gouv.fr/v1
 NEXT_PUBLIC_MES_ADRESSES=https://mes-adresses.data.gouv.fr
+NEXT_PUBLIC_BAL_WIDGET_URL=http://localhost:3003

hooks/bal-widget.js

@@ -0,0 +1,24 @@
+import {useEffect, useRef} from 'react'
+
+const BAL_WIDGET_URL = process.env.NEXT_PUBLIC_BAL_WIDGET_URL
+
+export function useBALWidget(config) {
+    const router = useRouter()
+    const balWidgetRootElement = useRef(null)
+
+    useEffect(() => {
+        const script = document.createElement('script')
+        script.src = `${BAL_WIDGET_URL}/bal-widget.js`
+        script.async = true
+        script.defer = true
+        document.body.appendChild(script)
+
+        script.onload = () => {
+            balWidgetRootElement.current = document.getElementById('bal-widget')
+        }
+
+        return () => {
+            document.body.removeChild(script)
+        }
+    }, [config])
+}

pages/_app.js

@@ -9,10 +9,12 @@ import {init as matomoInit} from '@socialgouv/matomo-next'
 
 import '@/styles/template-data-gouv-to-dsfr/normalizer.css'
 import '@/styles/template-data-gouv-to-dsfr/main-alternate.css'
+import { useBALWidget } from '@/hooks/bal-widget'
 
 const MATOMO_URL = process.env.NEXT_PUBLIC_MATOMO_URL
 const MATOMO_SITE_ID = process.env.NEXT_PUBLIC_MATOMO_SITE_ID
 
+
 const {
   withDsfr,
   dsfrDocumentApi
@@ -26,6 +28,10 @@ export {dsfrDocumentApi}
 function MyApp({Component, pageProps}) {
   const {setIsDark} = useIsDark()
 
+  useBALWidget({
+    pages: ['/programme-bal']
+  })
+
   useEffect(() => {
     setIsDark(false)
   }, [setIsDark])