@@ -146,6 +185,27 @@ exports[`renders event details component with only required props 1`] = `
>
When
+
@@ -188,6 +248,27 @@ exports[`renders event details component without links to api in the text 1`] =
>
When
+
diff --git a/packages/volto/src/components/theme/View/EventDatesInfo.jsx b/packages/volto/src/components/theme/View/EventDatesInfo.jsx
index 232df550f64..730a8d74ea2 100644
--- a/packages/volto/src/components/theme/View/EventDatesInfo.jsx
+++ b/packages/volto/src/components/theme/View/EventDatesInfo.jsx
@@ -3,11 +3,18 @@ import PropTypes from 'prop-types';
import { List } from 'semantic-ui-react';
import cx from 'classnames';
-import { toBackendLang } from '@plone/volto/helpers/Utils/Utils';
import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
import { useSelector } from 'react-redux';
+import { formatDate } from '@plone/volto/helpers/Utils/Date';
+/**
+ * @deprecated Use the native Date API directly. Will be removed in Volto 20.
+ */
export const datesForDisplay = (start, end, moment) => {
+ // eslint-disable-next-line no-console
+ console.warn(
+ 'datesForDisplay is deprecated and will be removed in Volto 20. Use the native Date API directly.',
+ );
const mStart = moment(start);
const mEnd = moment(end);
if (!mStart.isValid() || !mEnd.isValid()) {
@@ -25,17 +32,30 @@ export const datesForDisplay = (start, end, moment) => {
};
};
-const When_ = ({ start, end, whole_day, open_end, moment: momentlib }) => {
- const lang = useSelector((state) => state.intl.locale);
-
- const moment = momentlib.default;
- moment.locale(toBackendLang(lang));
+const When_ = ({ start, end, whole_day, open_end }) => {
+ const locale = useSelector((state) => state.intl.locale);
- const datesInfo = datesForDisplay(start, end, moment);
- if (!datesInfo) {
- return;
+ const dStart = new Date(start);
+ const dEnd = end != null ? new Date(end) : new Date();
+ if (isNaN(dStart.getTime()) || isNaN(dEnd.getTime())) {
+ return null;
}
- // TODO I18N INTL
+ const sameDay =
+ dStart.getFullYear() === dEnd.getFullYear() &&
+ dStart.getMonth() === dEnd.getMonth() &&
+ dStart.getDate() === dEnd.getDate();
+ const sameTime =
+ sameDay &&
+ dStart.getHours() === dEnd.getHours() &&
+ dStart.getMinutes() === dEnd.getMinutes();
+ const datesInfo = {
+ sameDay,
+ sameTime,
+ startDate: formatDate({ date: dStart, format: 'll', locale }),
+ startTime: formatDate({ date: dStart, format: 'LT', locale }),
+ endDate: formatDate({ date: dEnd, format: 'll', locale }),
+ endTime: formatDate({ date: dEnd, format: 'LT', locale }),
+ };
return (
{
);
};
-export const When = injectLazyLibs(['moment'])(When_);
+export const When = When_;
When.propTypes = {
start: PropTypes.string.isRequired,
@@ -109,13 +129,8 @@ When.propTypes = {
open_end: PropTypes.bool,
};
-export const Recurrence_ = ({
- recurrence,
- start,
- moment: momentlib,
- rrule,
-}) => {
- const moment = momentlib.default;
+export const Recurrence_ = ({ recurrence, start, rrule }) => {
+ const locale = useSelector((state) => state.intl.locale);
const { RRule, rrulestr } = rrule;
if (recurrence.indexOf('DTSTART') < 0) {
var dtstart = RRule.optionsToString({
@@ -129,12 +144,11 @@ export const Recurrence_ = ({
datesForDisplay(date, undefined, moment))
- .map((date) => date.startDate)}
+ .map((date) => formatDate({ date, format: 'll', locale }))}
/>
);
};
-export const Recurrence = injectLazyLibs(['moment', 'rrule'])(Recurrence_);
+export const Recurrence = injectLazyLibs(['rrule'])(Recurrence_);
Recurrence.propTypes = {
recurrence: PropTypes.string.isRequired,
diff --git a/packages/volto/src/components/theme/View/EventDatesInfo.test.jsx b/packages/volto/src/components/theme/View/EventDatesInfo.test.jsx
index ac2d4e85c2c..a4952eec6cb 100644
--- a/packages/volto/src/components/theme/View/EventDatesInfo.test.jsx
+++ b/packages/volto/src/components/theme/View/EventDatesInfo.test.jsx
@@ -93,3 +93,24 @@ test('same day, not whole day, not open end', () => {
const json = component.toJSON();
expect(json).toMatchSnapshot();
});
+
+test('returns null for invalid start date', () => {
+ const component = renderer.create(
+
+
+ ,
+ );
+ expect(component.toJSON()).toBeNull();
+});
+
+test('uses current time when end is undefined', () => {
+ vi.useFakeTimers({ now: new Date('2019-06-23T15:20:00+00:00') });
+ const component = renderer.create(
+
+
+ ,
+ );
+ const json = component.toJSON();
+ expect(json).toMatchSnapshot();
+ vi.useRealTimers();
+});
diff --git a/packages/volto/src/components/theme/View/__snapshots__/EventDatesInfo.test.jsx.snap b/packages/volto/src/components/theme/View/__snapshots__/EventDatesInfo.test.jsx.snap
index 306d9a0c544..c27515d3b57 100644
--- a/packages/volto/src/components/theme/View/__snapshots__/EventDatesInfo.test.jsx.snap
+++ b/packages/volto/src/components/theme/View/__snapshots__/EventDatesInfo.test.jsx.snap
@@ -121,3 +121,27 @@ exports[`same day, whole day 1`] = `
`;
+
+exports[`uses current time when end is undefined 1`] = `
+
+
+ Jun 23, 2019
+
+ from
+
+ 11:55 AM
+
+ to
+
+ 3:20 PM
+
+
+`;
diff --git a/packages/volto/types/components/theme/View/EventDatesInfo.d.ts b/packages/volto/types/components/theme/View/EventDatesInfo.d.ts
index 0bfeadcd54d..b8059c3a900 100644
--- a/packages/volto/types/components/theme/View/EventDatesInfo.d.ts
+++ b/packages/volto/types/components/theme/View/EventDatesInfo.d.ts
@@ -1,3 +1,4 @@
+/** @deprecated Will be removed in Volto 20. Use the native Date API directly. */
export function datesForDisplay(start: any, end: any, moment: any): {
sameDay: any;
sameTime: any;
@@ -7,10 +8,9 @@ export function datesForDisplay(start: any, end: any, moment: any): {
endTime: any;
};
export const When: any;
-export function Recurrence_({ recurrence, start, moment: momentlib, rrule, }: {
+export function Recurrence_({ recurrence, start, rrule, }: {
recurrence: any;
start: any;
- moment: any;
rrule: any;
}): import("react/jsx-runtime").JSX.Element;
export const Recurrence: any;