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

package/package.json

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

package/template/src/auth/AuthProvider.tsx

@@ -32,6 +32,11 @@ import SDKMethodEventsManager from '../utils/SdkMethodEvents';
 import StorageContext from '../components/StorageContext';
 import UserCancelPopup from './UserCancelPopup';
 import {exitApp} from './openIDPURL';
+import {useString} from '../utils/useString';
+import {
+  authSessionTimeoutToastHeading,
+  loadingText,
+} from '../language/default-labels/commonLabels';
 
 export const GET_USER = gql`
   query getUser {
@@ -58,6 +63,8 @@ interface AuthContextInterface {
 const AuthContext = createContext<AuthContextInterface | null>(null);
 
 const AuthProvider = (props: AuthProviderProps) => {
+  const loadingLabel = useString(loadingText)();
+  const timeoutHeading = useString(authSessionTimeoutToastHeading)();
   const regEvent = useRef(true);
   const refreshTimeoutWeb = useRef(null);
   const [showNativePopup, setShowNativePopup] = useState(false);
@@ -142,7 +149,7 @@ const AuthProvider = (props: AuthProviderProps) => {
             Toast.show({
               leadingIconName: 'alert',
               type: 'error',
-              text1: 'Your session has timed out, Retrying...',
+              text1: timeoutHeading,
               visibilityTime: 3000,
             });
             setTimeout(() => {
@@ -314,7 +321,7 @@ const AuthProvider = (props: AuthProviderProps) => {
         Toast.show({
           leadingIconName: 'alert',
           type: 'error',
-          text1: 'Your session has timed out, Retrying...',
+          text1: timeoutHeading,
           visibilityTime: 3000,
         });
         setTimeout(() => {
@@ -344,6 +351,7 @@ const AuthProvider = (props: AuthProviderProps) => {
             : isIOS() || isAndroid()
             ? deepLinkUrl
             : '',
+          timeoutHeading,
         )?.then((response: any) => {
           if (isAndroid() || isIOS()) {
             if (response && response?.showNativePopup) {
@@ -442,8 +450,7 @@ const AuthProvider = (props: AuthProviderProps) => {
         history.push('/create');
       } else {
         tokenLogout()
-          .then(res => {
-          })
+          .then(res => {})
           .catch(() => {
             console.error('user logout failed');
             setAuthError('Error occured on Logout, please try again.');
@@ -481,7 +488,7 @@ const AuthProvider = (props: AuthProviderProps) => {
         <></>
       )}
       {(!authenticated && !ENABLE_AUTH) || (ENABLE_AUTH && loading) ? (
-        <Loading text={'Loading...'} />
+        <Loading text={loadingLabel} />
       ) : (
         props.children
       )}

package/template/src/auth/AuthRoute.tsx

@@ -18,6 +18,11 @@ import isSDK from '../utils/isSDK';
 import Loading from '../subComponents/Loading';
 import Login from '../pages/Login';
 import {isAndroid, isIOS} from '../utils/common';
+import {useString} from '../utils/useString';
+import {
+  authAuthenticationFailedText,
+  loadingText,
+} from '../language/default-labels/commonLabels';
 
 interface PrivateRouteProps extends RouteProps {
   children: React.ReactNode;
@@ -26,6 +31,8 @@ interface PrivateRouteProps extends RouteProps {
 const AuthRoute: React.FC<PrivateRouteProps> = props => {
   const didMountRef = useRef(false);
   const {authenticated} = useAuth();
+  const loadingLabel = useString(loadingText)();
+  const failedtext = useString(authAuthenticationFailedText)();
 
   useEffect(() => {
     if (!didMountRef.current) return;
@@ -33,7 +40,7 @@ const AuthRoute: React.FC<PrivateRouteProps> = props => {
       Toast.show({
         leadingIconName: 'alert',
         type: 'error',
-        text1: 'Authentication failed',
+        text1: failedtext,
         visibilityTime: 1000,
       });
     }
@@ -56,7 +63,7 @@ const AuthRoute: React.FC<PrivateRouteProps> = props => {
     //if user closes inapp browser then show login/signup button
     //  <Login />
     //)
-    <Loading text={'Loading...'} />
+    <Loading text={loadingLabel} />
   );
   // <Redirect
   //   to={{

package/template/src/auth/IDPAuth.electron.tsx

@@ -3,12 +3,15 @@ import {useAuth} from './AuthProvider';
 import {useHistory, useParams} from '../components/Router';
 import Loading from '../subComponents/Loading';
 import useTokenAuth from './useTokenAuth';
+import {useString} from '../utils/useString';
+import {authAuthorizingApplicationText} from '../language/default-labels/commonLabels';
 
 export const IDPAuth = () => {
   const {setIsAuthenticated} = useAuth();
   const {enableTokenAuth} = useTokenAuth();
   const history = useHistory();
   const {token}: {token: string} = useParams();
+  const text = useString(authAuthorizingApplicationText)();
 
   useEffect(() => {
     if (token) {
@@ -24,5 +27,5 @@ export const IDPAuth = () => {
     }
   }, []);
 
-  return <Loading text={'Authorizing app...'} />;
+  return <Loading text={text} />;
 };

package/template/src/auth/IDPAuth.tsx

@@ -6,8 +6,15 @@ import {useApolloClient} from '@apollo/client';
 import Toast from '../../react-native-toast-message';
 import {getParamFromURL} from '../utils/common';
 import useTokenAuth from './useTokenAuth';
+import {useString} from '../utils/useString';
+import {
+  authAuthorizingApplicationText,
+  authErrorOnLoginToastHeading,
+} from '../language/default-labels/commonLabels';
 
 export const IDPAuth = () => {
+  const toastheading = useString(authErrorOnLoginToastHeading)();
+  const text = useString(authAuthorizingApplicationText)();
   const {setIsAuthenticated, authLogin} = useAuth();
   const history = useHistory();
   const {token: returnTo}: {token: string} = useParams();
@@ -47,7 +54,7 @@ export const IDPAuth = () => {
       Toast.show({
         leadingIconName: 'alert',
         type: 'error',
-        text1: 'Error occured on Login, Please login again.',
+        text1: toastheading,
         visibilityTime: 3000,
       });
       setTimeout(() => {
@@ -56,5 +63,5 @@ export const IDPAuth = () => {
     }
   }, []);
 
-  return <Loading text={'Authorizing app...'} />;
+  return <Loading text={text} />;
 };

package/template/src/auth/IDPLogoutComponent.tsx

@@ -8,6 +8,14 @@ import {isMobileUA, useIsDesktop} from '../utils/common';
 import TertiaryButton from '../atoms/TertiaryButton';
 import isSDK from '../utils/isSDK';
 import {useAuth} from './AuthProvider';
+import {useString} from '../utils/useString';
+import {
+  authLogoutPopupHeading,
+  authLogoutPopupPrimaryBtnText,
+  authLogoutPopupSubHeading,
+  cancelText,
+  logoutText,
+} from '../language/default-labels/commonLabels';
 
 interface LogoutPopupProps {
   modalVisible: boolean;
@@ -16,11 +24,11 @@ interface LogoutPopupProps {
 }
 const LogoutPopup = (props: LogoutPopupProps) => {
   const isDesktop = useIsDesktop()('popup');
-  const logoutLabelHeading = 'Logout?';
-  const logoutLabelSubHeading = 'Are you sure you wanna log out?';
+  const logoutLabelHeading = useString(authLogoutPopupHeading)();
+  const logoutLabelSubHeading = useString(authLogoutPopupSubHeading)();
 
-  const cancelBtnLabel = 'CANCEL';
-  const confirmBtnLabel = 'CONFIRM';
+  const cancelBtnLabel = useString(cancelText)();
+  const confirmBtnLabel = useString(authLogoutPopupPrimaryBtnText)();
   return (
     <Popup
       modalVisible={props.modalVisible}
@@ -114,6 +122,7 @@ interface IDPLogoutComponentProps {
 }
 
 const IDPLogoutComponent = (props?: IDPLogoutComponentProps) => {
+  const logoutLabel = useString(logoutText)();
   const {authenticated, authLogout} = useAuth();
   const [modalVisible, setModalVisible] = useState(false);
   return authenticated && $config.ENABLE_IDP_AUTH && !isSDK() ? (
@@ -136,7 +145,7 @@ const IDPLogoutComponent = (props?: IDPLogoutComponentProps) => {
         setModalVisible={setModalVisible}
       />
       <TertiaryButton
-        text="Logout"
+        text={logoutLabel}
         onPress={() => {
           setModalVisible(true);
         }}

package/template/src/auth/UserCancelPopup.tsx

@@ -6,6 +6,13 @@ import PrimaryButton from '../atoms/PrimaryButton';
 import ThemeConfig from '../theme';
 import {useIsDesktop} from '../utils/common';
 import TertiaryButton from '../atoms/TertiaryButton';
+import {useString} from '../utils/useString';
+import {
+  authLogInRequiredPopupHeading,
+  authLogInRequiredPopupPrimaryBtnText,
+  authLogInRequiredPopupSecondaryBtnText,
+  authLogInRequiredPopupSubHeading,
+} from '../language/default-labels/commonLabels';
 
 interface UserCancelPopupProps {
   modalVisible: boolean;
@@ -15,11 +22,11 @@ interface UserCancelPopupProps {
 }
 const UserCancelPopup = (props: UserCancelPopupProps) => {
   const isDesktop = useIsDesktop()('popup');
-  const logoutLabelHeading = 'Login Required';
-  const logoutLabelSubHeading = 'Log-in to your organization to contiue';
+  const logoutLabelHeading = useString(authLogInRequiredPopupHeading)();
+  const logoutLabelSubHeading = useString(authLogInRequiredPopupSubHeading)();
 
-  const closeAppBtnLabel = 'CLOSE APP';
-  const loginBtnLabel = 'LOGIN';
+  const loginBtnLabel = useString(authLogInRequiredPopupPrimaryBtnText)();
+  const closeAppBtnLabel = useString(authLogInRequiredPopupSecondaryBtnText)();
   return (
     <Popup
       cancelable={false}

package/template/src/auth/openIDPURL.electron.tsx

@@ -8,7 +8,7 @@ export const getIDPAuthLoginURL = () => {
   }&origin_url=${getOriginURL()}&platform_id=${getPlatformId()}`;
 };
 
-export const addEventListenerForToken = history => {
+export const addEventListenerForToken = (history, heading) => {
   window.addEventListener(
     'message',
     ({data, origin}: {data: {token: string; msg: string}; origin: string}) => {
@@ -18,7 +18,7 @@ export const addEventListenerForToken = history => {
         Toast.show({
           leadingIconName: 'alert',
           type: 'error',
-          text1: 'Your session has timed out, Retrying...',
+          text1: heading ? heading : 'Your session has timed out, Retrying...',
           visibilityTime: 3000,
         });
         setTimeout(() => {
@@ -31,8 +31,8 @@ export const addEventListenerForToken = history => {
   );
 };
 
-export const enableIDPAuth = async history => {
-  addEventListenerForToken(history);
+export const enableIDPAuth = async (history, heading) => {
+  addEventListenerForToken(history, heading);
   //open the auth login in the popup
   window.open(getIDPAuthLoginURL(), 'modal');
 };

package/template/src/auth/openIDPURL.tsx

@@ -13,7 +13,7 @@ export const getIDPAuthLoginURL = (returnTo?: any) => {
   }&redirect_url=${finalRedirectURL}&origin_url=${getOriginURL()}&platform_id=${getPlatformId()}`;
 };
 
-export const enableIDPAuth = async (returnTo?: any) => {
+export const enableIDPAuth = async (returnTo?: any, heading?: string) => {
   Linking.openURL(getIDPAuthLoginURL(returnTo));
 };
 

package/template/src/auth/useIDPAuth.electron.tsx

@@ -7,10 +7,13 @@ import {
 import StorageContext from '../components/StorageContext';
 import useTokenAuth from './useTokenAuth';
 import {useHistory} from '../components/Router';
+import {useString} from '../utils/useString';
+import {authSessionTimeoutToastHeading} from '../language/default-labels/commonLabels';
 
 export const useIDPAuth = () => {
   const {store, setStore} = useContext(StorageContext);
   const {tokenLogout} = useTokenAuth();
+  const headingText = useString(authSessionTimeoutToastHeading)();
   const history = useHistory();
   const idpLogout = () => {
     return new Promise((resolve, reject) => {
@@ -21,7 +24,7 @@ export const useIDPAuth = () => {
             authorization: store?.token ? `Bearer ${store?.token}` : '',
           },
         })
-          .then((response) => response.json())
+          .then(response => response.json())
           .then((res: any) => {
             if (res && res?.url) {
               //Storing the URL in the local variable
@@ -33,7 +36,7 @@ export const useIDPAuth = () => {
               tokenLogout()
                 .then(() => {
                   //call IDP logout url
-                  addEventListenerForToken(history);
+                  addEventListenerForToken(history, headingText);
                   setTimeout(() => {
                     window.open(IDPAuthLogoutURL, 'modal');
                   });
@@ -46,7 +49,7 @@ export const useIDPAuth = () => {
               reject(false);
             }
           })
-          .catch((_) => {
+          .catch(_ => {
             reject(false);
           });
       } catch (error) {

package/template/src/components/Controls.tsx

@@ -83,6 +83,8 @@ import LocalEventEmitter, {
 import {useSetRoomInfo} from './room-info/useSetRoomInfo';
 import {useString} from '../utils/useString';
 import {
+  sttSpokenLanguageToastHeading,
+  sttSpokenLanguageToastSubHeading,
   toolbarItemCaptionText,
   toolbarItemChatText,
   toolbarItemInviteText,
@@ -954,6 +956,13 @@ const Controls = (props: ControlsProps) => {
   const {setLanguage, setMeetingTranscript, setIsSTTActive} = useCaption();
   const defaultContentRef = React.useRef(defaultContent);
   const {setRoomInfo} = useSetRoomInfo();
+  const heading = useString<'Set' | 'Changed'>(sttSpokenLanguageToastHeading);
+  const subheading = useString<{
+    action: 'Set' | 'Changed';
+    newLanguage: string;
+    oldLanguage: string;
+    username: string;
+  }>(sttSpokenLanguageToastSubHeading);
 
   const {
     data: {isHost},
@@ -982,21 +991,34 @@ const Controls = (props: ControlsProps) => {
         : `changed the spoken language from "${getLanguageLabel(
             prevLang,
           )}" to "${getLanguageLabel(newLang)}" `;
-    const msg = `${
-      //@ts-ignore
-      defaultContentRef.current[uid]?.name || username
-    } ${actionText} `;
+    // const msg = `${
+    //   //@ts-ignore
+    //   defaultContentRef.current[uid]?.name || username
+    // } ${actionText} `;
+    let subheadingObj: any = {};
+    if (prevLang.indexOf('') !== -1) {
+      subheadingObj = {
+        username: defaultContentRef.current[uid]?.name || username,
+        action: prevLang.indexOf('') !== -1 ? 'Set' : 'Changed',
+        newLanguage: getLanguageLabel(newLang),
+      };
+    } else {
+      subheadingObj = {
+        username: defaultContentRef.current[uid]?.name || username,
+        action: prevLang.indexOf('') !== -1 ? 'Set' : 'Changed',
+        newLanguage: getLanguageLabel(newLang),
+        oldLanguage: getLanguageLabel(prevLang),
+      };
+    }
 
     Toast.show({
       leadingIconName: 'lang-select',
       type: 'info',
-      text1: `Spoken Language ${
-        prevLang.indexOf('') !== -1 ? 'Set' : 'Changed'
-      }`,
+      text1: heading(prevLang.indexOf('') !== -1 ? 'Set' : 'Changed'),
       visibilityTime: 3000,
       primaryBtn: null,
       secondaryBtn: null,
-      text2: msg,
+      text2: subheading(subheadingObj),
     });
     setRoomInfo(prev => {
       return {

package/template/src/components/DeviceConfigure.tsx

@@ -33,6 +33,14 @@ import {getOS} from '../utils/common';
 import LocalEventEmitter, {
   LocalEventsEnum,
 } from '../rtm-events-api/LocalEvents';
+import {useString} from '../utils/useString';
+import {
+  deviceDetectionCancelBtnText,
+  deviceDetectionCheckboxText,
+  deviceDetectionPrimaryBtnText,
+  deviceDetectionToastHeading,
+  deviceDetectionToastSubHeading,
+} from '../language/default-labels/videoCallScreenLabels';
 
 const log = (...args: any[]) => {
   console.log('[DeviceConfigure] ', ...args);
@@ -54,6 +62,14 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
   const [uiSelectedSpeaker, setUiSelectedSpeaker] = useState('');
   const [deviceList, setDeviceList] = useState<deviceInfo[]>([]);
 
+  const toastHeading = useString(deviceDetectionToastHeading);
+  const toastSubHeading = useString<{name: string; label: string}>(
+    deviceDetectionToastSubHeading,
+  );
+  const toastPrimaryBtnText = useString(deviceDetectionPrimaryBtnText)();
+  const toastCancelBtnText = useString(deviceDetectionCancelBtnText)();
+  const toastCheckboxBtnText = useString(deviceDetectionCheckboxText)();
+
   const micSelectInProgress = useRef(false);
   const micSelectQueue = useRef([]);
 
@@ -713,23 +729,25 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
       type: 'checked',
       leadingIconName: 'mic-on',
       // leadingIcon: <CustomIcon name={'mic-on'} />,
-      text1: `New ${name} detected`,
+      text1: toastHeading(name),
+      text2: toastSubHeading({name, label: device?.label}),
       // @ts-ignore
-      text2: (
-        <Text>
-          <Text>New {name} named </Text>
-          <Text style={{fontWeight: 'bold'}}>{device.label}</Text>
-          <Text> detected. Do you want to switch?</Text>
-        </Text>
-      ),
+      // text2: (
+      //   <Text>
+      //     <Text>New {name} named </Text>
+      //     <Text style={{fontWeight: 'bold'}}>{device.label}</Text>
+      //     <Text> detected. Do you want to switch?</Text>
+      //   </Text>
+      // ),
       visibilityTime: 6000,
+      //@ts-ignore
       checkbox: {
         disabled: false,
         color: primaryColor,
-        text: 'Remember my choice',
+        text: toastCheckboxBtnText,
       },
       primaryBtn: {
-        text: 'SWITCH DEVICE',
+        text: toastPrimaryBtnText,
         onPress: (checked: boolean) => {
           setAction(device.deviceId);
           checked && updateRememberedDeviceList(device, true);
@@ -737,7 +755,7 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
         },
       },
       secondaryBtn: {
-        text: 'IGNORE',
+        text: toastCancelBtnText,
         onPress: (checked: boolean) => {
           checked && updateRememberedDeviceList(device, false);
           Toast.hide();

package/template/src/components/EventsConfigure.tsx

@@ -39,12 +39,54 @@ import LocalEventEmitter, {
 import {ENABLE_AUTH} from '../auth/config';
 import {useAuth} from '../auth/AuthProvider';
 import ThemeConfig from '../theme';
+import {
+  I18nMuteType,
+  hostMutedUserToastHeading,
+  hostRemovedUserToastHeading,
+  hostRequestedUserToastHeading,
+  hostRequestedUserToastPrimaryBtnText,
+  hostRequestedUserToastSecondaryBtnText,
+  waitingRoomApprovalRequiredPrimaryBtnText,
+  waitingRoomApprovalRequiredSecondaryBtnText,
+  waitingRoomApprovalRequiredToastHeading,
+  waitingRoomApprovalRequiredToastSubHeading,
+} from '../language/default-labels/videoCallScreenLabels';
+import {useString} from '../utils/useString';
 
 interface Props {
   children: React.ReactNode;
 }
 
 const EventsConfigure: React.FC<Props> = props => {
+  const hostMutedUserToastHeadingTT = useString<I18nMuteType>(
+    hostMutedUserToastHeading,
+  );
+  const hostRequestedUserToastHeadingTT = useString<I18nMuteType>(
+    hostRequestedUserToastHeading,
+  );
+  const hostRequestedUserToastPrimaryBtnTextTT = useString<I18nMuteType>(
+    hostRequestedUserToastPrimaryBtnText,
+  );
+  const hostRequestedUserToastSecondaryBtnTextTT = useString<I18nMuteType>(
+    hostRequestedUserToastSecondaryBtnText,
+  );
+
+  const hostRemovedUserToastHeadingTT = useString(
+    hostRemovedUserToastHeading,
+  )();
+
+  const waitingRoomApprovalRequiredToastHeadingTT = useString(
+    waitingRoomApprovalRequiredToastHeading,
+  )();
+  const waitingRoomApprovalRequiredToastSubHeadingTT = useString(
+    waitingRoomApprovalRequiredToastSubHeading,
+  );
+  const waitingRoomApprovalRequiredPrimaryBtnTextTT = useString(
+    waitingRoomApprovalRequiredPrimaryBtnText,
+  )();
+  const waitingRoomApprovalRequiredSecondaryBtnTextTT = useString(
+    waitingRoomApprovalRequiredSecondaryBtnText,
+  )();
   //@ts-ignore
   const {isScreenshareActive, ScreenshareStoppedCallback, stopUserScreenShare} =
     useScreenshare();
@@ -106,7 +148,7 @@ const EventsConfigure: React.FC<Props> = props => {
         // text1: `${
         //   defaultContentRef.current.defaultContent[sender].name || 'The host'
         // } muted you.`,
-        text1: 'The host has muted your video.',
+        text1: hostMutedUserToastHeadingTT(I18nMuteType.video),
         visibilityTime: 3000,
         primaryBtn: null,
         secondaryBtn: null,
@@ -137,7 +179,7 @@ const EventsConfigure: React.FC<Props> = props => {
         // text1: `${
         //   defaultContentRef.current.defaultContent[sender].name || 'The host'
         // } muted you.`,
-        text1: 'The host has muted your audio.',
+        text1: hostMutedUserToastHeadingTT(I18nMuteType.audio),
         visibilityTime: 3000,
         primaryBtn: null,
         secondaryBtn: null,
@@ -167,7 +209,7 @@ const EventsConfigure: React.FC<Props> = props => {
       Toast.show({
         leadingIconName: 'info',
         type: 'info',
-        text1: 'The host has removed you from the room.',
+        text1: hostRemovedUserToastHeadingTT,
         visibilityTime: 5000,
         primaryBtn: null,
         secondaryBtn: null,
@@ -183,7 +225,7 @@ const EventsConfigure: React.FC<Props> = props => {
       Toast.show({
         leadingIconName: 'mic-on',
         type: 'info',
-        text1: 'The host has requested you to speak',
+        text1: hostRequestedUserToastHeadingTT(I18nMuteType.audio),
         visibilityTime: 3000,
         leadingIcon: null,
         primaryBtn:
@@ -194,7 +236,7 @@ const EventsConfigure: React.FC<Props> = props => {
             <PrimaryButton
               containerStyle={style.primaryBtn}
               textStyle={style.textStyle}
-              text="UNMUTE"
+              text={hostRequestedUserToastPrimaryBtnTextTT(I18nMuteType.audio)}
               onPress={() => {
                 RtcEngineUnsafe.muteLocalAudioStream(false);
                 dispatch({
@@ -208,16 +250,21 @@ const EventsConfigure: React.FC<Props> = props => {
         secondaryBtn:
           permissionStatusRef.current ===
             PermissionState.GRANTED_FOR_CAM_AND_MIC ||
-          permissionStatusRef.current === PermissionState.GRANTED_FOR_MIC_ONLY
-            ? SecondaryBtn
-            : null,
+          permissionStatusRef.current ===
+            PermissionState.GRANTED_FOR_MIC_ONLY ? (
+            <SecondaryBtn
+              text={hostRequestedUserToastSecondaryBtnTextTT(
+                I18nMuteType.audio,
+              )}
+            />
+          ) : null,
       });
     });
     events.on(controlMessageEnum.requestVideo, () => {
       Toast.show({
         leadingIconName: 'video-on',
         type: 'info',
-        text1: 'The host has asked you to start your video.',
+        text1: hostRequestedUserToastHeadingTT(I18nMuteType.video),
         visibilityTime: 3000,
         leadingIcon: null,
         primaryBtn:
@@ -228,7 +275,7 @@ const EventsConfigure: React.FC<Props> = props => {
             <PrimaryButton
               containerStyle={style.primaryBtn}
               textStyle={style.textStyle}
-              text="UNMUTE"
+              text={hostRequestedUserToastPrimaryBtnTextTT(I18nMuteType.video)}
               onPress={async () => {
                 isWebInternal()
                   ? await RtcEngineUnsafe.muteLocalVideoStream(false)
@@ -246,9 +293,14 @@ const EventsConfigure: React.FC<Props> = props => {
         secondaryBtn:
           permissionStatusRef.current ===
             PermissionState.GRANTED_FOR_CAM_AND_MIC ||
-          permissionStatusRef.current === PermissionState.GRANTED_FOR_CAM_ONLY
-            ? SecondaryBtn
-            : null,
+          permissionStatusRef.current ===
+            PermissionState.GRANTED_FOR_CAM_ONLY ? (
+            <SecondaryBtn
+              text={hostRequestedUserToastSecondaryBtnTextTT(
+                I18nMuteType.video,
+              )}
+            />
+          ) : null,
       });
     });
 
@@ -419,7 +471,7 @@ const EventsConfigure: React.FC<Props> = props => {
         <PrimaryButton
           containerStyle={style.primaryBtn}
           textStyle={style.textStyle}
-          text="Admit"
+          text={waitingRoomApprovalRequiredPrimaryBtnTextTT}
           onPress={() => {
             // user approving waiting room request
             const res = approval({
@@ -451,7 +503,7 @@ const EventsConfigure: React.FC<Props> = props => {
         <TertiaryButton
           containerStyle={style.secondaryBtn}
           textStyle={style.textStyle}
-          text="Deny"
+          text={waitingRoomApprovalRequiredSecondaryBtnTextTT}
           onPress={() => {
             // user rejecting waiting room request
             const res = approval({
@@ -485,8 +537,8 @@ const EventsConfigure: React.FC<Props> = props => {
         leadingIconName: 'info',
         leadingIcon: null,
         type: 'info',
-        text1: 'Approval Required',
-        text2: `${userName} is waiting for approval to join the call`,
+        text1: waitingRoomApprovalRequiredToastHeadingTT,
+        text2: waitingRoomApprovalRequiredToastSubHeadingTT(userName),
         visibilityTime: 30000,
         ...btns,
       });
@@ -633,16 +685,17 @@ const style = StyleSheet.create({
     color: $config.FONT_COLOR,
   },
 });
-const SecondaryBtn = (
+const SecondaryBtn = props => (
   <TertiaryButton
     containerStyle={style.secondaryBtn}
     textStyle={style.textStyle}
-    text="LATER"
+    text={props?.text || 'LATER'}
     onPress={() => {
       Toast.hide();
     }}
   />
 );
+
 const PrimaryButton = props => {
   const {text, containerStyle, textStyle, onPress} = props;
   return (