fix(voip): CallView button grid and correct landscape/dialpad layouts

app/views/CallView/components/CallActionButton.tsx

@@ -58,7 +58,7 @@ const CallActionButton = ({
 	};
 
 	return (
-		<View>
+		<View style={styles.actionButtonCell}>
 			<Pressable
 				onPress={handlePress}
 				disabled={disabled}
@@ -72,7 +72,9 @@ const CallActionButton = ({
 				testID={testID}>
 				<CustomIcon name={icon} size={32} color={getIconColor()} />
 			</Pressable>
-			<Text style={[styles.actionButtonLabel, { color: colors.fontDefault }]}>{label}</Text>
+			<Text numberOfLines={1} style={[styles.actionButtonLabel, { color: colors.fontDefault }]}>
+				{label}
+			</Text>
 		</View>
 	);
 };

app/views/CallView/components/CallButtons.test.tsx

@@ -1,191 +1,182 @@
 import React from 'react';
-import { fireEvent, render, within } from '@testing-library/react-native';
+import { render } from '@testing-library/react-native';
 import { Provider } from 'react-redux';
 
 import { mockedStore } from '../../../reducers/mockedStore';
 import { useCallStore } from '../../../lib/services/voip/useCallStore';
-import { navigateToCallRoom } from '../../../lib/services/voip/navigateToCallRoom';
 import { CallButtons } from './CallButtons';
 import { useCallLayoutMode } from '../useCallLayoutMode';
-
-jest.mock('../../../lib/services/voip/navigateToCallRoom', () => ({
-	navigateToCallRoom: jest.fn().mockResolvedValue(undefined)
-}));
+import { useResponsiveLayout } from '../../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 jest.mock('../useCallLayoutMode', () => ({
 	useCallLayoutMode: jest.fn(() => ({ layoutMode: 'narrow' }))
 }));
 
-const mockUseCallLayoutMode = jest.mocked(useCallLayoutMode);
-
-const mockShowActionSheetRef = jest.fn();
 jest.mock('../../../containers/ActionSheet', () => ({
-	showActionSheetRef: (options: any) => mockShowActionSheetRef(options),
+	showActionSheetRef: jest.fn(),
 	hideActionSheetRef: jest.fn()
 }));
 
-const mockNavigateToCallRoom = jest.mocked(navigateToCallRoom);
+jest.mock('react-native-incall-manager', () => ({
+	start: jest.fn(),
+	stop: jest.fn(),
+	setForceSpeakerphoneOn: jest.fn(() => Promise.resolve())
+}));
+
+jest.mock('../../../lib/hooks/useResponsiveLayout/useResponsiveLayout', () => ({
+	useResponsiveLayout: jest.fn(() => ({ width: 375, height: 812 }))
+}));
+
+const setStoreState = (overrides: Partial<ReturnType<typeof useCallStore.getState>> = {}) => {
+	const mockCall = {
+		state: 'active',
+		muted: false,
+		held: false,
+		contact: {},
+		sendDTMF: jest.fn(),
+		emitter: { on: jest.fn(), off: jest.fn() }
+	} as any;
+
+	useCallStore.setState({
+		call: mockCall,
+		callId: 'test-id',
+		callState: 'active',
+		isMuted: false,
+		isOnHold: false,
+		isSpeakerOn: false,
+		roomId: 'room-1',
+		contact: { name: 'Test User' } as any,
+		toggleMute: jest.fn(),
+		toggleHold: jest.fn(),
+		toggleSpeaker: jest.fn(),
+		endCall: jest.fn(),
+		dialpadValue: '',
+		...overrides
+	});
+};
 
 const Wrapper = ({ children }: { children: React.ReactNode }) => <Provider store={mockedStore}>{children}</Provider>;
 
 describe('CallButtons', () => {
 	beforeEach(() => {
+		(useCallLayoutMode as jest.Mock).mockReturnValue({ layoutMode: 'narrow' });
+		(useResponsiveLayout as jest.Mock).mockReturnValue({ width: 375, height: 812 });
 		useCallStore.getState().reset();
-		jest.clearAllMocks();
-		mockUseCallLayoutMode.mockReturnValue({ layoutMode: 'narrow' });
-		useCallStore.setState({
-			call: { state: 'active', contact: {} } as any,
-			callState: 'active',
-			callId: 'id',
-			isMuted: false,
-			isOnHold: false,
-			isSpeakerOn: false,
-			roomId: 'rid-1',
-			contact: { username: 'u', sipExtension: '', displayName: 'U' },
-			toggleMute: jest.fn(),
-			toggleHold: jest.fn(),
-			toggleSpeaker: jest.fn(),
-			endCall: jest.fn()
-		});
 	});
 
-	it('should set pointerEvents to none when controlsVisible is false', () => {
-		useCallStore.setState({ controlsVisible: false });
+	it('renders all 6 buttons', () => {
+		setStoreState();
 		const { getByTestId } = render(
 			<Wrapper>
 				<CallButtons />
 			</Wrapper>
 		);
-
-		const container = getByTestId('call-buttons', { includeHiddenElements: true });
-		expect(container.props.pointerEvents).toBe('none');
+		expect(getByTestId('call-view-speaker')).toBeTruthy();
+		expect(getByTestId('call-view-hold')).toBeTruthy();
+		expect(getByTestId('call-view-mute')).toBeTruthy();
+		expect(getByTestId('call-view-message')).toBeTruthy();
+		expect(getByTestId('call-view-end')).toBeTruthy();
+		expect(getByTestId('call-view-dialpad')).toBeTruthy();
 	});
 
-	it('should set pointerEvents to auto when controlsVisible is true', () => {
-		useCallStore.setState({ controlsVisible: true });
+	it('narrow layout renders 2 rows', () => {
+		(useCallLayoutMode as jest.Mock).mockReturnValue({ layoutMode: 'narrow' });
+		setStoreState();
 		const { getByTestId } = render(
 			<Wrapper>
 				<CallButtons />
 			</Wrapper>
 		);
+		expect(getByTestId('call-buttons-row-0')).toBeTruthy();
+		expect(getByTestId('call-buttons-row-1')).toBeTruthy();
+	});
 
-		const container = getByTestId('call-buttons');
-		expect(container.props.pointerEvents).toBe('auto');
+	it('wide layout renders 1 row', () => {
+		(useCallLayoutMode as jest.Mock).mockReturnValue({ layoutMode: 'wide' });
+		setStoreState();
+		const { getByTestId, queryByTestId } = render(
+			<Wrapper>
+				<CallButtons />
+			</Wrapper>
+		);
+		expect(getByTestId('call-buttons-row-0')).toBeTruthy();
+		expect(queryByTestId('call-buttons-row-1')).toBeNull();
 	});
 
-	it('message button calls navigateToCallRoom when enabled', () => {
-		const { getByTestId } = render(
+	it('narrow phone landscape renders 1 row', () => {
+		(useCallLayoutMode as jest.Mock).mockReturnValue({ layoutMode: 'narrow' });
+		(useResponsiveLayout as jest.Mock).mockReturnValue({ width: 600, height: 400 });
+		setStoreState();
+		const { getByTestId, queryByTestId } = render(
 			<Wrapper>
 				<CallButtons />
 			</Wrapper>
 		);
-		fireEvent.press(getByTestId('call-view-message'));
-		expect(mockNavigateToCallRoom).toHaveBeenCalledTimes(1);
+		expect(getByTestId('call-buttons-row-0')).toBeTruthy();
+		expect(queryByTestId('call-buttons-row-1')).toBeNull();
 	});
 
-	it('message button is disabled for SIP calls', () => {
-		useCallStore.setState({
-			contact: { username: 'u', sipExtension: '100', displayName: 'U' }
-		});
-		const { getByTestId } = render(
+	it('button labels render', () => {
+		setStoreState();
+		const { getByText } = render(
 			<Wrapper>
 				<CallButtons />
 			</Wrapper>
 		);
-		fireEvent.press(getByTestId('call-view-message'));
-		expect(mockNavigateToCallRoom).not.toHaveBeenCalled();
+		expect(getByText('Speaker')).toBeTruthy();
+		expect(getByText('Hold')).toBeTruthy();
+		expect(getByText('Mute')).toBeTruthy();
+		expect(getByText('Message')).toBeTruthy();
+		expect(getByText('End')).toBeTruthy();
+		expect(getByText('Dialpad')).toBeTruthy();
 	});
 
-	it('message button is disabled when roomId is null', () => {
-		useCallStore.setState({ roomId: null });
+	it('disabled states when ringing', () => {
+		setStoreState({ callState: 'ringing' });
 		const { getByTestId } = render(
 			<Wrapper>
 				<CallButtons />
 			</Wrapper>
 		);
-		fireEvent.press(getByTestId('call-view-message'));
-		expect(mockNavigateToCallRoom).not.toHaveBeenCalled();
+		expect(getByTestId('call-view-speaker').props.accessibilityState?.disabled).toBe(true);
+		expect(getByTestId('call-view-hold').props.accessibilityState?.disabled).toBe(true);
+		expect(getByTestId('call-view-mute').props.accessibilityState?.disabled).toBe(true);
+		expect(getByTestId('call-view-dialpad').props.accessibilityState?.disabled).toBe(true);
+	});
+
+	it('mute toggle label shows Unmute when isMuted is true, Mute when false', () => {
+		setStoreState({ isMuted: true });
+		const { getByText, rerender } = render(
+			<Wrapper>
+				<CallButtons />
+			</Wrapper>
+		);
+		expect(getByText('Unmute')).toBeTruthy();
+
+		setStoreState({ isMuted: false });
+		rerender(
+			<Wrapper>
+				<CallButtons />
+			</Wrapper>
+		);
+		expect(getByText('Mute')).toBeTruthy();
 	});
 
-	describe('layoutMode prop', () => {
-		it('renders two button rows on narrow layout', () => {
-			const { getByTestId } = render(
-				<Wrapper>
-					<CallButtons />
-				</Wrapper>
-			);
-			expect(getByTestId('call-buttons-row-0')).toBeTruthy();
-			expect(getByTestId('call-buttons-row-1')).toBeTruthy();
-		});
-
-		it('renders a single button row on wide layout', () => {
-			mockUseCallLayoutMode.mockReturnValue({ layoutMode: 'wide' });
-			const { getByTestId, queryByTestId } = render(
-				<Wrapper>
-					<CallButtons />
-				</Wrapper>
-			);
-			expect(getByTestId('call-buttons-row-0')).toBeTruthy();
-			expect(queryByTestId('call-buttons-row-1')).toBeNull();
-		});
-
-		it('renders all six action buttons regardless of layoutMode', () => {
-			const ids = [
-				'call-view-speaker',
-				'call-view-hold',
-				'call-view-mute',
-				'call-view-message',
-				'call-view-end',
-				'call-view-dialpad'
-			];
-			(['narrow', 'wide'] as const).forEach(layoutMode => {
-				mockUseCallLayoutMode.mockReturnValue({ layoutMode });
-				const { getByTestId, unmount } = render(
-					<Wrapper>
-						<CallButtons />
-					</Wrapper>
-				);
-				ids.forEach(id => expect(getByTestId(id)).toBeTruthy());
-				unmount();
-			});
-		});
-
-		it('places every action button inside row 0 on wide layout', () => {
-			mockUseCallLayoutMode.mockReturnValue({ layoutMode: 'wide' });
-			const { getByTestId } = render(
-				<Wrapper>
-					<CallButtons />
-				</Wrapper>
-			);
-			const row0 = getByTestId('call-buttons-row-0');
-			const ids = [
-				'call-view-speaker',
-				'call-view-hold',
-				'call-view-mute',
-				'call-view-message',
-				'call-view-end',
-				'call-view-dialpad'
-			];
-			ids.forEach(id => {
-				expect(within(row0).getByTestId(id)).toBeTruthy();
-			});
-		});
-
-		it('splits buttons across row 0 and row 1 on narrow layout', () => {
-			const { getByTestId } = render(
-				<Wrapper>
-					<CallButtons />
-				</Wrapper>
-			);
-			const row0 = getByTestId('call-buttons-row-0');
-			const row1 = getByTestId('call-buttons-row-1');
-
-			expect(within(row0).getByTestId('call-view-speaker')).toBeTruthy();
-			expect(within(row0).getByTestId('call-view-hold')).toBeTruthy();
-			expect(within(row0).getByTestId('call-view-mute')).toBeTruthy();
-			expect(within(row1).getByTestId('call-view-message')).toBeTruthy();
-			expect(within(row1).getByTestId('call-view-end')).toBeTruthy();
-			expect(within(row1).getByTestId('call-view-dialpad')).toBeTruthy();
-		});
+	it('end/cancel label shows Cancel when ringing, End when active', () => {
+		setStoreState({ callState: 'ringing' });
+		const { getByText, rerender } = render(
+			<Wrapper>
+				<CallButtons />
+			</Wrapper>
+		);
+		expect(getByText('Cancel')).toBeTruthy();
+
+		setStoreState({ callState: 'active' });
+		rerender(
+			<Wrapper>
+				<CallButtons />
+			</Wrapper>
+		);
+		expect(getByText('End')).toBeTruthy();
 	});
 });

app/views/CallView/components/CallButtons.tsx

@@ -30,6 +30,7 @@ export const CallButtons = () => {
 	const { layoutMode } = useCallLayoutMode();
 	const { width, height } = useResponsiveLayout();
 	const isLandscape = width > height;
+	const singleRow = layoutMode === 'wide' || isLandscape;
 
 	const callState = useCallStore(state => state.callState);
 	const isMuted = useCallStore(state => state.isMuted);
@@ -117,18 +118,16 @@ export const CallButtons = () => {
 	return (
 		<Animated.View
 			style={[
-				isLandscape ? styles.buttonsContainerLandscape : styles.buttonsContainer,
-				isLandscape
-					? { borderLeftColor: colors.strokeExtraLight, backgroundColor: colors.surfaceLight }
-					: { borderTopColor: colors.strokeExtraLight, backgroundColor: colors.surfaceLight },
+				styles.buttonsContainer,
+				{ borderTopColor: colors.strokeExtraLight, backgroundColor: colors.surfaceLight },
 				containerStyle
 			]}
 			pointerEvents={controlsVisible ? 'auto' : 'none'}
 			accessibilityElementsHidden={!controlsVisible}
 			importantForAccessibility={controlsVisible ? 'auto' : 'no-hide-descendants'}
 			testID='call-buttons'>
-			{layoutMode === 'wide' ? (
-				<View style={[styles.buttonsRow, isLandscape && styles.buttonsRowLandscape]} testID='call-buttons-row-0'>
+			{singleRow ? (
+				<View style={styles.buttonsRow} testID='call-buttons-row-0'>
 					{buttons.map(btn => (
 						<CallActionButton
 							key={btn.testID}
@@ -143,7 +142,7 @@ export const CallButtons = () => {
 				</View>
 			) : (
 				<>
-					<View style={[styles.buttonsRow, isLandscape && styles.buttonsRowLandscape]} testID='call-buttons-row-0'>
+					<View style={styles.buttonsRow} testID='call-buttons-row-0'>
 						{buttons.slice(0, 3).map(btn => (
 							<CallActionButton
 								key={btn.testID}
@@ -156,7 +155,7 @@ export const CallButtons = () => {
 							/>
 						))}
 					</View>
-					<View style={[styles.buttonsRow, isLandscape && styles.buttonsRowLandscape]} testID='call-buttons-row-1'>
+					<View style={styles.buttonsRow} testID='call-buttons-row-1'>
 						{buttons.slice(3, 6).map(btn => (
 							<CallActionButton
 								key={btn.testID}