@momo-kits/foundation 0.81.1-beta.4 → 0.81.1-beta.5

package/Application/Components.tsx

@@ -1,14 +1,13 @@
 import React, {Fragment, useContext, useEffect, useState} from 'react';
 import {
   Animated,
+  BackHandler,
   DeviceEventEmitter,
-  Platform,
   StatusBar,
   StyleSheet,
   TouchableOpacity,
   View,
 } from 'react-native';
-import {TouchableOpacity as TouchableGesture} from 'react-native-gesture-handler';
 import {ApplicationContext} from './index';
 import {Colors, Radius, Spacing, Styles} from '../Consts';
 import {Image} from '../Image';
@@ -24,8 +23,7 @@ import {scaleSize, Text} from '../Text';
 import {Icon} from '../Icon';
 import {PopupNotify} from '../Popup';
 
-const Touchable =
-  Platform.OS === 'android' ? TouchableGesture : TouchableOpacity;
+const TRIGGER_ID = "'111154000000000000";
 
 const styles = StyleSheet.create({
   navigationButton: {
@@ -106,7 +104,7 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   }
 
   return (
-    <Touchable
+    <TouchableOpacity
       accessibilityLabel={`NavigationButton/${accessibilityLabel}`}
       style={[
         styles.navigationButton,
@@ -121,7 +119,7 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
         color={tintColor ?? theme.colors.text.default}
         size={20}
       />
-    </Touchable>
+    </TouchableOpacity>
   );
 };
 
@@ -153,9 +151,30 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   backgroundColor,
   accessibilityLabel = '',
 }) => {
-  const {navigator} = useContext(ApplicationContext);
+  const {navigator, appInfo} = useContext(ApplicationContext);
+  const screen_name = navigator?.ref?.current?.getCurrentRoute().name;
+
+  useEffect(() => {
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      goBack,
+    );
+
+    return () => backHandler.remove();
+  }, []);
+
   const goBack = () => {
     const canGoBack = navigator?.ref.current?.canGoBack();
+
+    if (appInfo) {
+      navigator?.maxApi?.trackEvent('service_icon_clicked', {
+        ...appInfo,
+        screen_name,
+        trigger_id: TRIGGER_ID,
+        icon_name: 'back',
+      });
+    }
+
     if (canGoBack) {
       if (preventBack) {
         navigator?.showModal({
@@ -181,6 +200,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
       DeviceEventEmitter.emit('dismiss', {requestId});
     }
     onPressLeftHeader?.();
+    return true;
   };
 
   return (
@@ -397,17 +417,21 @@ const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
               borderWidth: backgroundColor ? 0.5 : 0,
             },
           ]}>
-          <Touchable accessibilityLabel={'Toolkit/More'} onPress={onMore}>
+          <TouchableOpacity
+            accessibilityLabel={'Toolkit/More'}
+            onPress={onMore}>
             <Icon color={tintColor} source="navigation_more_horiz" size={20} />
-          </Touchable>
+          </TouchableOpacity>
           <View style={[styles.divider, {backgroundColor: tintColor}]} />
-          <Touchable accessibilityLabel={`Toolkit/Close`} onPress={onClose}>
+          <TouchableOpacity
+            accessibilityLabel={`Toolkit/Close`}
+            onPress={onClose}>
             <Icon
               color={tintColor}
               source="16_navigation_close_circle"
               size={20}
             />
-          </Touchable>
+          </TouchableOpacity>
         </View>
       </View>
     );

package/Application/ModalScreen.tsx

@@ -39,8 +39,10 @@ const ModalScreen: React.FC<any> = props => {
 };
 
 const Modal: React.FC<ModalParams> = props => {
-  const {theme, navigator} = useContext(ApplicationContext);
-  const {screen, barrierDismissible}: ModalParams = props.route.params;
+  const TRIGGER_ID = '111012100000000000';
+  const {theme, navigator, appInfo} = useContext(ApplicationContext);
+  const {screen, barrierDismissible, modalName}: ModalParams =
+    props.route.params;
   const Component = useRef(screen).current;
   const navigation = new Navigation(props.navigation, theme);
   const params = {
@@ -50,6 +52,37 @@ const Modal: React.FC<ModalParams> = props => {
 
   delete params.screen;
 
+  const navigationRoutes = props.navigation.getState()?.routes || [];
+  const routesLength = navigationRoutes.length;
+  let screen_name = navigationRoutes?.[0]?.params?.screen?.name;
+  if (routesLength > 1) {
+    screen_name = navigationRoutes[routesLength - 2]?.params?.screen?.name;
+  }
+  const error_code = (screen as Function)?.()?.props?.information;
+
+  useEffect(() => {
+    navigator?.maxApi?.trackEvent('service_component_displayed', {
+      ...appInfo,
+      screen_name,
+      trigger_id: TRIGGER_ID,
+      component_type: 'popup',
+      component_name: modalName,
+      error_code,
+    });
+
+    return () => {
+      navigator?.maxApi?.trackEvent('service_icon_clicked', {
+        ...appInfo,
+        screen_name,
+        trigger_id: '111154100000000001',
+        component_type: 'popup',
+        component_name: modalName,
+        error_code,
+        icon_name: 'close',
+      });
+    };
+  }, []);
+
   const onDismiss = () => {
     if (barrierDismissible) {
       return;
@@ -90,7 +123,7 @@ const Modal: React.FC<ModalParams> = props => {
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const insets = useSafeAreaInsets();
-  const {theme, navigator} = useContext(ApplicationContext);
+  const {theme, navigator, appInfo} = useContext(ApplicationContext);
   const [keyboardSnap, setKeyboardSnap] = useState(0);
   const {screen, options, snapPoint}: BottomSheetParams = props.route.params;
   const Component = useRef(screen).current;
@@ -181,6 +214,8 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
               />
             </View>
             <NavigationContainer
+              appInfo={appInfo}
+              maxApi={navigator?.maxApi}
               theme={{
                 ...theme,
                 assets: {...theme.assets, headerBackground: undefined},

package/Application/NavigationContainer.tsx

@@ -23,6 +23,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   options,
   maxApi,
   localization,
+  appInfo,
 }) => {
   const navigationRef = React.useRef<NavigationContainerRef>(null);
   const navigator = useRef(new Navigator(navigationRef));
@@ -73,6 +74,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
             showGrid,
             language,
             translate,
+            appInfo,
           }}>
           <ReactNavigationContainer
             theme={{

package/Application/StackScreen.tsx

@@ -1,12 +1,14 @@
-import React, {useContext, useLayoutEffect} from 'react';
+import React, {useContext, useEffect, useLayoutEffect} from 'react';
 import {ScreenParams} from './types';
 import Navigation from './Navigation';
 import {ApplicationContext} from './index';
 import {GridSystem} from '../Layout';
 
+const TRIGGER_ID = '111378000000000000';
+
 const StackScreen: React.FC<ScreenParams> = props => {
   const {screen: Component, options}: ScreenParams = props.route.params;
-  const {theme, showGrid} = useContext(ApplicationContext);
+  const {theme, showGrid, navigator, appInfo} = useContext(ApplicationContext);
   const navigation = new Navigation(props.navigation, theme);
 
   const params = {
@@ -16,6 +18,24 @@ const StackScreen: React.FC<ScreenParams> = props => {
 
   delete params.screen;
 
+  const navigationRoutes = props.navigation.getState()?.routes || [];
+  const routesLength = navigationRoutes.length;
+  let pre_screen_name = navigationRoutes?.[0]?.params?.screen?.name;
+  if (routesLength > 1) {
+    pre_screen_name = navigationRoutes[routesLength - 2]?.params?.screen?.name;
+  }
+
+  useEffect(() => {
+    if (appInfo) {
+      navigator?.maxApi?.trackEvent('service_frame_displayed', {
+        ...appInfo,
+        screen_name: Component.name,
+        pre_screen_name,
+        trigger_id: TRIGGER_ID,
+      });
+    }
+  }, []);
+
   useLayoutEffect(() => {
     if (options) {
       navigation.setOptions(options);

package/Application/types.ts

@@ -68,6 +68,7 @@ export type Context = {
   showGrid?: boolean;
   language?: 'vi' | 'en';
   translate?: (key: string) => string;
+  appInfo: MiniAppInfo;
 };
 
 export type LocalizationObject = {
@@ -79,12 +80,20 @@ export type LocalizationObject = {
   };
 };
 
+export type MiniAppInfo = {
+  feature_code: string;
+  app_id: string;
+  miniapp_version: number;
+  flow_partner_id?: string;
+};
+
 export type NavigationContainerProps = {
   screen: Screen;
   options?: NavigationOptions;
   theme: Theme;
-  maxApi?: any;
+  maxApi: any;
   localization?: LocalizationObject;
+  appInfo: MiniAppInfo;
 };
 
 export type NavigationScreenProps = {
@@ -97,10 +106,12 @@ export type ScreenParams = {
   [key: string]: any;
   screen: Screen;
   options?: NavigationOptions;
+  tracking?: any;
 };
 
 export interface ModalParams extends ScreenParams {
   [key: string]: any;
+  modalName?: string;
   onDismiss?: () => void;
   barrierDismissible?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.81.1-beta.4",
+    "version": "0.81.1-beta.5",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {
@@ -10,7 +10,7 @@
         "@momo-kits/foundation"
     ],
     "dependencies": {
-        "@gorhom/bottom-sheet": "2.4.1",
+        "@gorhom/bottom-sheet": "git+https://gitlab.com/dung.huynh1/bottom-sheet.git#main",
         "react-native-safe-area-context": "3.1.4",
         "react-native-linear-gradient": "2.5.6",
         "react-native-gesture-handler": "1.10.3",
@@ -38,6 +38,7 @@
         "metro-react-native-babel-preset": "^0.64.0",
         "react-test-renderer": "17.0.1",
         "typescript": "^4.0.3",
+        "@momo-platform/versions": "4.1.11",
         "react-scanner": "^1.1.0"
     },
     "author": "@momo-kits/foundation",