@momo-kits/foundation 0.89.4-tracking.18 → 0.89.5-beta.10

package/Application/Components.tsx

@@ -120,19 +120,13 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
     const goBack = () => {
       const canGoBack = navigator?.ref.current?.canGoBack();
       if (!canGoBack) {
-        const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
-        const params = {
+        const currentRoute = navigator?.ref?.current.getCurrentRoute();
+        navigator?.maxApi?.trackEvent?.('service_icon_clicked', {
           ...context,
           screen_name: currentRoute?.params?.screen?.name ?? currentRoute?.name,
           trigger_id: '111154000000000000',
           icon_name: 'back',
-        };
-        navigator?.maxApi?.showToastDebug?.({
-          appId: context.appId,
-          message: 'service_icon_clicked',
-          params,
         });
-        navigator?.maxApi?.trackEvent?.('service_icon_clicked', params);
       }
       if (canGoBack) {
         navigator?.ref.current?.goBack();

package/Application/NavigationContainer.tsx

@@ -25,9 +25,8 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   localization,
 }) => {
   const context = useContext(MiniAppContext);
-  const navigationRef = useRef<NavigationContainerRef>(null);
-  const isReady = useRef(false);
-  const navigator = useRef(new Navigator(navigationRef, isReady));
+  const navigationRef = React.useRef<NavigationContainerRef>(null);
+  const navigator = useRef(new Navigator(navigationRef));
   const [showGrid, setShowGrid] = useState(false);
   const config = useRef<any>();
 
@@ -90,9 +89,6 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
               },
             }}
             ref={navigator.current?.ref}
-            onReady={() => {
-              isReady.current = true;
-            }}
             independent={true}>
             <Stack.Navigator initialRouteName="Stack" headerMode="screen">
               <Stack.Screen

package/Application/Navigator.ts

@@ -8,15 +8,13 @@ import {
 
 class Navigator {
   ref?: any;
-  isReady?: any;
   toolkitConfig?: HeaderToolkitProps;
   maxApi?: any;
   dismissData?: any;
   toolkitCallback?: (item: any) => void;
 
-  constructor(navigation: any, isReady: any) {
+  constructor(navigation: any) {
     this.ref = navigation;
-    this.isReady = isReady;
   }
 
   /**
@@ -24,9 +22,7 @@ class Navigator {
    * @param params
    */
   push = (params: ScreenParams) => {
-    if (this.isReady.current) {
-      this.ref.current.dispatch(StackActions.push('Stack', params));
-    }
+    this.ref.current.dispatch(StackActions.push('Stack', params));
   };
 
   /**
@@ -34,18 +30,14 @@ class Navigator {
    * @param params
    */
   replace = (params: ScreenParams) => {
-    if (this.isReady.current) {
-      this.ref.current.dispatch(StackActions.replace('Stack', params));
-    }
+    this.ref.current.dispatch(StackActions.replace('Stack', params));
   };
   /**
    * pop to dismiss a screen
    * @param count
    */
   pop = (count?: number) => {
-    if (this.isReady.current) {
-      this.ref.current.dispatch(StackActions.pop(count ?? 1));
-    }
+    this.ref.current.dispatch(StackActions.pop(count ?? 1));
   };
 
   /**
@@ -53,9 +45,7 @@ class Navigator {
    * @param params
    */
   present = (params: ScreenParams) => {
-    if (this.isReady.current) {
-      this.ref.current.dispatch(StackActions.push('Dialog', params));
-    }
+    this.ref.current.dispatch(StackActions.push('Dialog', params));
   };
 
   /**
@@ -63,9 +53,7 @@ class Navigator {
    * @param params
    */
   showModal = (params: ModalParams) => {
-    if (this.isReady.current) {
-      this.ref.current.dispatch(StackActions.push('Modal', params));
-    }
+    this.ref.current.dispatch(StackActions.push('Modal', params));
   };
 
   /**
@@ -73,23 +61,19 @@ class Navigator {
    * @param params
    */
   showBottomSheet = (params: BottomSheetParams) => {
-    if (this.isReady.current) {
-      this.ref.current.dispatch(
-        StackActions.push('Modal', {
-          ...params,
-          isBottomSheet: true,
-        }),
-      );
-    }
+    this.ref.current.dispatch(
+      StackActions.push('Modal', {
+        ...params,
+        isBottomSheet: true,
+      }),
+    );
   };
 
   /**
    * pop all screen route
    */
   popToTop = () => {
-    if (this.isReady.current) {
-      this.ref.current.dispatch(StackActions.popToTop());
-    }
+    this.ref.current.dispatch(StackActions.popToTop());
   };
 
   /**
@@ -98,14 +82,12 @@ class Navigator {
    * @param params
    */
   navigate = (name: string, params: any) => {
-    if (this.isReady.current) {
-      this.ref.current.dispatch(
-        CommonActions.navigate({
-          name,
-          params,
-        }),
-      );
-    }
+    this.ref.current.dispatch(
+      CommonActions.navigate({
+        name,
+        params,
+      }),
+    );
   };
 
   /**
@@ -113,20 +95,18 @@ class Navigator {
    * @param params
    */
   reset = (params: ScreenParams) => {
-    if (this.isReady.current) {
-      this.ref.current.dispatch(
-        CommonActions.reset({
-          index: 0,
-          routes: [
-            {
-              name: 'Stack',
-              key: `Stack_${new Date().getTime()}`,
-              params,
-            },
-          ],
-        }),
-      );
-    }
+    this.ref.current.dispatch(
+      CommonActions.reset({
+        index: 0,
+        routes: [
+          {
+            name: 'Stack',
+            key: `Stack_${new Date().getTime()}`,
+            params,
+          },
+        ],
+      }),
+    );
   };
 
   /**

package/Application/StackScreen.tsx

@@ -1,22 +1,12 @@
-import React, {useContext, useEffect, useLayoutEffect, useRef} from 'react';
+import React, {useContext, useEffect, useLayoutEffect} from 'react';
 import {ScreenParams} from './types';
 import Navigation from './Navigation';
 import {ApplicationContext, MiniAppContext} from './index';
 import {GridSystem} from '../Layout';
 import {useHeaderHeight} from '@react-navigation/stack';
-import {Alert, InteractionManager} from 'react-native';
-
-const {
-  ScreenContext,
-} = 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 context = useContext(MiniAppContext);
 
   const {screen: Component, options}: ScreenParams = props.route.params;
@@ -37,29 +27,12 @@ const StackScreen: React.FC<ScreenParams> = props => {
     if (options) {
       navigation.setOptions(options);
     }
-    InteractionManager.runAfterInteractions(() => {
-      navigator?.maxApi?.showToastDebug?.({
-        appId: context.appId,
-        message: `${Component.name} screen_interaction_time ${
-          Date.now() - startTime.current
-        }`,
-      });
-    });
   }, [options]);
 
   /**
    * tracking for screen
    */
   useEffect(() => {
-    if (__DEV__) {
-      if (!Component.name || Component.name === 'screen') {
-        Alert.alert(
-          'Design system',
-          `Unvalidated screen name "${Component.name}" !`,
-        );
-      }
-    }
-
     const tracking = {
       ...context,
       screen_name: Component.name,
@@ -72,57 +45,26 @@ const StackScreen: React.FC<ScreenParams> = props => {
       pre_screen_name = routes[routesLength - 2]?.params?.screen?.name;
     }
 
-    const params = {
+    navigator?.maxApi?.trackEvent?.('service_frame_displayed', {
       ...tracking,
       pre_screen_name,
       trigger_id: '111378000000000000',
-    };
-    navigator?.maxApi?.trackEvent?.('service_frame_displayed', params);
-    navigator?.maxApi?.showToastDebug?.({
-      appId: context.appId,
-      message: `${Component.name} service_frame_displayed`,
-      params,
     });
 
     return props.navigation.addListener('beforeRemove', () => {
-      const params = {
+      navigator?.maxApi?.trackEvent?.('service_icon_clicked', {
         ...tracking,
         trigger_id: '111154000000000000',
         icon_name: 'back',
-      };
-      navigator?.maxApi?.trackEvent?.('service_icon_clicked', params);
-      navigator?.maxApi?.showToastDebug?.({
-        appId: context.appId,
-        message: `${Component.name} service_icon_clicked`,
-        params,
       });
     });
   }, []);
 
   return (
-    <ScreenContext.Provider
-      value={{
-        appId: context.appId,
-        code: context.code,
-        screenName: Component.name,
-        autoTracking: (data: any) => {
-          navigator?.maxApi?.dispatchFunction?.('autoTracking', data);
-        },
-        onElementLoad: () => {
-          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);
-        },
-      }}>
+    <>
       <Component heightHeader={heightHeader} {...params} />
       {showGrid && <GridSystem />}
-    </ScreenContext.Provider>
+    </>
   );
 };
 

package/Application/utils.tsx

@@ -146,39 +146,4 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
   };
 };
 
-const  formatComponentName= (word: string) =>{
-  const accentsMap = {
-    'a': 'á|à|ả|ã|ạ|â|ấ|ầ|ẩ|ẫ|ậ|ă|ắ|ằ|ẳ|ẵ|ặ',
-    'A': 'Á|À|Ả|Ã|Ạ|Â|Ấ|Ầ|Ẩ|Ẫ|Ậ|Ă|Ắ|Ằ|Ẳ|Ẵ|Ặ',
-    'e': 'é|è|ẻ|ẽ|ẹ|ê|ế|ề|ể|ễ|ệ',
-    'E': 'É|È|Ẻ|Ẽ|Ẹ|Ê|Ế|Ề|Ể|Ễ|Ệ',
-    'i': 'í|ì|ỉ|ĩ|ị',
-    'I': 'Í|Ì|Ỉ|Ĩ|Ị',
-    'o': 'ó|ò|ỏ|õ|ọ|ô|ố|ồ|ổ|ỗ|ộ|ơ|ớ|ờ|ở|ỡ|ợ',
-    'O': 'Ó|Ò|Ỏ|Õ|Ọ|Ô|Ố|Ồ|Ổ|Ỗ|Ộ|Ơ|Ớ|Ờ|Ở|Ỡ|Ợ',
-    'u': 'ú|ù|ủ|ũ|ụ|ư|ứ|ừ|ử|ữ|ự',
-    'U': 'Ú|Ù|Ủ|Ũ|Ụ|Ư|Ứ|Ừ|Ử|Ữ|Ự',
-    'y': 'ý|ỳ|ỷ|ỹ|ỵ',
-    'Y': 'Ý|Ỳ|Ỷ|Ỹ|Ỵ',
-    'd': 'đ',
-    'D': 'Đ'
-  };
-
-  for (const [nonAccent, accentGroup] of Object.entries(accentsMap)) {
-    const accents = new RegExp(accentGroup, 'g');
-    word = word.replace(accents, nonAccent);
-  }
-
-  word = word.replace(/\s+/g, '_').toLowerCase();
-
-  return word;
-}
-
-const formatNameLength = (name: string) =>{
-  let formattedName = name
-  if (formattedName.length > 100) {
-    formattedName = formattedName.substring(0, 100);
-  }
-  return formattedName
-}
-export {getStackOptions, getDialogOptions, getModalOptions, getOptions, formatComponentName, formatNameLength};
+export {getStackOptions, getDialogOptions, getModalOptions, getOptions};

package/Button/index.tsx

@@ -6,6 +6,7 @@ import {
   TouchableOpacityProps,
   View,
 } from 'react-native';
+
 import LinearGradient from 'react-native-linear-gradient';
 import {ApplicationContext} from '../Application';
 import {Text} from '../Text';
@@ -14,11 +15,6 @@ import {Colors, Spacing} from '../Consts';
 import styles from './styles';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
-import {formatComponentName} from '../Application/utils';
-
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
 
 const AnimationLinear = Animated.createAnimatedComponent(LinearGradient);
 
@@ -74,10 +70,6 @@ export interface ButtonProps extends TouchableOpacityProps {
    *  A callback function that is called when the button is pressed.
    */
   onPress: () => void;
-
-  params?: any;
-
-  componentId?: string;
 }
 
 const Button: FC<ButtonProps> = ({
@@ -90,9 +82,6 @@ const Button: FC<ButtonProps> = ({
   loading = false,
   title = 'Button',
   onPress,
-  params,
-  componentId,
-  accessibilityLabel,
   ...rest
 }) => {
   const {theme, config} = useContext(ApplicationContext);
@@ -105,8 +94,6 @@ const Button: FC<ButtonProps> = ({
       end: {x: 0, y: 0.5},
     };
   }
-
-  const screenInfo = useContext<any>(ScreenContext);
   const getSizeStyle = () => {
     const styleSheet: {[key: string]: any} = styles;
     return styleSheet[size ?? 'small'];
@@ -304,34 +291,19 @@ const Button: FC<ButtonProps> = ({
   const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
 
   return (
-    <ScreenContext.Provider
-      value={{
-        ...screenInfo,
-        componentName: 'Button',
-        params,
-        state: loading
-          ? 'loading'
-          : type === 'disabled'
-          ? 'disabled'
-          : 'enabled',
-        componentId,
-        componentValue: formatComponentName(title),
-        action: 'click',
-      }}>
-      <TouchableOpacity
-        {...rest}
-        activeOpacity={activeOpacity}
-        onPress={onPressButton}
-        style={buttonStyle}>
-        {renderLeading()}
-        {renderTitle()}
-        {renderTrailing()}
-        {gradientPros && (
-          <AnimationLinear {...gradientPros} style={styles.gradientView} />
-        )}
-        {gradientPros && <View style={styles.strokeView} />}
-      </TouchableOpacity>
-    </ScreenContext.Provider>
+    <TouchableOpacity
+      {...rest}
+      activeOpacity={activeOpacity}
+      onPress={onPressButton}
+      style={buttonStyle}>
+      {renderLeading()}
+      {renderTitle()}
+      {renderTrailing()}
+      {gradientPros && (
+        <AnimationLinear {...gradientPros} style={styles.gradientView} />
+      )}
+      {gradientPros && <View style={styles.strokeView} />}
+    </TouchableOpacity>
   );
 };
 

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 {formatNameLength} from '../Application/utils';
-
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
 
 const CheckBox: FC<CheckBoxProps> = ({
   value,
@@ -18,11 +13,8 @@ const CheckBox: FC<CheckBoxProps> = ({
   style,
   label,
   indeterminate,
-  params,
-  componentId,
 }) => {
   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;
@@ -43,38 +35,26 @@ const CheckBox: FC<CheckBoxProps> = ({
   }
 
   return (
-    <ScreenContext.Provider
-      value={{
-        ...screenInfo,
-        componentName: 'Button',
-        params,
-        state: disabled ? 'disabled' : 'filled',
-        componentId,
-        action: 'click',
-        componentLabel: formatNameLength(label || ''),
-        componentValue: indeterminate ? 'indetermine' : 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
+      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/CheckBox/types.ts

@@ -35,8 +35,4 @@ export type CheckBoxProps = {
    * Accepts an object of style properties.
    */
   style?: ViewStyle;
-
-  params?: any
-
-  componentId?: string
 };

package/IconButton/index.tsx

@@ -9,11 +9,6 @@ import {ApplicationContext} 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 {
   /**
@@ -31,10 +26,6 @@ export interface IconButtonProps extends TouchableOpacityProps {
    * Optional. Defines the size of the IconButton.
    */
   size?: 'large' | 'small';
-
-  params?: any;
-
-  componentId?: string;
 }
 
 const IconButton: React.FC<IconButtonProps> = ({
@@ -42,12 +33,9 @@ const IconButton: React.FC<IconButtonProps> = ({
   icon,
   size,
   onPress,
-  params,
-  componentId,
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
-  const screenInfo = useContext<any>(ScreenContext);
 
   /**
    * get size icon button
@@ -133,24 +121,13 @@ const IconButton: React.FC<IconButtonProps> = ({
   const iconSize = size === 'small' ? 16 : 24;
 
   return (
-    <ScreenContext.Provider
-      value={{
-        ...screenInfo,
-        componentName: 'IconButton',
-        params,
-        state: type === 'disabled' ? 'disabled' : 'enabled',
-        componentId,
-        componentValue: formatComponentName(icon),
-        action: 'click',
-      }}>
-      <TouchableOpacity
-        {...rest}
-        activeOpacity={activeOpacity}
-        onPress={onPressButton}
-        style={buttonStyle}>
-        <Icon size={iconSize} source={icon} color={getIconColor()} />
-      </TouchableOpacity>
-    </ScreenContext.Provider>
+    <TouchableOpacity
+      {...rest}
+      activeOpacity={activeOpacity}
+      onPress={onPressButton}
+      style={buttonStyle}>
+      <Icon size={iconSize} source={icon} color={getIconColor()} />
+    </TouchableOpacity>
   );
 };
 

package/Input/Input.tsx

@@ -13,11 +13,6 @@ import {InputProps} from './index';
 import {Icon} from '../Icon';
 import {checkTyping} from './utils';
 import {Loader} from '../Loader';
-import {formatComponentName} from '../Application/utils';
-
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
 
 const Input = forwardRef(
   (
@@ -44,8 +39,6 @@ const Input = forwardRef(
       onPressIcon,
       secureTextEntry,
       style,
-      params,
-      componentId,
       ...props
     }: InputProps,
     ref,
@@ -55,7 +48,6 @@ const Input = forwardRef(
     const [haveValue, setHaveValue] = useState(!!value || !!props.defaultValue);
     const [secureTextInput, setSecureTextInput] = useState(secureTextEntry);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
-    const screenInfo = useContext<any>(ScreenContext);
 
     const onClearText = () => {
       inputRef?.current?.clear();
@@ -188,34 +180,11 @@ const Input = forwardRef(
       );
     };
 
-    let inputState = 'active';
-
-    if (value && value?.length > 0) {
-      inputState = 'filled';
-    }
-    if (errorMessage && errorMessage?.length > 0) {
-      inputState = 'error';
-    }
-
-    if (disabled) {
-      inputState = 'disabled';
-    }
-
     return (
-      <ScreenContext.Provider
-        value={{
-          ...screenInfo,
-          componentName: 'Input',
-          params,
-          componentLabel: formatComponentName(floatingValue || ''),
-          state: inputState,
-          componentId,
-        }}>
-        <View style={[style, styles.wrapper]}>
-          {renderInputView()}
-          <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
-        </View>
-      </ScreenContext.Provider>
+      <View style={[style, styles.wrapper]}>
+        {renderInputView()}
+        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+      </View>
     );
   },
 );