[IMPROVE] UX - VoIP Call Component

client/contexts/CallContext.ts

@@ -22,10 +22,12 @@ type CallContextReady = {
 	ready: true;
 	voipClient: VoIPUser;
 	actions: CallActionsType;
+	queueName: string;
 	queueCounter: number;
 	openedRoomInfo: { v: { token?: string }; rid: string };
 	openWrapUpModal: () => void;
-	openRoom: (caller: ICallerInfo) => IVoipRoom['_id'];
+	openRoom: (rid: IVoipRoom['_id']) => void;
+	createRoom: (caller: ICallerInfo) => IVoipRoom['_id'];
 	closeRoom: (data: { comment?: string; tags?: string[] }) => void;
 };
 type CallContextError = {
@@ -104,6 +106,16 @@ export const useCallerInfo = (): VoIpCallerInfo => {
 	return useSubscription(subscription);
 };
 
+export const useCallCreateRoom = (): CallContextReady['createRoom'] => {
+	const context = useContext(CallContext);
+
+	if (!isCallContextReady(context)) {
+		throw new Error('useCallerInfo only if Calls are enabled and ready');
+	}
+
+	return context.createRoom;
+};
+
 export const useCallOpenRoom = (): CallContextReady['openRoom'] => {
 	const context = useContext(CallContext);
 
@@ -133,6 +145,16 @@ export const useCallClient = (): VoIPUser => {
 	return context.voipClient;
 };
 
+export const useQueueName = (): CallContextReady['queueName'] => {
+	const context = useContext(CallContext);
+
+	if (!isCallContextReady(context)) {
+		throw new Error('useQueueInfo only if Calls are enabled and ready');
+	}
+
+	return context.queueName;
+};
+
 export const useQueueCounter = (): CallContextReady['queueCounter'] => {
 	const context = useContext(CallContext);
 

client/providers/CallProvider/CallProvider.tsx

@@ -7,6 +7,7 @@ import { CustomSounds } from '../../../app/custom-sounds/client';
 import { getUserPreference } from '../../../app/utils/client';
 import { IVoipRoom } from '../../../definition/IRoom';
 import { IUser } from '../../../definition/IUser';
+import { ICallerInfo } from '../../../definition/voip/ICallerInfo';
 import { WrapUpCallModal } from '../../components/voip/modal/WrapUpCallModal';
 import { CallContext, CallContextValue } from '../../contexts/CallContext';
 import { useSetModal } from '../../contexts/ModalContext';
@@ -43,7 +44,8 @@ export const CallProvider: FC = ({ children }) => {
 
 	const AudioTagPortal: FC = ({ children }) => useMemo(() => createPortal(children, document.body), [children]);
 
-	const [queueCounter, setQueueCounter] = useState('');
+	const [queueName, setQueueName] = useState('');
+	const [queueCounter, setQueueCounter] = useState(0);
 
 	const setModal = useSetModal();
 
@@ -71,7 +73,8 @@ export const CallProvider: FC = ({ children }) => {
 			queuedcalls: string;
 		}): Promise<void> => {
 			queueAggregator.queueJoined(joiningDetails);
-			setQueueCounter(queueAggregator.getCallWaitingCount().toString());
+			setQueueName(joiningDetails.queuename);
+			setQueueCounter(queueAggregator.getCallWaitingCount());
 		};
 
 		return subscribeToNotifyUser(`${user._id}/callerjoined`, handleQueueJoined);
@@ -93,7 +96,7 @@ export const CallProvider: FC = ({ children }) => {
 
 		const handleAgentConnected = (queue: { queuename: string; queuedcalls: string; waittimeinqueue: string }): void => {
 			queueAggregator.callPickedup(queue);
-			setQueueCounter(queueAggregator.getCallWaitingCount().toString());
+			setQueueCounter(queueAggregator.getCallWaitingCount());
 		};
 
 		return subscribeToNotifyUser(`${user._id}/agentconnected`, handleAgentConnected);
@@ -115,7 +118,8 @@ export const CallProvider: FC = ({ children }) => {
 
 		const handleMemberAdded = (queue: { queuename: string; queuedcalls: string }): void => {
 			queueAggregator.memberAdded(queue);
-			setQueueCounter(queueAggregator.getCallWaitingCount().toString());
+			setQueueName(queue.queuename);
+			setQueueCounter(queueAggregator.getCallWaitingCount());
 		};
 
 		return subscribeToNotifyUser(`${user._id}/queuememberadded`, handleMemberAdded);
@@ -137,7 +141,7 @@ export const CallProvider: FC = ({ children }) => {
 
 		const handleMemberRemoved = (queue: { queuename: string; queuedcalls: string }): void => {
 			queueAggregator.memberRemoved(queue);
-			setQueueCounter(queueAggregator.getCallWaitingCount().toString());
+			setQueueCounter(queueAggregator.getCallWaitingCount());
 		};
 
 		return subscribeToNotifyUser(`${user._id}/queuememberremoved`, handleMemberRemoved);
@@ -159,7 +163,7 @@ export const CallProvider: FC = ({ children }) => {
 
 		const handleCallAbandon = (queue: { queuename: string; queuedcallafterabandon: string }): void => {
 			queueAggregator.queueAbandoned(queue);
-			setQueueCounter(queueAggregator.getCallWaitingCount().toString());
+			setQueueCounter(queueAggregator.getCallWaitingCount());
 		};
 
 		return subscribeToNotifyUser(`${user._id}/callabandoned`, handleCallAbandon);
@@ -233,6 +237,10 @@ export const CallProvider: FC = ({ children }) => {
 
 	const [roomInfo, setRoomInfo] = useState<{ v: { token?: string }; rid: string }>();
 
+	const openRoom = (rid: IVoipRoom['_id']): void => {
+		roomCoordinator.openRouteLink('v', { rid });
+	};
+
 	const contextValue: CallContextValue = useMemo(() => {
 		if (!voipEnabled) {
 			return {
@@ -269,6 +277,7 @@ export const CallProvider: FC = ({ children }) => {
 			registrationInfo,
 			voipClient,
 			queueCounter,
+			queueName,
 			actions: {
 				mute: (): Promise<void> => voipClient.muteCall(true), // voipClient.mute(),
 				unmute: (): Promise<void> => voipClient.muteCall(false), // voipClient.unmute()
@@ -279,7 +288,8 @@ export const CallProvider: FC = ({ children }) => {
 					remoteAudioMediaRef.current && voipClient.acceptCall({ remoteMediaElement: remoteAudioMediaRef.current }),
 				reject: (): Promise<void> => voipClient.rejectCall(),
 			},
-			openRoom: async (caller): Promise<IVoipRoom['_id']> => {
+			openRoom,
+			createRoom: async (caller: ICallerInfo): Promise<IVoipRoom['_id']> => {
 				if (user) {
 					const { visitor } = await visitorEndpoint({
 						visitor: {
@@ -289,7 +299,7 @@ export const CallProvider: FC = ({ children }) => {
 						},
 					});
 					const voipRoom = visitor && (await voipEndpoint({ token: visitor.token, agentId: user._id }));
-					voipRoom.room && roomCoordinator.openRouteLink(voipRoom.room.t, { rid: voipRoom.room._id, name: voipRoom.room.name });
+					openRoom(voipRoom.room._id);
 					voipRoom.room && setRoomInfo({ v: { token: voipRoom.room.v.token }, rid: voipRoom.room._id });
 					const queueAggregator = result.voipClient.getAggregator();
 					if (queueAggregator) {
@@ -299,7 +309,7 @@ export const CallProvider: FC = ({ children }) => {
 				}
 				return '';
 			},
-			closeRoom: async ({ comment, tags }): Promise<void> => {
+			closeRoom: async ({ comment, tags }: { comment: string; tags: string[] }): Promise<void> => {
 				roomInfo && (await voipCloseRoomEndpoint({ rid: roomInfo.rid, token: roomInfo.v.token || '', comment: comment || '', tags }));
 				homeRoute.push({});
 				const queueAggregator = result.voipClient.getAggregator();
@@ -309,7 +319,19 @@ export const CallProvider: FC = ({ children }) => {
 			},
 			openWrapUpModal,
 		};
-	}, [queueCounter, voipEnabled, homeRoute, openWrapUpModal, result, roomInfo, user, visitorEndpoint, voipCloseRoomEndpoint, voipEndpoint]);
+	}, [
+		voipEnabled,
+		result,
+		roomInfo,
+		queueCounter,
+		queueName,
+		openWrapUpModal,
+		user,
+		visitorEndpoint,
+		voipEndpoint,
+		voipCloseRoomEndpoint,
+		homeRoute,
+	]);
 
 	return (
 		<CallContext.Provider value={contextValue}>

client/sidebar/footer/voip/VoipFooter.stories.tsx

@@ -25,10 +25,9 @@ const tooltips = {
 	endCall: 'End Call',
 };
 
-export const Default = (): ReactElement => {
+export const IncomingCall = (): ReactElement => {
 	const [muted, toggleMic] = useState(false);
 	const [paused, togglePause] = useState(false);
-	const [callsInQueue] = useState('2');
 
 	return (
 		<Box maxWidth='x300' bg='neutral-800' borderRadius='x4'>
@@ -47,11 +46,52 @@ export const Default = (): ReactElement => {
 				toggleMic={toggleMic}
 				togglePause={togglePause}
 				tooltips={tooltips}
+				createRoom={() => ''}
 				openRoom={() => ''}
-				callsInQueue={callsInQueue}
+				callsInQueue='2 Calls In Queue'
 				openWrapUpCallModal={() => null}
 				dispatchEvent={() => null}
 				openedRoomInfo={{ v: { token: '' }, rid: '' }}
+				anonymousText={'Anonymous'}
+			/>
+		</Box>
+	);
+};
+
+export const InCall = (): ReactElement => {
+	const [muted, toggleMic] = useState(false);
+	const [paused, togglePause] = useState(false);
+	const getSubtitle = () => {
+		if (paused) {
+			return 'On Hold';
+		}
+		return 'In Progress';
+	};
+
+	return (
+		<Box maxWidth='x300' bg='neutral-800' borderRadius='x4'>
+			<VoipFooter
+				caller={{
+					callerName: 'Tiago',
+					callerId: 'guest-1',
+					host: '',
+				}}
+				callerState='IN_CALL'
+				callActions={callActions}
+				title='Sales Department'
+				subtitle={getSubtitle()}
+				muted={muted}
+				paused={paused}
+				toggleMic={toggleMic}
+				togglePause={togglePause}
+				tooltips={tooltips}
+				createRoom={() => ''}
+				openRoom={() => ''}
+				callsInQueue='2 Calls In Queue'
+				openWrapUpCallModal={() => null}
+				dispatchEvent={() => null}
+				openedRoomInfo={{ v: { token: '' }, rid: '' }}
+				anonymousText={'Anonymous'}
 			/>
 		</Box>
 	);