Fix sample app issue where after selecting pstn call then switching to start group call, the calls fails trying to make a PSTN call (#3962)

Author: JamesBurnside

change-beta/@azure-communication-react-df6120b2-05e7-4366-b01f-5c914db4a2a2.json

@@ -0,0 +1,9 @@
+{
+  "type": "none",
+  "area": "fix",
+  "workstream": "",
+  "comment": "Fix sample appl issue where after selecting pstn call then switching to start group call, the calls fails trying to make a PSTN call",
+  "packageName": "@azure/communication-react",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

change/@azure-communication-react-df6120b2-05e7-4366-b01f-5c914db4a2a2.json

@@ -0,0 +1,9 @@
+{
+  "type": "none",
+  "area": "fix",
+  "workstream": "",
+  "comment": "Fix sample appl issue where after selecting pstn call then switching to start group call, the calls fails trying to make a PSTN call",
+  "packageName": "@azure/communication-react",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

samples/Calling/src/app/App.tsx

@@ -110,18 +110,22 @@ const App = (): JSX.Element => {
             /* @conditional-compile-remove(PSTN-calls) */
             setAlternateCallerId(callDetails.alternateCallerId);
             let callLocator: CallAdapterLocator | undefined =
-              callDetails.callLocator || getTeamsLinkFromUrl() || getGroupIdFromUrl();
+              callDetails.callLocator || getTeamsLinkFromUrl() || getGroupIdFromUrl() || createGroupId();
 
             /* @conditional-compile-remove(rooms) */
-            callLocator = callLocator || getRoomIdFromUrl();
+            if (callDetails.option === 'Rooms') {
+              callLocator = getRoomIdFromUrl() || callDetails.callLocator;
+            }
 
             /* @conditional-compile-remove(PSTN-calls) */
-            callLocator = callLocator || getOutboundParticipants(callDetails.outboundParticipants);
+            if (callDetails.option === '1:N' || callDetails.option === 'PSTN') {
+              callLocator = getOutboundParticipants(callDetails.outboundParticipants);
+            }
 
             /* @conditional-compile-remove(teams-adhoc-call) */
-            callLocator = callLocator || getOutboundParticipants(callDetails.outboundTeamsUsers);
-
-            callLocator = callLocator || createGroupId();
+            if (callDetails.option === 'TeamsAdhoc') {
+              callLocator = getOutboundParticipants(callDetails.outboundTeamsUsers);
+            }
 
             /* @conditional-compile-remove(rooms) */
             // There is an API call involved with creating a room so lets only create one if we know we have to
@@ -136,6 +140,10 @@ const App = (): JSX.Element => {
               callLocator = { roomId: roomId };
             }
 
+            if (!callLocator) {
+              throw new Error('Invalid call locator', callLocator);
+            }
+
             /* @conditional-compile-remove(rooms) */
             if ('roomId' in callLocator) {
               if (userId && 'communicationUserId' in userId) {
@@ -148,6 +156,7 @@ const App = (): JSX.Element => {
                 throw 'Invalid userId!';
               }
             }
+
             setCallLocator(callLocator);
 
             // Update window URL to have a joinable link

samples/Calling/src/app/views/HomeScreen.tsx

@@ -50,12 +50,21 @@ import { useIsMobile } from '../utils/useIsMobile';
 import { useBoolean, useId } from '@fluentui/react-hooks';
 import { CallAdapterLocator } from '@azure/communication-react';
 
+export type CallOption =
+  | 'ACSCall'
+  | 'TeamsMeeting'
+  | /* @conditional-compile-remove(rooms) */ 'Rooms'
+  | /* @conditional-compile-remove(rooms) */ 'StartRooms'
+  | /* @conditional-compile-remove(teams-identity-support) */ 'TeamsIdentity'
+  | /* @conditional-compile-remove(one-to-n-calling) */ '1:N'
+  | /* @conditional-compile-remove(PSTN-calls) */ 'PSTN'
+  | /* @conditional-compile-remove(teams-adhoc-call) */ 'TeamsAdhoc';
+
 export interface HomeScreenProps {
   startCallHandler(callDetails: {
     displayName: string;
     callLocator?: CallAdapterLocator | TeamsMeetingLinkLocator | /* @conditional-compile-remove(rooms) */ RoomLocator;
-    /* @conditional-compile-remove(rooms) */
-    option?: string;
+    option?: CallOption;
     /* @conditional-compile-remove(rooms) */
     role?: string;
     /* @conditional-compile-remove(PSTN-calls) */
@@ -72,12 +81,14 @@ export interface HomeScreenProps {
   joiningExistingCall: boolean;
 }
 
+type ICallChoiceGroupOption = IChoiceGroupOption & { key: CallOption };
+
 export const HomeScreen = (props: HomeScreenProps): JSX.Element => {
   const imageProps = { src: heroSVG.toString() };
   const headerTitle = props.joiningExistingCall ? 'Join Call' : 'Start or join a call';
   const callOptionsGroupLabel = 'Select a call option';
   const buttonText = 'Next';
-  const callOptions: IChoiceGroupOption[] = [
+  const callOptions: ICallChoiceGroupOption[] = [
     { key: 'ACSCall', text: 'Start a call' },
     /* @conditional-compile-remove(rooms) */
     { key: 'StartRooms', text: 'Start a Rooms call' },
@@ -112,7 +123,7 @@ export const HomeScreen = (props: HomeScreenProps): JSX.Element => {
   const defaultDisplayName = localStorageAvailable ? getDisplayNameFromLocalStorage() : null;
   const [displayName, setDisplayName] = useState<string | undefined>(defaultDisplayName ?? undefined);
 
-  const [chosenCallOption, setChosenCallOption] = useState<IChoiceGroupOption>(callOptions[0]);
+  const [chosenCallOption, setChosenCallOption] = useState<ICallChoiceGroupOption>(callOptions[0]);
   const [callLocator, setCallLocator] = useState<
     TeamsMeetingLinkLocator | /* @conditional-compile-remove(rooms) */ RoomLocator
   >();
@@ -196,7 +207,7 @@ export const HomeScreen = (props: HomeScreenProps): JSX.Element => {
                 defaultSelectedKey="ACSCall"
                 options={callOptions}
                 required={true}
-                onChange={(_, option) => option && setChosenCallOption(option)}
+                onChange={(_, option) => option && setChosenCallOption(option as ICallChoiceGroupOption)}
               />
             )}
             {(teamsCallChosen || /* @conditional-compile-remove(teams-identity-support) */ teamsIdentityChosen) && (