From 52dba05fad5273c3401cc66ad15f1bb07397c791 Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Wed, 24 Aug 2022 23:53:34 -0300 Subject: [PATCH] review --- .../omnichannel/useOmnichannelContact.ts | 43 ------------------- .../footer/voip/VoipFooter.stories.tsx | 1 - .../client/sidebar/footer/voip/VoipFooter.tsx | 14 +++--- .../voip/hooks/useOmnichannelContactLabel.ts | 17 ++++++++ .../client/sidebar/footer/voip/index.tsx | 1 - .../sidebar/sections/OmnichannelSection.tsx | 2 +- .../actions/OmnichannelCallToggleError.tsx | 2 +- .../DeviceManagementFeatureModal.tsx | 2 +- .../voip/modal/DialPad/DialPadModal.tsx | 3 +- 9 files changed, 28 insertions(+), 57 deletions(-) delete mode 100644 apps/meteor/client/hooks/omnichannel/useOmnichannelContact.ts create mode 100644 apps/meteor/client/sidebar/footer/voip/hooks/useOmnichannelContactLabel.ts diff --git a/apps/meteor/client/hooks/omnichannel/useOmnichannelContact.ts b/apps/meteor/client/hooks/omnichannel/useOmnichannelContact.ts deleted file mode 100644 index 4eee21c519a2a..0000000000000 --- a/apps/meteor/client/hooks/omnichannel/useOmnichannelContact.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { ILivechatVisitor } from '@rocket.chat/core-typings'; -import { useEndpoint } from '@rocket.chat/ui-contexts'; -import { useQuery } from '@tanstack/react-query'; -import { useState } from 'react'; - -import { parseOutboundPhoneNumber } from '../../../ee/client/lib/voip/parseOutboundPhoneNumber'; - -type Contact = { - name: string; - phone: string; -}; - -type ContactQuery = { - isLoading: boolean; - isError: boolean; - contact: Contact; -}; - -const createContact = (phone: string, data: Pick | null): Contact => ({ - phone, - name: data?.name || '', -}); - -export const useOmnichannelContact = (ogPhone: string, name = ''): ContactQuery => { - const getContactBy = useEndpoint('GET', '/v1/omnichannel/contact.search'); - const phone = parseOutboundPhoneNumber(ogPhone); - const [defaultContact] = useState({ phone, name }); - - const { - data: contact, - isLoading, - isError, - } = useQuery(['getContactsByPhone', phone], async (): Promise => { - const { contact } = await getContactBy({ phone }); - return createContact(phone, contact); - }); - - return { - contact: contact || defaultContact, - isLoading, - isError, - }; -}; diff --git a/apps/meteor/client/sidebar/footer/voip/VoipFooter.stories.tsx b/apps/meteor/client/sidebar/footer/voip/VoipFooter.stories.tsx index 914f0b6f6e97e..c8d273305a7c2 100644 --- a/apps/meteor/client/sidebar/footer/voip/VoipFooter.stories.tsx +++ b/apps/meteor/client/sidebar/footer/voip/VoipFooter.stories.tsx @@ -90,7 +90,6 @@ const VoipFooterTemplate: ComponentStory = (args) => { callsInQueue='2 Calls In Queue' dispatchEvent={() => null} openedRoomInfo={{ v: { token: '' }, rid: '' }} - anonymousText={'Anonymous'} options={{ deviceSettings: { label: ( diff --git a/apps/meteor/client/sidebar/footer/voip/VoipFooter.tsx b/apps/meteor/client/sidebar/footer/voip/VoipFooter.tsx index 042158bd7108a..45486e8250f35 100644 --- a/apps/meteor/client/sidebar/footer/voip/VoipFooter.tsx +++ b/apps/meteor/client/sidebar/footer/voip/VoipFooter.tsx @@ -7,7 +7,7 @@ import React, { ReactElement, MouseEvent, ReactNode } from 'react'; import type { VoipFooterMenuOptions } from '../../../../ee/client/hooks/useVoipFooterMenu'; import { CallActionsType } from '../../../contexts/CallContext'; -import { useOmnichannelContact } from '../../../hooks/omnichannel/useOmnichannelContact'; +import { useOmnichannelContactLabel } from './hooks/useOmnichannelContactLabel'; type VoipFooterPropsType = { caller: ICallerInfo; @@ -32,7 +32,6 @@ type VoipFooterPropsType = { openRoom: (rid: IVoipRoom['_id']) => void; dispatchEvent: (params: { event: VoipClientEvents; rid: string; comment?: string }) => void; openedRoomInfo: { v: { token?: string | undefined }; rid: string }; - anonymousText: string; isEnterprise: boolean; children?: ReactNode; options: VoipFooterMenuOptions; @@ -54,12 +53,11 @@ export const VoipFooter = ({ callsInQueue, dispatchEvent, openedRoomInfo, - anonymousText, isEnterprise = false, children, options, }: VoipFooterPropsType): ReactElement => { - const { contact } = useOmnichannelContact(caller.callerId); + const contactLabel = useOmnichannelContactLabel(caller); const t = useTranslation(); const cssClickable = @@ -80,7 +78,6 @@ export const VoipFooter = ({ { if (callerState === 'IN_CALL' || callerState === 'ON_HOLD') { openRoom(openedRoomInfo.rid); @@ -121,8 +118,11 @@ export const VoipFooter = ({ - - {contact.name || caller.callerName || contact.phone || anonymousText} + + {/* TODO: Check what is the point of having Anonymous here, + since callerId and callerName are required and they act as a fallback + */} + {contactLabel || t('Anonymous')} {subtitle} diff --git a/apps/meteor/client/sidebar/footer/voip/hooks/useOmnichannelContactLabel.ts b/apps/meteor/client/sidebar/footer/voip/hooks/useOmnichannelContactLabel.ts new file mode 100644 index 0000000000000..dd15733e88893 --- /dev/null +++ b/apps/meteor/client/sidebar/footer/voip/hooks/useOmnichannelContactLabel.ts @@ -0,0 +1,17 @@ +import { ICallerInfo } from '@rocket.chat/core-typings'; +import { useEndpoint } from '@rocket.chat/ui-contexts'; +import { useQuery } from '@tanstack/react-query'; + +import { parseOutboundPhoneNumber } from '../../../../../ee/client/lib/voip/parseOutboundPhoneNumber'; + +export const useOmnichannelContactLabel = (caller: ICallerInfo): string => { + const getContactBy = useEndpoint('GET', '/v1/omnichannel/contact.search'); + const phone = parseOutboundPhoneNumber(caller.callerId); + + const { data } = useQuery(['getContactsByPhone', phone], async () => { + return (await getContactBy({ phone })).contact; + }); + + // TODO: callerName is typed as required so maybe we should not use phone as fallback + return data?.name || caller.callerName || phone; +}; diff --git a/apps/meteor/client/sidebar/footer/voip/index.tsx b/apps/meteor/client/sidebar/footer/voip/index.tsx index 252f843e22ff6..17a327fdd6d9e 100644 --- a/apps/meteor/client/sidebar/footer/voip/index.tsx +++ b/apps/meteor/client/sidebar/footer/voip/index.tsx @@ -102,7 +102,6 @@ export const VoipFooter = (): ReactElement | null => { callsInQueue={getCallsInQueueText} dispatchEvent={dispatchEvent} openedRoomInfo={openedRoomInfo} - anonymousText={t('Anonymous')} isEnterprise={isEnterprise} options={options} /> diff --git a/apps/meteor/client/sidebar/sections/OmnichannelSection.tsx b/apps/meteor/client/sidebar/sections/OmnichannelSection.tsx index 14681e3881aac..e411c68bc45a7 100644 --- a/apps/meteor/client/sidebar/sections/OmnichannelSection.tsx +++ b/apps/meteor/client/sidebar/sections/OmnichannelSection.tsx @@ -51,7 +51,7 @@ const OmnichannelSection = (props: typeof Box): ReactElement => { // The className is a paliative while we make TopBar.ToolBox optional on fuselage return ( - + {t('Omnichannel')} {showOmnichannelQueueLink && handleRoute('queue')} />} diff --git a/apps/meteor/client/sidebar/sections/actions/OmnichannelCallToggleError.tsx b/apps/meteor/client/sidebar/sections/actions/OmnichannelCallToggleError.tsx index 62c817ee8aea2..0d5d7817f9c42 100644 --- a/apps/meteor/client/sidebar/sections/actions/OmnichannelCallToggleError.tsx +++ b/apps/meteor/client/sidebar/sections/actions/OmnichannelCallToggleError.tsx @@ -4,5 +4,5 @@ import React, { ReactElement } from 'react'; export const OmnichannelCallToggleError = ({ ...props }): ReactElement => { const t = useTranslation(); - return ; + return ; }; diff --git a/apps/meteor/ee/client/deviceManagement/components/featureModal/DeviceManagementFeatureModal.tsx b/apps/meteor/ee/client/deviceManagement/components/featureModal/DeviceManagementFeatureModal.tsx index 9747f9ee0ffac..477b6aa4c20b5 100644 --- a/apps/meteor/ee/client/deviceManagement/components/featureModal/DeviceManagementFeatureModal.tsx +++ b/apps/meteor/ee/client/deviceManagement/components/featureModal/DeviceManagementFeatureModal.tsx @@ -46,7 +46,7 @@ const DeviceManagementFeatureModal = ({ close }: { close: () => void }): ReactEl }; return ( - + {t('Workspace_now_using_device_management')} diff --git a/apps/meteor/ee/client/voip/modal/DialPad/DialPadModal.tsx b/apps/meteor/ee/client/voip/modal/DialPad/DialPadModal.tsx index 720388c0346dc..501f3ff9b975a 100644 --- a/apps/meteor/ee/client/voip/modal/DialPad/DialPadModal.tsx +++ b/apps/meteor/ee/client/voip/modal/DialPad/DialPadModal.tsx @@ -28,7 +28,7 @@ const DialPadModal = ({ initialValue, errorMessage, handleClose }: DialPadModalP useEnterKey(handleCallButtonClick, isButtonDisabled); return ( - + @@ -57,7 +57,6 @@ const DialPadModal = ({ initialValue, errorMessage, handleClose }: DialPadModalP secondary info size='64px' - data-qa-id='omncDialpadCallButton' onClick={(): void => { handleCallButtonClick(); handleClose();