fix(deps): update nextjs monorepo to v14.2.18 - abandoned

components/ActualitesModal.tsx

@@ -0,0 +1,76 @@
+import parse from 'html-react-parser'
+import React, { useRef } from 'react'
+import sanitizeHtml from 'sanitize-html'
+
+import ModalContainer, { ModalHandles } from 'components/ModalContainer'
+import IconComponent, { IconName } from 'components/ui/IconComponent'
+import { useActualites } from 'utils/actualitesContext'
+
+interface ActualitesModalProps {
+  onClose: () => void
+}
+
+export default function ActualitesModal({ onClose }: ActualitesModalProps) {
+  const modalRef = useRef<ModalHandles>(null)
+  const actualites = useActualites()
+
+  function formaterTexteAvecTag(texteAFormater: string) {
+    const texteAssaini = sanitizeHtml(texteAFormater, {
+      disallowedTagsMode: 'recursiveEscape',
+      allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img']),
+    })
+
+    const texteEnrichi = texteAssaini
+      .replace(
+        /{/g,
+        "<span className='flex items-center w-fit text-s-medium text-accent_1 px-3 bg-accent_1_lighten whitespace-nowrap rounded-full'>"
+      )
+      .replace(/}/g, '</span>')
+
+    return parse(texteEnrichi)
+  }
+
+  const modalTemplate = (
+    <div className='rounded-l-l fixed right-0 bg-white h-full max-w-[min(90%,_620px)] min-w-[min(50%)] overflow-auto pb-3 shadow-m'>
+      <div className='bg-primary p-3'>
+        <div className='flex justify-end'>
+          <button
+            type='button'
+            onClick={(e) => modalRef.current!.closeModal(e)}
+            className='p-2 border-2 border-primary hover:border-white hover:rounded-l'
+          >
+            <IconComponent
+              name={IconName.Close}
+              role='img'
+              focusable={false}
+              aria-label='Fermer la fenêtre'
+              className='w-6 h-6 fill-white'
+            />
+          </button>
+        </div>
+        <h2
+          id='modal-title'
+          className='text-l-bold text-white text-center flex-auto mb-4 whitespace-pre-line'
+        >
+          Actualités
+        </h2>
+      </div>
+
+      <div className='p-6'>
+        <div className='[&_a]:underline [&_a]:text-primary [&_img]:max-w-[200px] [&_img]:my-4 [&_h3]:font-bold [&_h3]:text-primary [&_h3]:my-4'>
+          {formaterTexteAvecTag(actualites?.contenu ?? '')}
+        </div>
+      </div>
+    </div>
+  )
+
+  return (
+    <ModalContainer
+      ref={modalRef}
+      onClose={onClose}
+      label={{ id: 'modal-title' }}
+    >
+      {modalTemplate}
+    </ModalContainer>
+  )
+}

components/NavLinks.tsx

@@ -1,12 +1,21 @@
 'use client'
 
+import { DateTime } from 'luxon'
 import { usePathname, useRouter } from 'next/navigation'
-import React from 'react'
+import React, { useState } from 'react'
 
 import ActualitesMenuButton from 'components/ActualitesMenuButton'
+import ActualitesModal from 'components/ActualitesModal'
 import NavLink from 'components/ui/Form/NavLink'
 import { IconName } from 'components/ui/IconComponent'
-import { estMilo, estSuperviseur, utiliseChat } from 'interfaces/conseiller'
+import {
+  aDeNouvellesActualites,
+  estMilo,
+  estSuperviseur,
+  utiliseChat,
+} from 'interfaces/conseiller'
+import { modifierDateVisionnageActus } from 'services/conseiller.service'
+import { useActualites } from 'utils/actualitesContext'
 import { trackEvent } from 'utils/analytics/matomo'
 import { useConseiller } from 'utils/conseiller/conseillerContext'
 import { usePortefeuille } from 'utils/portefeuilleContext'
@@ -34,6 +43,10 @@ export default function NavLinks({
   const pathname = usePathname()
   const [conseiller] = useConseiller()
   const [portefeuille] = usePortefeuille()
+  const actualites = useActualites()
+
+  const [afficherActualiteModal, setAfficherActualiteModal] =
+    useState<boolean>(false)
 
   const aDesBeneficiaires = portefeuille.length > 0
   const lienProfilBadgeLabel = !conseiller.email
@@ -65,6 +78,12 @@ export default function NavLinks({
     })
   }
 
+  async function ouvrirActualites() {
+    setAfficherActualiteModal(true)
+    modifierDateVisionnageActus(DateTime.now())
+    trackActualite()
+  }
+
   return (
     <>
       <ul>
@@ -181,10 +200,33 @@ export default function NavLinks({
 
         {process.env.NEXT_PUBLIC_ENABLE_LEANBE === 'true' &&
           items.includes(NavItem.Actualites) && (
-            <ActualitesMenuButton
-              conseiller={conseiller}
-              onClick={trackActualite}
-            />
+            <>
+              {estMilo(conseiller) && (
+                <NavLink
+                  label='Actualités'
+                  iconName={IconName.Notification}
+                  className='break-all'
+                  onClick={ouvrirActualites}
+                  showLabelOnSmallScreen={showLabelsOnSmallScreen}
+                  badgeLabel={
+                    actualites &&
+                    aDeNouvellesActualites(
+                      conseiller,
+                      actualites.dateDerniereModification
+                    )
+                      ? '!'
+                      : undefined
+                  }
+                />
+              )}
+
+              {!estMilo(conseiller) && (
+                <ActualitesMenuButton
+                  conseiller={conseiller}
+                  onClick={trackActualite}
+                />
+              )}
+            </>
           )}
       </ul>
       <ul className='border-t-2 border-solid border-white pt-2'>
@@ -222,6 +264,10 @@ export default function NavLinks({
           showLabelOnSmallScreen={showLabelsOnSmallScreen}
         />
       </ul>
+
+      {afficherActualiteModal && (
+        <ActualitesModal onClose={() => setAfficherActualiteModal(false)} />
+      )}
     </>
   )
 }

fixtures/actualites.ts

@@ -0,0 +1,9 @@
+import { Actualites } from 'interfaces/actualites'
+
+export const uneActualite = (): Actualites => {
+  return {
+    contenu:
+      "<h2 class='wp-block-heading'>Nouveauté</h2><a href='http://www.google.com'>http://www.google.com</a>",
+    dateDerniereModification: '2024-10-30',
+  }
+}

fixtures/conseiller.ts

@@ -40,6 +40,7 @@ export const unConseillerJson = (
     notificationsSonores: false,
     aDesBeneficiairesARecuperer: false,
     dateSignatureCGU: '2023-10-03',
+    dateVisionnageActus: '2023-10-03',
   }
   return { ...defaults, ...overrides }
 }

interfaces/actualites.ts

@@ -0,0 +1,4 @@
+export type Actualites = {
+  contenu: string
+  dateDerniereModification: string
+}

interfaces/conseiller.ts

@@ -34,6 +34,7 @@ export interface Conseiller extends BaseConseiller {
   agence?: { nom: string; id?: string }
   structureMilo?: { id: string; nom: string }
   dateSignatureCGU?: string
+  dateVisionnageActus?: string
 }
 
 export function estMilo(conseiller: Conseiller): boolean {
@@ -114,3 +115,15 @@ export function doitSignerLesCGU(conseiller: Conseiller): boolean {
     : DateTime.fromISO(conseiller.dateSignatureCGU) <
         DateTime.fromISO(process.env.VERSION_CGU_CEJ_COURANTE!)
 }
+
+export function aDeNouvellesActualites(
+  { dateVisionnageActus }: Conseiller,
+  dernierePublication: string
+): boolean {
+  if (!dateVisionnageActus) return true
+
+  return (
+    DateTime.fromISO(dateVisionnageActus) <
+    DateTime.fromISO(dernierePublication)
+  )
+}

interfaces/json/conseiller.ts

@@ -1,11 +1,11 @@
 import { Session } from 'next-auth'
 
+import { ConseillerHistorique } from 'interfaces/beneficiaire'
 import {
   BaseConseiller,
   Conseiller,
   StructureConseiller,
 } from 'interfaces/conseiller'
-import { ConseillerHistorique } from 'interfaces/beneficiaire'
 
 export interface ConseillerHistoriqueJson {
   id: string
@@ -48,6 +48,7 @@ export interface ConseillerJson {
   notificationsSonores: boolean
   aDesBeneficiairesARecuperer: boolean
   dateSignatureCGU?: string
+  dateVisionnageActus?: string
 }
 
 export function jsonToBaseConseiller(json: BaseConseillerJson): BaseConseiller {
@@ -64,7 +65,8 @@ export function jsonToConseiller(
   conseillerJson: ConseillerJson,
   { structure, estSuperviseur, estSuperviseurResponsable }: Session.HydratedUser
 ): Conseiller {
-  const { agence, dateSignatureCGU, ...json } = conseillerJson
+  const { agence, dateSignatureCGU, dateVisionnageActus, ...json } =
+    conseillerJson
   const conseiller: Conseiller = {
     ...json,
     structure: structure as StructureConseiller,
@@ -80,5 +82,9 @@ export function jsonToConseiller(
     conseiller.dateSignatureCGU = dateSignatureCGU
   }
 
+  if (dateVisionnageActus) {
+    conseiller.dateVisionnageActus = dateVisionnageActus
+  }
+
   return conseiller
 }

package.json

@@ -18,7 +18,7 @@
   "dependencies": {
     "@elastic/apm-rum": "5.16.1",
     "@elastic/apm-rum-react": "2.0.3",
-    "@next/bundle-analyzer": "14.2.16",
+    "@next/bundle-analyzer": "14.2.17",
     "crypto-js": "4.2.0",
     "dotenv": "16.4.5",
     "elastic-apm-node": "4.8.0",
@@ -28,7 +28,7 @@
     "lodash.isequal": "4.5.0",
     "luxon": "3.5.0",
     "matomo-tracker": "2.2.4",
-    "next": "14.2.16",
+    "next": "14.2.17",
     "next-auth": "4.24.9",
     "next-logger": "5.0.1",
     "next-themes": "0.3.0",
@@ -58,7 +58,7 @@
     "autoprefixer": "^10.4.20",
     "css-loader": "^7.1.2",
     "eslint": "^8.57.1",
-    "eslint-config-next": "14.2.16",
+    "eslint-config-next": "14.2.17",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-jsx-a11y": "^6.10.1",
     "eslint-plugin-prettier": "^5.2.1",

services/actualites.service.ts

@@ -0,0 +1,19 @@
+import { Actualites } from 'interfaces/actualites'
+import { fetchJson } from 'utils/httpClient'
+
+export async function getActualites(): Promise<Actualites | undefined> {
+  const url = process.env.NEXT_PUBLIC_WORDPRESS_ACTUS_CEJ_LINK
+  if (!url) return
+
+  const {
+    content: {
+      modified,
+      content: { rendered },
+    },
+  }: {
+    content: { modified: string; content: { rendered: string } }
+    headers: Headers
+  } = await fetchJson(url)
+
+  return { contenu: rendered, dateDerniereModification: modified }
+}

services/conseiller.service.ts

@@ -72,6 +72,17 @@ export async function modifierDateSignatureCGU(date: DateTime): Promise<void> {
   )
 }
 
+export async function modifierDateVisionnageActus(
+  date: DateTime
+): Promise<void> {
+  const session = await getSession()
+  return apiPut(
+    `/conseillers/${session!.user.id}`,
+    { dateVisionnageActus: date },
+    session!.accessToken
+  )
+}
+
 export async function modifierNotificationsSonores(
   idConseiller: string,
   hasNotificationsSonores: boolean