From 8c2ae86393a67685717d33c13c491b7f5238ebfa Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Fri, 20 May 2022 16:12:13 -0300 Subject: [PATCH 1/2] Convert additionalForms --- .../views/omnichannel/additionalForms.js | 26 -------- .../views/omnichannel/additionalForms.tsx | 42 +++++++++++++ .../MaxChatsPerAgentDisplay.js | 16 +++-- .../omnichannel/additionalForms/register.js | 51 --------------- .../omnichannel/additionalForms/register.ts | 62 +++++++++++++++++++ 5 files changed, 111 insertions(+), 86 deletions(-) delete mode 100644 apps/meteor/client/views/omnichannel/additionalForms.js create mode 100644 apps/meteor/client/views/omnichannel/additionalForms.tsx delete mode 100644 apps/meteor/ee/client/omnichannel/additionalForms/register.js create mode 100644 apps/meteor/ee/client/omnichannel/additionalForms/register.ts diff --git a/apps/meteor/client/views/omnichannel/additionalForms.js b/apps/meteor/client/views/omnichannel/additionalForms.js deleted file mode 100644 index a3aaca93ba32..000000000000 --- a/apps/meteor/client/views/omnichannel/additionalForms.js +++ /dev/null @@ -1,26 +0,0 @@ -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(); diff --git a/apps/meteor/client/views/omnichannel/additionalForms.tsx b/apps/meteor/client/views/omnichannel/additionalForms.tsx new file mode 100644 index 000000000000..a8fab3c41a2c --- /dev/null +++ b/apps/meteor/client/views/omnichannel/additionalForms.tsx @@ -0,0 +1,42 @@ +/* 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; + getForm: (form: keyof EEFormHooks) => () => ReactElement; +} => { + let forms = {} as EEFormHooks; + let updateCb = (): void => undefined; + + const formsSubscription: Subscription = { + 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); diff --git a/apps/meteor/ee/client/omnichannel/additionalForms/MaxChatsPerAgentDisplay.js b/apps/meteor/ee/client/omnichannel/additionalForms/MaxChatsPerAgentDisplay.js index c11a3c6727e7..9783e69985f9 100644 --- a/apps/meteor/ee/client/omnichannel/additionalForms/MaxChatsPerAgentDisplay.js +++ b/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 && ( - <> - {t('Max_number_of_chats_per_agent')} - {maxNumberSimultaneousChat} - - ) - ); + return maxNumberSimultaneousChat ? ( + <> + {t('Max_number_of_chats_per_agent')} + {maxNumberSimultaneousChat} + + ) : null; }; export default MaxChatsPerAgentDisplay; diff --git a/apps/meteor/ee/client/omnichannel/additionalForms/register.js b/apps/meteor/ee/client/omnichannel/additionalForms/register.js deleted file mode 100644 index e7a5d93259f9..000000000000 --- a/apps/meteor/ee/client/omnichannel/additionalForms/register.js +++ /dev/null @@ -1,51 +0,0 @@ -import { useMemo, lazy } from 'react'; - -import { registerForm } from '../../../../client/views/omnichannel/additionalForms'; -import { hasLicense } from '../../../app/license/client'; - -hasLicense('livechat-enterprise').then((enabled) => { - if (!enabled) { - return; - } - - 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({ - 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')), []), - }); -}); diff --git a/apps/meteor/ee/client/omnichannel/additionalForms/register.ts b/apps/meteor/ee/client/omnichannel/additionalForms/register.ts new file mode 100644 index 000000000000..8a3115f1025e --- /dev/null +++ b/apps/meteor/ee/client/omnichannel/additionalForms/register.ts @@ -0,0 +1,62 @@ +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; + useMaxChatsPerAgent?: () => React.LazyExoticComponent; + useMaxChatsPerAgentDisplay?: () => React.LazyExoticComponent; + useEeNumberInput?: () => React.LazyExoticComponent; + useEeTextAreaInput?: () => React.LazyExoticComponent; + useBusinessHoursMultiple?: () => React.LazyExoticComponent; + useEeTextInput?: () => React.LazyExoticComponent; + useBusinessHoursTimeZone?: () => React.LazyExoticComponent; + useContactManager?: () => React.LazyExoticComponent; + + useCurrentChatTags?: () => React.LazyExoticComponent; + useDepartmentBusinessHours?: () => React.LazyExoticComponent; + useDepartmentForwarding?: () => React.LazyExoticComponent; + usePrioritiesSelect?: () => React.LazyExoticComponent; + useSelectForwardDepartment?: () => React.LazyExoticComponent; + } +} + +hasLicense('livechat-enterprise').then((enabled) => { + if (!enabled) { + return; + } + + registerForm({ + useCustomFieldsAdditionalForm: () => useMemo(() => lazy(() => import('./CustomFieldsAdditionalFormContainer')), []), + useMaxChatsPerAgent: () => useMemo(() => lazy(() => import('./MaxChatsPerAgentContainer')), []), + useMaxChatsPerAgentDisplay: () => useMemo(() => lazy(() => import('./MaxChatsPerAgentDisplay')), []), + useEeNumberInput: () => useMemo(() => lazy(() => import('./EeNumberInput')), []), + useEeTextAreaInput: () => useMemo(() => lazy(() => import('./EeTextAreaInput')), []), + useBusinessHoursMultiple: () => useMemo(() => lazy(() => import('./BusinessHoursMultipleContainer')), []), + useEeTextInput: () => useMemo(() => lazy(() => import('./EeTextInput')), []), + useBusinessHoursTimeZone: () => useMemo(() => lazy(() => import('./BusinessHoursTimeZone')), []), + useContactManager: () => useMemo(() => lazy(() => import('./ContactManager')), []), + useCurrentChatTags: () => useMemo(() => lazy(() => import('../tags/CurrentChatTags')), []), + useDepartmentBusinessHours: () => useMemo(() => lazy(() => import('./DepartmentBusinessHours')), []), + useDepartmentForwarding: () => useMemo(() => lazy(() => import('./DepartmentForwarding')), []), + usePrioritiesSelect: () => useMemo(() => lazy(() => import('./PrioritiesSelect')), []), + useSelectForwardDepartment: () => useMemo(() => lazy(() => import('../../../../client/components/AutoCompleteDepartment')), []), + }); +}); From 1827353f6f49313606229e957fb29597a855a1f3 Mon Sep 17 00:00:00 2001 From: Martin Date: Fri, 20 May 2022 16:38:41 -0300 Subject: [PATCH 2/2] Fix typo on import --- apps/meteor/ee/client/omnichannel/additionalForms/register.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/meteor/ee/client/omnichannel/additionalForms/register.ts b/apps/meteor/ee/client/omnichannel/additionalForms/register.ts index 8a3115f1025e..e4123f4a155b 100644 --- a/apps/meteor/ee/client/omnichannel/additionalForms/register.ts +++ b/apps/meteor/ee/client/omnichannel/additionalForms/register.ts @@ -10,7 +10,7 @@ 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 EeNumberInput from './EeNumberInput'; import type EeTextAreaInput from './EeTextAreaInput'; import type EeTextInput from './EeTextInput'; import type MaxChatsPerAgentContainer from './MaxChatsPerAgentContainer'; @@ -23,7 +23,7 @@ declare module '../../../../client/views/omnichannel/additionalForms' { useCustomFieldsAdditionalForm: () => React.LazyExoticComponent; useMaxChatsPerAgent?: () => React.LazyExoticComponent; useMaxChatsPerAgentDisplay?: () => React.LazyExoticComponent; - useEeNumberInput?: () => React.LazyExoticComponent; + useEeNumberInput?: () => React.LazyExoticComponent; useEeTextAreaInput?: () => React.LazyExoticComponent; useBusinessHoursMultiple?: () => React.LazyExoticComponent; useEeTextInput?: () => React.LazyExoticComponent;