feat: show end of recurrence date instead of end date in event ct whe…

…n set (#789)

* feat: show end of recurrence date instead of end date in event ct when set

* fix: used helper to calculate actual end date

* fix: used helper to calculate actual end date + changed render conditions for page header

* fix: created helper function

RELEASE.md

@@ -41,6 +41,20 @@
 - ...
 -->
 
+## Versione X.X.X (dd/mm/yyyy)
+
+### Migliorie
+
+- Quando viene impostata una ricorrenza, nel tipo di contenuto Evento viene mostrata la data di fine della ricorrenza invece che del singolo evento
+
+### Novità
+
+- ...
+
+### Fix
+
+- ...
+
 ## Versione 11.24.0 (03/10/2024)
 
 ### Migliorie

src/components/ItaliaTheme/View/Commons/Dates.jsx

@@ -4,7 +4,7 @@ import { rrulei18n } from '@plone/volto/components/manage/Widgets/RecurrenceWidg
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { Card, CardTitle, CardBody } from 'design-react-kit';
 import PropTypes from 'prop-types';
-import { viewDate } from 'design-comuni-plone-theme/helpers';
+import { viewDate, getRealEventEnd } from 'design-comuni-plone-theme/helpers';
 
 const messages = defineMessages({
   start: {
@@ -46,19 +46,23 @@ const Dates = ({ content, show_image, moment: momentlib, rrule }) => {
 
   const rrulestr = rrule.rrulestr;
 
-  let rruleSet = null;
   let recurrenceText = null;
 
+  const rruleSet = content.recurrence
+    ? rrulestr(content?.recurrence, {
+        compatible: true, //If set to True, the parser will operate in RFC-compatible mode. Right now it means that unfold will be turned on, and if a DTSTART is found, it will be considered the first recurrence instance, as documented in the RFC.
+        forceset: true,
+      })
+    : null;
+
+  const actualEndDate = getRealEventEnd(content, rruleSet);
+
   if (content.recurrence) {
     const isRecurrenceByDay = content.recurrence.includes('BYDAY=+');
     const isWeekdaySunday = content.recurrence
       .split('BYDAY')[1]
       ?.includes('SU');
     const RRULE_LANGUAGE = rrulei18n(intl, moment);
-    rruleSet = rrulestr(content.recurrence, {
-      compatible: true, //If set to True, the parser will operate in RFC-compatible mode. Right now it means that unfold will be turned on, and if a DTSTART is found, it will be considered the first recurrence instance, as documented in the RFC.
-      forceset: true,
-    });
 
     recurrenceText = rruleSet.rrules()[0]?.toText(
       (t) => {
@@ -79,7 +83,8 @@ const Dates = ({ content, show_image, moment: momentlib, rrule }) => {
     );
   }
   const start = viewDate(intl.locale, content.start);
-  const end = viewDate(intl.locale, content.end);
+  // format and save date into new variable depending on recurrence of event
+  const end = viewDate(intl.locale, actualEndDate);
   const openEnd = content?.open_end;
   const wholeDay = content?.whole_day;
   const rdates = rruleSet?.rdates() ?? [];

src/components/ItaliaTheme/View/Commons/PageHeader/PageHeaderEventDates.jsx

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 
 import { rrulei18n } from '@plone/volto/components/manage/Widgets/RecurrenceWidget/Utils';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+import { getRealEventEnd } from 'design-comuni-plone-theme/helpers';
 
 const messages = defineMessages({
   dateStart: {
@@ -25,11 +26,23 @@ const PageHeaderEventDates = ({ content, moment, rrule }) => {
   Moment.locale(intl.locale);
 
   const rrulestr = rrule.rrulestr;
+
+  const rruleSet = content.recurrence
+    ? rrulestr(content?.recurrence, {
+        compatible: true, //If set to True, the parser will operate in RFC-compatible mode. Right now it means that unfold will be turned on, and if a DTSTART is found, it will be considered the first recurrence instance, as documented in the RFC.
+        forceset: true,
+      })
+    : null;
+
+  const actualEndDate = getRealEventEnd(content, rruleSet);
+
   const wholeDay = content?.whole_day;
   const openEnd = content?.open_end;
+  // show only start when event starts and ends in same day or if a recurrence is set
+  // because to set a recurrence, the event must have the same date as start and end date
   const renderOnlyStart =
     Moment(content.end).format('DD-MM-Y') ===
-    Moment(content.start).format('DD-MM-Y');
+      Moment(content.start).format('DD-MM-Y') && !content.recurrence;
   let eventRecurrenceText = null;
 
   if (content['@type'] === 'Event') {
@@ -38,10 +51,7 @@ const PageHeaderEventDates = ({ content, moment, rrule }) => {
       const isWeekdaySunday = content.recurrence
         .split('BYDAY')[1]
         ?.includes('SU');
-      const rruleSet = rrulestr(content.recurrence, {
-        compatible: true, //If set to True, the parser will operate in RFC-compatible mode. Right now it means that unfold will be turned on, and if a DTSTART is found, it will be considered the first recurrence instance, as documented in the RFC.
-        forceset: true,
-      });
+
       const RRULE_LANGUAGE = rrulei18n(intl, Moment);
       eventRecurrenceText = rruleSet.rrules()[0]?.toText(
         (t) => {
@@ -55,22 +65,27 @@ const PageHeaderEventDates = ({ content, moment, rrule }) => {
               RRULE_LANGUAGE.strings['on the'] = 'la';
             }
           }
+
           return RRULE_LANGUAGE.strings[t];
         },
         RRULE_LANGUAGE,
         RRULE_LANGUAGE.dateFormatter,
       );
     }
   }
+
+  // format and save date into new variable depending on recurrence of event
+  const endDate = Moment(actualEndDate).format('DD-MM-Y');
+
   return content['@type'] === 'Event' ? (
     <p className="h4 py-2">
-      {!wholeDay &&
+      {!Moment(content.end).isSame(actualEndDate) &&
         !openEnd &&
         !renderOnlyStart &&
-        `dal ${Moment(content.start).format('DD-MM-Y')} al ${Moment(
-          content.end,
-        ).format('DD-MM-Y')}`}
-      {(wholeDay || renderOnlyStart) &&
+        `dal ${Moment(content.start).format('DD-MM-Y')} al ${endDate}`}
+      {(wholeDay ||
+        renderOnlyStart ||
+        Moment(content.end).isSame(actualEndDate)) &&
         !openEnd &&
         `${Moment(content.start).format('DD-MM-Y')}`}
       {openEnd &&

src/helpers/dates.js

@@ -11,8 +11,8 @@ export const viewDate = (locale, value, format) => {
         ? // Since we assume UTC everywhere, then transform to local (momentjs default)
           moment(value)
         : value.match(/T(.)/g)
-          ? moment(`${value}Z`) // This might happen in old Plone versions dates
-          : moment(value); //This when date is like '2021-05-05'
+        ? moment(`${value}Z`) // This might happen in old Plone versions dates
+        : moment(value); //This when date is like '2021-05-05'
     } else {
       datetime = moment(value);
     }
@@ -45,3 +45,11 @@ export const getRealStartAndEndWithRecurrence = (
     ),
   };
 };
+
+export const getRealEventEnd = (content, rruleSet) => {
+  let actualEndDate = content.end;
+  if (content.recurrence) {
+    actualEndDate = rruleSet.rrules()[0].options.until;
+  }
+  return actualEndDate;
+};

src/helpers/index.js

@@ -21,6 +21,7 @@ export { getItemsByPath } from 'design-comuni-plone-theme/helpers/getItemsByPath
 export {
   viewDate,
   getRealStartAndEndWithRecurrence,
+  getRealEventEnd,
 } from 'design-comuni-plone-theme/helpers/dates';
 export { getSiteProperty } from 'design-comuni-plone-theme/helpers/config';
 export { useDebouncedEffect } from 'design-comuni-plone-theme/helpers/debounce';