@momo-kits/foundation 0.92.2-tracking.4 → 0.92.2

package/Application/Components.tsx

@@ -127,25 +127,26 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
 
   const goBackSafe = () => {
     const goBack = () => {
-      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);
+      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);
+      }
       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, {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,
@@ -15,6 +15,10 @@ 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
  */
@@ -31,6 +35,7 @@ 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));
@@ -64,7 +69,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
    * @param key
    */
   const translate = (key: string) => {
-    const language: 'vi' | 'en' = 'vi';
+    const language: 'vi' | 'en' = context?.language ?? 'vi';
     const mergedLocalization: LocalizationObject = {
       vi: {...localization?.vi, ...kitLocalization.vi},
       en: {...localization?.en, ...kitLocalization.en},

package/Application/StackScreen.tsx

@@ -16,15 +16,8 @@ const StackScreen: React.FC<ScreenParams> = props => {
   const startTime = useRef(Date.now());
   const endTime = useRef(Date.now());
   const timeLoad = useRef(0);
-  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 timeout = useRef<any>();
+
   const context = useContext<any>(MiniAppContext);
 
   const {screen: Component, options, initialParams} = props.route.params;
@@ -48,6 +41,14 @@ const StackScreen: React.FC<ScreenParams> = props => {
   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);
     }
@@ -57,84 +58,73 @@ const StackScreen: React.FC<ScreenParams> = props => {
    * tracking for screen
    */
   useEffect(() => {
-    if (__DEV__ && (!screenName || screenName == 'Invalid')) {
-      Alert.alert('Design system', `Unvalidated screen name "${screenName}" !`);
+    if (__DEV__) {
+      if (!screenName || screenName === 'screen') {
+        Alert.alert(
+          'Design system',
+          `Unvalidated screen name "${screenName}" !`,
+        );
+      }
     }
 
-    tracked.current.timeoutLoad = setTimeout(() => {
-      onScreenLoad();
-    }, 5000);
-    tracked.current.timeoutInteraction = setTimeout(() => {
-      onScreenInteraction();
-    }, 5000);
-    return () => {
-      onScreenLoad();
-      onScreenInteraction();
+    const tracking = {
+      ...context,
+      screen_name: screenName,
     };
-  }, []);
 
-  /**
-   * 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 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 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,
-      });
+    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,
+    });
 
+    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} screen_interaction_time ${timeInteraction.current}`,
+        message: `${screenName} service_icon_clicked`,
+        params,
       });
-      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();
-          interaction.current?.cancel?.();
-          interaction.current = InteractionManager.runAfterInteractions(() => {
-            timeInteraction.current = Date.now() - startTime.current;
-          });
-          clearTimeout(timeoutLoad.current);
-          timeoutLoad.current = setTimeout(() => {
+          clearTimeout(timeout.current);
+          timeout.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);
         },
@@ -142,8 +132,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
       <Component
         heightHeader={heightHeader}
         {...data}
-        onScreenLoad={onScreenLoad}
-        onScreenInteraction={onScreenInteraction}
+        onScreenLoad={() => {}}
       />
       {showGrid && <GridSystem />}
     </ScreenContext.Provider>

package/Button/index.tsx

@@ -1,4 +1,4 @@
-import React, {FC, useContext, useState} from 'react';
+import React, {FC, useContext} from 'react';
 import {
   Animated,
   StyleSheet,
@@ -14,10 +14,15 @@ import {Colors, Spacing} from '../Consts';
 import styles from './styles';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
-import {formatComponentName} from '../Application/utils';
+import {
+  cleanNameForTracking,
+  formatComponentName,
+  getAccessibilityID,
+} from '../Application/utils';
 
 const {
-  ComponentContext,
+  ScreenContext,
+  MiniAppContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const AnimationLinear = Animated.createAnimatedComponent(LinearGradient);
@@ -76,6 +81,8 @@ export interface ButtonProps extends TouchableOpacityProps {
   onPress: () => void;
 
   params?: any;
+
+  componentId?: string;
 }
 
 const Button: FC<ButtonProps> = ({
@@ -89,16 +96,14 @@ 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,
@@ -107,6 +112,7 @@ const Button: FC<ButtonProps> = ({
     };
   }
 
+  const screenInfo = useContext<any>(ScreenContext);
   const getSizeStyle = () => {
     const styleSheet: {[key: string]: any} = styles;
     return styleSheet[size ?? 'small'];
@@ -304,18 +310,28 @@ const Button: FC<ButtonProps> = ({
   const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
 
   return (
-    <ComponentContext.Provider
+    <ScreenContext.Provider
       value={{
+        ...screenInfo,
         componentName: 'Button',
         params,
-        state: state,
-        componentId: accessibilityLabel,
+        state: loading
+          ? 'loading'
+          : type === 'disabled'
+          ? 'disabled'
+          : 'enabled',
+        componentId,
         componentValue: formatComponentName(title),
         action: 'click',
       }}>
       <TouchableOpacity
         {...rest}
-        accessibilityLabel={accessibilityLabel}
+        {...getAccessibilityID(
+          `${appId}/${code}/${screenInfo.screenName}/btn_${cleanNameForTracking(
+            title,
+          )}`,
+          accessibilityLabel,
+        )}
         activeOpacity={activeOpacity}
         onPress={onPressButton}
         style={buttonStyle}>
@@ -327,7 +343,7 @@ const Button: FC<ButtonProps> = ({
         )}
         {gradientPros && <View style={styles.strokeView} />}
       </TouchableOpacity>
-    </ComponentContext.Provider>
+    </ScreenContext.Provider>
   );
 };
 

package/CheckBox/index.tsx

@@ -5,23 +5,30 @@ import styles from './styles';
 import {ApplicationContext} from '../Application';
 import {Text} from '../Text';
 import {Icon} from '../Icon';
-import {formatNameLength} from '../Application/utils';
+import {
+  cleanNameForTracking,
+  formatNameLength,
+  getAccessibilityID,
+} from '../Application/utils';
 
 const {
-  ComponentContext,
+  ScreenContext,
+  MiniAppContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const CheckBox: FC<CheckBoxProps> = ({
   value,
-  disabled = false,
+  disabled,
   onChange,
   style,
   label,
   indeterminate,
   params,
-  accessibilityLabel,
+  componentId,
 }) => {
+  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;
@@ -41,19 +48,26 @@ const CheckBox: FC<CheckBoxProps> = ({
     }
   }
 
+  const accessibilityID = getAccessibilityID(
+    `${appId}/${code}/${screenInfo.screenName}/cbx_${cleanNameForTracking(
+      label,
+    )}_${indeterminate ? 'na' : value}`,
+  );
+
   return (
-    <ComponentContext.Provider
+    <ScreenContext.Provider
       value={{
-        componentName: 'CheckBox',
+        ...screenInfo,
+        componentName: 'Button',
         params,
         state: disabled ? 'disabled' : 'filled',
-        componentId: accessibilityLabel,
+        componentId,
         action: 'click',
         componentLabel: formatNameLength(label || ''),
         componentValue: indeterminate ? 'indetermine' : value,
       }}>
       <TouchableOpacity
-        accessibilityLabel={accessibilityLabel}
+        {...accessibilityID}
         activeOpacity={0.8}
         onPress={() => onChange?.(!value)}
         disabled={disabled}
@@ -73,8 +87,12 @@ const CheckBox: FC<CheckBoxProps> = ({
         </View>
         {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
       </TouchableOpacity>
-    </ComponentContext.Provider>
+    </ScreenContext.Provider>
   );
 };
 
+CheckBox.defaultProps = {
+  disabled: false,
+};
+
 export {CheckBox};

package/CheckBox/types.ts

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

package/Icon/index.tsx

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

package/IconButton/index.tsx

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

package/Image/index.tsx

@@ -1,4 +1,4 @@
-import React, {useContext, useEffect, useRef, useState} from 'react';
+import React, {useContext, useRef, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
 import FastImage, {Source} from 'react-native-fast-image';
 import styles from './styles';
@@ -9,34 +9,19 @@ import {Styles} from '../Consts';
 import {ImageProps} from './types';
 import {getAccessibilityID} from '../Application/utils';
 
-const {
-  ComponentContext,
-} = require('react-native/Libraries/Components/ScreenContext');
-
 type Status = 'success' | 'loading' | 'error';
 
 const Image: React.FC<ImageProps> = ({
   style,
   source,
-  loading = true,
+  loading,
   children,
-  accessibilityLabel,
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
-  const component = useContext<any>(ComponentContext);
   const error = useRef(false);
   const [status, setStatus] = useState<Status>('success');
 
-  const id = getAccessibilityID(
-    `img|${(source as Source).uri}`,
-    accessibilityLabel,
-  );
-
-  useEffect(() => {
-    component?.addChild?.(id.testID || id.accessibilityLabel);
-  }, []);
-
   /**
    * render content loading | fail | rendered
    */
@@ -60,7 +45,7 @@ const Image: React.FC<ImageProps> = ({
   return (
     <FastImage
       {...rest}
-      {...id}
+      {...getAccessibilityID(`img|${(source as Source).uri}`)}
       source={source}
       style={[styles.container, style]}
       onProgress={() => {
@@ -92,4 +77,8 @@ const Image: React.FC<ImageProps> = ({
   );
 };
 
+Image.defaultProps = {
+  loading: true,
+};
+
 export {Image};

package/Image/types.ts

@@ -2,5 +2,4 @@ import {FastImageProps} from 'react-native-fast-image';
 
 export interface ImageProps extends FastImageProps {
   loading?: boolean;
-  accessibilityLabel?: string;
 }