agora-appbuilder-core 4.1.6 → 4.1.7-beta.2

package/package.json

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

package/template/defaultConfig.js

@@ -77,8 +77,8 @@ const DefaultConfig = {
   CHAT_ORG_NAME: '',
   CHAT_APP_NAME: '',
   CHAT_URL: '',
-  CLI_VERSION: '3.1.6',
-  CORE_VERSION: '4.1.6',
+  CLI_VERSION: '3.1.7-beta.2',
+  CORE_VERSION: '4.1.7-beta.2',
   DISABLE_LANDSCAPE_MODE: false,
   STT_AUTO_START: false,
   CLOUD_RECORDING_AUTO_START: false,
@@ -88,6 +88,8 @@ const DefaultConfig = {
   CUSTOMIZE_AGENT: true,
   AI_LAYOUT: 'LAYOUT_TYPE_1',
   SDK_CODEC: 'vp8',
+  ENABLE_WAITING_ROOM_AUTO_APPROVAL: false,
+  ENABLE_WAITING_ROOM_AUTO_REQUEST: false
 };
 
 module.exports = DefaultConfig;

package/template/global.d.ts

@@ -175,6 +175,8 @@ interface ConfigInterface {
   CUSTOMIZE_AGENT: boolean;
   AI_LAYOUT: string;
   SDK_CODEC: string;
+  ENABLE_WAITING_ROOM_AUTO_APPROVAL: boolean;
+  ENABLE_WAITING_ROOM_AUTO_REQUEST: boolean;
 }
 declare var $config: ConfigInterface;
 declare module 'customization' {

package/template/src/App.tsx

@@ -9,7 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useState, useLayoutEffect} from 'react';
+import React, {useState, useLayoutEffect, useEffect} from 'react';
 import {Platform} from 'react-native';
 import KeyboardManager from 'react-native-keyboard-manager';
 import AppWrapper from './AppWrapper';
@@ -22,6 +22,7 @@ import {SetRoomInfoProvider} from './components/room-info/useSetRoomInfo';
 import {ShareLinkProvider} from './components/useShareLink';
 import AppRoutes from './AppRoutes';
 import {isWebInternal} from './utils/common';
+import LocalEventEmitter, {LocalEventsEnum} from './rtm-events-api/LocalEvents';
 
 // hook can't be used in the outside react function calls. so directly checking the platform.
 if (Platform.OS === 'ios') {
@@ -103,6 +104,22 @@ const App: React.FC = () => {
     };
   }, []);
 
+  const updateToken = token => {
+    setRoomInfo(prevState => {
+      return {
+        ...prevState,
+        loginToken: token,
+      };
+    });
+  };
+
+  useEffect(() => {
+    LocalEventEmitter.on(LocalEventsEnum.SDK_TOKEN_CHANGED, updateToken);
+    return () => {
+      LocalEventEmitter.off(LocalEventsEnum.SDK_TOKEN_CHANGED, updateToken);
+    };
+  }, []);
+
   const [roomInfo, setRoomInfo] =
     useState<RoomInfoContextInterface>(RoomInfoDefaultValue);
 

package/template/src/ai-agent/components/AgentControls/AgentContext.tsx

@@ -330,6 +330,18 @@ export const AgentProvider: React.FC<{children: React.ReactNode}> = ({
               secondaryBtn: null,
               leadingIcon: null,
             });
+          } else if (agentConnectError.toString().indexOf('403') !== -1) {
+            Toast.show({
+              leadingIconName: 'alert',
+              type: 'error',
+              text1: 'Uh oh! Agent failed to connect',
+              text2:
+                "Verify if you've enabled conversational AI on agora console or if they have configured correct customerId & customer certificate for your project on appbuilder console",
+              visibilityTime: 5000,
+              primaryBtn: null,
+              secondaryBtn: null,
+              leadingIcon: null,
+            });
           } else {
             Toast.show({
               leadingIconName: 'alert',

package/template/src/ai-agent/components/AgentControls/index.tsx

@@ -73,7 +73,11 @@ export const AgentControl: React.FC = () => {
       ) : (
         <Image style={{width: 24, height: 24}} source={LeaveCallIcon} />
       )}
-      {!isMobileUA() && !(agentConnectionState === 'AGENT_CONNECTED') ? (
+      {!isMobileUA() &&
+      !(
+        agentConnectionState === 'AGENT_CONNECTED' ||
+        agentConnectionState === 'AGENT_DISCONNECT_FAILED'
+      ) ? (
         <Text
           style={{
             fontFamily: ThemeConfig.FontFamily.sansPro,

package/template/src/ai-agent/components/CustomCreate.tsx

@@ -66,7 +66,12 @@ const CustomCreate = () => {
   ) => {
     if (roomTitle !== '') {
       try {
-        setRoomInfo(RoomInfoDefaultValue);
+        setRoomInfo(prevState => {
+          return {
+            ...RoomInfoDefaultValue,
+            loginToken: prevState?.loginToken,
+          };
+        });
         //@ts-ignore
         //isSeparateHostLink will be for internal usage since backend integration is not there
         await createRoomFun(roomTitle, enablePSTN, isSeparateHostLink);

package/template/src/ai-agent/layout/ConversationalAI.tsx

@@ -84,7 +84,9 @@ export default function ConversationalAI() {
         )}
       </View>
       <View style={styles.btnContainer}>
-        {!isLoading && agentConnectionState === 'AGENT_CONNECTED' ? (
+        {!isLoading &&
+        (agentConnectionState === 'AGENT_CONNECTED' ||
+          agentConnectionState === 'AGENT_DISCONNECT_FAILED') ? (
           <View style={styles.controlsContainer}>
             <MicButton />
             <TranscriptButton />

package/template/src/ai-agent/layout/NewAnimation.tsx

@@ -51,7 +51,9 @@ export default function NewAnimation() {
         <AiAgentCustomView connectionState={agentConnectionState} />
       </View>
       <View style={styles.btnContainer}>
-        {!isLoading && agentConnectionState === 'AGENT_CONNECTED' ? (
+        {!isLoading &&
+        (agentConnectionState === 'AGENT_CONNECTED' ||
+          agentConnectionState === 'AGENT_DISCONNECT_FAILED') ? (
           <View style={styles.controlsContainer}>
             <MicButton />
             <TranscriptButton />

package/template/src/auth/AuthProvider.tsx

@@ -40,6 +40,10 @@ import {
 import {LogSource, logger} from '../logger/AppBuilderLogger';
 import getUniqueID from '../utils/getUniqueID';
 import {useIsRecordingBot} from '../subComponents/recording/useIsRecordingBot';
+import SDKEvents from '../utils/SdkEvents';
+import LocalEventEmitter, {
+  LocalEventsEnum,
+} from '../rtm-events-api/LocalEvents';
 
 export const GET_USER = gql`
   query getUser {
@@ -258,7 +262,7 @@ const AuthProvider = (props: AuthProviderProps) => {
                   text2: 'Please try again later.',
                   visibilityTime: 1000 * 60,
                 });
-                rej('SDK Login failed' + JSON.stringify(error));
+                rej('SDK Login failed ' + JSON.stringify(error));
               });
           });
         } catch (error) {
@@ -270,7 +274,7 @@ const AuthProvider = (props: AuthProviderProps) => {
             text2: 'Please try again later.',
             visibilityTime: 1000 * 60,
           });
-          rej('SDK Login failed' + JSON.stringify(error));
+          rej('SDK Login failed ' + JSON.stringify(error));
         }
       });
       SDKMethodEventsManager.on('logout', async (res, rej) => {
@@ -727,6 +731,17 @@ const AuthProvider = (props: AuthProviderProps) => {
     }
   };
 
+  useEffect(() => {
+    LocalEventEmitter.on(LocalEventsEnum.SDK_TOKEN_CHANGED, token => {
+      if (!token) {
+        setLoading(true);
+      }
+    });
+    SDKEvents.on('unauthorized', () => {
+      setLoading(true);
+    });
+  }, []);
+
   return (
     <AuthContext.Provider
       value={{

package/template/src/auth/useTokenAuth.tsx

@@ -6,6 +6,9 @@ import isSDK from '../utils/isSDK';
 import {getPlatformId} from './config';
 import {LogSource, logger} from '../logger/AppBuilderLogger';
 import getUniqueID from '../utils/getUniqueID';
+import LocalEventEmitter, {
+  LocalEventsEnum,
+} from '../rtm-events-api/LocalEvents';
 const REFRESH_TOKEN_DURATION_IN_SEC = 59;
 
 const useTokenAuth = () => {
@@ -165,6 +168,10 @@ const useTokenAuth = () => {
           try {
             if (validateToken(token)) {
               if (updateTokenInStore) {
+                LocalEventEmitter.emit(
+                  LocalEventsEnum.SDK_TOKEN_CHANGED,
+                  token,
+                );
                 updateToken(token);
               }
               setTimeout(() => {
@@ -234,6 +241,7 @@ const useTokenAuth = () => {
               },
             );
             resolve(true);
+            LocalEventEmitter.emit(LocalEventsEnum.SDK_TOKEN_CHANGED, null);
             updateToken(null);
           })
           .catch(error => {

package/template/src/components/EventsConfigure.tsx

@@ -668,6 +668,36 @@ const EventsConfigure: React.FC<Props> = ({
       waitingRoomRef.current[attendee_uid] = 'PENDING';
       // check if any other host has approved then dont show permission to join the room
 
+      const approveWaitingRoomRequest = () => {
+        // user approving waiting room request
+        const res = approval({
+          host_uid: localUid,
+          attendee_uid: attendee_uid,
+          attendee_screenshare_uid: attendee_screenshare_uid,
+          approved: true,
+        });
+        dispatch({
+          type: 'UpdateRenderList',
+          value: [attendee_uid, {isInWaitingRoom: false}],
+        });
+
+        waitingRoomRef.current[attendee_uid] = 'APPROVED';
+
+        console.log('waitingRoomRef on APPROVAL', waitingRoomRef.current);
+        // inform other that hosts as well
+        events.send(
+          EventNames.WAITING_ROOM_STATUS_UPDATE,
+          JSON.stringify({attendee_uid, approved: true}),
+          PersistanceLevel.None,
+        );
+        // server will send the RTM message with approved status and RTC token to the approved attendee.
+      };
+
+      if ($config.ENABLE_WAITING_ROOM_AUTO_APPROVAL) {
+        approveWaitingRoomRequest();
+        return;
+      }
+
       let btns: any = {};
       btns.toastId = attendee_uid;
       btns.primaryBtn = (
@@ -676,28 +706,7 @@ const EventsConfigure: React.FC<Props> = ({
           textStyle={style.textStyle}
           text={waitingRoomApprovalPrimaryBtnRef.current}
           onPress={() => {
-            // user approving waiting room request
-            const res = approval({
-              host_uid: localUid,
-              attendee_uid: attendee_uid,
-              attendee_screenshare_uid: attendee_screenshare_uid,
-              approved: true,
-            });
-            dispatch({
-              type: 'UpdateRenderList',
-              value: [attendee_uid, {isInWaitingRoom: false}],
-            });
-
-            waitingRoomRef.current[attendee_uid] = 'APPROVED';
-
-            console.log('waitingRoomRef on APPROVAL', waitingRoomRef.current);
-            // inform other that hosts as well
-            events.send(
-              EventNames.WAITING_ROOM_STATUS_UPDATE,
-              JSON.stringify({attendee_uid, approved: true}),
-              PersistanceLevel.None,
-            );
-            // server will send the RTM message with approved status and RTC token to the approved attendee.
+            approveWaitingRoomRequest();
             Toast.hide();
           }}
         />

package/template/src/components/RTMConfigure.tsx

@@ -341,6 +341,7 @@ const RtmConfigure = (props: any) => {
                   type: uid === parseInt(RECORDING_BOT_UID) ? 'bot' : 'rtc',
                   uid,
                   offline: false,
+                  isHost: attr?.attributes?.isHost,
                   lastMessageTimeStamp: 0,
                 };
                 updateRenderListState(uid, userData);
@@ -510,6 +511,7 @@ const RtmConfigure = (props: any) => {
             uid,
             offline: false,
             lastMessageTimeStamp: 0,
+            isHost: attr?.attributes?.isHost,
           };
           updateRenderListState(uid, userData);
           //end- updating user data in rtc

package/template/src/components/popups/InvitePopup.tsx

@@ -22,6 +22,7 @@ import TertiaryButton from '../../atoms/TertiaryButton';
 import ThemeConfig from '../../theme';
 import {CopyMeetingInfo} from '../../components/Share';
 import {
+  AuthErrorCodes,
   isMobileUA,
   isValidReactComponent,
   useIsDesktop,
@@ -38,6 +39,8 @@ import {
 } from '../../language/default-labels/videoCallScreenLabels';
 import {cancelText} from '../../language/default-labels/commonLabels';
 import {logger, LogSource} from '../../logger/AppBuilderLogger';
+import isSDK from '../../utils/isSDK';
+import SDKEvents from '../../utils/SdkEvents';
 
 const InvitePopup = () => {
   const {setShowInvitePopup, showInvitePopup} = useVideoCall();
@@ -48,6 +51,10 @@ const InvitePopup = () => {
   const getMeeting = useGetMeetingPhrase();
   useEffect(() => {
     getMeeting(phrase).catch(error => {
+      const errorCode = error?.networkError?.result?.error?.code;
+      if (AuthErrorCodes.indexOf(errorCode) !== -1 && isSDK()) {
+        SDKEvents.emit('unauthorized', error?.networkError?.result?.error);
+      }
       logger.error(
         LogSource.Internals,
         'GET_MEETING_PHRASE',

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

@@ -10,19 +10,18 @@
 *********************************************
 */
 
-import React, {useContext, useEffect} from 'react';
+import React, {useContext, useEffect, useState} from 'react';
 import PrimaryButton from '../../atoms/PrimaryButton';
 import {usePreCall} from './usePreCall';
 import {useString, useStringRef} from '../../utils/useString';
 import {
-  ChannelProfile,
   DispatchContext,
   PropsContext,
   useLocalUid,
 } from '../../../agora-rn-uikit';
 import {
-  PrecallJoinBtnTextInterface,
-  precallJoinBtnText,
+  PrecallWaitingRoomJoinBtnTextInterface,
+  precallWaitingRoomJoinBtnText,
 } from '../../language/default-labels/precallScreenLabels';
 import {WaitingRoomStatus, useRoomInfo} from '../room-info/useRoomInfo';
 import useGetName from '../../utils/useGetName';
@@ -37,6 +36,8 @@ import EventsConfigure from '../EventsConfigure';
 import {
   waitingRoomApprovalRejectionToastHeading,
   waitingRoomApprovalRejectionToastSubHeading,
+  waitingRoomHostNotJoined,
+  waitingRoomUsersInCall,
 } from '../../language/default-labels/videoCallScreenLabels';
 
 export interface PreCallJoinWaitingRoomBtnProps {
@@ -53,19 +54,24 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
   const subheadinglabel = useStringRef(
     waitingRoomApprovalRejectionToastSubHeading,
   );
+  const waitingRoomUserNotJoinedText = useString(waitingRoomHostNotJoined);
+  const waitingRoomUsersInCallText = useString(waitingRoomUsersInCall);
   let pollingTimeout = React.useRef(null);
   const {rtcProps} = useContext(PropsContext);
   const {setCallActive, callActive} = usePreCall();
   const username = useGetName();
   const {isJoinDataFetched, isInWaitingRoom} = useRoomInfo();
   const {setRoomInfo} = useSetRoomInfo();
+  const [hasHostJoined, setHasHostJoined] = useState(false);
+  const {defaultContent} = useContent();
 
-  const waitingRoomButton =
-    useString<PrecallJoinBtnTextInterface>(precallJoinBtnText);
+  const waitingRoomButton = useString<PrecallWaitingRoomJoinBtnTextInterface>(
+    precallWaitingRoomJoinBtnText,
+  );
   const [buttonText, setButtonText] = React.useState(
     waitingRoomButton({
-      waitingRoom: true,
       ready: isInWaitingRoom,
+      isAutoRequest: $config.ENABLE_WAITING_ROOM_AUTO_REQUEST,
     }),
   );
   const {request: requestToJoin} = useWaitingRoomAPI();
@@ -78,6 +84,28 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
     activeUidsRef.current = activeUids;
   }, [activeUids]);
 
+  React.useEffect(() => {
+    if ($config.ENABLE_WAITING_ROOM_AUTO_REQUEST) {
+      const hostUsersInCall = Object.keys(defaultContent).filter(
+        key =>
+          defaultContent[key].type === 'rtc' &&
+          defaultContent[key].offline === false &&
+          Number(key) !== localUid &&
+          defaultContent[key].isHost === 'true',
+      );
+
+      //console.log('host users in call ->', hostUsersInCall);
+
+      setHasHostJoined(hostUsersInCall.length > 0);
+
+      setButtonText(
+        hostUsersInCall.length > 0
+          ? waitingRoomUsersInCallText()
+          : waitingRoomUserNotJoinedText(),
+      );
+    }
+  }, [defaultContent]);
+
   const {
     data: {token, isHost},
   } = useRoomInfo();
@@ -91,8 +119,8 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
   useEffect(() => {
     setButtonText(
       waitingRoomButton({
-        waitingRoom: true,
         ready: !isInWaitingRoom,
+        isAutoRequest: $config.ENABLE_WAITING_ROOM_AUTO_REQUEST,
       }),
     );
   }, [isInWaitingRoom]);
@@ -201,7 +229,9 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
 
   const title = buttonText;
   const onPress = () => onSubmit();
-  const disabled = isInWaitingRoom || username === '';
+  const disabled = $config.ENABLE_WAITING_ROOM_AUTO_REQUEST
+    ? !hasHostJoined
+    : isInWaitingRoom || username?.trim() === '';
   return props?.render ? (
     props.render(onPress, title, disabled)
   ) : (

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

@@ -10,19 +10,18 @@
 *********************************************
 */
 
-import React, {useContext, useEffect} from 'react';
+import React, {useContext, useEffect, useState} from 'react';
 import PrimaryButton from '../../atoms/PrimaryButton';
 import {usePreCall} from './usePreCall';
 import {useString, useStringRef} from '../../utils/useString';
 import {
-  ChannelProfile,
   DispatchContext,
   PropsContext,
   useLocalUid,
 } from '../../../agora-rn-uikit';
 import {
-  PrecallJoinBtnTextInterface,
-  precallJoinBtnText,
+  PrecallWaitingRoomJoinBtnTextInterface,
+  precallWaitingRoomJoinBtnText,
 } from '../../language/default-labels/precallScreenLabels';
 
 import useGetName from '../../utils/useGetName';
@@ -39,10 +38,12 @@ import Toast from '../../../react-native-toast-message';
 import events from '../../rtm-events-api';
 import useWaitingRoomAPI from '../../subComponents/waiting-rooms/useWaitingRoomAPI';
 import {UserType} from '../RTMConfigure';
-import {useContent} from 'customization-api';
+import {useContent, useIsHost} from 'customization-api';
 import {
   waitingRoomApprovalRejectionToastHeading,
   waitingRoomApprovalRejectionToastSubHeading,
+  waitingRoomHostNotJoined,
+  waitingRoomUsersInCall,
 } from '../../language/default-labels/videoCallScreenLabels';
 
 const audio = new Audio(
@@ -63,6 +64,9 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
   const subheadinglabel = useStringRef(
     waitingRoomApprovalRejectionToastSubHeading,
   );
+
+  const waitingRoomUserNotJoinedText = useString(waitingRoomHostNotJoined);
+  const waitingRoomUsersInCallText = useString(waitingRoomUsersInCall);
   let pollingTimeout = React.useRef(null);
   const {rtcProps} = useContext(PropsContext);
   const {setCallActive, callActive} = usePreCall();
@@ -70,27 +74,51 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
   const setUsername = useSetName();
   const {isJoinDataFetched, isInWaitingRoom} = useRoomInfo();
   const {awake, request} = useWakeLock();
-  const waitingRoomButton =
-    useString<PrecallJoinBtnTextInterface>(precallJoinBtnText);
+  const waitingRoomButton = useString<PrecallWaitingRoomJoinBtnTextInterface>(
+    precallWaitingRoomJoinBtnText,
+  );
   const {setRoomInfo} = useSetRoomInfo();
   const {request: requestToJoin} = useWaitingRoomAPI();
+  const [hasHostJoined, setHasHostJoined] = useState(false);
+  const {defaultContent} = useContent();
 
-  const {activeUids} = useContent();
-  const activeUidsRef = React.useRef(activeUids);
-
-  React.useEffect(() => {
-    activeUidsRef.current = activeUids;
-  }, [activeUids]);
+  const localUid = useLocalUid();
+  const {dispatch} = useContext(DispatchContext);
 
   const [buttonText, setButtonText] = React.useState(
     waitingRoomButton({
-      waitingRoom: true,
       ready: isInWaitingRoom,
+      isAutoRequest: $config.ENABLE_WAITING_ROOM_AUTO_REQUEST,
     }),
   );
 
-  const {dispatch} = useContext(DispatchContext);
-  const localUid = useLocalUid();
+  React.useEffect(() => {
+    if ($config.ENABLE_WAITING_ROOM_AUTO_REQUEST) {
+      const usersInCall = Object.keys(defaultContent).filter(
+        key =>
+          defaultContent[key].type === 'rtc' &&
+          defaultContent[key].offline === false &&
+          Number(key) !== localUid,
+      );
+      const hostUsersInCall = Object.keys(defaultContent).filter(
+        key =>
+          defaultContent[key].type === 'rtc' &&
+          defaultContent[key].offline === false &&
+          Number(key) !== localUid &&
+          defaultContent[key].isHost === 'true',
+      );
+
+      //console.log('host users in call ->', hostUsersInCall);
+
+      setHasHostJoined(hostUsersInCall.length > 0);
+
+      setButtonText(
+        hostUsersInCall.length > 0
+          ? waitingRoomUsersInCallText()
+          : waitingRoomUserNotJoinedText(),
+      );
+    }
+  }, [defaultContent]);
 
   const {
     data: {token, isHost},
@@ -242,15 +270,17 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
   useEffect(() => {
     setButtonText(
       waitingRoomButton({
-        waitingRoom: true,
         ready: !isInWaitingRoom,
+        isAutoRequest: $config.ENABLE_WAITING_ROOM_AUTO_REQUEST,
       }),
     );
   }, [isInWaitingRoom]);
 
   const title = buttonText;
   const onPress = () => onSubmit();
-  const disabled = isInWaitingRoom || username?.trim() === '';
+  const disabled = $config.ENABLE_WAITING_ROOM_AUTO_REQUEST
+    ? !hasHostJoined
+    : isInWaitingRoom || username?.trim() === '';
   return props?.render ? (
     props.render(onPress, title, disabled)
   ) : (

package/template/src/components/room-info/useRoomInfo.tsx

@@ -109,6 +109,7 @@ export interface RoomInfoContextInterface {
   };
   isSTTActive?: boolean;
   roomPreference?: joinRoomPreference;
+  loginToken?: string;
 }
 
 export const validateMeetingInfoData = (
@@ -161,6 +162,7 @@ export const RoomInfoDefaultValue: RoomInfoContextInterface = {
     disableParticipants: false,
     userRemovalTimeout: 5000,
   },
+  loginToken: '',
 };
 
 const RoomInfoContext = createContext(RoomInfoDefaultValue);

package/template/src/language/default-labels/precallScreenLabels.ts

@@ -7,6 +7,10 @@ export interface PrecallJoinBtnTextInterface {
   role?: ClientRoleType;
   waitingRoom?: boolean;
 }
+export interface PrecallWaitingRoomJoinBtnTextInterface {
+  ready: boolean;
+  isAutoRequest: boolean;
+}
 
 export const permissionPopupHeading = `permissionPopupHeading`;
 export const permissionPopupSubHeading = `permissionPopupSubHeading`;
@@ -42,6 +46,7 @@ export const precallYouAreJoiningAsHeading = 'precallYouAreJoiningAsHeading';
 export const precallNameInputPlaceholderText =
   'precallNameInputPlaceholderText';
 export const precallJoinBtnText = 'precallJoinBtnText';
+export const precallWaitingRoomJoinBtnText = 'precallWaitingRoomJoinBtnText';
 export const precallInputGettingName = 'precallInputGettingName';
 
 export const vbPanelHeading = 'vbPanelHeading';
@@ -78,6 +83,7 @@ export interface I18nPrecallScreenLabelsInterface {
   [precallYouAreJoiningAsHeading]?: I18nBaseType;
   [precallNameInputPlaceholderText]?: I18nBaseType;
   [precallJoinBtnText]?: I18nBaseType<PrecallJoinBtnTextInterface>;
+  [precallWaitingRoomJoinBtnText]?: I18nBaseType<PrecallWaitingRoomJoinBtnTextInterface>;
 
   [vbPanelHeading]?: I18nBaseType;
   [vbPanelInfo]?: I18nConditionalType;
@@ -129,6 +135,14 @@ export const PrecallScreenLabels: I18nPrecallScreenLabelsInterface = {
   [precallYouAreJoiningAsHeading]: 'You are joining',
   [precallNameInputPlaceholderText]: 'Enter Your Name',
   [precallInputGettingName]: 'Getting name...',
+  [precallWaitingRoomJoinBtnText]: ({ready, isAutoRequest}) => {
+    return isAutoRequest
+      ? 'Joining...'
+      : ready
+      ? 'Ask To Join'
+      : `Waiting for approval...`;
+  },
+
   [precallJoinBtnText]: ({waitingRoom, ready, role}) => {
     if (waitingRoom) {
       return ready ? 'Ask To Join' : `Waiting for approval...`;

package/template/src/language/default-labels/videoCallScreenLabels.ts

@@ -245,7 +245,7 @@ export const chatUploadStatusInProgress = 'chatUploadStatusInProgress';
 export const chatUploadStatusFailure = 'chatUploadStatusFailure';
 export const chatUploadMaxLimit = 'chatUploadMaxLimit';
 export const chatErrorNoToken = 'chatErrorNoToken';
-export const chatErrorNotConnected = 'chatErrorNotConnected'
+export const chatErrorNotConnected = 'chatErrorNotConnected';
 
 export const peoplePanelTurnoffAllCameraBtnText =
   'peoplePanelTurnoffAllCameraBtnText';
@@ -479,6 +479,8 @@ export const waitingRoomApprovalRejectionToastHeading =
   'waitingRoomApprovalRejectionToastHeading';
 export const waitingRoomApprovalRejectionToastSubHeading =
   'waitingRoomApprovalRejectionToastSubHeading';
+export const waitingRoomHostNotJoined = 'waitingRoomHostNotJoined';
+export const waitingRoomUsersInCall = 'waitingRoomUsersInCall';
 
 export const videoRoomRecordingText = `video${room}RecordingText` as const;
 export const videoRoomGoToActiveSpeakerText =
@@ -820,7 +822,9 @@ export interface I18nVideoCallScreenLabelsInterface {
   [waitingRoomApprovalRequiredSecondaryBtnText]?: I18nBaseType;
 
   [waitingRoomApprovalRejectionToastHeading]?: I18nBaseType;
+  [waitingRoomUsersInCall]?: I18nBaseType;
   [waitingRoomApprovalRejectionToastSubHeading]?: I18nBaseType;
+  [waitingRoomHostNotJoined]?: I18nBaseType;
 
   [videoRoomRecordingText]?: I18nBaseType;
   [videoRoomGoToActiveSpeakerText]?: I18nBaseType;
@@ -1067,8 +1071,10 @@ export const VideoCallScreenLabels: I18nVideoCallScreenLabelsInterface = {
   [chatPublicMessageDeletePopupText]: `Are you sure you want to delete this message for everyone in the public chat? `,
   [chatPrivateMessageDeletePopupText]: (name: string) =>
     `Are you sure you want to delete this message for ${name}`,
-  [chatErrorNoToken]:'Chat is currently unavailable. Please try rejoining the session or contact support',
-  [chatErrorNotConnected]:'Unable to connect to chat. Please try rejoining the session or contact support',
+  [chatErrorNoToken]:
+    'Chat is currently unavailable. Please try rejoining the session or contact support',
+  [chatErrorNotConnected]:
+    'Unable to connect to chat. Please try rejoining the session or contact support',
 
   [peoplePanelTurnoffAllCameraBtnText]: 'Turn off all cameras',
   [peoplePanelMuteAllMicBtnText]: 'Mute Everyone',
@@ -1284,6 +1290,8 @@ export const VideoCallScreenLabels: I18nVideoCallScreenLabelsInterface = {
   [waitingRoomApprovalRejectionToastHeading]: 'Approval Required',
   [waitingRoomApprovalRejectionToastSubHeading]:
     'Permission to enter the meeting was denied by the host',
+  [waitingRoomHostNotJoined]: 'Waiting for Host, Please wait...',
+  [waitingRoomUsersInCall]: `Meeting Started,  Join Now !`,
 
   [videoRoomRecordingText]: 'REC',
 

package/template/src/pages/Create.tsx

@@ -23,6 +23,7 @@ import {
   isMobileUA,
   trimText,
   isValidReactComponent,
+  AuthErrorCodes,
 } from '../utils/common';
 import {useCustomization} from 'customization-implementation';
 import {useString} from '../utils/useString';
@@ -63,6 +64,7 @@ import {
   createRoomSuccessToastSubHeading,
 } from '../language/default-labels/createScreenLabels';
 import {LogSource, logger} from '../logger/AppBuilderLogger';
+import SDKEvents from '../utils/SdkEvents';
 
 const Create = () => {
   const {CreateComponent} = useCustomization(data => {
@@ -212,7 +214,12 @@ const Create = () => {
       );
       setLoading(true);
       try {
-        setRoomInfo(RoomInfoDefaultValue);
+        setRoomInfo(prevState => {
+          return {
+            ...RoomInfoDefaultValue,
+            loginToken: prevState?.loginToken,
+          };
+        });
         //@ts-ignore
         //isSeparateHostLink will be for internal usage since backend integration is not there
         await createRoomFun(roomTitle, enablePSTN, isSeparateHostLink);
@@ -230,6 +237,10 @@ const Create = () => {
         });
         showShareScreen();
       } catch (error) {
+        const errorCode = error?.networkError?.result?.error?.code;
+        if (AuthErrorCodes.indexOf(errorCode) !== -1 && isSDK()) {
+          SDKEvents.emit('unauthorized', error?.networkError?.result?.error);
+        }
         setLoading(false);
         logger.error(
           LogSource.Internals,

package/template/src/pages/Join.tsx

@@ -16,6 +16,7 @@ import {useHistory} from '../components/Router';
 import Logo from '../components/common/Logo';
 import Spacer from '../atoms/Spacer';
 import {
+  AuthErrorCodes,
   isMobileUA,
   isValidReactComponent,
   shouldAuthenticate,
@@ -49,6 +50,8 @@ import {
   joinRoomInputPlaceHolderText,
 } from '../language/default-labels/joinScreenLabels';
 import {LogSource, logger} from '../logger/AppBuilderLogger';
+import isSDK from '../utils/isSDK';
+import SDKEvents from '../utils/SdkEvents';
 
 const mobileOrTablet = isMobileOrTablet();
 
@@ -120,7 +123,12 @@ const Join = () => {
     );
     apiJoinCall(phrase)
       .then(() => {
-        setRoomInfo(RoomInfoDefaultValue);
+        setRoomInfo(prevState => {
+          return {
+            ...RoomInfoDefaultValue,
+            loginToken: prevState?.loginToken,
+          };
+        });
         logger.log(
           LogSource.Internals,
           'JOIN_MEETING',
@@ -130,6 +138,10 @@ const Join = () => {
         history.push(phrase);
       })
       .catch(error => {
+        const errorCode = error?.networkError?.result?.error?.code;
+        if (AuthErrorCodes.indexOf(errorCode) !== -1 && isSDK()) {
+          SDKEvents.emit('unauthorized', error?.networkError?.result?.error);
+        }
         logger.error(
           LogSource.Internals,
           'JOIN_MEETING',

package/template/src/pages/VideoCall.tsx

@@ -81,6 +81,7 @@ import {useCustomization} from 'customization-implementation';
 import {BeautyEffectProvider} from '../components/beauty-effect/useBeautyEffects';
 import {UserActionMenuProvider} from '../components/useUserActionMenu';
 import Toast from '../../react-native-toast-message';
+import {AuthErrorCodes} from '../utils/common';
 
 enum RnEncryptionEnum {
   /**
@@ -245,7 +246,12 @@ const VideoCall: React.FC = () => {
         'VIDEO_CALL_ROOM',
         'Videocall unmounted',
       );
-      setRoomInfo(RoomInfoDefaultValue);
+      setRoomInfo(prevState => {
+        return {
+          ...RoomInfoDefaultValue,
+          loginToken: prevState?.loginToken,
+        };
+      });
       if (awake) {
         release();
       }
@@ -263,6 +269,10 @@ const VideoCall: React.FC = () => {
           );
         })
         .catch(error => {
+          const errorCode = error?.networkError?.result?.error?.code;
+          if (AuthErrorCodes.indexOf(errorCode) !== -1 && isSDK()) {
+            SDKEvents.emit('unauthorized', error?.networkError?.result?.error);
+          }
           logger.error(
             LogSource.Internals,
             'JOIN_MEETING',
@@ -295,6 +305,7 @@ const VideoCall: React.FC = () => {
       setQueryComplete(false);
       setRoomInfo(roomInfo => {
         return {
+          ...roomInfo,
           isJoinDataFetched: true,
           data: {
             ...roomInfo.data,
@@ -315,6 +326,10 @@ const VideoCall: React.FC = () => {
           );
         })
         .catch(error => {
+          const errorCode = error?.networkError?.result?.error?.code;
+          if (AuthErrorCodes.indexOf(errorCode) !== -1 && isSDK()) {
+            SDKEvents.emit('unauthorized', error?.networkError?.result?.error);
+          }
           logger.error(
             LogSource.Internals,
             'JOIN_MEETING',
@@ -399,7 +414,7 @@ const VideoCall: React.FC = () => {
     //     SdkJoinState.promise?.res();
     //   }
     // },
-    EndCall:  () => {
+    EndCall: () => {
       clearState('join');
       setTimeout(() => {
         // TODO: These callbacks are being called twice

package/template/src/rtm-events-api/LocalEvents.ts

@@ -11,6 +11,7 @@ export enum LocalEventsEnum {
   CLEAR_WHITEBOARD = 'CLEAR_WHITEBOARD',
   USER_KICKED_OFF_BY_REMOTE_HOST = 'USER_KICKED_OFF_BY_REMOTE_HOST',
   AGENT_TRANSCRIPT_CHANGE = 'AGENT_TRANSCRIPT_CHANGE',
+  SDK_TOKEN_CHANGED = 'SDK_TOKEN_CHANGED',
 }
 const LocalEventEmitter = new EventEmitter();
 export default LocalEventEmitter;

package/template/src/utils/SdkEvents.ts

@@ -50,6 +50,7 @@ export interface userEventsMapInterface {
   'did-token-expire': () => void;
   'token-refreshed': () => void;
   'rtc-user-removed': (uid: UidType, channel: string) => void;
+  unauthorized: (errorMessage) => void;
 }
 
 const SDKEvents = createNanoEvents<userEventsMapInterface>();

package/template/src/utils/common.tsx

@@ -17,6 +17,8 @@ import {
 import Platform from '../subComponents/Platform';
 import * as ReactIs from 'react-is';
 
+const AuthErrorCodes = [602, 603, 604];
+
 const trimText = (text: string, length: number = 25) => {
   if (!text) {
     return '';
@@ -412,4 +414,5 @@ export {
   CustomToolbarSorting,
   CustomToolbarMerge,
   MergeMoreButtonFields,
+  AuthErrorCodes,
 };

package/template/src/utils/useCreateRoom.ts

@@ -142,14 +142,17 @@ export default function useCreateRoom(): createRoomFun {
         roomId: roomInfo?.roomId,
         pstn: roomInfo?.pstn,
       });
-      setRoomInfo({
-        data: {
-          isHost: true,
-          isSeparateHostLink: isSeparateHostLink ? true : false,
-          meetingTitle: roomTitle,
-          roomId: roomInfo?.roomId,
-          pstn: roomInfo?.pstn,
-        },
+      setRoomInfo(prev => {
+        return {
+          ...prev,
+          data: {
+            isHost: true,
+            isSeparateHostLink: isSeparateHostLink ? true : false,
+            meetingTitle: roomTitle,
+            roomId: roomInfo?.roomId,
+            pstn: roomInfo?.pstn,
+          },
+        };
       });
       SDKEvents.emit(
         'create',