apps/meteor/client/views/room/HeaderV2/Omnichannel/VoipRoomHeader.tsx
import type { IVoipRoom } from '@rocket.chat/core-typings';
import { useLayout, useRouter } from '@rocket.chat/ui-contexts';
import React, { useCallback, useMemo } from 'react';
import { useSyncExternalStore } from 'use-sync-external-store/shim';
import { HeaderToolbar } from '../../../../components/Header';
import SidebarToggler from '../../../../components/SidebarToggler';
import { parseOutboundPhoneNumber } from '../../../../lib/voip/parseOutboundPhoneNumber';
import type { RoomHeaderProps } from '../RoomHeader';
import RoomHeader from '../RoomHeader';
import BackButton from './BackButton';
type VoipRoomHeaderProps = {
room: IVoipRoom;
} & Omit<RoomHeaderProps, 'room'>;
const VoipRoomHeader = ({ slots: parentSlot, room }: VoipRoomHeaderProps) => {
const router = useRouter();
const currentRouteName = useSyncExternalStore(
router.subscribeToRouteChange,
useCallback(() => router.getRouteName(), [router]),
);
const { isMobile } = useLayout();
const slots = useMemo(
() => ({
...parentSlot,
start: (!!isMobile || currentRouteName === 'omnichannel-directory') && (
<HeaderToolbar>
{isMobile && <SidebarToggler />}
{currentRouteName === 'omnichannel-directory' && <BackButton />}
</HeaderToolbar>
),
}),
[isMobile, currentRouteName, parentSlot],
);
return <RoomHeader slots={slots} room={{ ...room, name: parseOutboundPhoneNumber(room.fname) }} />;
};
export default VoipRoomHeader;