@momo-kits/foundation 0.109.2-beta.1 → 0.110.1-beta.0

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,
@@ -29,6 +30,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     barrierDismissible = false,
     draggable = true,
     useBottomInset = true,
+    useKeyboardAvoidingView = true,
     keyboardVerticalOffset,
   }: BottomSheetParams = props.route.params;
   const pan = useRef(
@@ -53,6 +55,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       },
       onPanResponderRelease: (_, gestureState) => {
         if (gestureState.dy > 100) {
+          action.current = 'gesture';
           onDismiss();
         } else {
           Animated.spring(pan, {
@@ -82,7 +85,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       duration: 150,
     }).start();
     return () => {
-      props.route.params?.onDismiss?.();
+      props.route.params?.onDismiss?.(action.current);
     };
   }, []);
 
@@ -150,7 +153,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,16 +168,25 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     <Container
       transparent
       visible={true}
-      onRequestClose={() => onDismiss()}
+      onRequestClose={() => {
+        onDismiss();
+      }}
       style={styles.overlay}>
       <KeyboardAvoidingView
-        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        behavior={Platform.select({
+          ios: 'padding',
+          android: undefined,
+        })}
         keyboardVerticalOffset={keyboardVerticalOffset ?? -20}
+        enabled={useKeyboardAvoidingView}
         style={[Styles.flex, {justifyContent: 'flex-end'}]}>
         <TouchableOpacity
           style={Styles.flex}
           activeOpacity={1}
-          onPress={() => onDismiss()}
+          onPress={() => {
+            action.current = 'touch';
+            onDismiss();
+          }}
         />
         <Animated.View style={{transform: pan.getTranslateTransform()}}>
           {renderHeader()}

package/Application/BottomTab/BottomTabBar.tsx

@@ -16,7 +16,7 @@ import {
   View,
 } from 'react-native';
 import {EdgeInsets, useSafeAreaInsets} from 'react-native-safe-area-context';
-import {Radius} from '../../Consts';
+import {Colors, Radius} from '../../Consts';
 import {Icon} from '../../Icon';
 import {Text} from '../../Text';
 import {FloatingButtonProps} from '../types';
@@ -207,7 +207,7 @@ export default function BottomTabBar({
   return (
     <Animated.View
       style={[
-        styles.tabBar,
+        floatingButton ? styles.tabBarFloatingButton : styles.tabBar,
         {
           backgroundColor: theme.colors.background.surface,
           borderTopColor: theme.colors.border.default,
@@ -253,6 +253,17 @@ const styles = StyleSheet.create({
     borderTopWidth: StyleSheet.hairlineWidth,
     elevation: 8,
   },
+  tabBarFloatingButton: {
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 1,
+    shadowColor: Colors.black_20,
+    shadowOffset: {width: 0, height: -2},
+    shadowOpacity: 0.05,
+    shadowRadius: 3,
+    elevation: 8,
+  },
   floatingContainer: {
     position: 'absolute',
     alignItems: 'center',

package/Application/BottomTab/index.tsx

@@ -7,7 +7,7 @@ import {EventArg} from '@react-navigation/core';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {Colors} from '../../Consts';
 import {Icon} from '../../Icon';
-import {Text} from '../../Text';
+import {exportFontFamily, Text} from '../../Text';
 import {ApplicationContext} from '../index';
 import StackScreen from '../StackScreen';
 import {BottomTabProps, NavigationScreenProps} from '../types';
@@ -146,7 +146,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
                 lineHeight: Platform.OS === 'android' ? 17 : 14,
                 fontWeight: 'bold',
                 alignSelf: 'center',
-                fontFamily: `${theme.font}-Bold`,
+                fontFamily: exportFontFamily('bold'),
                 left: isDot ? 8 : 4,
                 top: isDot ? -2 : -6,
                 backgroundColor: isNum ? Colors.red_03 : Colors.orange_03,

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',
@@ -71,6 +114,8 @@ const BottomSheetHelpCenter: React.FC<any> = ({onRequestClose}) => {
           appName: context?.name?.['en'],
           buildNumber: context?.buildNumber,
         },
+        newUi: true,
+        stepFeedback: 1,
       });
     });
   };

package/Application/Components/HeaderAnimated.tsx

@@ -35,7 +35,8 @@ const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   return (
     <Animated.View
       style={{
-        height: 210,
+        width: '100%',
+        aspectRatio: 16 / 9,
         opacity: opacity,
         transform: [{scale}, {translateY}],
       }}>

package/Application/Components/HeaderBackground.tsx

@@ -13,15 +13,15 @@ const LinearGradientAnimated = Animated.createAnimatedComponent(LinearGradient);
  */
 const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   image,
-  animatedValue,
+  animatedValue = new Animated.Value(0),
   useGradient = true,
   useShadowHeader = true,
-  gradientColor,
+  gradientColor: customGradientColor,
   headerBackground,
 }) => {
   const {theme} = useContext(ApplicationContext);
 
-  const linearGradientColor = gradientColor ?? theme.colors.gradient;
+  const gradientColor = customGradientColor ?? theme.colors.gradient;
 
   let headerImage = headerBackground ?? theme.assets?.headerBackground;
   if (image === null) {
@@ -48,13 +48,21 @@ 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 && (
+        {useGradient && !!gradientColor && (
           <LinearGradientAnimated
-            colors={[linearGradientColor, linearGradientColor + '00']}
+            colors={[gradientColor, gradientColor + '00']}
             style={[styles.extendedHeader, {opacity: opacityGradient}]}>
             {!!headerImage && (
               <Image
@@ -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

@@ -46,6 +46,7 @@ const HeaderExtendHeader: React.FC<{
   const gradientColor = customGradientColor ?? theme.colors.gradient;
   const headerBackground = customBackground ?? theme.assets?.headerBackground;
   const leftPosition = inputSearchProps?.leftPosition || BACK_WIDTH + 20;
+  const isIos = Platform.OS === 'ios';
 
   const opacityBackground = animatedValue?.interpolate({
     inputRange: [0, 52],
@@ -94,7 +95,9 @@ const HeaderExtendHeader: React.FC<{
         <Animated.View style={{height: height}} />
         <Animated.View
           style={[
-            useShadowHeader ? styles.shadowHeader : styles.dividerHeader,
+            isIos && useShadowHeader
+              ? styles.shadowHeader
+              : styles.dividerHeader,
             {
               backgroundColor: theme.colors.background.surface,
               opacity: opacityBackground,
@@ -102,26 +105,36 @@ 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={[
             styles.headerBox,
             {height: headerType === 'extended' ? height : heightHeader},
           ]}>
-          <LinearGradientAnimated
-            colors={[gradientColor, gradientColor + '00']}
-            style={[styles.extendedHeader, {opacity: opacityGradient}]}>
-            {!!theme.assets?.headerBackground && (
-              <Image
-                style={styles.headerBackground}
-                source={{uri: theme.assets?.headerBackground}}
-                loading={false}
-              />
-            )}
-          </LinearGradientAnimated>
+          {!!gradientColor && (
+            <LinearGradientAnimated
+              colors={[gradientColor, gradientColor + '00']}
+              style={[styles.extendedHeader, {opacity: opacityGradient}]}>
+              {!!theme.assets?.headerBackground && (
+                <Image
+                  style={styles.headerBackground}
+                  source={{uri: theme.assets?.headerBackground}}
+                  loading={false}
+                />
+              )}
+            </LinearGradientAnimated>
+          )}
         </Animated.View>
 
         <Animated.View
@@ -172,20 +185,30 @@ const HeaderExtendHeader: React.FC<{
               height: heightHeader,
               backgroundColor: theme.colors.background.surface,
               opacity: opacityBackground,
+              overflow: 'hidden',
             },
-          ]}
-        />
-        <LinearGradientAnimated
-          colors={[gradientColor, gradientColor + '00']}
-          style={[styles.extendedHeader, {opacity: opacityGradient}]}>
-          {!!headerBackground && (
+          ]}>
+          {headerBackground && (
             <Image
               style={styles.headerBackground}
               source={{uri: headerBackground}}
               loading={false}
             />
           )}
-        </LinearGradientAnimated>
+        </Animated.View>
+        {!!gradientColor && (
+          <LinearGradientAnimated
+            colors={[gradientColor, gradientColor + '00']}
+            style={[styles.extendedHeader, {opacity: opacityGradient}]}>
+            {!!headerBackground && (
+              <Image
+                style={styles.headerBackground}
+                source={{uri: headerBackground}}
+                loading={false}
+              />
+            )}
+          </LinearGradientAnimated>
+        )}
         <View style={{height: heightHeader}} />
         <Verified />
       </>
@@ -244,8 +267,14 @@ const styles = StyleSheet.create({
         shadowRadius: 10,
       },
       android: {
-        borderBottomWidth: 1,
-        borderColor: Colors.black_04,
+        shadowColor: Colors.black_17,
+        shadowOffset: {
+          width: 3,
+          height: 3,
+        },
+        shadowOpacity: 0.12,
+        shadowRadius: 10,
+        elevation: 10,
       },
     }),
   },

package/Application/Components/HeaderLeft.tsx

@@ -12,35 +12,21 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   tintColor,
   preventBack,
   onPressLeftHeader,
+  onBackHandler,
 }) => {
   const context = useContext<any>(MiniAppContext);
   const {navigator} = useContext(ApplicationContext);
 
-  useEffect(() => {
-    const backHandler = BackHandler.addEventListener(
-      'hardwareBackPress',
-      goBackSafe
-    );
-
-    return () => backHandler.remove();
-  }, []);
-
   const goBackSafe = () => {
     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 +35,6 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
       } else {
         (global as any)?.miniAppApi?.dispatch?.('dismiss', context);
       }
-      onPressLeftHeader?.();
     };
 
     if (preventBack) {
@@ -68,11 +53,25 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
         ),
       });
     } else {
-      goBack();
+      onPressLeftHeader?.();
+      if (typeof onBackHandler === 'function') {
+        onBackHandler(goBack);
+      } else {
+        goBack();
+      }
     }
     return true;
   };
 
+  useEffect(() => {
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      goBackSafe
+    );
+
+    return () => backHandler.remove();
+  }, [goBackSafe]);
+
   return (
     <View style={styles.headerLeft}>
       <NavigationButton

package/Application/Components/HeaderRight.tsx

@@ -15,25 +15,16 @@ 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 DID_SYNC_NEW_HOME = 'did_sync_new_home';
 /**
  * main component for header right
  */
 const HeaderRight: React.FC<any> = props => {
   const {headerRight = {}} = 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'
-  ) {
+  if (typeof props.headerRight === 'function') {
     return props.headerRight(props);
   }
 
@@ -61,12 +52,13 @@ const HeaderRight: React.FC<any> = props => {
 const HeaderToolkitAction: React.FC<any> = ({
   tintColor,
   preventClose,
-  useShortcut = true,
+  useShortcut = false,
   useMore = false,
   tools = [],
 }) => {
   const {navigator, translate} = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
+  const appCode = navigator?.appCode ? navigator?.appCode : context?.code;
 
   const [isFavorite, setIsFavorite] = useState<boolean>(false);
   const [isLoading, setIsLoading] = useState(false);
@@ -74,11 +66,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(appCode);
+          setIsFavorite(status);
+        }
+      );
+      return () => {
+        favoriteObserver?.remove?.();
+      };
     }
-  }, []);
+  }, [useShortcut, context, appCode]);
 
   let buttonStyle: ViewStyle = {};
-  if (tintColor === Colors.black_01) {
+  if (tintColor === Colors.black_01 || tintColor === 'white') {
     buttonStyle = {
       backgroundColor: '#00000099',
       borderColor: '#FFFFFF33',
@@ -88,22 +91,23 @@ const HeaderToolkitAction: React.FC<any> = ({
   /**
    * check app is favorite
    */
-  const checkAppIsFavorite = () => {
-    navigator?.maxApi?.dispatchFunction?.(
-      'isFavoriteApp',
-      context?.app_code,
-      (result: boolean) => {
-        if (result !== isFavorite) {
-          setIsFavorite(result);
-        }
-      }
-    );
-  };
+  const checkAppIsFavorite = () =>
+    navigator?.maxApi?.isFavoriteApp(appCode, (result: boolean) => {
+      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: () => (
@@ -132,13 +136,20 @@ 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',
+    navigator?.maxApi?.onToolAction(
       {
         item: {
           key: 'onFavorite',
         },
+        code: appCode,
       },
       ({success}: {success: boolean}) => {
         if (success) {
@@ -157,6 +168,14 @@ const HeaderToolkitAction: React.FC<any> = ({
   const onPressHelpCenter = () => {
     const appName = translate?.(context?.name);
     const appDescription = translate?.(context?.description);
+    const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
+    context?.autoTracking?.({
+      ...context,
+      componentName: 'IconButton',
+      componentId: 'navigation_helpcenter',
+      screenName: currentRoute?.params?.screen?.name ?? currentRoute?.name,
+    });
+
     navigator?.showBottomSheet({
       options: {
         header: (
@@ -167,11 +186,13 @@ const HeaderToolkitAction: React.FC<any> = ({
             />
             <View>
               <Text typography={'label_default_medium'}>{appName}</Text>
-              <Text
-                typography={'description_default_regular'}
-                color={Colors.black_12}>
-                {appDescription}
-              </Text>
+              {appDescription !== '{}' && (
+                <Text
+                  typography={'description_default_regular'}
+                  color={Colors.black_12}>
+                  {appDescription}
+                </Text>
+              )}
             </View>
           </View>
         ),
@@ -185,7 +206,15 @@ const HeaderToolkitAction: React.FC<any> = ({
    * on press icon more
    */
   const onPressIconMore = () => {
-    navigator?.maxApi?.dispatchFunction?.('showTools', tools, (key: string) => {
+    const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
+    context?.autoTracking?.({
+      ...context,
+      componentName: 'IconButton',
+      componentId: 'navigation_more',
+      screenName: currentRoute?.params?.screen?.name ?? currentRoute?.name,
+    });
+
+    navigator?.maxApi?.showTools(tools, appCode, (key: string) => {
       for (const group of tools) {
         const pressedTool = group?.items?.find?.(
           (tool: Tool) => tool?.key === key
@@ -215,7 +244,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) =>