apps/meteor/client/sidebarv2/footer/voip/VoipFooter.stories.tsx
import type { VoIpCallerInfo } from '@rocket.chat/core-typings';
import { Box, Icon } from '@rocket.chat/fuselage';
import type { ComponentStory } from '@storybook/react';
import React, { useState } from 'react';
import VoipFooter from './VoipFooter';
const callActions = {
mute: () => ({}),
unmute: () => ({}),
pause: () => ({}),
resume: () => ({}),
end: () => ({}),
pickUp: () => ({}),
reject: () => ({}),
};
const callerDefault = {
callerName: '',
callerId: '+5551999999999',
host: '',
};
export default {
title: 'Sidebar/Footer/VoipFooter',
component: VoipFooter,
parameters: {
controls: { expanded: true },
},
args: {
isEnterprise: true,
},
argTypes: {
caller: { control: false },
callerState: { control: false },
callActions: { control: false },
title: { control: false },
subtitle: { control: false },
muted: { control: false },
paused: { control: false },
toggleMic: { control: false },
togglePause: { control: false },
tooltips: { control: false },
createRoom: { control: false },
openRoom: { control: false },
callsInQueue: { control: false },
dispatchEvent: { control: false },
openedRoomInfo: { control: false },
anonymousText: { control: false },
options: { control: false },
},
};
const VoipFooterTemplate: ComponentStory<typeof VoipFooter> = (args) => {
const [muted, toggleMic] = useState(false);
const [paused, togglePause] = useState(false);
const getSubtitle = (state: VoIpCallerInfo['state']): string => {
const subtitles: Record<string, string> = {
IN_CALL: 'In Progress',
OFFER_RECEIVED: 'Ringing',
OFFER_SENT: 'Calling',
ON_HOLD: 'On Hold',
};
return subtitles[state] || '';
};
return (
<Box maxWidth='x300' bg='dark' borderRadius='x4'>
<VoipFooter
{...args}
callActions={callActions}
subtitle={getSubtitle(args.callerState)}
muted={muted}
paused={paused}
toggleMic={toggleMic}
togglePause={togglePause}
createRoom={async () => ''}
openRoom={() => ''}
callsInQueue='2 Calls In Queue'
dispatchEvent={() => null}
openedRoomInfo={{ v: { token: '' }, rid: '' }}
options={{
deviceSettings: {
label: (
<Box alignItems='center' display='flex'>
<Icon mie={4} name='customize' size='x16' />
Device Settings
</Box>
),
},
}}
/>
</Box>
);
};
export const IncomingCall = VoipFooterTemplate.bind({});
IncomingCall.args = {
title: 'Sales Department',
callerState: 'OFFER_RECEIVED',
caller: callerDefault,
};
export const OutboundCall = VoipFooterTemplate.bind({});
OutboundCall.args = {
title: 'Phone Call',
callerState: 'OFFER_SENT',
caller: {
callerName: '',
callerId: '+5551999999999',
host: '',
},
};
export const InCall = VoipFooterTemplate.bind({});
InCall.args = {
title: 'Sales Department',
callerState: 'IN_CALL',
caller: callerDefault,
};
export const NoEnterpriseLicence = VoipFooterTemplate.bind({});
NoEnterpriseLicence.args = {
title: 'Sales Department',
callerState: 'IN_CALL',
isEnterprise: false,
caller: callerDefault,
};