Adapt touristic event module to display dates correctly

frontend/src/components/pages/details/components/DetailsDates.tsx

@@ -0,0 +1,92 @@
+import { FormattedMessage, useIntl } from 'react-intl';
+
+type DetailsDatesProps = {
+  dates?: {
+    hasEndTime: boolean;
+    hasBeginTime: boolean;
+    beginDate: string;
+    endDate: string;
+  };
+};
+
+const DetailsDates: React.FC<DetailsDatesProps> = ({ dates }) => {
+  const intl = useIntl();
+  if (!dates) {
+    return null;
+  }
+
+  const { beginDate, endDate, hasBeginTime, hasEndTime } = dates;
+
+  const dateFormatOptions = {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  } as Intl.DateTimeFormatOptions;
+
+  const timeFormatOptions = {
+    hour: 'numeric',
+    minute: 'numeric',
+  } as Intl.DateTimeFormatOptions;
+
+  const dateTimeFormatOptions = {
+    ...dateFormatOptions,
+    ...timeFormatOptions,
+  };
+
+  if (beginDate.split('T')[0] === endDate.split('T')[0]) {
+    if (!hasEndTime) {
+      // Output ex : "on November 13, 2024"
+      return (
+        <FormattedMessage
+          id={'dates.singleDate'}
+          values={{
+            date: new Intl.DateTimeFormat(
+              intl.locale,
+              hasBeginTime ? dateTimeFormatOptions : dateFormatOptions,
+            ).format(new Date(beginDate)),
+          }}
+        />
+      );
+    }
+    // Output ex : "on November 13, 2024 from 10:00 to 12:00"
+    return (
+      <>
+        <FormattedMessage
+          id={'dates.singleDate'}
+          values={{
+            date: new Intl.DateTimeFormat(intl.locale).format(new Date(beginDate)),
+          }}
+        />{' '}
+        <FormattedMessage
+          id={'dates.rangeTime'}
+          values={{
+            beginTime: new Intl.DateTimeFormat(intl.locale, timeFormatOptions).format(
+              new Date(beginDate),
+            ),
+            endTime: new Intl.DateTimeFormat(intl.locale, timeFormatOptions).format(
+              new Date(endDate),
+            ),
+          }}
+        />
+      </>
+    );
+  }
+  // Output ex : "from November 13, 2024 to December 25, 2024"
+  return (
+    <FormattedMessage
+      id={'dates.multipleDates'}
+      values={{
+        beginDate: new Intl.DateTimeFormat(
+          intl.locale,
+          hasBeginTime ? dateTimeFormatOptions : dateFormatOptions,
+        ).format(new Date(beginDate)),
+        endDate: new Intl.DateTimeFormat(
+          intl.locale,
+          hasEndTime ? dateTimeFormatOptions : dateFormatOptions,
+        ).format(new Date(endDate)),
+      }}
+    />
+  );
+};
+
+export default DetailsDates;

frontend/src/components/pages/details/components/DetailsPreview/DetailsPreview.tsx

@@ -32,17 +32,20 @@ import { TouristicEventDetails } from 'modules/touristicEvent/interface';
 import { DetailsTrekFamilyCarousel } from '../DetailsTrekFamilyCarousel';
 import { DetailsTrekParentButton } from '../DetailsTrekParentButton';
 import DetailsBreadcrumb from './DetailsBreadcrumb';
+import DetailsDates from '../DetailsDates';
 
 interface DetailsPreviewInformation extends DetailsInformation {
   types?: TouristicContentDetailsType[];
-  logoUri?: string;
+  logoUri?: string | null;
   period?: string | null;
   wind?: string[];
   orientation?: string[];
   maxElevation?: number;
   participantNumber?: number;
   meetingPoint?: string;
-  date?: {
+  dates?: {
+    hasEndTime: boolean;
+    hasBeginTime: boolean;
     beginDate: string;
     endDate: string;
   };
@@ -110,7 +113,7 @@ export const DetailsPreview: React.FC<DetailsPreviewProps> = ({
           />
         </div>
       )}
-      {informations.logoUri !== undefined && informations.logoUri.length > 0 && (
+      {informations.logoUri && informations.logoUri.length > 0 && (
         <Image
           id="details_logo"
           className="hidden desktop:block absolute top-0 right-0 size-30 object-contain object-center"
@@ -170,31 +173,10 @@ export const DetailsPreview: React.FC<DetailsPreviewProps> = ({
             </LocalIconInformation>
           </ToolTip>
         )}
-        {informations.date && (
+        {informations.dates && (
           <ToolTip toolTipText={intl.formatMessage({ id: 'tooltip.date' })}>
             <LocalIconInformation icon={Calendar} className={classNameInformation}>
-              {informations.date.beginDate === informations.date.endDate ? (
-                <FormattedMessage
-                  id={'dates.singleDate'}
-                  values={{
-                    date: new Intl.DateTimeFormat(intl.locale).format(
-                      new Date(informations.date.beginDate),
-                    ),
-                  }}
-                />
-              ) : (
-                <FormattedMessage
-                  id={'dates.multipleDates'}
-                  values={{
-                    beginDate: new Intl.DateTimeFormat(intl.locale).format(
-                      new Date(informations.date.beginDate),
-                    ),
-                    endDate: new Intl.DateTimeFormat(intl.locale).format(
-                      new Date(informations.date.endDate),
-                    ),
-                  }}
-                />
-              )}
+              <DetailsDates dates={informations.dates} />
             </LocalIconInformation>
           </ToolTip>
         )}

frontend/src/components/pages/touristicEvent/TouristicEventUI.tsx

@@ -162,21 +162,9 @@ export const TouristicEventUIWithoutContext: React.FC<Props> = ({
                         >
                           <DetailsPreview
                             className={marginDetailsChild}
-                            informations={{
-                              logoUri: touristicEventContent.logoUri ?? undefined,
-                              participantNumber: touristicEventContent.participantNumber,
-                              meetingPoint: touristicEventContent.meetingPoint,
-                              duration: [
-                                touristicEventContent.meetingTime,
-                                touristicEventContent.duration,
-                              ].join(' - '),
-                              date: {
-                                beginDate: touristicEventContent.informations.beginDate,
-                                endDate: touristicEventContent.informations.endDate,
-                              },
-                            }}
+                            informations={touristicEventContent.informations}
                             place={touristicEventContent.place}
-                            tags={touristicEventContent.themes}
+                            tags={touristicEventContent.tags}
                             title={touristicEventContent.name}
                             teaser={touristicEventContent.descriptionTeaser}
                             ambiance={''}

frontend/src/modules/touristicEvent/adapter.ts

@@ -20,7 +20,8 @@ import {
   TouristicEventResult,
 } from './interface';
 
-const getISOdate = (date: string) => (date.includes('T') ? date : `${date}T00:00:00`);
+const getISOdate = (date: string, time: string) =>
+  date.includes('T') ? date : `${date}T${time ? time : '00:00:00'}`;
 
 export const adaptTouristicEvents = ({
   rawTouristicEvents,
@@ -40,14 +41,20 @@ export const adaptTouristicEvents = ({
       images: getLargeImagesOrThumbnailsFromAttachments(rawTouristicEvent.attachments, false),
       filesFromAttachments: geFilesFromAttachments(rawTouristicEvent.attachments),
       geometry: adaptGeometry(rawTouristicEvent.geometry),
-      themes: rawTouristicEvent?.themes?.map(themeId => themeDictionnary[themeId]?.label) ?? [],
+      tags: rawTouristicEvent?.themes?.map(themeId => themeDictionnary[themeId]?.label) ?? [],
       place: cityDictionnary?.[rawTouristicEvent?.cities?.[0]]?.name ?? '',
       category: touristicEventType[Number(rawTouristicEvent?.type)],
       informations: {
-        beginDate: getISOdate(rawTouristicEvent.begin_date),
-        endDate: getISOdate(rawTouristicEvent.end_date),
+        logoUri: rawTouristicEvent.approved
+          ? getGlobalConfig().touristicContentLabelImageUri
+          : null,
+        dates: {
+          beginDate: getISOdate(rawTouristicEvent.begin_date, rawTouristicEvent.start_time),
+          hasBeginTime: Boolean(rawTouristicEvent.start_time),
+          endDate: getISOdate(rawTouristicEvent.end_date, rawTouristicEvent.end_time),
+          hasEndTime: Boolean(rawTouristicEvent.end_time),
+        },
       },
-      logoUri: rawTouristicEvent.approved ? getGlobalConfig().touristicContentLabelImageUri : null,
     };
   });
 };
@@ -76,7 +83,10 @@ export const adaptTouristicEventsResult = ({
       informations: [
         {
           label: 'date',
-          value: [getISOdate(rawTouristicEvent.begin_date), getISOdate(rawTouristicEvent.end_date)],
+          value: [
+            getISOdate(rawTouristicEvent.begin_date, rawTouristicEvent.start_time),
+            getISOdate(rawTouristicEvent.end_date, rawTouristicEvent.end_time),
+          ],
         },
       ],
       logoUri: rawTouristicEvent.approved ? getGlobalConfig().touristicContentLabelImageUri : null,
@@ -99,19 +109,20 @@ export const adaptTouristicEventDetails = ({
   sourcesDictionnary: SourceDictionnary;
   touristicEventType: TouristicEventTypeChoices;
 }): TouristicEventDetails => {
+  const touristicEvents = adaptTouristicEvents({
+    rawTouristicEvents: [
+      {
+        ...rawTouristicEventDetails.properties,
+        geometry: rawTouristicEventDetails.geometry,
+      },
+    ],
+    themeDictionnary,
+    cityDictionnary,
+    touristicEventType,
+  })[0];
   return {
     // We use the original adapter
-    ...adaptTouristicEvents({
-      rawTouristicEvents: [
-        {
-          ...rawTouristicEventDetails.properties,
-          geometry: rawTouristicEventDetails.geometry,
-        },
-      ],
-      themeDictionnary,
-      cityDictionnary,
-      touristicEventType,
-    })[0],
+    ...touristicEvents,
     // then we add missing fields
     description: rawTouristicEventDetails.properties.description,
     descriptionTeaser: rawTouristicEventDetails.properties.description_teaser ?? null,
@@ -123,10 +134,13 @@ export const adaptTouristicEventDetails = ({
     cities_raw: rawTouristicEventDetails.properties.cities,
     id: rawTouristicEventDetails.id,
     touristicContents,
-    participantNumber: rawTouristicEventDetails.properties.participant_number,
+    informations: {
+      ...touristicEvents.informations,
+      participantNumber: rawTouristicEventDetails.properties.participant_number,
+      meetingPoint: rawTouristicEventDetails.properties.meeting_point,
+      duration: rawTouristicEventDetails.properties.duration,
+    },
     pdfUri: rawTouristicEventDetails.properties.pdf,
-    meetingPoint: rawTouristicEventDetails.properties.meeting_point,
-    duration: rawTouristicEventDetails.properties.duration,
     sources:
       rawTouristicEventDetails?.properties?.source?.map(sourceId => sourcesDictionnary[sourceId]) ??
       [],
@@ -139,7 +153,6 @@ export const adaptTouristicEventDetails = ({
     targetAudience: rawTouristicEventDetails.properties.target_audience,
     practicalInfo: rawTouristicEventDetails.properties.practical_info,
     booking: rawTouristicEventDetails.properties.booking,
-    meetingTime: rawTouristicEventDetails.properties.meeting_time,
   };
 };
 

frontend/src/modules/touristicEvent/api.ts

@@ -5,7 +5,20 @@ import { APIQuery, APIResponseForList } from 'services/api/interface';
 import { RawTouristicEvent, RawTouristicEventDetails } from './interface';
 
 const fieldsParams = {
-  fields: 'id,attachments,name,geometry,themes,cities,type,begin_date,end_date,approved',
+  fields: [
+    'id',
+    'attachments',
+    'name',
+    'geometry',
+    'themes',
+    'cities',
+    'type',
+    'begin_date',
+    'end_date',
+    'approved',
+    'start_time',
+    'end_time',
+  ].join(','),
 };
 
 export const fetchTouristicEvents = (
@@ -21,7 +34,25 @@ export const fetchTouristicEvents = (
 };
 
 const fieldsParamsDetails = {
-  fields: `${fieldsParams.fields},description,description_teaser,participant_number,pdf,meeting_point,duration,source,contact,email,website,accessibility,organizer,speaker,target_audience,practical_info,booking,meeting_time`,
+  fields: [
+    fieldsParams.fields,
+    'description',
+    'description_teaser',
+    'participant_number',
+    'pdf',
+    'meeting_point',
+    'duration',
+    'source',
+    'contact',
+    'email',
+    'website',
+    'accessibility',
+    'organizer',
+    'speaker',
+    'target_audience',
+    'practical_info',
+    'booking',
+  ].join(','),
   format: 'geojson',
 };
 

frontend/src/modules/touristicEvent/interface.ts

@@ -41,6 +41,8 @@ export interface RawTouristicEvent {
   begin_date: string;
   end_date: string;
   approved: boolean;
+  start_time: string;
+  end_time: string;
 }
 
 interface RawTouristicEventDetailsProperties extends RawTouristicEvent {
@@ -60,7 +62,6 @@ interface RawTouristicEventDetailsProperties extends RawTouristicEvent {
   target_audience: string;
   practical_info: string;
   booking: string;
-  meeting_time: string;
 }
 
 export interface RawTouristicEventDetails extends RawTouristicEvent {
@@ -87,14 +88,18 @@ export interface TouristicEvent {
     | PointGeometry
     | MultiPointGeometry
     | GeometryCollection;
-  themes: string[];
+  tags: string[];
   place: string;
   category: TouristicEventType;
   informations: {
-    beginDate: string;
-    endDate: string;
+    dates: {
+      beginDate: string;
+      endDate: string;
+      hasBeginTime: boolean;
+      hasEndTime: boolean;
+    };
+    logoUri: string | null;
   };
-  logoUri: string | null;
 }
 
 export interface TouristicEventDetails extends TouristicEvent {
@@ -104,10 +109,7 @@ export interface TouristicEventDetails extends TouristicEvent {
   cities: string[];
   cities_raw: string[];
   touristicContents: TouristicContent[];
-  participantNumber: number;
   pdfUri: string;
-  meetingPoint: string;
-  duration: string;
   sources: Source[];
   contact: string;
   email: string;
@@ -118,5 +120,9 @@ export interface TouristicEventDetails extends TouristicEvent {
   targetAudience: string;
   practicalInfo: string;
   booking: string;
-  meetingTime: string;
+  informations: TouristicEvent['informations'] & {
+    participantNumber: number;
+    meetingPoint: string;
+    duration: string;
+  };
 }