chore(deps): Upgrade date-fns (RocketChat#36415)

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

Author: tassoevan

apps/meteor/app/livechat/lib/messageTypes.ts

@@ -1,5 +1,5 @@
 import type { IOmnichannelSystemMessage } from '@rocket.chat/core-typings';
-import formatDistance from 'date-fns/formatDistance';
+import { formatDistance } from 'date-fns';
 import moment from 'moment';
 
 import { MessageTypes } from '../../ui-utils/lib/MessageTypes';

apps/meteor/app/ui-utils/client/lib/RoomHistoryManager.ts

@@ -1,6 +1,6 @@
 import type { IMessage, IRoom, ISubscription } from '@rocket.chat/core-typings';
 import { Emitter } from '@rocket.chat/emitter';
-import differenceInMilliseconds from 'date-fns/differenceInMilliseconds';
+import { differenceInMilliseconds } from 'date-fns';
 import { ReactiveVar } from 'meteor/reactive-var';
 import { Tracker } from 'meteor/tracker';
 import type { MutableRefObject } from 'react';

apps/meteor/client/hooks/usePruneWarningMessage.ts

@@ -3,7 +3,7 @@ import { useSafely } from '@rocket.chat/fuselage-hooks';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import { useSetting, useTranslation, useLanguage } from '@rocket.chat/ui-contexts';
 import { sendAt } from 'cron';
-import intlFormat from 'date-fns/intlFormat';
+import { intlFormat } from 'date-fns';
 import { useEffect, useState } from 'react';
 
 import { useFormattedRelativeTime } from './useFormattedRelativeTime';

apps/meteor/client/views/admin/subscription/components/cards/PlanCard/PlanCardTrial.tsx

@@ -1,7 +1,7 @@
 import type { ILicenseV3 } from '@rocket.chat/core-typings';
 import { Box, Card, CardBody, CardControls, CardRow, Tag } from '@rocket.chat/fuselage';
 import { ExternalLink } from '@rocket.chat/ui-client';
-import differenceInDays from 'date-fns/differenceInDays';
+import { differenceInDays } from 'date-fns';
 import type { ReactElement } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 

apps/meteor/package.json

@@ -334,7 +334,7 @@
 		"cron-validator": "^1.3.1",
 		"css-vars-ponyfill": "^2.4.9",
 		"csv-parse": "^5.5.6",
-		"date-fns": "^2.30.0",
+		"date-fns": "~4.1.0",
 		"date.js": "~0.3.3",
 		"debug": "~4.3.7",
 		"dompurify": "^3.2.6",

ee/packages/omnichannel-services/package.json

@@ -24,7 +24,7 @@
 		"@rocket.chat/string-helpers": "~0.31.25",
 		"@rocket.chat/tools": "workspace:^",
 		"@types/node": "~22.16.1",
-		"date-fns": "^2.30.0",
+		"date-fns": "~4.1.0",
 		"ejson": "^2.2.3",
 		"emoji-toolkit": "^7.0.1",
 		"eventemitter3": "^5.0.1",

ee/packages/omnichannel-services/src/livechatSystemMessages.ts

@@ -1,5 +1,5 @@
 import type { IOmnichannelSystemMessage, MessageTypesValues } from '@rocket.chat/core-typings';
-import formatDistance from 'date-fns/formatDistance';
+import { formatDistance } from 'date-fns/formatDistance';
 import moment from 'moment';
 
 const livechatSystemMessagesMap = new Map<

packages/gazzodown/package.json

@@ -21,6 +21,7 @@
 		"typecheck": "tsc --noEmit"
 	},
 	"dependencies": {
+		"date-fns": "~4.1.0",
 		"dompurify": "^3.2.6",
 		"highlight.js": "11.8.0",
 		"react-error-boundary": "^3.1.4",

packages/gazzodown/src/elements/Timestamp/index.tsx

@@ -1,18 +1,16 @@
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
 import { Tag } from '@rocket.chat/fuselage';
 import type * as MessageParser from '@rocket.chat/message-parser';
-import { format } from 'date-fns';
-import { useContext, useEffect, useState, type ReactElement } from 'react';
+import { format, intlFormatDistance } from 'date-fns';
+import { useContext, useEffect, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 
-import { timeAgo } from './timeago';
 import { MarkupInteractionContext } from '../../MarkupInteractionContext';
 
 type BoldSpanProps = {
 	children: MessageParser.Timestamp;
 };
 
-const Timestamp = ({ format, value }: { format: 't' | 'T' | 'd' | 'D' | 'f' | 'F' | 'R'; value: Date }): ReactElement => {
+const Timestamp = ({ format, value }: { format: 't' | 'T' | 'd' | 'D' | 'f' | 'F' | 'R'; value: Date }) => {
 	switch (format) {
 		case 't': // Short time format
 			return <ShortTime value={value} />;
@@ -37,7 +35,7 @@ const Timestamp = ({ format, value }: { format: 't' | 'T' | 'd' | 'D' | 'f' | 'F
 };
 
 // eslint-disable-next-line react/no-multi-comp
-const TimestampWrapper = ({ children }: BoldSpanProps): ReactElement => {
+const TimestampWrapper = ({ children }: BoldSpanProps) => {
 	const { enableTimestamp } = useContext(MarkupInteractionContext);
 
 	if (!enableTimestamp) {
@@ -87,12 +85,12 @@ const RelativeTime = ({ value }: { value: Date }) => {
 	const time = value.getTime();
 
 	const { language } = useContext(MarkupInteractionContext);
-	const [text, setTime] = useState(() => timeAgo(time, language ?? 'en'));
+	const [text, setTime] = useState(() => intlFormatDistance(time, Date.now(), { locale: language ?? 'en' }));
 	const [timeToRefresh, setTimeToRefresh] = useState(() => getTimeToRefresh(time));
 
 	useEffect(() => {
 		const interval = setInterval(() => {
-			setTime(timeAgo(value.getTime(), 'en'));
+			setTime(intlFormatDistance(value.getTime(), Date.now(), { locale: 'en' }));
 			setTimeToRefresh(getTimeToRefresh(time));
 		}, timeToRefresh);