Develop

src/components/RecurringEvents/RecurringEvents.jsx

@@ -25,6 +25,7 @@ const RecurringEvents = function ({
   setFormFields,
   dateType,
   disabledDate,
+  onOpenChange,
   onCalendarChange,
   setSubEventCount,
   subEventCount,
@@ -349,6 +350,7 @@ const RecurringEvents = function ({
               style={{ width: '423px' }}
               disabled={(isCustom || formFields?.frequency === 'CUSTOM') && startDateRecur?.length == 2 && true}
               disabledDate={disabledDate}
+              onOpenChange={onOpenChange}
               onCalendarChange={onCalendarChange}
               suffixIcon={
                 subEventCount > 0 && (

src/constants/formFields.js

@@ -70,17 +70,40 @@ export const formNames = {
 const rules = [
   {
     dataType: dataTypes.URI_STRING,
-    rule: {
-      type: 'url',
-      message: <Translation>{(t) => t('dashboard.events.addEditEvent.validations.url')}</Translation>,
-    },
+    rule: () => [
+      {
+        type: 'url',
+        message: <Translation>{(t) => t('dashboard.events.addEditEvent.validations.url')}</Translation>,
+      },
+    ],
   },
   {
     dataType: dataTypes.EMAIL,
-    rule: {
-      type: 'email',
-      message: <Translation>{(t) => t('login.validations.invalidEmail')}</Translation>,
-    },
+    rule: () => [
+      {
+        type: 'email',
+        message: <Translation>{(t) => t('login.validations.invalidEmail')}</Translation>,
+      },
+    ],
+  },
+  {
+    dataType: dataTypes.IMAGE,
+    rule: ({ image, t }) => [
+      ({ getFieldValue }) => ({
+        validator() {
+          if (
+            (getFieldValue('image') != undefined && getFieldValue('image')?.length > 0) ||
+            (image && !getFieldValue('image')) ||
+            (image && getFieldValue('image')?.length > 0)
+          ) {
+            return Promise.resolve();
+          } else
+            return Promise.reject(
+              new Error(t('dashboard.events.addEditEvent.validations.otherInformation.emptyImage')),
+            );
+        },
+      }),
+    ],
   },
 ];
 
@@ -115,7 +138,9 @@ export const formFieldValue = [
             name={Array.isArray(name) ? name[0] : name}
             data={data}
             entityId={entityId}
-            validations={validations}
+            validations={
+              validations && validations.trim() !== '' ? validations : t('common.validations.informationRequired')
+            }
             dataCy={`input-text-area-${mappedField}-`}
             placeholder={placeholder}
             required={required}>
@@ -347,7 +372,6 @@ export const formFieldValue = [
       locationPlace,
       setLocationPlace,
       t,
-      name,
       placesSearch,
       calendarContentLanguage,
       allPlacesArtsdataList,
@@ -359,7 +383,7 @@ export const formFieldValue = [
       fieldName,
     }) => {
       return (
-        <>
+        <div>
           <Popover
             data-cy={`popover-${mappedField ?? fieldName}`}
             open={isPopoverOpen}
@@ -395,7 +419,7 @@ export const formFieldValue = [
                               }`}
                               onClick={() => {
                                 setLocationPlace(place);
-                                form.setFieldValue(name, place?.value);
+                                form.setFieldValue(fieldName, place?.value);
                                 setIsPopoverOpen(false);
                               }}
                               data-cy={`div-${mappedField ?? fieldName}-footlight-place-${index}`}>
@@ -429,7 +453,7 @@ export const formFieldValue = [
                             }`}
                             onClick={() => {
                               setLocationPlace(place);
-                              form.setFieldValue(name, place?.value);
+                              form.setFieldValue(fieldName, place?.value);
                               setIsPopoverOpen(false);
                             }}
                             data-cy={`div-${mappedField ?? fieldName}-footlight-place-${index}`}>
@@ -460,7 +484,7 @@ export const formFieldValue = [
                             className="event-popover-options"
                             onClick={() => {
                               setLocationPlace(place);
-                              form.setFieldValue(name, place?.uri);
+                              form.setFieldValue(fieldName, place?.uri);
                               setIsPopoverOpen(false);
                             }}
                             data-cy={`div-${mappedField ?? fieldName}-artsdata-place-${index}`}>
@@ -501,14 +525,14 @@ export const formFieldValue = [
               closable
               onClose={() => {
                 setLocationPlace();
-                form.setFieldValue(name, undefined);
+                form.setFieldValue(fieldName, undefined);
               }}
               edit={locationPlace?.source === sourceOptions.CMS && true}
               onEdit={(e) => placeNavigationHandler(locationPlace?.value, locationPlace?.type, e)}
               creatorId={locationPlace?.creatorId}
             />
           )}
-        </>
+        </div>
       );
     },
   },
@@ -557,6 +581,7 @@ export const renderFormFields = ({
   mappedField,
   t,
   validations,
+  originalUrl,
   fieldName,
 }) => {
   return (
@@ -565,7 +590,7 @@ export const renderFormFields = ({
       <Form.Item
         data-cy={`form-item-${mappedField ?? fieldName?.toLowerCase()}`}
         label={label}
-        name={name}
+        name={name ?? fieldName?.toLowerCase()}
         key={key}
         initialValue={
           Array.isArray(initialValue)
@@ -582,14 +607,18 @@ export const renderFormFields = ({
         className={mappedField ?? fieldName?.toLowerCase()}
         rules={rules
           ?.map((rule) => {
-            if (datatype === rule?.dataType) return rule.rule;
+            if (datatype === rule?.dataType) {
+              return rule.rule({ image: originalUrl, t, required, fieldName });
+            }
           })
           .concat([
             {
               required: required,
-              message: validations ?? t('common.validations.informationRequired'),
+              message:
+                validations && validations.trim() !== '' ? validations : t('common.validations.informationRequired'),
             },
           ])
+          ?.flat()
           ?.filter((rule) => rule !== undefined)}
         help={
           position === 'bottom' && userTips ? (
@@ -641,7 +670,7 @@ export const returnFormDataWithFields = ({
 }) => {
   return renderFormFields({
     fieldName: field?.name,
-    name: [field?.mappedField],
+    name: field?.mappedField && [field?.mappedField],
     mappedField: field?.mappedField,
     type: field?.type,
     datatype: field?.datatype,
@@ -657,7 +686,7 @@ export const returnFormDataWithFields = ({
       type: field?.type,
       isDynamicField: false,
       calendarContentLanguage,
-      name: [field?.mappedField],
+      name: field?.mappedField && [field?.mappedField],
       preview: true,
       placeholder: bilingual({
         data: field?.placeholder,
@@ -737,5 +766,9 @@ export const returnFormDataWithFields = ({
       interfaceLanguage: user?.interfaceLanguage?.toLowerCase(),
       locationPlace,
     }),
+    originalUrl:
+      field?.mappedField === mappedFieldTypes.IMAGE
+        ? entityData?.image?.find((image) => image?.isMain)?.original?.uri
+        : field?.mappedField === mappedFieldTypes.LOGO && entityData?.logo?.original?.uri,
   });
 };

src/pages/Dashboard/AddEvent/AddEvent.jsx

@@ -2701,6 +2701,9 @@ function AddEvent() {
                               setStartDate(dates?.[0]);
                               setEndDate(dates?.[1]);
                             }}
+                            onOpenChange={(open) => {
+                              if (!open && startDate && !endDate) setStartDate(null);
+                            }}
                             disabledDate={(current) =>
                               (startDate && current.isSame(startDate, 'day')) ||
                               (endDate && current.isSame(endDate, 'day'))
@@ -2723,6 +2726,9 @@ function AddEvent() {
                               setStartDate(dates?.[0]);
                               setEndDate(dates?.[1]);
                             }}
+                            onOpenChange={(open) => {
+                              if (!open && startDate && !endDate) setStartDate(null);
+                            }}
                             disabledDate={(current) =>
                               (startDate && current.isSame(startDate, 'day')) ||
                               (endDate && current.isSame(endDate, 'day'))

src/pages/Dashboard/CreateNewOrganization/CreateNewOrganization.jsx

@@ -278,7 +278,7 @@ function CreateNewOrganization() {
               collection.push([field?.mappedField, contentLanguageKeyMap[language]]);
             });
             return collection;
-          } else return field?.mappedField;
+          } else return field?.mappedField ?? field?.name?.toLowerCase();
         })
         ?.flat(),
     );

src/pages/Dashboard/Settings/Settings.jsx

@@ -84,7 +84,7 @@ const Settings = () => {
     {
       label: <span data-cy="tab-widget-settings">{t('dashboard.settings.tab2')}</span>,
       key: '2',
-      children: <WidgetSettings tabKey={tabKey} setDirtyStatus={setIsFormDirty} />,
+      children: <WidgetSettings tabKey={tabKey} />,
       disabled: false,
       adminOnly: true,
     },

src/pages/Dashboard/Settings/WidgetSettings/WidgetSettings.jsx

@@ -33,7 +33,7 @@ import { widgetFontCollection } from '../../../../constants/fonts';
 const { useBreakpoint } = Grid;
 const widgetUrl = process.env.REACT_APP_CALENDAR_WIDGET_BASE_URL;
 
-const WidgetSettings = ({ setDirtyStatus, tabKey }) => {
+const WidgetSettings = ({ tabKey }) => {
   const { t } = useTranslation();
   const { calendarId } = useParams();
   const timestampRef = useRef(Date.now()).current;
@@ -194,7 +194,6 @@ const WidgetSettings = ({ setDirtyStatus, tabKey }) => {
       setIframeCode(
         `<iframe src="${urlCopy.href}" width="100%" style="max-width:${width}px; border:none" height="${height}px"></iframe>`,
       );
-      setDirtyStatus(true);
     }
   };
 

src/utils/dateTimeTypeHandler.js

@@ -3,11 +3,18 @@ import { dateTypes } from '../constants/dateTypes';
 
 export const dateTimeTypeHandler = (startDate, startDateTime, endDate, endDateTime, isRecurring) => {
   if (isRecurring) return dateTypes.MULTIPLE;
-  else if ((startDate || startDateTime) && !endDate && !endDateTime) return dateTypes.SINGLE;
-  else if ((startDate || startDateTime) && endDateTime && !endDate) {
-    if (startDate && moment(startDate).isSame(endDateTime, 'day')) return dateTypes.SINGLE;
-    else if (startDate && !moment(startDate).isSame(endDateTime, 'day')) return dateTypes.RANGE;
-    else if (startDateTime && moment(startDateTime).isSame(endDateTime, 'day')) return dateTypes.SINGLE;
-    else if (startDateTime && !moment(startDateTime).isSame(endDateTime, 'day')) return dateTypes.RANGE;
-  } else if ((startDate || startDateTime) && !endDateTime && endDate) return dateTypes.RANGE;
+
+  const start = startDateTime || startDate;
+  const end = endDateTime || endDate;
+
+  // only start is provided
+  if (start && !end) return dateTypes.SINGLE;
+
+  // if both start and end are present
+  if (start && end) {
+    // If start and end are the same day, or within 24 hours
+    if (moment(start).isSame(end, 'day') || moment(end).diff(moment(start), 'hours') < 24) return dateTypes.SINGLE;
+
+    return dateTypes.RANGE;
+  }
 };