agora-appbuilder-core 4.0.0 → 4.0.1

package/template/src/subComponents/ChatInput.ios.tsx

@@ -17,30 +17,33 @@ import {useString} from '../utils/useString';
 import {useChatMessages} from '../components/chat-messages/useChatMessages';
 import {isIOS, isValidReactComponent, isWebInternal} from '../utils/common';
 import {useCustomization} from 'customization-implementation';
-import {useChatUIControl} from '../components/chat-ui/useChatUIControl';
-import {useRender, useUserName} from 'customization-api';
+import {
+  ChatType,
+  useChatUIControls,
+} from '../components/chat-ui/useChatUIControls';
+import {useContent, useUserName} from 'customization-api';
 import ImageIcon from '../atoms/ImageIcon';
 import ThemeConfig from '../theme';
 import {BottomSheetTextInput} from '@gorhom/bottom-sheet';
+import {
+  groupChatInputPlaceHolderText,
+  privateChatInputPlaceHolderText,
+} from '../language/default-labels/videoCallScreenLabels';
 
 export interface ChatSendButtonProps {
   render?: (onPress: () => void) => JSX.Element;
 }
 
 export const ChatSendButton = (props: ChatSendButtonProps) => {
-  const {
-    selectedChatUserId: selectedUserId,
-    message,
-    setMessage,
-    inputActive,
-  } = useChatUIControl();
+  const {privateChatUser, message, setMessage, inputActive} =
+    useChatUIControls();
   const {sendChatMessage} = useChatMessages();
   const onPress = () => {
-    if (!selectedUserId) {
+    if (!privateChatUser) {
       sendChatMessage(message);
       setMessage && setMessage('');
     } else {
-      sendChatMessage(message, selectedUserId);
+      sendChatMessage(message, privateChatUser);
       setMessage && setMessage('');
     }
   };
@@ -70,34 +73,35 @@ export interface ChatTextInputProps {
 }
 export const ChatTextInput = (props: ChatTextInputProps) => {
   let chatInputRef = useRef(null);
-  const {
-    selectedChatUserId: selectedUserId,
-    message,
-    setMessage,
-    inputActive,
-    privateActive,
-  } = useChatUIControl();
+  const {privateChatUser, message, setMessage, chatType, inputActive} =
+    useChatUIControls();
   const {sendChatMessage} = useChatMessages();
-  const {renderList} = useRender();
+  const {defaultContent} = useContent();
   //commented for v1 release
   // const chatMessageInputPlaceholder = useString(
   //   'chatMessageInputPlaceholder',
   // )();
   const [name] = useUserName();
-  const chatMessageInputPlaceholder = privateActive
-    ? `Private Message to ${renderList[selectedUserId].name}`
-    : `Chat publicly as ${name}...`;
+  const groupChatInputPlaceHolder = useString(groupChatInputPlaceHolderText);
+  const privateChatInputPlaceHolder = useString(
+    privateChatInputPlaceHolderText,
+  );
+
+  const chatMessageInputPlaceholder =
+    chatType === ChatType.Private
+      ? privateChatInputPlaceHolder(defaultContent[privateChatUser]?.name)
+      : groupChatInputPlaceHolder(name);
   const onChangeText = (text: string) => setMessage(text);
   const onSubmitEditing = () => {
-    if (!selectedUserId) {
+    if (!privateChatUser) {
       sendChatMessage(message);
       setMessage('');
     } else {
-      sendChatMessage(message, selectedUserId);
+      sendChatMessage(message, privateChatUser);
       setMessage('');
     }
   };
-  const {setInputActive} = useChatUIControl();
+  const {setInputActive} = useChatUIControls();
 
   useEffect(() => {
     setTimeout(() => {
@@ -148,69 +152,12 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
 /**
  * Input component for the Chat interface
  */
-const ChatInput = (props: {
-  chatInput?: React.ComponentType<ChatTextInputProps>;
-  chatSendButton?: React.ComponentType<ChatSendButtonProps>;
-}) => {
-  const {primaryColor} = useContext(ColorContext);
-  const {ChatInputComponent, ChatSendButtonComponent} = useCustomization(
-    (data) => {
-      let components: {
-        ChatInputComponent: React.ComponentType<ChatTextInputProps>;
-        ChatSendButtonComponent: React.ComponentType<ChatSendButtonProps>;
-      } = {
-        ChatInputComponent: ChatTextInput,
-        ChatSendButtonComponent: ChatSendButton,
-      };
-      if (
-        data?.components?.videoCall &&
-        typeof data?.components?.videoCall === 'object'
-      ) {
-        if (
-          data?.components?.videoCall?.chat &&
-          typeof data?.components?.videoCall?.chat === 'object'
-        ) {
-          if (
-            data?.components?.videoCall?.chat?.chatInput &&
-            typeof data?.components?.videoCall?.chat?.chatInput !== 'object' &&
-            isValidReactComponent(data?.components?.videoCall?.chat?.chatInput)
-          ) {
-            components.ChatInputComponent =
-              data?.components?.videoCall?.chat?.chatInput;
-          }
-          if (
-            data?.components?.videoCall?.chat?.chatSendButton &&
-            typeof data?.components?.videoCall?.chat?.chatSendButton !==
-              'object' &&
-            isValidReactComponent(
-              data?.components?.videoCall?.chat?.chatSendButton,
-            )
-          ) {
-            components.ChatSendButtonComponent =
-              data?.components?.videoCall?.chat?.chatSendButton;
-          }
-        }
-      } else {
-        if (props?.chatInput && isValidReactComponent(props.chatInput)) {
-          components.ChatInputComponent = props.chatInput;
-        }
-        if (
-          props?.chatSendButton &&
-          isValidReactComponent(props.chatSendButton)
-        ) {
-          components.ChatSendButtonComponent = props.chatSendButton;
-        }
-      }
-      return components;
-    },
-  );
-
-  const {inputActive} = useChatUIControl();
-
+export const ChatInput = () => {
+  const {inputActive} = useChatUIControls();
   return (
     <View style={[style.inputView, inputActive ? style.inputActiveView : {}]}>
-      <ChatInputComponent />
-      <ChatSendButtonComponent />
+      <ChatTextInput />
+      <ChatSendButton />
     </View>
   );
 };

package/template/src/subComponents/ChatInput.tsx

@@ -17,10 +17,17 @@ import {useString} from '../utils/useString';
 import {useChatMessages} from '../components/chat-messages/useChatMessages';
 import {isValidReactComponent, isWebInternal} from '../utils/common';
 import {useCustomization} from 'customization-implementation';
-import {useChatUIControl} from '../components/chat-ui/useChatUIControl';
-import {useRender, useUserName} from 'customization-api';
+import {
+  ChatType,
+  useChatUIControls,
+} from '../components/chat-ui/useChatUIControls';
+import {useContent, useUserName} from 'customization-api';
 import ImageIcon from '../atoms/ImageIcon';
 import ThemeConfig from '../theme';
+import {
+  groupChatInputPlaceHolderText,
+  privateChatInputPlaceHolderText,
+} from '../language/default-labels/videoCallScreenLabels';
 
 export interface ChatSendButtonProps {
   render?: (onPress: () => void) => JSX.Element;
@@ -28,11 +35,11 @@ export interface ChatSendButtonProps {
 
 export const ChatSendButton = (props: ChatSendButtonProps) => {
   const {
-    selectedChatUserId: selectedUserId,
+    privateChatUser: selectedUserId,
     message,
     setMessage,
     inputActive,
-  } = useChatUIControl();
+  } = useChatUIControls();
   const {sendChatMessage} = useChatMessages();
   const onPress = () => {
     if (!selectedUserId) {
@@ -69,34 +76,35 @@ export interface ChatTextInputProps {
 }
 export const ChatTextInput = (props: ChatTextInputProps) => {
   let chatInputRef = useRef(null);
-  const {
-    selectedChatUserId: selectedUserId,
-    message,
-    setMessage,
-    inputActive,
-    privateActive,
-  } = useChatUIControl();
+  const {privateChatUser, message, setMessage, inputActive, chatType} =
+    useChatUIControls();
   const {sendChatMessage} = useChatMessages();
-  const {renderList} = useRender();
+  const {defaultContent} = useContent();
   //commented for v1 release
   // const chatMessageInputPlaceholder = useString(
   //   'chatMessageInputPlaceholder',
   // )();
   const [name] = useUserName();
-  const chatMessageInputPlaceholder = privateActive
-    ? `Private Message to ${renderList[selectedUserId].name}`
-    : `Chat publicly as ${name}...`;
+  const groupChatInputPlaceHolder = useString(groupChatInputPlaceHolderText);
+  const privateChatInputPlaceHolder = useString(
+    privateChatInputPlaceHolderText,
+  );
+
+  const chatMessageInputPlaceholder =
+    chatType === ChatType.Private
+      ? privateChatInputPlaceHolder(defaultContent[privateChatUser]?.name)
+      : groupChatInputPlaceHolder(name);
   const onChangeText = (text: string) => setMessage(text);
   const onSubmitEditing = () => {
-    if (!selectedUserId) {
+    if (!privateChatUser) {
       sendChatMessage(message);
       setMessage('');
     } else {
-      sendChatMessage(message, selectedUserId);
+      sendChatMessage(message, privateChatUser);
       setMessage('');
     }
   };
-  const {setInputActive} = useChatUIControl();
+  const {setInputActive} = useChatUIControls();
 
   useEffect(() => {
     setTimeout(() => {
@@ -115,7 +123,7 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
     )
   ) : (
     <TextInput
-      setRef={(ref) => (chatInputRef.current = ref)}
+      setRef={ref => (chatInputRef.current = ref)}
       onFocus={() => setInputActive(true)}
       onBlur={() => setInputActive(false)}
       value={message}
@@ -148,69 +156,12 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
 /**
  * Input component for the Chat interface
  */
-const ChatInput = (props: {
-  chatInput?: React.ComponentType<ChatTextInputProps>;
-  chatSendButton?: React.ComponentType<ChatSendButtonProps>;
-}) => {
-  const {primaryColor} = useContext(ColorContext);
-  const {ChatInputComponent, ChatSendButtonComponent} = useCustomization(
-    (data) => {
-      let components: {
-        ChatInputComponent: React.ComponentType<ChatTextInputProps>;
-        ChatSendButtonComponent: React.ComponentType<ChatSendButtonProps>;
-      } = {
-        ChatInputComponent: ChatTextInput,
-        ChatSendButtonComponent: ChatSendButton,
-      };
-      if (
-        data?.components?.videoCall &&
-        typeof data?.components?.videoCall === 'object'
-      ) {
-        if (
-          data?.components?.videoCall?.chat &&
-          typeof data?.components?.videoCall?.chat === 'object'
-        ) {
-          if (
-            data?.components?.videoCall?.chat?.chatInput &&
-            typeof data?.components?.videoCall?.chat?.chatInput !== 'object' &&
-            isValidReactComponent(data?.components?.videoCall?.chat?.chatInput)
-          ) {
-            components.ChatInputComponent =
-              data?.components?.videoCall?.chat?.chatInput;
-          }
-          if (
-            data?.components?.videoCall?.chat?.chatSendButton &&
-            typeof data?.components?.videoCall?.chat?.chatSendButton !==
-              'object' &&
-            isValidReactComponent(
-              data?.components?.videoCall?.chat?.chatSendButton,
-            )
-          ) {
-            components.ChatSendButtonComponent =
-              data?.components?.videoCall?.chat?.chatSendButton;
-          }
-        }
-      } else {
-        if (props?.chatInput && isValidReactComponent(props.chatInput)) {
-          components.ChatInputComponent = props.chatInput;
-        }
-        if (
-          props?.chatSendButton &&
-          isValidReactComponent(props.chatSendButton)
-        ) {
-          components.ChatSendButtonComponent = props.chatSendButton;
-        }
-      }
-      return components;
-    },
-  );
-
-  const {inputActive} = useChatUIControl();
-
+export const ChatInput = () => {
+  const {inputActive} = useChatUIControls();
   return (
     <View style={[style.inputView, inputActive ? style.inputActiveView : {}]}>
-      <ChatInputComponent />
-      <ChatSendButtonComponent />
+      <ChatTextInput />
+      <ChatSendButton />
     </View>
   );
 };

package/template/src/subComponents/Checkbox.native.tsx

@@ -1,47 +1,47 @@
-/*
-********************************************
- Copyright © 2021 Agora Lab, Inc., all rights reserved.
- AppBuilder and all associated components, source code, APIs, services, and documentation 
- (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
- accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
- Use without a license or in violation of any license terms and conditions (including use for 
- any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
- information visit https://appbuilder.agora.io. 
-*********************************************
-*/
-import React, {useContext} from 'react';
-import CheckBox from '@react-native-community/checkbox';
-import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+// /*
+// ********************************************
+//  Copyright © 2021 Agora Lab, Inc., all rights reserved.
+//  AppBuilder and all associated components, source code, APIs, services, and documentation
+//  (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be
+//  accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.
+//  Use without a license or in violation of any license terms and conditions (including use for
+//  any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more
+//  information visit https://appbuilder.agora.io.
+// *********************************************
+// */
+// import React, {useContext} from 'react';
+// import CheckBox from '@react-native-community/checkbox';
+// import hexadecimalTransparency from '../utils/hexadecimalTransparency';
 
-/**
- * A checkbox component for mobile
- */
-const Checkbox = (props: any) => {
-  const urlCheckbox = props.value;
-  const setUrlCheckbox = props.onValueChange;
-  return (
-    <CheckBox
-      value={urlCheckbox}
-      onValueChange={setUrlCheckbox}
-      disabled={props?.disabled}
-      tintColors={{
-        true: props?.disabled ? 'grey' : $config.PRIMARY_ACTION_BRAND_COLOR,
-        false: props?.disabled
-          ? 'grey'
-          : $config.FONT_COLOR + hexadecimalTransparency['80%'],
-      }}
-      tintColor={
-        props?.disabled
-          ? 'grey'
-          : $config.FONT_COLOR + hexadecimalTransparency['80%']
-      }
-      onCheckColor={
-        props?.disabled ? 'grey' : $config.PRIMARY_ACTION_BRAND_COLOR
-      }
-      onTintColor={
-        props?.disabled ? 'grey' : $config.PRIMARY_ACTION_BRAND_COLOR
-      }
-    />
-  );
-};
-export default Checkbox;
+// /**
+//  * A checkbox component for mobile
+//  */
+// const Checkbox = (props: any) => {
+//   const urlCheckbox = props.value;
+//   const setUrlCheckbox = props.onValueChange;
+//   return (
+//     <CheckBox
+//       value={urlCheckbox}
+//       onValueChange={setUrlCheckbox}
+//       disabled={props?.disabled}
+//       tintColors={{
+//         true: props?.disabled ? 'grey' : $config.PRIMARY_ACTION_BRAND_COLOR,
+//         false: props?.disabled
+//           ? 'grey'
+//           : $config.FONT_COLOR + hexadecimalTransparency['80%'],
+//       }}
+//       tintColor={
+//         props?.disabled
+//           ? 'grey'
+//           : $config.FONT_COLOR + hexadecimalTransparency['80%']
+//       }
+//       onCheckColor={
+//         props?.disabled ? 'grey' : $config.PRIMARY_ACTION_BRAND_COLOR
+//       }
+//       onTintColor={
+//         props?.disabled ? 'grey' : $config.PRIMARY_ACTION_BRAND_COLOR
+//       }
+//     />
+//   );
+// };
+// export default Checkbox;

package/template/src/subComponents/Checkbox.tsx

@@ -1,15 +1,16 @@
 /*
 ********************************************
  Copyright © 2021 Agora Lab, Inc., all rights reserved.
- AppBuilder and all associated components, source code, APIs, services, and documentation 
- (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
- accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
- Use without a license or in violation of any license terms and conditions (including use for 
- any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
- information visit https://appbuilder.agora.io. 
+ AppBuilder and all associated components, source code, APIs, services, and documentation
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.
+ Use without a license or in violation of any license terms and conditions (including use for
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more
+ information visit https://appbuilder.agora.io.
 *********************************************
 */
 import React, {useContext} from 'react';
+//@ts-ignore
 import {CheckBox, StyleSheet} from 'react-native';
 import ColorContext from '../components/ColorContext';
 

package/template/src/subComponents/CopyJoinInfo.tsx

@@ -15,23 +15,23 @@ import useGetMeetingPhrase from '../utils/useGetMeetingPhrase';
 import TertiaryButton from '../atoms/TertiaryButton';
 import IconButton, {IconButtonProps} from '../atoms/IconButton';
 import {useVideoCall} from '../components/useVideoCall';
+import {useToolbarMenu} from '../utils/useMenu';
+import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
+import {useActionSheet} from '../utils/useActionSheet';
+import {useString} from '../utils/useString';
+import {toolbarItemInviteText} from '../language/default-labels/videoCallScreenLabels';
 
 export interface CopyJoinInfoProps {
-  showLabel?: boolean;
   showTeritaryButton?: boolean;
   render?: (onPress: () => void) => JSX.Element;
-  isOnActionSheet?: boolean;
 }
 
 const CopyJoinInfo = (props: CopyJoinInfoProps) => {
-  const {
-    showLabel = $config.ICON_TEXT || false,
-    showTeritaryButton = false,
-    isOnActionSheet = false,
-  } = props;
-  //commented for v1 release
-  //const copyMeetingInviteButton = useString('copyMeetingInviteButton')();
-  const copyMeetingInviteButton = 'Invite';
+  const {isOnActionSheet, showLabel} = useActionSheet();
+  const {isToolbarMenuItem} = useToolbarMenu();
+
+  const {showTeritaryButton = false} = props;
+  const copyMeetingInviteButton = useString(toolbarItemInviteText)();
   const {setShowInvitePopup} = useVideoCall();
 
   const onPress = () => {
@@ -49,6 +49,24 @@ const CopyJoinInfo = (props: CopyJoinInfoProps) => {
     },
   };
 
+  if (isOnActionSheet) {
+    // iconButtonProps.containerStyle = {
+    //   backgroundColor: $config.CARD_LAYER_2_COLOR,
+    //   width: 52,
+    //   height: 52,
+    //   borderRadius: 26,
+    //   justifyContent: 'center',
+    //   alignItems: 'center',
+    // };
+    iconButtonProps.btnTextProps.textStyle = {
+      color: $config.FONT_COLOR,
+      marginTop: 8,
+      fontSize: 12,
+      fontWeight: '400',
+      fontFamily: 'Source Sans Pro',
+      textAlign: 'center',
+    };
+  }
   iconButtonProps.isOnActionSheet = isOnActionSheet;
 
   return props?.render ? (
@@ -56,7 +74,9 @@ const CopyJoinInfo = (props: CopyJoinInfoProps) => {
   ) : (
     <>
       {showTeritaryButton ? (
-        <TertiaryButton text="Invite" onPress={onPress} />
+        <TertiaryButton text={copyMeetingInviteButton} onPress={onPress} />
+      ) : isToolbarMenuItem ? (
+        <ToolbarMenuItem {...iconButtonProps} />
       ) : (
         <IconButton {...iconButtonProps} />
       )}

package/template/src/subComponents/EndcallPopup.tsx

@@ -1,4 +1,4 @@
-import React, {SetStateAction, useContext} from 'react';
+import React, {SetStateAction, useContext, useState} from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 import Spacer from '../atoms/Spacer';
 import Popup from '../atoms/Popup';
@@ -6,20 +6,61 @@ import TertiaryButton from '../atoms/TertiaryButton';
 import PrimaryButton from '../atoms/PrimaryButton';
 import ThemeConfig from '../theme';
 import {useIsDesktop} from '../utils/common';
+import DownloadTranscriptBtn from './caption/DownloadTranscriptBtn';
+import ImageIcon from '../atoms/ImageIcon';
+import {useCaption} from './caption/useCaption';
+import {useString} from '../utils/useString';
+import {
+  leavePopupHeading,
+  leavePopupPrimaryBtnText,
+  leavePopupSubHeading,
+  sttDownloadBtnText,
+  sttTranscriptPanelHeaderText,
+} from '../language/default-labels/videoCallScreenLabels';
+import {cancelText} from '../language/default-labels/commonLabels';
 
 interface EndcallPopupProps {
   modalVisible: boolean;
   setModalVisible: React.Dispatch<SetStateAction<boolean>>;
   endCall: () => void;
 }
+
+const DownloadTranscript = () => {
+  const label = useString(sttTranscriptPanelHeaderText)();
+  const downloadLabel = useString(sttDownloadBtnText)();
+  return (
+    <View style={[styles.btnDownloadContainer, styles.row]}>
+      <View style={styles.row}>
+        <ImageIcon
+          iconType="plain"
+          name={'transcript-mode'}
+          tintColor={$config.FONT_COLOR}
+          iconSize={20}
+        />
+        <Spacer size={4} horizontal />
+        <Text style={styles.label}>{label}</Text>
+      </View>
+      <DownloadTranscriptBtn
+        textStyle={[styles.label, styles.downloadBtnText] as Object}
+        containerStyle={styles.downloadBtn}
+        iconName=""
+        text={downloadLabel}
+      />
+    </View>
+  );
+};
+
 const EndcallPopup = (props: EndcallPopupProps) => {
   const isDesktop = useIsDesktop()('popup');
-  const leaveMeetingLabelHeading = 'Leave Meeting?';
-  const leaveMeetingLabelSubHeading =
-    'Are you sure you want to leave this meeting?';
+  const leaveMeetingLabelHeading = useString(leavePopupHeading)();
+  const leaveMeetingLabelSubHeading = useString<boolean>(leavePopupSubHeading);
+  const leaveMeetingPopupActionButton = useString(leavePopupPrimaryBtnText)();
+  const cancelLabel = useString(cancelText)();
+  const {isSTTActive} = useCaption();
+  const isTranscriptAvailable = $config.ENABLE_STT && isSTTActive;
 
-  const stayBtnLabel = 'CANCEL';
-  const leaveBtnLabel = 'LEAVE';
+  const stayBtnLabel = cancelLabel;
+  const leaveBtnLabel = leaveMeetingPopupActionButton;
   return (
     <Popup
       modalVisible={props.modalVisible}
@@ -28,16 +69,19 @@ const EndcallPopup = (props: EndcallPopupProps) => {
       contentContainerStyle={styles.contentContainer}>
       <Text style={styles.heading}>{leaveMeetingLabelHeading}</Text>
       <Spacer size={8} />
-      <Text style={styles.subHeading}>{leaveMeetingLabelSubHeading}</Text>
-      <Spacer size={32} />
+      <Text style={styles.subHeading}>
+        {leaveMeetingLabelSubHeading(isTranscriptAvailable)}
+      </Text>
+      {isTranscriptAvailable ? <DownloadTranscript /> : <></>}
+      <Spacer size={40} />
       <View style={isDesktop ? styles.btnContainer : styles.btnContainerMobile}>
         <View style={isDesktop && {flex: 1}}>
           <TertiaryButton
             containerStyle={{
               width: '100%',
               height: 48,
-              paddingVertical: 12,
-              paddingHorizontal: 12,
+              paddingVertical: 8,
+              paddingHorizontal: 40,
               borderRadius: ThemeConfig.BorderRadius.medium,
             }}
             text={stayBtnLabel}
@@ -57,8 +101,8 @@ const EndcallPopup = (props: EndcallPopupProps) => {
               borderRadius: ThemeConfig.BorderRadius.medium,
               height: 48,
               backgroundColor: $config.SEMANTIC_ERROR,
-              paddingVertical: 12,
-              paddingHorizontal: 12,
+              paddingVertical: 8,
+              paddingHorizontal: 36,
             }}
             text={leaveBtnLabel}
             textStyle={styles.btnText}
@@ -103,5 +147,32 @@ const styles = StyleSheet.create({
     fontWeight: '400',
     fontSize: ThemeConfig.FontSize.small,
     color: $config.FONT_COLOR,
+    maxWidth: 336,
+  },
+  downloadBtn: {
+    minWidth: 'auto',
+  },
+  btnDownloadContainer: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    backgroundColor: $config.CARD_LAYER_2_COLOR,
+
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderRadius: 6,
+    marginTop: 20,
+  },
+  downloadBtnText: {
+    color: $config.PRIMARY_ACTION_BRAND_COLOR,
+  },
+  label: {
+    color: $config.FONT_COLOR,
+    fontSize: ThemeConfig.FontSize.tiny,
+    lineHeight: 20,
+    fontWeight: '600',
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+  },
+  row: {
+    flexDirection: 'row',
   },
 });