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

Co-authored-by: Tasso Evangelista <[email protected]>

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

@@ -0,0 +1,52 @@
+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.ts

@@ -0,0 +1,14 @@
+import moment from 'moment';
+
+export const getMomentChartLabelsAndData = (timestamp = Date.now()) => {
+	const timingLabels = [];
+	const initData = [];
+	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);
+	}
+
+	return [timingLabels, initData];
+};

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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,8 @@
+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.ts

@@ -0,0 +1,26 @@
+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);
+	});