[Bugfix] Call timeout end call screen

change-beta/@azure-communication-react-0b3dc439-b9d0-4f4a-ae97-32a08ccd9182.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Bug fix",
+  "comment": "Introduce new endcall screen for when a outbound call times out",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-0b3dc439-b9d0-4f4a-ae97-32a08ccd9182.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Bug fix",
+  "comment": "Introduce new endcall screen for when a outbound call times out",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/communication-react/review/beta/communication-react.api.md

@@ -561,6 +561,7 @@ export type CallCompositeIcons = {
     NoticePageNotInvitedToRoom?: JSX.Element;
     NoticePageRoomNotFound?: JSX.Element;
     NoticePageRoomNotValid?: JSX.Element;
+    NoticePageCallTimeout?: JSX.Element;
     OptionsCamera?: JSX.Element;
     OptionsMic?: JSX.Element;
     OptionsSpeaker?: JSX.Element;
@@ -640,6 +641,8 @@ export interface CallCompositeStrings {
     blurBackgroundTooltip?: string;
     callRejectedMoreDetails?: string;
     callRejectedTitle: string;
+    callTimeoutDetails?: string;
+    callTimeoutTitle?: string;
     cameraLabel: string;
     cameraOffBackgroundEffectWarningText?: string;
     cameraPermissionDenied: string;
@@ -2459,6 +2462,7 @@ export const DEFAULT_COMPOSITE_ICONS: {
     NoticePageNotInvitedToRoom?: JSX.Element | undefined;
     NoticePageRoomNotFound?: JSX.Element | undefined;
     NoticePageRoomNotValid?: JSX.Element | undefined;
+    NoticePageCallTimeout?: JSX.Element | undefined;
     OptionsCamera: JSX.Element;
     OptionsMic: JSX.Element;
     OptionsSpeaker: JSX.Element;

packages/communication-react/review/stable/communication-react.api.md

@@ -413,6 +413,7 @@ export type CallCompositeIcons = {
     NoticePageNotInvitedToRoom?: JSX.Element;
     NoticePageRoomNotFound?: JSX.Element;
     NoticePageRoomNotValid?: JSX.Element;
+    NoticePageCallTimeout?: JSX.Element;
     OptionsCamera?: JSX.Element;
     OptionsMic?: JSX.Element;
     OptionsSpeaker?: JSX.Element;
@@ -460,6 +461,8 @@ export interface CallCompositeProps extends BaseCompositeProps<CallCompositeIcon
 export interface CallCompositeStrings {
     blurBackgroundEffectButtonLabel?: string;
     blurBackgroundTooltip?: string;
+    callTimeoutDetails?: string;
+    callTimeoutTitle?: string;
     cameraLabel: string;
     cameraOffBackgroundEffectWarningText?: string;
     cameraPermissionDenied: string;
@@ -1968,6 +1971,7 @@ export const DEFAULT_COMPOSITE_ICONS: {
     NoticePageNotInvitedToRoom?: JSX.Element | undefined;
     NoticePageRoomNotFound?: JSX.Element | undefined;
     NoticePageRoomNotValid?: JSX.Element | undefined;
+    NoticePageCallTimeout?: JSX.Element | undefined;
     OptionsCamera: JSX.Element;
     OptionsMic: JSX.Element;
     OptionsSpeaker: JSX.Element;

packages/react-composites/review/beta/react-composites.api.md

@@ -377,6 +377,7 @@ export type CallCompositeIcons = {
     NoticePageNotInvitedToRoom?: JSX.Element;
     NoticePageRoomNotFound?: JSX.Element;
     NoticePageRoomNotValid?: JSX.Element;
+    NoticePageCallTimeout?: JSX.Element;
     OptionsCamera?: JSX.Element;
     OptionsMic?: JSX.Element;
     OptionsSpeaker?: JSX.Element;
@@ -456,6 +457,8 @@ export interface CallCompositeStrings {
     blurBackgroundTooltip?: string;
     callRejectedMoreDetails?: string;
     callRejectedTitle: string;
+    callTimeoutDetails?: string;
+    callTimeoutTitle?: string;
     cameraLabel: string;
     cameraOffBackgroundEffectWarningText?: string;
     cameraPermissionDenied: string;
@@ -1427,6 +1430,7 @@ export const DEFAULT_COMPOSITE_ICONS: {
     NoticePageNotInvitedToRoom?: JSX.Element | undefined;
     NoticePageRoomNotFound?: JSX.Element | undefined;
     NoticePageRoomNotValid?: JSX.Element | undefined;
+    NoticePageCallTimeout?: JSX.Element | undefined;
     OptionsCamera: JSX.Element;
     OptionsMic: JSX.Element;
     OptionsSpeaker: JSX.Element;

packages/react-composites/review/stable/react-composites.api.md

@@ -324,6 +324,7 @@ export type CallCompositeIcons = {
     NoticePageNotInvitedToRoom?: JSX.Element;
     NoticePageRoomNotFound?: JSX.Element;
     NoticePageRoomNotValid?: JSX.Element;
+    NoticePageCallTimeout?: JSX.Element;
     OptionsCamera?: JSX.Element;
     OptionsMic?: JSX.Element;
     OptionsSpeaker?: JSX.Element;
@@ -371,6 +372,8 @@ export interface CallCompositeProps extends BaseCompositeProps<CallCompositeIcon
 export interface CallCompositeStrings {
     blurBackgroundEffectButtonLabel?: string;
     blurBackgroundTooltip?: string;
+    callTimeoutDetails?: string;
+    callTimeoutTitle?: string;
     cameraLabel: string;
     cameraOffBackgroundEffectWarningText?: string;
     cameraPermissionDenied: string;
@@ -1162,6 +1165,7 @@ export const DEFAULT_COMPOSITE_ICONS: {
     NoticePageNotInvitedToRoom?: JSX.Element | undefined;
     NoticePageRoomNotFound?: JSX.Element | undefined;
     NoticePageRoomNotValid?: JSX.Element | undefined;
+    NoticePageCallTimeout?: JSX.Element | undefined;
     OptionsCamera: JSX.Element;
     OptionsMic: JSX.Element;
     OptionsSpeaker: JSX.Element;

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

@@ -750,4 +750,12 @@ export interface CallCompositeStrings {
    * String for more details when the call is rejected by the callee
    */
   callRejectedMoreDetails?: string;
+  /**
+   * String for title when the call times out because the remote user does not answer
+   */
+  callTimeoutTitle?: string;
+  /**
+   * String for more details when the call times out because the remote user does not answer
+   */
+  callTimeoutDetails?: string;
 }

packages/react-composites/src/composites/CallComposite/utils/Utils.ts

@@ -36,6 +36,10 @@ export const NOT_INVITED_TO_ROOM_SUB_CODE = 5828;
 /* @conditional-compile-remove(rooms) */
 /** @private */
 export const INVITE_TO_ROOM_REMOVED_SUB_CODE = 5317;
+/** @private */
+export const CALL_TIMEOUT_SUB_CODE = 10004;
+/** @private */
+export const CALL_TIMEOUT_CODE = 487;
 
 /**
  * @private
@@ -166,6 +170,13 @@ export const getEndedCallPageProps = (
         iconName = 'NoticePageInviteToRoomRemoved';
       }
       break;
+    case CALL_TIMEOUT_SUB_CODE:
+      if (endedCall?.callEndReason?.code === CALL_TIMEOUT_CODE && locale.strings.call.callTimeoutTitle) {
+        title = locale.strings.call.callTimeoutTitle;
+        moreDetails = locale.strings.call.callTimeoutDetails;
+        disableStartCallButton = true;
+        iconName = 'NoticePageCallTimeout';
+      }
   }
   /* @conditional-compile-remove(calling-sounds) */
   switch (endedCall?.callEndReason?.code) {

packages/react-composites/src/composites/common/icons.tsx

@@ -87,6 +87,7 @@ export const COMPOSITE_ONLY_ICONS: CompositeIcons = {
   NoticePageRoomNotValid: <Info20Filled />,
   /* @conditional-compile-remove(calling-sounds) */
   NoticePageCallRejected: <Info20Filled />,
+  NoticePageCallTimeout: <Info20Filled />,
   /* @conditional-compile-remove(file-sharing) */
   SendBoxAttachFile: <Attach20Regular />,
   /* @conditional-compile-remove(PSTN-calls) */
@@ -227,6 +228,7 @@ export type CallCompositeIcons = {
   NoticePageRoomNotFound?: JSX.Element;
   /* @conditional-compile-remove(rooms) */
   NoticePageRoomNotValid?: JSX.Element;
+  NoticePageCallTimeout?: JSX.Element;
   OptionsCamera?: JSX.Element;
   OptionsMic?: JSX.Element;
   OptionsSpeaker?: JSX.Element;

packages/react-composites/src/composites/localization/locales/en-US/strings.json

@@ -118,6 +118,8 @@
     "dismissModalAriaLabel": "Local and remote picture and picture, press enter to return to call",
     "callRejectedTitle": "The call could not be completed",
     "callRejectedMoreDetails": "The person you are trying to reach is unavailable. Please try again later.",
+    "callTimeoutTitle": "The call could not be completed",
+    "callTimeoutDetails": "The person you are trying to reach is unavailable. Please try again later.",
     "spokenLanguageStrings": {
       "ar-ae": "Arabic - U.A.E.",
       "ar-sa": "Arabic - Saudi Arabia",