fix(event): add fallback image when no featuredEventPhoto are set (#551)

Co-authored-by: malves.externe <malves.externe@bedrockstreaming.com>

Author: mathieumure

modules/event/components/EventCard.tsx

@@ -34,7 +34,7 @@ export const EventCard: FC<Props> = ({ event }) => {
 
       <div className={styles.venue}>
         <Image
-          src={event.featuredEventPhoto.highResUrl}
+          src={event.featuredEventPhoto?.highResUrl ?? '/lyonjs.webp'}
           alt={event.title}
           className={styles.picture}
           loading="lazy"

modules/event/components/EventDetail.tsx

@@ -51,7 +51,13 @@ export const EventDetail: React.FC<Props> = async ({ event }) => {
           <ReactMarkdown>{event.description}</ReactMarkdown>
         </div>
         <div className={styles.sideContent}>
-          <Image src={event.featuredEventPhoto.highResUrl} alt="" className={styles.image} width={240} height={150} />
+          <Image
+            src={event.featuredEventPhoto?.highResUrl ?? '/lyonjs.webp'}
+            alt=""
+            className={styles.image}
+            width={240}
+            height={150}
+          />
           {event.venues && <Location venue={Array.isArray(event.venues) ? event.venues[0] : event.venues} />}
         </div>
         {replays}

modules/event/components/EventMarkup.tsx

@@ -44,7 +44,7 @@ export const EventMarkup: React.FC<Props> = ({ event }) => {
           availability: 'https://schema.org/InStock',
         },
         image: [
-          event.featuredEventPhoto.highResUrl,
+          event.featuredEventPhoto?.highResUrl ?? '/lyonjs.webp',
           ...(event.photoAlbum ? event.photoAlbum.photoSample.map((image) => image.source) : []),
         ],
         description: event.description,

modules/event/components/EventTile.tsx

@@ -13,7 +13,7 @@ export const EventTile: React.FC<Props> = ({ event }) => {
 
   return (
     <article className={styles.eventTile} aria-label={event.title}>
-      <Image src={event.featuredEventPhoto.highResUrl} alt="" width={160} height={90} />
+      <Image src={event.featuredEventPhoto?.highResUrl ?? '/lyonjs.webp'} alt="" width={160} height={90} />
       <div className={styles.content}>
         <h2>{event.title}</h2>
         <div className={styles.time}>{formattedDayAndMonth}</div>

modules/event/types.ts

@@ -35,7 +35,7 @@ export type Event = {
   description: string;
   eventUrl: string;
   dateTime: string;
-  featuredEventPhoto: {
+  featuredEventPhoto?: {
     highResUrl: string;
   };
   rsvps: {