agora-appbuilder-core 3.0.13 → 3.0.28-beta-9

package/template/src/pages/Create.tsx

@@ -10,29 +10,58 @@
 *********************************************
 */
 import React, {useEffect, useState, useContext} from 'react';
-import {View, Text, StyleSheet, ScrollView} from 'react-native';
+import {View, Text, StyleSheet, ScrollView, Pressable} from 'react-native';
 import {useHistory} from '../components/Router';
-import Checkbox from '../subComponents/Checkbox';
 import PrimaryButton from '../atoms/PrimaryButton';
-import SecondaryButton from '../atoms/SecondaryButton';
-import HorizontalRule from '../atoms/HorizontalRule';
-import TextInput from '../atoms/TextInput';
 import Toast from '../../react-native-toast-message';
 import {ErrorContext} from '../components/common';
 import ShareLink from '../components/Share';
 import Logo from '../components/common/Logo';
-import {isWebInternal, isValidReactComponent} from '../utils/common';
+import {
+  isWebInternal,
+  maxInputLimit,
+  isMobileUA,
+  trimText,
+} 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 SDKEvents from '../utils/SdkEvents';
-import {MeetingInfoDefaultValue} from '../components/meeting-info/useMeetingInfo';
-import {useSetMeetingInfo} from '../components/meeting-info/useSetMeetingInfo';
+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';
+import Spacer from '../atoms/Spacer';
+import LinkButton from '../atoms/LinkButton';
+import StorageContext from '../components/StorageContext';
+import ThemeConfig from '../theme';
+import Tooltip from '../atoms/Tooltip';
+import ImageIcon from '../atoms/ImageIcon';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+import {randomNameGenerator} from '../utils';
+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';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
 
 const Create = () => {
-  const {CreateComponent} = useCustomization((data) => {
+  const {CreateComponent} = useCustomization(data => {
     let components: {
       CreateComponent?: React.ElementType;
     } = {};
@@ -50,60 +79,96 @@ const Create = () => {
     return components;
   });
 
-  const useJoin = useJoinMeeting();
-
+  const useJoin = useJoinRoom();
+  const {setStore} = useContext(StorageContext);
   const {setGlobalErrorMessage} = useContext(ErrorContext);
   const history = useHistory();
   const [loading, setLoading] = useState(false);
   const [roomTitle, onChangeRoomTitle] = useState('');
-  const [pstnCheckbox, setPstnCheckbox] = useState(false);
-  const [hostControlCheckbox, setHostControlCheckbox] = useState(true);
+  // const [randomRoomTitle, setRandomRoomTitle] = useState('');
+  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 loadingText = useString('loadingText')();
+
+  //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
 
-  const createdText = 'Created';
-  const hostControlsToggle = (toggle: boolean) =>
-    toggle
-      ? 'Restrict Host Controls (Separate host link)'
-      : 'Restrict Host Controls (Everyone is a Host)';
-  const pstnToggle = (value: boolean) => 'Use PSTN (Join by dialing a number)';
-  const meetingNameInputPlaceholder = useString(
-    'meetingNameInputPlaceholder',
+  //placeholder
+  const placeHolderText = useString(createRoomInputPlaceholderText)();
+  //placeholder
+
+  //toggle
+  const everyoneCoHost = useString(createRoomMakeEveryOneCoHost)();
+  const everyoneCoHostTooltip = useString(
+    createRoomMakeEveryOneCoHostTooltipText,
+  )();
+  const allowPhoneNumberJoining = useString(
+    createRoomAllowPhoneNumberJoining,
+  )();
+  const allowPhoneNumberJoiningToolTip = useString(
+    createRoomAllowPhoneNumberJoiningTooltipText,
   )();
-  const loadingWithDots = 'Loading...';
-  const createMeetingButton = 'Create Meeting';
-  const haveMeetingID = 'Have a Meeting ID?';
+  //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 createRoomErrorToastHeadingText = useString(
+    createRoomErrorToastHeading,
+  )();
+  const createRoomErrorToastSubHeadingText = useString(
+    createRoomErrorToastSubHeading,
+  )();
+
+  const isDesktop = !isMobileUA();
 
   useEffect(() => {
-    if (isWebInternal()) {
+    //Generating the random room title for placeholder
+    // setRandomRoomTitle(
+    //   `${randomNameGenerator(3)}-${randomNameGenerator(
+    //     3,
+    //   )}-${randomNameGenerator(3)}`,
+    // );
+    logger.log(
+      LogSource.Internals,
+      'CREATE_MEETING',
+      'User has landed on create room',
+    );
+    if (isWebInternal() && !isSDK) {
       document.title = $config.APP_NAME;
     }
     console.log('[SDKEvents] Join listener registered');
-    const unbind = SDKEvents.on(
-      'joinMeetingWithPhrase',
-      (phrase, resolve, reject) => {
-        console.log('SDKEvents: joinMeetingWithPhrase event called', phrase);
-        try {
-          setMeetingInfo(MeetingInfoDefaultValue);
-          history.push(phrase);
-          resolve();
-        } catch (error) {
-          reject(error);
-        }
-      },
-    );
-    SDKEvents.emit('joinInit');
-    return () => {
-      unbind();
-    };
+    return () => {};
   }, []);
 
   const showShareScreen = () => {
@@ -116,24 +181,92 @@ const Create = () => {
     isSeparateHostLink: boolean,
   ) => {
     if (roomTitle !== '') {
+      logger.log(
+        LogSource.Internals,
+        'CREATE_MEETING',
+        'User wants to create room',
+      );
       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: createdText + ': ' + roomTitle,
-          visibilityTime: 1000,
+          text1: createRoomSuccessToastHeadingText(trimText(roomTitle)),
+          text2: createRoomSuccessToastSubHeadingText,
+          visibilityTime: 3000,
+          primaryBtn: null,
+          secondaryBtn: null,
+          leadingIcon: null,
         });
         showShareScreen();
       } catch (error) {
         setLoading(false);
-        setGlobalErrorMessage(error);
+        logger.error(
+          LogSource.Internals,
+          'CREATE_MEETING',
+          'There was error while creating meeting',
+          error,
+          {
+            networkError: {
+              name: error?.networkError?.name,
+              //@ts-ignore
+              code: error?.networkError?.result?.error?.code,
+              //@ts-ignore
+              message: error?.networkError?.result?.error?.message,
+            },
+          },
+        );
+        if (
+          createRoomErrorToastHeadingText ||
+          createRoomErrorToastSubHeadingText
+        ) {
+          setGlobalErrorMessage({
+            name: createRoomErrorToastHeadingText,
+            message: createRoomErrorToastSubHeadingText,
+          });
+        } else {
+          setGlobalErrorMessage(error);
+        }
       }
     }
   };
 
+  const renderInfoIcon = (isToolTipVisible, setToolTipVisible) => {
+    return (
+      <Pressable onPress={() => setToolTipVisible(true)}>
+        <ImageIcon
+          iconType="plain"
+          name="info"
+          iconSize={20}
+          tintColor={
+            isToolTipVisible
+              ? $config.SECONDARY_ACTION_COLOR
+              : $config.SEMANTIC_NEUTRAL
+          }
+        />
+      </Pressable>
+    );
+  };
+
+  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,
+    });
+  };
+
   return (
     <CreateProvider
       value={{
@@ -143,81 +276,165 @@ const Create = () => {
         CreateComponent ? (
           <CreateComponent />
         ) : (
-          <ScrollView contentContainerStyle={style.main}>
-            <Logo />
-            <View style={style.content}>
-              <View style={style.leftContent}>
-                <Text style={style.heading}>{$config.APP_NAME}</Text>
-                <Text style={style.headline}>
-                  {$config.LANDING_SUB_HEADING}
-                </Text>
-                <View style={style.inputs}>
-                  <TextInput
-                    value={roomTitle}
-                    onChangeText={(text) => onChangeRoomTitle(text)}
-                    onSubmitEditing={() =>
-                      createRoomAndNavigateToShare(
-                        roomTitle,
-                        pstnCheckbox,
-                        hostControlCheckbox,
-                      )
-                    }
-                    placeholder={meetingNameInputPlaceholder}
-                  />
-                  <View style={{paddingVertical: 10}}>
-                    <View style={style.checkboxHolder}>
-                      {$config.EVENT_MODE ? (
-                        <></>
-                      ) : (
-                        <>
-                          <Checkbox
-                            disabled={$config.EVENT_MODE}
-                            value={hostControlCheckbox}
-                            onValueChange={setHostControlCheckbox}
-                          />
-                          <Text style={style.checkboxTitle}>
-                            {/* Restrict Host Controls (Separate host link) */}
-                            {hostControlsToggle(hostControlCheckbox)}
-                          </Text>
-                        </>
-                      )}
-                    </View>
-                    {$config.PSTN ? (
-                      <View style={style.checkboxHolder}>
-                        <Checkbox
-                          value={pstnCheckbox}
-                          onValueChange={setPstnCheckbox}
-                        />
-                        <Text style={style.checkboxTitle}>
-                          {pstnToggle(pstnCheckbox)}
-                        </Text>
-                      </View>
+          <View style={style.root}>
+            {!isMobileUA() ? (
+              <IDPLogoutComponent containerStyle={{marginBottom: -100}} />
+            ) : (
+              <></>
+            )}
+            <ScrollView contentContainerStyle={style.main}>
+              <Card>
+                <View>
+                  <View style={style.logoContainerStyle}>
+                    <Logo />
+                    {isMobileUA() ? (
+                      <IDPLogoutComponent
+                        containerStyle={{marginTop: 0, marginRight: 0}}
+                      />
                     ) : (
                       <></>
                     )}
                   </View>
-                  <View style={style.btnContainer}>
-                    <PrimaryButton
-                      disabled={roomTitle === '' || loading}
-                      onPress={() =>
+                  <Spacer size={isDesktop ? 20 : 16} />
+                  <Text style={style.heading}>{headingText}</Text>
+                  <Spacer size={40} />
+                  <Input
+                    maxLength={maxInputLimit}
+                    labelStyle={style.inputLabelStyle}
+                    label={inputLabel}
+                    value={roomTitle}
+                    placeholder={placeHolderText}
+                    onChangeText={text => onChangeRoomTitle(text)}
+                    onSubmitEditing={() => {
+                      if (!roomTitle?.trim()) {
+                        return;
+                      } else {
+                        if (!$config.BACKEND_ENDPOINT) {
+                          showError();
+                        } else {
+                          // !roomTitle?.trim() &&
+                          //   onChangeRoomTitle(randomRoomTitle);
+                          createRoomAndNavigateToShare(
+                            roomTitle?.trim(),
+                            pstnToggle,
+                            !coHostToggle,
+                          );
+                        }
+                      }
+                    }}
+                  />
+                  <Spacer size={40} />
+                  {$config.EVENT_MODE ? (
+                    <></>
+                  ) : (
+                    <View
+                      style={[
+                        style.toggleContainer,
+                        style.upper,
+                        !$config.PSTN ? style.lower : {},
+                      ]}>
+                      <View style={style.infoContainer}>
+                        <Text numberOfLines={1} style={style.toggleLabel}>
+                          {everyoneCoHost}
+                        </Text>
+                        <Tooltip
+                          activeBgStyle={style.tooltipActiveBgStyle}
+                          defaultBgStyle={style.tooltipDefaultBgStyle}
+                          toolTipMessage={everyoneCoHostTooltip}
+                          renderContent={(
+                            isToolTipVisible,
+                            setToolTipVisible,
+                          ) =>
+                            renderInfoIcon(isToolTipVisible, setToolTipVisible)
+                          }
+                        />
+                      </View>
+                      <View style={style.infoToggleContainer}>
+                        <Toggle
+                          disabled={$config.EVENT_MODE}
+                          isEnabled={coHostToggle}
+                          toggleSwitch={setCoHostToggle}
+                        />
+                      </View>
+                    </View>
+                  )}
+                  {$config.PSTN ? (
+                    <>
+                      <View style={style.separator} />
+                      <View
+                        style={[
+                          style.toggleContainer,
+                          style.lower,
+                          $config.EVENT_MODE ? style.upper : {},
+                        ]}>
+                        <View style={style.infoContainer}>
+                          <Text numberOfLines={1} style={style.toggleLabel}>
+                            {allowPhoneNumberJoining}
+                          </Text>
+                          <Tooltip
+                            activeBgStyle={style.tooltipActiveBgStyle}
+                            defaultBgStyle={style.tooltipDefaultBgStyle}
+                            toolTipMessage={allowPhoneNumberJoiningToolTip}
+                            renderContent={(
+                              isToolTipVisible,
+                              setToolTipVisible,
+                            ) =>
+                              renderInfoIcon(
+                                isToolTipVisible,
+                                setToolTipVisible,
+                              )
+                            }
+                          />
+                        </View>
+                        <View style={style.infoToggleContainer}>
+                          <Toggle
+                            isEnabled={pstnToggle}
+                            toggleSwitch={setPstnToggle}
+                          />
+                        </View>
+                      </View>
+                    </>
+                  ) : (
+                    <></>
+                  )}
+                  <Spacer size={isDesktop ? 60 : 125} />
+                </View>
+                <View style={[style.btnContainer]}>
+                  <PrimaryButton
+                    iconName={'video-plus'}
+                    disabled={loading || !roomTitle?.trim()}
+                    containerStyle={!isDesktop && {width: '100%'}}
+                    onPress={() => {
+                      if (!$config.BACKEND_ENDPOINT) {
+                        showError();
+                      } else {
+                        // !roomTitle?.trim() &&
+                        //   onChangeRoomTitle(randomRoomTitle);
                         createRoomAndNavigateToShare(
-                          roomTitle,
-                          pstnCheckbox,
-                          hostControlCheckbox,
-                        )
+                          roomTitle?.trim(),
+                          pstnToggle,
+                          !coHostToggle,
+                        );
                       }
-                      text={loading ? loadingWithDots : createMeetingButton}
-                    />
-                    <HorizontalRule />
-                    <SecondaryButton
-                      onPress={() => history.push('/join')}
-                      text={haveMeetingID}
-                    />
-                  </View>
+                    }}
+                    text={loading ? loadingText : createBtnText}
+                  />
+                  <Spacer size={16} />
+                  <LinkButton
+                    text={joinWithRoomID}
+                    onPress={() => {
+                      logger.log(
+                        LogSource.Internals,
+                        'CREATE_MEETING',
+                        'User is navigated to join-room from create-room with an option to join using meeting id',
+                      );
+                      history.push('/join');
+                    }}
+                  />
                 </View>
-              </View>
-            </View>
-          </ScrollView>
+              </Card>
+            </ScrollView>
+          </View>
         )
       ) : (
         <></>
@@ -228,108 +445,83 @@ const Create = () => {
 };
 
 const style = StyleSheet.create({
-  main: {
-    paddingVertical: '8%',
-    marginHorizontal: '8%',
-    display: 'flex',
-    justifyContent: 'space-evenly',
-    flexGrow: 1,
-  },
-  nav: {
-    flex: 1,
-    width: '100%',
+  logoContainerStyle: {
     flexDirection: 'row',
+    justifyContent: 'space-between',
     alignItems: 'center',
-    alignSelf: 'center',
-    justifyContent: 'center',
   },
-  content: {flex: 6, flexDirection: 'row'},
-  leftContent: {
-    width: '100%',
+  root: {
     flex: 1,
-    justifyContent: 'space-evenly',
-    minHeight: 350,
-    // marginRight: '5%',
-    marginHorizontal: 'auto',
+  },
+  inputLabelStyle: {
+    paddingLeft: 8,
+  },
+  main: {
+    flexGrow: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
   },
   heading: {
-    fontSize: 32,
+    fontSize: ThemeConfig.FontSize.extraLarge,
     fontWeight: '700',
-    textAlign: 'center',
-    color: $config.PRIMARY_FONT_COLOR,
-    marginBottom: 20,
+    lineHeight: ThemeConfig.FontSize.extraLarge,
+    color: $config.FONT_COLOR,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    opacity: ThemeConfig.EmphasisOpacity.high,
   },
   headline: {
     fontSize: 18,
     fontWeight: '400',
     textAlign: 'center',
-    color: $config.PRIMARY_FONT_COLOR,
+    color: $config.FONT_COLOR,
     marginBottom: 40,
   },
-  inputs: {
-    flex: 1,
-    // marginVertical: '2%',
+  btnContainer: {
     width: '100%',
-    alignSelf: 'flex-start',
     alignItems: 'center',
-    justifyContent: 'space-evenly',
   },
-  // textInput: textInput,
-  checkboxHolder: {
-    marginVertical: 0,
+  toggleContainer: {
     flexDirection: 'row',
-    marginTop: 0,
-    marginBottom: 20,
-    // flex: .2,
-    // height: 10,
-    // justifyContent: 'center',
-    // alignContent: 'center',
-    justifyContent: 'flex-start',
-    // alignItems: 'flex-start',
+    backgroundColor: $config.CARD_LAYER_2_COLOR,
+    paddingVertical: 22,
+    paddingHorizontal: 20,
   },
-  checkboxTitle: {
-    color: $config.PRIMARY_FONT_COLOR + '60',
-    paddingHorizontal: 5,
-    alignSelf: 'center',
-    // marginVertical: 'auto',
-    // fontWeight: '700',
+  upper: {
+    borderTopLeftRadius: ThemeConfig.BorderRadius.medium,
+    borderTopRightRadius: ThemeConfig.BorderRadius.medium,
   },
-  checkboxCaption: {
-    color: $config.PRIMARY_FONT_COLOR + '60',
-    paddingHorizontal: 5,
+  lower: {
+    borderBottomLeftRadius: ThemeConfig.BorderRadius.medium,
+    borderBottomRightRadius: ThemeConfig.BorderRadius.medium,
   },
-  checkboxTextHolder: {
-    marginVertical: 0, //check if 5
-    flexDirection: 'column',
+  toggleLabel: {
+    color: $config.FONT_COLOR,
+    fontSize: ThemeConfig.FontSize.normal,
+    marginRight: 4,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    alignSelf: 'center',
   },
-  // urlTitle: {
-  //   color: '#fff',
-  //   fontSize: 14,
-  // },
-  urlHolder: {
-    width: '100%',
-    paddingHorizontal: 10,
-    marginBottom: 15,
-    justifyContent: 'center',
-    maxWidth: 400,
-    minHeight: 45,
+  separator: {
+    height: 1,
   },
-  // url: {
-  //   color: '#fff',
-  //   fontSize: 18,
-  //   fontWeight: '700',
-  //   textDecorationLine: 'underline',
-  // },
-  pstnHolder: {
+  infoContainer: {
     flexDirection: 'row',
-    width: '80%',
+    flex: 0.8,
   },
-  pstnMargin: {
-    marginRight: '10%',
+  infoToggleContainer: {
+    flex: 0.2,
+    alignItems: 'flex-end',
+    alignSelf: 'center',
   },
-  btnContainer: {
-    width: '100%',
-    alignItems: 'center',
+  tooltipActiveBgStyle: {
+    backgroundColor:
+      $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['20%'],
+    borderRadius: 14,
+    padding: 5,
+  },
+  tooltipDefaultBgStyle: {
+    padding: 5,
   },
 });