@momo-kits/foundation 0.81.43-tracking.1 → 0.81.43-tracking.10

package/Application/Components.tsx

@@ -15,7 +15,7 @@ import {
   View,
   ViewStyle,
 } from 'react-native';
-import {ApplicationContext} from './index';
+import {ApplicationContext, MiniAppContext} from './index';
 import {Colors, Radius, Spacing, Styles} from '../Consts';
 import {Image} from '../Image';
 import {
@@ -108,6 +108,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   useBorder,
   accessibilityLabel = '',
 }) => {
+  const context = useContext(MiniAppContext);
   const {navigator} = useContext(ApplicationContext);
 
   useEffect(() => {
@@ -122,13 +123,10 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   const goBackSafe = () => {
     const goBack = () => {
       const canGoBack = navigator?.ref.current?.canGoBack();
-      if (!canGoBack && navigator?.trackingInfo) {
+      if (!canGoBack) {
         const currentRoute = navigator?.ref?.current.getCurrentRoute();
         navigator?.maxApi?.trackEvent?.('service_icon_clicked', {
-          feature_code: navigator.trackingInfo.code,
-          app_id: navigator.trackingInfo.appId,
-          miniapp_version: navigator.trackingInfo.buildNumber,
-          flow_partner_id: navigator.trackingInfo.flowPartnerId,
+          ...context,
           screen_name: currentRoute?.params?.screen?.name ?? currentRoute?.name,
           trigger_id: '111154000000000000',
           icon_name: 'back',
@@ -310,15 +308,19 @@ const HeaderToolkitAction: React.FC<any> = ({
   }, []);
 
   const getToolkitConfig = () => {
-    navigator?.requestApi('getToolsConfig', [undefined], (config: any) => {
-      navigator.toolkitConfig = config;
-      setToolConfig(navigator?.toolkitConfig);
-    });
+    navigator?.maxApi?.dispatchFunction?.(
+      'getToolsConfig',
+      [undefined],
+      (config: any) => {
+        navigator.toolkitConfig = config;
+        setToolConfig(navigator?.toolkitConfig);
+      },
+    );
   };
 
   const onMore = () => {
     onAction?.('onMore');
-    navigator?.requestApi(
+    navigator?.maxApi?.dispatchFunction?.(
       'showTools',
       [undefined],
       (res: {item: {action?: string; key: string}}) => {
@@ -339,14 +341,18 @@ const HeaderToolkitAction: React.FC<any> = ({
               title: preventBack.primary.title,
               onPress: () => {
                 preventBack?.primary.onPress();
-                navigator?.requestApi('dismiss', undefined, undefined);
+                navigator?.maxApi?.dispatchFunction?.(
+                  'dismiss',
+                  undefined,
+                  undefined,
+                );
               },
             }}
           />
         ),
       });
     } else {
-      navigator?.requestApi('dismiss', undefined, undefined);
+      navigator?.maxApi?.dispatchFunction?.('dismiss', undefined, undefined);
     }
   };
 
@@ -364,9 +370,13 @@ const HeaderToolkitAction: React.FC<any> = ({
           badgeValue={badgeValue}
           badgeType={badgeType}
           onPress={() => {
-            navigator?.requestApi('onToolAction', [pinTool?.key], () => {
-              getToolkitConfig();
-            });
+            navigator?.maxApi?.dispatchFunction?.(
+              'onToolAction',
+              [pinTool?.key],
+              () => {
+                getToolkitConfig();
+              },
+            );
             navigator?.toolkitCallback?.(pinTool.key);
           }}
         />

package/Application/ModalScreen.tsx

@@ -178,7 +178,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
               />
             </View>
             <NavigationContainer
-              trackingInfo={navigator?.trackingInfo}
               maxApi={navigator?.maxApi}
               theme={{
                 ...theme,

package/Application/NavigationContainer.tsx

@@ -6,7 +6,7 @@ import {
   NavigationContainerRef,
 } from '@react-navigation/native';
 import {createStackNavigator} from '@react-navigation/stack';
-import {Alert, DeviceEventEmitter, NativeModules} from 'react-native';
+import {DeviceEventEmitter, NativeModules} from 'react-native';
 import StackScreen from './StackScreen';
 import ModalScreen from './ModalScreen';
 import Navigator from './Navigator';
@@ -23,7 +23,6 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   options,
   maxApi,
   localization,
-  trackingInfo,
 }) => {
   const navigationRef = React.useRef<NavigationContainerRef>(null);
   const navigator = useRef(new Navigator(navigationRef));
@@ -68,7 +67,6 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
    * inject data for navigator
    */
   navigator.current.maxApi = maxApi;
-  navigator.current.trackingInfo = trackingInfo;
 
   /**
    * translate

package/Application/Navigator.ts

@@ -4,14 +4,12 @@ import {
   HeaderToolkitProps,
   ModalParams,
   ScreenParams,
-  TrackingInfo,
 } from './types';
 
 class Navigator {
   ref?: any;
   toolkitConfig?: HeaderToolkitProps;
   maxApi?: any;
-  trackingInfo?: TrackingInfo;
   dismissData?: any;
   toolkitCallback?: (item: any) => void;
 
@@ -111,18 +109,6 @@ class Navigator {
     );
   };
 
-  /**
-   * request max api for mini app
-   * @param func
-   * @param args
-   * @param callback
-   */
-  requestApi = (func: any, args: any = [], callback: any) => {
-    if (this.maxApi) {
-      this.maxApi[func]?.(...args, callback);
-    }
-  };
-
   setToolkitCallback = (
     callback: (item: {key: string; action: string}) => void,
   ) => {

package/Application/StackScreen.tsx

@@ -1,7 +1,7 @@
 import React, {useContext, useEffect, useLayoutEffect} from 'react';
 import {ScreenParams} from './types';
 import Navigation from './Navigation';
-import {ApplicationContext} from './index';
+import {ApplicationContext, MiniAppContext} from './index';
 import {GridSystem} from '../Layout';
 import {useHeaderHeight} from '@react-navigation/stack';
 
@@ -10,8 +10,10 @@ const {
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const StackScreen: React.FC<ScreenParams> = props => {
-  const {screen: Component, options}: ScreenParams = props.route.params;
   const {theme, showGrid, navigator} = useContext(ApplicationContext);
+  const context = useContext(MiniAppContext);
+
+  const {screen: Component, options}: ScreenParams = props.route.params;
   const navigation = new Navigation(props.navigation, theme);
   const heightHeader = useHeaderHeight();
 
@@ -35,44 +37,41 @@ const StackScreen: React.FC<ScreenParams> = props => {
    * tracking for screen
    */
   useEffect(() => {
-    if (navigator?.trackingInfo) {
-      const tracking = {
-        feature_code: navigator.trackingInfo.code,
-        app_id: navigator.trackingInfo.appId,
-        miniapp_version: navigator.trackingInfo.buildNumber,
-        flow_partner_id: navigator.trackingInfo.flowPartnerId,
-        screen_name: Component.name,
-      };
+    const tracking = {
+      ...context,
+      screen_name: Component.name,
+    };
+
+    const routes = props.navigation.getState()?.routes || [];
+    const routesLength = routes.length;
+    let pre_screen_name = '';
+    if (routesLength > 1) {
+      pre_screen_name = routes[routesLength - 2]?.params?.screen?.name;
+    }
 
-      const routes = props.navigation.getState()?.routes || [];
-      const routesLength = routes.length;
-      let pre_screen_name = '';
-      if (routesLength > 1) {
-        pre_screen_name = routes[routesLength - 2]?.params?.screen?.name;
-      }
+    navigator?.maxApi?.trackEvent?.('service_frame_displayed', {
+      ...tracking,
+      pre_screen_name,
+      trigger_id: '111378000000000000',
+    });
 
-      navigator?.maxApi?.trackEvent?.('service_frame_displayed', {
+    return props.navigation.addListener('beforeRemove', () => {
+      navigator?.maxApi?.trackEvent?.('service_icon_clicked', {
         ...tracking,
-        pre_screen_name,
-        trigger_id: '111378000000000000',
-      });
-
-      return props.navigation.addListener('beforeRemove', () => {
-        navigator?.maxApi?.trackEvent?.('service_icon_clicked', {
-          ...tracking,
-          trigger_id: '111154000000000000',
-          icon_name: 'back',
-        });
+        trigger_id: '111154000000000000',
+        icon_name: 'back',
       });
-    }
+    });
   }, []);
 
   return (
     <ScreenContext.Provider
       value={{
-        ...navigator?.trackingInfo,
+        ...context,
         screenName: Component.name,
-        autoTracking: navigator?.maxApi?.autoTracking,
+        autoTracking: (data: any) => {
+          navigator?.maxApi?.dispatchFunction?.('autoTracking', data);
+        },
       }}>
       <Component heightHeader={heightHeader} {...params} />
       {showGrid && <GridSystem />}

package/Application/index.ts

@@ -13,12 +13,21 @@ import {
 import BottomTab from './BottomTab';
 import {createContext} from 'react';
 import {defaultContext} from '../Consts';
+import {MiniAppInfo} from './types';
 
 const ApplicationContext = createContext(defaultContext);
+const MiniAppContext = createContext<MiniAppInfo>({
+  appId: '',
+  buildNumber: 0,
+  code: '',
+  toolkitConfig: {},
+  fromCode: '',
+});
 
 export {
-  NavigationContainer,
   ApplicationContext,
+  MiniAppContext,
+  NavigationContainer,
   Screen,
   BottomTab,
   NavigationButton,

package/Application/types.ts

@@ -71,6 +71,16 @@ export type Context = {
   translate?: (key: string) => string;
 };
 
+export type MiniAppInfo = {
+  [key: string]: any;
+  code: string;
+  appId: string;
+  buildNumber: number;
+  flowPartnerId?: string;
+  toolkitConfig?: object;
+  fromCode?: string;
+};
+
 export type LocalizationObject = {
   vi: {
     [key: string]: string;
@@ -80,21 +90,12 @@ export type LocalizationObject = {
   };
 };
 
-export type TrackingInfo = {
-  [key: string]: any;
-  app_id: string;
-  feature_code: string;
-  screen_name: string;
-  flow_partner_id?: string;
-};
-
 export type NavigationContainerProps = {
   screen: Screen;
   options?: NavigationOptions;
   theme: Theme;
   maxApi: any;
   localization?: LocalizationObject;
-  trackingInfo?: TrackingInfo;
 };
 
 export type NavigationScreenProps = {

package/Button/index.tsx

@@ -14,7 +14,6 @@ import {Colors, Spacing} from '../Consts';
 import styles from './styles';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
-import {TrackingInfo} from '../Application/types';
 
 const {
   ScreenContext,
@@ -75,7 +74,9 @@ export interface ButtonProps extends TouchableOpacityProps {
    */
   onPress: () => void;
 
-  trackingParams?: any;
+  params?: any;
+
+  componentId?: string;
 }
 
 const Button: FC<ButtonProps> = ({
@@ -88,7 +89,8 @@ const Button: FC<ButtonProps> = ({
   loading = false,
   title = 'Button',
   onPress,
-  trackingParams,
+  params,
+  componentId,
   ...rest
 }) => {
   const {theme, config} = useContext(ApplicationContext);
@@ -102,7 +104,7 @@ const Button: FC<ButtonProps> = ({
     };
   }
 
-  const screenInfo = useContext<TrackingInfo>(ScreenContext);
+  const screenInfo = useContext<any>(ScreenContext);
   const getSizeStyle = () => {
     const styleSheet: {[key: string]: any} = styles;
     return styleSheet[size ?? 'small'];
@@ -304,8 +306,10 @@ const Button: FC<ButtonProps> = ({
       value={{
         ...screenInfo,
         componentName: 'Button',
-        params: trackingParams,
+        params,
         state: type === 'disabled' ? 'disabled' : 'enabled',
+        componentId,
+        action: 'click',
       }}>
       <TouchableOpacity
         {...rest}

package/CheckBox/index.tsx

@@ -5,11 +5,6 @@ import styles from './styles';
 import {ApplicationContext} from '../Application';
 import {Text} from '../Text';
 import {Icon} from '../Icon';
-import {TrackingInfo} from '../Application/types';
-
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
 
 const CheckBox: FC<CheckBoxProps> = ({
   value,
@@ -24,7 +19,6 @@ const CheckBox: FC<CheckBoxProps> = ({
   const iconSource = indeterminate ? 'ic_minus' : 'ic_checked';
   let borderColor = theme.colors.text.default;
   let backgroundColor = theme.colors.background.surface;
-  const screenInfo = useContext<TrackingInfo>(ScreenContext);
 
   if (haveValue) {
     borderColor = theme.colors.primary;
@@ -41,35 +35,27 @@ const CheckBox: FC<CheckBoxProps> = ({
   }
 
   return (
-    <ScreenContext.Provider
-      value={{
-        ...screenInfo,
-        componentName: 'CheckBox',
-        params: {
-          value,
-        },
-      }}>
-      <TouchableOpacity
-        activeOpacity={0.8}
-        onPress={() => onChange?.(!value)}
-        disabled={disabled}
-        style={[style, styles.container]}>
-        <View
-          style={[
-            {borderColor, backgroundColor, borderWidth: 1},
-            styles.checkbox,
-          ]}>
-          {haveValue && (
-            <Icon
-              color={theme.colors.background.surface}
-              size={20}
-              source={iconSource}
-            />
-          )}
-        </View>
-        {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
-      </TouchableOpacity>
-    </ScreenContext.Provider>
+    <TouchableOpacity
+      accessibilityLabel={`CheckBox/${label}/${value}`}
+      activeOpacity={0.8}
+      onPress={() => onChange?.(!value)}
+      disabled={disabled}
+      style={[style, styles.container]}>
+      <View
+        style={[
+          {borderColor, backgroundColor, borderWidth: 1},
+          styles.checkbox,
+        ]}>
+        {haveValue && (
+          <Icon
+            color={theme.colors.background.surface}
+            size={20}
+            source={iconSource}
+          />
+        )}
+      </View>
+      {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
+    </TouchableOpacity>
   );
 };
 

package/IconButton/index.tsx

@@ -9,7 +9,6 @@ import {ApplicationContext} from '../Application';
 import {Colors} from '../Consts';
 import {Icon} from '../Icon';
 import styles from './styles';
-import {TrackingInfo} from '../Application/types';
 
 const {
   ScreenContext,
@@ -31,6 +30,10 @@ export interface IconButtonProps extends TouchableOpacityProps {
    * Optional. Defines the size of the IconButton.
    */
   size?: 'large' | 'small';
+
+  params?: any;
+
+  componentId?: string;
 }
 
 const IconButton: React.FC<IconButtonProps> = ({
@@ -38,10 +41,12 @@ const IconButton: React.FC<IconButtonProps> = ({
   icon,
   size,
   onPress,
+  params,
+  componentId,
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
-  const screenInfo = useContext<TrackingInfo>(ScreenContext);
+  const screenInfo = useContext<any>(ScreenContext);
 
   /**
    * get size icon button
@@ -131,9 +136,10 @@ const IconButton: React.FC<IconButtonProps> = ({
       value={{
         ...screenInfo,
         componentName: 'IconButton',
-        params: {
-          icon,
-        },
+        params,
+        state: type === 'disabled' ? 'disabled' : 'enabled',
+        componentId,
+        action: 'click',
       }}>
       <TouchableOpacity
         {...rest}

package/Input/Input.tsx

@@ -13,7 +13,7 @@ import {InputProps} from './index';
 import {Icon} from '../Icon';
 import {checkTyping} from './utils';
 import {Loader} from '../Loader';
-import {TrackingInfo} from '../Application/types';
+
 const {
   ScreenContext,
 } = require('react-native/Libraries/Components/ScreenContext');
@@ -42,7 +42,8 @@ const Input = forwardRef(
       fontWeight = 'Regular',
       onPressIcon,
       style,
-      trackingParams,
+      params,
+      componentId,
       ...props
     }: InputProps,
     ref,
@@ -52,7 +53,7 @@ const Input = forwardRef(
     const [haveValue, setHaveValue] = useState(!!value || !!props.defaultValue);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
     const accessibilityLabel = `Input/${floatingValue ?? placeholder}`;
-    const screenInfo = useContext<TrackingInfo>(ScreenContext);
+    const screenInfo = useContext<any>(ScreenContext);
 
     const onClearText = () => {
       inputRef?.current?.clear();
@@ -170,8 +171,10 @@ const Input = forwardRef(
         value={{
           ...screenInfo,
           componentName: 'Input',
-          params: trackingParams,
+          params,
           state: disabled ? 'disabled' : 'enabled',
+          componentId,
+          action: 'focus',
         }}>
         <View
           style={[style, styles.wrapper]}

package/Input/InputMoney.tsx

@@ -1,4 +1,10 @@
-import React, {forwardRef, useContext, useRef, useState} from 'react';
+import React, {
+  forwardRef,
+  useContext,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
 import {
   NativeSyntheticEvent,
   TextInput,
@@ -12,7 +18,7 @@ import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputMoneyProps} from './index';
 import {Icon} from '../Icon';
 import {formatMoneyToNumber, formatNumberToMoney} from './utils';
-import {TrackingInfo} from '../Application/types';
+
 const {
   ScreenContext,
 } = require('react-native/Libraries/Components/ScreenContext');
@@ -34,8 +40,9 @@ const InputMoney = forwardRef(
       required = false,
       errorSpacing,
       style,
-      trackingParams,
+      params,
       defaultValue = '',
+      componentId,
       ...props
     }: InputMoneyProps,
     ref,
@@ -44,7 +51,7 @@ const InputMoney = forwardRef(
     const [focused, setFocused] = useState(false);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
     const accessibilityLabel = `InputMoney/${floatingValue}`;
-    const screenInfo = useContext<TrackingInfo>(ScreenContext);
+    const screenInfo = useContext<any>(ScreenContext);
 
     const validateText = (text: string) => {
       const valueFormat = formatMoneyToNumber(text, 'đ');
@@ -69,6 +76,12 @@ const InputMoney = forwardRef(
       onChangeText?.(formatMoneyToNumber(text, 'đ').toString());
     };
 
+    useImperativeHandle(ref, () => {
+      return {
+        setText: _onChangeText,
+      };
+    });
+
     const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
       setFocused(true);
       onFocus?.(e);
@@ -152,8 +165,10 @@ const InputMoney = forwardRef(
         value={{
           ...screenInfo,
           componentName: 'InputMoney',
-          params: trackingParams,
+          params,
           state: 'enable',
+          componentId,
+          action: 'focus',
         }}>
         <View
           style={[style, styles.wrapper]}

package/Input/InputOTP.tsx

@@ -21,7 +21,7 @@ import styles from './styles';
 import {ErrorView, getBorderColor} from './common';
 import {ApplicationContext} from '../Application';
 import {Spacing} from '../Consts';
-import {TrackingInfo} from '../Application/types';
+
 const {
   ScreenContext,
 } = require('react-native/Libraries/Components/ScreenContext');
@@ -82,8 +82,9 @@ const InputOTP = forwardRef(
       onFocus,
       onBlur,
       dataType = 'number',
-      trackingParams,
+      params,
       style,
+      componentId,
       ...props
     }: InputOTPProps,
     ref,
@@ -94,7 +95,7 @@ const InputOTP = forwardRef(
     const inputRef = useRef<TextInput>(null);
     const {theme} = useContext(ApplicationContext);
     const accessibilityLabel = `InputOTP/${floatingValue ?? placeholder}`;
-    const screenInfo = useContext<TrackingInfo>(ScreenContext);
+    const screenInfo = useContext<any>(ScreenContext);
 
     useImperativeHandle(ref, () => ({
       onChangeText: (text: string) => {
@@ -233,8 +234,10 @@ const InputOTP = forwardRef(
         value={{
           ...screenInfo,
           componentName: 'InputOTP',
-          params: trackingParams,
+          params,
           state: 'enable',
+          componentId,
+          action: 'focus',
         }}>
         <TouchableOpacity
           activeOpacity={1}

package/Input/InputSearch.tsx

@@ -12,7 +12,7 @@ import styles from './styles';
 import {Icon} from '../Icon';
 import {Text} from '../Text';
 import {checkTyping} from './utils';
-import {TrackingInfo} from '../Application/types';
+
 const {
   ScreenContext,
 } = require('react-native/Libraries/Components/ScreenContext');
@@ -33,7 +33,8 @@ const InputSearch = forwardRef(
       style,
       defaultValue,
       onPressButtonText,
-      trackingParams,
+      params,
+      componentId,
       ...props
     }: InputSearchProps,
     ref,
@@ -43,7 +44,7 @@ const InputSearch = forwardRef(
     const [haveValue, setHaveValue] = useState(!!value || !!defaultValue);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
     const accessibilityLabel = `InputMoney/${placeholder}`;
-    const screenInfo = useContext<TrackingInfo>(ScreenContext);
+    const screenInfo = useContext<any>(ScreenContext);
 
     const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
       setFocused(true);
@@ -129,8 +130,10 @@ const InputSearch = forwardRef(
         value={{
           ...screenInfo,
           componentName: 'InputSearch',
-          params: trackingParams,
+          params,
           state: 'enabled',
+          componentId,
+          action: 'focus',
         }}>
         <View
           style={[style, styles.searchInputContainer]}

package/Input/index.tsx

@@ -81,7 +81,8 @@ export interface InputProps extends TextInputProps {
 
   onPressIcon?: () => void;
 
-  trackingParams?: any;
+  params?: any;
+  componentId?: string;
 }
 
 type InputPropsWithoutSizeAndIcon = Omit<
@@ -129,7 +130,9 @@ export interface InputSearchProps extends TextInputProps {
    */
   icon?: string;
 
-  trackingParams?: any;
+  params?: any;
+
+  componentId?: string;
 }
 
 export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}

package/Popup/PopupNotify.tsx

@@ -4,7 +4,7 @@ import {PopupNotifyProps} from './types';
 import {Radius, Spacing, Styles} from '../Consts';
 import {Image} from '../Image';
 import {Text} from '../Text';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, MiniAppContext} from '../Application';
 import {Button} from '../Button';
 import {Icon} from '../Icon';
 
@@ -19,6 +19,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
   buttonDirection = 'row',
   onIconClose,
 }) => {
+  const context = useContext(MiniAppContext);
   const {theme, navigator, translate} = useContext(ApplicationContext);
   const [scrollContent, setScrollContent] = useState(false);
   const closeAction = useRef('touch_outside');
@@ -34,35 +35,31 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
    * tracking
    */
   useEffect(() => {
-    if (navigator?.trackingInfo) {
-      const routes = navigator.ref.current?.getRootState()?.routes || [];
-      const routesLength = routes.length;
-      let screen_name = routes?.[0]?.params?.screen?.name;
-      if (routesLength > 1) {
-        screen_name = routes[routesLength - 2]?.params?.screen?.name;
-      }
-      const tracking = {
-        feature_code: navigator?.trackingInfo?.code,
-        app_id: navigator?.trackingInfo?.appId,
-        miniapp_version: navigator?.trackingInfo?.buildNumber,
-        flow_partner_id: navigator?.trackingInfo?.flowPartnerId,
-        screen_name,
-        component_type: 'popup',
-        component_name: id,
-        error_code: error ? error : undefined,
-      };
-      navigator?.maxApi?.trackEvent?.('service_component_displayed', {
+    const routes = navigator?.ref.current?.getRootState()?.routes || [];
+    const routesLength = routes.length;
+    let screen_name = routes?.[0]?.params?.screen?.name;
+    if (routesLength > 1) {
+      screen_name = routes[routesLength - 2]?.params?.screen?.name;
+    }
+    const tracking = {
+      ...context,
+      screen_name,
+      component_type: 'popup',
+      component_name: id,
+      error_code: error ? error : undefined,
+    };
+    navigator?.maxApi?.trackEvent?.('service_component_displayed', {
+      ...tracking,
+      trigger_id: '111012100000000000',
+    });
+
+    return () => {
+      navigator?.maxApi?.trackEvent?.('service_popup_dismissed', {
         ...tracking,
-        trigger_id: '111012100000000000',
+        trigger_id: '111154100000000001',
+        action_type: closeAction.current,
       });
-      return () => {
-        navigator?.maxApi?.trackEvent?.('service_popup_dismissed', {
-          ...tracking,
-          trigger_id: '111154100000000001',
-          action_type: closeAction.current,
-        });
-      };
-    }
+    };
   }, []);
 
   /**

package/Popup/PopupPromotion.tsx

@@ -1,7 +1,7 @@
 import React, {useContext, useEffect, useRef} from 'react';
 import {StyleSheet, TouchableOpacity, View} from 'react-native';
 import {PopupPromotionProps} from './types';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, MiniAppContext} from '../Application';
 import {Image} from '../Image';
 import {Radius, Spacing} from '../Consts';
 import {Icon} from '../Icon';
@@ -11,6 +11,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
   image,
   onIconClose,
 }) => {
+  const context = useContext(MiniAppContext);
   const {theme, navigator} = useContext(ApplicationContext);
   const closeAction = useRef('touch_outside');
 
@@ -18,34 +19,29 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
    * tracking
    */
   useEffect(() => {
-    if (navigator?.trackingInfo) {
-      const routes = navigator.ref.current?.getRootState()?.routes || [];
-      const routesLength = routes.length;
-      let screen_name = routes?.[0]?.params?.screen?.name;
-      if (routesLength > 1) {
-        screen_name = routes[routesLength - 2]?.params?.screen?.name;
-      }
-      const tracking = {
-        feature_code: navigator?.trackingInfo?.code,
-        app_id: navigator?.trackingInfo?.appId,
-        miniapp_version: navigator?.trackingInfo?.buildNumber,
-        flow_partner_id: navigator?.trackingInfo?.flowPartnerId,
-        screen_name,
-        component_type: 'popup',
-        component_name: id,
-      };
-      navigator?.maxApi?.trackEvent?.('service_component_displayed', {
+    const routes = navigator?.ref.current?.getRootState()?.routes || [];
+    const routesLength = routes.length;
+    let screen_name = routes?.[0]?.params?.screen?.name;
+    if (routesLength > 1) {
+      screen_name = routes[routesLength - 2]?.params?.screen?.name;
+    }
+    const tracking = {
+      ...context,
+      screen_name,
+      component_type: 'popup',
+      component_name: id,
+    };
+    navigator?.maxApi?.trackEvent?.('service_component_displayed', {
+      ...tracking,
+      trigger_id: '111012100000000000',
+    });
+    return () => {
+      navigator?.maxApi?.trackEvent?.('service_popup_dismissed', {
         ...tracking,
-        trigger_id: '111012100000000000',
+        trigger_id: '111154100000000001',
+        action_type: closeAction.current,
       });
-      return () => {
-        navigator?.maxApi?.trackEvent?.('service_popup_dismissed', {
-          ...tracking,
-          trigger_id: '111154100000000001',
-          action_type: closeAction.current,
-        });
-      };
-    }
+    };
   }, []);
 
   /**

package/Radio/index.tsx

@@ -6,11 +6,6 @@ import {Text} from '../Text';
 import styles from './styles';
 import {ApplicationContext} from '../Application';
 import {Spacing} from '../Consts';
-import {TrackingInfo} from '../Application/types';
-
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
 
 const Radio: FC<RadioProps> = ({
   value,
@@ -42,38 +37,28 @@ const Radio: FC<RadioProps> = ({
     };
   }
 
-  const screenInfo = useContext<TrackingInfo>(ScreenContext);
-
   return (
-    <ScreenContext.Provider
-      value={{
-        ...screenInfo,
-        componentName: 'Radio',
-        params: {
-          value,
+    <TouchableOpacity
+      accessibilityLabel={`Radio/${label}/${value}`}
+      onPress={onChange}
+      disabled={disabled}
+      style={[
+        style,
+        {
+          flexDirection: 'row',
+          alignItems: 'center',
         },
-      }}>
-      <TouchableOpacity
-        onPress={onChange}
-        disabled={disabled}
+      ]}>
+      <View
         style={[
-          style,
-          {
-            flexDirection: 'row',
-            alignItems: 'center',
-          },
-        ]}>
-        <View
-          style={[
-            styles.radio,
-            checkBoxStyle,
-            disabledStyle,
-            {marginRight: label ? Spacing.XS : 0},
-          ]}
-        />
-        {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
-      </TouchableOpacity>
-    </ScreenContext.Provider>
+          styles.radio,
+          checkBoxStyle,
+          disabledStyle,
+          {marginRight: label ? Spacing.XS : 0},
+        ]}
+      />
+      {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
+    </TouchableOpacity>
   );
 };
 

package/Switch/index.tsx

@@ -1,19 +1,13 @@
-import React, {FC, useContext} from 'react';
+import React, {FC} from 'react';
 import {TouchableOpacity, View} from 'react-native';
 import {SwitchProps} from './types';
 import styles from './styles';
 import {Colors} from '../Consts';
-import {TrackingInfo} from '../Application/types';
-
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
 
 const Switch: FC<SwitchProps> = props => {
   const {value, onChange, disabled, style} = props;
   const circleBackgroundColor = value ? Colors.black_01 : Colors.black_03;
   const circleAlign = value ? 'flex-end' : 'flex-start';
-  const screenInfo = useContext<TrackingInfo>(ScreenContext);
 
   let backgroundColor = value ? Colors.green_03 : Colors.black_07;
   if (disabled) {
@@ -21,27 +15,19 @@ const Switch: FC<SwitchProps> = props => {
   }
 
   return (
-    <ScreenContext.Provider
-      value={{
-        ...screenInfo,
-        componentName: 'Switch',
-        params: {
-          value,
-        },
-      }}>
-      <TouchableOpacity
-        disabled={disabled}
-        onPress={() => onChange?.(!value)}
-        style={[
-          style,
-          styles.container,
-          {backgroundColor, alignItems: circleAlign},
-        ]}>
-        <View style={[styles.circle, {backgroundColor: circleBackgroundColor}]}>
-          <View style={[styles.circleSmall, {backgroundColor}]} />
-        </View>
-      </TouchableOpacity>
-    </ScreenContext.Provider>
+    <TouchableOpacity
+      accessibilityLabel={'Switch'}
+      disabled={disabled}
+      onPress={() => onChange?.(!value)}
+      style={[
+        style,
+        styles.container,
+        {backgroundColor, alignItems: circleAlign},
+      ]}>
+      <View style={[styles.circle, {backgroundColor: circleBackgroundColor}]}>
+        <View style={[styles.circleSmall, {backgroundColor}]} />
+      </View>
+    </TouchableOpacity>
   );
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.81.43-tracking.1",
+    "version": "0.81.43-tracking.10",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {