RTT disclosure banner should be a private component (#5527)

* RTT disclosure banner

* Change files

---------

Signed-off-by: carocao-msft <[email protected]>

Author: carocao-msft

change-beta/@azure-communication-react-67208b90-93d8-44b7-8165-4fb34611474d.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "feature",
+  "workstream": "Real time text",
+  "comment": "RTT disclosure banner should be a private component",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -980,6 +980,9 @@ export interface CallCompositeStrings {
     pinParticipantMenuItemAriaLabel: string;
     pinParticipantMenuLabel: string;
     privacyPolicy: string;
+    realTimeTextBannerContent?: string;
+    realTimeTextBannerLinkLabel?: string;
+    realTimeTextBannerTitle?: string;
     realTimeTextInputBoxDefaultText?: string;
     realTimeTextLabel?: string;
     rejoinCallButtonLabel: string;
@@ -1891,6 +1894,9 @@ export type CaptionsBannerSelector = (state: CallClientState, props: CallingBase
 // @public
 export interface CaptionsBannerStrings {
     captionsBannerSpinnerText?: string;
+    realTimeTextBannerContent?: string;
+    realTimeTextBannerLinkLabel?: string;
+    realTimeTextBannerTitle?: string;
     realTimeTextInputBoxDefaultText?: string;
 }
 
@@ -2585,7 +2591,6 @@ export interface ComponentStrings {
     realTimeText: RealTimeTextStrings;
     realTimeTextModal: RealTimeTextModalStrings;
     richTextSendBox: RichTextSendBoxStrings;
-    rttDisclosureBanner: RTTDisclosureBannerStrings;
     screenShareButton: ScreenShareButtonStrings;
     sendBox: SendBoxStrings;
     spokenLanguages: SpokenLanguageStrings;
@@ -4738,25 +4743,6 @@ export interface RichTextStrings {
     richTextUnderlineTooltip: string;
 }
 
-// @beta
-export const RTTDisclosureBanner: (props: RTTDisclosureBannerProps) => JSX.Element;
-
-// @beta
-export interface RTTDisclosureBannerProps {
-    onClickLink?: () => void;
-    strings?: RTTDisclosureBannerStrings;
-}
-
-// @beta
-export interface RTTDisclosureBannerStrings {
-    // (undocumented)
-    bannerContent: string;
-    // (undocumented)
-    bannerLinkLabel?: string;
-    // (undocumented)
-    bannerTitle: string;
-}
-
 // @public
 export const ScreenShareButton: (props: ScreenShareButtonProps) => JSX.Element;
 

packages/communication-react/src/index.ts

@@ -457,11 +457,6 @@ export type { MeetingConferencePhoneInfoModalStrings } from '../../react-compone
 export type { RealTimeTextModalStrings, RealTimeTextModalProps } from '../../react-components/src';
 /* @conditional-compile-remove(rtt) */
 export { RealTimeTextModal } from '../../react-components/src';
-
-/* @conditional-compile-remove(rtt) */
-export type { RTTDisclosureBannerProps, RTTDisclosureBannerStrings } from '../../react-components/src';
-/* @conditional-compile-remove(rtt) */
-export { RTTDisclosureBanner } from '../../react-components/src';
 /* @conditional-compile-remove(rtt) */
 export type { RealTimeTextProps, RealTimeTextStrings } from '../../react-components/src/components/RealTimeText';
 /* @conditional-compile-remove(rtt) */

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

@@ -18,7 +18,7 @@ import { useLocale } from '../localization';
 /* @conditional-compile-remove(rtt) */
 import { RealTimeText } from './RealTimeText';
 /* @conditional-compile-remove(rtt) */
-import { RTTDisclosureBanner } from './RTTDisclosureBanner';
+import { _RTTDisclosureBanner } from './RTTDisclosureBanner';
 
 /**
  * @public
@@ -72,6 +72,21 @@ export interface CaptionsBannerStrings {
    * Default text for RTT input text box
    */
   realTimeTextInputBoxDefaultText?: string;
+  /* @conditional-compile-remove(rtt) */
+  /**
+   * Real time text disclosure banner title
+   */
+  realTimeTextBannerTitle?: string;
+  /* @conditional-compile-remove(rtt) */
+  /**
+   * Real time text disclosure banner content
+   */
+  realTimeTextBannerContent?: string;
+  /* @conditional-compile-remove(rtt) */
+  /**
+   * Real time text disclosure banner link label
+   */
+  realTimeTextBannerLinkLabel?: string;
 }
 
 /**
@@ -210,11 +225,22 @@ export const CaptionsBanner = (props: CaptionsBannerProps): JSX.Element => {
     }
   };
 
+  /* @conditional-compile-remove(rtt) */
+  const realTimeTextDisclosureBannerStrings = {
+    bannerTitle: strings.realTimeTextBannerTitle ?? '',
+    bannerContent: strings.realTimeTextBannerContent ?? '',
+    bannerLinkLabel: strings.realTimeTextBannerLinkLabel ?? ''
+  };
+
   return (
     <>
       {(startCaptionsInProgress || /* @conditional-compile-remove(rtt) */ isRealTimeTextOn) && (
         <FocusZone shouldFocusOnMount className={captionsContainerClassName} data-ui-id="captions-banner">
-          {/* @conditional-compile-remove(rtt) */ isRealTimeTextOn && <RTTDisclosureBanner />}
+          {
+            /* @conditional-compile-remove(rtt) */ isRealTimeTextOn && (
+              <_RTTDisclosureBanner strings={realTimeTextDisclosureBannerStrings} />
+            )
+          }
           {(isCaptionsOn || /* @conditional-compile-remove(rtt) */ isRealTimeTextOn) && (
             <ul
               ref={captionsScrollDivRef}

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

@@ -4,8 +4,6 @@
 /* @conditional-compile-remove(rtt) */
 import React from 'react';
 /* @conditional-compile-remove(rtt) */
-import { useLocale } from '../localization';
-/* @conditional-compile-remove(rtt) */
 import { Notification } from './Notification';
 /* @conditional-compile-remove(rtt) */
 import { useTheme } from '@fluentui/react';
@@ -14,45 +12,44 @@ import { rttContainerStyles, rttIconStyles } from './styles/RTTDisclosureBanner.
 
 /* @conditional-compile-remove(rtt) */
 /**
- * @beta
+ * @private
  * strings for rtt modal
  */
-export interface RTTDisclosureBannerStrings {
+export interface _RTTDisclosureBannerStrings {
   bannerTitle: string;
   bannerContent: string;
   bannerLinkLabel?: string;
 }
 
 /* @conditional-compile-remove(rtt) */
 /**
- * @beta
+ * @private
  * Props for RTT Banner
  */
-export interface RTTDisclosureBannerProps {
+export interface _RTTDisclosureBannerProps {
   /**
    * Optional callback to supply users with further troubleshooting steps or more information for the Real Time Text feature.
    */
   onClickLink?: () => void;
   /** RTT Banner strings */
-  strings?: RTTDisclosureBannerStrings;
+  strings?: _RTTDisclosureBannerStrings;
 }
 
 /* @conditional-compile-remove(rtt) */
 /**
- * @beta
+ * @private
  * Banner to disclose that RTT is enabled for all participants for the entire duration of the meeting.
  */
-export const RTTDisclosureBanner = (props: RTTDisclosureBannerProps): JSX.Element => {
-  const localeStrings = useLocale().strings.rttDisclosureBanner;
-  const strings = { ...localeStrings, ...props.strings };
+export const _RTTDisclosureBanner = (props: _RTTDisclosureBannerProps): JSX.Element => {
+  const strings = props.strings;
   const theme = useTheme();
 
   return (
     <Notification
       notificationStrings={{
-        title: strings.bannerTitle,
-        message: strings.bannerContent,
-        linkLabel: strings.bannerLinkLabel
+        title: strings?.bannerTitle ?? '',
+        message: strings?.bannerContent,
+        linkLabel: strings?.bannerLinkLabel
       }}
       notificationIconProps={{
         iconName: 'RealTimeTextIcon',

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

@@ -50,8 +50,6 @@ import { RichTextSendBoxStrings } from '../components/RichTextEditor/RichTextSen
 import { MeetingConferencePhoneInfoModalStrings } from '../components/MeetingConferencePhoneInfo';
 import { IncomingCallNotificationStrings } from '../components/IncomingCallNotification';
 /* @conditional-compile-remove(rtt) */
-import { RTTDisclosureBannerStrings } from '../components/RTTDisclosureBanner';
-/* @conditional-compile-remove(rtt) */
 import { RealTimeTextModalStrings } from '../components/RealTimeTextModal';
 /* @conditional-compile-remove(rtt) */
 import { RealTimeTextStrings } from '../components/RealTimeText';
@@ -192,9 +190,6 @@ export interface ComponentStrings {
   meetingConferencePhoneInfo: MeetingConferencePhoneInfoModalStrings;
   IncomingCallNotification: IncomingCallNotificationStrings;
   /* @conditional-compile-remove(rtt) */
-  /** Strings for the RTT Disclosure Banner */
-  rttDisclosureBanner: RTTDisclosureBannerStrings;
-  /* @conditional-compile-remove(rtt) */
   /** Strings for the RealTimeTextModal */
   realTimeTextModal: RealTimeTextModalStrings;
   /* @conditional-compile-remove(rtt) */

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

@@ -79,7 +79,10 @@
   },
   "captionsBanner": {
     "captionsBannerSpinnerText": "Starting captions...",
-    "realTimeTextInputBoxDefaultText": "Type message in real time"
+    "realTimeTextInputBoxDefaultText": "Type message in real time",
+    "realTimeTextBannerTitle": "RTT",
+    "realTimeTextBannerContent": "RTT (real-time text) is enabled for all participants for the entire duration of the meeting.",
+    "realTimeTextBannerLinkLabel": "Learn more"
   },
   "mentionPopover": {
     "mentionPopoverHeader": "Suggestions"
@@ -826,10 +829,5 @@
     "incomingCallNotificationRejectButtonLabel": "Decline",
     "incomingCallNotificationAccceptWithVideoButtonLabel": "Accept with Video",
     "incomingCallNotificationDismissButtonAriaLabel": "Dismiss"
-  },
-  "rttDisclosureBanner": {
-    "bannerTitle": "RTT",
-    "bannerContent": "RTT (real-time text) is enabled for all participants for the entire duration of the meeting.",
-    "bannerLinkLabel": "Learn more"
   }
 }

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

@@ -564,6 +564,21 @@ export interface CallCompositeStrings {
    * Default text for RTT input text box
    */
   realTimeTextInputBoxDefaultText?: string;
+  /* @conditional-compile-remove(rtt) */
+  /**
+   * Text to show in the real time text disclosure banner
+   */
+  realTimeTextBannerContent?: string;
+  /* @conditional-compile-remove(rtt) */
+  /**
+   * Title text of the real time text disclosure banner
+   */
+  realTimeTextBannerTitle?: string;
+  /* @conditional-compile-remove(rtt) */
+  /**
+   * Label for the link in the real time text disclosure banner
+   */
+  realTimeTextBannerLinkLabel?: string;
   /**
    * transfer page text when showing the transferor who initiated the transfer
    */

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

@@ -58,7 +58,13 @@ export const CallingCaptionsBanner = (props: {
   const captionsBannerStrings: CaptionsBannerStrings = {
     captionsBannerSpinnerText: strings.captionsBannerSpinnerText,
     /* @conditional-compile-remove(rtt) */
-    realTimeTextInputBoxDefaultText: strings.realTimeTextInputBoxDefaultText
+    realTimeTextInputBoxDefaultText: strings.realTimeTextInputBoxDefaultText,
+    /* @conditional-compile-remove(rtt) */
+    realTimeTextBannerContent: strings.realTimeTextBannerContent,
+    /* @conditional-compile-remove(rtt) */
+    realTimeTextBannerTitle: strings.realTimeTextBannerTitle,
+    /* @conditional-compile-remove(rtt) */
+    realTimeTextBannerLinkLabel: strings.realTimeTextBannerLinkLabel
   };
 
   const onRenderAvatar = useCallback(

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

@@ -219,6 +219,9 @@
     },
     "captionsBannerSpinnerText": "Starting captions...",
     "realTimeTextInputBoxDefaultText": "Type message in real-time",
+    "realTimeTextBannerTitle": "RTT",
+    "realTimeTextBannerContent": "RTT (real-time text) is enabled for all participants for the entire duration of the meeting.",
+    "realTimeTextBannerLinkLabel": "Learn more",
     "transferPageTransferorText": "Transferring...",
     "transferPageTransferTargetText": "Connecting...",
     "transferPageUnknownTransferorDisplayName": "Unknown",