fix

client/components/voip/composer/NotAvailableOnCall/NotAvailable.stories.tsx

@@ -0,0 +1,11 @@
+import { Story } from '@storybook/react';
+import React from 'react';
+
+import NotAvailableOnCall from './NotAvailableOnCall';
+
+export const Default: Story = () => <NotAvailableOnCall />;
+
+export default {
+	title: 'components/Composer/NotAvailableOnCall',
+	component: NotAvailableOnCall,
+};

client/components/voip/composer/Content.tsx → client/components/voip/composer/NotAvailableOnCall/NotAvailableContent.tsx

@@ -6,7 +6,7 @@ type ContentPropsType = {
 	text: string;
 };
 
-const Content = ({ icon, text }: ContentPropsType): ReactElement => (
+const NotAvailableContent = ({ icon, text }: ContentPropsType): ReactElement => (
 	<Box w='full' h='full' display='flex' flexDirection='row' alignItems='center' justifyContent='center'>
 		<Icon color='info' size='24px' name={icon} />
 		<Box mis='4px' fontScale='p2' color='info'>
@@ -15,4 +15,4 @@ const Content = ({ icon, text }: ContentPropsType): ReactElement => (
 	</Box>
 );
 
-export default Content;
+export default NotAvailableContent;

client/components/voip/composer/NotAvailableOnCall/NotAvailableContentWrapper.tsx

@@ -0,0 +1,12 @@
+import { Box } from '@rocket.chat/fuselage';
+import React, { ReactElement } from 'react';
+
+type NotAvailableProps = {
+	children: ReactElement;
+};
+
+const NotAvailableContentWrapper = (props: NotAvailableProps): ReactElement => (
+	<Box w='full' h='full' backgroundColor='neutral-100' {...props} />
+);
+
+export default NotAvailableContentWrapper;

client/components/voip/composer/NotAvailableOnCall/NotAvailableOnCall.tsx

@@ -0,0 +1,15 @@
+import { Box } from '@rocket.chat/fuselage';
+import React, { ReactElement } from 'react';
+
+import NotAvailableContent from './NotAvailableContent';
+import NotAvailableContentWrapper from './NotAvailableContentWrapper';
+
+const NotAvailableOnCall = (): ReactElement => (
+	<Box h='44px' w='100%' borderColor='disabled' borderWidth='2px'>
+		<NotAvailableContentWrapper>
+			<NotAvailableContent icon='message' text='Composer_not_available_phone_calls' />
+		</NotAvailableContentWrapper>
+	</Box>
+);
+
+export default NotAvailableOnCall;

client/components/voip/composer/NotAvailableOnCall/index.ts

@@ -0,0 +1 @@
+export { default } from './NotAvailableOnCall';

client/templates.ts

@@ -164,6 +164,6 @@ createTemplateForComponent('roomNotFound', () => import('./views/room/Room/RoomN
 	renderContainerView: () => HTML.DIV({ style: 'height: 100%;' }),
 });
 
-createTemplateForComponent('ComposerNotAvailablePhoneCalls', () => import('./components/voip/composer/template'), {
+createTemplateForComponent('ComposerNotAvailablePhoneCalls', () => import('./components/voip/composer/NotAvailableOnCall'), {
 	renderContainerView: () => HTML.DIV({ style: 'display: flex; height: 100%; width: 100%' }),
 });