Regression: Special characters on phone number

apps/meteor/client/components/voip/room/VoipRoomForeword.tsx

@@ -11,7 +11,7 @@ export const VoipRoomForeword = ({ room }: { room: IVoipRoom }): ReactElement =>
 
 	const avatarUrl = getUserAvatarURL(room.name);
 
-	const roomName = room.name;
+	const roomName = room.fname;
 
 	return (
 		<Box is='div' flexGrow={1} display='flex' justifyContent='center' flexDirection='column'>

apps/meteor/client/providers/MeteorProvider.tsx

@@ -33,19 +33,19 @@ const MeteorProvider: FC = ({ children }) => (
 										<AvatarUrlProvider>
 											<CustomSoundProvider>
 												<UserProvider>
-													<ModalProvider>
-														<AuthorizationProvider>
-															<VideoConfProvider>
-																<DeviceProvider>
+													<DeviceProvider>
+														<ModalProvider>
+															<AuthorizationProvider>
+																<VideoConfProvider>
 																	<CallProvider>
 																		<OmnichannelProvider>
 																			<AttachmentProvider>{children}</AttachmentProvider>
 																		</OmnichannelProvider>
 																	</CallProvider>
-																</DeviceProvider>
-															</VideoConfProvider>
-														</AuthorizationProvider>
-													</ModalProvider>
+																</VideoConfProvider>
+															</AuthorizationProvider>
+														</ModalProvider>
+													</DeviceProvider>
 												</UserProvider>
 											</CustomSoundProvider>
 										</AvatarUrlProvider>

apps/meteor/client/views/omnichannel/directory/calls/contextualBar/VoipInfo.tsx

@@ -33,7 +33,7 @@ export const VoipInfo = ({ room, onClickClose /* , onClickReport  */ }: VoipInfo
 	const phoneNumber = Array.isArray(v?.phone) ? v?.phone[0]?.phoneNumber : v?.phone;
 	const shouldShowWrapup = useMemo(() => lastMessage?.t === 'voip-call-wrapup' && lastMessage?.msg, [lastMessage]);
 	const shouldShowTags = useMemo(() => tags && tags.length > 0, [tags]);
-	const _name = name || fname;
+	const _name = fname || name;
 
 	return (
 		<>

apps/meteor/ee/client/lib/voip/EEVoipClient.ts

@@ -62,8 +62,10 @@ export class EEVoipClient extends VoIPUser {
 	}
 
 	async makeCall(calleeNumber: string): Promise<void> {
-		const digits = calleeNumber.replace(/\D/g, '');
-		this.makeCallURI(`sip:*${digits}@${this.userConfig.sipRegistrarHostnameOrIP}`);
+		const hasPlusChar = calleeNumber.includes('+');
+
+		const digits = calleeNumber.replace('+', '');
+		this.makeCallURI(`sip:${hasPlusChar ? '*' : ''}${digits}@${this.userConfig.sipRegistrarHostnameOrIP}`);
 	}
 
 	static async create(config: VoIPUserConfiguration, mediaRenderer?: IMediaStreamRenderer): Promise<VoIPUser> {

apps/meteor/ee/client/voip/modal/DialPad/DialInput.tsx

@@ -1,10 +1,8 @@
 import { IconButton, TextInput } from '@rocket.chat/fuselage';
-import { useMergedRefs } from '@rocket.chat/fuselage-hooks';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import React, { ChangeEvent, FocusEvent, forwardRef, ReactElement, Ref } from 'react';
+import React, { ChangeEvent, FocusEvent, forwardRef } from 'react';
 
 type DialInputProps = {
-	inputRef: Ref<HTMLInputElement>;
 	inputName: string;
 	inputError: string | undefined;
 	isButtonDisabled: boolean;
@@ -13,16 +11,15 @@ type DialInputProps = {
 	handleOnChange: (e: ChangeEvent<HTMLInputElement>) => void;
 };
 
-export const DialInput = forwardRef(function DialInput(
-	{ handleBackspaceClick, handleOnChange, inputRef, isButtonDisabled, inputError, inputName }: DialInputProps,
+export const DialInput = forwardRef<HTMLInputElement, DialInputProps>(function DialInput(
+	{ handleBackspaceClick, handleOnChange, isButtonDisabled, inputError, inputName },
 	ref,
-): ReactElement {
+) {
 	const t = useTranslation();
-	const _ref = useMergedRefs(ref as Ref<unknown>, inputRef);
 
 	return (
 		<TextInput
-			ref={_ref}
+			ref={ref}
 			textAlign='center'
 			placeholder={t('Phone_number')}
 			addon={<IconButton icon='backspace' small size='20px' disabled={isButtonDisabled} onClick={handleBackspaceClick} />}

apps/meteor/ee/client/voip/modal/DialPad/DialPadModal.tsx

@@ -1,6 +1,5 @@
 import { Box, Field, Modal, IconButton } from '@rocket.chat/fuselage';
 import React, { ReactElement } from 'react';
-import MaskedInput from 'react-text-mask';
 
 import { DialInput } from './DialInput';
 import Pad from './Pad';
@@ -21,38 +20,33 @@ const DialPadModal = ({ initialValue, errorMessage, handleClose }: DialPadModalP
 		handleOnChange,
 		handleBackspaceClick,
 		handlePadButtonClick,
+		handlePadButtonLongPressed,
 		handleCallButtonClick,
+		handleSubmit,
+		onSubmit,
 	} = useDialPad({ initialValue, errorMessage });
 
-	const mask = (rawValue = ''): (string | RegExp)[] => ['+', /[1-9]/].concat(rawValue.split('').map(() => /\d/));
 	return (
 		<Modal maxWidth='400px'>
 			<Modal.Header>
 				<Modal.Title />
 				<Modal.Close onClick={handleClose} />
 			</Modal.Header>
-			<Modal.Content display='flex' justifyContent='center' flexDirection='column'>
+			<Modal.Content is='form' onSubmit={handleSubmit(onSubmit)} display='flex' justifyContent='center' flexDirection='column'>
 				<Field>
-					<MaskedInput
-						mask={mask}
-						guide={false}
-						render={(ref): ReactElement => (
-							<DialInput
-								ref={ref}
-								inputName={inputName}
-								inputRef={inputRef}
-								inputError={inputError}
-								handleBackspaceClick={handleBackspaceClick}
-								isButtonDisabled={isButtonDisabled}
-								handleOnChange={handleOnChange}
-							/>
-						)}
+					<DialInput
+						ref={inputRef}
+						inputName={inputName}
+						inputError={inputError}
+						handleBackspaceClick={handleBackspaceClick}
+						isButtonDisabled={isButtonDisabled}
+						handleOnChange={handleOnChange}
 					/>
 					<Field.Error h='20px' textAlign='center'>
 						{inputError}
 					</Field.Error>
 				</Field>
-				<Pad onClickPadButton={handlePadButtonClick} />
+				<Pad onClickPadButton={handlePadButtonClick} onLongPressPadButton={handlePadButtonLongPressed} />
 			</Modal.Content>
 			<Modal.Footer>
 				<Box display='flex' justifyContent='center'>

apps/meteor/ee/client/voip/modal/DialPad/Pad.tsx

@@ -3,12 +3,33 @@ import React, { ReactElement } from 'react';
 
 import PadButton from './PadButton';
 
-const digits = [1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'];
+export type PadDigit = [string, string];
 
-const Pad = ({ onClickPadButton }: { onClickPadButton: (digit: string | number) => void }): ReactElement => (
+const digits: PadDigit[] = [
+	['1', ''],
+	['2', 'ABC'],
+	['3', 'DEF'],
+	['4', 'GHI'],
+	['5', 'JKL'],
+	['6', 'MNO'],
+	['7', 'PQRS'],
+	['8', 'TUV'],
+	['9', 'WXYZ'],
+	['*', ''],
+	['0', '+'],
+	['#', ''],
+];
+
+const Pad = ({
+	onClickPadButton,
+	onLongPressPadButton,
+}: {
+	onClickPadButton: (digit: PadDigit[0]) => void;
+	onLongPressPadButton: (digit: PadDigit[1]) => void;
+}): ReactElement => (
 	<Box display='flex' flexWrap='wrap' mi='-8px' mbs='28px'>
 		{digits.map((digit, idx) => (
-			<PadButton key={idx} onClickPadButton={onClickPadButton}>
+			<PadButton key={idx} onClickPadButton={onClickPadButton} onLongPressPadButton={onLongPressPadButton}>
 				{digit}
 			</PadButton>
 		))}

apps/meteor/ee/client/voip/modal/DialPad/PadButton.tsx

@@ -1,31 +1,43 @@
 import { Box, Button } from '@rocket.chat/fuselage';
 import React, { ReactElement } from 'react';
 
-const letters = ['+', '', 'ABC', 'DEF', 'GHI', 'JKL', 'MNO', 'PQRS', 'TUV', 'WXYZ'];
+import type { PadDigit } from './Pad';
+import { useLongPress } from './hooks/useLongPress';
 
 const PadButton = ({
 	children,
 	onClickPadButton,
+	onLongPressPadButton,
 }: {
-	children: string | number;
-	onClickPadButton: (digit: string | number) => void;
-}): ReactElement => (
-	<Button
-		m='8px'
-		pb='8px'
-		minWidth='28%'
-		display='flex'
-		flexGrow={1}
-		flexShrink={0}
-		flexDirection='column'
-		alignItems='center'
-		onClick={(): void => onClickPadButton(children)}
-	>
-		<Box fontSize='h2'>{children}</Box>
-		<Box fontSize='c1' color='info'>
-			{typeof children === 'number' && letters[children]}
-		</Box>
-	</Button>
-);
+	children: PadDigit;
+	onClickPadButton: (digit: PadDigit[0]) => void;
+	onLongPressPadButton: (digit: PadDigit[1]) => void;
+}): ReactElement => {
+	const [firstDigit, secondDigit] = children;
+	const { onClick, onMouseDown, onMouseUp, onTouchStart, onTouchEnd } = useLongPress(() => onLongPressPadButton(secondDigit), {
+		onClick: () => onClickPadButton(firstDigit),
+	});
+
+	return (
+		<Button
+			m='8px'
+			pb='8px'
+			minWidth='28%'
+			display='flex'
+			flexDirection='column'
+			alignItems='center'
+			onClick={onClick}
+			onMouseDown={onMouseDown}
+			onMouseUp={onMouseUp}
+			onTouchStart={onTouchStart}
+			onTouchEnd={onTouchEnd}
+		>
+			<Box fontSize='h2'>{firstDigit}</Box>
+			<Box fontSize='c1' color='info'>
+				{secondDigit}
+			</Box>
+		</Button>
+	);
+};
 
 export default PadButton;

apps/meteor/ee/client/voip/modal/DialPad/hooks/useDialPad.tsx

@@ -1,9 +1,10 @@
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import { ChangeEvent, RefCallback, useCallback, useEffect, useState } from 'react';
-import { useForm } from 'react-hook-form';
+import { useForm, UseFormHandleSubmit } from 'react-hook-form';
 
 import { useDialModal } from '../../../../../../client/hooks/useDialModal';
 import { useOutboundDialer } from '../../../../hooks/useOutboundDialer';
+import { PadDigit } from '../Pad';
 
 type DialPadStateHandlers = {
 	inputName: string;
@@ -12,8 +13,13 @@ type DialPadStateHandlers = {
 	isButtonDisabled: boolean;
 	handleOnChange: (e: ChangeEvent<HTMLInputElement>) => void;
 	handleBackspaceClick: () => void;
-	handlePadButtonClick: (digit: string | number) => void;
+	handlePadButtonClick: (digit: PadDigit[0]) => void;
+	handlePadButtonLongPressed: (digit: PadDigit[1]) => void;
 	handleCallButtonClick: () => void;
+	handleSubmit: UseFormHandleSubmit<{
+		PhoneInput: string;
+	}>;
+	onSubmit: () => void;
 };
 
 type DialPadProps = {
@@ -32,6 +38,7 @@ export const useDialPad = ({ initialValue, errorMessage }: DialPadProps): DialPa
 		setValue,
 		setError,
 		clearErrors,
+		handleSubmit,
 		watch,
 		formState: { errors },
 	} = useForm<{ PhoneInput: string }>({
@@ -41,16 +48,31 @@ export const useDialPad = ({ initialValue, errorMessage }: DialPadProps): DialPa
 	});
 
 	const { ref, onChange } = register('PhoneInput');
+
 	const value = watch('PhoneInput');
 
 	const [disabled, setDisabled] = useState(true);
 
 	const handleBackspaceClick = useCallback((): void => {
+		clearErrors();
 		setValue('PhoneInput', value.slice(0, -1));
-	}, [setValue, value]);
+	}, [clearErrors, setValue, value]);
 
 	const handlePadButtonClick = useCallback(
-		(digit: string | number): void => {
+		(digit: PadDigit[0]): void => {
+			clearErrors();
+
+			setValue('PhoneInput', value + digit);
+		},
+		[clearErrors, setValue, value],
+	);
+
+	const handlePadButtonLongPressed = useCallback(
+		(digit: PadDigit[1]): void => {
+			if (digit !== '+') {
+				return;
+			}
+
 			setValue('PhoneInput', value + digit);
 		},
 		[setValue, value],
@@ -61,17 +83,29 @@ export const useDialPad = ({ initialValue, errorMessage }: DialPadProps): DialPa
 			return setError('PhoneInput', { message: t('Something_went_wrong_try_again_later') });
 		}
 
-		outboundClient.makeCall(value.replace('+', ''));
+		outboundClient.makeCall(value);
 		closeDialModal();
 	}, [outboundClient, setError, t, value, closeDialModal]);
 
+	const onSubmit = useCallback(() => {
+		handleCallButtonClick();
+	}, [handleCallButtonClick]);
+
+	const handleOnChange = useCallback(
+		(e) => {
+			clearErrors();
+			onChange(e);
+		},
+		[clearErrors, onChange],
+	);
+
 	useEffect(() => {
 		setError('PhoneInput', { message: errorMessage });
 	}, [setError, errorMessage]);
 
 	useEffect(() => {
 		setDisabled(!value);
-	}, [clearErrors, value]);
+	}, [value]);
 
 	useEffect(() => {
 		setFocus('PhoneInput');
@@ -82,9 +116,12 @@ export const useDialPad = ({ initialValue, errorMessage }: DialPadProps): DialPa
 		inputRef: ref,
 		inputError: errors.PhoneInput?.message,
 		isButtonDisabled: disabled,
-		handleOnChange: onChange,
+		handleOnChange,
 		handleBackspaceClick,
 		handlePadButtonClick,
+		handlePadButtonLongPressed,
 		handleCallButtonClick,
+		handleSubmit,
+		onSubmit,
 	};
 };