[Call Readiness] Unsupported browser version UI

change-beta/@azure-communication-react-0c042af8-f59d-4af5-a8ed-26ff9ea334f1.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Introduce UI to inform the user that their browser version is out of date.",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-0c042af8-f59d-4af5-a8ed-26ff9ea334f1.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Introduce UI to inform the user that their browser version is out of date.",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -1511,6 +1511,7 @@ export interface ComponentStrings {
     sendBox: SendBoxStrings;
     typingIndicator: TypingIndicatorStrings;
     UnsupportedBrowser: UnsupportedBrowserStrings;
+    UnsupportedBrowserVersion: UnsupportedBrowserVersionStrings;
     videoGallery: VideoGalleryStrings;
     videoTile: VideoTileStrings;
 }
@@ -1809,7 +1810,7 @@ export const DEFAULT_COMPONENT_ICONS: {
     DomainPermissionMic: JSX.Element;
     DomainPermissionCameraDenied: JSX.Element;
     DomainPermissionMicDenied: JSX.Element;
-    UnsupportedBrowserWarning: JSX.Element;
+    UnsupportedEnvironmentWarning: JSX.Element;
     BrowserPermissionDeniedError: JSX.Element;
     VideoTilePinned: JSX.Element;
 };
@@ -1901,7 +1902,7 @@ export const DEFAULT_COMPOSITE_ICONS: {
     DomainPermissionMic: JSX.Element;
     DomainPermissionCameraDenied: JSX.Element;
     DomainPermissionMicDenied: JSX.Element;
-    UnsupportedBrowserWarning: JSX.Element;
+    UnsupportedEnvironmentWarning: JSX.Element;
     BrowserPermissionDeniedError: JSX.Element;
     VideoTilePinned: JSX.Element;
 };
@@ -3076,7 +3077,23 @@ export interface UnsupportedBrowserProps {
 
 // @beta
 export interface UnsupportedBrowserStrings {
-    moreHelpLink: string;
+    moreHelpText: string;
+    primaryText: string;
+    secondaryText: string;
+}
+
+// @beta
+export const UnsupportedBrowserVersion: (props: UnsupportedBrowserVersionProps) => JSX.Element;
+
+// @beta
+export interface UnsupportedBrowserVersionProps {
+    onTroubleshootingClick?: () => void;
+    strings: UnsupportedBrowserVersionStrings;
+}
+
+// @beta
+export interface UnsupportedBrowserVersionStrings {
+    moreHelpText: string;
     primaryText: string;
     secondaryText: string;
 }

packages/communication-react/src/index.ts

@@ -295,6 +295,10 @@ export * from './mergedHooks';
 export { UnsupportedBrowser } from '../../react-components/src';
 /* @conditional-compile-remove(unsupported-browser) */
 export type { UnsupportedBrowserStrings, UnsupportedBrowserProps } from '../../react-components/src';
+/* @conditional-compile-remove(unsupported-browser) */
+export { UnsupportedBrowserVersion } from '../../react-components/src';
+/* @conditional-compile-remove(unsupported-browser) */
+export type { UnsupportedBrowserVersionStrings, UnsupportedBrowserVersionProps } from '../../react-components/src';
 /* @conditional-compile-remove(call-readiness) */
 export { _DevicePermissionDropdown } from '../../react-components/src';
 /* @conditional-compile-remove(call-readiness) */

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

@@ -372,6 +372,7 @@ export interface ComponentStrings {
     sendBox: SendBoxStrings;
     typingIndicator: TypingIndicatorStrings;
     UnsupportedBrowser: UnsupportedBrowserStrings;
+    UnsupportedBrowserVersion: UnsupportedBrowserVersionStrings;
     videoGallery: VideoGalleryStrings;
     videoTile: VideoTileStrings;
 }
@@ -521,7 +522,7 @@ export const DEFAULT_COMPONENT_ICONS: {
     DomainPermissionMic: JSX.Element;
     DomainPermissionCameraDenied: JSX.Element;
     DomainPermissionMicDenied: JSX.Element;
-    UnsupportedBrowserWarning: JSX.Element;
+    UnsupportedEnvironmentWarning: JSX.Element;
     BrowserPermissionDeniedError: JSX.Element;
     VideoTilePinned: JSX.Element;
 };
@@ -1568,7 +1569,23 @@ export interface UnsupportedBrowserProps {
 
 // @beta
 export interface UnsupportedBrowserStrings {
-    moreHelpLink: string;
+    moreHelpText: string;
+    primaryText: string;
+    secondaryText: string;
+}
+
+// @beta
+export const UnsupportedBrowserVersion: (props: UnsupportedBrowserVersionProps) => JSX.Element;
+
+// @beta
+export interface UnsupportedBrowserVersionProps {
+    onTroubleshootingClick?: () => void;
+    strings: UnsupportedBrowserVersionStrings;
+}
+
+// @beta
+export interface UnsupportedBrowserVersionStrings {
+    moreHelpText: string;
     primaryText: string;
     secondaryText: string;
 }

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

@@ -1324,6 +1324,38 @@ export interface TypingIndicatorStylesProps extends BaseCustomStyles {
     typingUserDisplayName?: IStyle;
 }
 
+// @beta
+export const UnsupportedBrowser: (props: UnsupportedBrowserProps) => JSX.Element;
+
+// @beta
+export interface UnsupportedBrowserProps {
+    onTroubleshootingClick?: () => void;
+    strings: UnsupportedBrowserStrings;
+}
+
+// @beta
+export interface UnsupportedBrowserStrings {
+    moreHelpText: string;
+    primaryText: string;
+    secondaryText: string;
+}
+
+// @beta
+export const UnsupportedBrowserVersion: (props: UnsupportedBrowserVersionProps) => JSX.Element;
+
+// @beta
+export interface UnsupportedBrowserVersionProps {
+    onTroubleshootingClick?: () => void;
+    strings: UnsupportedBrowserVersionStrings;
+}
+
+// @beta
+export interface UnsupportedBrowserVersionStrings {
+    moreHelpText: string;
+    primaryText: string;
+    secondaryText: string;
+}
+
 // @public
 export type UpdateMessageCallback = (messageId: string, content: string) => Promise<void>;
 

packages/react-components/src/components/UnsupportedBrowser.tsx

@@ -1,21 +1,9 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-/* @conditional-compile-remove(unsupported-browser) */
-import { Icon, Link, Stack, Text } from '@fluentui/react';
-/* @conditional-compile-remove(unsupported-browser) */
 import { _pxToRem } from '@internal/acs-ui-common';
 import React from 'react';
-/* @conditional-compile-remove(unsupported-browser) */
-import { useLocale } from '../localization';
-/* @conditional-compile-remove(unsupported-browser) */
-import {
-  containerStyles,
-  iconStyles,
-  linkTextStyles,
-  mainTextStyles,
-  secondaryTextStyles
-} from './styles/UnsupportedBrowser.styles';
+import { UnsupportedEnvironment } from './UnsupportedEnvironment';
 
 /**
  * Strings for UnsupportedBrowser component
@@ -27,54 +15,28 @@ export interface UnsupportedBrowserStrings {
   primaryText: string;
   /** String for the secondary text */
   secondaryText: string;
-  /** String for the help link */
-  moreHelpLink: string;
+  /** String to display in the text for the help link */
+  moreHelpText: string;
 }
 
 /**
- * props for UnsupportedBrowser UI
+ * props for {@link UnsupportedBrowser} UI
  *
  * @beta
  */
 export interface UnsupportedBrowserProps {
-  /** Handler to perform a action when the help link is actioned */
+  /** Handler to perform an action when the help link is actioned */
   onTroubleshootingClick?: () => void;
   /** String overrides for the component */
   strings: UnsupportedBrowserStrings;
 }
 
-/* @conditional-compile-remove(unsupported-browser) */
-const UnsupportedBrowserContainer = (props: UnsupportedBrowserProps): JSX.Element => {
-  const { onTroubleshootingClick, strings } = props;
-  return (
-    <Stack styles={containerStyles}>
-      <Icon styles={iconStyles} iconName="UnsupportedBrowserWarning" data-ui-id="unsupportedBrowserIcon"></Icon>
-      <Text styles={mainTextStyles}>{strings.primaryText}</Text>
-      <Text styles={secondaryTextStyles}>{strings.secondaryText}</Text>
-      {onTroubleshootingClick && (
-        <Link
-          styles={linkTextStyles}
-          onClick={() => {
-            onTroubleshootingClick();
-          }}
-          data-ui-id="unsupportedBrowserLink"
-        >
-          {strings.moreHelpLink}
-        </Link>
-      )}
-    </Stack>
-  );
-};
-
 /**
- * UI to display to the user that the browser they are using is not supported by calling application.
+ * UI to display to the user that the browser they are using is not supported by Azure Communications Calling service.
  *
  * @beta
  */
 export const UnsupportedBrowser = (props: UnsupportedBrowserProps): JSX.Element => {
-  /* @conditional-compile-remove(unsupported-browser) */
-  const strings = useLocale().strings.UnsupportedBrowser;
-  /* @conditional-compile-remove(unsupported-browser) */
-  return <UnsupportedBrowserContainer {...props} strings={strings} />;
-  return <></>;
+  const { onTroubleshootingClick, strings } = props;
+  return <UnsupportedEnvironment onTroubleshootingClick={onTroubleshootingClick} strings={strings} />;
 };

packages/react-components/src/components/UnsupportedBrowserVersion.tsx

@@ -0,0 +1,43 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import { _pxToRem } from '@internal/acs-ui-common';
+import React from 'react';
+import { UnsupportedEnvironment } from './UnsupportedEnvironment';
+
+/**
+ * Strings for UnsupportedBrowser component
+ *
+ * @beta
+ */
+export interface UnsupportedBrowserVersionStrings {
+  /** String for the primary text */
+  primaryText: string;
+  /** String for the secondary text */
+  secondaryText: string;
+  /** String to display in the text for the help link */
+  moreHelpText: string;
+}
+
+/**
+ * props for {@link UnsupportedBrowserVersion} UI
+ *
+ * @beta
+ */
+export interface UnsupportedBrowserVersionProps {
+  /** Handler to perform an action when the help link is actioned */
+  onTroubleshootingClick?: () => void;
+  /** String overrides for the component */
+  strings: UnsupportedBrowserVersionStrings;
+}
+
+/**
+ * UI to display to the user that the browser version they are using is out of date
+ * and not supported by Azure Communications Calling service.
+ *
+ * @beta
+ */
+export const UnsupportedBrowserVersion = (props: UnsupportedBrowserVersionProps): JSX.Element => {
+  const { onTroubleshootingClick, strings } = props;
+  return <UnsupportedEnvironment onTroubleshootingClick={onTroubleshootingClick} strings={strings} />;
+};

packages/react-components/src/components/UnsupportedEnvironment.tsx

@@ -0,0 +1,78 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+/* @conditional-compile-remove(unsupported-browser) */
+import { Icon, Link, Stack, Text } from '@fluentui/react';
+/* @conditional-compile-remove(unsupported-browser) */
+import { _pxToRem } from '@internal/acs-ui-common';
+import React from 'react';
+/* @conditional-compile-remove(unsupported-browser) */
+import {
+  containerStyles,
+  iconStyles,
+  linkTextStyles,
+  mainTextStyles,
+  secondaryTextStyles
+} from './styles/UnsupportedEnvironment.styles';
+
+/**
+ * @private
+ */
+export interface UnsupportedEnvironmentStrings {
+  /** String for the primary text */
+  primaryText: string;
+  /** String for the secondary text */
+  secondaryText: string;
+  /** String to display in the text for the help link */
+  moreHelpText: string;
+}
+
+/**
+ * props for {@link UnsupportedEnvironment} UI
+ *
+ * @private
+ */
+export interface UnsupportedEnvironmentProps {
+  /** Handler to perform a action when the help link is actioned */
+  onTroubleshootingClick?: () => void;
+  /** String overrides for the component */
+  strings: UnsupportedEnvironmentStrings;
+}
+
+/* @conditional-compile-remove(unsupported-browser) */
+const UnsupportedEnvironmentContainer = (props: UnsupportedEnvironmentProps): JSX.Element => {
+  const { onTroubleshootingClick, strings } = props;
+  return (
+    <Stack styles={containerStyles}>
+      <Icon
+        styles={iconStyles}
+        iconName="UnsupportedEnvironmentWarning"
+        data-ui-id="unsupported-environment-icon"
+      ></Icon>
+      <Text styles={mainTextStyles}>{strings.primaryText}</Text>
+      <Text styles={secondaryTextStyles}>{strings.secondaryText}</Text>
+      {onTroubleshootingClick && (
+        <Link
+          styles={linkTextStyles}
+          onClick={() => {
+            onTroubleshootingClick();
+          }}
+          data-ui-id="unsupported-environment-link"
+        >
+          {strings.moreHelpText}
+        </Link>
+      )}
+    </Stack>
+  );
+};
+
+/**
+ * UI to display to the user that the browser they are using is not supported by calling application.
+ *
+ * @private
+ */
+export const UnsupportedEnvironment = (props: UnsupportedEnvironmentProps): JSX.Element => {
+  /* @conditional-compile-remove(unsupported-browser) */
+  return <UnsupportedEnvironmentContainer {...props} />;
+  return <></>;
+};

packages/react-components/src/components/index.ts

@@ -177,10 +177,11 @@ export { _RemoteVideoTile } from './RemoteVideoTile';
 export { _HighContrastAwareIcon } from './HighContrastAwareIcon';
 export type { _HighContrastAwareIconProps } from './HighContrastAwareIcon';
 
-/* @conditional-compile-remove(unsupported-browser) */
 export { UnsupportedBrowser } from './UnsupportedBrowser';
-/* @conditional-compile-remove(unsupported-browser) */
 export type { UnsupportedBrowserStrings, UnsupportedBrowserProps } from './UnsupportedBrowser';
+export { UnsupportedBrowserVersion } from './UnsupportedBrowserVersion';
+export type { UnsupportedBrowserVersionStrings, UnsupportedBrowserVersionProps } from './UnsupportedBrowserVersion';
+
 export { _TroubleshootingGuideErrorBar } from './TroubleshootingGuideErrorBar';
 export type {
   _TroubleshootingGuideErrorBarStrings,

packages/react-components/src/components/styles/UnsupportedBrowser.styles.tsx → packages/react-components/src/components/styles/UnsupportedEnvironment.styles.tsx

@@ -24,7 +24,8 @@ export const secondaryTextStyles: ITextStyles = {
   root: {
     margin: 'auto',
     fontWeight: 400,
-    paddingBottom: '0.5rem'
+    paddingBottom: '0.5rem',
+    textAlign: 'center'
   }
 };