Chore: Convert additionalForms (#25586)

Co-authored-by: Martin <martin.schoeler@rocket.chat>

apps/meteor/client/views/omnichannel/additionalForms.js

-const createFormSubscription = () => {
-	let forms = {};
-	let updateCb = () => {};
-
-	const formsSubscription = {
-		subscribe: (cb) => {
-			updateCb = cb;
-			return () => {
-				updateCb = () => {};
-			};
-		},
-		getCurrentValue: () => forms,
-	};
-	const registerForm = (newForm) => {
-		forms = { ...forms, ...newForm };
-		updateCb();
-	};
-	const unregisterForm = (form) => {
-		delete forms[form];
-		updateCb();
-	};
-
-	return { registerForm, unregisterForm, formsSubscription };
-};
-
-export const { registerForm, unregisterForm, formsSubscription } = createFormSubscription();

apps/meteor/client/views/omnichannel/additionalForms.tsx

+/* eslint-disable @typescript-eslint/no-empty-interface */
+import { ReactElement } from 'react';
+import { Unsubscribe, useSubscription, Subscription } from 'use-subscription';
+
+// eslint-disable-next-line @typescript-eslint/interface-name-prefix
+export interface EEFormHooks {}
+
+const createFormSubscription = (): {
+	registerForm: (form: EEFormHooks) => void;
+	unregisterForm: (form: keyof EEFormHooks) => void;
+	formsSubscription: Subscription<EEFormHooks>;
+	getForm: (form: keyof EEFormHooks) => () => ReactElement;
+} => {
+	let forms = {} as EEFormHooks;
+	let updateCb = (): void => undefined;
+
+	const formsSubscription: Subscription<EEFormHooks> = {
+		subscribe: (cb: () => void): Unsubscribe => {
+			updateCb = cb;
+			return (): void => {
+				updateCb = (): void => undefined;
+			};
+		},
+		getCurrentValue: (): EEFormHooks => forms,
+	};
+	const registerForm = (newForm: EEFormHooks): void => {
+		forms = { ...forms, ...newForm };
+		updateCb();
+	};
+	const unregisterForm = (form: keyof EEFormHooks): void => {
+		delete forms[form];
+		updateCb();
+	};
+
+	const getForm = (form: keyof EEFormHooks): (() => ReactElement) => (forms as any)[form] as any;
+
+	return { registerForm, unregisterForm, formsSubscription, getForm };
+};
+
+export const { registerForm, unregisterForm, formsSubscription, getForm } = createFormSubscription();
+
+export const useFormsSubscription = (): EEFormHooks => useSubscription(formsSubscription);

apps/meteor/ee/client/omnichannel/additionalForms/MaxChatsPerAgentDisplay.js

@@ -3,16 +3,14 @@ import React from 'react';
 
 import UserInfo from '../../../../client/views/room/contextualBar/UserInfo';
 
-const MaxChatsPerAgentDisplay = ({ data: { livechat: { maxNumberSimultaneousChat = '' } = {} } = {} }) => {
+const MaxChatsPerAgentDisplay = ({ data: { livechat: { maxNumberSimultaneousChat = 0 } = {} } = {} }) => {
 	const t = useTranslation();
-	return (
-		maxNumberSimultaneousChat && (
-			<>
-				<UserInfo.Label>{t('Max_number_of_chats_per_agent')}</UserInfo.Label>
-				<UserInfo.Info>{maxNumberSimultaneousChat}</UserInfo.Info>
-			</>
-		)
-	);
+	return maxNumberSimultaneousChat ? (
+		<>
+			<UserInfo.Label>{t('Max_number_of_chats_per_agent')}</UserInfo.Label>
+			<UserInfo.Info>{maxNumberSimultaneousChat}</UserInfo.Info>
+		</>
+	) : null;
 };
 
 export default MaxChatsPerAgentDisplay;

apps/meteor/ee/client/omnichannel/additionalForms/register.js → apps/meteor/ee/client/omnichannel/additionalForms/register.ts

 import { useMemo, lazy } from 'react';
 
+import type AutoCompleteDepartment from '../../../../client/components/AutoCompleteDepartment';
 import { registerForm } from '../../../../client/views/omnichannel/additionalForms';
 import { hasLicense } from '../../../app/license/client';
+import type CurrentChatTags from '../tags/CurrentChatTags';
+import type BusinessHoursMultipleContainer from './BusinessHoursMultipleContainer';
+import type BusinessHoursTimeZone from './BusinessHoursTimeZone';
+import type ContactManager from './ContactManager';
+import type CustomFieldsAdditionalFormContainer from './CustomFieldsAdditionalFormContainer';
+import type DepartmentBusinessHours from './DepartmentBusinessHours';
+import type DepartmentForwarding from './DepartmentForwarding';
+import type EeNumberInput from './EeNumberInput';
+import type EeTextAreaInput from './EeTextAreaInput';
+import type EeTextInput from './EeTextInput';
+import type MaxChatsPerAgentContainer from './MaxChatsPerAgentContainer';
+import type MaxChatsPerAgentDisplay from './MaxChatsPerAgentDisplay';
+import type PrioritiesSelect from './PrioritiesSelect';
+
+declare module '../../../../client/views/omnichannel/additionalForms' {
+	// eslint-disable-next-line @typescript-eslint/interface-name-prefix
+	interface EEFormHooks {
+		useCustomFieldsAdditionalForm: () => React.LazyExoticComponent<typeof CustomFieldsAdditionalFormContainer>;
+		useMaxChatsPerAgent?: () => React.LazyExoticComponent<typeof MaxChatsPerAgentContainer>;
+		useMaxChatsPerAgentDisplay?: () => React.LazyExoticComponent<typeof MaxChatsPerAgentDisplay>;
+		useEeNumberInput?: () => React.LazyExoticComponent<typeof EeNumberInput>;
+		useEeTextAreaInput?: () => React.LazyExoticComponent<typeof EeTextAreaInput>;
+		useBusinessHoursMultiple?: () => React.LazyExoticComponent<typeof BusinessHoursMultipleContainer>;
+		useEeTextInput?: () => React.LazyExoticComponent<typeof EeTextInput>;
+		useBusinessHoursTimeZone?: () => React.LazyExoticComponent<typeof BusinessHoursTimeZone>;
+		useContactManager?: () => React.LazyExoticComponent<typeof ContactManager>;
+
+		useCurrentChatTags?: () => React.LazyExoticComponent<typeof CurrentChatTags>;
+		useDepartmentBusinessHours?: () => React.LazyExoticComponent<typeof DepartmentBusinessHours>;
+		useDepartmentForwarding?: () => React.LazyExoticComponent<typeof DepartmentForwarding>;
+		usePrioritiesSelect?: () => React.LazyExoticComponent<typeof PrioritiesSelect>;
+		useSelectForwardDepartment?: () => React.LazyExoticComponent<typeof AutoCompleteDepartment>;
+	}
+}
 
 hasLicense('livechat-enterprise').then((enabled) => {
 	if (!enabled) {
@@ -10,42 +45,18 @@ hasLicense('livechat-enterprise').then((enabled) => {
 
 	registerForm({
 		useCustomFieldsAdditionalForm: () => useMemo(() => lazy(() => import('./CustomFieldsAdditionalFormContainer')), []),
-	});
-	registerForm({
 		useMaxChatsPerAgent: () => useMemo(() => lazy(() => import('./MaxChatsPerAgentContainer')), []),
-	});
-	registerForm({
 		useMaxChatsPerAgentDisplay: () => useMemo(() => lazy(() => import('./MaxChatsPerAgentDisplay')), []),
-	});
-	registerForm({
 		useEeNumberInput: () => useMemo(() => lazy(() => import('./EeNumberInput')), []),
-	});
-	registerForm({
 		useEeTextAreaInput: () => useMemo(() => lazy(() => import('./EeTextAreaInput')), []),
-	});
-	registerForm({ useEeTextInput: () => useMemo(() => lazy(() => import('./EeTextInput')), []) });
-	registerForm({
 		useBusinessHoursMultiple: () => useMemo(() => lazy(() => import('./BusinessHoursMultipleContainer')), []),
-	});
-	registerForm({
+		useEeTextInput: () => useMemo(() => lazy(() => import('./EeTextInput')), []),
 		useBusinessHoursTimeZone: () => useMemo(() => lazy(() => import('./BusinessHoursTimeZone')), []),
-	});
-	registerForm({
 		useContactManager: () => useMemo(() => lazy(() => import('./ContactManager')), []),
-	});
-	registerForm({
 		useCurrentChatTags: () => useMemo(() => lazy(() => import('../tags/CurrentChatTags')), []),
-	});
-	registerForm({
 		useDepartmentBusinessHours: () => useMemo(() => lazy(() => import('./DepartmentBusinessHours')), []),
-	});
-	registerForm({
 		useDepartmentForwarding: () => useMemo(() => lazy(() => import('./DepartmentForwarding')), []),
-	});
-	registerForm({
 		usePrioritiesSelect: () => useMemo(() => lazy(() => import('./PrioritiesSelect')), []),
-	});
-	registerForm({
 		useSelectForwardDepartment: () => useMemo(() => lazy(() => import('../../../../client/components/AutoCompleteDepartment')), []),
 	});
 });