agora-appbuilder-core 4.0.0-beta.56 → 4.0.0-beta.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.0.0-beta.56",
+  "version": "4.0.0-beta.57",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [

package/template/customization-api/types.ts

@@ -1,5 +1,8 @@
 //audio/video toggle state
-export {ToggleState} from '../agora-rn-uikit/src/Contexts/PropsContext';
+export {
+  ToggleState,
+  ClientRole,
+} from '../agora-rn-uikit/src/Contexts/PropsContext';
 export type {
   ContentInterface,
   ContentStateInterface,

package/template/src/atoms/ClipboardIconButton.tsx

@@ -8,6 +8,8 @@ import Spacer from './Spacer';
 import ImageIcon from './ImageIcon';
 import Tooltip from './Tooltip';
 import ThemeConfig from '../theme';
+import {shareRoomCopyBtnTooltipText} from '../language/default-labels/shareLinkScreenLabels';
+import {useString} from '../utils/useString';
 
 interface Props {
   text: SHARE_LINK_CONTENT_TYPE;
@@ -17,7 +19,7 @@ interface Props {
 
 const ClipboardIconButton = (props: Props) => {
   const {copyShareLinkToClipboard} = useShareLink();
-
+  const copiedToClipboard = useString(shareRoomCopyBtnTooltipText)();
   const {text, variant = 'primary', size = 26} = props;
 
   const getTintColor = () => {
@@ -43,7 +45,7 @@ const ClipboardIconButton = (props: Props) => {
             <Spacer size={8} horizontal={true} />
           </>
         }
-        toolTipMessage="Copied to clipboard"
+        toolTipMessage={copiedToClipboard}
         renderContent={(isToolTipVisible, setToolTipVisible) => {
           return (
             <TouchableOpacity

package/template/src/components/Controls.tsx

@@ -82,6 +82,21 @@ import LocalEventEmitter, {
 } from '../rtm-events-api/LocalEvents';
 import {useSetRoomInfo} from './room-info/useSetRoomInfo';
 import {useString} from '../utils/useString';
+import {
+  toolbarItemCaptionText,
+  toolbarItemChatText,
+  toolbarItemInviteText,
+  toolbarItemLayoutText,
+  toolbarItemMoreText,
+  toolbarItemNoiseCancellationText,
+  toolbarItemPeopleText,
+  toolbarItemRecordingText,
+  toolbarItemSettingText,
+  toolbarItemShareText,
+  toolbarItemTranscriptText,
+  toolbarItemVitrualBackgroundText,
+  toolbarItemWhiteboardText,
+} from '../language/default-labels/videoCallScreenLabels';
 
 export const useToggleWhiteboard = () => {
   const {
@@ -225,23 +240,19 @@ export const WhiteboardListener = () => {
 };
 
 const MoreButton = () => {
-  const noiseCancellationLabel = useString('noiseCancellation')();
-  const startWhiteboardLabel = useString('startWhiteboard')();
-  const hideWhiteboardLabel = useString('hideWhiteboard')();
-  const showWhiteboardLabel = useString('showWhiteboard')();
-  const hideCaptionLabel = useString('hideCaption')();
-  const showCaptionLabel = useString('showCaption')();
-  const hideTranscriptLabel = useString('hideTranscript')();
-  const showTranscriptLabel = useString('showTranscript')();
-  const settingsLabel = useString('settings')();
-  const screenShareButton = useString<boolean>('screenShareButton');
-  const recordingButton = useString<boolean>('recordingButton');
-  const moreButtonLabel = useString('moreButton')();
-  const virtualBackgroundLabel = useString('virtualBackground')();
-  const chatLabel = useString('chat')();
-  const inviteLabel = useString('invite')();
-  const peopleLabel = useString('people')();
-  const layoutLabel = useString('layout')();
+  const noiseCancellationLabel = useString(toolbarItemNoiseCancellationText)();
+  const whiteboardLabel = useString<boolean>(toolbarItemWhiteboardText);
+  const captionLabel = useString<boolean>(toolbarItemCaptionText);
+  const transcriptLabel = useString<boolean>(toolbarItemTranscriptText);
+  const settingsLabel = useString(toolbarItemSettingText)();
+  const screenShareButton = useString<boolean>(toolbarItemShareText);
+  const recordingButton = useString<boolean>(toolbarItemRecordingText);
+  const moreButtonLabel = useString(toolbarItemMoreText)();
+  const virtualBackgroundLabel = useString(toolbarItemVitrualBackgroundText)();
+  const chatLabel = useString(toolbarItemChatText)();
+  const inviteLabel = useString(toolbarItemInviteText)();
+  const peopleLabel = useString(toolbarItemPeopleText)();
+  const layoutLabel = useString(toolbarItemLayoutText)();
   const {dispatch} = useContext(DispatchContext);
   const {rtcProps} = useContext(PropsContext);
   const {setCustomContent} = useContent();
@@ -425,11 +436,7 @@ const MoreButton = () => {
       icon: 'whiteboard-new',
       iconColor: $config.SECONDARY_ACTION_COLOR,
       textColor: $config.FONT_COLOR,
-      title: whiteboardActive
-        ? hideWhiteboardLabel
-        : whiteboardStartedFirst
-        ? showWhiteboardLabel
-        : startWhiteboardLabel,
+      title: whiteboardLabel(whiteboardActive),
       callback: () => {
         setActionMenuVisible(false);
         toggleWhiteboard(whiteboardActive, true);
@@ -445,7 +452,7 @@ const MoreButton = () => {
       iconColor: $config.SECONDARY_ACTION_COLOR,
       textColor: $config.FONT_COLOR,
       disabled: !($config.ENABLE_STT && (isHost || (!isHost && isSTTActive))),
-      title: `${isCaptionON ? hideCaptionLabel : showCaptionLabel}`,
+      title: captionLabel(isCaptionON),
       callback: () => {
         setActionMenuVisible(false);
         STT_clicked.current = !isCaptionON ? 'caption' : null;
@@ -468,7 +475,7 @@ const MoreButton = () => {
       iconColor: $config.SECONDARY_ACTION_COLOR,
       textColor: $config.FONT_COLOR,
       disabled: !($config.ENABLE_STT && (isHost || (!isHost && isSTTActive))),
-      title: `${isTranscriptON ? hideTranscriptLabel : showTranscriptLabel}`,
+      title: transcriptLabel(isTranscriptON),
       callback: () => {
         setActionMenuVisible(false);
         STT_clicked.current = !isTranscriptON ? 'transcript' : null;

package/template/src/components/Navbar.tsx

@@ -66,6 +66,10 @@ import {useToolbarMenu} from '../utils/useMenu';
 import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
 import {useActionSheet} from '../utils/useActionSheet';
 import {useWaitingRoomContext} from './contexts/WaitingRoomContext';
+import {
+  toolbarItemChatText,
+  toolbarItemPeopleText,
+} from '../language/default-labels/videoCallScreenLabels';
 
 export const ParticipantsCountView = ({
   isMobileView = false,
@@ -73,7 +77,7 @@ export const ParticipantsCountView = ({
   isMobileView?: boolean;
 }) => {
   const {onlineUsersCount} = useContext(ChatContext);
-  const peopleLabel = useString('people')();
+  const peopleLabel = useString(toolbarItemPeopleText)();
   return isMobileView ? (
     <Text>
       {peopleLabel} {'\n'} ({numFormatter(onlineUsersCount)})
@@ -118,9 +122,9 @@ export const ParticipantsIconButton = (props: ParticipantsIconButtonProps) => {
   const {sidePanel, setSidePanel} = useSidePanel();
   const {isPendingRequestToReview, setLastCheckedRequestTimestamp} =
     useContext(LiveStreamContext);
-  //commented for v1 release
+
   const {waitingRoomUids} = useWaitingRoomContext();
-  const participantsLabel = useString('people')();
+  const participantsLabel = useString(toolbarItemPeopleText)();
   const isPanelActive = sidePanel === SidePanelType.Participants;
   const {
     data: {isHost},
@@ -243,8 +247,7 @@ export const ChatIconButton = (props: ChatIconButtonProps) => {
   const {setUnreadGroupMessageCount, totalUnreadCount} = useChatNotification();
   const {setChatType, setPrivateChatUser} = useChatUIControls();
 
-  //commented for v1 release
-  const chatLabel = useString('chat')();
+  const chatLabel = useString(toolbarItemChatText)();
 
   const isPanelActive = sidePanel === SidePanelType.Chat;
 
@@ -506,8 +509,6 @@ export interface NavbarProps {
   includeDefaultItems?: boolean;
 }
 const Navbar = (props: NavbarProps) => {
-  //commented for v1 release
-  //const recordingLabel = useString('recordingLabel')();
   const {customItems = [], includeDefaultItems = true} = props;
   const {width} = useWindowDimensions();
 

package/template/src/components/Precall.tsx

@@ -54,6 +54,10 @@ import Logo from '../components/common/Logo';
 import ImageIcon from '../atoms/ImageIcon';
 import {DeviceSelectProps} from './precall/selectDevice';
 import {useString} from '../utils/useString';
+import {
+  precallYouAreJoiningAsHeading,
+  settingsPanelHeading,
+} from '../language/default-labels/precallScreenLabels';
 
 const JoinRoomInputView = ({isDesktop}) => {
   const {rtcProps} = useContext(PropsContext);
@@ -221,8 +225,8 @@ const JoinRoomButton = () => {
 };
 
 const Precall = () => {
-  const settingsLabel = useString('settings')();
-  const youAreJoiningAs = useString('youAreJoiningAs')();
+  const settingsLabel = useString(settingsPanelHeading)();
+  const youAreJoiningAs = useString(precallYouAreJoiningAsHeading)();
   const {rtcProps} = useContext(PropsContext);
   const {height} = useWindowDimensions();
   // const {isVBActive, setIsVBActive} = useVB();

package/template/src/components/Settings.tsx

@@ -19,6 +19,7 @@ import IconButton, {IconButtonProps} from '../atoms/IconButton';
 import {useToolbarMenu} from '../utils/useMenu';
 import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
 import {useActionSheet} from '../utils/useActionSheet';
+import {toolbarItemSettingText} from '../language/default-labels/videoCallScreenLabels';
 
 export interface SettingsIconButtonProps {
   render?: (onPress: () => void, isPanelActive: boolean) => JSX.Element;
@@ -28,7 +29,7 @@ const Settings = (props: SettingsIconButtonProps) => {
   const {sidePanel, setSidePanel} = useSidePanel();
   const {isToolbarMenuItem} = useToolbarMenu();
   //commented for v1 release
-  const settingsLabel = useString('settings')();
+  const settingsLabel = useString(toolbarItemSettingText)();
 
   const isPanelActive = sidePanel === SidePanelType.Settings;
   const onPress = () => {

package/template/src/components/Share.tsx

@@ -38,8 +38,19 @@ import ThemeConfig from '../theme';
 import Tooltip from '../atoms/Tooltip';
 import IDPLogoutComponent from '../auth/IDPLogoutComponent';
 import Clipboard from '../subComponents/Clipboard';
-
-const isLiveStream = $config.EVENT_MODE;
+import {
+  shareRoomAttendeeLinkLabel,
+  shareRoomAttendeeLinkSubText,
+  shareRoomCopyBtnText,
+  shareRoomCopyBtnTooltipText,
+  shareRoomHostLinkLabel,
+  shareRoomHostLinkSubText,
+  shareRoomPSTNLabel,
+  shareRoomPSTNNumberLabel,
+  shareRoomPSTNPinLabel,
+  shareRoomPSTNSubText,
+  shareRoomStartBtnText,
+} from '../language/default-labels/shareLinkScreenLabels';
 
 export interface CopyMeetingInfoProps {
   showSubLabel?: boolean;
@@ -51,39 +62,30 @@ export const CopyMeetingInfo = (props?: CopyMeetingInfoProps) => {
   } = useRoomInfo();
   const {showSubLabel = true} = props;
 
-  const meetingUrlText = useString('roomLink')();
-  const meetingIdText = useString('roomId')();
-  const hostIdText = useString('hostId')();
-  const attendeeUrlLabel = useString('attendeeLink')();
-  const attendeeIdLabel = useString('attendeeId')();
-  const hostUrlLabel = useString('hostLink')();
-  const pstnLabel = useString('PSTN')();
-  const pstnNumberLabel = useString('number')();
-  const pinLabel = useString('pin')();
-  const copiedToClipboard = useString('copiedToClipboard')();
-  const sharePhoneNumber = useString('sharePhoneNumber')();
-  const shareWithAttendee = useString('shareWithAttendee')();
-  const shareWithCoHost = useString('shareWithCoHost')();
   const isSDK = isSDKCheck();
   const isWebCheck =
     $config.FRONTEND_ENDPOINT || (platform === 'web' && !isSDK);
 
-  const getAttendeeLabel = () =>
-    isWebCheck ? attendeeUrlLabel : attendeeIdLabel;
+  const shareRoomHostLink = useString<any>(shareRoomHostLinkLabel)(isWebCheck);
+  const shareRoomHostLinkSubTextLocal = useString<any>(
+    shareRoomHostLinkSubText,
+  )();
+  const shareRoomAttendeeLink = useString<any>(shareRoomAttendeeLinkLabel)(
+    isWebCheck,
+  );
+  const shareRoomAttendeeLinkSubTextLocal = useString<any>(
+    shareRoomAttendeeLinkSubText,
+  )();
+  const shareRoomPSTN = useString<any>(shareRoomPSTNLabel)();
+  const shareRoomPSTNNumber = useString<any>(shareRoomPSTNNumberLabel)();
+  const shareRoomPSTNPin = useString<any>(shareRoomPSTNPinLabel)();
+  const shareRoomPSTNSubTextLocal = useString<any>(shareRoomPSTNSubText)();
 
-  const getHostLabel = () => {
-    if (isSeparateHostLink) {
-      if (isWebCheck) {
-        return hostUrlLabel;
-      }
-      return hostIdText;
-    } else {
-      if (isWebCheck) {
-        return meetingUrlText;
-      }
-      return meetingIdText;
-    }
-  };
+  const copiedToClipboard = useString(shareRoomCopyBtnTooltipText)();
+
+  const getAttendeeLabel = () => shareRoomAttendeeLink;
+
+  const getHostLabel = () => shareRoomHostLink;
 
   const clipboardIconButton = (type: SHARE_LINK_CONTENT_TYPE) => {
     return (
@@ -151,7 +153,9 @@ export const CopyMeetingInfo = (props?: CopyMeetingInfoProps) => {
           {showSubLabel && (
             <>
               <Spacer size={14} />
-              <Text style={style.helpText}>{shareWithAttendee}</Text>
+              <Text style={style.helpText}>
+                {shareRoomAttendeeLinkSubTextLocal}
+              </Text>
             </>
           )}
           <Spacer size={25} />
@@ -183,7 +187,9 @@ export const CopyMeetingInfo = (props?: CopyMeetingInfoProps) => {
           {showSubLabel && (
             <>
               <Spacer size={14} />
-              <Text style={style.helpText}>{shareWithCoHost}</Text>
+              <Text style={style.helpText}>
+                {shareRoomHostLinkSubTextLocal}
+              </Text>
             </>
           )}
           <Spacer size={25} />
@@ -193,7 +199,7 @@ export const CopyMeetingInfo = (props?: CopyMeetingInfoProps) => {
       )}
       {$config.PSTN && pstn && pstn?.number && pstn?.pin ? (
         <>
-          <Text style={style.urlTitle}>{pstnLabel}</Text>
+          <Text style={style.urlTitle}>{shareRoomPSTN}</Text>
           <Spacer size={11} />
           <View style={style.container}>
             <View style={[style.urlContainer, style.urlPadding]}>
@@ -204,8 +210,8 @@ export const CopyMeetingInfo = (props?: CopyMeetingInfoProps) => {
                     //@ts-ignore
                     isWebCheck ? urlWeb : {opacity: 1},
                   ]}>
-                  {pstnNumberLabel} - {pstn?.number} {' | '} {pinLabel} -{' '}
-                  {pstn?.pin}
+                  {shareRoomPSTNNumber} - {pstn?.number} {' | '}{' '}
+                  {shareRoomPSTNPin} - {pstn?.pin}
                 </Text>
               </View>
             </View>
@@ -215,7 +221,7 @@ export const CopyMeetingInfo = (props?: CopyMeetingInfoProps) => {
           {showSubLabel && (
             <>
               <Spacer size={14} />
-              <Text style={style.helpText}>{sharePhoneNumber}</Text>
+              <Text style={style.helpText}>{shareRoomPSTNSubTextLocal}</Text>
             </>
           )}
           {/* <Spacer size={25} /> */}
@@ -228,7 +234,7 @@ export const CopyMeetingInfo = (props?: CopyMeetingInfoProps) => {
 };
 
 const ClipboardIconButtonURL = ({url}) => {
-  const copiedToClipboard = useString('copiedToClipboard')();
+  const copiedToClipboard = useString(shareRoomCopyBtnTooltipText)();
   return (
     <View style={style.iconContainer}>
       <Tooltip
@@ -329,11 +335,11 @@ const Share = () => {
     data: {roomId, meetingTitle},
   } = useRoomInfo();
 
-  const startRoom = useString('startRoom')();
-  const startStream = useString('startStream')();
+  const shareRoomStartBtnTextLocal = useString<any>(shareRoomStartBtnText)({
+    eventMode: $config.EVENT_MODE,
+  });
 
-  const enterMeetingAfterCreateButton = isLiveStream ? startStream : startRoom;
-  const copyInviteButton = useString('copyInviteButton')();
+  const copyInviteButton = useString(shareRoomCopyBtnText)();
   const history = useHistory();
   const enterMeeting = () => {
     if (roomId?.host) {
@@ -381,7 +387,7 @@ const Share = () => {
               iconName="video-on"
               onPress={() => enterMeeting()}
               containerStyle={isMobileUA() && {width: '100%'}}
-              text={enterMeetingAfterCreateButton.toUpperCase()}
+              text={shareRoomStartBtnTextLocal}
             />
             <Spacer size={16} />
             <LinkButton

package/template/src/components/meeting-info-invite/MeetingInfoLinks.tsx

@@ -17,6 +17,16 @@ import {useRoomInfo} from '../room-info/useRoomInfo';
 import {FontSizes} from '../../theme';
 import MeetingLink from '../../atoms/MeetingLink';
 import {useString} from '../../utils/useString';
+import {
+  shareRoomAttendeeLinkLabel,
+  shareRoomAttendeeLinkSubText,
+  shareRoomHostLinkLabel,
+  shareRoomHostLinkSubText,
+  shareRoomPSTNLabel,
+  shareRoomPSTNNumberLabel,
+  shareRoomPSTNPinLabel,
+  shareRoomPSTNSubText,
+} from '../../language/default-labels/shareLinkScreenLabels';
 
 export interface MeetingInfoBodyProps {
   showHelperText?: boolean;
@@ -30,39 +40,28 @@ export const MeetingInfoLinks = (props?: MeetingInfoBodyProps) => {
   } = useRoomInfo();
   const {getShareLink} = useShareLink();
 
-  const meetingUrlText = useString('roomLink')();
-  const meetingIdText = useString('roomId')();
-  const hostIdText = useString('hostId')();
-  const attendeeUrlLabel = useString('attendeeLink')();
-  const attendeeIdLabel = useString('attendeeId')();
-  const hostUrlLabel = useString('hostLink')();
-  const pstnLabel = useString('PSTN')();
-  const pstnNumberLabel = useString('number')();
-  const pinLabel = useString('pin')();
-  const shareWithAttendeeInfo = useString('shareWithAttendee')();
-  const shareWithCoHostInfo = useString('shareWithCoHost')();
-  const shareWithPhonenumberInfo = useString('sharePhoneNumber')();
-
   const isSDK = isSDKCheck();
   const isWebCheck =
     $config.FRONTEND_ENDPOINT || (platform === 'web' && !isSDK);
 
-  const getAttendeeLabel = () =>
-    isWebCheck ? attendeeUrlLabel : attendeeIdLabel;
+  const shareRoomHostLink = useString<any>(shareRoomHostLinkLabel)(isWebCheck);
+  const shareRoomHostLinkSubTextLocal = useString<any>(
+    shareRoomHostLinkSubText,
+  )();
+  const shareRoomAttendeeLink = useString<any>(shareRoomAttendeeLinkLabel)(
+    isWebCheck,
+  );
+  const shareRoomAttendeeLinkSubTextLocal = useString<any>(
+    shareRoomAttendeeLinkSubText,
+  )();
+  const shareRoomPSTN = useString<any>(shareRoomPSTNLabel)();
+  const shareRoomPSTNNumber = useString<any>(shareRoomPSTNNumberLabel)();
+  const shareRoomPSTNPin = useString<any>(shareRoomPSTNPinLabel)();
+  const shareRoomPSTNSubTextLocal = useString<any>(shareRoomPSTNSubText)();
+
+  const getAttendeeLabel = () => shareRoomAttendeeLink;
 
-  const getHostLabel = () => {
-    if (isSeparateHostLink) {
-      if (isWebCheck) {
-        return hostUrlLabel;
-      }
-      return hostIdText;
-    } else {
-      if (isWebCheck) {
-        return meetingUrlText;
-      }
-      return meetingIdText;
-    }
-  };
+  const getHostLabel = () => shareRoomHostLink;
 
   return (
     <>
@@ -76,7 +75,7 @@ export const MeetingInfoLinks = (props?: MeetingInfoBodyProps) => {
             label={getAttendeeLabel()}
             link={getShareLink(SHARE_LINK_CONTENT_TYPE.ATTENDEE)}
             linkToCopy={SHARE_LINK_CONTENT_TYPE.ATTENDEE}
-            helperText={showHelperText ? shareWithAttendeeInfo : ''}
+            helperText={showHelperText ? shareRoomAttendeeLinkSubTextLocal : ''}
             gutterBottom
           />
         </>
@@ -93,7 +92,7 @@ export const MeetingInfoLinks = (props?: MeetingInfoBodyProps) => {
             label={getHostLabel()}
             link={getShareLink(SHARE_LINK_CONTENT_TYPE.HOST)}
             linkToCopy={SHARE_LINK_CONTENT_TYPE.HOST}
-            helperText={showHelperText ? shareWithCoHostInfo : ''}
+            helperText={showHelperText ? shareRoomHostLinkSubTextLocal : ''}
             gutterBottom
           />
         </>
@@ -107,10 +106,10 @@ export const MeetingInfoLinks = (props?: MeetingInfoBodyProps) => {
               size,
               variant,
             }}
-            label={pstnLabel}
-            link={`${pstnNumberLabel} - ${pstn?.number}  |  ${pinLabel} - ${pstn?.pin}`}
+            label={shareRoomPSTN}
+            link={`${shareRoomPSTNNumber} - ${pstn?.number}  |  ${shareRoomPSTNPin} - ${pstn?.pin}`}
             linkToCopy={SHARE_LINK_CONTENT_TYPE.PSTN}
-            helperText={showHelperText ? shareWithPhonenumberInfo : ''}
+            helperText={showHelperText ? shareRoomPSTNSubTextLocal : ''}
             gutterBottom
           />
         </>

package/template/src/components/precall/PermissionHelper.tsx

@@ -1,30 +1,26 @@
 import {useLocalUserInfo} from 'customization-api';
 import React, {useContext, useEffect, useState} from 'react';
-import {
-  View,
-  Image,
-  Modal,
-  TouchableOpacity,
-  StyleSheet,
-  Text,
-} from 'react-native';
+import {View, Image, TouchableOpacity, StyleSheet, Text} from 'react-native';
 import Popup from '../../atoms/Popup';
 import ThemeConfig from '../../theme';
 //@ts-ignore
 import permissionHelper from '../../assets/permission.png';
 import {DispatchContext, PermissionState} from '../../../agora-rn-uikit';
 import {useString} from '../../utils/useString';
+import {
+  permissionPopupDismissBtnText,
+  permissionPopupHeading,
+  permissionPopupSubHeading,
+} from '../../language/default-labels/precallScreenLabels';
 
 const PermissionHelper = () => {
-  const allowMicPermission = useString('allowMicPermision')();
-  const allowMicAndCameraPermission = useString(
-    'allowMicAndCameraPermission',
-  )();
-  const select = useString('select')();
-  const allow = useString('allow')();
-  const dismiss = useString('dismiss')();
-  const otherToHearYou = useString('otherToHearYou')();
-  const otherToSeeAndHearYou = useString('otherToSeeAndHearYou')();
+  const heading = useString<any>(permissionPopupHeading)({
+    audioRoom: $config.AUDIO_ROOM,
+  });
+  const subheading = useString<any>(permissionPopupSubHeading)({
+    audioRoom: $config.AUDIO_ROOM,
+  });
+  const dismiss = useString(permissionPopupDismissBtnText)();
 
   const {dispatch} = useContext(DispatchContext);
   const {permissionStatus} = useLocalUserInfo();
@@ -89,16 +85,8 @@ const PermissionHelper = () => {
           />
         </View>
         <View style={styles.modalContent}>
-          <Text style={styles.infoMessage1}>
-            {$config.AUDIO_ROOM
-              ? allowMicPermission
-              : allowMicAndCameraPermission}
-          </Text>
-          <Text style={styles.infoMessage2}>
-            {select}
-            <Text style={styles.infoMessage2Highlight}>{allow}</Text>
-            {$config.AUDIO_ROOM ? otherToHearYou : otherToSeeAndHearYou}
-          </Text>
+          <Text style={styles.infoMessage1}>{heading}</Text>
+          <Text style={styles.infoMessage2}>{subheading}</Text>
           <TouchableOpacity
             onPress={() => {
               closePopup();

package/template/src/components/precall/VideoFallback.tsx

@@ -18,10 +18,16 @@ import ImageIcon from '../../atoms/ImageIcon';
 import Spacer from '../../atoms/Spacer';
 import Toast from '../../../react-native-toast-message';
 import {useString} from '../../utils/useString';
+import {
+  permissionPopupErrorToastHeading,
+  permissionPopupErrorToastSubHeading,
+} from '../../language/default-labels/precallScreenLabels';
 
 const VideoFallback = () => {
-  const toastHeading = useString<boolean>('cantFindDeviceToastHeading');
-  const toastSubHeading = useString<boolean>('cantFindDeviceToastSubHeading');
+  const toastHeading = useString<boolean>(permissionPopupErrorToastHeading);
+  const toastSubHeading = useString<boolean>(
+    permissionPopupErrorToastSubHeading,
+  );
 
   const {isCameraAvailable, isMicAvailable} = usePreCall();
   const toastRef = useRef({isShown: false});

package/template/src/components/precall/joinCallBtn.native.tsx

@@ -15,7 +15,10 @@ import PrimaryButton from '../../atoms/PrimaryButton';
 import {usePreCall} from '../../components/precall/usePreCall';
 import {useString} from '../../utils/useString';
 import {ChannelProfile, PropsContext} from '../../../agora-rn-uikit';
-import {JoinRoomButtonTextInterface} from '../../language/default-labels/precallScreenLabels';
+import {
+  PrecallJoinBtnTextInterface,
+  precallJoinBtnText,
+} from '../../language/default-labels/precallScreenLabels';
 import {useRoomInfo} from '../room-info/useRoomInfo';
 import useGetName from '../../utils/useGetName';
 import {useUserPreference} from '../useUserPreference';
@@ -34,10 +37,11 @@ const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
   const username = useGetName();
   const {isJoinDataFetched} = useRoomInfo();
   const joinRoomButton =
-    useString<JoinRoomButtonTextInterface>('joinRoomButton');
+    useString<PrecallJoinBtnTextInterface>(precallJoinBtnText);
   const {saveName} = useUserPreference();
   const [buttonText, setButtonText] = React.useState(
     joinRoomButton({
+      waitingRoom: false,
       ready: isJoinDataFetched,
       role: $config.EVENT_MODE ? rtcProps.role : undefined,
     }),
@@ -46,6 +50,7 @@ const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
     if (rtcProps?.role) {
       setButtonText(
         joinRoomButton({
+          waitingRoom: false,
           ready: isJoinDataFetched,
           role: $config.EVENT_MODE ? rtcProps.role : undefined,
         }),

package/template/src/components/precall/joinCallBtn.tsx

@@ -15,7 +15,10 @@ import PrimaryButton from '../../atoms/PrimaryButton';
 import {usePreCall} from '../../components/precall/usePreCall';
 import {useString} from '../../utils/useString';
 import {ChannelProfile, PropsContext} from '../../../agora-rn-uikit';
-import {JoinRoomButtonTextInterface} from '../../language/default-labels/precallScreenLabels';
+import {
+  PrecallJoinBtnTextInterface,
+  precallJoinBtnText,
+} from '../../language/default-labels/precallScreenLabels';
 import {useRoomInfo} from '../room-info/useRoomInfo';
 import useGetName from '../../utils/useGetName';
 import {useWakeLock} from '../../components/useWakeLock';
@@ -45,10 +48,11 @@ const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
   const {awake, request} = useWakeLock();
   const {saveName} = useUserPreference();
   const joinRoomButton =
-    useString<JoinRoomButtonTextInterface>('joinRoomButton');
+    useString<PrecallJoinBtnTextInterface>(precallJoinBtnText);
 
   const [buttonText, setButtonText] = React.useState(
     joinRoomButton({
+      waitingRoom: false,
       ready: isJoinDataFetched,
       role: $config.EVENT_MODE ? rtcProps.role : undefined,
     }),
@@ -78,6 +82,7 @@ const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
     if (rtcProps?.role) {
       setButtonText(
         joinRoomButton({
+          waitingRoom: false,
           ready: isJoinDataFetched,
           role: $config.EVENT_MODE ? rtcProps.role : undefined,
         }),