Merge pull request #1497 from culturecreates/feature/issue-1363

Feature/issue 1363
culturecreates · Dec 12, 2024 · 72f0e7a · 72f0e7a
2 parents a6c6730 + f68a0dd
commit 72f0e7a
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 3 deletions.
diff --git a/src/locales/en/translationEn.json b/src/locales/en/translationEn.json
@@ -1181,6 +1181,7 @@
     "keepEditing": "Keep editing",
     "copied": "Copied to clipboard",
     "discard": "Discard",
+    "day": "day",
     "validations": {
       "informationRequired": "Information is required"
     },

diff --git a/src/locales/fr/transalationFr.json b/src/locales/fr/transalationFr.json
@@ -1179,6 +1179,7 @@
     "unsavedChanges": "Vous avez des modifications non enregistrées. Voulez-vous les ignorer ?",
     "keepEditing": "Poursuivre l'édition",
     "discard": "Ignorer",
+    "day": "jour",
     "copied": "Copié dans le presse-papiers",
     "validations": {
       "informationRequired": "Des informations sont requises"

diff --git a/src/pages/Dashboard/AddEvent/AddEvent.jsx b/src/pages/Dashboard/AddEvent/AddEvent.jsx
@@ -110,6 +110,7 @@ import { isDataValid, placeHolderCollectionCreator } from '../../../utils/MultiL
 import MultiLingualTextEditor from '../../../components/MultilingualTextEditor/MultiLingualTextEditor';
 import MultilingualInput from '../../../components/MultilingualInput';
 import { contentLanguageKeyMap } from '../../../constants/contentLanguage';
+import { doesEventExceedNextDay } from '../../../utils/doesEventExceed';
 import SortableTreeSelect from '../../../components/TreeSelectOption/SortableTreeSelect';
 
 const { TextArea } = Input;
@@ -119,8 +120,8 @@ function AddEvent() {
   const location = useLocation();
   const dispatch = useDispatch();
   const [form] = Form.useForm();
-  Form.useWatch('startTime', form);
-  Form.useWatch('endTime', form);
+  const start_Time = Form.useWatch('startTime', form);
+  const end_Time = Form.useWatch('endTime', form);
   const timestampRef = useRef(Date.now()).current;
   const { calendarId, eventId } = useParams();
   let [searchParams] = useSearchParams();
@@ -283,6 +284,18 @@ function AddEvent() {
     },
     { label: t('dashboard.events.addEditEvent.otherInformation.contact.email'), value: 'email' },
   ];
+
+  const adjustEndDateTimeIfBeforeStart = (startDateTime, endDateTime, timezone) => {
+    const start = moment.tz(startDateTime, timezone);
+    let end = moment.tz(endDateTime, timezone);
+
+    if (end.isBefore(start)) {
+      end.add(1, 'days');
+    }
+
+    return end.toISOString();
+  };
+
   const hasSubEventConfigChanges = (customDates = [], subEventConfig = []) => {
     // Convert both arrays to a simpler format for easier comparison
     const formatCustomDates = customDates.flatMap(({ startDate, customTimes = [] }) =>
@@ -676,7 +689,11 @@ function AddEvent() {
                 startDateTime = moment
                   .tz(datePickerValue, eventData?.scheduleTimezone ?? 'Canada/Eastern')
                   .format('YYYY-MM-DD');
-              if (endTimeValue) endDateTime = dateTimeConverter(datePickerValue, endTimeValue, customTimeFlag);
+              if (endTimeValue) {
+                endDateTime = dateTimeConverter(datePickerValue, endTimeValue, customTimeFlag);
+                if (startDateTime && endDateTime)
+                  endDateTime = adjustEndDateTimeIfBeforeStart(startDateTime, endDateTime, eventData?.scheduleTimezone);
+              }
             }
 
             if (dateTypeValue === dateTypes.RANGE) {
@@ -2606,6 +2623,7 @@ function AddEvent() {
                                     ? moment.tz(eventData?.endDateTime, eventData?.scheduleTimezone ?? 'Canada/Eastern')
                                     : undefined
                                 }
+                                dependencies={['startTime']}
                                 data-cy="form-item-single-date-end-time-label">
                                 <TimePickerStyled
                                   placeholder={t('dashboard.events.addEditEvent.dates.timeFormatPlaceholder')}
@@ -2616,6 +2634,14 @@ function AddEvent() {
                                       endTime: value,
                                     });
                                   }}
+                                  suffixIcon={
+                                    dateType === dateTypes.SINGLE &&
+                                    doesEventExceedNextDay(
+                                      start_Time,
+                                      end_Time,
+                                      eventData?.scheduleTimezone ?? 'Canada/Eastern',
+                                    ) && <sup> +1&nbsp;{t('common.day')}</sup>
+                                  }
                                   data-cy="single-date-end-time"
                                 />
                               </Form.Item>

diff --git a/src/pages/Dashboard/EventReadOnly/EventReadOnly.jsx b/src/pages/Dashboard/EventReadOnly/EventReadOnly.jsx
@@ -50,6 +50,7 @@ import { routinghandler } from '../../../utils/roleRoutingHandler';
 import ReadOnlyPageTabLayout from '../../../layout/ReadOnlyPageTabLayout';
 import { getActiveTabKey } from '../../../redux/reducer/readOnlyTabSlice';
 import { isDataValid } from '../../../utils/MultiLingualFormItemSupportFunctions';
+import { doesEventExceedNextDay } from '../../../utils/doesEventExceed';
 
 function EventReadOnly() {
   const { t } = useTranslation();
@@ -675,6 +676,12 @@ function EventReadOnly() {
                                       {moment
                                         .tz(eventData?.endDateTime, eventData?.scheduleTimezone ?? 'Canada/Eastern')
                                         .format(i18n?.language === 'en' ? 'h:mm a' : 'HH:mm')}
+                                      {dateType === dateTypes.SINGLE &&
+                                        doesEventExceedNextDay(
+                                          eventData?.startDateTime,
+                                          eventData?.endDateTime,
+                                          eventData?.scheduleTimezone ?? 'Canada/Eastern',
+                                        ) && <sup> +1&nbsp;{t('common.day')}</sup>}
                                     </p>
                                   </Col>
                                 )}

diff --git a/src/utils/doesEventExceed.js b/src/utils/doesEventExceed.js
@@ -0,0 +1,14 @@
+import moment from 'moment-timezone';
+
+export const doesEventExceedNextDay = (startDateTime, endDateTime, timezone) => {
+  if (startDateTime && endDateTime) {
+    const start = moment.tz(startDateTime, timezone);
+    const end = moment.tz(endDateTime, timezone);
+
+    const exceedsToNextDay = end.isAfter(start) && !start.isSame(end, 'day');
+
+    const isWithin24Hours = end.diff(start, 'hours') <= 24;
+
+    return exceedsToNextDay && isWithin24Hours;
+  }
+};