@azure/communication-react 1.3.3-alpha-202210220021.0 → 1.3.3-alpha-202210260016.0

package/dist/communication-react.d.ts

@@ -1455,7 +1455,7 @@ export declare interface CallCompositeStrings {
     /**
      * Placeholder text for dtmf dialpad
      */
-    dtmfDialpadPlaceHolderText: string;
+    dtmfDialpadPlaceholderText: string;
     /**
      * Label for the button to open dtmf dialpad
      */
@@ -2536,7 +2536,7 @@ export declare interface CallWithChatCompositeStrings {
     /**
      * Placeholder text for dtmf dialpad
      */
-    dtmfDialpadPlaceHolderText: string;
+    dtmfDialpadPlaceholderText: string;
     /**
      * Label for the button to open dtmf dialpad
      */
@@ -7072,6 +7072,7 @@ export declare interface StatefulCallClient extends CallClient {
      * @param stream - The LocalVideoStreamState or RemoteVideoStreamState to dispose.
      */
     disposeView(callId: string | undefined, participantId: CommunicationIdentifier | undefined, stream: LocalVideoStreamState | RemoteVideoStreamState): void;
+    /** @conditional-compile-remove(one-to-n-calling) */
     /**
      * The CallAgent is used to handle calls.
      * To create the CallAgent, pass a CommunicationTokenCredential object provided from SDK.

package/dist/dist-cjs/communication-react/index.js

@@ -202,7 +202,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.3.3-alpha-202210220021.0';
+var telemetryVersion = '1.3.3-alpha-202210260016.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -525,14 +525,17 @@ const screenShareButtonSelector = reselect__namespace.createSelector([getIsScree
  */
 const devicesButtonSelector = reselect__namespace.createSelector([getDeviceManager$1], (deviceManager) => {
     return {
-        microphones: deviceManager.microphones,
-        speakers: deviceManager.speakers,
-        cameras: deviceManager.cameras,
+        microphones: removeBlankNameDevices(deviceManager.microphones),
+        speakers: removeBlankNameDevices(deviceManager.speakers),
+        cameras: removeBlankNameDevices(deviceManager.cameras),
         selectedMicrophone: deviceManager.selectedMicrophone,
         selectedSpeaker: deviceManager.selectedSpeaker,
         selectedCamera: deviceManager.selectedCamera
     };
 });
+function removeBlankNameDevices(devices) {
+    return devices.filter((device) => device.name !== '');
+}
 /* @conditional-compile-remove(PSTN-calls) */
 /**
  * Selector for the {@link HoldButton} component.
@@ -8345,6 +8348,102 @@ const UnsupportedBrowser = (props) => {
     return React__default['default'].createElement(UnsupportedBrowserContainer, Object.assign({}, props, { strings: strings }));
 };
 
+// Copyright (c) Microsoft Corporation.
+/**
+ * @private
+ */
+const dismissButtonStyle = (theme) => ({
+    root: {
+        padding: '0.375rem 1.25rem',
+        width: '3.75rem',
+        height: '2rem',
+        background: theme.palette.white,
+        border: `1px solid ${theme.palette.neutralQuaternaryAlt}`,
+        borderRadius: '0.063rem',
+        color: theme.palette.black
+    }
+});
+/**
+ * @private
+ */
+const messageBarStyle = (theme, errorType) => ({
+    innerText: {
+        paddingTop: errorType === react.MessageBarType.warning ? '0.15rem' : '0.1rem',
+        lineHeight: 'none',
+        color: theme.palette.black,
+        alignSelf: 'center',
+        whiteSpace: 'normal'
+    },
+    icon: {
+        marginTop: '0.375rem',
+        marginBottom: '0.375rem'
+    },
+    content: {
+        lineHeight: 'inherit'
+    },
+    dismissal: {
+        height: 0,
+        paddingTop: '0.8rem'
+    }
+});
+/**
+ * @private
+ */
+const linkStyle = (theme) => ({
+    root: {
+        span: {
+            color: theme.palette.black
+        }
+    }
+});
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * @internal
+ * A component to show device Permission/network connection related errors, contains link that leads to further trouble shooting guide
+ */
+const _TroubleshootingGuideErrorBar = (props) => {
+    var _a;
+    const theme = react.useTheme();
+    // error bar strings
+    const localeStrings = useLocale$1().strings.errorBar;
+    const strings = (_a = props.strings) !== null && _a !== void 0 ? _a : localeStrings;
+    const [dismissedErrors, setDismissedErrors] = React.useState([]);
+    const { onPermissionsTroubleshootingClick, onNetworkingTroubleshootingClick, permissionsState = {
+        camera: 'denied',
+        microphone: 'denied'
+    }, troubleshootingGuideStrings } = props;
+    // dropDismissalsForInactiveErrors only returns a new object if `dismissedErrors` actually changes.
+    // Without this behaviour, this `useEffect` block would cause a render loop.
+    React.useEffect(() => setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors)), [props.activeErrorMessages, dismissedErrors]);
+    const toShow = errorsToShow(props.activeErrorMessages, dismissedErrors);
+    return (React__default['default'].createElement(react.Stack, { "data-ui-id": "error-bar-stack" }, toShow.map((error) => {
+        const devicePermissionErrorBar = (React__default['default'].createElement("div", null,
+            strings[error.type],
+            ' ',
+            onPermissionsTroubleshootingClick && (React__default['default'].createElement(react.Link, { styles: linkStyle(theme), onClick: () => {
+                    onPermissionsTroubleshootingClick(permissionsState);
+                }, underline: true },
+                React__default['default'].createElement("span", null, troubleshootingGuideStrings.devicePermissionLinkText)))));
+        const networkErrorBar = (React__default['default'].createElement("div", null,
+            strings[error.type],
+            ' ',
+            onNetworkingTroubleshootingClick && (React__default['default'].createElement(react.Link, { styles: linkStyle(theme), onClick: onNetworkingTroubleshootingClick, underline: true },
+                React__default['default'].createElement("span", null, troubleshootingGuideStrings.networkTroubleshootingLinkText)))));
+        return (React__default['default'].createElement(react.MessageBar, Object.assign({}, props, { styles: messageBarStyle(theme, messageBarType(error.type)), key: error.type, messageBarType: messageBarType(error.type), messageBarIconProps: messageBarIconProps(error.type), actions: React__default['default'].createElement(react.MessageBarButton, { text: troubleshootingGuideStrings.dismissButtonText, styles: dismissButtonStyle(theme), onClick: () => {
+                    setDismissedErrors(dismissError(dismissedErrors, error));
+                }, ariaLabel: strings.dismissButtonAriaLabel }), isMultiline: false }), showErrorBar(error.type, devicePermissionErrorBar, networkErrorBar)));
+    })));
+};
+const showErrorBar = (errorType, devicePermissionErrorBar, networkErrorBar) => {
+    if (errorType === 'callNetworkQualityLow') {
+        return networkErrorBar;
+    }
+    else {
+        return devicePermissionErrorBar;
+    }
+};
+
 // Copyright (c) Microsoft Corporation.
 /**
  * A dropdown to trigger device permission prompt
@@ -13130,7 +13229,7 @@ const CallCompositeIcon = (props) => (React__default['default'].createElement(re
  */
 const CallWithChatCompositeIcon = (props) => (React__default['default'].createElement(react.FontIcon, Object.assign({}, props)));
 
-var call$d={cameraLabel:"Camera",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",deniedPermissionToRoomDetails:"You do not have permission to join this room.",deniedPermissionToRoomTitle:"Permission denied to room",peopleButtonLabel:"People",peoplePaneTitle:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"Room ID provided is not valid.",roomNotFoundTitle:"Room not found",soundLabel:"Sound",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceHolderText:"Enter number",outboundCallingNoticeString:"Calling..."};var chat$d={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$d={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceHolderText:"Enter number"};var en_US = {call:call$d,chat:chat$d,callWithChat:callWithChat$d};
+var call$d={cameraLabel:"Camera",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",deniedPermissionToRoomDetails:"You do not have permission to join this room.",deniedPermissionToRoomTitle:"Permission denied to room",peopleButtonLabel:"People",peoplePaneTitle:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"Room ID provided is not valid.",roomNotFoundTitle:"Room not found",soundLabel:"Sound",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number",outboundCallingNoticeString:"Calling..."};var chat$d={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$d={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number"};var en_US = {call:call$d,chat:chat$d,callWithChat:callWithChat$d};
 
 var call$c={cameraLabel:"Camera",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",defaultPlaceHolder:"Select an option",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",soundLabel:"Sound",startCallButtonLabel:"Start call",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby."};var chat$c={chatListHeader:"In this chat"};var callWithChat$c={peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",chatButtonLabel:"Chat",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipOpen:"Show chat",chatButtonTooltipClose:"Hide chat",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",peoplePaneTitle:"People",peoplePaneSubTitle:"In this call",chatPaneTitle:"Chat",chatButtonNewMessageNotificationLabel:"New Message",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",copyInviteLinkButtonLabel:"Copy invite link",dismissSidePaneButton:"Close",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back"};var en_GB = {call:call$c,chat:chat$c,callWithChat:callWithChat$c};
 
@@ -15596,7 +15695,7 @@ const CallControls = (props) => {
     const dialpadStrings = React.useMemo(() => ({
         dialpadModalAriaLabel: localeStrings.strings.call.dialpadModalAriaLabel,
         dialpadCloseModalButtonAriaLabel: localeStrings.strings.call.dialpadCloseModalButtonAriaLabel,
-        placeholderText: localeStrings.strings.call.dtmfDialpadPlaceHolderText
+        placeholderText: localeStrings.strings.call.dtmfDialpadPlaceholderText
     }), [localeStrings]);
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
     const holdButtonProps = usePropsFor$1(HoldButton);
@@ -17620,13 +17719,43 @@ const startCallButtonStyleMobile = react.mergeStyles({
     maxWidth: 'unset'
 });
 
+// Copyright (c) Microsoft Corporation.
+/**
+ * @private
+ */
+const ConfigurationpageErrorBar = (props) => {
+    const { errorBarProps, 
+    /* @conditional-compile-remove(call-readiness) */
+    showTroubleShootingErrorBar = false, 
+    /* @conditional-compile-remove(call-readiness) */
+    onPermissionsTroubleshootingClick, 
+    /* @conditional-compile-remove(call-readiness) */
+    onNetworkingTroubleShootingClick, 
+    /* @conditional-compile-remove(call-readiness) */
+    permissionsState } = props;
+    /* @conditional-compile-remove(call-readiness) */
+    const permissionTroubleshootingGuideStrings = {
+        devicePermissionLinkText: 'Troubleshooting Camera and Microphone Permissions',
+        networkTroubleshootingLinkText: 'Troubleshooting Network Connection',
+        dismissButtonText: 'OK'
+    };
+    /* @conditional-compile-remove(call-readiness) */
+    if (showTroubleShootingErrorBar) {
+        return (React__default['default'].createElement(_TroubleshootingGuideErrorBar, Object.assign({ troubleshootingGuideStrings: permissionTroubleshootingGuideStrings, onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick, onNetworkingTroubleshootingClick: onNetworkingTroubleShootingClick, permissionsState: permissionsState }, errorBarProps)));
+    }
+    return React__default['default'].createElement(ErrorBar, Object.assign({}, errorBarProps));
+};
+
 // Copyright (c) Microsoft Corporation.
 /**
  * @private
  */
 const ConfigurationPage = (props) => {
     var _a, _b;
-    const { startCallHandler, mobileView, /* @conditional-compile-remove(call-readiness) */ devicePermissions } = props;
+    const { startCallHandler, mobileView, 
+    /* @conditional-compile-remove(call-readiness) */ devicePermissions, 
+    /* @conditional-compile-remove(call-readiness) */ onPermissionsTroubleshootingClick, 
+    /* @conditional-compile-remove(call-readiness) */ onNetworkingTroubleShootingClick } = props;
     const options = useAdaptedSelector(getSelector$1(DevicesButton));
     const localDeviceSettingsHandlers = useHandlers();
     const { video: cameraPermissionGranted, audio: microphonePermissionGranted } = useSelector$1(devicePermissionSelector);
@@ -17664,9 +17793,28 @@ const ConfigurationPage = (props) => {
     let mobileWithPreview = mobileView;
     /* @conditional-compile-remove(rooms) */
     mobileWithPreview = mobileWithPreview && rolePermissions.cameraButton;
+    /* @conditional-compile-remove(call-readiness) */
+    const permissionsState = {
+        camera: cameraPermissionGranted ? 'granted' : 'denied',
+        microphone: microphonePermissionGranted ? 'granted' : 'denied'
+    };
+    /* @conditional-compile-remove(call-readiness) */
+    const networkErrors = errorBarProps.activeErrorMessages.filter((message) => message.type === 'callNetworkQualityLow');
     return (React__default['default'].createElement(react.Stack, { className: mobileView ? configurationContainerStyleMobile : configurationContainerStyleDesktop },
         React__default['default'].createElement(react.Stack, { styles: bannerNotificationStyles },
-            React__default['default'].createElement(ErrorBar, Object.assign({}, errorBarProps))),
+            React__default['default'].createElement(ConfigurationpageErrorBar
+            /* @conditional-compile-remove(call-readiness) */
+            // show trouble shooting error bar when encountering network error/ permission error
+            , { 
+                /* @conditional-compile-remove(call-readiness) */
+                // show trouble shooting error bar when encountering network error/ permission error
+                showTroubleShootingErrorBar: !cameraPermissionGranted || !microphonePermissionGranted || networkErrors.length > 0, 
+                /* @conditional-compile-remove(call-readiness) */
+                permissionsState: permissionsState, 
+                /* @conditional-compile-remove(call-readiness) */
+                onNetworkingTroubleShootingClick: onNetworkingTroubleShootingClick, 
+                /* @conditional-compile-remove(call-readiness) */
+                onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick, errorBarProps: errorBarProps })),
         React__default['default'].createElement(react.Stack, { grow: true, horizontal: !mobileWithPreview, horizontalAlign: mobileWithPreview ? 'stretch' : 'center', verticalAlign: "center", tokens: mobileWithPreview ? configurationStackTokensMobile : configurationStackTokensDesktop },
             mobileWithPreview && (React__default['default'].createElement(react.Stack.Item, null,
                 title,
@@ -18077,7 +18225,7 @@ var __awaiter$5 = (window && window.__awaiter) || function (thisArg, _arguments,
     });
 };
 const MainScreen = (props) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const { callInvitationUrl, onRenderAvatar, onFetchAvatarPersonaData, onFetchParticipantMenuItems } = props;
     const page = useSelector$1(getPage);
     const adapter = useAdapter();
@@ -18098,7 +18246,11 @@ const MainScreen = (props) => {
                     adapter.joinCall();
                 }, 
                 /* @conditional-compile-remove(call-readiness) */
-                devicePermissions: (_a = props.options) === null || _a === void 0 ? void 0 : _a.devicePermissions }));
+                devicePermissions: (_a = props.options) === null || _a === void 0 ? void 0 : _a.devicePermissions, 
+                /* @conditional-compile-remove(call-readiness) */
+                onPermissionsTroubleshootingClick: (_b = props.options) === null || _b === void 0 ? void 0 : _b.onPermissionsTroubleshootingClick, 
+                /* @conditional-compile-remove(call-readiness) */
+                onNetworkingTroubleShootingClick: (_c = props.options) === null || _c === void 0 ? void 0 : _c.onNetworkingTroubleShootingClick }));
             break;
         case 'accessDeniedTeamsMeeting':
             pageElement = (React__default['default'].createElement(NoticePage, { iconName: "NoticePageAccessDeniedTeamsMeeting", title: locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedTitle, moreDetails: locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails, dataUiId: 'access-denied-teams-meeting-page' }));
@@ -18130,7 +18282,7 @@ const MainScreen = (props) => {
         case unsupportedEnvironmentPageTrampoline():
             pageElement = (React__default['default'].createElement(React__default['default'].Fragment, null, 
             /* @conditional-compile-remove(unsupported-browser) */
-            React__default['default'].createElement(UnsupportedBrowserPage, { onTroubleshootingClick: (_b = props.options) === null || _b === void 0 ? void 0 : _b.onEnvironmentInfoTroubleshootingClick })));
+            React__default['default'].createElement(UnsupportedBrowserPage, { onTroubleshootingClick: (_d = props.options) === null || _d === void 0 ? void 0 : _d.onEnvironmentInfoTroubleshootingClick })));
     }
     if (!pageElement) {
         throw new Error('Invalid call composite page');
@@ -20038,7 +20190,7 @@ const CallWithChatScreen = (props) => {
     const dialpadStrings = React.useMemo(() => ({
         dialpadModalAriaLabel: callWithChatStrings.dialpadModalAriaLabel,
         dialpadCloseModalButtonAriaLabel: callWithChatStrings.dialpadCloseModalButtonAriaLabel,
-        placeholderText: callWithChatStrings.dtmfDialpadPlaceHolderText
+        placeholderText: callWithChatStrings.dtmfDialpadPlaceholderText
     }), [callWithChatStrings]);
     /* @conditional-compile-remove(PSTN-calls) */
     const alternateCallerId = callAdapter.getState().alternateCallerId;