@momo-kits/foundation 0.110.1-beta.7 → 0.110.1-optimize.1

package/Application/BottomSheet.tsx

@@ -20,6 +20,7 @@ import {Icon} from '../Icon';
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const {theme, navigator} = useContext(ApplicationContext);
   const heightDevice = Dimensions.get('screen').height;
+  const action = useRef<undefined | string>();
   const insets = useSafeAreaInsets();
   const {
     screen: Screen,
@@ -53,6 +54,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       },
       onPanResponderRelease: (_, gestureState) => {
         if (gestureState.dy > 100) {
+          action.current = 'gesture';
           onDismiss();
         } else {
           Animated.spring(pan, {
@@ -82,7 +84,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       duration: 150,
     }).start();
     return () => {
-      props.route.params?.onDismiss?.();
+      props.route.params?.onDismiss?.(action.current);
     };
   }, []);
 
@@ -150,7 +152,10 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
           )}
           <TouchableOpacity
             style={styles.iconButton}
-            onPress={() => onDismiss(true)}>
+            onPress={() => {
+              action.current = 'icon_close';
+              onDismiss(true);
+            }}>
             <Icon source="navigation_close" />
           </TouchableOpacity>
         </View>
@@ -162,7 +167,9 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     <Container
       transparent
       visible={true}
-      onRequestClose={() => onDismiss()}
+      onRequestClose={() => {
+        onDismiss();
+      }}
       style={styles.overlay}>
       <KeyboardAvoidingView
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
@@ -171,7 +178,10 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         <TouchableOpacity
           style={Styles.flex}
           activeOpacity={1}
-          onPress={() => onDismiss()}
+          onPress={() => {
+            action.current = 'touch';
+            onDismiss();
+          }}
         />
         <Animated.View style={{transform: pan.getTranslateTransform()}}>
           {renderHeader()}

package/Application/Components/BottomSheetHelpCenter.tsx

@@ -10,6 +10,7 @@ const ServiceItem: React.FC<any> = ({service}) => {
   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}>
@@ -35,6 +36,20 @@ const BottomSheetHelpCenter: React.FC<any> = ({onRequestClose}) => {
   const context = useContext<any>(MiniAppContext);
 
   const onPressFaq = () => {
+    const routes = navigator?.ref.current?.getRootState()?.routes || [];
+    const routesLength = routes.length;
+    let screenName = routes?.[0]?.params?.screen?.name;
+    if (routesLength > 1) {
+      screenName = routes[routesLength - 2]?.params?.screen?.name;
+    }
+
+    context?.autoTracking?.({
+      ...context,
+      componentName: 'TouchableOpacity',
+      componentId: 'bottomsheet_faq_item',
+      screenName: screenName,
+    });
+
     onRequestClose?.(() => {
       navigator?.maxApi?.startFeatureCode?.(
         'helpcenter_problemlevel1',
@@ -44,6 +59,20 @@ const BottomSheetHelpCenter: React.FC<any> = ({onRequestClose}) => {
   };
 
   const onPressChatbot = () => {
+    const routes = navigator?.ref.current?.getRootState()?.routes || [];
+    const routesLength = routes.length;
+    let screenName = routes?.[0]?.params?.screen?.name;
+    if (routesLength > 1) {
+      screenName = routes[routesLength - 2]?.params?.screen?.name;
+    }
+
+    context?.autoTracking?.({
+      ...context,
+      componentName: 'TouchableOpacity',
+      componentId: 'bottomsheet_chatbot_item',
+      screenName: screenName,
+    });
+
     onRequestClose?.(() => {
       navigator?.maxApi?.getDataObserver('CURRENT_SCREEN', (data: any) => {
         let screenName = data?.screenName;
@@ -61,6 +90,20 @@ const BottomSheetHelpCenter: React.FC<any> = ({onRequestClose}) => {
   };
 
   const onPressFeedback = () => {
+    const routes = navigator?.ref.current?.getRootState()?.routes || [];
+    const routesLength = routes.length;
+    let screenName = routes?.[0]?.params?.screen?.name;
+    if (routesLength > 1) {
+      screenName = routes[routesLength - 2]?.params?.screen?.name;
+    }
+
+    context?.autoTracking?.({
+      ...context,
+      componentName: 'TouchableOpacity',
+      componentId: 'bottomsheet_feedback_item',
+      screenName: screenName,
+    });
+
     onRequestClose?.(() => {
       navigator?.maxApi?.startFeatureCode?.('feedback', {
         forService: 'navigation',

package/Application/Components/HeaderBackground.tsx

@@ -48,9 +48,17 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
           {
             backgroundColor: theme.colors.background.surface,
             opacity: opacityBackground,
+            overflow: 'hidden',
           },
-        ]}
-      />
+        ]}>
+        {theme?.assets?.headerBackground && (
+          <Image
+            style={styles.headerBackground}
+            source={{uri: theme?.assets?.headerBackground}}
+            loading={false}
+          />
+        )}
+      </Animated.View>
       <View style={styles.gradientContainer}>
         {useGradient && (
           <LinearGradientAnimated
@@ -107,9 +115,8 @@ const styles = StyleSheet.create({
   },
   headerBackground: {
     width: '100%',
-    height: undefined,
     position: 'absolute',
-    aspectRatio: 375 / 154,
+    aspectRatio: 375 / 152,
   },
   dividerHeader: {
     borderBottomWidth: 1,

package/Application/Components/HeaderExtendHeader.tsx

@@ -105,9 +105,17 @@ const HeaderExtendHeader: React.FC<{
               width: '100%',
               height: heightHeader,
               zIndex: 1,
+              overflow: 'hidden',
             },
-          ]}
-        />
+          ]}>
+          {headerBackground && (
+            <Image
+              style={styles.headerBackground}
+              source={{uri: headerBackground}}
+              loading={false}
+            />
+          )}
+        </Animated.View>
 
         <Animated.View
           style={[
@@ -175,9 +183,17 @@ const HeaderExtendHeader: React.FC<{
               height: heightHeader,
               backgroundColor: theme.colors.background.surface,
               opacity: opacityBackground,
+              overflow: 'hidden',
             },
-          ]}
-        />
+          ]}>
+          {headerBackground && (
+            <Image
+              style={styles.headerBackground}
+              source={{uri: headerBackground}}
+              loading={false}
+            />
+          )}
+        </Animated.View>
         <LinearGradientAnimated
           colors={[gradientColor, gradientColor + '00']}
           style={[styles.extendedHeader, {opacity: opacityGradient}]}>

package/Application/Components/HeaderLeft.tsx

@@ -12,6 +12,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   tintColor,
   preventBack,
   onPressLeftHeader,
+  onBackHandler,
 }) => {
   const context = useContext<any>(MiniAppContext);
   const {navigator} = useContext(ApplicationContext);
@@ -29,18 +30,12 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
     const goBack = () => {
       const canGoBack = navigator?.ref?.current?.canGoBack?.();
       const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
-      const params = {
+      context?.autoTracking?.({
         ...context,
-        screen_name: currentRoute?.params?.screen?.name ?? currentRoute?.name,
-        trigger_id: '111154000000000000',
-        icon_name: 'back',
-      };
-      navigator?.maxApi?.showToastDebug?.({
-        appId: `auto - ${context.appId}`,
-        message: 'service_icon_clicked',
-        params,
+        componentName: 'IconButton',
+        componentId: 'navigation_back',
+        screenName: currentRoute?.params?.screen?.name ?? currentRoute?.name,
       });
-      navigator?.maxApi?.trackEvent?.('service_icon_clicked', params);
 
       if (canGoBack) {
         navigator?.ref?.current?.goBack?.();
@@ -49,7 +44,6 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
       } else {
         (global as any)?.miniAppApi?.dispatch?.('dismiss', context);
       }
-      onPressLeftHeader?.();
     };
 
     if (preventBack) {
@@ -68,7 +62,12 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
         ),
       });
     } else {
-      goBack();
+      onPressLeftHeader?.();
+      if (typeof onBackHandler === 'function') {
+        onBackHandler(goBack);
+      } else {
+        goBack();
+      }
     }
     return true;
   };

package/Application/Components/HeaderRight.tsx

@@ -15,6 +15,7 @@ import {scaleSize, Text} from '../../Text';
 import {BottomSheetHelpCenter} from './BottomSheetHelpCenter';
 import {Image} from '../../Image';
 
+const DID_SYNC_NEW_HOME = 'did_sync_new_home';
 /**
  * main component for header right
  */
@@ -64,11 +65,22 @@ const HeaderToolkitAction: React.FC<any> = ({
   useEffect(() => {
     if (useShortcut) {
       checkAppIsFavorite();
+
+      const favoriteObserver = navigator?.maxApi?.observer?.(
+        DID_SYNC_NEW_HOME,
+        (updatedData: any) => {
+          const status = updatedData?.items?.includes(context?.code);
+          setIsFavorite(status);
+        }
+      );
+      return () => {
+        favoriteObserver?.remove?.();
+      };
     }
-  }, [useShortcut, useMore, tools]);
+  }, [useShortcut, context]);
 
   let buttonStyle: ViewStyle = {};
-  if (tintColor === Colors.black_01) {
+  if (tintColor === Colors.black_01 || tintColor === 'white') {
     buttonStyle = {
       backgroundColor: '#00000099',
       borderColor: '#FFFFFF33',
@@ -78,22 +90,27 @@ const HeaderToolkitAction: React.FC<any> = ({
   /**
    * check app is favorite
    */
-  const checkAppIsFavorite = () => {
+  const checkAppIsFavorite = () =>
     navigator?.maxApi?.dispatchFunction?.(
       'isFavoriteApp',
-      context?.app_code,
+      context?.code,
       (result: boolean) => {
-        if (result !== isFavorite) {
-          setIsFavorite(result);
-        }
+        setIsFavorite(result);
       }
     );
-  };
 
   /**
    * close navigation container
    */
   const onClose = () => {
+    const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
+    context?.autoTracking?.({
+      ...context,
+      componentName: 'IconButton',
+      componentId: 'navigation_close',
+      screenName: currentRoute?.params?.screen?.name ?? currentRoute?.name,
+    });
+
     if (preventClose) {
       navigator?.showModal({
         screen: () => (
@@ -122,6 +139,13 @@ const HeaderToolkitAction: React.FC<any> = ({
    * on press shortcut
    */
   const onPressShortcut = () => {
+    const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
+    context?.autoTracking?.({
+      ...context,
+      componentName: 'IconButton',
+      componentId: 'navigation_shortcut',
+      screenName: currentRoute?.params?.screen?.name ?? currentRoute?.name,
+    });
     setIsLoading(true);
     navigator?.maxApi?.dispatchFunction?.(
       'onToolAction',
@@ -147,8 +171,13 @@ const HeaderToolkitAction: React.FC<any> = ({
   const onPressHelpCenter = () => {
     const appName = translate?.(context?.name);
     const appDescription = translate?.(context?.description);
-    const isShowDescription =
-      context?.description && Object.keys(context?.description).length > 0;
+    const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
+    context?.autoTracking?.({
+      ...context,
+      componentName: 'IconButton',
+      componentId: 'navigation_helpcenter',
+      screenName: currentRoute?.params?.screen?.name ?? currentRoute?.name,
+    });
 
     navigator?.showBottomSheet({
       options: {
@@ -160,7 +189,7 @@ const HeaderToolkitAction: React.FC<any> = ({
             />
             <View>
               <Text typography={'label_default_medium'}>{appName}</Text>
-              {isShowDescription && (
+              {appDescription !== '{}' && (
                 <Text
                   typography={'description_default_regular'}
                   color={Colors.black_12}>
@@ -180,6 +209,14 @@ const HeaderToolkitAction: React.FC<any> = ({
    * on press icon more
    */
   const onPressIconMore = () => {
+    const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
+    context?.autoTracking?.({
+      ...context,
+      componentName: 'IconButton',
+      componentId: 'navigation_more',
+      screenName: currentRoute?.params?.screen?.name ?? currentRoute?.name,
+    });
+
     navigator?.maxApi?.dispatchFunction?.('showTools', tools, (key: string) => {
       for (const group of tools) {
         const pressedTool = group?.items?.find?.(
@@ -210,7 +247,16 @@ const HeaderToolkitAction: React.FC<any> = ({
       (group: ToolGroup) => group?.items?.length === 1
     )?.items[0];
     iconShortcut = singleTool?.icon;
-    shortcutOnPress = singleTool?.onPress;
+    shortcutOnPress = () => {
+      singleTool?.onPress?.();
+      const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
+      context?.autoTracking?.({
+        ...context,
+        componentName: 'IconButton',
+        componentId: 'navigation_shortcut',
+        screenName: currentRoute?.params?.screen?.name ?? currentRoute?.name,
+      });
+    };
   }
 
   const showBadge = tools.some((group: ToolGroup) =>

package/Application/Components/HeaderTitle.tsx

@@ -8,10 +8,11 @@ import {
 } from 'react-native';
 import {ApplicationContext, MiniAppContext} from '../index';
 import {exportFontFamily, scaleSize, Text} from '../../Text';
-import {Colors, Spacing, Styles} from '../../Consts';
+import {Colors, Spacing, Radius, Styles} from '../../Consts';
 import {TitleJourneyProps, TitleLocationProps, TitleUserProps} from '../types';
 import {Image} from '../../Image';
 import {Icon} from '../../Icon';
+import {Skeleton} from '../../Skeleton';
 
 /**
  * default header title used for nav
@@ -69,13 +70,16 @@ const TitleCustom: React.FC<any> = ({type, data, ...props}) => {
 const TitleUser: React.FC<TitleUserProps> = ({
   title,
   subTitle,
-  image,
+  image: image,
   tintColor,
   dotColor,
-  verify,
   onPress,
+  verify,
+  icons,
+  isLoading,
 }) => {
   const {theme} = useContext(ApplicationContext);
+  const maxWidth = icons?.length === 2 ? '73%' : '100%';
   const getShortName = (name: string) => {
     const words = name.split(' ');
     const lastTwoWords = words.slice(-2);
@@ -83,17 +87,214 @@ const TitleUser: React.FC<TitleUserProps> = ({
   };
 
   const renderImage = () => {
-    if (!!image) {
+    const avatarWidth = Spacing.XXL;
+    if (Array.isArray(image) && image.length > 0) {
+      switch (image.length) {
+        case 1: {
+          return image.map((i: string) => (
+            <Image source={{uri: i}} style={styles.circle} />
+          ));
+        }
+        case 2: {
+          return (
+            <View style={[Styles.flex, styles.groupAvtContainer]}>
+              <Image
+                source={{uri: image[0]}}
+                style={[
+                  styles.circleMedium,
+                  {position: 'absolute', top: 0, right: 0, zIndex: 0},
+                ]}
+              />
+              <Image
+                source={{uri: image[1]}}
+                style={[
+                  styles.circleMedium,
+                  {position: 'absolute', left: 0, bottom: 0, zIndex: 1},
+                ]}
+              />
+            </View>
+          );
+        }
+        case 3: {
+          return (
+            <View style={[Styles.flex, styles.groupAvtContainer]}>
+              <Image
+                source={{uri: image[0]}}
+                style={[
+                  styles.circleSmall,
+                  {position: 'absolute', bottom: 2, right: 2, zIndex: 0},
+                ]}
+              />
+              <Image
+                source={{uri: image[1]}}
+                style={[
+                  styles.circleSmall,
+                  {
+                    position: 'absolute',
+                    top: 2,
+                    left: avatarWidth / 2 - 16 / 2,
+                    zIndex: 1,
+                  },
+                ]}
+              />
+              <Image
+                source={{uri: image[2]}}
+                style={[
+                  styles.circleSmall,
+                  {position: 'absolute', left: 2, bottom: 2, zIndex: 2},
+                ]}
+              />
+            </View>
+          );
+        }
+        case 4: {
+          return (
+            <View style={[Styles.flex, styles.groupAvtContainer]}>
+              <Image
+                source={{uri: image[0]}}
+                style={[
+                  styles.circleSmall,
+                  {position: 'absolute', bottom: 2, left: 2, zIndex: 0},
+                ]}
+              />
+              <Image
+                source={{uri: image[1]}}
+                style={[
+                  styles.circleSmall,
+                  {position: 'absolute', bottom: 2, right: 2, zIndex: 1},
+                ]}
+              />
+              <Image
+                source={{uri: image[2]}}
+                style={[
+                  styles.circleSmall,
+                  {position: 'absolute', top: 2, right: 2, zIndex: 2},
+                ]}
+              />
+              <Image
+                source={{uri: image[2]}}
+                style={[
+                  styles.circleSmall,
+                  {position: 'absolute', top: 2, left: 2, zIndex: 3},
+                ]}
+              />
+            </View>
+          );
+        }
+        default: {
+          return (
+            <View style={[Styles.flex, styles.groupAvtContainer]}>
+              <Image
+                source={{uri: image[0]}}
+                style={[
+                  styles.circleSmall,
+                  {position: 'absolute', left: 2, bottom: 2, zIndex: 0},
+                ]}
+              />
+              <Image
+                source={{uri: image[1]}}
+                style={[
+                  styles.circleSmall,
+                  {position: 'absolute', top: 2, right: 2, zIndex: 2},
+                ]}
+              />
+              <Image
+                source={{uri: image[2]}}
+                style={[
+                  styles.circleSmall,
+                  {position: 'absolute', left: 2, top: 2, zIndex: 3},
+                ]}
+              />
+              <View
+                style={[
+                  styles.circleSmall,
+                  {
+                    position: 'absolute',
+                    bottom: 2,
+                    right: 2,
+                    zIndex: 1,
+                    backgroundColor: Colors.pink_09,
+                  },
+                ]}>
+                <Text
+                  color={Colors.pink_03}
+                  typography={'description_xs_regular'}>
+                  {`+${image.length - 3}`}
+                </Text>
+              </View>
+            </View>
+          );
+        }
+      }
+    }
+
+    if (typeof image === 'string') {
       return <Image source={{uri: image}} style={styles.circle} />;
-    } else {
-      return (
+    }
+
+    return (
+      <View
+        style={[
+          styles.imageContainer,
+          {borderColor: theme.colors.border.default},
+        ]}>
         <Text color={Colors.pink_03} typography={'description_xs_regular'}>
           {getShortName(title)}
         </Text>
-      );
-    }
+      </View>
+    );
+  };
+
+  const renderVerifyIcon = () => {
+    const renderIcons = () => {
+      if (icons && icons.length > 0) {
+        return icons.map(icon => (
+          <Image
+            source={{
+              uri: icon,
+            }}
+            style={styles.verifiedIcon}
+          />
+        ));
+      }
+    };
+
+    return <View style={Styles.row}>{renderIcons()}</View>;
+  };
+
+  const renderShimmer = () => {
+    return (
+      <View style={Styles.row}>
+        <View
+          style={[
+            styles.imageContainer,
+            {
+              borderColor: theme.colors.border.default,
+              marginRight: Spacing.M / 2,
+            },
+          ]}>
+          <Skeleton />
+        </View>
+        <View style={Styles.flex}>
+          <View style={styles.shimmerTitle}>
+            <Skeleton />
+          </View>
+          <View style={{height: Spacing.XXS}} />
+          <View style={styles.shimmerDescription}>
+            <Skeleton />
+          </View>
+        </View>
+      </View>
+    );
   };
 
+  if (verify) {
+    console.warn(`Warning: The verify value "${verify}" is deprecated.`);
+  }
+
+  if (isLoading) {
+    return renderShimmer();
+  }
   return (
     <TouchableOpacity
       style={styles.headerTitleContainer}
@@ -101,18 +302,12 @@ const TitleUser: React.FC<TitleUserProps> = ({
       disabled={onPress === undefined}>
       <View style={[Styles.row, Styles.flex]}>
         <View>
-          <View
-            style={[
-              styles.imageContainer,
-              {borderColor: theme.colors.border.default},
-            ]}>
-            {renderImage()}
-          </View>
+          {renderImage()}
           {!!dotColor && (
             <View style={[styles.dotAvatar, {backgroundColor: dotColor}]} />
           )}
         </View>
-        <View style={[Styles.flex, {marginLeft: 6}]}>
+        <View style={[Styles.flex, {marginLeft: 6, maxWidth: maxWidth}]}>
           <View style={Styles.row}>
             <Text
               typography="action_xs_bold"
@@ -120,14 +315,7 @@ const TitleUser: React.FC<TitleUserProps> = ({
               numberOfLines={1}>
               {title}
             </Text>
-            {verify && (
-              <Image
-                source={{
-                  uri: 'https://static.momocdn.net/app/img/kits/verified.png',
-                }}
-                style={styles.verifiedIcon}
-              />
-            )}
+            {renderVerifyIcon()}
           </View>
           {!!subTitle && (
             <Text
@@ -153,7 +341,24 @@ const TitleLocation: React.FC<TitleLocationProps> = ({
   location,
   description,
   onPress,
+  isLoading,
 }) => {
+  const renderShimmer = () => {
+    return (
+      <View style={Styles.flex}>
+        <View style={styles.shimmerDescription}>
+          <Skeleton />
+        </View>
+        <View style={{height: Spacing.XXS}} />
+        <View style={styles.shimmerTitle}>
+          <Skeleton />
+        </View>
+      </View>
+    );
+  };
+  if (isLoading) {
+    return renderShimmer();
+  }
   return (
     <TouchableOpacity
       style={[styles.headerTitleContainer, {alignItems: 'flex-start'}]}
@@ -193,14 +398,36 @@ const TitleJourney: React.FC<TitleJourneyProps> = ({
   iconColor,
   tintColor,
   onPress,
+  isLoading,
 }) => {
+  const {width} = Dimensions.get('screen');
+  const startWidth = width * 0.25;
+  const endWidth = width * 0.75 - 212;
+  const renderShimmer = () => {
+    return (
+      <View style={Styles.flex}>
+        <View style={styles.shimmerTitle}>
+          <Skeleton />
+        </View>
+        <View style={{height: Spacing.XXS}} />
+        <View style={styles.shimmerDescription}>
+          <Skeleton />
+        </View>
+      </View>
+    );
+  };
+  if (isLoading) {
+    return renderShimmer();
+  }
   return (
-    <TouchableOpacity
-      style={[styles.headerTitleContainer, {overflow: 'hidden'}]}
-      onPress={onPress}>
+    <TouchableOpacity style={styles.headerTitleContainer} onPress={onPress}>
       <View style={styles.rowJourney}>
         <View style={Styles.row}>
-          <Text typography="action_xs_bold" color={tintColor} numberOfLines={1}>
+          <Text
+            typography="action_xs_bold"
+            style={{maxWidth: startWidth}}
+            color={tintColor}
+            numberOfLines={1}>
             {start}
           </Text>
           <Icon
@@ -211,6 +438,7 @@ const TitleJourney: React.FC<TitleJourneyProps> = ({
           />
           {!!end && (
             <Text
+              style={{maxWidth: endWidth}}
               typography="action_xs_bold"
               color={tintColor}
               numberOfLines={1}>
@@ -270,6 +498,28 @@ const styles = StyleSheet.create({
   circle: {
     width: 32,
     height: 32,
+    borderRadius: 16,
+    borderWidth: 0.5,
+    borderColor: Colors.black_04,
+  },
+  circleMedium: {
+    width: 24,
+    height: 24,
+    borderRadius: 16,
+    borderWidth: 0.5,
+    borderColor: Colors.black_04,
+  },
+  circleSmall: {
+    width: 16,
+    height: 16,
+    borderRadius: 16,
+    borderWidth: 0.5,
+    borderColor: Colors.black_04,
+  },
+  groupAvtContainer: {
+    width: Spacing.XXL,
+    height: Spacing.XXL,
+    position: 'relative',
   },
   imageContainer: {
     width: 32,
@@ -291,7 +541,19 @@ const styles = StyleSheet.create({
     borderWidth: 2,
     borderColor: Colors.black_01,
   },
-  verifiedIcon: {width: 12, height: 12, marginLeft: Spacing.XS},
+  verifiedIcon: {width: 16, height: 16, marginLeft: Spacing.XS},
+  shimmerTitle: {
+    height: 18,
+    width: 120,
+    borderRadius: Radius.XS,
+    overflow: 'hidden',
+  },
+  shimmerDescription: {
+    height: 12,
+    width: 120,
+    borderRadius: Radius.XS,
+    overflow: 'hidden',
+  },
 });
 
 export {HeaderTitle, TitleCustom};

package/Application/Components/SearchHeader.tsx

@@ -45,18 +45,13 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
     const goBack = () => {
       const canGoBack = navigator?.ref?.current?.canGoBack?.();
       const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
-      const params = {
+      context?.autoTracking?.({
         ...context,
-        screen_name: currentRoute?.params?.screen?.name ?? currentRoute?.name,
-        trigger_id: '111154000000000000',
-        icon_name: 'back',
-      };
-      navigator?.maxApi?.showToastDebug?.({
-        appId: `auto - ${context.appId}`,
-        message: 'service_icon_clicked',
-        params,
+        componentName: 'SearchHeader',
+        componentId: 'search_back',
+        screenName: currentRoute?.params?.screen?.name ?? currentRoute?.name,
       });
-      navigator?.maxApi?.trackEvent?.('service_icon_clicked', params);
+
       if (canGoBack) {
         navigator?.ref?.current?.goBack?.();
       } else if (navigator?.maxApi) {

package/Application/NavigationContainer.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useRef, useState} from 'react';
+import React, {useContext, useEffect, useRef, useState} from 'react';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import {
   NavigationContainer as ReactNavigationContainer,
@@ -8,13 +8,13 @@ import {
   createStackNavigator,
   StackNavigationOptions,
 } from '@react-navigation/stack';
-import {DeviceEventEmitter} from 'react-native';
+import {DeviceEventEmitter, NativeModules} from 'react-native';
 import StackScreen from './StackScreen';
 import ModalScreen from './ModalScreen';
 import Navigator from './Navigator';
 import {getDialogOptions, getModalOptions, getStackOptions} from './utils';
 import {NavigationContainerProps} from './types';
-import {ApplicationContext} from './index';
+import {ApplicationContext, MiniAppContext} from './index';
 import Localize from './Localize';
 import {defaultTheme} from '../Consts';
 
@@ -28,11 +28,20 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   initialParams,
   localize = new Localize({vi: {}, en: {}}),
 }) => {
+  const context = useContext<any>(MiniAppContext);
   const navigationRef = useRef<NavigationContainerRef>(null);
+  const routes = useRef<any>();
   const isReady = useRef(false);
   const navigator = useRef(new Navigator(navigationRef, isReady));
   const [showGrid, setShowGrid] = useState(false);
-  const [configHeader, setConfigHeader] = useState(undefined);
+  let config = null;
+  try {
+    config = JSON.parse(
+      NativeModules?.ConfigsModule?.getConfigSync?.('DESIGN_SYSTEM') || ''
+    );
+  } catch (e) {
+    console.log(e);
+  }
 
   /**
    * inject data for navigator
@@ -63,15 +72,29 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
     return localize?.translate(data as string);
   };
 
-  useEffect(() => {
-    maxApi?.getFeatureById('platform_config', (data: any) => {
-      const parsedConfig = JSON.parse(data?.param);
-      const header = parsedConfig?.navigationBar?.headerBar;
-      if (header) {
-        setConfigHeader(header);
-      }
+  const onScreenNavigated = (
+    preScreenName: string,
+    screenName: string,
+    action: string
+  ) => {
+    context?.autoTracking?.({
+      ...context,
+      preScreenName,
+      screenName,
+      componentName: 'Screen',
+      state: 'navigated',
+      action,
     });
-  }, []);
+
+    /**
+     * debug toast
+     */
+    maxApi?.showToastDebug?.({
+      appId: context.appId,
+      message: `${screenName} screen_navigated`,
+      type: 'ERROR',
+    });
+  };
 
   return (
     <SafeAreaProvider>
@@ -81,7 +104,8 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
           theme: {
             ...theme,
             assets: {
-              headerBackground: theme.assets?.headerBackground || configHeader,
+              headerBackground:
+                theme.assets?.headerBackground || config?.headerBar,
             },
           },
           showGrid,
@@ -102,6 +126,27 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
           ref={navigationRef}
           onReady={() => {
             isReady.current = true;
+            routes.current = navigationRef.current?.getRootState?.()?.routes;
+          }}
+          onStateChange={state => {
+            const lastedRoute: any = state?.routes?.[state?.routes?.length - 1];
+            const oldRoute: any = routes.current?.[routes.current?.length - 1];
+            const lasted = lastedRoute?.params?.screen;
+            const previous = oldRoute?.params?.screen;
+            if (routes.current?.length < (state?.routes?.length ?? 0)) {
+              onScreenNavigated(
+                previous?.name ?? previous?.type?.name,
+                lasted?.name ?? lasted?.type?.name,
+                'push'
+              );
+            } else if (routes.current?.length > (state?.routes?.length ?? 0)) {
+              onScreenNavigated(
+                previous?.name ?? previous?.type?.name,
+                lasted?.name ?? lasted?.type?.name,
+                'back'
+              );
+            }
+            routes.current = state?.routes;
           }}
           independent={true}>
           <Stack.Navigator initialRouteName="Stack" headerMode="screen">

package/Application/StackScreen.tsx

@@ -6,6 +6,8 @@ import Navigation from './Navigation';
 import {ApplicationContext, MiniAppContext, ScreenContext} from './index';
 import {GridSystem} from '../Layout';
 
+const runAfterInteractions = InteractionManager.runAfterInteractions;
+
 /**
  * container for stack screen
  * @param props
@@ -42,7 +44,6 @@ const StackScreen: React.FC<ScreenParams> = props => {
   delete data.initialParams;
 
   const screenName = Component?.name || Component?.type?.name || 'Invalid';
-  const routes = props.navigation.getState()?.routes || [];
 
   /**
    * set options for screen
@@ -67,15 +68,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
 
     const subscription = props.navigation?.addListener?.('focus', () => {
       navigator?.maxApi?.of?.({screenName});
-      navigator?.maxApi?.getDataObserver('CURRENT_SCREEN', (data: any) => {
-        let preScreenName = data?.screenName;
-        if (routes?.length > 1) {
-          const screen = routes?.[routes?.length - 2]?.params?.screen;
-          preScreenName = screen?.name || screen?.type?.name || 'Invalid';
-        }
-        onScreenNavigated(preScreenName);
-        navigator?.maxApi?.setObserver('CURRENT_SCREEN', {screenName});
-      });
+      navigator?.maxApi?.setObserver('CURRENT_SCREEN', {screenName});
     });
     navigator?.maxApi?.startTraceScreenLoad?.(
       screenName,
@@ -115,7 +108,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
         timeLoad = tracking.current.endTime - tracking.current.startTime;
       }
 
-      context.autoTracking?.({
+      context?.autoTracking?.({
         ...context,
         screenName,
         componentName: 'Screen',
@@ -162,7 +155,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
         tracking.current.timeInteraction = timeLoad;
       }
 
-      context.autoTracking?.({
+      context?.autoTracking?.({
         ...context,
         screenName,
         componentName: 'Screen',
@@ -188,46 +181,39 @@ const StackScreen: React.FC<ScreenParams> = props => {
     }
   };
 
-  /**
-   * tracking for screen navigated
-   */
-  const onScreenNavigated = (preScreenName: string) => {
-    context.autoTracking?.({
-      ...context,
-      preScreenName,
-      screenName,
-      componentName: 'Screen',
-      state: 'navigated',
-    });
-
-    /**
-     * debug toast
-     */
-    navigator?.maxApi?.showToastDebug?.({
-      appId: context.appId,
-      message: `${screenName} screen_navigated`,
-      type: 'ERROR',
-    });
-  };
-
   return (
     <ScreenContext.Provider
       value={{
         screenName,
         onElementLoad: (data: any) => {
+          /**
+           * tracking for element screen load
+           */
           clearTimeout(tracking.current.timeoutLoad);
           tracking.current.endTime = Date.now();
           tracking.current.timeoutInteraction?.cancel?.();
-          tracking.current.timeoutInteraction =
-            InteractionManager.runAfterInteractions(() => {
-              tracking.current.timeInteraction =
-                Date.now() - tracking.current.startTime;
-            });
-
+          tracking.current.timeoutInteraction = runAfterInteractions(() => {
+            tracking.current.timeInteraction =
+              Date.now() - tracking.current.startTime;
+          });
+
+          /**
+           * support for debug last element
+           */
           if (data?.componentName) {
             lastElement.current = data;
           }
 
+          /**
+           * for stop tracking when user interaction
+           */
+          if (data.interaction) {
+            onScreenLoad();
+            onScreenInteraction();
+          }
+          /**
+           * timeout for handle tracking screen
+           */
           tracking.current.timeoutLoad = setTimeout(() => {
             const time = tracking.current.endTime - tracking.current.startTime;
             if (tracking.current.timeLoad === 0) {

package/Application/types.ts

@@ -158,6 +158,7 @@ export interface NavigationOptions
   extends Omit<StackNavigationOptions, 'headerRight' | 'headerTitle'> {
   preventBack?: PopupNotifyProps;
   onPressLeftHeader?: () => void;
+  onBackHandler?: (goBack: () => void) => void;
   hiddenBack?: boolean;
   headerTitle?: HeaderTitleProps | string;
   headerRight?: OnBoarding | HeaderRightToolkit | any;
@@ -178,6 +179,7 @@ export type HeaderRightToolkit = {
 export interface HeaderBackProps extends NavigationButtonProps {
   preventBack?: PopupNotifyProps;
   onPressLeftHeader?: () => void;
+  onBackHandler?: (goBack: () => void) => void;
 }
 
 export type HeaderBackgroundProps = {
@@ -193,11 +195,13 @@ export type HeaderBackgroundProps = {
 export type TitleUserProps = {
   title: string;
   subTitle?: string;
-  image?: string;
+  image?: string[] | string;
   dotColor?: string;
   verify?: boolean;
   tintColor?: string;
   onPress?: () => void;
+  icons?: string[];
+  isLoading?: boolean;
 };
 
 export type TitleLocationProps = {
@@ -205,6 +209,7 @@ export type TitleLocationProps = {
   location: string;
   tintColor?: string;
   onPress?: () => void;
+  isLoading?: boolean;
 };
 
 export type TitleJourneyProps = {
@@ -215,6 +220,7 @@ export type TitleJourneyProps = {
   iconColor?: string;
   tintColor?: string;
   onPress?: () => void;
+  isLoading?: boolean;
 };
 
 export type HeaderToolkitProps = {

package/Application/utils.tsx

@@ -87,6 +87,7 @@ const getOptions = (
    */
   if (
     typeof params.onPressLeftHeader === 'function' ||
+    typeof params.onBackHandler === 'function' ||
     params.preventBack !== undefined ||
     typeof params.hiddenBack === 'boolean'
   ) {
@@ -95,6 +96,7 @@ const getOptions = (
         {...props}
         preventBack={params.preventBack}
         onPressLeftHeader={params.onPressLeftHeader}
+        onBackHandler={params.onBackHandler}
       />
     );
     if (params.hiddenBack) {

package/Button/index.tsx

@@ -88,7 +88,6 @@ 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';
@@ -293,7 +292,6 @@ const Button: FC<ButtonProps> = ({
   return (
     <ComponentContext.Provider
       value={{
-        ...component,
         componentName: 'Button',
         params,
         state: state,

package/Input/Input.tsx

@@ -67,7 +67,6 @@ 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);
@@ -270,7 +269,6 @@ const Input = forwardRef(
     return (
       <ComponentContext.Provider
         value={{
-          ...component,
           componentName: 'Input',
           params,
           state: inputState,

package/Input/InputDropDown.tsx

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

package/Input/InputMoney.tsx

@@ -62,7 +62,6 @@ const InputMoney = forwardRef(
     ref
   ) => {
     const {theme} = useContext(ApplicationContext);
-    const component = useContext<any>(ComponentContext);
 
     const [focused, setFocused] = useState(false);
     const inputRef = useRef<TextInput>(null);
@@ -207,7 +206,6 @@ const InputMoney = forwardRef(
     return (
       <ComponentContext.Provider
         value={{
-          ...component,
           componentName: 'InputMoney',
           params,
           state: inputState,

package/Input/InputOTP.tsx

@@ -88,7 +88,6 @@ 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) => {
@@ -230,7 +229,6 @@ const InputOTP = forwardRef(
     return (
       <ComponentContext.Provider
         value={{
-          ...component,
           componentName: 'InputOTP',
           params,
           state: 'enabled',

package/Input/InputSearch.tsx

@@ -139,7 +139,6 @@ 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);
@@ -272,7 +271,6 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
   return (
     <ComponentContext.Provider
       value={{
-        ...component,
         componentName: 'InputSearch',
         params,
         state: inputState,

package/Title/index.tsx

@@ -10,6 +10,12 @@ import {TitleProps} from './types';
 import {Typography} from '../Text/types';
 
 const Title: FC<TitleProps> = ({
+  accessibilityLabelIcon,
+  accessibilityLabelTitle,
+  accessibilityLabelRightAction,
+  accessibilityLabelDescription,
+  accessibilityLabelBadge,
+  accessibilityLabelTrailingAction,
   title = 'Title',
   type = 'section',
   size = 'medium',
@@ -56,7 +62,7 @@ const Title: FC<TitleProps> = ({
     }
 
     return (
-      <View style={[styles.iconView, iconStyle]}>
+      <View accessibilityLabel={accessibilityLabelIcon} style={[styles.iconView, iconStyle]}>
         <Icon color={iconColor} source={icon} />
       </View>
     );
@@ -73,6 +79,7 @@ const Title: FC<TitleProps> = ({
           }}
           style={[styles.iconLeftView, flexStyle]}>
           <RNText
+            accessibilityLabel={accessibilityLabelTitle}
             numberOfLines={numberOfLines}
             style={[
               styleSheet[typography],
@@ -93,7 +100,9 @@ const Title: FC<TitleProps> = ({
               }}
               style={{
                 alignItems: 'center',
-              }}>
+              }}
+              accessibilityLabel={accessibilityLabelBadge}
+              >
               <Badge style={styles.badge} label={badgeLabel} />
             </View>
           )}
@@ -101,6 +110,7 @@ const Title: FC<TitleProps> = ({
         </View>
         {description && (
           <Text
+            accessibilityLabel={accessibilityLabelDescription}
             style={styles.description}
             color={theme.colors.text.secondary}
             typography={'description_default_regular'}>
@@ -114,6 +124,7 @@ const Title: FC<TitleProps> = ({
   const renderActionLeft = () => {
     return (
       <TouchableOpacity
+        accessibilityLabel={accessibilityLabelTrailingAction}
         onPress={onPressTrailingAction}
         style={styles.iconLeftView}
         hitSlop={{top: 10, bottom: 10, left: 50, right: 10}}>
@@ -157,7 +168,9 @@ const Title: FC<TitleProps> = ({
               {
                 backgroundColor: theme.colors.primary + '0F',
               },
-            ]}>
+            ]}
+            accessibilityLabel={accessibilityLabelRightAction}
+            >
             <Icon
               source={'arrow_chevron_right_small'}
               size={scaleSize(22)}
@@ -165,7 +178,7 @@ const Title: FC<TitleProps> = ({
             />
           </TouchableOpacity>
         ) : (
-          <TouchableOpacity onPress={onPressRightAction}>
+          <TouchableOpacity onPress={onPressRightAction} accessibilityLabel={accessibilityLabelRightAction}>
             <Text color={theme.colors.primary} typography={buttonTypo}>
               {buttonTitle}
             </Text>
@@ -179,6 +192,7 @@ const Title: FC<TitleProps> = ({
     return (
       <View style={isSection && styles.margin}>
         <RNText
+          accessibilityLabel={accessibilityLabelTitle}
           numberOfLines={numberOfLines}
           style={[styleSheet[typography], styles.title]}>
           {title}

package/Title/types.ts

@@ -17,4 +17,10 @@ export type TitleProps = {
   onPressTrailingAction?: () => void;
   textOnly?: boolean;
   style?: ViewStyle;
+  accessibilityLabelTitle?: string;
+  accessibilityLabelRightAction?: string;
+  accessibilityLabelDescription?: string;
+  accessibilityLabelIcon?: string;
+  accessibilityLabelBadge?: string;
+  accessibilityLabelTrailingAction?: string;
 };

package/package.json

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