@momo-kits/foundation 0.92.2 → 0.92.3-tracking.1

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 {
@@ -31,10 +31,6 @@ import {PopupNotify} from '../Popup';
 import {Badge, BadgeDot} from '../Badge';
 import {getAccessibilityID} from './utils';
 
-const {
-  MiniAppContext,
-} = require('react-native/Libraries/Components/ScreenContext');
-
 const NavigationButton: React.FC<NavigationButtonProps> = ({
   icon,
   tintColor,
@@ -127,26 +123,25 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
 
   const goBackSafe = () => {
     const goBack = () => {
-      const canGoBack = navigator?.ref.current?.canGoBack();
-      if (!canGoBack) {
-        const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
-        const params = {
-          ...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,
-        });
-        navigator?.maxApi?.trackEvent?.('service_icon_clicked', params);
-      }
+      const canGoBack = navigator?.ref?.current?.canGoBack?.();
+      const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
+      const params = {
+        appId: context.appId,
+        code: context.code,
+        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,
+      });
+      navigator?.maxApi?.trackEvent?.('service_icon_clicked', params);
       if (canGoBack) {
-        navigator?.ref.current?.goBack();
+        navigator?.ref?.current?.goBack?.();
       } else if (navigator?.maxApi) {
-        navigator?.maxApi?.dismiss(navigator.dismissData);
+        navigator?.maxApi?.dismiss?.(navigator?.dismissData);
       } else {
         const currentTime = new Date().getTime();
         const requestId = `navigationBackPress#${currentTime}`;

package/Application/NavigationContainer.tsx

@@ -1,4 +1,4 @@
-import React, {useContext, useEffect, useRef, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import {
   NavigationContainer as ReactNavigationContainer,
@@ -15,10 +15,6 @@ import {LocalizationObject, NavigationContainerProps} from './types';
 import {ApplicationContext} from './index';
 import kitLocalization from '../Assets/language.json';
 
-const {
-  MiniAppContext,
-} = require('react-native/Libraries/Components/ScreenContext');
-
 /**
  * link for deprecated
  */
@@ -35,11 +31,10 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   localization,
   initialParams,
 }) => {
-  const context = useContext<any>(MiniAppContext);
   const navigationRef = useRef<NavigationContainerRef>(null);
   const isReady = useRef(false);
   const navigator = useRef(new Navigator(navigationRef, isReady));
-  const [showGrid, setShowGrid] = useState(false);
+  const [showGrid, setShowGrid] = useState(true);
   const config = useRef<any>();
 
   /**
@@ -69,7 +64,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
    * @param key
    */
   const translate = (key: string) => {
-    const language: 'vi' | 'en' = context?.language ?? 'vi';
+    const language: 'vi' | 'en' = 'vi';
     const mergedLocalization: LocalizationObject = {
       vi: {...localization?.vi, ...kitLocalization.vi},
       en: {...localization?.en, ...kitLocalization.en},

package/Application/StackScreen.tsx

@@ -1,23 +1,25 @@
 import React, {useContext, useEffect, useLayoutEffect, useRef} from 'react';
 import {ScreenParams} from './types';
 import Navigation from './Navigation';
-import {ApplicationContext} from './index';
+import {ApplicationContext, MiniAppContext, ScreenContext} from './index';
 import {GridSystem} from '../Layout';
 import {useHeaderHeight} from '@react-navigation/stack';
 import {Alert, InteractionManager} from 'react-native';
 
-const {
-  ScreenContext,
-  MiniAppContext,
-} = require('react-native/Libraries/Components/ScreenContext');
-
 const StackScreen: React.FC<ScreenParams> = props => {
   const {theme, showGrid, navigator} = useContext(ApplicationContext);
   const startTime = useRef(Date.now());
   const endTime = useRef(Date.now());
   const timeLoad = useRef(0);
-  const timeout = useRef<any>();
-
+  const timeInteraction = useRef(0);
+  const timeoutLoad = useRef<any>();
+  const tracked = useRef<any>({
+    releaseLoad: undefined,
+    releaseInteraction: undefined,
+    timeoutLoad: undefined,
+    timeoutInteraction: undefined,
+  });
+  const interaction = useRef<any>();
   const context = useContext<any>(MiniAppContext);
 
   const {screen: Component, options, initialParams} = props.route.params;
@@ -39,16 +41,6 @@ const StackScreen: React.FC<ScreenParams> = props => {
    * set options for screen
    */
   useLayoutEffect(() => {
-    const host = (global as any).miniAppApi?.currentHost || {};
-    host.screenName = screenName;
-    InteractionManager.runAfterInteractions(() => {
-      navigator?.maxApi?.showToastDebug?.({
-        appId: `auto - ${context.appId}`,
-        message: `${screenName} screen_interaction_time ${
-          Date.now() - startTime.current
-        }`,
-      });
-    });
     if (options) {
       navigation.setOptions(options);
     }
@@ -58,73 +50,86 @@ const StackScreen: React.FC<ScreenParams> = props => {
    * tracking for screen
    */
   useEffect(() => {
-    if (__DEV__) {
-      if (!screenName || screenName === 'screen') {
-        Alert.alert(
-          'Design system',
-          `Unvalidated screen name "${screenName}" !`,
-        );
-      }
+    if (__DEV__ && (!screenName || screenName == 'Invalid')) {
+      Alert.alert('Design system', `Unvalidated screen name "${screenName}" !`);
     }
 
-    const tracking = {
-      ...context,
-      screen_name: screenName,
+    navigator?.maxApi?.of?.({screenName});
+
+    tracked.current.timeoutLoad = setTimeout(() => {
+      onScreenLoad();
+    }, 5000);
+    tracked.current.timeoutInteraction = setTimeout(() => {
+      onScreenInteraction();
+    }, 5000);
+    return () => {
+      onScreenLoad();
+      onScreenInteraction();
     };
+  }, []);
 
-    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;
+  /**
+   * tracking for screen load
+   */
+  const onScreenLoad = () => {
+    clearTimeout(tracked.current.timeoutLoad);
+    if (!tracked.current?.releaseLoad) {
+      navigator?.maxApi?.dispatchFunction?.('autoTracking', {
+        appId: context.appId,
+        code: context.code,
+        screenName,
+        componentName: 'Screen',
+        state: 'load',
+        time: timeLoad.current,
+      });
+      navigator?.maxApi?.showToastDebug?.({
+        appId: `auto - ${context.appId}`,
+        message: `${screenName} screen_load_time ${timeLoad.current}`,
+      });
+      tracked.current.releaseLoad = true;
     }
+  };
 
-    const params = {
-      ...tracking,
-      pre_screen_name,
-      trigger_id: '111378000000000000',
-    };
-    navigator?.maxApi?.trackEvent?.('service_frame_displayed', params);
-    navigator?.maxApi?.showToastDebug?.({
-      appId: `auto - ${context.appId}`,
-      message: `${screenName} service_frame_displayed`,
-      params,
-    });
+  /**
+   * tracking for screen load
+   */
+  const onScreenInteraction = () => {
+    clearTimeout(tracked.current.timeoutInteraction);
+    if (!tracked.current?.releaseInteraction) {
+      navigator?.maxApi?.dispatchFunction?.('autoTracking', {
+        appId: context.appId,
+        code: context.code,
+        screenName,
+        componentName: 'Screen',
+        state: 'interaction',
+        time: timeInteraction.current,
+      });
 
-    return props.navigation.addListener('beforeRemove', () => {
-      const params = {
-        ...tracking,
-        trigger_id: '111154000000000000',
-        icon_name: 'back',
-      };
-      navigator?.maxApi?.trackEvent?.('service_icon_clicked', params);
       navigator?.maxApi?.showToastDebug?.({
         appId: `auto - ${context.appId}`,
-        message: `${screenName} service_icon_clicked`,
-        params,
+        message: `${screenName} screen_interaction_time ${timeInteraction.current}`,
       });
-    });
-  }, []);
+      tracked.current.releaseInteraction = true;
+    }
+  };
 
   return (
     <ScreenContext.Provider
       value={{
-        appId: context.appId,
-        code: context.code,
         screenName,
         autoTracking: (data: any) => {
           navigator?.maxApi?.dispatchFunction?.('autoTracking', data);
         },
         onElementLoad: () => {
           endTime.current = Date.now();
-          clearTimeout(timeout.current);
-          timeout.current = setTimeout(() => {
+          interaction.current?.cancel?.();
+          interaction.current = InteractionManager.runAfterInteractions(() => {
+            timeInteraction.current = Date.now() - startTime.current;
+          });
+          clearTimeout(timeoutLoad.current);
+          timeoutLoad.current = setTimeout(() => {
             if (timeLoad.current === 0) {
               timeLoad.current = endTime.current - startTime.current;
-              navigator?.maxApi?.showToastDebug?.({
-                appId: `auto - ${context.appId}`,
-                message: `${screenName} screen_load_time ${timeLoad.current}`,
-              });
             }
           }, 2000);
         },
@@ -132,7 +137,8 @@ const StackScreen: React.FC<ScreenParams> = props => {
       <Component
         heightHeader={heightHeader}
         {...data}
-        onScreenLoad={() => {}}
+        onScreenLoad={onScreenLoad}
+        onScreenInteraction={onScreenInteraction}
       />
       {showGrid && <GridSystem />}
     </ScreenContext.Provider>

package/Application/index.ts

@@ -1,3 +1,4 @@
+import {Platform} from 'react-native';
 import {NavigationContainer} from './NavigationContainer';
 import Screen from '../Layout/Screen';
 import {
@@ -11,20 +12,19 @@ import {
 import BottomTab from './BottomTab';
 import {createContext} from 'react';
 import {defaultContext} from '../Consts';
-import {MiniAppInfo} from './types';
 
+const Context = createContext({});
 const ApplicationContext = createContext(defaultContext);
-const MiniAppContext = createContext<MiniAppInfo>({
-  appId: '',
-  buildNumber: 0,
-  code: '',
-  toolkitConfig: {},
-  fromCode: '',
-});
+
+const MiniAppContext = (Platform as any).MiniAppContext ?? Context;
+const ScreenContext = (Platform as any).ScreenContext ?? Context;
+const ComponentContext = (Platform as any).ComponentContext ?? Context;
 
 export {
   ApplicationContext,
   MiniAppContext,
+  ScreenContext,
+  ComponentContext,
   NavigationContainer,
   Screen,
   BottomTab,

package/Button/index.tsx

@@ -7,23 +7,14 @@ import {
   View,
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, ComponentContext} from '../Application';
 import {Text} from '../Text';
 import {Typography} from '../Text/types';
 import {Colors, Spacing} from '../Consts';
 import styles from './styles';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
-import {
-  cleanNameForTracking,
-  formatComponentName,
-  getAccessibilityID,
-} from '../Application/utils';
-
-const {
-  ScreenContext,
-  MiniAppContext,
-} = require('react-native/Libraries/Components/ScreenContext');
+import {formatComponentName} from '../Application/utils';
 
 const AnimationLinear = Animated.createAnimatedComponent(LinearGradient);
 
@@ -81,8 +72,6 @@ export interface ButtonProps extends TouchableOpacityProps {
   onPress: () => void;
 
   params?: any;
-
-  componentId?: string;
 }
 
 const Button: FC<ButtonProps> = ({
@@ -96,14 +85,16 @@ const Button: FC<ButtonProps> = ({
   title = 'Button',
   onPress,
   params,
-  componentId,
   accessibilityLabel,
   ...rest
 }) => {
   const {theme, config} = useContext(ApplicationContext);
-  const {appId, code} = useContext<any>(MiniAppContext);
   const {gradient, color} = config?.navigationBar?.buttonColors ?? {};
   let gradientPros;
+  let state = 'enabled';
+  if (loading) {
+    state = 'loading';
+  }
   if (gradient?.length > 0 && type == 'primary') {
     gradientPros = {
       colors: gradient,
@@ -112,7 +103,6 @@ const Button: FC<ButtonProps> = ({
     };
   }
 
-  const screenInfo = useContext<any>(ScreenContext);
   const getSizeStyle = () => {
     const styleSheet: {[key: string]: any} = styles;
     return styleSheet[size ?? 'small'];
@@ -310,28 +300,18 @@ const Button: FC<ButtonProps> = ({
   const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
 
   return (
-    <ScreenContext.Provider
+    <ComponentContext.Provider
       value={{
-        ...screenInfo,
         componentName: 'Button',
         params,
-        state: loading
-          ? 'loading'
-          : type === 'disabled'
-          ? 'disabled'
-          : 'enabled',
-        componentId,
+        state: state,
+        componentId: accessibilityLabel,
         componentValue: formatComponentName(title),
         action: 'click',
       }}>
       <TouchableOpacity
         {...rest}
-        {...getAccessibilityID(
-          `${appId}/${code}/${screenInfo.screenName}/btn_${cleanNameForTracking(
-            title,
-          )}`,
-          accessibilityLabel,
-        )}
+        accessibilityLabel={accessibilityLabel}
         activeOpacity={activeOpacity}
         onPress={onPressButton}
         style={buttonStyle}>
@@ -343,7 +323,7 @@ const Button: FC<ButtonProps> = ({
         )}
         {gradientPros && <View style={styles.strokeView} />}
       </TouchableOpacity>
-    </ScreenContext.Provider>
+    </ComponentContext.Provider>
   );
 };
 

package/CheckBox/index.tsx

@@ -2,33 +2,22 @@ import React, {FC, useContext} from 'react';
 import {TouchableOpacity, View} from 'react-native';
 import {CheckBoxProps} from './types';
 import styles from './styles';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, ComponentContext} from '../Application';
 import {Text} from '../Text';
 import {Icon} from '../Icon';
-import {
-  cleanNameForTracking,
-  formatNameLength,
-  getAccessibilityID,
-} from '../Application/utils';
-
-const {
-  ScreenContext,
-  MiniAppContext,
-} = require('react-native/Libraries/Components/ScreenContext');
+import {formatNameLength} from '../Application/utils';
 
 const CheckBox: FC<CheckBoxProps> = ({
   value,
-  disabled,
+  disabled = false,
   onChange,
   style,
   label,
   indeterminate,
   params,
-  componentId,
+  accessibilityLabel,
 }) => {
-  const {appId, code} = useContext<any>(MiniAppContext);
   const {theme} = useContext(ApplicationContext);
-  const screenInfo = useContext<any>(ScreenContext);
   const haveValue = value || indeterminate;
   const iconSource = indeterminate ? 'ic_minus' : 'ic_checked';
   let borderColor = theme.colors.text.default;
@@ -48,26 +37,19 @@ const CheckBox: FC<CheckBoxProps> = ({
     }
   }
 
-  const accessibilityID = getAccessibilityID(
-    `${appId}/${code}/${screenInfo.screenName}/cbx_${cleanNameForTracking(
-      label,
-    )}_${indeterminate ? 'na' : value}`,
-  );
-
   return (
-    <ScreenContext.Provider
+    <ComponentContext.Provider
       value={{
-        ...screenInfo,
-        componentName: 'Button',
+        componentName: 'CheckBox',
         params,
         state: disabled ? 'disabled' : 'filled',
-        componentId,
+        componentId: accessibilityLabel,
         action: 'click',
         componentLabel: formatNameLength(label || ''),
         componentValue: indeterminate ? 'indetermine' : value,
       }}>
       <TouchableOpacity
-        {...accessibilityID}
+        accessibilityLabel={accessibilityLabel}
         activeOpacity={0.8}
         onPress={() => onChange?.(!value)}
         disabled={disabled}
@@ -87,12 +69,8 @@ const CheckBox: FC<CheckBoxProps> = ({
         </View>
         {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
       </TouchableOpacity>
-    </ScreenContext.Provider>
+    </ComponentContext.Provider>
   );
 };
 
-CheckBox.defaultProps = {
-  disabled: false,
-};
-
 export {CheckBox};

package/CheckBox/types.ts

@@ -1,6 +1,6 @@
-import {ViewStyle} from 'react-native';
+import {TouchableOpacityProps, ViewStyle} from 'react-native';
 
-export type CheckBoxProps = {
+export interface CheckBoxProps extends TouchableOpacityProps {
   /**
    * Represents whether the CheckBox is currently checked (`true`) or unchecked (`false`).
    */
@@ -36,7 +36,5 @@ export type CheckBoxProps = {
    */
   style?: ViewStyle;
 
-  params?: any
-
-  componentId?: string
-};
+  params?: any;
+}

package/Icon/index.tsx

@@ -5,7 +5,12 @@ import {IconProps} from './types';
 import {ApplicationContext} from '../Application';
 import {Image} from '../Image';
 
-const Icon: React.FC<IconProps> = ({source, size, color, style = {}}) => {
+const Icon: React.FC<IconProps> = ({
+  source = 'ic_back',
+  size = 24,
+  color,
+  style = {},
+}) => {
   const {theme} = useContext(ApplicationContext);
 
   /**
@@ -20,8 +25,8 @@ const Icon: React.FC<IconProps> = ({source, size, color, style = {}}) => {
   };
 
   const tintColorProps = color !== null && {
-    tintColor: color ?? theme.colors.text.default
-  }
+    tintColor: color ?? theme.colors.text.default,
+  };
 
   return (
     <Image
@@ -33,9 +38,4 @@ const Icon: React.FC<IconProps> = ({source, size, color, style = {}}) => {
   );
 };
 
-Icon.defaultProps = {
-  source: 'ic_back',
-  size: 24,
-};
-
 export {Icon, IconSources, IconBankSources};

package/IconButton/index.tsx

@@ -5,16 +5,12 @@ import {
   TouchableOpacity,
   TouchableOpacityProps,
 } from 'react-native';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, ComponentContext} from '../Application';
 import {Colors} from '../Consts';
 import {Icon} from '../Icon';
 import styles from './styles';
 import {formatComponentName} from '../Application/utils';
 
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
-
 export interface IconButtonProps extends TouchableOpacityProps {
   /**
    * Represents the name or key of the icon to be displayed on the IconButton.
@@ -33,21 +29,18 @@ export interface IconButtonProps extends TouchableOpacityProps {
   size?: 'large' | 'small';
 
   params?: any;
-
-  componentId?: string;
 }
 
 const IconButton: React.FC<IconButtonProps> = ({
-  type,
+  type = 'primary',
   icon,
   size,
   onPress,
   params,
-  componentId,
+  accessibilityLabel,
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
-  const screenInfo = useContext<any>(ScreenContext);
 
   /**
    * get size icon button
@@ -133,30 +126,25 @@ const IconButton: React.FC<IconButtonProps> = ({
   const iconSize = size === 'small' ? 16 : 24;
 
   return (
-    <ScreenContext.Provider
+    <ComponentContext.Provider
       value={{
-        ...screenInfo,
         componentName: 'IconButton',
         params,
         state: type === 'disabled' ? 'disabled' : 'enabled',
-        componentId,
+        componentId: accessibilityLabel,
         componentValue: formatComponentName(icon),
         action: 'click',
       }}>
       <TouchableOpacity
         {...rest}
+        accessibilityLabel={accessibilityLabel}
         activeOpacity={activeOpacity}
         onPress={onPressButton}
         style={buttonStyle}>
         <Icon size={iconSize} source={icon} color={getIconColor()} />
       </TouchableOpacity>
-    </ScreenContext.Provider>
+    </ComponentContext.Provider>
   );
 };
 
-IconButton.defaultProps = {
-  type: 'primary',
-  disabled: false,
-};
-
 export {IconButton};