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

package/template/src/components/Precall.tsx

@@ -9,32 +9,69 @@
  information visit https://appbuilder.agora.io.
 *********************************************
 */
-import React, {useState, useContext, useEffect} from 'react';
-import {View, Text, StyleSheet, Dimensions} from 'react-native';
-import {PropsContext, ClientRole} from '../../agora-rn-uikit';
-import {isValidReactComponent, isWebInternal} from '../utils/common';
-import ColorContext from './ColorContext';
-import {useMeetingInfo} from './meeting-info/useMeetingInfo';
-import PreCallLogo from './common/Logo';
+import PrecallNative from './Precall.native';
+import React, {useContext, useEffect} from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ScrollView,
+  useWindowDimensions,
+} from 'react-native';
+import {PropsContext, ClientRoleType} from '../../agora-rn-uikit';
+import {
+  isMobileUA,
+  isWebInternal,
+  trimText,
+  useIsDesktop,
+  useResponsive,
+  isValidReactComponent,
+} from '../utils/common';
+import {useRoomInfo} from './room-info/useRoomInfo';
 import {useCustomization} from 'customization-implementation';
-import PreCallLocalMute from './precall/LocalMute';
 import {
   PreCallJoinBtn,
   PreCallTextInput,
   PreCallMeetingTitle,
   PreCallSelectDevice,
   PreCallVideoPreview,
+  PreCallJoinCallBtnProps,
+  PreCallLocalMute,
+  JoinWaitingRoomBtn,
 } from './precall/index';
 import SDKEvents from '../utils/SdkEvents';
 import isSDKCheck from '../utils/isSDK';
+import Card from '../atoms/Card';
+import Spacer from '../atoms/Spacer';
 import {useRtc} from 'customization-api';
+import {MeetingTitleProps} from './precall/meetingTitle';
+import {PreCallTextInputProps} from './precall/textInput';
+import ThemeConfig from '../theme';
+import IDPLogoutComponent from '../auth/IDPLogoutComponent';
 
-const JoinRoomInputView = () => {
-  const {JoinButton, Textbox} = useCustomization((data) => {
+import VBPanel, {VBPanelProps} from './virtual-background/VBPanel';
+import Logo from '../components/common/Logo';
+import ImageIcon from '../atoms/ImageIcon';
+import {DeviceSelectProps} from './precall/selectDevice';
+import {useString} from '../utils/useString';
+import {
+  precallYouAreJoiningAsHeading,
+  settingsPanelHeading,
+} from '../language/default-labels/precallScreenLabels';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
+
+const JoinRoomInputView = ({isDesktop}) => {
+  const {rtcProps} = useContext(PropsContext);
+  const {JoinButton, Textbox} = useCustomization(data => {
     let components: {
-      JoinButton: React.ComponentType;
-      Textbox: React.ComponentType;
-    } = {Textbox: PreCallTextInput, JoinButton: PreCallJoinBtn};
+      WaitingRoomButton: React.ComponentType<PreCallJoinCallBtnProps>;
+      JoinButton: React.ComponentType<PreCallJoinCallBtnProps>;
+      Textbox: React.ComponentType<PreCallTextInputProps>;
+    } = {
+      Textbox: PreCallTextInput,
+      JoinButton: PreCallJoinBtn,
+      WaitingRoomButton: JoinWaitingRoomBtn,
+    };
     // commented for v1 release
     // if (
     //   data?.components?.precall &&
@@ -61,36 +98,171 @@ const JoinRoomInputView = () => {
     return components;
   });
   return (
-    <View style={style.btnContainer}>
-      <Textbox />
-      <View style={{height: 20}} />
-      <JoinButton />
+    <View
+      style={$config.EVENT_MODE ? style.lsBtnContainer : style.btnContainer}>
+      <Textbox
+        isDesktop={isDesktop}
+        labelStyle={$config.EVENT_MODE ? style.labelStyle : {}}
+      />
+      {$config.EVENT_MODE ? (
+        <>
+          {/* <Text style={style.subTextStyle}>
+            Enter the name you would like to join the room as
+          </Text> */}
+          {rtcProps.role == ClientRoleType.ClientRoleAudience && (
+            <Spacer size={40} />
+          )}
+        </>
+      ) : (
+        <></>
+      )}
+      <View
+        style={
+          $config.EVENT_MODE &&
+          rtcProps.role == ClientRoleType.ClientRoleAudience && {
+            justifyContent: 'space-between',
+            flex: 1,
+          }
+        }>
+        <Spacer size={10} />
+        <View
+          style={
+            $config.EVENT_MODE && isDesktop
+              ? style.btnContainerStyle
+              : {width: '100%'}
+          }>
+          {$config.ENABLE_WAITING_ROOM &&
+          rtcProps.role === ClientRoleType.ClientRoleAudience ? (
+            <JoinWaitingRoomBtn />
+          ) : (
+            <JoinButton />
+          )}
+        </View>
+      </View>
     </View>
   );
 };
 
+const JoinRoomName = ({isDesktop, isOnPrecall}) => {
+  const {JoinButton, Textbox} = useCustomization(data => {
+    let components: {
+      JoinButton: React.ComponentType<PreCallJoinCallBtnProps>;
+      Textbox: React.ComponentType<PreCallTextInputProps>;
+    } = {
+      Textbox: PreCallTextInput,
+      JoinButton: PreCallJoinBtn,
+    };
+    // commented for v1 release
+    // if (
+    //   data?.components?.precall &&
+    //   typeof data?.components?.precall === 'object'
+    // ) {
+    //   if (
+    //     data?.components?.precall?.joinButton &&
+    //     typeof data?.components?.precall?.joinButton !== 'object'
+    //   ) {
+    //     if (isValidReactComponent(data?.components?.precall?.joinButton)) {
+    //       components.JoinButton = data?.components?.precall?.joinButton;
+    //     }
+    //   }
+
+    //   if (
+    //     data?.components?.precall?.textBox &&
+    //     typeof data?.components?.precall?.textBox !== 'object'
+    //   ) {
+    //     if (isValidReactComponent(data?.components?.precall?.textBox)) {
+    //       components.Textbox = data?.components?.precall?.textBox;
+    //     }
+    //   }
+    // }
+    return components;
+  });
+  return <Textbox isDesktop={isDesktop} isOnPrecall={isOnPrecall} />;
+};
+
+const JoinRoomButton = () => {
+  const {rtcProps} = useContext(PropsContext);
+  const {JoinButton, Textbox, WaitingRoomButton} = useCustomization(data => {
+    let components: {
+      WaitingRoomButton: React.ComponentType<PreCallJoinCallBtnProps>;
+      JoinButton: React.ComponentType<PreCallJoinCallBtnProps>;
+      Textbox: React.ComponentType<PreCallTextInputProps>;
+    } = {
+      Textbox: PreCallTextInput,
+      JoinButton: PreCallJoinBtn,
+      WaitingRoomButton: JoinWaitingRoomBtn,
+    };
+
+    // commented for v1 release
+    // if (
+    //   data?.components?.precall &&
+    //   typeof data?.components?.precall === 'object'
+    // ) {
+    //   if (
+    //     data?.components?.precall?.joinButton &&
+    //     typeof data?.components?.precall?.joinButton !== 'object'
+    //   ) {
+    //     if (isValidReactComponent(data?.components?.precall?.joinButton)) {
+    //       components.JoinButton = data?.components?.precall?.joinButton;
+    //     }
+    //   }
+
+    //   if (
+    //     data?.components?.precall?.textBox &&
+    //     typeof data?.components?.precall?.textBox !== 'object'
+    //   ) {
+    //     if (isValidReactComponent(data?.components?.precall?.textBox)) {
+    //       components.Textbox = data?.components?.precall?.textBox;
+    //     }
+    //   }
+    // }
+    return components;
+  });
+
+  return $config.ENABLE_WAITING_ROOM &&
+    rtcProps.role === ClientRoleType.ClientRoleAudience ? (
+    <JoinWaitingRoomBtn />
+  ) : (
+    <JoinButton />
+  );
+};
+
 const Precall = () => {
-  const {primaryColor} = useContext(ColorContext);
+  const settingsLabel = useString(settingsPanelHeading)();
+  const youAreJoiningAs = useString(precallYouAreJoiningAsHeading)();
   const {rtcProps} = useContext(PropsContext);
+  const {height} = useWindowDimensions();
+  // const {isVBActive, setIsVBActive} = useVB();
+  const [isSettingsOpen, setIsSettingsOpen] = React.useState(true);
+  const [isVBOpen, setIsVBOpen] = React.useState(false);
+  React.useEffect(() => {
+    setIsSettingsOpen(!isVBOpen);
+  }, [isVBOpen]);
+  React.useEffect(() => {
+    setIsVBOpen(!isSettingsOpen);
+  }, [isSettingsOpen]);
   const {
     VideoPreview,
     MeetingName,
     DeviceSelect,
+    VirtualBackgroundComponent,
     PrecallAfterView,
     PrecallBeforeView,
-  } = useCustomization((data) => {
+  } = useCustomization(data => {
     const components: {
       PrecallAfterView: React.ComponentType;
       PrecallBeforeView: React.ComponentType;
-      DeviceSelect: React.ComponentType;
+      DeviceSelect: React.ComponentType<DeviceSelectProps>;
+      VirtualBackgroundComponent: React.ComponentType<VBPanelProps>;
       VideoPreview: React.ComponentType;
-      MeetingName: React.ComponentType;
+      MeetingName: React.ComponentType<MeetingTitleProps>;
     } = {
       PrecallAfterView: React.Fragment,
       PrecallBeforeView: React.Fragment,
       MeetingName: PreCallMeetingTitle,
       VideoPreview: PreCallVideoPreview,
       DeviceSelect: PreCallSelectDevice,
+      VirtualBackgroundComponent: VBPanel,
     };
     // commented for v1 release
     // if (
@@ -137,204 +309,371 @@ const Precall = () => {
     //     }
     //   }
     // }
+
+    if (
+      data?.components?.precall?.virtualBackgroundPanel &&
+      typeof data?.components?.precall.virtualBackgroundPanel !== 'object' &&
+      isValidReactComponent(data?.components?.precall.virtualBackgroundPanel)
+    ) {
+      components.VirtualBackgroundComponent =
+        data?.components?.precall.virtualBackgroundPanel;
+    }
     return components;
   });
   const {
     isJoinDataFetched,
     data: {meetingTitle},
-  } = useMeetingInfo();
+  } = useRoomInfo();
   const rtc = useRtc();
   const isSDK = isSDKCheck();
 
-  const [dim, setDim] = useState<[number, number]>([
-    Dimensions.get('window').width,
-    Dimensions.get('window').height,
-  ]);
-
-  let onLayout = (e: any) => {
-    setDim([e.nativeEvent.layout.width, e.nativeEvent.layout.height]);
-  };
-
   useEffect(() => {
     if (isWebInternal() && !isSDK) {
       if (meetingTitle) {
-        document.title = meetingTitle + ' | ' + $config.APP_NAME;
+        document.title = trimText(meetingTitle) + ' | ' + $config.APP_NAME;
       }
     }
   });
 
+  useEffect(() => {
+    logger.log(
+      LogSource.Internals,
+      'PRECALL_SCREEN',
+      `User has landed on precall room with role as ${
+        rtcProps.role === ClientRoleType.ClientRoleAudience
+          ? 'AUDIENCE'
+          : 'HOST'
+      } and the mode of this call as ${
+        $config.EVENT_MODE ? 'LIVE' : 'COMMUNICATION'
+      }`,
+    );
+  }, []);
+
   useEffect(() => {
     if (isJoinDataFetched) {
-      new Promise((res) =>
+      new Promise(res =>
         // @ts-ignore
-        rtc.RtcEngine.getDevices(function (devices: MediaDeviceInfo[]) {
+        rtc.RtcEngineUnsafe.getDevices(function (devices: MediaDeviceInfo[]) {
           res(devices);
         }),
       ).then((devices: MediaDeviceInfo[]) => {
-        SDKEvents.emit('preJoin', meetingTitle, devices);
+        logger.log(
+          LogSource.Internals,
+          'PRECALL_SCREEN',
+          'fetching available devices',
+          devices,
+        );
+        SDKEvents.emit('ready-to-join', meetingTitle, devices);
       });
     }
   }, [isJoinDataFetched]);
 
-  const isMobileView = () => dim[0] < dim[1] + 150;
-
-  if (!isJoinDataFetched) return <Text style={style.titleFont}>Loading..</Text>;
-
-  const brandHolder = () => <PreCallLogo />;
-
-  const FpePrecallComponent = useCustomization((data) => {
+  const FpePrecallComponent = useCustomization(data => {
     // commented for v1 release
-    // if (
-    //   data?.components?.precall &&
-    //   typeof data?.components?.precall !== 'object'
-    // ) {
-    //   if (isValidReactComponent(data?.components?.precall)) {
-    //     return data?.components?.precall;
-    //   }
-    //   return undefined;
-    // }
-    return undefined;
+    if (
+      data?.components?.precall &&
+      typeof data?.components?.precall !== 'object'
+    ) {
+      if (isValidReactComponent(data?.components?.precall)) {
+        return data?.components?.precall;
+      }
+      return undefined;
+    }
+    // return undefined;
   });
 
+  const isDesktop = useIsDesktop();
+  const getResponsiveValue = useResponsive();
+
   return FpePrecallComponent ? (
     <FpePrecallComponent />
   ) : (
     <>
       <PrecallBeforeView />
-      <View style={style.main} onLayout={onLayout}>
-        {/* Precall screen only changes for audience in Live Stream event */}
-        {$config.EVENT_MODE && rtcProps.role == ClientRole.Audience ? (
-          <View style={style.preCallContainer}>
-            {brandHolder()}
-            <MeetingName />
-            <JoinRoomInputView />
-          </View>
-        ) : (
-          <>
-            {brandHolder()}
-            <View style={style.content}>
-              <View style={style.upperContainer}>
+      {$config.EVENT_MODE &&
+      rtcProps.role == ClientRoleType.ClientRoleAudience ? (
+        <View style={style.root}>
+          {!isMobileUA() ? <IDPLogoutComponent /> : <></>}
+          <ScrollView contentContainerStyle={style.main}>
+            <Card>
+              <View>
+                <MeetingName prefix={youAreJoiningAs} />
+              </View>
+              <Spacer size={32} />
+              <JoinRoomInputView isDesktop={true} />
+            </Card>
+          </ScrollView>
+        </View>
+      ) : (
+        <View style={style.root}>
+          <ScrollView
+            contentContainerStyle={[
+              style.main,
+              {
+                padding: isDesktop('large') ? 0 : 32,
+                flexDirection: isDesktop('large') ? 'row' : 'column',
+              },
+            ]}
+            testID="precall-screen">
+            <View
+              style={[
+                {flexDirection: 'column'},
+                isDesktop('large') ? {flex: 1} : {},
+              ]}>
+              <View
+                style={
+                  isDesktop('large') ? {padding: 32, paddingBottom: 0} : {}
+                }>
+                <Logo />
+                {!isMobileUA() ? (
+                  <IDPLogoutComponent
+                    containerStyle={{marginRight: 0, marginTop: -26}}
+                  />
+                ) : (
+                  <></>
+                )}
+              </View>
+              <View
+                style={{
+                  flex: 1,
+                  flexDirection: !isDesktop('large') ? 'column' : 'row',
+                  justifyContent: 'space-between',
+                }}>
                 <View
-                  style={[
-                    style.leftContent,
-                    isMobileView() ? {paddingRight: 0} : {paddingRight: 40},
-                  ]}>
-                  <VideoPreview />
-                  <PreCallLocalMute />
-                  <View style={{marginBottom: '10%'}}>
-                    {/* This view is visible only on MOBILE view */}
-                    {isMobileView() && <JoinRoomInputView />}
-                  </View>
-                </View>
-                {/* This view is visible only on WEB view */}
-                {!isMobileView() && (
-                  <View style={style.rightContent}>
-                    <MeetingName />
-                    <View
-                      style={[
-                        {shadowColor: primaryColor},
-                        style.precallPickers,
-                      ]}>
-                      <DeviceSelect />
-                      <View style={{width: '100%'}}>
-                        <JoinRoomInputView />
+                  testID="precall-preview"
+                  style={
+                    !isDesktop('large')
+                      ? style.leftContentVertical
+                      : style.leftContentHorizontal
+                  }>
+                  <View style={style.desktopRootcontainer}>
+                    <View>
+                      <MeetingName prefix={youAreJoiningAs} />
+                    </View>
+                    <View style={style.desktopContainer}>
+                      <View style={style.desktopContentContainer}>
+                        <VideoPreview />
+                      </View>
+                      <Spacer size={8} />
+                      <PreCallLocalMute
+                        isSettingsOpen={isSettingsOpen}
+                        setIsSettingsOpen={setIsSettingsOpen}
+                        isVBOpen={isVBOpen}
+                        setIsVBOpen={setIsVBOpen}
+                      />
+                      <Spacer size={8} />
+                      <View
+                        style={{
+                          padding: 20,
+                          borderTopColor: $config.INPUT_FIELD_BORDER_COLOR,
+                          borderTopWidth: 1.26,
+                        }}>
+                        <JoinRoomName isDesktop={true} isOnPrecall={true} />
+                      </View>
+                    </View>
+                    <View>
+                      <Spacer size={52} />
+                      <View>
+                        <JoinRoomButton />
                       </View>
                     </View>
                   </View>
-                )}
+                </View>
               </View>
             </View>
-          </>
-        )}
-      </View>
+            {!isDesktop('large') ? (
+              <Spacer size={24} horizontal={false} />
+            ) : (
+              <></>
+            )}
+            <Card
+              style={
+                !isDesktop('large')
+                  ? style.rightContentVertical
+                  : {
+                      borderRadius: 0,
+                      paddingHorizontal: 0,
+                      paddingVertical: 0,
+                      height: height,
+                      minHeight: '100%',
+                      maxWidth: 476,
+                      minWidth: 476,
+                      justifyContent: 'flex-start',
+                      marginHorizontal: 0,
+                      marginVertical: 0,
+                    }
+              }>
+              <ScrollView>
+                <View style={style.settingHeaderContainer}>
+                  <View style={style.settingIconContainer}>
+                    <ImageIcon
+                      name="settings"
+                      iconSize={24}
+                      tintColor={$config.SECONDARY_ACTION_COLOR}
+                      iconType="plain"
+                    />
+                  </View>
+                  <Text style={style.settingTextStyle}>{settingsLabel}</Text>
+                </View>
+                <View style={style.deviceSelectContainer}>
+                  <DeviceSelect isOnPrecall={true} />
+                </View>
+                {$config.ENABLE_VIRTUAL_BACKGROUND && !$config.AUDIO_ROOM && (
+                  <ScrollView style={style.panelContainer}>
+                    <VirtualBackgroundComponent isOnPrecall={true} />
+                  </ScrollView>
+                )}
+              </ScrollView>
+            </Card>
+          </ScrollView>
+        </View>
+      )}
       <PrecallAfterView />
     </>
   );
 };
 
 const style = StyleSheet.create({
-  full: {flex: 1},
-  main: {
-    flex: 2,
-    // justifyContent: 'space-evenly',
-    marginHorizontal: '10%',
-    minHeight: 500,
+  settingIconContainer: {
+    width: 24,
+    height: 24,
   },
-  preCallContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    minHeight: 350,
-    justifyContent: 'space-between',
-    marginTop: '15%',
+  settingHeaderContainer: {
+    padding: 24,
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: $config.CARD_LAYER_3_COLOR,
+  },
+  panelContainer: {
+    margin: 24,
+    marginTop: 0,
+    overflow: 'hidden',
+    borderWidth: 1,
+    borderColor: $config.INPUT_FIELD_BORDER_COLOR,
+    borderRadius: 8,
+    backgroundColor: $config.INPUT_FIELD_BACKGROUND_COLOR,
   },
-  nav: {
+  settingTextStyle: {
+    color: $config.SECONDARY_ACTION_COLOR,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontSize: 20,
+    fontWeight: '700',
+    paddingLeft: 8,
+  },
+  deviceSelectContainer: {
+    paddingHorizontal: 24,
+  },
+
+  labelStyle: {
+    paddingLeft: 8,
+  },
+  subTextStyle: {
+    marginTop: 8,
+    marginLeft: 8,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.small,
+    lineHeight: 18,
+    color: $config.SEMANTIC_NEUTRAL,
+    textAlign: 'left',
+  },
+  btnContainerStyle: {
+    maxWidth: 337,
+    alignSelf: 'center',
+    marginTop: 50,
+    minWidth: 250,
+  },
+  root: {
     flex: 1,
-    width: '100%',
+  },
+  main: {
+    flexGrow: 1,
     flexDirection: 'row',
-    alignItems: 'center',
     justifyContent: 'center',
   },
-  content: {flex: 6, flexDirection: 'column'},
-  leftContent: {
-    flex: 1.3,
-    height: '100%',
+  leftContentHorizontal: {
+    flex: 2.5,
+    borderRadius: ThemeConfig.BorderRadius.large,
+    overflow: 'hidden',
+    // borderWidth: 1,
+    // borderColor: $config.CARD_LAYER_3_COLOR,
+    shadowColor: $config.HARD_CODED_BLACK_COLOR,
+    shadowOffset: {width: 0, height: 4},
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 5,
   },
-  upperContainer: {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    flex: 3,
+  leftContentVertical: {
+    width: '100%',
+    borderRadius: ThemeConfig.BorderRadius.large,
+    overflow: 'hidden',
+    // borderWidth: 1,
+    // borderColor: $config.CARD_LAYER_3_COLOR,
+    shadowColor: $config.HARD_CODED_BLACK_COLOR,
+    shadowOffset: {width: 0, height: 4},
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 5,
   },
-  rightContent: {
+  rightContentHorizontal: {
     flex: 1,
-    height: '70%',
-    backgroundColor: $config.SECONDARY_FONT_COLOR + '25',
-    paddingLeft: 20,
-    borderRadius: 10,
-    alignItems: 'center',
-    borderWidth: 1,
-    borderStyle: 'solid',
-    borderColor: $config.PRIMARY_COLOR,
-    justifyContent: 'center',
+    borderRadius: 0,
+    paddingHorizontal: 0,
+    paddingVertical: 0,
+    height: '100%',
+    minWidth: 350,
+    justifyContent: 'space-between',
+    marginHorizontal: 0,
+    marginVertical: 0,
   },
+  rightContentVertical: {
+    flex: 1,
+    borderRadius: ThemeConfig.BorderRadius.large,
+    paddingHorizontal: 0,
+    paddingVertical: 0,
+    maxWidth: '100%',
+    height: '100%',
+    justifyContent: 'space-between',
+    marginHorizontal: 0,
+  },
+  rightInputContent: {},
   titleFont: {
     textAlign: 'center',
     fontSize: 20,
-    color: $config.PRIMARY_FONT_COLOR,
-  },
-  titleHeading: {
-    fontSize: 28,
-    fontWeight: '700',
-    textAlign: 'center',
-    color: $config.SECONDARY_FONT_COLOR,
-  },
-  subHeading: {
-    fontSize: 18,
-    fontWeight: '700',
-    color: $config.PRIMARY_FONT_COLOR,
+    color: $config.PRIMARY_ACTION_TEXT_COLOR,
   },
   btnContainer: {
     flex: 1,
     width: '100%',
     justifyContent: 'center',
-    alignItems: 'center',
+    //alignItems: 'center',
   },
-  precallControls: {
-    flexDirection: 'row',
-    alignSelf: 'center',
-    padding: 10,
-    width: '40%',
-    justifyContent: 'space-around',
-    marginVertical: '5%',
+  lsBtnContainer: {
+    flex: 1,
+    width: '100%',
+    justifyContent: 'center',
   },
-  precallPickers: {
-    alignItems: 'center',
-    alignSelf: 'center',
-    justifyContent: 'space-around',
-    marginBottom: '10%',
-    height: '35%',
-    minHeight: 280,
+  meetingTitleContainer: {
+    marginVertical: 10,
+  },
+  desktopRootcontainer: {
+    position: 'relative',
+    overflow: 'hidden',
+    margin: 'auto',
+    maxWidth: 440,
+  },
+  desktopContainer: {
+    paddingTop: 20,
+    paddingBottom: 8,
+    borderRadius: 16,
+    backgroundColor: $config.CARD_LAYER_1_COLOR,
+    marginTop: 20,
+  },
+  desktopContentContainer: {
+    width: 404,
+    height: 256,
+    paddingHorizontal: 20,
   },
 });
 
-export default Precall;
+export default isMobileUA() ? PrecallNative : Precall;