agora-appbuilder-core 4.0.0-test.2 → 4.0.1

package/template/src/pages/Create.tsx

@@ -25,10 +25,10 @@ import {
 } from '../utils/common';
 import {useCustomization} from 'customization-implementation';
 import {useString} from '../utils/useString';
-import useCreateMeeting from '../utils/useCreateMeeting';
+import useCreateRoom from '../utils/useCreateRoom';
 import {CreateProvider} from './create/useCreate';
-import useJoinMeeting from '../utils/useJoinMeeting';
-import {MeetingInfoDefaultValue} from '../components/meeting-info/useMeetingInfo';
+import useJoinRoom from '../utils/useJoinRoom';
+import {RoomInfoDefaultValue} from '../components/room-info/useRoomInfo';
 import Input from '../atoms/Input';
 import Toggle from '../atoms/Toggle';
 import Card from '../atoms/Card';
@@ -40,12 +40,27 @@ import Tooltip from '../atoms/Tooltip';
 import ImageIcon from '../atoms/ImageIcon';
 import hexadecimalTransparency from '../utils/hexadecimalTransparency';
 import {randomNameGenerator} from '../utils';
-import {useSetMeetingInfo} from '../components/meeting-info/useSetMeetingInfo';
+import {useSetRoomInfo} from '../components/room-info/useSetRoomInfo';
 import IDPLogoutComponent from '../auth/IDPLogoutComponent';
 import isSDK from '../utils/isSDK';
+import {
+  createRoomAllowPhoneNumberJoining,
+  createRoomAllowPhoneNumberJoiningTooltipText,
+  createRoomBtnText,
+  createRoomErrorToastHeading,
+  createRoomErrorToastSubHeading,
+  createRoomHeading,
+  createRoomInputLabel,
+  createRoomInputPlaceholderText,
+  createRoomJoinWithID,
+  createRoomMakeEveryOneCoHost,
+  createRoomMakeEveryOneCoHostTooltipText,
+  createRoomSuccessToastHeading,
+  createRoomSuccessToastSubHeading,
+} from '../language/default-labels/createScreenLabels';
 
 const Create = () => {
-  const {CreateComponent} = useCustomization((data) => {
+  const {CreateComponent} = useCustomization(data => {
     let components: {
       CreateComponent?: React.ElementType;
     } = {};
@@ -63,7 +78,7 @@ const Create = () => {
     return components;
   });
 
-  const useJoin = useJoinMeeting();
+  const useJoin = useJoinRoom();
   const {setStore} = useContext(StorageContext);
   const {setGlobalErrorMessage} = useContext(ErrorContext);
   const history = useHistory();
@@ -73,41 +88,66 @@ const Create = () => {
   const [pstnToggle, setPstnToggle] = useState(false);
   const [coHostToggle, setCoHostToggle] = useState(false);
   const [roomCreated, setRoomCreated] = useState(false);
-  const createRoomFun = useCreateMeeting();
-  const {setMeetingInfo} = useSetMeetingInfo();
-  //commented for v1 release
-  // const createdText = useString('meetingCreatedNotificationLabel')();
-  // const hostControlsToggle = useString<boolean>('hostControlsToggle');
-  // const pstnToggle = useString<boolean>('pstnToggle');
-  // const loadingWithDots = useString('loadingWithDots')();
-  // const createMeetingButton = useString('createMeetingButton')();
-  // const haveMeetingID = useString('haveMeetingID')();
+  const createRoomFun = useCreateRoom();
+  const {setRoomInfo} = useSetRoomInfo();
 
-  const createdText = ' has been created';
-  // const meetingNameInputPlaceholder = useString(
-  //   'meetingNameInputPlaceholder',
-  // )();
-  const meetingNameInputPlaceholder = 'The Annual Galactic Meet';
-  const loadingWithDots = 'Loading...';
+  const loadingText = useString('loadingText')();
 
-  const btnLabel = () => {
-    if ($config.AUDIO_ROOM) {
-      if ($config.EVENT_MODE) {
-        return 'CREATE A AUDIO LIVECAST';
-      } else {
-        return 'CREATE A VOICE CHAT';
-      }
-    } else {
-      if ($config.EVENT_MODE) {
-        return 'CREATE A STREAM';
-      } else {
-        return 'CREATE A MEETING';
-      }
-    }
-  };
+  //heading
+  const headingText = useString<any>(createRoomHeading)({
+    audioRoom: $config.AUDIO_ROOM,
+    eventMode: $config.EVENT_MODE,
+  });
+  //heading
+
+  //input label
+  const inputLabel = useString<any>(createRoomInputLabel)({
+    audioRoom: $config.AUDIO_ROOM,
+    eventMode: $config.EVENT_MODE,
+  });
+  //input label
+
+  //placeholder
+  const placeHolderText = useString(createRoomInputPlaceholderText)();
+  //placeholder
+
+  //toggle
+  const everyoneCoHost = useString(createRoomMakeEveryOneCoHost)();
+  const everyoneCoHostTooltip = useString(
+    createRoomMakeEveryOneCoHostTooltipText,
+  )();
+  const allowPhoneNumberJoining = useString(
+    createRoomAllowPhoneNumberJoining,
+  )();
+  const allowPhoneNumberJoiningToolTip = useString(
+    createRoomAllowPhoneNumberJoiningTooltipText,
+  )();
+  //toggle
+
+  //create button
+  const createBtnText = useString<any>(createRoomBtnText)({
+    audioRoom: $config.AUDIO_ROOM,
+    eventMode: $config.EVENT_MODE,
+  });
+  //create button
+
+  const joinWithRoomID = useString(createRoomJoinWithID)();
+
+  //toast
+  const createRoomSuccessToastHeadingText = useString(
+    createRoomSuccessToastHeading,
+  );
+  const createRoomSuccessToastSubHeadingText = useString(
+    createRoomSuccessToastSubHeading,
+  )();
+  //toast
 
-  const createMeetingButton = btnLabel();
-  const haveMeetingID = 'Join with a meeting ID';
+  const createRoomErrorToastHeadingText = useString(
+    createRoomErrorToastHeading,
+  )();
+  const createRoomErrorToastSubHeadingText = useString(
+    createRoomErrorToastSubHeading,
+  )();
 
   const isDesktop = !isMobileUA();
   useEffect(() => {
@@ -137,21 +177,35 @@ const Create = () => {
     if (roomTitle !== '') {
       setLoading(true);
       try {
-        setMeetingInfo(MeetingInfoDefaultValue);
+        setRoomInfo(RoomInfoDefaultValue);
+        //@ts-ignore
+        //isSeparateHostLink will be for internal usage since backend integration is not there
         await createRoomFun(roomTitle, enablePSTN, isSeparateHostLink);
         setLoading(false);
         Toast.show({
+          leadingIconName: 'tick-fill',
           type: 'success',
-          text1: trimText(roomTitle) + createdText,
-          text2: 'Your New meeting is now live',
+          text1: createRoomSuccessToastHeadingText(trimText(roomTitle)),
+          text2: createRoomSuccessToastSubHeadingText,
           visibilityTime: 3000,
           primaryBtn: null,
           secondaryBtn: null,
+          leadingIcon: null,
         });
         showShareScreen();
       } catch (error) {
         setLoading(false);
-        setGlobalErrorMessage(error);
+        if (
+          createRoomErrorToastHeadingText ||
+          createRoomErrorToastSubHeadingText
+        ) {
+          setGlobalErrorMessage({
+            name: createRoomErrorToastHeadingText,
+            message: createRoomErrorToastSubHeadingText,
+          });
+        } else {
+          setGlobalErrorMessage(error);
+        }
       }
     }
   };
@@ -173,46 +227,16 @@ const Create = () => {
     );
   };
 
-  const getHeading = () => {
-    if ($config.AUDIO_ROOM) {
-      if ($config.EVENT_MODE) {
-        return 'Create a Audio Livecast';
-      } else {
-        return 'Create a Voice Chat';
-      }
-    } else {
-      if ($config.EVENT_MODE) {
-        return 'Create a Livestream';
-      } else {
-        return 'Create a Meeting';
-      }
-    }
-  };
-
-  const getInputLabel = () => {
-    if ($config.AUDIO_ROOM) {
-      if ($config.EVENT_MODE) {
-        return 'Audio Livecast Name';
-      } else {
-        return 'Voice Chat Name';
-      }
-    } else {
-      if ($config.EVENT_MODE) {
-        return 'Stream Name';
-      } else {
-        return 'Meeting Name';
-      }
-    }
-  };
-
   const showError = () => {
     Toast.show({
+      leadingIconName: 'alert',
       type: 'error',
       text1: 'Backend endpoint not configured',
       text2: 'Please configure backend endpoint config.json',
       visibilityTime: 1000 * 10,
       primaryBtn: null,
       secondaryBtn: null,
+      leadingIcon: null,
     });
   };
 
@@ -234,12 +258,7 @@ const Create = () => {
             <ScrollView contentContainerStyle={style.main}>
               <Card>
                 <View>
-                  <View
-                    style={{
-                      flexDirection: 'row',
-                      justifyContent: 'space-between',
-                      alignItems: 'center',
-                    }}>
+                  <View style={style.logoContainerStyle}>
                     <Logo />
                     {isMobileUA() ? (
                       <IDPLogoutComponent
@@ -250,15 +269,15 @@ const Create = () => {
                     )}
                   </View>
                   <Spacer size={isDesktop ? 20 : 16} />
-                  <Text style={style.heading}>{getHeading()}</Text>
+                  <Text style={style.heading}>{headingText}</Text>
                   <Spacer size={40} />
                   <Input
                     maxLength={maxInputLimit}
                     labelStyle={style.inputLabelStyle}
-                    label={getInputLabel()}
+                    label={inputLabel}
                     value={roomTitle}
-                    placeholder={meetingNameInputPlaceholder}
-                    onChangeText={(text) => onChangeRoomTitle(text)}
+                    placeholder={placeHolderText}
+                    onChangeText={text => onChangeRoomTitle(text)}
                     onSubmitEditing={() => {
                       if (!roomTitle?.trim()) {
                         return;
@@ -289,18 +308,19 @@ const Create = () => {
                       ]}>
                       <View style={style.infoContainer}>
                         <Text numberOfLines={1} style={style.toggleLabel}>
-                          Make everyone a Co-Host
+                          {everyoneCoHost}
                         </Text>
                         <Tooltip
                           activeBgStyle={style.tooltipActiveBgStyle}
                           defaultBgStyle={style.tooltipDefaultBgStyle}
-                          toolTipMessage="Turning on will give everyone the control of this meeting"
+                          toolTipMessage={everyoneCoHostTooltip}
                           renderContent={(
                             isToolTipVisible,
                             setToolTipVisible,
                           ) =>
                             renderInfoIcon(isToolTipVisible, setToolTipVisible)
-                          }></Tooltip>
+                          }
+                        />
                       </View>
                       <View style={style.infoToggleContainer}>
                         <Toggle
@@ -322,12 +342,12 @@ const Create = () => {
                         ]}>
                         <View style={style.infoContainer}>
                           <Text numberOfLines={1} style={style.toggleLabel}>
-                            Allow joining via a phone number
+                            {allowPhoneNumberJoining}
                           </Text>
                           <Tooltip
                             activeBgStyle={style.tooltipActiveBgStyle}
                             defaultBgStyle={style.tooltipDefaultBgStyle}
-                            toolTipMessage="Attendees can dial a number and join via PSTN"
+                            toolTipMessage={allowPhoneNumberJoiningToolTip}
                             renderContent={(
                               isToolTipVisible,
                               setToolTipVisible,
@@ -336,7 +356,8 @@ const Create = () => {
                                 isToolTipVisible,
                                 setToolTipVisible,
                               )
-                            }></Tooltip>
+                            }
+                          />
                         </View>
                         <View style={style.infoToggleContainer}>
                           <Toggle
@@ -369,11 +390,11 @@ const Create = () => {
                         );
                       }
                     }}
-                    text={loading ? loadingWithDots : createMeetingButton}
+                    text={loading ? loadingText : createBtnText}
                   />
                   <Spacer size={16} />
                   <LinkButton
-                    text={haveMeetingID}
+                    text={joinWithRoomID}
                     onPress={() => history.push('/join')}
                   />
                 </View>
@@ -390,6 +411,11 @@ const Create = () => {
 };
 
 const style = StyleSheet.create({
+  logoContainerStyle: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
   root: {
     flex: 1,
   },

package/template/src/pages/Endcall.tsx

@@ -20,9 +20,9 @@ const StopForegroundService = () => {
 };
 
 const Endcall = () => {
-  const leftMeetingLabel = 'You have left the meeting.';
+  const leftMeetingLabel = 'You have left the room.';
   const rejoinBtnLabel = 'REJOIN';
-  const createMeetingLabel = 'START NEW MEETING';
+  const createMeetingLabel = 'START NEW ROOM';
   const returnToHomeLabel = 'Returning to the home screen';
   const {store} = useContext(StorageContext);
   const history = useHistory();

package/template/src/pages/Join.tsx

@@ -29,41 +29,69 @@ import TextInput from '../atoms/TextInput';
 import Error from '../subComponents/Error';
 import {useString} from '../utils/useString';
 import {useCustomization} from 'customization-implementation';
-import {useSetMeetingInfo} from '../components/meeting-info/useSetMeetingInfo';
-import {MeetingInfoDefaultValue} from '../components/meeting-info/useMeetingInfo';
+import {useSetRoomInfo} from '../components/room-info/useSetRoomInfo';
+import {RoomInfoDefaultValue} from '../components/room-info/useRoomInfo';
 import Card from '../atoms/Card';
 import Input from '../atoms/Input';
 import LinkButton from '../atoms/LinkButton';
 import Toast from '../../react-native-toast-message';
-import useJoinMeeting from '../utils/useJoinMeeting';
+import useJoinRoom from '../utils/useJoinRoom';
 import isMobileOrTablet from '../utils/isMobileOrTablet';
 import ThemeConfig from '../theme';
 import IDPLogoutComponent from '../auth/IDPLogoutComponent';
+import {
+  joinRoomBtnText,
+  joinRoomCreateBtnText,
+  joinRoomErrorToastHeading,
+  joinRoomErrorToastSubHeading,
+  joinRoomHeading,
+  joinRoomInputLabel,
+  joinRoomInputPlaceHolderText,
+} from '../language/default-labels/joinScreenLabels';
 
-const isLiveStream = $config.EVENT_MODE;
 const mobileOrTablet = isMobileOrTablet();
 
 const Join = () => {
   const hasBrandLogo = useHasBrandLogo();
-  //commented for v1 release
-  // const meetingIdInputPlaceholder = useString('meetingIdInputPlaceholder')();
-  // const enterMeetingButton = useString('enterMeetingButton')();
-  // const createMeetingButton = useString('createMeetingButton')();
-  const meetingIdInputPlaceholder = isLiveStream
-    ? 'Enter Stream ID'
-    : 'Enter Meeting ID';
-  const enterMeetingButton = isLiveStream ? 'Join Stream' : 'Join Meeting';
-  const createMeetingButton = isLiveStream
-    ? 'Create a Stream'
-    : 'Create a meeting';
+
+  const headingText = useString<any>(joinRoomHeading)({
+    eventMode: $config.EVENT_MODE,
+  });
+
+  const inputLabel = useString<any>(joinRoomInputLabel)({
+    eventMode: $config.EVENT_MODE,
+  });
+
+  const placeHolderText = useString<any>(joinRoomInputPlaceHolderText)({
+    eventMode: $config.EVENT_MODE,
+  });
+
+  const joinBtnText = useString<any>(joinRoomBtnText)({
+    eventMode: $config.EVENT_MODE,
+  });
+
+  const createBtnText = useString<any>(joinRoomCreateBtnText)({
+    eventMode: $config.EVENT_MODE,
+  });
+
+  //toast
+  const invalidRoomIdToastHeading = useString<any>(joinRoomErrorToastHeading)({
+    eventMode: $config.EVENT_MODE,
+  });
+  const invalidRoomIdToastSubheading = useString<any>(
+    joinRoomErrorToastSubHeading,
+  )({
+    eventMode: $config.EVENT_MODE,
+  });
+
   const history = useHistory();
   const [phrase, setPhrase] = useState('');
   const [error, setError] = useState<null | {name: string; message: string}>(
     null,
   );
 
-  const useJoin = useJoinMeeting();
-  const {setMeetingInfo} = useSetMeetingInfo();
+  const useJoin = useJoinRoom();
+  const {setRoomInfo} = useSetRoomInfo();
   const createMeeting = () => {
     history.push('/create');
   };
@@ -71,26 +99,30 @@ const Join = () => {
   const startCall = async () => {
     useJoin(phrase)
       .then(() => {
-        setMeetingInfo(MeetingInfoDefaultValue);
+        setRoomInfo(RoomInfoDefaultValue);
         history.push(phrase);
       })
 
-      .catch((error) => {
+      .catch(error => {
         const isInvalidUrl =
-          error?.message.toLowerCase().trim() === 'invalid url' || false;
+          error?.message.toLowerCase().trim() === 'invalid passphrase' || false;
         Toast.show({
+          leadingIconName: 'alert',
           type: 'error',
-          text1: isInvalidUrl ? 'Meeting ID Invalid.' : 'Some Error Occured.',
+          text1: isInvalidUrl
+            ? invalidRoomIdToastHeading
+            : 'Some Error Occured.',
           text2: isInvalidUrl
-            ? 'Please enter a valid Meeting ID'
+            ? invalidRoomIdToastSubheading
             : 'Please try again',
           visibilityTime: 3000,
           primaryBtn: null,
           secondaryBtn: null,
+          leadingIcon: null,
         });
       });
   };
-  const {JoinComponent} = useCustomization((data) => {
+  const {JoinComponent} = useCustomization(data => {
     let components: {
       JoinComponent?: React.ComponentType;
     } = {};
@@ -118,12 +150,7 @@ const Join = () => {
         {error ? <Error error={error} /> : <></>}
         <Card>
           <View>
-            <View
-              style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-              }}>
+            <View style={style.logoContainerStyle}>
               <Logo />
               {isMobileUA() ? (
                 <IDPLogoutComponent
@@ -134,22 +161,15 @@ const Join = () => {
               )}
             </View>
             <Spacer size={20} />
-            <Text style={style.heading}>
-              {isLiveStream ? 'Join a Stream' : 'Join a Meeting'}
-            </Text>
+            <Text style={style.heading}>{headingText}</Text>
             <Spacer size={40} />
             <Input
               labelStyle={style.labelStyle}
-              label={isLiveStream ? 'Stream ID' : 'Meeting ID'}
+              label={inputLabel}
               autoFocus
               value={phrase}
-              helpText={
-                isLiveStream
-                  ? 'Enter the stream ID here for the meeting you’d like to join'
-                  : 'Enter the meeting ID here for the meeting you’d like to join'
-              }
-              placeholder={meetingIdInputPlaceholder}
-              onChangeText={(text) => setPhrase(text)}
+              placeholder={placeHolderText}
+              onChangeText={text => setPhrase(text)}
               onSubmitEditing={() => startCall()}
             />
             <Spacer size={60} />
@@ -159,14 +179,11 @@ const Join = () => {
               iconName="video-on"
               disabled={phrase === ''}
               onPress={() => startCall()}
-              text={enterMeetingButton}
+              text={joinBtnText}
               containerStyle={isMobileUA() && {width: '100%'}}
             />
             <Spacer size={16} />
-            <LinkButton
-              text={createMeetingButton}
-              onPress={() => createMeeting()}
-            />
+            <LinkButton text={createBtnText} onPress={() => createMeeting()} />
             {shouldAuthenticate ? (
               <LogoutButton
                 //@ts-ignore
@@ -183,6 +200,11 @@ const Join = () => {
 };
 
 const style = StyleSheet.create({
+  logoContainerStyle: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
   btnContainer: {
     width: '100%',
     alignItems: 'center',