@momo-kits/foundation 0.92.1-tracking.2 → 0.92.1-tracking.21

package/Application/StackScreen.tsx

@@ -1,13 +1,14 @@
 import React, {useContext, useEffect, useLayoutEffect, useRef} from 'react';
 import {ScreenParams} from './types';
 import Navigation from './Navigation';
-import {ApplicationContext, MiniAppContext} from './index';
+import {ApplicationContext} 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 => {
@@ -17,29 +18,31 @@ const StackScreen: React.FC<ScreenParams> = props => {
   const timeLoad = useRef(0);
   const timeout = useRef<any>();
 
-  const context = useContext(MiniAppContext);
+  const context = useContext<any>(MiniAppContext);
 
-  const {screen: Component, options, params}: ScreenParams = props.route.params;
+  const {screen: Component, options} = props.route.params;
   const navigation = new Navigation(props.navigation, theme);
   const heightHeader = useHeaderHeight();
 
-  const data = {
+  const params = {
     ...props.route.params,
-    params,
     navigation,
   };
 
-  delete data.screen;
+  delete params.screen;
+
+  const screenName = Component?.name || Component?.type?.name || '';
 
   /**
    * set options for screen
    */
   useLayoutEffect(() => {
-    startTime.current = Date.now();
+    const host = (global as any).miniAppApi?.currentHost || {};
+    host.screenName = screenName;
     InteractionManager.runAfterInteractions(() => {
       navigator?.maxApi?.showToastDebug?.({
-        appId: context.appId,
-        message: `${Component.name} screen_interaction_time ${
+        appId: `auto - ${context.appId}`,
+        message: `${screenName} screen_interaction_time ${
           Date.now() - startTime.current
         }`,
       });
@@ -54,17 +57,17 @@ const StackScreen: React.FC<ScreenParams> = props => {
    */
   useEffect(() => {
     if (__DEV__) {
-      if (!Component.name || Component.name === 'screen') {
+      if (!screenName || screenName === 'screen') {
         Alert.alert(
           'Design system',
-          `Unvalidated screen name "${Component.name}" !`,
+          `Unvalidated screen name "${screenName}" !`,
         );
       }
     }
 
     const tracking = {
       ...context,
-      screen_name: Component.name,
+      screen_name: screenName,
     };
 
     const routes = props.navigation.getState()?.routes || [];
@@ -81,8 +84,8 @@ const StackScreen: React.FC<ScreenParams> = props => {
     };
     navigator?.maxApi?.trackEvent?.('service_frame_displayed', params);
     navigator?.maxApi?.showToastDebug?.({
-      appId: context.appId,
-      message: `${Component.name} service_frame_displayed`,
+      appId: `auto - ${context.appId}`,
+      message: `${screenName} service_frame_displayed`,
       params,
     });
 
@@ -94,8 +97,8 @@ const StackScreen: React.FC<ScreenParams> = props => {
       };
       navigator?.maxApi?.trackEvent?.('service_icon_clicked', params);
       navigator?.maxApi?.showToastDebug?.({
-        appId: context.appId,
-        message: `${Component.name} service_icon_clicked`,
+        appId: `auto - ${context.appId}`,
+        message: `${screenName} service_icon_clicked`,
         params,
       });
     });
@@ -106,7 +109,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
       value={{
         appId: context.appId,
         code: context.code,
-        screenName: Component.name,
+        screenName,
         autoTracking: (data: any) => {
           navigator?.maxApi?.dispatchFunction?.('autoTracking', data);
         },
@@ -114,15 +117,21 @@ const StackScreen: React.FC<ScreenParams> = props => {
           endTime.current = Date.now();
           clearTimeout(timeout.current);
           timeout.current = setTimeout(() => {
-            timeLoad.current = endTime.current - startTime.current;
-            navigator?.maxApi?.showToastDebug?.({
-              appId: context.appId,
-              message: `${Component.name} screen_load_time ${timeLoad.current}`,
-            });
-          }, 1000);
+            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);
         },
       }}>
-      <Component heightHeader={heightHeader} {...data} />
+      <Component
+        heightHeader={heightHeader}
+        {...params}
+        onScreenLoad={() => {}}
+      />
       {showGrid && <GridSystem />}
     </ScreenContext.Provider>
   );

package/Application/index.ts

@@ -4,10 +4,8 @@ import {
   HeaderAnimated,
   HeaderBackground,
   HeaderCustom,
-  HeaderLeft,
   HeaderRightAction,
   HeaderTitle,
-  HeaderToolkitAction,
   NavigationButton,
 } from './Components';
 import BottomTab from './BottomTab';
@@ -32,10 +30,8 @@ export {
   BottomTab,
   NavigationButton,
   HeaderTitle,
-  HeaderLeft,
   HeaderBackground,
   HeaderRightAction,
-  HeaderToolkitAction,
   HeaderCustom,
   HeaderAnimated,
 };

package/Application/types.ts

@@ -1,4 +1,4 @@
-import {Animated} from 'react-native';
+import {Animated, FlatListProps, ViewProps} from 'react-native';
 import {StackNavigationOptions} from '@react-navigation/stack';
 import React from 'react';
 import Navigator from './Navigator';
@@ -94,7 +94,6 @@ export type NavigationContainerProps = {
   options?: NavigationOptions;
   theme: Theme;
   maxApi: any;
-  params: Record<string, any>;
   localization?: LocalizationObject;
 };
 
@@ -119,8 +118,8 @@ export interface ModalParams extends ScreenParams {
 export interface BottomSheetParams extends ScreenParams {
   [key: string]: any;
   onDismiss?: () => void;
-  snapPoint?: '30%' | '50%' | '70%' | '90%' | 'content';
-  indicatorColor?: string;
+  footerComponent?: React.ReactNode;
+  flatListProps: FlatListProps<any>;
 }
 
 export type NavigationButtonProps = {
@@ -154,6 +153,7 @@ export interface NavigationOptions extends StackNavigationOptions {
   toolkitParams?: {
     pinnedTool?: PinnedToolType;
     runtimeTools?: RuntimeToolType[];
+    preventClose?: PopupNotifyProps;
   };
 }
 
@@ -185,11 +185,10 @@ export type HeaderToolkitProps = {
   configs: any[];
 };
 
-export type HeaderAnimatedProps = {
+export interface HeaderAnimatedProps extends ViewProps {
   animatedValue: Animated.Value;
   image: string;
-  onPress?: () => void;
-};
+}
 
 export type BottomTabItemProps = {
   name: string;

package/Application/utils.tsx

@@ -131,14 +131,7 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
     options = {
       ...options,
       headerRight: (props: any) => {
-        return (
-          <HeaderToolkitAction
-            preventBack={params.preventBack}
-            pinnedTool={params.toolkitParams?.pinnedTool}
-            runtimeTools={params.toolkitParams?.runtimeTools}
-            {...props}
-          />
-        );
+        return <HeaderToolkitAction {...params.toolkitParams} {...props} />;
       },
     };
   }
@@ -149,20 +142,23 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
   };
 };
 
-const getAccessibilityID = (key = '') => {
+const getAccessibilityID = (
+  key = '',
+  override: string | undefined = undefined,
+) => {
   if (isIOS) {
     return {
       accessible: true,
-      testID: key,
+      testID: override || key,
     };
   } else {
     return {
-      accessibilityLabel: key,
+      accessibilityLabel: override || key,
     };
   }
 };
 
-const formatComponentName = (word: string) => {
+const formatComponentName = (word = '') => {
   const accentsMap = {
     a: 'á|à|ả|ã|ạ|â|ấ|ầ|ẩ|ẫ|ậ|ă|ắ|ằ|ẳ|ẵ|ặ',
     A: 'Á|À|Ả|Ã|Ạ|Â|Ấ|Ầ|Ẩ|Ẫ|Ậ|Ă|Ắ|Ằ|Ẳ|Ẵ|Ặ',
@@ -190,7 +186,7 @@ const formatComponentName = (word: string) => {
   return word;
 };
 
-const formatNameLength = (name: string) => {
+const formatNameLength = (name = '') => {
   let formattedName = name;
   if (formattedName.length > 100) {
     formattedName = formattedName.substring(0, 100);

package/Button/index.tsx

@@ -7,7 +7,7 @@ import {
   View,
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
-import {ApplicationContext, MiniAppContext} from '../Application';
+import {ApplicationContext} from '../Application';
 import {Text} from '../Text';
 import {Typography} from '../Text/types';
 import {Colors, Spacing} from '../Consts';
@@ -18,6 +18,7 @@ import {formatComponentName, getAccessibilityID} from '../Application/utils';
 
 const {
   ScreenContext,
+  MiniAppContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const AnimationLinear = Animated.createAnimatedComponent(LinearGradient);
@@ -96,7 +97,7 @@ const Button: FC<ButtonProps> = ({
   ...rest
 }) => {
   const {theme, config} = useContext(ApplicationContext);
-  const {appId, code} = useContext(MiniAppContext)
+  const {appId, code} = useContext<any>(MiniAppContext);
   const {gradient, color} = config?.navigationBar?.buttonColors ?? {};
   let gradientPros;
   if (gradient?.length > 0 && type == 'primary') {
@@ -303,7 +304,7 @@ const Button: FC<ButtonProps> = ({
   };
 
   const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
-  const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|btn_${title}`)
+
   return (
     <ScreenContext.Provider
       value={{
@@ -321,7 +322,10 @@ const Button: FC<ButtonProps> = ({
       }}>
       <TouchableOpacity
         {...rest}
-        {...accessibilityID}
+        {...getAccessibilityID(
+          `${appId}/${code}/${screenInfo.screenName}/btn_${title}`,
+          accessibilityLabel,
+        )}
         activeOpacity={activeOpacity}
         onPress={onPressButton}
         style={buttonStyle}>

package/CheckBox/index.tsx

@@ -2,13 +2,14 @@ import React, {FC, useContext} from 'react';
 import {TouchableOpacity, View} from 'react-native';
 import {CheckBoxProps} from './types';
 import styles from './styles';
-import {ApplicationContext, MiniAppContext} from '../Application';
+import {ApplicationContext} from '../Application';
 import {Text} from '../Text';
 import {Icon} from '../Icon';
 import {formatNameLength, getAccessibilityID} from '../Application/utils';
 
 const {
   ScreenContext,
+  MiniAppContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const CheckBox: FC<CheckBoxProps> = ({
@@ -21,7 +22,7 @@ const CheckBox: FC<CheckBoxProps> = ({
   params,
   componentId,
 }) => {
-    const {appId} = useContext(MiniAppContext)
+  const {appId} = useContext<any>(MiniAppContext);
   const {theme} = useContext(ApplicationContext);
   const screenInfo = useContext<any>(ScreenContext);
   const haveValue = value || indeterminate;
@@ -42,7 +43,10 @@ const CheckBox: FC<CheckBoxProps> = ({
       backgroundColor = theme.colors.background.tonal;
     }
   }
-    const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|cbx_${label}_${value}`)
+
+  const accessibilityID = getAccessibilityID(
+    `${appId}/${screenInfo.screenName}/cbx_${label}_${value}`,
+  );
 
   return (
     <ScreenContext.Provider
@@ -57,7 +61,7 @@ const CheckBox: FC<CheckBoxProps> = ({
         componentValue: indeterminate ? 'indetermine' : value,
       }}>
       <TouchableOpacity
-          {...accessibilityID}
+        {...accessibilityID}
         activeOpacity={0.8}
         onPress={() => onChange?.(!value)}
         disabled={disabled}

package/Image/index.tsx

@@ -7,7 +7,7 @@ import {Skeleton} from '../Skeleton';
 import {Icon} from '../Icon';
 import {Styles} from '../Consts';
 import {ImageProps} from './types';
-import {getAccessibilityID} from "../Application/utils";
+import {getAccessibilityID} from '../Application/utils';
 
 type Status = 'success' | 'loading' | 'error';
 
@@ -42,11 +42,10 @@ const Image: React.FC<ImageProps> = ({
     return children;
   };
 
-  const accessibilityID = getAccessibilityID(`img|${source}`)
   return (
     <FastImage
       {...rest}
-      {...accessibilityID}
+      {...getAccessibilityID(`img|${source}`)}
       source={source}
       style={[styles.container, style]}
       onProgress={() => {

package/Input/Input.tsx

@@ -6,7 +6,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {ApplicationContext, MiniAppContext} from '../Application';
+import {ApplicationContext} from '../Application';
 import styles from './styles';
 import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputProps} from './index';
@@ -17,6 +17,7 @@ import {formatComponentName, getAccessibilityID} from '../Application/utils';
 
 const {
   ScreenContext,
+  MiniAppContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const Input = forwardRef(
@@ -51,7 +52,7 @@ const Input = forwardRef(
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
-    const {appId} = useContext(MiniAppContext)
+    const {appId} = useContext<any>(MiniAppContext);
     const [focused, setFocused] = useState(false);
     const [haveValue, setHaveValue] = useState(!!value || !!props.defaultValue);
     const [secureTextInput, setSecureTextInput] = useState(secureTextEntry);
@@ -122,6 +123,12 @@ const Input = forwardRef(
         iconTintColor = disabledColor;
       }
 
+      const accessibilityID = getAccessibilityID(
+        `${appId}/${screenInfo.screenName}/input_${floatingValue}${
+          disabled && '_disabled'
+        }`,
+      );
+
       return (
         <View
           style={[
@@ -149,6 +156,7 @@ const Input = forwardRef(
             )}
             <TextInput
               {...props}
+              {...accessibilityID}
               editable={!disabled}
               secureTextEntry={secure}
               textAlignVertical="center"
@@ -202,8 +210,6 @@ const Input = forwardRef(
       inputState = 'disabled';
     }
 
-    const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|input_${floatingValue}${disabled && "_disabled" }`)
-
     return (
       <ScreenContext.Provider
         value={{
@@ -214,7 +220,7 @@ const Input = forwardRef(
           state: inputState,
           componentId,
         }}>
-        <View {...accessibilityID} style={[style, styles.wrapper]}>
+        <View style={[style, styles.wrapper]}>
           {renderInputView()}
           <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
         </View>

package/Input/InputDropDown.tsx

@@ -1,6 +1,6 @@
 import React, {useContext} from 'react';
 import {TextInput, TouchableOpacity, View} from 'react-native';
-import {ApplicationContext, MiniAppContext} from '../Application';
+import {ApplicationContext} from '../Application';
 import styles from './styles';
 import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputDropDownProps} from './index';
@@ -11,6 +11,7 @@ import {formatComponentName, getAccessibilityID} from '../Application/utils';
 
 const {
   ScreenContext,
+  MiniAppContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const InputDropDown = ({
@@ -35,7 +36,7 @@ const InputDropDown = ({
   componentId,
   ...props
 }: InputDropDownProps) => {
-    const {appId} = useContext(MiniAppContext)
+  const {appId} = useContext<any>(MiniAppContext);
   const {theme} = useContext(ApplicationContext);
   const full = !!value || !!placeholder;
   const screenInfo = useContext<any>(ScreenContext);
@@ -61,6 +62,12 @@ const InputDropDown = ({
       iconTintColor = disabledColor;
     }
 
+    const accessibilityID = getAccessibilityID(
+      `${appId}/${screenInfo.screenName}/input_${floatingValue}${
+        disabled && '_disabled'
+      }`,
+    );
+
     return (
       <View
         style={[
@@ -89,6 +96,7 @@ const InputDropDown = ({
           {full && (
             <TextInput
               {...props}
+              {...accessibilityID}
               onPressIn={onPress}
               editable={false}
               textAlignVertical="top"
@@ -112,9 +120,6 @@ const InputDropDown = ({
     );
   };
 
-    const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|input_${floatingValue}${disabled && "_disabled" }`)
-
-
   return (
     <ScreenContext.Provider
       value={{
@@ -126,7 +131,6 @@ const InputDropDown = ({
         componentId,
       }}>
       <TouchableOpacity
-          {...accessibilityID}
         onPress={onPress}
         style={[style, full && styles.wrapper]}>
         {renderInputView()}

package/Input/InputMoney.tsx

@@ -12,7 +12,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {ApplicationContext, MiniAppContext} from '../Application';
+import {ApplicationContext} from '../Application';
 import styles from './styles';
 import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputMoneyProps} from './index';
@@ -22,6 +22,7 @@ import {formatComponentName, getAccessibilityID} from '../Application/utils';
 
 const {
   ScreenContext,
+  MiniAppContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const InputMoney = forwardRef(
@@ -49,7 +50,7 @@ const InputMoney = forwardRef(
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
-    const {appId} = useContext(MiniAppContext)
+    const {appId} = useContext<any>(MiniAppContext);
     const [focused, setFocused] = useState(false);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
     const screenInfo = useContext<any>(ScreenContext);
@@ -105,6 +106,12 @@ const InputMoney = forwardRef(
         iconTintColor = disabledColor;
       }
 
+      const accessibilityID = getAccessibilityID(
+        `${appId}/${screenInfo.screenName}/input_${floatingValue}${
+          disabled && '_disabled'
+        }`,
+      );
+
       return (
         <View
           style={[
@@ -123,6 +130,7 @@ const InputMoney = forwardRef(
           <View style={styles.inputView}>
             <TextInput
               {...props}
+              {...accessibilityID}
               editable={!disabled}
               textAlignVertical="top"
               ref={inputRef}
@@ -173,8 +181,6 @@ const InputMoney = forwardRef(
       inputState = 'disabled';
     }
 
-      const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|input_${floatingValue}${disabled && "_disabled" }`)
-
     return (
       <ScreenContext.Provider
         value={{
@@ -185,9 +191,7 @@ const InputMoney = forwardRef(
           state: inputState,
           componentId,
         }}>
-        <View
-            {...accessibilityID}
-            style={[style, styles.wrapper]}>
+        <View style={[style, styles.wrapper]}>
           {renderInputView()}
           <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
         </View>

package/Input/InputOTP.tsx

@@ -19,17 +19,17 @@ import {CaretProps, InputOTPProps} from './index';
 import {scaleSize, Text} from '../Text';
 import styles from './styles';
 import {ErrorView, getBorderColor} from './common';
-import {ApplicationContext, MiniAppContext} from '../Application';
+import {ApplicationContext} from '../Application';
 import {Spacing} from '../Consts';
 import {formatComponentName, getAccessibilityID} from '../Application/utils';
 
 const {
   ScreenContext,
+  MiniAppContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const OTPCaret: FC<CaretProps> = ({index, length}) => {
   const DURATION = 300;
-    const {appId} = useContext(MiniAppContext)
   const {theme} = useContext(ApplicationContext);
   const opacity = useRef(new Animated.Value(0)).current;
 
@@ -92,7 +92,7 @@ const InputOTP = forwardRef(
     ref,
   ) => {
     const MAX_LENGTH = 10;
-      const {appId} = useContext(MiniAppContext)
+    const {appId} = useContext<any>(MiniAppContext);
 
     const [value, setValue] = useState('');
     const [focused, setFocused] = useState(false);
@@ -191,6 +191,10 @@ const InputOTP = forwardRef(
       );
     };
 
+    const accessibilityID = getAccessibilityID(
+      `${appId}/${screenInfo.screenName}/input_${floatingValue}`,
+    );
+
     const renderInputView = () => {
       return (
         <View
@@ -216,6 +220,7 @@ const InputOTP = forwardRef(
           <View style={styles.inputView}>
             <TextInput
               {...props}
+              {...accessibilityID}
               ref={inputRef}
               value={value}
               onChangeText={_onChangeText}
@@ -230,7 +235,6 @@ const InputOTP = forwardRef(
         </View>
       );
     };
-      const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|input_${floatingValue}${disabled && "_disabled" }`)
 
     return (
       <ScreenContext.Provider
@@ -243,7 +247,6 @@ const InputOTP = forwardRef(
           componentId,
         }}>
         <TouchableOpacity
-            {...accessibilityID}
           activeOpacity={1}
           onPress={onFocusInput}
           style={[style, styles.otpWrapper]}>

package/Input/InputSearch.tsx

@@ -7,15 +7,16 @@ import {
   View,
 } from 'react-native';
 import {InputSearchProps} from './index';
-import {ApplicationContext, MiniAppContext} from '../Application';
+import {ApplicationContext} from '../Application';
 import styles from './styles';
 import {Icon} from '../Icon';
 import {Text} from '../Text';
 import {checkTyping} from './utils';
-import {getAccessibilityID} from "../Application/utils";
+import {getAccessibilityID} from '../Application/utils';
 
 const {
   ScreenContext,
+  MiniAppContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const InputSearch = forwardRef(
@@ -41,7 +42,7 @@ const InputSearch = forwardRef(
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
-    const {appId} = useContext(MiniAppContext)
+    const {appId} = useContext<any>(MiniAppContext);
     const [focused, setFocused] = useState(false);
     const [haveValue, setHaveValue] = useState(!!value || !!defaultValue);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
@@ -71,6 +72,9 @@ const InputSearch = forwardRef(
       return (
         <TextInput
           {...props}
+          {...getAccessibilityID(
+            `${appId}/${screenInfo.screenName}/input_search`,
+          )}
           textAlignVertical="center"
           ref={inputRef}
           style={[
@@ -139,11 +143,9 @@ const InputSearch = forwardRef(
     const backgroundColor = hasColorBG
       ? theme.colors.background.default
       : theme.colors.background.surface;
-      const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|input_search`)
 
     return (
       <ScreenContext.Provider
-          {...accessibilityID}
         value={{
           ...screenInfo,
           componentName: 'InputSearch',