Skip to content

Commit

Permalink
[IMPROVE] UX - VoIP Call Component (#24748)
Browse files Browse the repository at this point in the history
  • Loading branch information
@tiagoevanp @sampaiodiego
tiagoevanp authored and sampaiodiego committed Mar 21, 2022
1 parent ed2cb3f commit a23cfa8
Show file tree
Hide file tree
Showing 6 changed files with 248 additions and 108 deletions.
24 changes: 23 additions & 1 deletion client/contexts/CallContext.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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);

Expand Down Expand Up @@ -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);

Expand Down
42 changes: 32 additions & 10 deletions client/providers/CallProvider/CallProvider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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();

Expand Down Expand Up @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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()
Expand All @@ -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: {
Expand All @@ -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) {
Expand All @@ -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();
Expand All @@ -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}>
Expand Down
46 changes: 43 additions & 3 deletions client/sidebar/footer/voip/VoipFooter.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'>
Expand All @@ -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>
);
Expand Down
Loading

0 comments on commit a23cfa8

Please sign in to comment.