fix: Invalid date error on some non-roman languages. (#30209)

Co-authored-by: Tasso Evangelista <2263066+tassoevan@users.noreply.github.com>

apps/meteor/client/views/omnichannel/analytics/DateRangePicker.tsx

@@ -6,6 +6,8 @@ import moment from 'moment';
 import type { ComponentProps } from 'react';
 import React, { useState, useMemo, useEffect } from 'react';
 
+moment.locale('en');
+
 type DateRangePickerProps = Omit<ComponentProps<typeof Box>, 'onChange'> & {
 	onChange(range: { start: string; end: string }): void;
 };

apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/getMomentChartLabelsAndData.spec.ts

+import moment from 'moment-timezone';
+
+import { getMomentChartLabelsAndData } from './getMomentChartLabelsAndData';
+
+moment.tz.setDefault('UTC');
+
+describe.each([
+	[
+		'en',
+		[
+			'12AM-1AM',
+			'1AM-2AM',
+			'2AM-3AM',
+			'3AM-4AM',
+			'4AM-5AM',
+			'5AM-6AM',
+			'6AM-7AM',
+			'7AM-8AM',
+			'8AM-9AM',
+			'9AM-10AM',
+			'10AM-11AM',
+			'11AM-12PM',
+		],
+	],
+	/** @see: https://github.com/RocketChat/Rocket.Chat/issues/30191 */
+	[
+		'fa',
+		[
+			'۱۲قبل از ظهر-۱قبل از ظهر',
+			'۱قبل از ظهر-۲قبل از ظهر',
+			'۲قبل از ظهر-۳قبل از ظهر',
+			'۳قبل از ظهر-۴قبل از ظهر',
+			'۴قبل از ظهر-۵قبل از ظهر',
+			'۵قبل از ظهر-۶قبل از ظهر',
+			'۶قبل از ظهر-۷قبل از ظهر',
+			'۷قبل از ظهر-۸قبل از ظهر',
+			'۸قبل از ظهر-۹قبل از ظهر',
+			'۹قبل از ظهر-۱۰قبل از ظهر',
+			'۱۰قبل از ظهر-۱۱قبل از ظهر',
+			'۱۱قبل از ظهر-۱۲بعد از ظهر',
+		],
+	],
+])(`%p language`, (language, expectedTimingLabels) => {
+	beforeEach(() => {
+		moment.locale(language);
+	});
+
+	it('should create timing labels from midnight to noon', () => {
+		const [timingLabels] = getMomentChartLabelsAndData(12 * 60 * 60 * 1000);
+		expect(timingLabels).toStrictEqual(expectedTimingLabels);
+	});
+});

apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/getMomentChartLabelsAndData.js → apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/getMomentChartLabelsAndData.ts

 import moment from 'moment';
 
-export const getMomentChartLabelsAndData = () => {
+export const getMomentChartLabelsAndData = (timestamp = Date.now()) => {
 	const timingLabels = [];
 	const initData = [];
-	const today = moment().startOf('day');
-	for (let m = today; m.diff(moment(), 'hours') < 0; m.add(1, 'hours')) {
-		const hour = m.format('H');
-		timingLabels.push(`${moment(hour, ['H']).format('hA')}-${moment((parseInt(hour) + 1) % 24, ['H']).format('hA')}`);
+	const today = moment(timestamp).startOf('day');
+	for (let m = today; m.diff(moment(timestamp), 'hours') < 0; m.add(1, 'hours')) {
+		const n = moment(m).add(1, 'hours');
+		timingLabels.push(`${m.format('hA')}-${n.format('hA')}`);
 		initData.push(0);
 	}
 

apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/getMomentCurrentLabel.js

-import moment from 'moment';
-
-export const getMomentCurrentLabel = () => {
-	const hour = moment(new Date()).format('H');
-
-	return `${moment(hour, ['H']).format('hA')}-${moment((parseInt(hour) + 1) % 24, ['H']).format('hA')}`;
-};

apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/getMomentCurrentLabel.spec.ts

+import moment from 'moment-timezone';
+
+import { getMomentCurrentLabel } from './getMomentCurrentLabel';
+
+moment.tz.setDefault('UTC');
+
+describe.each([
+	['en', '12PM-1PM'],
+	/** @see: https://github.com/RocketChat/Rocket.Chat/issues/30191 */
+	['fa', '۱۲بعد از ظهر-۱بعد از ظهر'],
+])(`%p language`, (language, expectedLabel) => {
+	beforeEach(() => {
+		moment.locale(language);
+	});
+
+	it('should create timing labels from midnight to noon', () => {
+		const label = getMomentCurrentLabel(12 * 60 * 60 * 1000);
+		expect(label).toStrictEqual(expectedLabel);
+	});
+});

apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/getMomentCurrentLabel.ts

+import moment from 'moment';
+
+export const getMomentCurrentLabel = (timestamp = Date.now()) => {
+	const m = moment(timestamp);
+	const n = moment(m).add(1, 'hours');
+
+	return `${m.format('hA')}-${n.format('hA')}`;
+};

apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/useUpdateChartData.js

-import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
-
-import { updateChart } from '../../../../../app/livechat/client/lib/chartHandler';
-
-export const useUpdateChartData = ({ context, canvas, init, t }) =>
-	useMutableCallback(async (label, data) => {
-		if (!context.current) {
-			context.current = await init(canvas.current, context.current, t);
-		}
-		await updateChart(context.current, label, data);
-	});

apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/useUpdateChartData.ts

+import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { type Chart } from 'chart.js';
+import { type TFunction } from 'i18next';
+import { type RefObject } from 'react';
+
+import { updateChart } from '../../../../../app/livechat/client/lib/chartHandler';
+
+type UseUpdateChartDataOptions = {
+	context: RefObject<Chart | undefined>;
+	canvas: RefObject<HTMLCanvasElement | null>;
+	init: (canvas: HTMLCanvasElement, context: undefined, t: TFunction) => Promise<Chart>;
+	t: TFunction;
+};
+
+export const useUpdateChartData = ({ context: contextRef, canvas: canvasRef, init, t }: UseUpdateChartDataOptions) =>
+	useMutableCallback(async (label: string, data: { [x: string]: number }) => {
+		const canvas = canvasRef.current;
+
+		if (!canvas) {
+			return;
+		}
+
+		const context = contextRef.current ?? (await init(canvas, undefined, t));
+
+		await updateChart(context, label, data);
+	});