@momo-kits/foundation 0.109.1-optimize.11 → 0.109.1-optimize.14

package/Application/BottomSheet.tsx

@@ -135,13 +135,19 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
               borderBottomWidth: 1,
             },
           ]}>
-          <View style={styles.iconButton} />
-          <Text
-            style={[Styles.flex, {textAlign: 'center'}]}
-            numberOfLines={1}
-            typography="header_default_bold">
-            {options.title ?? ''}
-          </Text>
+          {options.header ? (
+            <View style={Styles.flex}>{options.header}</View>
+          ) : (
+            <>
+              <View style={styles.iconButton} />
+              <Text
+                style={[Styles.flex, {textAlign: 'center'}]}
+                numberOfLines={1}
+                typography="header_default_bold">
+                {options.title ?? ''}
+              </Text>
+            </>
+          )}
           <TouchableOpacity
             style={styles.iconButton}
             onPress={() => onDismiss(true)}>

package/Application/BottomTab/index.tsx

@@ -101,7 +101,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
         <BottomTabBar
           {...props}
           floatingButton={floatingButton}
-          inactiveTintColor={theme.colors.text.secondary}
+          inactiveTintColor={theme.colors.text.hint}
         />
       )}
       tabBarOptions={{

package/Application/Components/BottomSheetHelpCenter.tsx

@@ -0,0 +1,147 @@
+import React, {useContext} from 'react';
+import {StyleSheet, TouchableOpacity, View} from 'react-native';
+import {ApplicationContext, MiniAppContext} from '../index';
+import {Colors, Radius, Spacing, Styles} from '../../Consts';
+import {Text} from '../../Text';
+import {Icon} from '../../Icon';
+
+const ServiceItem: React.FC<any> = ({service}) => {
+  const {theme, translate} = useContext(ApplicationContext);
+  const {title, description, icon, onPress} = service;
+  const serviceTitle = translate?.(title);
+  const serviceDescription = translate?.(description);
+  return (
+    <TouchableOpacity onPress={onPress} style={Styles.row}>
+      <View style={styles.iconWrapper}>
+        <Icon color={theme.colors.text.hint} source={icon} size={28} />
+      </View>
+      <View>
+        <View style={Styles.row}>
+          <Text typography={'action_xs_bold'}>{serviceTitle}</Text>
+          <Icon source={'arrow_chevron_right_small'} size={16} />
+        </View>
+        <Text
+          typography={'description_xs_regular'}
+          color={theme.colors.text.hint}>
+          {serviceDescription}
+        </Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const BottomSheetHelpCenter: React.FC<any> = ({onRequestClose}) => {
+  const {theme, navigator} = useContext(ApplicationContext);
+  const context = useContext<any>(MiniAppContext);
+
+  const onPressFaq = () => {
+    onRequestClose?.(() => {
+      navigator?.maxApi?.startFeatureCode?.(
+        'helpcenter_problemlevel1',
+        context?.toolkitConfig?.faq
+      );
+    });
+  };
+
+  const onPressChatbot = () => {
+    onRequestClose?.(() => {
+      navigator?.maxApi?.getDataObserver('CURRENT_SCREEN', (data: any) => {
+        let screenName = data?.screenName;
+        navigator?.maxApi?.startFeatureCode?.('chatbot', {
+          botId: 'botGptCs',
+          forwardParams: {
+            forService: 'navigation',
+            mini_app_id: context?.appId,
+            feature_code: context?.code,
+            screen_name: screenName,
+          },
+        });
+      });
+    });
+  };
+
+  const onPressFeedback = () => {
+    onRequestClose?.(() => {
+      navigator?.maxApi?.startFeatureCode?.('feedback', {
+        forService: 'navigation',
+        loggedStatus: true,
+        application: {
+          appId: context?.appId,
+          appCode: context?.code,
+          appName: context?.name?.['en'],
+          buildNumber: context?.buildNumber,
+        },
+      });
+    });
+  };
+
+  const services = [
+    {
+      title: {vi: 'Câu hỏi thường gặp', en: 'Câu hỏi thường gặp'},
+      description: {
+        vi: 'Giải đáp các thắc mắc mọi người thường gặp',
+        en: 'Giải đáp các thắc mắc mọi người thường gặp',
+      },
+      icon: 'notifications_circle_question',
+      onPress: onPressFaq,
+    },
+    {
+      title: {vi: 'Hỗ trợ trực tuyến', en: 'Hỗ trợ trực tuyến'},
+      description: {
+        vi: 'Trả lời mọi câu hỏi của bạn 24/7',
+        en: 'Trả lời mọi câu hỏi của bạn 24/7',
+      },
+      icon: 'ic_support',
+      onPress: onPressChatbot,
+    },
+    {
+      title: {vi: 'Chia sẻ góp ý', en: 'Chia sẻ góp ý'},
+      description: {
+        vi: 'Đề xuất cải thiện hoặc báo lỗi sản phẩm/dịch vụ',
+        en: 'Đề xuất cải thiện hoặc báo lỗi sản phẩm/dịch vụ',
+      },
+      icon: 'file_mail',
+      onPress: onPressFeedback,
+    },
+  ];
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: theme.colors.background.surface,
+        },
+      ]}>
+      {services.map((item, index) => {
+        return (
+          <>
+            <ServiceItem service={item} />
+            {index !== services.length - 1 && <View style={styles.divider} />}
+          </>
+        );
+      })}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {height: 300, width: '100%', padding: Spacing.M},
+  divider: {
+    marginVertical: Spacing.M,
+    backgroundColor: Colors.black_02,
+    height: 1,
+    width: '100%',
+  },
+  iconWrapper: {
+    width: 36,
+    height: 36,
+    backgroundColor: Colors.black_02,
+    borderRadius: Radius.M,
+    marginRight: Spacing.S,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export {BottomSheetHelpCenter};

package/Application/Components/HeaderExtendHeader.tsx

@@ -3,10 +3,11 @@ import LinearGradient from 'react-native-linear-gradient';
 import {ApplicationContext, MiniAppContext} from '../index';
 import {Animated, Dimensions, Platform, StyleSheet, View} from 'react-native';
 import {HeaderType} from '../../Layout/types';
-import {InputRef, InputSearch, InputSearchProps} from '../../Input';
+import {InputRef, InputSearch} from '../../Input';
 import Navigation from '../Navigation';
 import {Colors, Radius, Spacing} from '../../Consts';
 import {Image} from '../../Image';
+import {SearchHeaderProps} from '../types';
 
 const SCREEN_PADDING = 12;
 const BACK_WIDTH = 28;
@@ -23,7 +24,7 @@ const HeaderExtendHeader: React.FC<{
   animatedValue: Animated.Value;
   heightHeader: number;
   headerRightWidth: number;
-  inputSearchProps?: InputSearchProps;
+  inputSearchProps?: SearchHeaderProps;
   inputSearchRef?: Ref<InputRef>;
   navigation?: Navigation;
   useShadowHeader?: boolean;
@@ -44,6 +45,7 @@ const HeaderExtendHeader: React.FC<{
   const animated = useRef(new Animated.Value(0));
   const gradientColor = customGradientColor ?? theme.colors.gradient;
   const headerBackground = customBackground ?? theme.assets?.headerBackground;
+  const leftPosition = inputSearchProps?.leftPosition || BACK_WIDTH + 20;
 
   const opacityBackground = animatedValue?.interpolate({
     inputRange: [0, 52],
@@ -73,7 +75,7 @@ const HeaderExtendHeader: React.FC<{
 
   const translateX = animated.current.interpolate({
     inputRange: [0, 100],
-    outputRange: [SCREEN_PADDING, BACK_WIDTH + 20],
+    outputRange: [SCREEN_PADDING, leftPosition],
     extrapolate: 'clamp',
   });
 
@@ -137,7 +139,7 @@ const HeaderExtendHeader: React.FC<{
                 inputRange: [0, 100],
                 outputRange: [
                   screenWidth - SCREEN_PADDING * 2,
-                  screenWidth - (BACK_WIDTH + 32) - headerRightWidth,
+                  screenWidth - leftPosition - 12 - headerRightWidth,
                 ],
                 extrapolate: 'clamp',
               }),
@@ -242,14 +244,8 @@ const styles = StyleSheet.create({
         shadowRadius: 10,
       },
       android: {
-        shadowColor: Colors.black_17,
-        shadowOffset: {
-          width: 3,
-          height: 3,
-        },
-        shadowOpacity: 0.12,
-        shadowRadius: 10,
-        elevation: 10,
+        borderBottomWidth: 1,
+        borderColor: Colors.black_04,
       },
     }),
   },

package/Application/Components/HeaderLeft.tsx

@@ -41,6 +41,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
         params,
       });
       navigator?.maxApi?.trackEvent?.('service_icon_clicked', params);
+
       if (canGoBack) {
         navigator?.ref?.current?.goBack?.();
       } else if (navigator?.maxApi) {

package/Application/Components/HeaderRight.tsx

@@ -9,17 +9,17 @@ import {
 import {ApplicationContext, MiniAppContext, NavigationButton} from '../index';
 import {Colors, Spacing, Styles} from '../../Consts';
 import {PopupNotify} from '../../Popup';
-import {Tool} from '../types';
+import {Tool, ToolGroup} from '../types';
 import {Icon} from '../../Icon';
 import {scaleSize, Text} from '../../Text';
+import {BottomSheetHelpCenter} from './BottomSheetHelpCenter';
+import {Image} from '../../Image';
 
 const WHITE_LIST = [
   'vn.momo.appx',
   'vn.momo.transactionhistory',
   'vn.momo.promotionhub',
 ];
-const HELP_CENTER_CODE = 'helpcenter';
-const HELP_CENTER_ICON = 'help_center';
 
 /**
  * main component for header right
@@ -29,6 +29,7 @@ const HeaderRight: React.FC<any> = props => {
   const {useOnBoarding = false, buttonOnBoarding, onPress} = headerRight;
   const context = useContext<any>(MiniAppContext);
   const {translate} = useContext(ApplicationContext);
+
   if (
     WHITE_LIST.includes(context?.appId) &&
     typeof props.headerRight === 'function'
@@ -36,10 +37,6 @@ const HeaderRight: React.FC<any> = props => {
     return props.headerRight(props);
   }
 
-  if (context?.toolkitConfig?.hidden === true) {
-    return <View />;
-  }
-
   if (useOnBoarding && onPress) {
     return (
       <TouchableOpacity onPress={onPress} style={styles.onBoarding}>
@@ -68,9 +65,8 @@ const HeaderToolkitAction: React.FC<any> = ({
   useMore = false,
   tools = [],
 }) => {
-  const {navigator} = useContext(ApplicationContext);
+  const {navigator, translate} = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
-  const showIconMore = tools && tools.length > 1;
 
   const [isFavorite, setIsFavorite] = useState<boolean>(false);
   const [isLoading, setIsLoading] = useState(false);
@@ -89,6 +85,9 @@ const HeaderToolkitAction: React.FC<any> = ({
     };
   }
 
+  /**
+   * check app is favorite
+   */
   const checkAppIsFavorite = () => {
     navigator?.maxApi?.dispatchFunction?.(
       'isFavoriteApp',
@@ -101,6 +100,9 @@ const HeaderToolkitAction: React.FC<any> = ({
     );
   };
 
+  /**
+   * close navigation container
+   */
   const onClose = () => {
     if (preventClose) {
       navigator?.showModal({
@@ -126,6 +128,9 @@ const HeaderToolkitAction: React.FC<any> = ({
     }
   };
 
+  /**
+   * on press shortcut
+   */
   const onPressShortcut = () => {
     setIsLoading(true);
     navigator?.maxApi?.dispatchFunction?.(
@@ -139,41 +144,83 @@ const HeaderToolkitAction: React.FC<any> = ({
         if (success) {
           setIsFavorite(!isFavorite);
         }
-        setIsLoading(false);
       }
     );
+    setTimeout(() => {
+      setIsLoading(false);
+    }, 1000);
   };
 
+  /**
+   * on press help center
+   */
   const onPressHelpCenter = () => {
-    navigator?.maxApi?.dispatchFunction?.(
-      'startFeatureCode',
-      HELP_CENTER_CODE,
-      () => {}
-    );
+    const appName = translate?.(context?.name);
+    const appDescription = translate?.(context?.description);
+    navigator?.showBottomSheet({
+      options: {
+        header: (
+          <View style={[Styles.row, {paddingLeft: Spacing.M}]}>
+            <Image
+              source={{uri: context?.icon}}
+              style={{width: 40, height: 40, marginRight: Spacing.S}}
+            />
+            <View>
+              <Text typography={'label_default_medium'}>{appName}</Text>
+              <Text
+                typography={'description_default_regular'}
+                color={Colors.black_12}>
+                {appDescription}
+              </Text>
+            </View>
+          </View>
+        ),
+      },
+      surface: true,
+      screen: BottomSheetHelpCenter,
+    });
   };
 
+  /**
+   * on press icon more
+   */
   const onPressIconMore = () => {
     navigator?.maxApi?.dispatchFunction?.('showTools', tools, (key: string) => {
-      const pressedTools = tools.find((tool: Tool) => tool.key === key);
-      if (pressedTools) {
-        pressedTools?.onPress();
+      for (const group of tools) {
+        const pressedTool = group?.items?.find?.(
+          (tool: Tool) => tool?.key === key
+        );
+        if (pressedTool) {
+          pressedTool?.onPress();
+          break;
+        }
       }
     });
   };
 
   let iconShortcut = isFavorite ? 'pin_star_checked' : 'pin_star';
   let shortcutOnPress = onPressShortcut;
-  let isHaveOneTool = tools && tools.length === 1;
+  const totalTools = tools.reduce(
+    (count: number, group: ToolGroup) => count + group?.items?.length,
+    0
+  );
+  const showIconMore = tools && totalTools > 1;
+  const isHaveOneTool = tools && totalTools === 1;
 
   if (showIconMore || (useMore && isHaveOneTool)) {
     iconShortcut = 'navigation_more_icon';
     shortcutOnPress = onPressIconMore;
   } else if (isHaveOneTool) {
-    iconShortcut = tools[0]?.icon;
-    shortcutOnPress = tools[0]?.onPress;
+    const singleTool = tools.find(
+      (group: ToolGroup) => group?.items?.length === 1
+    )?.items[0];
+    iconShortcut = singleTool?.icon;
+    shortcutOnPress = singleTool?.onPress;
   }
 
-  const showBadge = tools.some((tool: Tool) => tool.showBadge);
+  const showBadge = tools.some((group: ToolGroup) =>
+    group?.items?.some?.(tool => tool?.showBadge)
+  );
 
   return (
     <View style={Styles.row}>
@@ -187,14 +234,18 @@ const HeaderToolkitAction: React.FC<any> = ({
         />
       )}
       <View style={[styles.toolkitContainer, buttonStyle]}>
-        <TouchableOpacity
-          accessibilityLabel={'btn_navigation_help_center'}
-          style={styles.toolkitButton}
-          onPress={onPressHelpCenter}
-          hitSlop={{top: 7, bottom: 7, left: 7, right: 0}}>
-          <Icon color={tintColor} source={HELP_CENTER_ICON} size={20} />
-        </TouchableOpacity>
-        <View style={[styles.divider, {backgroundColor: tintColor}]} />
+        {context.appId !== 'vn.momo.helpcenter' && (
+          <>
+            <TouchableOpacity
+              accessibilityLabel={'btn_navigation_help_center'}
+              style={styles.toolkitButton}
+              onPress={onPressHelpCenter}
+              hitSlop={{top: 7, bottom: 7, left: 7, right: 0}}>
+              <Icon color={tintColor} source={'help_center'} size={20} />
+            </TouchableOpacity>
+            <View style={[styles.divider, {backgroundColor: tintColor}]} />
+          </>
+        )}
         <TouchableOpacity
           accessibilityLabel={'btn_navigation_close'}
           onPress={onClose}

package/Application/Components/HeaderTitle.tsx

@@ -27,7 +27,7 @@ const HeaderTitle: React.FC<any> = props => {
   );
 
   return (
-    <View pointerEvents={'none'}>
+    <View pointerEvents={'none'} style={styles.headerTitleContainer}>
       <Animated.Text
         {...props}
         accessibilityLabel={'title_navigation_header'}
@@ -35,6 +35,7 @@ const HeaderTitle: React.FC<any> = props => {
           styles.title,
           {fontFamily: `${theme.font}-Bold`, opacity, color: props.tintColor},
         ]}
+        numberOfLines={1}
       />
       <Verified />
     </View>
@@ -95,7 +96,7 @@ const TitleUser: React.FC<TitleUserProps> = ({
       style={styles.headerTitleContainer}
       onPress={onPress}
       disabled={onPress === undefined}>
-      <View style={Styles.row}>
+      <View style={[Styles.row, Styles.flex]}>
         <View>
           <View
             style={[
@@ -108,7 +109,7 @@ const TitleUser: React.FC<TitleUserProps> = ({
             <View style={[styles.dotAvatar, {backgroundColor: dotColor}]} />
           )}
         </View>
-        <View style={[Styles.flex, {paddingHorizontal: 6}]}>
+        <View style={[Styles.flex, {marginLeft: 6}]}>
           <View style={Styles.row}>
             <Text
               typography="action_xs_bold"
@@ -127,10 +128,9 @@ const TitleUser: React.FC<TitleUserProps> = ({
           </View>
           {!!subTitle && (
             <Text
-              typography="description_default_regular"
+              typography="description_xs_regular"
               color={tintColor}
-              numberOfLines={1}
-              style={{marginTop: -2}}>
+              numberOfLines={1}>
               {subTitle}
             </Text>
           )}
@@ -157,7 +157,7 @@ const TitleLocation: React.FC<TitleLocationProps> = ({
       onPress={onPress}>
       {!!description && (
         <Text
-          typography="description_default_regular"
+          typography="description_xs_regular"
           color={tintColor}
           numberOfLines={1}>
           {description}
@@ -192,7 +192,9 @@ const TitleJourney: React.FC<TitleJourneyProps> = ({
   onPress,
 }) => {
   return (
-    <TouchableOpacity style={styles.headerTitleContainer} onPress={onPress}>
+    <TouchableOpacity
+      style={[styles.headerTitleContainer, {overflow: 'hidden'}]}
+      onPress={onPress}>
       <View style={styles.rowJourney}>
         <View style={Styles.row}>
           <Text typography="action_xs_bold" color={tintColor} numberOfLines={1}>
@@ -223,7 +225,7 @@ const TitleJourney: React.FC<TitleJourneyProps> = ({
       {!!description && (
         <View style={styles.rowJourney}>
           <Text
-            typography="description_default_regular"
+            typography="description_xs_regular"
             color={tintColor}
             numberOfLines={1}>
             {description}
@@ -259,9 +261,8 @@ const styles = StyleSheet.create({
     alignSelf: 'center',
   },
   headerTitleContainer: {
-    alignItems: 'center',
     justifyContent: 'center',
-    width: Dimensions.get('window').width - 158,
+    maxWidth: Dimensions.get('window').width - 190,
   },
   circle: {
     width: 32,
@@ -287,7 +288,7 @@ const styles = StyleSheet.create({
     borderWidth: 2,
     borderColor: Colors.black_01,
   },
-  verifiedIcon: {marginHorizontal: Spacing.XS, width: 12, height: 12},
+  verifiedIcon: {width: 12, height: 12, marginLeft: Spacing.XS},
 });
 
 export {HeaderTitle, TitleCustom};

package/Application/NavigationContainer.tsx

@@ -32,12 +32,12 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   const isReady = useRef(false);
   const navigator = useRef(new Navigator(navigationRef, isReady));
   const [showGrid, setShowGrid] = useState(false);
-  const config = useRef<any>();
 
   /**
    * inject data for navigator
    */
   navigator.current.maxApi = maxApi;
+
   /**
    * handle mini language & listen change
    * engine only shake to enable grid view
@@ -55,8 +55,11 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
     };
   }, []);
 
-  const translate = (key: string) => {
-    return localize?.translate(key);
+  const translate = (data?: string | {vi: string; en: string}) => {
+    if (data && typeof data !== 'string') {
+      return localize?.translateData(data);
+    }
+    return localize?.translate(data as string);
   };
 
   return (
@@ -64,7 +67,6 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
       <ApplicationContext.Provider
         value={{
           navigator: navigator.current,
-          config: config.current,
           theme,
           showGrid,
           translate,

package/Application/Navigator.ts

@@ -1,15 +1,9 @@
 import {CommonActions, StackActions} from '@react-navigation/native';
-import {
-  BottomSheetParams,
-  HeaderToolkitProps,
-  ModalParams,
-  ScreenParams,
-} from './types';
+import {BottomSheetParams, ModalParams, ScreenParams} from './types';
 
 class Navigator {
   ref?: any;
   isReady?: any;
-  toolkitConfig?: HeaderToolkitProps;
   maxApi?: any;
   dismissData?: any;
   toolkitCallback?: (key: string) => void;
@@ -111,16 +105,14 @@ class Navigator {
   };
 
   /**
-   * navigate
+   * navigate route name bottom tab only
    * @param name
-   * @param params
    */
-  navigate = (name: string, params: any) => {
+  navigate = (name: string) => {
     if (this.isReady.current) {
       this.ref.current?.dispatch?.(
         CommonActions.navigate({
           name,
-          params,
         })
       );
     }

package/Application/StackScreen.tsx

@@ -1,6 +1,6 @@
 import React, {useContext, useEffect, useLayoutEffect, useRef} from 'react';
 import {useHeaderHeight} from '@react-navigation/stack';
-import {InteractionManager} from 'react-native';
+import {Alert, InteractionManager} from 'react-native';
 import {ScreenParams} from './types';
 import Navigation from './Navigation';
 import {ApplicationContext, MiniAppContext, ScreenContext} from './index';
@@ -27,6 +27,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
     timeInteraction: 0,
   });
   const context = useContext<any>(MiniAppContext);
+  const lastElement = useRef<any>(null);
   const {screen: Component, options, initialParams} = props.route.params;
   const navigation = new Navigation(props.navigation, context);
   const heightHeader = useHeaderHeight();
@@ -76,11 +77,16 @@ const StackScreen: React.FC<ScreenParams> = props => {
         navigator?.maxApi?.setObserver('CURRENT_SCREEN', {screenName});
       });
     });
-    navigator?.maxApi?.startTraceScreenLoad?.(screenName, (data: any) => {
-      tracking.current.traceIdLoad = data?.traceId;
-    });
+    navigator?.maxApi?.startTraceScreenLoad?.(
+      screenName,
+      context,
+      (data: any) => {
+        tracking.current.traceIdLoad = data?.traceId;
+      }
+    );
     navigator?.maxApi?.startTraceScreenInteraction?.(
       screenName,
+      context,
       (data: any) => {
         tracking.current.traceIdInteraction = data?.traceId;
       }
@@ -131,6 +137,15 @@ const StackScreen: React.FC<ScreenParams> = props => {
         message: `${screenName} screen_load_time ${timeLoad}`,
         type: 'ERROR',
       });
+      if (
+        context.debugLastElement &&
+        lastElement.current?.children?.current?.length > 0
+      ) {
+        Alert.alert(
+          `${screenName}- load ${timeLoad}ms`,
+          JSON.stringify(lastElement.current?.children?.current)
+        );
+      }
     }
   };
 
@@ -199,7 +214,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
     <ScreenContext.Provider
       value={{
         screenName,
-        onElementLoad: () => {
+        onElementLoad: (data: any) => {
           clearTimeout(tracking.current.timeoutLoad);
           tracking.current.endTime = Date.now();
           tracking.current.timeoutInteraction?.cancel?.();
@@ -208,11 +223,19 @@ const StackScreen: React.FC<ScreenParams> = props => {
               tracking.current.timeInteraction =
                 Date.now() - tracking.current.startTime;
             });
+
+          if (data?.componentName) {
+            lastElement.current = data;
+          }
+
           tracking.current.timeoutLoad = setTimeout(() => {
             const time = tracking.current.endTime - tracking.current.startTime;
             if (tracking.current.timeLoad === 0) {
               tracking.current.timeLoad = time;
             }
+
+            onScreenLoad();
+            onScreenInteraction();
           }, 2000);
         },
       }}>

package/Application/types.ts

@@ -71,7 +71,7 @@ export type Context = {
   theme: Theme;
   navigator?: Navigator;
   showGrid?: boolean;
-  translate?: (key: string) => string;
+  translate?: (data: string | {vi: string; en: string}) => string;
 };
 
 export type LocalizationObject = {
@@ -83,9 +83,14 @@ export type LocalizationObject = {
   };
 };
 
+export type ToolGroup = {
+  title: {vi: string; en: string};
+  items: Tool[];
+};
+
 export type Tool = {
   icon: string;
-  name: string | {vi: string; en: string};
+  name: {vi: string; en: string};
   key: string;
   showBadge?: boolean;
   onPress: () => void;
@@ -123,7 +128,8 @@ export type BottomSheetParams = {
   [key: string]: any;
   screen: React.ComponentType;
   options: {
-    title: string;
+    header?: React.ReactNode;
+    title?: string;
   };
   useNativeModal?: boolean;
   surface?: boolean;
@@ -164,7 +170,7 @@ export type OnBoarding = {
 
 export type HeaderRightToolkit = {
   useShortcut?: boolean;
-  tools?: Tool[];
+  tools?: ToolGroup[];
   preventClose?: PopupNotifyProps;
   useMore?: boolean;
 };
@@ -264,4 +270,5 @@ export interface SearchHeaderProps extends InputSearchProps {
   ref?: React.RefObject<InputRef>;
   animatedValue?: Animated.Value;
   headerRightWidth?: 0 | 74 | 110 | number;
+  leftPosition?: 12 | 48 | number;
 }

package/Application/utils.tsx

@@ -122,7 +122,11 @@ const getOptions = (
   if (params.headerRight) {
     options = {
       ...options,
-      ...exportHeaderRight(params),
+      ...{
+        headerRight: (props: any) => {
+          return <HeaderRight {...props} headerRight={params.headerRight} />;
+        },
+      },
     };
   }
 
@@ -132,14 +136,6 @@ const getOptions = (
   };
 };
 
-const exportHeaderRight = (params: NavigationOptions) => {
-  return {
-    headerRight: (props: any) => {
-      return <HeaderRight {...props} headerRight={params.headerRight} />;
-    },
-  };
-};
-
 const exportHeaderTitle = (
   params: NavigationOptions,
   animatedValue?: Animated.Value
@@ -158,7 +154,15 @@ const exportHeaderTitle = (
       },
     };
   } else if (typeof params.headerTitle === 'string') {
-    delete params.headerTitle;
+    return {
+      headerTitle: (props: any) => (
+        <HeaderTitle
+          {...props}
+          children={params.headerTitle}
+          animatedValue={animatedValue}
+        />
+      ),
+    };
   }
   return {};
 };
@@ -177,6 +181,5 @@ export {
   getModalOptions,
   getOptions,
   exportHeaderTitle,
-  exportHeaderRight,
   formatNameLength,
 };

package/Assets/icon.json

@@ -4045,5 +4045,8 @@
   },
   "navigation_more_icon": {
     "uri": "data:image/png;base64,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"
+  },
+  "ic_support": {
+    "uri": "https://static.momocdn.net/app/img/kits/ic_support.png"
   }
 }

package/Button/index.tsx

@@ -88,6 +88,7 @@ const Button: FC<ButtonProps> = ({
   ...rest
 }) => {
   const {theme, config} = useContext(ApplicationContext);
+  const component = useContext<any>(ComponentContext);
   const {gradient, color} = config?.navigationBar?.buttonColors ?? {};
   let gradientPros;
   let state = 'enabled';
@@ -292,10 +293,10 @@ const Button: FC<ButtonProps> = ({
   return (
     <ComponentContext.Provider
       value={{
+        ...component,
         componentName: 'Button',
         params,
         state: state,
-        componentId: accessibilityLabel,
         componentValue: title,
         action: 'click',
       }}>

package/CheckBox/index.tsx

@@ -5,7 +5,6 @@ import styles from './styles';
 import {ApplicationContext, ComponentContext} from '../Application';
 import {Text} from '../Text';
 import {Icon} from '../Icon';
-import {formatNameLength} from '../Application/utils';
 
 const CheckBox: FC<CheckBoxProps> = ({
   value,
@@ -43,9 +42,7 @@ const CheckBox: FC<CheckBoxProps> = ({
         componentName: 'CheckBox',
         params,
         state: disabled ? 'disabled' : 'filled',
-        componentId: accessibilityLabel,
         action: 'click',
-        componentLabel: formatNameLength(label || ''),
         componentValue: indeterminate ? 'undetermined' : value,
       }}>
       <TouchableOpacity

package/Consts/theme.ts

@@ -113,8 +113,8 @@ const defaultContext: Context = {
   theme: defaultTheme,
   navigator: undefined,
   showGrid: false,
-  translate: (key: string) => {
-    return key;
+  translate: () => {
+    return '';
   },
 };
 

package/IconButton/index.tsx

@@ -118,7 +118,6 @@ const IconButton: React.FC<IconButtonProps> = ({
         componentName: 'IconButton',
         params,
         state: type === 'disabled' ? 'disabled' : 'enabled',
-        componentId: accessibilityLabel,
         componentValue: icon,
         action: 'click',
       }}>

package/Input/Input.tsx

@@ -65,6 +65,7 @@ const Input = forwardRef(
     ref
   ) => {
     const {theme} = useContext(ApplicationContext);
+    const component = useContext<any>(ComponentContext);
     const [focused, setFocused] = useState(false);
     const [haveValue, setHaveValue] = useState(!!value || !!props.defaultValue);
     const [secureTextInput, setSecureTextInput] = useState(secureTextEntry);
@@ -260,11 +261,10 @@ const Input = forwardRef(
     return (
       <ComponentContext.Provider
         value={{
+          ...component,
           componentName: 'Input',
           params,
-          componentLabel: floatingValue,
           state: inputState,
-          componentId: accessibilityLabel,
         }}>
         <View style={[style, styles.wrapper]}>
           {renderInputView()}

package/Input/InputDropDown.tsx

@@ -30,6 +30,7 @@ const InputDropDown = ({
   multiline,
 }: InputDropDownProps) => {
   const {theme} = useContext(ApplicationContext);
+  const component = useContext<any>(ComponentContext);
 
   /**
    * Render the input view
@@ -105,11 +106,10 @@ const InputDropDown = ({
   return (
     <ComponentContext.Provider
       value={{
+        ...component,
         componentName: 'InputDropDown',
         params,
         state: 'enabled',
-        componentLabel: floatingValue,
-        componentId: accessibilityLabel,
       }}>
       <TouchableOpacity
         activeOpacity={0.6}

package/Input/InputMoney.tsx

@@ -59,6 +59,8 @@ const InputMoney = forwardRef(
     ref
   ) => {
     const {theme} = useContext(ApplicationContext);
+    const component = useContext<any>(ComponentContext);
+
     const [focused, setFocused] = useState(false);
     const inputRef = useRef<TextInput>(null);
 
@@ -202,11 +204,10 @@ const InputMoney = forwardRef(
     return (
       <ComponentContext.Provider
         value={{
+          ...component,
           componentName: 'InputMoney',
           params,
-          componentLabel: floatingValue,
           state: inputState,
-          componentId: accessibilityLabel,
         }}>
         <View style={[style, styles.wrapper]}>
           {renderInputView()}

package/Input/InputOTP.tsx

@@ -88,6 +88,7 @@ const InputOTP = forwardRef(
     const [focused, setFocused] = useState(false);
     const inputRef = useRef<TextInput | null>(null);
     const {theme} = useContext(ApplicationContext);
+    const component = useContext<any>(ComponentContext);
 
     useImperativeHandle(ref, () => ({
       onChangeText: (text: string) => {
@@ -229,11 +230,10 @@ const InputOTP = forwardRef(
     return (
       <ComponentContext.Provider
         value={{
+          ...component,
           componentName: 'InputOTP',
           params,
-          componentLabel: floatingValue,
           state: 'enabled',
-          componentId: accessibilityLabel,
         }}>
         <View style={[style, styles.otpWrapper]}>
           {renderInputView()}

package/Input/InputSearch.tsx

@@ -139,6 +139,8 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
   ref
 ) => {
   const {theme} = useContext(ApplicationContext);
+  const component = useContext<any>(ComponentContext);
+
   const [focused, setFocused] = useState(false);
   const [haveValue, setHaveValue] = useState(!!value || !!defaultValue);
   const inputRef = useRef<TextInput | null>(null);
@@ -264,10 +266,10 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
   return (
     <ComponentContext.Provider
       value={{
+        ...component,
         componentName: 'InputSearch',
         params,
         state: inputState,
-        componentId: accessibilityLabel,
       }}>
       <View style={[style, styles.searchInputContainer]}>
         <View

package/Input/InputTextArea.tsx

@@ -47,7 +47,7 @@ const InputTextArea = forwardRef(
       hintText,
       ...props
     }: InputTextAreaProps,
-    ref,
+    ref
   ) => {
     const {theme} = useContext(ApplicationContext);
     const [focused, setFocused] = useState(false);
@@ -173,7 +173,7 @@ const InputTextArea = forwardRef(
         />
       </View>
     );
-  },
+  }
 );
 
 export default InputTextArea;

package/Layout/Screen.tsx

@@ -35,7 +35,7 @@ import {FloatingButton, FloatingButtonProps} from './FloatingButton';
 import {Card, Section, validateChildren} from './index';
 import styles from './styles';
 import {HeaderType} from './types';
-import {InputRef, InputSearchProps} from '../Input';
+import {InputRef} from '../Input';
 import {exportHeaderTitle, getOptions} from '../Application/utils';
 import {
   HeaderBackground,
@@ -122,7 +122,7 @@ export interface ScreenProps extends ViewProps {
   /**
    * Optional. specs for input search.
    */
-  inputSearchProps?: InputSearchProps;
+  inputSearchProps?: SearchHeaderProps;
 
   /**
    * Optional. Ref for input search.
@@ -385,10 +385,7 @@ const Screen = forwardRef(
     useImperativeHandle(ref, () => ({
       ...screenRef.current,
       setOptions: (params: NavigationOptions) => {
-        const options = getOptions(
-          params,
-          animatedHeader ? animatedValue.current : undefined
-        );
+        const options = getOptions(params, undefined);
         navigation?.instance?.setOptions(options);
       },
       setSearchHeader: setSearchHeader,

package/Radio/index.tsx

@@ -6,7 +6,6 @@ import {Text} from '../Text';
 import styles from './styles';
 import {ApplicationContext, ComponentContext} from '../Application';
 import {Spacing} from '../Consts';
-import {formatNameLength} from '../Application/utils';
 
 const Radio: FC<RadioProps> = ({
   value,
@@ -46,8 +45,6 @@ const Radio: FC<RadioProps> = ({
         componentName: 'Radio',
         params,
         state: disabled ? 'disabled' : 'enabled',
-        componentId: accessibilityLabel,
-        componentLabel: formatNameLength(label || ''),
         componentValue: selected,
         action: 'click',
       }}>

package/Switch/index.tsx

@@ -27,7 +27,6 @@ const Switch: FC<SwitchProps> = ({
         componentName: 'Switch',
         params,
         state: disabled ? 'disabled' : 'enabled',
-        componentId: accessibilityLabel,
         componentValue: value,
         action: 'click',
       }}>

package/Text/index.tsx

@@ -109,19 +109,18 @@ const Text: React.FC<TextProps> = ({
     };
   };
 
-
   const textStyle = getTypoStyle(typography);
 
   if (deprecatedValues.includes(typography)) {
     console.warn(
-      `Warning: The typography value "${typography}" is deprecated.`,
+      `Warning: The typography value "${typography}" is deprecated.`
     );
   }
 
   return (
     <RNText
       {...rest}
-      {...getAccessibilityID((rest.accessibilityLabel))}
+      {...getAccessibilityID(rest.accessibilityLabel)}
       style={[style, textStyle, {color: color ?? theme.colors.text.default}]}>
       {children ?? ''}
     </RNText>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "0.109.1-optimize.11",
+  "version": "0.109.1-optimize.14",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {},