[Call Readiness] Allow unsupported browser version users to join a call

change-beta/@azure-communication-react-2665eb71-b1de-40e0-9435-48114f9e49f3.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Introduce unsupported browser version ability to let old browser into call in composites",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-2665eb71-b1de-40e0-9435-48114f9e49f3.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Introduce unsupported browser version ability to let old browser into call in composites",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -271,6 +271,7 @@ export interface CallAdapterCallOperations {
     addParticipant(participant: PhoneNumberIdentifier, options?: AddPhoneNumberOptions): Promise<void>;
     // (undocumented)
     addParticipant(participant: CommunicationUserIdentifier): Promise<void>;
+    allowUnsupportedBrowserVersion(): void;
     createStreamView(remoteUserId?: string, options?: VideoStreamOptions): Promise<void | CreateVideoStreamViewResult>;
     disposeStreamView(remoteUserId?: string, options?: VideoStreamOptions): Promise<void>;
     // @beta
@@ -322,7 +323,7 @@ export type CallAdapterLocator = TeamsMeetingLinkLocator | GroupCallLocator | /*
 
 // @beta
 export type CallAdapterOptionalFeatures = {
-    unsupportedEnvironment?: boolean;
+    unsupportedEnvironment?: boolean | UnsupportedEnvironmentFeatures;
 };
 
 // @public
@@ -360,6 +361,7 @@ export interface CallAdapterSubscribers {
 export type CallAdapterUiState = {
     isLocalPreviewMicrophoneEnabled: boolean;
     page: CallCompositePage;
+    unsupportedBrowserVersionsAllowed?: boolean;
 };
 
 // @public
@@ -729,6 +731,7 @@ export interface CallWithChatAdapterManagement {
     addParticipant(participant: PhoneNumberIdentifier, options?: AddPhoneNumberOptions): Promise<void>;
     // (undocumented)
     addParticipant(participant: CommunicationUserIdentifier): Promise<void>;
+    allowUnsupportedBrowserVersion(): void;
     askDevicePermission(constrain: PermissionConstraints): Promise<void>;
     // @beta (undocumented)
     cancelFileUpload: (id: string) => void;
@@ -863,6 +866,8 @@ export interface CallWithChatAdapterUiState {
     fileUploads?: FileUploadsUiState;
     isLocalPreviewMicrophoneEnabled: boolean;
     page: CallCompositePage;
+    // @beta
+    unsupportedBrowserVersionsAllowed?: boolean;
 }
 
 // @public
@@ -3094,17 +3099,24 @@ export const UnsupportedBrowserVersion: (props: UnsupportedBrowserVersionProps)
 
 // @beta
 export interface UnsupportedBrowserVersionProps {
+    onContinueClick?: () => void;
     onTroubleshootingClick?: () => void;
-    strings: UnsupportedBrowserVersionStrings;
+    strings?: UnsupportedBrowserVersionStrings;
 }
 
 // @beta
 export interface UnsupportedBrowserVersionStrings {
+    continueAnywayButtonText?: string;
     moreHelpLinkText: string;
     primaryText: string;
     secondaryText: string;
 }
 
+// @beta
+export type UnsupportedEnvironmentFeatures = {
+    unsupportedBrowserVersionAllowed?: boolean;
+};
+
 // @beta
 export const UnsupportedOperatingSystem: (props: UnsupportedOperatingSystemProps) => JSX.Element;
 

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

@@ -1584,12 +1584,14 @@ export const UnsupportedBrowserVersion: (props: UnsupportedBrowserVersionProps)
 
 // @beta
 export interface UnsupportedBrowserVersionProps {
+    onContinueClick?: () => void;
     onTroubleshootingClick?: () => void;
-    strings: UnsupportedBrowserVersionStrings;
+    strings?: UnsupportedBrowserVersionStrings;
 }
 
 // @beta
 export interface UnsupportedBrowserVersionStrings {
+    continueAnywayButtonText?: string;
     moreHelpLinkText: string;
     primaryText: string;
     secondaryText: string;

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

@@ -1345,12 +1345,14 @@ export const UnsupportedBrowserVersion: (props: UnsupportedBrowserVersionProps)
 
 // @beta
 export interface UnsupportedBrowserVersionProps {
+    onContinueClick?: () => void;
     onTroubleshootingClick?: () => void;
-    strings: UnsupportedBrowserVersionStrings;
+    strings?: UnsupportedBrowserVersionStrings;
 }
 
 // @beta
 export interface UnsupportedBrowserVersionStrings {
+    continueAnywayButtonText?: string;
     moreHelpLinkText: string;
     primaryText: string;
     secondaryText: string;

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

@@ -17,6 +17,8 @@ export interface UnsupportedBrowserVersionStrings {
   secondaryText: string;
   /** String to display in the text for the help link */
   moreHelpLinkText: string;
+  /** String for continue without updating button */
+  continueAnywayButtonText?: string;
 }
 
 /**
@@ -28,7 +30,9 @@ export interface UnsupportedBrowserVersionProps {
   /** Handler to perform an action when the help link is actioned */
   onTroubleshootingClick?: () => void;
   /** String overrides for the component */
-  strings: UnsupportedBrowserVersionStrings;
+  strings?: UnsupportedBrowserVersionStrings;
+  /** Handler to allow user to continue into the call */
+  onContinueClick?: () => void;
 }
 
 /**
@@ -38,6 +42,12 @@ export interface UnsupportedBrowserVersionProps {
  * @beta
  */
 export const UnsupportedBrowserVersion = (props: UnsupportedBrowserVersionProps): JSX.Element => {
-  const { onTroubleshootingClick, strings } = props;
-  return <UnsupportedEnvironment onTroubleshootingClick={onTroubleshootingClick} strings={strings} />;
+  const { onTroubleshootingClick, strings, onContinueClick } = props;
+  return (
+    <UnsupportedEnvironment
+      onTroubleshootingClick={onTroubleshootingClick}
+      strings={strings}
+      onContinueClick={onContinueClick}
+    />
+  );
 };

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

@@ -2,17 +2,21 @@
 // Licensed under the MIT license.
 
 /* @conditional-compile-remove(unsupported-browser) */
-import { Icon, Link, Stack, Text } from '@fluentui/react';
+import { DefaultButton, 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 { useTheme } from '../theming';
+/* @conditional-compile-remove(unsupported-browser) */
 import {
   containerStyles,
+  continueAnywayButtonStyles,
   iconStyles,
   linkTextStyles,
   mainTextStyles,
-  secondaryTextStyles
+  secondaryTextStyles,
+  testContainerStyles
 } from './styles/UnsupportedEnvironment.styles';
 
 /**
@@ -25,6 +29,8 @@ export interface UnsupportedEnvironmentStrings {
   secondaryText: string;
   /** String to display in the text for the help link */
   moreHelpLinkText: string;
+  /** String for continue anyway button */
+  continueAnywayButtonText?: string;
 }
 
 /**
@@ -33,35 +39,46 @@ export interface UnsupportedEnvironmentStrings {
  * @private
  */
 export interface UnsupportedEnvironmentProps {
-  /** Handler to perform a action when the help link is actioned */
+  /**
+   * Handler to perform a action when the help link is actioned
+   */
   onTroubleshootingClick?: () => void;
-  /** String overrides for the component */
-  strings: UnsupportedEnvironmentStrings;
+  /**
+   * String overrides for the component
+   */
+  strings?: UnsupportedEnvironmentStrings;
+  /**
+   * CallBack for the continue anyay button. Use this as a mechanism to allow users into
+   * a call with a unsupported browser version.
+   */
+  onContinueClick?: () => void;
 }
 
 /* @conditional-compile-remove(unsupported-browser) */
 const UnsupportedEnvironmentContainer = (props: UnsupportedEnvironmentProps): JSX.Element => {
-  const { onTroubleshootingClick, strings } = props;
+  const { onTroubleshootingClick, strings, onContinueClick } = props;
+  const theme = useTheme();
   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>
+      <Stack styles={testContainerStyles}>
+        <Text styles={mainTextStyles}>{strings?.primaryText}</Text>
+        <Text styles={secondaryTextStyles}>{strings?.secondaryText}</Text>
+      </Stack>
       {onTroubleshootingClick && (
-        <Link
-          styles={linkTextStyles}
-          onClick={() => {
-            onTroubleshootingClick();
-          }}
-          data-ui-id="unsupported-environment-link"
-        >
-          {strings.moreHelpLinkText}
+        <Link styles={linkTextStyles} onClick={onTroubleshootingClick} data-ui-id="unsupported-environment-link">
+          {strings?.moreHelpLinkText}
         </Link>
       )}
+      {onContinueClick && (
+        <DefaultButton styles={continueAnywayButtonStyles(theme)} onClick={onContinueClick}>
+          {strings?.continueAnywayButtonText}
+        </DefaultButton>
+      )}
     </Stack>
   );
 };

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

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-import { IIconStyles, ILinkStyles, IStackStyles, ITextStyles } from '@fluentui/react';
+import { IButtonStyles, IIconStyles, ILinkStyles, IStackStyles, ITextStyles, Theme } from '@fluentui/react';
 import { _pxToRem } from '@internal/acs-ui-common';
 
 /**
@@ -12,9 +12,9 @@ export const mainTextStyles: ITextStyles = {
     fontWeight: 600,
     fontSize: _pxToRem(20),
     lineHeight: _pxToRem(28),
-    paddingBottom: '1rem',
     margin: 'auto',
-    textAlign: 'center'
+    textAlign: 'center',
+    padding: '0.5rem'
   }
 };
 
@@ -25,19 +25,29 @@ export const secondaryTextStyles: ITextStyles = {
   root: {
     margin: 'auto',
     fontWeight: 400,
-    paddingBottom: '0.5rem',
     textAlign: 'center'
   }
 };
 
+/**
+ * @internal
+ */
+export const testContainerStyles: IStackStyles = {
+  root: {
+    padding: '1rem',
+    margin: 'auto'
+  }
+};
+
 /**
  * @internal
  */
 export const linkTextStyles: ILinkStyles = {
   root: {
     margin: 'auto',
     fontWeight: 600,
-    textAlign: 'center'
+    textAlign: 'center',
+    padding: '1rem'
   }
 };
 
@@ -46,7 +56,8 @@ export const linkTextStyles: ILinkStyles = {
  */
 export const containerStyles: IStackStyles = {
   root: {
-    padding: '2rem'
+    padding: '2rem',
+    maxWidth: _pxToRem(375)
   }
 };
 
@@ -58,3 +69,18 @@ export const iconStyles: IIconStyles = {
     paddingBottom: '1rem'
   }
 };
+
+/**
+ * @internal
+ */
+export const continueAnywayButtonStyles = (theme: Theme): IButtonStyles => {
+  return {
+    root: {
+      backgroundColor: '#C4314B',
+      margin: '1rem',
+      borderColor: theme.palette.neutralLight,
+      padding: '1rem',
+      color: theme.palette.white
+    }
+  };
+};

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

@@ -252,9 +252,10 @@
     "moreHelpLinkText": "See compatibility requirements"
   },
   "UnsupportedBrowserVersion": {
-    "primaryText": "Browser version not supported",
-    "secondaryText": "Please update your browser and then try joining the call again.",
-    "moreHelpLinkText": "See compatibility requirements"
+    "primaryText": "Browser update needed",
+    "secondaryText": "To ensure the best call possible, please update your browser and then try joining the call again.",
+    "moreHelpLinkText": "See compatibility requirements",
+    "continueAnywayButtonText": "Start call without updating"
   },
   "UnsupportedOperatingSystem": {
     "primaryText": "Operating system not supported",

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

@@ -169,6 +169,7 @@ export interface CallAdapterCallOperations {
     addParticipant(participant: PhoneNumberIdentifier, options?: AddPhoneNumberOptions): Promise<void>;
     // (undocumented)
     addParticipant(participant: CommunicationUserIdentifier): Promise<void>;
+    allowUnsupportedBrowserVersion(): void;
     createStreamView(remoteUserId?: string, options?: VideoStreamOptions): Promise<void | CreateVideoStreamViewResult>;
     disposeStreamView(remoteUserId?: string, options?: VideoStreamOptions): Promise<void>;
     // @beta
@@ -220,7 +221,7 @@ export type CallAdapterLocator = TeamsMeetingLinkLocator | GroupCallLocator | /*
 
 // @beta
 export type CallAdapterOptionalFeatures = {
-    unsupportedEnvironment?: boolean;
+    unsupportedEnvironment?: boolean | UnsupportedEnvironmentFeatures;
 };
 
 // @public
@@ -258,6 +259,7 @@ export interface CallAdapterSubscribers {
 export type CallAdapterUiState = {
     isLocalPreviewMicrophoneEnabled: boolean;
     page: CallCompositePage;
+    unsupportedBrowserVersionsAllowed?: boolean;
 };
 
 // @public
@@ -485,6 +487,7 @@ export interface CallWithChatAdapterManagement {
     addParticipant(participant: PhoneNumberIdentifier, options?: AddPhoneNumberOptions): Promise<void>;
     // (undocumented)
     addParticipant(participant: CommunicationUserIdentifier): Promise<void>;
+    allowUnsupportedBrowserVersion(): void;
     askDevicePermission(constrain: PermissionConstraints): Promise<void>;
     // @beta (undocumented)
     cancelFileUpload: (id: string) => void;
@@ -619,6 +622,8 @@ export interface CallWithChatAdapterUiState {
     fileUploads?: FileUploadsUiState;
     isLocalPreviewMicrophoneEnabled: boolean;
     page: CallCompositePage;
+    // @beta
+    unsupportedBrowserVersionsAllowed?: boolean;
 }
 
 // @public
@@ -1278,6 +1283,11 @@ export type TopicChangedListener = (event: {
     topic: string;
 }) => void;
 
+// @beta
+export type UnsupportedEnvironmentFeatures = {
+    unsupportedBrowserVersionAllowed?: boolean;
+};
+
 // @public
 export const useAzureCommunicationCallAdapter: (args: Partial<AzureCommunicationCallAdapterArgs>, afterCreate?: ((adapter: CallAdapter) => Promise<CallAdapter>) | undefined, beforeDispose?: ((adapter: CallAdapter) => Promise<void>) | undefined) => CallAdapter | undefined;