Ensure the CallComposite and CallWithChatComposite side pane's are closed if the call is rejoined

change-beta/@azure-communication-react-1c094de5-9a94-40bf-ac5c-a3d94cdb3dda.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "",
+  "comment": "Ensure the CallComposite and CallWithChatComposite side pane's are closed if the call is rejoined",
+  "packageName": "@azure/communication-react",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-1c094de5-9a94-40bf-ac5c-a3d94cdb3dda.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "",
+  "comment": "Ensure the CallComposite and CallWithChatComposite side pane's are closed if the call is rejoined",
+  "packageName": "@azure/communication-react",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-composites/src/composites/CallComposite/CallComposite.tsx

@@ -386,6 +386,17 @@ const MainScreen = (props: MainScreenProps): JSX.Element => {
     onSidePaneIdChange?.(sidePaneRenderer?.id);
   }, [sidePaneRenderer?.id, onSidePaneIdChange]);
 
+  // When the call ends ensure the side pane is set to closed to prevent the side pane being open if the call is re-joined.
+  useEffect(() => {
+    const closeSidePane = (): void => {
+      setSidePaneRenderer(undefined);
+    };
+    adapter.on('callEnded', closeSidePane);
+    return () => {
+      adapter.off('callEnded', closeSidePane);
+    };
+  }, [adapter]);
+
   /* @conditional-compile-remove(capabilities) */
   const capabilitiesChangedInfoAndRole = useSelector(capabilitiesChangedInfoAndRoleSelector);
 

packages/react-composites/src/composites/CallComposite/MockCallAdapter.ts

@@ -150,10 +150,10 @@ export class _MockCallAdapter implements CallAdapter {
     throw Error('sendDtmfTone not implemented');
   }
   on(): void {
-    throw Error('on not implemented');
+    return;
   }
   off(): void {
-    throw Error('off not implemented');
+    return;
   }
   /* @conditional-compile-remove(PSTN-calls) */
   getEnvironmentInfo(): Promise<EnvironmentInfo> {

packages/react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.tsx

@@ -611,7 +611,7 @@ const CallWithChatScreen = (props: CallWithChatScreenProps): JSX.Element => {
   );
 
   const onSidePaneIdChange = useCallback(
-    (sidePaneId) => {
+    (sidePaneId: string | undefined) => {
       // If the pane is switched to something other than chat, removing rendering chat.
       if (sidePaneId && sidePaneId !== 'chat') {
         closeChat();
@@ -620,6 +620,14 @@ const CallWithChatScreen = (props: CallWithChatScreenProps): JSX.Element => {
     [closeChat]
   );
 
+  // When the call ends ensure the side pane is set to closed to prevent the side pane being open if the call is re-joined.
+  useEffect(() => {
+    callAdapter.on('callEnded', closeChat);
+    return () => {
+      callAdapter.off('callEnded', closeChat);
+    };
+  }, [callAdapter, closeChat]);
+
   return (
     <div ref={containerRef} className={mergeStyles(containerDivStyles)}>
       <Stack verticalFill grow styles={compositeOuterContainerStyles} id={compositeParentDivId}>