+ {
+ const [tempEventDate, setTempEventDate] = useState(null);
+ const [tempEventTime, setTempEventTime] = useState(null);
+ // Add local state to track the current eventDateTime
+ const [currentEventDateTime, setCurrentEventDateTime] = useState(eventDateTime);
+ // Add state to track if this date has been removed
+ const [isRemoved, setIsRemoved] = useState(false);
+
+ // Update local state when eventDateTime prop changes (e.g., timezone update)
+ useEffect(() => {
+ setCurrentEventDateTime(eventDateTime);
+ }, [eventDateTime]);
+
+
+ const eventStart = getMoment(
+ currentEventDateTime.start_date,
+ true,
+ currentTimezone
+ );
+ const eventEnd = getMoment(currentEventDateTime.end_date, true, currentTimezone);
+ const timeFormat = DATE_SETTINGS.formats.datetime;
+
+ /**
+ * Handle the set date and time button click.
+ *
+ * @param {boolean} isStartChange Whether this is start or end date change.
+ *
+ * @return {void}
+ */
+ const setDateTimeHandler = (isStartChange, onClose) => {
+ // Ensure we have either new date or time in state.
+ if (!tempEventDate && !tempEventTime) {
+ return;
+ }
+
+ const newDate =
+ tempEventDate ||
+ (isStartChange ? eventStart : eventEnd);
+ const newTime =
+ tempEventTime ||
+ (isStartChange ? eventStart : eventEnd);
+
+ // Combine the new date and time and convert to a timestamp.
+ const newDateTime = getTimestamp(
+ combineDateAndTime(newDate, newTime),
+ currentTimezone
+ );
+
+ const newEventDateTime = clone(currentEventDateTime);
+
+ if (isStartChange) {
+ newEventDateTime.start_date = newDateTime;
+
+ // Check if the new start time is after the current end time.
+ if (
+ parseInt(newEventDateTime.start_date) >=
+ parseInt(newEventDateTime.end_date)
+ ) {
+ // Set the new end time to be 1 hour after the start dateTime.
+ newEventDateTime.end_date = String(
+ parseInt(newEventDateTime.start_date) +
+ 3600
+ );
+ }
+ } else {
+ newEventDateTime.end_date = newDateTime;
+
+ // Check if the new end time is before the current start time.
+ if (
+ parseInt(newEventDateTime.start_date) >=
+ parseInt(newEventDateTime.end_date)
+ ) {
+ // Set the new start time to be 1 hour before the end dateTime.
+ newEventDateTime.start_date = String(
+ parseInt(newEventDateTime.end_date) - 3600
+ );
+ }
+ }
+
+ // Reset the temp date and time.
+ setTempEventDate(null);
+ setTempEventTime(null);
+
+ // Use dateManagerInstance to save the changes if available
+ if (dateManagerInstance && dateManagerInstance.upsertDate) {
+ dateManagerInstance.upsertDate(newEventDateTime);
+ }
+
+ // Update the current eventDateTime state
+ setCurrentEventDateTime(newEventDateTime);
+
+ // Close the appropriate dropdown
+ onClose();
+ };
+
+ /**
+ * Handles DateTimePicker changes.
+ *
+ * @param {string} currentDateTime The current dateTime.
+ * @param {string} newDateTime The new selected dateTime.
+ *
+ * @return {void}
+ */
+ const datePickerHandler = (currentDateTime, newDateTime) => {
+ // Compare the date without time to see if the time or date was changed.
+ const isDateChange =
+ moment(currentDateTime).format('YYYY-MM-DD') ===
+ moment(newDateTime).format('YYYY-MM-DD');
+
+ if (isDateChange) {
+ setTempEventTime(newDateTime);
+ } else {
+ setTempEventDate(newDateTime);
+ }
+ };
+
+ return (
+
+ {hasMultipleDates && (
+
+
+ )}
+
+
+ (
+
+ )}
+ renderContent={({ onClose }) => (
+
+
+ datePickerHandler(
+ eventStart,
+ newDateTime
+ )
+ }
+ __nextRemoveHelpButton
+ __nextRemoveResetButton
+ />
+
+
+ )}
+ />
+
+
+ (
+
+ )}
+ renderContent={({ onClose }) => (
+
+
+ datePickerHandler(
+ eventEnd,
+ newDateTime
+ )
+ }
+ __nextRemoveHelpButton
+ __nextRemoveResetButton
+ />
+
+ )}
+ />
+
+
+ {
+ const newEventDateTime = clone(currentEventDateTime);
+
+ newEventDateTime.all_day = !currentEventDateTime.all_day;
+
+ newEventDateTime.start_date = getMoment(
+ newEventDateTime.start_date
+ );
+ newEventDateTime.end_date = getMoment(
+ newEventDateTime.end_date
+ );
+
+ // If all day event, set time between 00:00 and 23:59.
+ if (newEventDateTime.all_day) {
+ newEventDateTime.start_date.startOf('date');
+ newEventDateTime.end_date.endOf('date');
+ } else {
+ newEventDateTime.start_date
+ .hour(DEFAULT_START_HOUR)
+ .minute(0);
+ newEventDateTime.end_date
+ .hour(DEFAULT_END_HOUR)
+ .minute(0);
+ }
+
+ newEventDateTime.start_date = getTimestamp(
+ newEventDateTime.start_date
+ );
+ newEventDateTime.end_date = getTimestamp(
+ newEventDateTime.end_date
+ );
+
+ // Use dateManagerInstance to save the changes if available
+ if (dateManagerInstance && dateManagerInstance.upsertDate) {
+ dateManagerInstance.upsertDate(newEventDateTime);
+ }
+
+ // Update the current eventDateTime state
+ setCurrentEventDateTime(newEventDateTime);
+ }}
+ />
+
+
+ {
+ const newEventDateTime = clone(currentEventDateTime);
+ newEventDateTime.hide_from_calendar = !currentEventDateTime.hide_from_calendar;
+
+ // Use dateManagerInstance to save the changes if available
+ if (dateManagerInstance && dateManagerInstance.upsertDate) {
+ dateManagerInstance.upsertDate(newEventDateTime);
+ }
+
+ // Update the current eventDateTime state
+ setCurrentEventDateTime(newEventDateTime);
+ }}
+ />
+
+
+ {
+ const newEventDateTime = clone(currentEventDateTime);
+ newEventDateTime.hide_from_feed = !currentEventDateTime.hide_from_feed;
+
+ // Use dateManagerInstance to save the changes if available
+ if (dateManagerInstance && dateManagerInstance.upsertDate) {
+ dateManagerInstance.upsertDate(newEventDateTime);
+ }
+
+ // Update the current eventDateTime state
+ setCurrentEventDateTime(newEventDateTime);
+ }}
+ />
+
+
+
+ );
+};
+
+export default DateTimeGroupNew;
diff --git a/src/blocks/event-info/date-utils.js b/src/blocks/event-info/date-utils.js
new file mode 100644
index 0000000..6ec691e
--- /dev/null
+++ b/src/blocks/event-info/date-utils.js
@@ -0,0 +1,314 @@
+import moment from 'moment';
+import { getSettings } from '@wordpress/date';
+import { __ } from '@wordpress/i18n';
+import { head, last } from 'lodash';
+
+/**
+ * Date and Time Utilities
+ *
+ * Utility functions for handling date/time operations, timezone conversions,
+ * and date formatting within the Simple Events plugin. Provides consistent
+ * date handling across the event management system.
+ *
+ * @package SimpleEvents
+ * @since 1.0.0
+ */
+
+/**
+ * Date/Time Constants
+ */
+export const DEFAULT_START_HOUR = 9;
+export const DEFAULT_END_HOUR = 10;
+export const FORMAT = 'YYYY-MM-DD HH:mm';
+
+const DATE_SETTINGS = getSettings();
+export const OFFSET = Number(DATE_SETTINGS.timezone.offset);
+export const TIMEZONE = DATE_SETTINGS.timezone.string;
+
+export let TIMEZONE_NAME = TIMEZONE;
+if ('' === TIMEZONE) {
+ TIMEZONE_NAME = 'UTC' + (OFFSET >= 0 ? '+' : '') + OFFSET;
+}
+
+export const TIMEZONES = moment.tz
+ .names()
+ .map((tz) => ({ label: tz, value: tz }));
+
+// Add an option to use the site settings
+TIMEZONES.unshift({
+ label: __('Same as site', 'simple-events'),
+ value: '',
+});
+
+/**
+ * Gets the DST offset for a given timestamp and timezone.
+ *
+ * Calculates the daylight saving time offset for a specific timestamp
+ * within a given timezone. Handles timezone conversions and DST transitions.
+ *
+ * @since 1.0.0
+ *
+ * @param {number} timestamp The timestamp to check.
+ * @param {string|null} timezone The timezone to check (defaults to current timezone).
+ * @param {string} currentTimezone The current event timezone.
+ * @return {number} The offset in minutes.
+ */
+export const getDstOffset = (timestamp, timezone = null, currentTimezone = TIMEZONE) => {
+ // Return no offset if the event timezone is the same as the site.
+ if (null === timezone) {
+ timezone = currentTimezone;
+ }
+
+ if ('' === timezone) {
+ return OFFSET;
+ }
+
+ // Get the timezone details.
+ const timezoneDetails = moment.tz.zone(timezone);
+
+ // Get the index of the current timezone offset i.e DST or non-DST. -1 at the end to account for search algorithm.
+ const untilIndex = timezoneDetails.untils.findIndex(function (number) {
+ return number / 1000 > timestamp;
+ });
+
+ return timezoneDetails.offsets[untilIndex] * -1;
+};
+
+/**
+ * Creates a moment object in the site timezone from a unix timestamp.
+ *
+ * Converts a unix timestamp to a moment object using the appropriate
+ * timezone offset. Can optionally return a formatted string instead.
+ *
+ * @since 1.0.0
+ *
+ * @param {string} timestamp Timestamp to convert to a moment.
+ * @param {boolean} formatted Whether to return a human-readable formatted string.
+ * @param {string} currentTimezone The current timezone for the event.
+ * @return {moment.Moment|string} Human readable formatted string if `formatted` is true, moment object otherwise.
+ */
+export const getMoment = (timestamp, formatted = false, currentTimezone = TIMEZONE) => {
+ const dateTime = moment
+ .unix(timestamp)
+ .utcOffset(getDstOffset(timestamp, null, currentTimezone));
+
+ if (!formatted) {
+ return dateTime;
+ }
+
+ return dateTime.format(FORMAT);
+};
+
+/**
+ * Creates a timestamp from a date string.
+ *
+ * Converts a date string to a unix timestamp, applying the appropriate
+ * timezone offset for accurate time representation.
+ *
+ * @since 1.0.0
+ *
+ * @param {string} dateTime Date string to convert to a timestamp.
+ * @param {string} currentTimezone The current timezone for the event.
+ * @return {string} The timestamp, cast as a string.
+ */
+export const getTimestamp = (dateTime, currentTimezone = TIMEZONE) => {
+ return String(
+ moment(dateTime)
+ .utcOffset(
+ getDstOffset(moment(dateTime).unix(), null, currentTimezone),
+ true
+ )
+ .utc()
+ .unix()
+ );
+};
+
+/**
+ * Gets the start and end date from a collection of dates.
+ *
+ * Analyzes a collection of event dates to determine the overall start and end
+ * times, filtering out dates that have already passed. Returns the earliest
+ * start date and latest end date from valid future dates.
+ *
+ * @since 1.0.0
+ *
+ * @param {Array} dates Array of date objects with all_day, start_date, and end_date properties.
+ * @return {Object} Object with start_date and end_date properties (strings or null).
+ */
+export const getStartAndEndDate = (dates) => {
+ // iterate over and remove any that has passed.
+ const now = moment().utcOffset(OFFSET);
+ const filteredDates = dates.filter((date) => {
+ const endDate = moment.unix(date.end_date).utcOffset(OFFSET);
+ return endDate.isAfter(now);
+ });
+
+ /**
+ * Gets the first and last date from the collection.
+ *
+ * Helper closure that extracts the earliest start date and
+ * latest end date from the full date collection.
+ *
+ * @since 1.0.0
+ *
+ * @return {Object} Object with start_date and end_date properties.
+ */
+ const getFirstAndLastDate = () => {
+ return {
+ start_date: moment.unix(head(dates).start_date).utcOffset(OFFSET).unix().toString(),
+ end_date: moment.unix(last(dates).end_date).utcOffset(OFFSET).unix().toString(),
+ };
+ };
+
+ let startDate = null;
+ let endDate = null;
+
+ // Do not trust the order of the dates.
+ if (filteredDates.length === 0) {
+ // Return the earliest start date and the latest end date.
+ return getFirstAndLastDate();
+ }
+
+ // Loop over the dates and set the start date as the earliest and the end as the latest.
+ filteredDates.forEach((date) => {
+ const startDateMoment = moment.unix(date.start_date).utcOffset(OFFSET);
+ const endDateMoment = moment.unix(date.end_date).utcOffset(OFFSET);
+
+ // If the end date has passed, skip it.
+ if (endDateMoment.isBefore(now)) {
+ return;
+ }
+
+ /**
+ * Sets the start or end date based on comparison logic.
+ *
+ * Helper closure for determining and setting the earliest start date
+ * and latest end date from the filtered date collection.
+ *
+ * @since 1.0.0
+ *
+ * @param {moment.Moment} startDateMoment The start date moment to evaluate.
+ * @param {moment.Moment} endDateMoment The end date moment to evaluate.
+ */
+ const setDate = (startDateMoment, endDateMoment) => {
+ // If the start date is before the current start date, set it.
+ if (!startDate || startDateMoment.isBefore(startDate) || (startDate.isAfter(startDateMoment) && startDate.isBefore(now))) {
+ startDate = startDateMoment;
+ }
+
+ // If the end date is after the current end date, set it.
+ if (!endDate || endDateMoment.isAfter(endDate)) {
+ endDate = endDateMoment;
+ }
+ };
+
+ // If the start date if after now
+ if (startDateMoment.isAfter(now) && endDateMoment.isAfter(now)) {
+ setDate(startDateMoment, endDateMoment);
+ } else if (startDateMoment.isBefore(now) && endDateMoment.isAfter(now)) {
+ setDate(startDateMoment, endDateMoment);
+ }
+ });
+
+ // If we have no startDate or endDate, just get the first from dates.
+ if (!startDate) {
+ startDate = moment.unix(head(filteredDates).start_date).utcOffset(OFFSET);
+ }
+ if (!endDate) {
+ endDate = moment.unix(last(filteredDates).end_date).utcOffset(OFFSET);
+ }
+ return {
+ start_date: startDate.unix().toString(),
+ end_date: endDate.unix().toString(),
+ };
+};
+
+/**
+ * Creates a default date object for new events.
+ *
+ * Generates a new event date object with sensible defaults based on
+ * existing dates and timezone. Sets the new date to be one day after
+ * the last existing date, or uses current time with default hours.
+ *
+ * @since 2.0.0
+ *
+ * @param {Array} existingDates Array of existing date objects.
+ * @param {string} currentTimezone The current timezone identifier.
+ * @return {Object} New date object with start_date, end_date, and flag properties.
+ */
+export const createDefaultDate = (existingDates = [], currentTimezone = TIMEZONE) => {
+ // Set default date and time.
+ let eventStart = moment().utcOffset(OFFSET);
+ eventStart.hour(DEFAULT_START_HOUR);
+ eventStart.minute(0);
+ eventStart.second(0);
+
+ let eventEnd = eventStart.clone();
+ eventEnd.hour(DEFAULT_END_HOUR);
+
+ // Override with existing date if there is one.
+ if (existingDates.length) {
+ eventStart = getMoment(last(existingDates).start_date, false, currentTimezone);
+ eventEnd = getMoment(last(existingDates).end_date, false, currentTimezone);
+ }
+
+ // Set default date to be +1 day from the last date.
+ eventStart.add(1, 'days');
+ eventEnd.add(1, 'days');
+
+ return {
+ start_date: wp.date.date('U', eventStart),
+ end_date: wp.date.date('U', eventEnd),
+ all_day: false,
+ hide_from_calendar: false,
+ hide_from_feed: false,
+ };
+};
+
+/**
+ * Combines a date and time into a moment object.
+ *
+ * Takes separate date and time strings and combines them into a single
+ * moment object, preserving the date from the first parameter and the
+ * time from the second parameter.
+ *
+ * @since 1.0.0
+ *
+ * @param {string} date The date string to use.
+ * @param {string} time The time string to use.
+ * @return {moment.Moment} The combined date and time as a moment object.
+ */
+export const combineDateAndTime = (date, time) => {
+ const timeMoment = moment(time);
+ const dateMoment = moment(date);
+
+ // Set the timeMoment's time to the dateMoment.
+ return dateMoment.set({
+ hour: timeMoment.get('hour'),
+ minute: timeMoment.get('minute'),
+ });
+};
+
+/**
+ * Checks if the current time format is 12-hour.
+ *
+ * Analyzes the WordPress date format settings to determine if the
+ * site is configured to use 12-hour time format (with AM/PM indicators).
+ *
+ * @since 2.0.0
+ *
+ * @return {boolean} True if 12-hour format is used, false otherwise.
+ */
+export const is12HourTime = () => {
+ const timeFormat = DATE_SETTINGS.formats.datetime;
+ // To know if the current timezone is a 12 hour time with look for an "a" in the time format.
+ // We also make sure this a is not escaped by a "/".
+ return /a(?!\\)/i.test(
+ timeFormat
+ .toLowerCase() // Test only the lower case a
+ .replace(/\\\\/g, '') // Replace "//" with empty strings
+ .split('')
+ .reverse()
+ .join('') // Reverse the string and test for "a" not followed by a slash
+ );
+};
diff --git a/src/blocks/event-info/editor.scss b/src/blocks/event-info/editor.scss
index 222e043..ce11bbe 100644
--- a/src/blocks/event-info/editor.scss
+++ b/src/blocks/event-info/editor.scss
@@ -6,197 +6,187 @@
*/
.wp-block-simple-events-event-info {
- .components-placeholder__fieldset {
- flex-direction: column;
- }
-
- .components-base-control {
- margin: 0 0 8px;
- text-align: left;
-
- &:last-of-type {
- margin-bottom: 0;
-
- .components-base-control__field {
- white-space: nowrap;
- }
-
- .components-checkbox-control__input-container {
- align-content: center;
- align-items: center;
- display: inline-flex;
- height: 33px;
- position: relative;
-
- .components-checkbox-control__input {
- height: 20px;
- min-width: 20px;
- }
- }
- }
- }
-
- .components-base-control__label {
- display: block;
- }
+ .components-placeholder__fieldset {
+ flex-direction: column;
+ }
+ .components-base-control {
+ margin: 0 0 8px;
+ text-align: left;
+ &:last-of-type {
+ margin-bottom: 0;
+ .components-base-control__field {
+ white-space: nowrap;
+ }
+ .components-checkbox-control__input-container {
+ align-content: center;
+ align-items: center;
+ display: inline-flex;
+ height: 33px;
+ position: relative;
+ .components-checkbox-control__input {
+ height: 20px;
+ min-width: 20px;
+ }
+ }
+ }
+ }
+ .components-base-control__label {
+ display: block;
+ }
}
.se__button-done {
- align-self: flex-start;
- margin-top: 10px;
+ align-self: flex-start;
+ margin-top: 10px;
}
.se-datetime-popover {
- .components-popover__content {
- justify-content: center;
- width: max-content;
- padding: 1em;
- position: relative;
-
- .components-datetime__date {
- margin-top: 50px;
- }
- }
-
- .components-datetime__time {
- padding-bottom: 0;
-
- fieldset {
- margin-bottom: 0;
-
- legend {
- display: none;
- }
- }
-
- .components-datetime__time-wrapper .components-datetime__time-field-time {
- align-items: center;
- display: flex;
- }
-
- .components-datetime__time-field-am-pm {
- white-space: nowrap;
- }
- }
+ .components-popover__content {
+ justify-content: center;
+ width: max-content;
+ padding: 1em;
+ position: relative;
+ .components-datetime__date {
+ margin-top: 50px;
+ }
+ }
+ .components-datetime__time {
+ padding-bottom: 0;
+ fieldset {
+ margin-bottom: 0;
+ legend {
+ display: none;
+ }
+ }
+ .components-datetime__time-wrapper .components-datetime__time-field-time {
+ align-items: center;
+ display: flex;
+ }
+ .components-datetime__time-field-am-pm {
+ white-space: nowrap;
+ }
+ }
}
+
/* Date: remove time */
-.se-datetime-popover__date {
- fieldset:first-child {
- display: none;
- }
- .components-datetime__time-field-month-select {
- height: 100%;
- }
+.se-datetime-popover__date {
+ fieldset:first-child {
+ display: none;
+ }
+ .components-datetime__time-field-month-select {
+ height: 100%;
+ }
}
+
/* Time: remove date */
+
.se-datetime-popover__time {
- .components-datetime__time {
- fieldset + fieldset {
- margin-top: 10px;
- }
- }
-
- .components-datetime__timezone {
- display: none;
- }
+ .components-datetime__time {
+ fieldset+fieldset {
+ margin-top: 10px;
+ }
+ }
+ .components-datetime__timezone {
+ display: none;
+ }
}
+
/* Set date/time button */
+
.se-datetime-popover__set-datetime {
- margin-top: 15px;
- position: absolute;
- top: 100px;
+ margin-top: 15px;
+ position: absolute;
+ top: 100px;
}
.se-datetimegroup-controls-label {
- display: flex;
- font-weight: 700;
-
- + div {
- margin-top: -4px;
- }
+ display: flex;
+ font-weight: 700;
+ +div {
+ margin-top: -4px;
+ }
}
.se-datetimegroup-container {
- border-bottom: 1px solid #e2e4e7;
+ border-bottom: 1px solid #e2e4e7;
+ position: relative;
+ padding-top: 8px;
}
.se-datetimegroup-controls {
- display: grid;
- grid-template-columns: auto auto 70px;
- grid-column-gap: 10px;
- margin-top: 8px;
- max-width: 450px;
-
- .components-dropdown {
- width: 100%;
- }
-
- .components-base-control:nth-of-type(3) {
- flex: none;
- align-self: flex-end;
- margin-bottom: 10px;
- margin-left: auto;
-
- .components-checkbox-control__input-container {
- margin-right: 8px;
- }
-
- label {
- font-weight: normal;
- font-size: 14px;
- }
- }
-
- .se-datetime-control__delete {
- grid-column-start: 4;
- margin-top: -68px;
- margin-right: -50px;
- margin-left: auto;
- align-self: center;
- }
-
- .se-datetime-popover__button {
- width: 100%;
- justify-content: center;
- margin-bottom: 0;
- margin-top: 0;
- }
-
- .is-button.is-default:not(:disabled) {
- border-color: #7e8993;
- background-color: #fff;
- color: #32373c;
- }
+ display: grid;
+ grid-template-columns: auto auto 70px;
+ grid-column-gap: 10px;
+ margin-top: 8px;
+ max-width: 450px;
+ .components-dropdown {
+ width: 100%;
+ }
+ .components-base-control:nth-of-type(3) {
+ flex: none;
+ align-self: flex-end;
+ margin-bottom: 10px;
+ margin-left: auto;
+ .components-checkbox-control__input-container {
+ margin-right: 8px;
+ }
+ label {
+ font-weight: normal;
+ font-size: 14px;
+ }
+ }
+ .se-datetime-control__delete {
+ position: absolute;
+ top: 0;
+ right: 0;
+ z-index: 1;
+ .components-button {
+ min-width: 24px;
+ width: 24px;
+ height: 24px;
+ padding: 0;
+ }
+ }
+ .se-datetime-popover__button {
+ width: 100%;
+ justify-content: center;
+ margin-bottom: 0;
+ margin-top: 0;
+ }
+ .is-button.is-default:not(:disabled) {
+ border-color: #7e8993;
+ background-color: #fff;
+ color: #32373c;
+ }
}
.se-datetime-addmore {
- display: flex;
- margin-top: 10px;
- margin-bottom: 20px;
+ display: flex;
+ margin-top: 10px;
+ margin-bottom: 20px;
}
.se-location-label {
- max-width: 450px;
-
- label {
- font-weight: 700;
- }
+ max-width: 450px;
+ label {
+ font-weight: 700;
+ }
}
.se-site-timezone-label {
- flex-direction: column;
- font-size: 12px;
- color: rgb(117, 117, 117);
+ flex-direction: column;
+ font-size: 12px;
+ color: rgb(117, 117, 117);
}
.se-event-calendar-export {
- margin-top: 20px;
+ margin-top: 20px;
}
.se-all-day-checkbox .components-flex {
- align-items: center;
+ align-items: center;
}
\ No newline at end of file
diff --git a/src/blocks/event-info/event-manager.js b/src/blocks/event-info/event-manager.js
new file mode 100644
index 0000000..31f8d1e
--- /dev/null
+++ b/src/blocks/event-info/event-manager.js
@@ -0,0 +1,339 @@
+import { sortBy, isEqual, clone } from 'lodash';
+import { getStartAndEndDate, createDefaultDate, getDstOffset, TIMEZONE, OFFSET } from './date-utils';
+import moment from 'moment';
+
+/**
+ * Date Manager Service
+ *
+ * Creates a date manager service for handling event dates with change tracking,
+ * timezone management, and state synchronization. Provides a centralized way to
+ * manage event dates with automatic dirty state tracking and meta synchronization.
+ *
+ * @package SimpleEvents
+ * @since 2.0.0
+ */
+
+/**
+ * Creates a hash for a date object based on its start and end times.
+ *
+ * Generates a unique identifier for a date object using start time, end time,
+ * and current timestamp to ensure uniqueness across date operations.
+ *
+ * @since 2.0.0
+ *
+ * @param {string} start The start time of the date.
+ * @param {string} end The end time of the date.
+ * @return {string} A unique hash for the date.
+ */
+const createDateHash = (start, end) => {
+ // Get the current timestamp.
+ const timestamp = Date.now();
+ // Create a hash using the start and end times along with the timestamp.
+ const hash = `${start}-${end}-${timestamp}`;
+ return hash;
+}
+
+/**
+ * Creates a date manager instance for handling event dates.
+ *
+ * Provides a comprehensive date management system with change tracking,
+ * timezone conversion, and state synchronization. Manages both original
+ * and current date states with automatic dirty flag tracking.
+ *
+ * @since 2.0.0
+ *
+ * @param {Array} initialDates Array of initial date objects with dates property.
+ * @param {string} timezone Current timezone for the event.
+ * @param {Object} metaSync Optional meta sync object with meta and setMeta properties.
+ * @return {Object} Date management service with public interface.
+ */
+export const dateManager = (initialDates = [], timezone = '', metaSync = null) => {
+
+ // lOOP through dates and add a hash to each date
+ initialDates.dates.forEach(date => {
+ date.hash = createDateHash(date.start_date, date.end_date);
+ });
+
+ // Internal state
+ let originalDates = clone(initialDates.dates || []);
+ let currentDates = clone(initialDates.dates || []);
+ let originalTimezone = timezone || TIMEZONE;
+ let currentTimezone = timezone || TIMEZONE;
+ let isDirty = false;
+
+ // Meta sync helpers
+ const { meta, setMeta } = metaSync || {};
+
+ /**
+ * Refreshes the date manager with new dates.
+ *
+ * Updates both original and current date states with new data,
+ * adds hashes to dates if missing, and resets the dirty flag.
+ *
+ * @since 2.0.0
+ *
+ * @param {Array} newDates Array of new date objects to set.
+ * @return {Object} Updated date management service state.
+ */
+ const refreshWithNewDates = (newDates) => {
+ // Add hash to each date if not present
+ newDates.forEach(date => {
+ if (!date.hash) {
+ date.hash = createDateHash(date.start_date, date.end_date);
+ }
+ });
+
+ // Update internal state
+ originalDates = clone(newDates);
+ currentDates = clone(newDates);
+ isDirty = false;
+
+ // If orginal timezone is not the same as current timezone, update current timezone
+ if (originalTimezone !== currentTimezone && '' !== currentTimezone) {
+ originalTimezone = currentTimezone;
+ }
+
+
+ return getCurrentDates();
+ };
+
+ /**
+ * Gets the current dates and timezone information.
+ *
+ * Returns the current state including dates, timezone, and dirty flag.
+ * Considers timezone changes when determining dirty state.
+ *
+ * @since 2.0.0
+ *
+ * @return {Object} Current dates object with dates, timezone, and isDirty properties.
+ */
+ const getCurrentDates = () => {
+ const timezoneChanged = currentTimezone !== originalTimezone;
+ return {
+ dates: currentDates,
+ timezone: currentTimezone,
+ isDirty: isDirty || timezoneChanged,
+ };
+ }
+
+ /**
+ * Finds a date by its hash identifier.
+ *
+ * Searches through current dates to find a date object
+ * matching the provided hash.
+ *
+ * @since 2.0.0
+ *
+ * @param {string} hash The hash identifier of the date to find.
+ * @return {Object|undefined} The date object if found, undefined otherwise.
+ */
+ const findDateByHash = (hash) => {
+ return currentDates.find(d => d.hash === hash);
+ }
+
+ /**
+ * Updates the timezone and converts all dates accordingly.
+ *
+ * Changes the event timezone and adjusts all date timestamps to
+ * maintain the same local time in the new timezone. Updates meta
+ * if sync is available.
+ *
+ * @since 2.0.0
+ *
+ * @param {string} newTimezone The new timezone identifier to set.
+ * @return {Object} Updated date management service state.
+ */
+ const updateTimezone = (newTimezone) => {
+ const updatedDates = clone(currentDates);
+
+ // Ensure that the value is a string.
+ newTimezone = !Boolean(newTimezone) ? '' : newTimezone;
+ let targetTimezone = newTimezone;
+
+ if ('' === newTimezone) {
+ targetTimezone = TIMEZONE;
+ }
+
+ updatedDates.forEach((eventDateTime) => {
+ [
+ 'start_date',
+ 'end_date',
+ ].forEach((key) => {
+ // Get the current DST offset
+ const currentOffset = getDstOffset(
+ eventDateTime[key],
+ currentTimezone,
+ currentTimezone
+ );
+
+ // Get the target DST offset
+ const targetOffset = '' !== targetTimezone
+ ? getDstOffset(
+ eventDateTime[key],
+ targetTimezone,
+ targetTimezone
+ )
+ : OFFSET;
+
+ // Apply target timezone offset and keep same local time
+ eventDateTime[key] = String(
+ moment
+ .unix(eventDateTime[key])
+ .utcOffset(currentOffset)
+ .utcOffset(targetOffset, true)
+ .utc()
+ .unix()
+ );
+ });
+ });
+
+ // Update internal state
+ currentDates = updatedDates;
+ currentTimezone = newTimezone;
+ isDirty = true; // Mark as dirty since timezone changed
+
+ // Sync to meta if available
+ if (setMeta && meta) {
+ setMeta({
+ ...meta,
+ se_event_timezone: newTimezone
+ });
+ }
+
+ return getCurrentDates();
+ };
+
+ /**
+ * Upserts a date to the event dates collection.
+ *
+ * Updates an existing date if the hash matches, otherwise adds a new date.
+ * Automatically generates hash if missing and maintains sorted order by start date.
+ *
+ * @since 2.0.0
+ *
+ * @param {Object} date Date object to add or update with properties:
+ * - id: null|int
+ * - hash: string
+ * - start_date: string
+ * - end_date: string
+ * - all_day: boolean
+ * - hide_from_feed: boolean
+ * - hide_from_calendar: boolean
+ * @return {Object} Updated date management service state.
+ */
+ const upsertDate = (date) => {
+ // If the date doesnt contain a hash, generate one
+ if (!date.hash) {
+ date.hash = createDateHash(date.start_date, date.end_date);
+ }
+
+ // Check if the hash exists in the current dates
+ const existingIndex = currentDates.findIndex(d => d.hash === date.hash);
+ if (existingIndex !== -1) {
+ // If it exists, update the date
+ currentDates[existingIndex] = date;
+ } else {
+ // If it doesn't exist, add the new date
+ currentDates.push(date);
+ }
+ // Mark as dirty
+ isDirty = true;
+
+ // Sort the dates by start date
+ currentDates = sortBy(currentDates, 'start_date');
+
+ return getCurrentDates();
+ }
+
+ /**
+ * Removes a date from the event dates collection.
+ *
+ * Finds and removes a date object by its hash identifier,
+ * then maintains sorted order and marks state as dirty.
+ *
+ * @since 2.0.0
+ *
+ * @param {Object} date Date object to remove (must contain hash property).
+ * @return {Object} Updated date management service state.
+ */
+ const removeDate = (date) => {
+ // Find the index of the date
+ const index = currentDates.findIndex(d => d.hash === date.hash);
+ if (index !== -1) {
+ // Remove the date
+ currentDates.splice(index, 1);
+ // Mark as dirty
+ isDirty = true;
+ // Sort the dates by start date
+ currentDates = sortBy(currentDates, 'start_date');
+ }
+ return getCurrentDates();
+ }
+
+ /**
+ * Adds a new default date to the event dates collection.
+ *
+ * Creates a new date object with default values based on existing dates
+ * and current timezone, then adds it to the collection.
+ *
+ * @since 2.0.0
+ *
+ * @return {Object} Updated date management service state.
+ */
+ const addDate = () => {
+ const newDate = createDefaultDate(currentDates, currentTimezone);
+ upsertDate(newDate);
+ return getCurrentDates();
+ }
+
+ /**
+ * Reverts dates and timezone to their original state.
+ *
+ * Restores both dates and timezone to their initial values,
+ * clears dirty flag, and syncs timezone back to meta if available.
+ *
+ * @since 2.0.0
+ *
+ * @return {Object} Reverted date management service state.
+ */
+ const revertDates = () => {
+ currentDates = clone(originalDates);
+ currentTimezone = originalTimezone;
+ isDirty = false;
+
+ // Sync timezone revert to meta if available
+ if (setMeta && meta) {
+ setMeta({
+ ...meta,
+ se_event_timezone: originalTimezone
+ });
+ }
+
+ return getCurrentDates();
+ }
+
+ // Return the public interface
+ return {
+ getCurrentDates,
+ updateTimezone,
+ upsertDate,
+ removeDate,
+ addDate,
+ revertDates,
+ refreshWithNewDates,
+ // Expose internal state getters for external access
+ get originalDates() { return originalDates; },
+ get currentDates() { return currentDates; },
+ get originalTimezone() { return originalTimezone; },
+ get currentTimezone() { return currentTimezone; },
+ get isDirty() { return isDirty; },
+ // Expose internal state setters for external access
+ set originalDates(value) { originalDates = clone(value); },
+ set currentDates(value) { currentDates = clone(value); },
+ set originalTimezone(value) { originalTimezone = value; },
+ set currentTimezone(value) { currentTimezone = value; },
+ set isDirty(value) { isDirty = value; }
+ };
+
+
+};
diff --git a/src/blocks/event-info/index.js b/src/blocks/event-info/index.js
index 391407f..2c7d083 100644
--- a/src/blocks/event-info/index.js
+++ b/src/blocks/event-info/index.js
@@ -1,8 +1,13 @@
/* global lodash, ajaxurl */
/**
- * BLOCK: Events Info
+ * Event Info Block
*
- * Event date and location management.
+ * Gutenberg block for managing event date, time, location, and venue information.
+ * Provides an interface for adding multiple event dates with timezone support,
+ * venue and location details, external links, and calendar integration options.
+ *
+ * @package SimpleEvents
+ * @since 1.0.0
*/
import './editor.scss';
@@ -11,19 +16,17 @@ import moment from 'moment';
import { clone, isEqual, sortBy, head, last, pull } from 'lodash';
import { __ } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';
-import { Fragment } from '@wordpress/element';
+import { Fragment, useState, useEffect } from '@wordpress/element';
import {
PanelRow,
Placeholder,
- BaseControl,
- Dropdown,
+
Button,
TextControl,
Toolbar,
Disabled,
CheckboxControl,
ComboboxControl,
- DateTimePicker,
PanelBody,
ToggleControl,
} from '@wordpress/components';
@@ -34,145 +37,265 @@ import {
InspectorControls,
useBlockProps,
} from '@wordpress/block-editor';
-import { withState } from '@wordpress/compose';
import { useEntityProp } from '@wordpress/core-data';
+import { useSelect, useDispatch } from '@wordpress/data';
-/**
- * Constants
- */
-const DEFAULT_START_HOUR = 9;
-const DEFAULT_END_HOUR = 10;
-const DATE_SETTINGS = getSettings(); // eslint-disable-line no-restricted-syntax
-
-const OFFSET = Number(DATE_SETTINGS.timezone.offset);
-const TIMEZONE = DATE_SETTINGS.timezone.string;
-let TIMEZONE_NAME = TIMEZONE;
-if ('' === TIMEZONE) {
- TIMEZONE_NAME = 'UTC' + (OFFSET >= 0 ? '+' : '') + OFFSET;
-}
-const FORMAT = 'YYYY-MM-DD HH:mm';
-const TIMEZONES = moment.tz
- .names()
- .map((tz) => ({ label: tz, value: tz }));
-
-// Add an option to use the site settings.
-// (This label is as helpful as we can be since manual offsets have no string.)
-TIMEZONES.unshift({
- label: __('Same as site', 'simple-events'),
- value: '',
-});
+// Import date utilities
+import {
+
+ TIMEZONE,
+ TIMEZONE_NAME,
+ TIMEZONES,
+
+} from './date-utils';
+
+import apiFetch from '@wordpress/api-fetch';
+
+import { dateManager } from './event-manager';
+
+// Import the new DateTimeGroup component as DateTimeGroupNew
+import DateTimeGroupNew from './components/DateTimeGroup';
+
+const DATE_SETTINGS = getSettings(); // Still needed for timeFormat
/**
- * Get the start and end date from a collection of dates.
- * Will remove any event that has passed.
+ * Fetches event dates from the custom REST API endpoint.
+ *
+ * Retrieves all event dates associated with the current post via the
+ * Simple Events REST API. Returns an empty array if no post ID is found.
*
- * @param {{all_day: boolean, datetime_start: string, datetime_end: string}[]} dates The dates to check.
+ * @since 2.0.0
*
- * returns {{ datetime_start: string, datetime_end: string }}
+ * @return {Promise} Promise that resolves to an array of event date objects.
*/
-const getStartAndEndDate = (dates) => {
- // iterate over and remove any that has passed.
- const now = moment().utcOffset(OFFSET);
- const filteredDates = dates.filter((date) => {
+export const getEventDatePosts = () => {
+ // Get the current post id.
+ const postId = window?.wp?.data?.select('core/editor')?.getCurrentPostId();
+ if (!postId) {
+ // Return an empty array if no post id is found.
+ return Promise.resolve([]);
+ }
- const endDate = moment.unix(date.datetime_end).utcOffset(OFFSET);
- return endDate.isAfter(now);
+ // simple-events/event-dates/{event}
+ return apiFetch({ path: '/simple-events/event-dates/' + postId }).then((posts) => posts
+ ).catch((error) => {
+ console.error('Error fetching event dates:', error);
+ return [];
});
- // If we have no filtered dates, but we had dates, before.
- if (filteredDates.length === 0 && dates.length > 0) {
- // Extract all start dates with the offset.
- const allStartDates = dates.map((date) =>
- moment.unix(date.datetime_start).utcOffset(OFFSET)
- );
- const allEndDates = dates.map((date) =>
- moment.unix(date.datetime_end).utcOffset(OFFSET)
- );
+};
- // Return the latest start date and earliest end date.
- return {
- datetime_start: moment.max(allStartDates).unix().toString(),
- datetime_end: moment.max(allEndDates).unix().toString(),
- }
+/**
+ * Saves event dates to the custom REST API endpoint.
+ *
+ * Sends event dates to the server for persistence via the Simple Events
+ * REST API sync endpoint. Displays success/error notifications and optionally
+ * refreshes the date manager instance with updated data.
+ *
+ * @since 2.0.0
+ *
+ * @param {Array} dates Array of event date objects to save.
+ * @param {Object|null} dateManagerInstance Optional date manager instance to refresh after save.
+ * @return {Promise