feat: pages evenement (#1809)

* fix: partenaires cards in card wrapper

* feat: add event pages

* fix: update github co

* fix: wording

* feat: add vignettes

* fix: styled component error

* fix: retour review

src/app/actualite/evenements/page.tsx

@@ -0,0 +1,42 @@
+import Section from '@/components/Section'
+import { getBalEvents } from '@/lib/api-bal-admin'
+import banEvents from '@/data/ban-events.json'
+import CardWrapper from '@/components/CardWrapper'
+import EventCard from '@/components/Events/EventCard'
+import { EventType } from '@/types/events.types'
+import { getUpcomingAndPassedEvents, mapEvents } from '@/utils/events'
+
+export default async function EvenementsPage() {
+  const balEvents = await getBalEvents()
+
+  const { allEvents, tagToColor } = mapEvents([...balEvents, ...(banEvents as EventType[])])
+  const { upcomingEvents, pastEvents } = getUpcomingAndPassedEvents(allEvents)
+
+  return (
+    <>
+      <Section title="Prochains évènements">
+        <CardWrapper>
+          {upcomingEvents.map((event, index) => (
+            <EventCard
+              key={index}
+              event={event}
+              tagToColor={tagToColor}
+            />
+          ))}
+        </CardWrapper>
+      </Section>
+      <Section title="Évènements passés">
+        <CardWrapper>
+          {pastEvents.map((event, index) => (
+            <EventCard
+              key={index}
+              event={event}
+              tagToColor={tagToColor}
+              isPassed
+            />
+          ))}
+        </CardWrapper>
+      </Section>
+    </>
+  )
+}

src/app/communaute/organismes-partenaires/page.tsx

@@ -1,10 +1,10 @@
+import CandidacyModal from '@/components/PartenairesDeLaCharte/CandidacyModal'
 import SearchPartenaire from '@/components/PartenairesDeLaCharte/SearchPartenaire'
 import Section from '@/components/Section'
 import { getPartenairesDeLaCharte, getPartenairesDeLaCharteServices, PaginatedPartenairesDeLaCharte } from '@/lib/api-bal-admin'
 import { getDepartements } from '@/lib/api-geo'
 import { PartenaireDeLaCharteTypeEnum } from '@/types/partenaire.types'
 import { displayWithPlural } from '@/utils/string'
-import Button from '@codegouvfr/react-dsfr/Button'
 
 export default async function OrganismesPartenairesPage() {
   const services = await getPartenairesDeLaCharteServices()
@@ -78,15 +78,7 @@ export default async function OrganismesPartenairesPage() {
       </ul>
       <h2>Les organismes partenaires</h2>
       <p>Ces organismes s’engagent à respecter le format Base Adresse Locale (attention, il s’agit d’un format de données bien précis), sa gouvernance et pour ces raisons sont identifiés comme tiers de confiance. Votre organisme respecte déjà ces spécifications mais n’est pas identifié ? Vous pouvez rejoindre les partenaires de la Charte en nous contactant.</p>
-      <Button
-        iconId="fr-icon-questionnaire-line"
-        iconPosition="right"
-        // onClick={() => {}}
-        priority="secondary"
-        style={{ marginBottom: '1rem' }}
-      >
-        Rejoignez-nous
-      </Button>
+      <CandidacyModal services={services} departements={departements} />
       <SearchPartenaire
         searchBy="name"
         services={services}

src/app/communaute/societes-partenaires/page.tsx

@@ -1,10 +1,10 @@
+import CandidacyModal from '@/components/PartenairesDeLaCharte/CandidacyModal'
 import SearchPartenaire from '@/components/PartenairesDeLaCharte/SearchPartenaire'
 import Section from '@/components/Section'
 import { getPartenairesDeLaCharte, getPartenairesDeLaCharteServices, PaginatedPartenairesDeLaCharte } from '@/lib/api-bal-admin'
 import { getDepartements } from '@/lib/api-geo'
 import { PartenaireDeLaCharteTypeEnum } from '@/types/partenaire.types'
 import { displayWithPlural } from '@/utils/string'
-import Button from '@codegouvfr/react-dsfr/Button'
 
 export default async function SocietesPartenairesPage() {
   const services = await getPartenairesDeLaCharteServices()
@@ -55,15 +55,7 @@ export default async function SocietesPartenairesPage() {
       </ul>
       <h2>Les sociétés partenaires</h2>
       <p>Ces organismes s’engagent à respecter le format Base Adresse Locale (attention, il s’agit d’un format de données bien précis), sa gouvernance et pour ces raisons sont identifiés comme tiers de confiance. Votre organisme respecte déjà ces spécifications mais n’est pas identifié ? Vous pouvez rejoindre les partenaires de la Charte en nous contactant.</p>
-      <Button
-        iconId="fr-icon-questionnaire-line"
-        iconPosition="right"
-        // onClick={() => {}}
-        priority="secondary"
-        style={{ marginBottom: '1rem' }}
-      >
-        Rejoignez-nous
-      </Button>
+      <CandidacyModal services={services} departements={departements} />
       <SearchPartenaire
         searchBy="name"
         services={services}

src/app/communes/formation-en-ligne/page.tsx

@@ -0,0 +1,99 @@
+import CardWrapper from '@/components/CardWrapper'
+import EventCard from '@/components/Events/EventCard'
+import Section from '@/components/Section'
+import VideoMiniature from '@/components/VideoMiniature'
+import { getBalEvents } from '@/lib/api-bal-admin'
+import { getUpcomingAndPassedEvents, mapEvents } from '@/utils/events'
+
+const videoFormations = [
+  {
+    title: 'Épisode 1 : Introduction',
+    image: '/img/formations-en-ligne/e1.png',
+    link: {
+      href: 'https://peertube.adresse.data.gouv.fr/w/toyKNe4rKyVD7mUovsWLKd',
+      target: '_blank',
+    },
+  },
+  {
+    title: 'Épisode 2 : Création',
+    image: '/img/formations-en-ligne/e2.png',
+    link: {
+      href: 'https://peertube.adresse.data.gouv.fr/w/aNEtMh7fJCzsAPoGkwvFSg',
+      target: '_blank',
+    },
+  },
+  {
+    title: 'Épisode 3 : Voies',
+    image: '/img/formations-en-ligne/e3.png',
+    link: {
+      href: 'https://peertube.adresse.data.gouv.fr/w/rgksUPigy8KWnmx8WFELDN',
+      target: '_blank',
+    },
+  },
+  {
+    title: 'Épisode 4 : Numéros',
+    image: '/img/formations-en-ligne/e4.png',
+    link: {
+      href: 'https://peertube.adresse.data.gouv.fr/w/un73nNp4kQofNkhT38D6YQ',
+      target: '_blank',
+    },
+  },
+  {
+    title: 'Épisode 5 : Lieux-dits',
+    image: '/img/formations-en-ligne/e5.png',
+    link: {
+      href: 'https://peertube.adresse.data.gouv.fr/w/ttnYNTcXtcubCHQX8kHdGt',
+      target: '_blank',
+    },
+  },
+  {
+    title: 'Épisode 6 : Publication',
+    image: '/img/formations-en-ligne/e6.png',
+    link: {
+      href: 'https://peertube.adresse.data.gouv.fr/w/4uU6AHpTe7coPyhskBSANB',
+      target: '_blank',
+    },
+  },
+  {
+    title: 'Épisode 7 : Récupération',
+    image: '/img/formations-en-ligne/e7.png',
+    link: {
+      href: 'https://peertube.adresse.data.gouv.fr/w/fdD1tzvPfktHkkVK8p7h5D',
+      target: '_blank',
+    },
+  },
+]
+
+export default async function FormationEnLignePage() {
+  const balEvents = await getBalEvents()
+
+  const { allEvents, tagToColor } = mapEvents(balEvents, 'formation')
+  const { upcomingEvents } = getUpcomingAndPassedEvents(allEvents)
+
+  return (
+    <>
+      <Section title="Prochaines formations">
+        {upcomingEvents.length > 0
+          ? (
+              <CardWrapper>
+                {upcomingEvents.map((event, index) => (
+                  <EventCard
+                    key={index}
+                    event={event}
+                    tagToColor={tagToColor}
+                  />
+                ))}
+              </CardWrapper>
+            )
+          : <p>Aucune formation prévue pour le moment</p>}
+      </Section>
+      <Section title="Vidéos des formations">
+        <CardWrapper isSmallCard>
+          {videoFormations.map((video, index) => (
+            <VideoMiniature key={index} {...video} />
+          ))}
+        </CardWrapper>
+      </Section>
+    </>
+  )
+}

src/components/Events/EventCard.styles.ts

@@ -0,0 +1,31 @@
+'use client'
+
+import styled from 'styled-components'
+
+export const StyledEventCard = styled.div<{ $isPassed?: boolean }>`
+    padding: 32px;
+    border: 1px solid ${({ theme }) => theme.colors.grey.border};
+    ${({ $isPassed }) => $isPassed && 'opacity: 0.5;'}
+
+    .event-details {
+        color: ${({ theme }) => theme.colors.primary.main};
+        font-size: 0.9rem;
+        font-weight: bold;
+        margin: 10px 0;
+
+        span[class^="fr-icon"] {
+            margin-right: 5px;
+            color: ${({ theme }) => theme.colors.grey.main};
+        }
+    }
+
+    h3 {
+        font-size: 1.5rem;
+    }
+
+    .fr-btn {
+        &::after {
+            display: none;
+        }
+    }
+`

src/components/Events/EventCard.tsx

@@ -0,0 +1,41 @@
+import { EventType } from '@/types/events.types'
+import { StyledEventCard } from './EventCard.styles'
+import Badge from '@codegouvfr/react-dsfr/Badge'
+import { getFullDate } from '@/utils/date'
+
+interface EventCardProps {
+  event: EventType
+  tagToColor: Record<string, { color: string, background: string }>
+  isPassed?: boolean
+}
+
+export default function EventCard({ event, isPassed, tagToColor }: EventCardProps) {
+  const getAdressToString = (adress: EventType['address']) => {
+    if (!adress) return ''
+    return `${adress.nom}, ${adress.numero} ${adress.voie}, ${adress.codePostal} ${adress.commune}`
+  }
+
+  return (
+    <StyledEventCard $isPassed={isPassed}>
+      <div className="badge-wrapper">
+        <>{event.tags.map(tag => <Badge style={{ backgroundColor: tagToColor[tag].background, color: tagToColor[tag].color, marginRight: 4 }} key={tag} small>{tag}</Badge>)}</>
+      </div>
+      <div className="event-details">
+        <span className="fr-icon-calendar-2-fill" aria-hidden="true" />
+        <span>{getFullDate(new Date(event.date))}</span>
+        {' | '}
+        <span>{event.startHour} - {event.endHour}</span>
+        {event.isOnlineOnly ? <span> | En ligne</span> : event.address ? <span> | {getAdressToString(event.address)}</span> : null}
+      </div>
+      <h3>{event.title}</h3>
+      <p>
+        {event.description}
+      </p>
+      {!event.isSubscriptionClosed && !isPassed && (
+        <a className="fr-btn" href={event.href} target="_blank" rel="noreferrer">
+          S&apos;inscrire
+        </a>
+      )}
+    </StyledEventCard>
+  )
+}

src/components/PartenairesDeLaCharte/SearchPartenaire/SearchPartenaire.styles.ts

@@ -36,15 +36,4 @@ export const StyledWrapper = styled.div`
       }
     }
   }
-
-  .content {
-    width: 100%;
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-    gap: 1rem;
-
-    .fr-card__img {
-      object-fit: contain !important;
-    }
-  }
 `

src/components/PartenairesDeLaCharte/SearchPartenaire/index.tsx

@@ -14,6 +14,7 @@ import { Commune } from '@/types/api-geo.types'
 import { getPageFromHash, resetHash, useHash } from '@/hooks/useHash'
 import { useDebounce } from '@/hooks/useDebounce'
 import { StyledWrapper } from './SearchPartenaire.styles'
+import CardWrapper from '@/components/CardWrapper'
 
 export interface SearchPartenaireProps {
   services: string[]
@@ -98,20 +99,19 @@ export default function SearchPartenaire({
         </div>
         <TagSelect options={services} value={selectedServices} onChange={selectedServices => setSelectedServices(selectedServices)} />
       </div>
-      <div className="content">
+      <CardWrapper isSmallCard>
         {partenaires.data.length === 0 && <p>Aucun partenaire trouvé</p>}
         {partenaires.data.map(partenaire => (
           <Card
             key={partenaire._id}
-            style={{ width: 280 }}
             title={partenaire.name}
             imageComponent={<ResponsiveImage src={partenaire.picture} alt={`Logo de ${partenaire.name}`} style={{ objectFit: 'contain' }} />}
             start={<ul className="fr-badges-group">{partenaire.services.map(service => <Badge key={service} small noIcon severity="info">{service}</Badge>)}</ul>}
             detail={partenaire.codeDepartement.reduce((acc, code) => `${acc} ${getDepartementNom(code)}`, '')}
             {...(partenaire.link ? { footer: <a href={partenaire.link} target="_blank" className="fr-btn fr-btn--secondary">Site du partenaire</a> } : {})}
           />
         ))}
-      </div>
+      </CardWrapper>
       <Pagination
         style={{ marginTop: '1rem' }}
         count={count}

src/components/VideoMiniature/VideoMiniature.styles.ts

@@ -0,0 +1,16 @@
+'use client'
+
+import styled from 'styled-components'
+
+export const StyledWrapper = styled.a`
+    margin: 10px;
+    h3 {
+        font-size: 0.9rem;
+        font-weight: bold;
+        margin: 0;
+    }
+
+    &::after {
+        display: none;
+    }
+`

src/components/VideoMiniature/VideoMiniature.tsx

@@ -0,0 +1,20 @@
+import ResponsiveImage from '../ResponsiveImage'
+import { StyledWrapper } from './VideoMiniature.styles'
+
+interface VideoMiniatureProps {
+  title: string
+  image: string
+  link: {
+    href: string
+    target: string
+  }
+}
+
+export default function VideoMiniature({ title, image, link }: VideoMiniatureProps) {
+  return (
+    <StyledWrapper href={link.href} target={link.target}>
+      <ResponsiveImage src={image} alt={title} />
+      <h3>{title}</h3>
+    </StyledWrapper>
+  )
+}

src/components/VideoMiniature/index.tsx

@@ -0,0 +1 @@
+export { default } from './VideoMiniature'