[Call Readiness] Unsupported Browser UI

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

@@ -1310,6 +1310,7 @@ export interface ComponentStrings {
     screenShareButton: ScreenShareButtonStrings;
     sendBox: SendBoxStrings;
     typingIndicator: TypingIndicatorStrings;
+    UnsupportedBrowser: UnsupportedBrowserStrings;
     videoGallery: VideoGalleryStrings;
     videoTile: VideoTileStrings;
 }
@@ -1595,6 +1596,7 @@ export const DEFAULT_COMPONENT_ICONS: {
     SendBoxSendHovered: JSX.Element;
     VideoTileMicOff: JSX.Element;
     BackSpace: JSX.Element;
+    UnsupportedBrowserWarning: JSX.Element;
 };
 
 // @public
@@ -1678,6 +1680,7 @@ export const DEFAULT_COMPOSITE_ICONS: {
     HoldCallButton: JSX.Element;
     ResumeCall: JSX.Element;
     BackSpace: JSX.Element;
+    UnsupportedBrowserWarning: JSX.Element;
 };
 
 // @public
@@ -2758,6 +2761,22 @@ export interface TypingIndicatorStylesProps extends BaseCustomStyles {
     typingUserDisplayName?: IStyle;
 }
 
+// @internal (undocumented)
+export const _UnsupportedBrowser: (props: _UnsupportedBrowserProps) => JSX.Element;
+
+// @internal (undocumented)
+export type _UnsupportedBrowserProps = {
+    onTroubleShootingClick: () => void;
+    strings: UnsupportedBrowserStrings;
+};
+
+// @beta (undocumented)
+export type UnsupportedBrowserStrings = {
+    primaryText: string;
+    secondaryText: string;
+    moreHelpLink: string;
+};
+
 // @public
 export type UpdateMessageCallback = (messageId: string, content: string, metadata?: Record<string, string>, options?: {
     attachedFilesMetadata?: FileMetadata[];

packages/communication-react/src/index.ts

@@ -250,3 +250,8 @@ export type {
 } from '../../chat-stateful-client/src';
 export * from '../../react-composites/src/index-public';
 export * from './mergedHooks';
+
+/* @conditional-compile-remove(call-readiness) */
+export { _UnsupportedBrowser } from '../../react-components/src';
+/* @conditional-compile-remove(call-readiness) */
+export type { UnsupportedBrowserStrings, _UnsupportedBrowserProps } from '../../react-components/src';

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

@@ -272,6 +272,7 @@ export interface ComponentStrings {
     screenShareButton: ScreenShareButtonStrings;
     sendBox: SendBoxStrings;
     typingIndicator: TypingIndicatorStrings;
+    UnsupportedBrowser: UnsupportedBrowserStrings;
     videoGallery: VideoGalleryStrings;
     videoTile: VideoTileStrings;
 }
@@ -415,6 +416,7 @@ export const DEFAULT_COMPONENT_ICONS: {
     SendBoxSendHovered: JSX.Element;
     VideoTileMicOff: JSX.Element;
     BackSpace: JSX.Element;
+    UnsupportedBrowserWarning: JSX.Element;
 };
 
 // @public
@@ -1355,6 +1357,22 @@ export interface TypingIndicatorStylesProps extends BaseCustomStyles {
     typingUserDisplayName?: IStyle;
 }
 
+// @internal (undocumented)
+export const _UnsupportedBrowser: (props: _UnsupportedBrowserProps) => JSX.Element;
+
+// @internal (undocumented)
+export type _UnsupportedBrowserProps = {
+    onTroubleShootingClick: () => void;
+    strings: UnsupportedBrowserStrings;
+};
+
+// @beta (undocumented)
+export type UnsupportedBrowserStrings = {
+    primaryText: string;
+    secondaryText: string;
+    moreHelpLink: string;
+};
+
 // @public
 export type UpdateMessageCallback = (messageId: string, content: string, metadata?: Record<string, string>, options?: {
     attachedFilesMetadata?: FileMetadata[];

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

@@ -0,0 +1,65 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import { Icon, Link, Stack, Text } from '@fluentui/react';
+import { _pxToRem } from '@internal/acs-ui-common';
+import React from 'react';
+/* @conditional-compile-remove(call-readiness) */
+import { useLocale } from '../localization';
+import {
+  containerStyles,
+  linkTextStyles,
+  mainTextStyles,
+  secondaryTextStyles
+} from './styles/UnsupportedBrowser.styles';
+
+/**
+ * @beta
+ */
+export type UnsupportedBrowserStrings = {
+  primaryText: string;
+  secondaryText: string;
+  moreHelpLink: string;
+};
+
+/**
+ * @internal
+ */
+export type _UnsupportedBrowserProps = {
+  onTroubleShootingClick: () => void;
+  strings: UnsupportedBrowserStrings;
+};
+
+/**
+ * @internal
+ */
+export const _UnsupportedBrowserContainer = (props: _UnsupportedBrowserProps): JSX.Element => {
+  const { onTroubleShootingClick, strings } = props;
+  console.log('test2');
+  return (
+    <Stack styles={containerStyles}>
+      <Icon iconName="UnsupportedBrowserWarning"></Icon>
+      <Text styles={mainTextStyles}>{strings.primaryText}</Text>
+      <Text styles={secondaryTextStyles}>{strings.secondaryText}</Text>
+      <Link
+        styles={linkTextStyles}
+        onClick={() => {
+          onTroubleShootingClick();
+        }}
+      >
+        {strings.moreHelpLink}
+      </Link>
+    </Stack>
+  );
+};
+
+/**
+ *
+ * @internal
+ */
+export const _UnsupportedBrowser = (props: _UnsupportedBrowserProps): JSX.Element => {
+  console.log('test1');
+  /* @conditional-compile-remove(call-readiness) */
+  const strings = useLocale().strings.UnsupportedBrowser;
+  return <_UnsupportedBrowserContainer {...props} strings={strings} />;
+};

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

@@ -137,3 +137,8 @@ export type { HoldButtonProps, HoldButtonStrings } from './HoldButton';
 
 export { _LocalVideoTile } from './LocalVideoTile';
 export { _RemoteVideoTile } from './RemoteVideoTile';
+
+/* @conditional-compile-remove(call-readiness) */
+export { _UnsupportedBrowser } from './UnsupportedBrowser';
+/* @conditional-compile-remove(call-readiness) */
+export type { UnsupportedBrowserStrings, _UnsupportedBrowserProps } from './UnsupportedBrowser';

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

@@ -0,0 +1,50 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import { ILinkStyles, IStackStyles, ITextStyles } from '@fluentui/react';
+import { _pxToRem } from '@internal/acs-ui-common';
+
+/**
+ * @internal
+ */
+export const mainTextStyles: ITextStyles = {
+  root: {
+    fontWeight: 600,
+    fontSize: _pxToRem(20),
+    lineHeight: _pxToRem(28),
+    paddingBottom: '1rem',
+    margin: 'auto'
+  }
+};
+
+/**
+ * @internal
+ */
+export const secondaryTextStyles: ITextStyles = {
+  root: {
+    margin: 'auto',
+    fontWeight: 400,
+    paddingBottom: '0.5rem'
+  }
+};
+
+/**
+ * @internal
+ */
+export const linkTextStyles: ILinkStyles = {
+  root: {
+    margin: 'auto',
+    fontWeight: 600,
+    textAlign: 'inherit'
+  }
+};
+
+/**
+ * @internal
+ */
+export const containerStyles: IStackStyles = {
+  root: {
+    padding: '2rem',
+    maxWidth: '25.374rem'
+  }
+};

packages/react-components/src/localization/LocalizationProvider.tsx

@@ -21,6 +21,8 @@ import {
 import { HoldButtonStrings } from '../components';
 /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */
 import { DialpadStrings } from '../components';
+/* @conditional-compile-remove(call-readiness) */
+import { UnsupportedBrowserStrings } from '../components/UnsupportedBrowser';
 /* @conditional-compile-remove(one-to-n-calling) */
 // @conditional-compile-remove(PSTN-calls)
 import { VideoTileStrings } from '../components/VideoTile';
@@ -84,6 +86,9 @@ export interface ComponentStrings {
   /* @conditional-compile-remove(one-to-n-calling) */ /* @condtional-compile-remove(one-to-n-calling) */
   /** Strings for HoldButton */
   holdButton: HoldButtonStrings;
+  /* @conditional-compile-remove(call-readiness) */
+  /** Strings for unsupported browser UI */
+  UnsupportedBrowser: UnsupportedBrowserStrings;
 }
 
 /**

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

@@ -183,5 +183,10 @@
     "participantStateConnecting": "Calling...",
     "participantStateRinging": "Calling...",
     "participantStateHold": "On hold"
+  },
+  "UnsupportedBrowser": {
+    "primaryText": "Browser not supported",
+    "secondaryText": "Please join this call using a compatible browser.",
+    "moreHelpLink": "More help?"
   }
 }

packages/react-components/src/theming/icons.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-import { mergeStyles } from '@fluentui/react';
+import { IStyle, mergeStyles, Stack, Theme } from '@fluentui/react';
 import {
   ArrowClockwise16Regular,
   CallEnd20Filled,
@@ -49,7 +49,13 @@ import { ArrowDownload16Regular } from '@fluentui/react-icons';
 /* @conditional-compile-remove(PSTN-calls) */
 import { CallPause20Regular, CallPause20Filled, Play20Regular, People20Regular } from '@fluentui/react-icons';
 
+/* @conditional-compile-remove(call-readiness) */
+import { Warning20Filled } from '@fluentui/react-icons';
+import { _pxToRem } from '@internal/acs-ui-common';
+
 import React from 'react';
+/* @conditional-compile-remove(call-readiness) */
+import { useTheme } from './FluentThemeProvider';
 
 /**
  * Icons used by the React components exported from this library.
@@ -76,6 +82,28 @@ const MoreHorizontal18Regular = (): JSX.Element => (
   </div>
 );
 
+const UnsupportedBrowserWarning = (): JSX.Element => {
+  const theme = useTheme();
+  return (
+    <Stack
+      horizontalAlign={'center'}
+      styles={{
+        root: {
+          width: _pxToRem(92),
+          borderRadius: '100%',
+          background: theme.palette.themeLighterAlt,
+          padding: '2rem',
+          margin: 'auto'
+        }
+      }}
+    >
+      <div className={mergeStyles(scaledIconStyles(theme))}>
+        <Warning20Filled />
+      </div>
+    </Stack>
+  );
+};
+
 /**
  * The default set of icons that are available to use in the UI components.
  *
@@ -142,5 +170,18 @@ export const DEFAULT_COMPONENT_ICONS = {
   SendBoxSendHovered: <Send20Filled />,
   VideoTileMicOff: <MicOff16Filled />,
   /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */
-  BackSpace: <Backspace20Regular />
+  BackSpace: <Backspace20Regular />,
+  /* @conditional-compile-remove(call-readiness) */
+  UnsupportedBrowserWarning: <UnsupportedBrowserWarning />
+};
+
+const scaledIconStyles = (theme: Theme): IStyle => {
+  return {
+    transform: 'scale(2)',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    color: theme.palette.themePrimary,
+    zIndex: 1
+  };
 };

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

@@ -1036,6 +1036,7 @@ export const DEFAULT_COMPOSITE_ICONS: {
     HoldCallButton: JSX.Element;
     ResumeCall: JSX.Element;
     BackSpace: JSX.Element;
+    UnsupportedBrowserWarning: JSX.Element;
 };
 
 // @public

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

@@ -0,0 +1,20 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import React from 'react';
+
+/**
+ * @internal
+ */
+export type UnsupportedBrowserProps = {
+  onTroubleshootingClick: () => void;
+  // strings type from new component...
+};
+
+/**
+ *
+ * @internal
+ */
+export const UnsupportedBrowser = (props: UnsupportedBrowserProps): JSX.Element => {
+  return <></>;
+};