@momo-kits/foundation 0.92.1-tracking.9 → 0.92.2-tracking.2

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 => {
@@ -15,15 +16,18 @@ const StackScreen: React.FC<ScreenParams> = props => {
   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 context = useContext(MiniAppContext);
-
-  const {
-    screen: Component,
-    options,
-    initialParams,
-  }: ScreenParams = props.route.params;
+  const {screen: Component, options, initialParams} = props.route.params;
   const navigation = new Navigation(props.navigation, theme);
   const heightHeader = useHeaderHeight();
 
@@ -36,18 +40,12 @@ const StackScreen: React.FC<ScreenParams> = props => {
   delete data.screen;
   delete data.initialParams;
 
+  const screenName = Component?.name || Component?.type?.name || 'Invalid';
+
   /**
    * set options for screen
    */
   useLayoutEffect(() => {
-    InteractionManager.runAfterInteractions(() => {
-      navigator?.maxApi?.showToastDebug?.({
-        appId: context.appId,
-        message: `${Component.name} screen_interaction_time ${
-          Date.now() - startTime.current
-        }`,
-      });
-    });
     if (options) {
       navigation.setOptions(options);
     }
@@ -57,81 +55,93 @@ const StackScreen: React.FC<ScreenParams> = props => {
    * tracking for screen
    */
   useEffect(() => {
-    if (__DEV__) {
-      if (!Component.name || Component.name === 'screen') {
-        Alert.alert(
-          'Design system',
-          `Unvalidated screen name "${Component.name}" !`,
-        );
-      }
+    if (__DEV__ && (!screenName || screenName == 'Invalid')) {
+      Alert.alert('Design system', `Unvalidated screen name "${screenName}" !`);
     }
 
-    const tracking = {
-      ...context,
-      screen_name: Component.name,
+    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: context.appId,
-      message: `${Component.name} 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: context.appId,
-        message: `${Component.name} service_icon_clicked`,
-        params,
+        appId: `auto - ${context.appId}`,
+        message: `${screenName} screen_interaction_time ${timeInteraction.current}`,
       });
-    });
-  }, []);
+      tracked.current.releaseInteraction = true;
+    }
+  };
 
   return (
     <ScreenContext.Provider
       value={{
-        appId: context.appId,
-        code: context.code,
-        screenName: Component.name,
+        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: context.appId,
-                message: `${Component.name} screen_load_time ${timeLoad.current}`,
-              });
             }
-          }, 1000);
+          }, 2000);
         },
       }}>
       <Component
         heightHeader={heightHeader}
         {...data}
-        onScreenLoad={() => {}}
+        onScreenLoad={onScreenLoad}
+        onScreenInteraction={onScreenInteraction}
       />
       {showGrid && <GridSystem />}
     </ScreenContext.Provider>

package/Application/types.ts

@@ -1,9 +1,9 @@
-import {Animated, ViewProps} from 'react-native';
 import {StackNavigationOptions} from '@react-navigation/stack';
 import React from 'react';
-import Navigator from './Navigator';
+import {Animated, FlatListProps, ViewProps} from 'react-native';
 import {PopupNotifyProps} from '../Popup/types';
 import Navigation from './Navigation';
+import Navigator from './Navigator';
 
 type Screen = React.ComponentType<NavigationScreenProps>;
 
@@ -94,8 +94,8 @@ export type NavigationContainerProps = {
   options?: NavigationOptions;
   theme: Theme;
   maxApi: any;
-  initialParams: Record<string, any>;
   localization?: LocalizationObject;
+  initialParams?: any;
 };
 
 export type NavigationScreenProps = {
@@ -119,8 +119,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 = {
@@ -189,7 +189,6 @@ export type HeaderToolkitProps = {
 export interface HeaderAnimatedProps extends ViewProps {
   animatedValue: Animated.Value;
   image: string;
-  onPress?: () => void;
 }
 
 export type BottomTabItemProps = {
@@ -211,6 +210,14 @@ export type BottomTabProps = {
     tabPress?: any;
     focus?: any;
   };
+  floatingButton?: FloatingButtonProps;
+};
+
+export type FloatingButtonProps = {
+  container?: React.ReactNode;
+  icon: string | React.ReactNode;
+  label: string;
+  onPress: () => void;
 };
 
 export type AnimatedHeader = {

package/Application/utils.tsx

@@ -142,19 +142,29 @@ 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 cleanNameForTracking = (word = ''): string => {
+  return word
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f |\s]/g, '')
+    .toLowerCase();
+};
+
 const formatComponentName = (word = '') => {
   const accentsMap = {
     a: 'á|à|ả|ã|ạ|â|ấ|ầ|ẩ|ẫ|ậ|ă|ắ|ằ|ẳ|ẵ|ặ',
@@ -198,4 +208,5 @@ export {
   formatComponentName,
   formatNameLength,
   getAccessibilityID,
+  cleanNameForTracking,
 };

package/Badge/Badge.tsx

@@ -46,7 +46,7 @@ const Badge: FC<BadgeProps> = ({label = 'Label', style, backgroundColor}) => {
 
   return (
     <View style={[style, styles.badge, {backgroundColor: badgeColor}]}>
-      <Text color={Colors.black_01} typography={'action_xs_bold'}>
+      <Text color={Colors.black_01} typography={'action_xxs_bold'}>
         {formatTitle()}
       </Text>
     </View>

package/Button/index.tsx

@@ -1,4 +1,4 @@
-import React, {FC, useContext} from 'react';
+import React, {FC, useContext, useState} from 'react';
 import {
   Animated,
   StyleSheet,
@@ -7,17 +7,17 @@ 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';
 import styles from './styles';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
-import {formatComponentName, getAccessibilityID} from '../Application/utils';
+import {formatComponentName} from '../Application/utils';
 
 const {
-  ScreenContext,
+  ComponentContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const AnimationLinear = Animated.createAnimatedComponent(LinearGradient);
@@ -76,10 +76,6 @@ export interface ButtonProps extends TouchableOpacityProps {
   onPress: () => void;
 
   params?: any;
-
-  componentId?: string;
-
-  accessibilityID?: object
 }
 
 const Button: FC<ButtonProps> = ({
@@ -93,15 +89,16 @@ const Button: FC<ButtonProps> = ({
   title = 'Button',
   onPress,
   params,
-  componentId,
   accessibilityLabel,
-                                   accessibilityID,
   ...rest
 }) => {
   const {theme, config} = useContext(ApplicationContext);
-  const {appId, code} = useContext(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,
@@ -110,7 +107,6 @@ const Button: FC<ButtonProps> = ({
     };
   }
 
-  const screenInfo = useContext<any>(ScreenContext);
   const getSizeStyle = () => {
     const styleSheet: {[key: string]: any} = styles;
     return styleSheet[size ?? 'small'];
@@ -306,25 +302,20 @@ const Button: FC<ButtonProps> = ({
   };
 
   const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
-  const selfAccessibilityID = accessibilityID ? accessibilityID : getAccessibilityID?.(`${appId}/${code}/${screenInfo.screenName}/btn_${title}`)
+
   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}
-        {...selfAccessibilityID}
+        accessibilityLabel={accessibilityLabel}
         activeOpacity={activeOpacity}
         onPress={onPressButton}
         style={buttonStyle}>
@@ -336,7 +327,7 @@ const Button: FC<ButtonProps> = ({
         )}
         {gradientPros && <View style={styles.strokeView} />}
       </TouchableOpacity>
-    </ScreenContext.Provider>
+    </ComponentContext.Provider>
   );
 };
 

package/CheckBox/index.tsx

@@ -2,28 +2,26 @@ 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';
+import {formatNameLength} from '../Application/utils';
 
 const {
-  ScreenContext,
+  ComponentContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const CheckBox: FC<CheckBoxProps> = ({
   value,
-  disabled,
+  disabled = false,
   onChange,
   style,
   label,
   indeterminate,
   params,
-  componentId,
+  accessibilityLabel,
 }) => {
-    const {appId} = useContext(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;
@@ -42,22 +40,20 @@ const CheckBox: FC<CheckBoxProps> = ({
       backgroundColor = theme.colors.background.tonal;
     }
   }
-    const accessibilityID = getAccessibilityID?.(`${appId}/${screenInfo.screenName}/cbx_${label}_${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}
@@ -77,12 +73,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/Consts/colors+spacing+radius.ts

@@ -213,6 +213,20 @@ const Shadow = {
       elevation: 6,
     },
   }),
+
+  Pink: Platform.select({
+    ios: {
+      shadowColor: '#e27eb5',
+      shadowOffset: {width: 0, height: 6},
+      shadowOpacity: 0.25,
+      shadowRadius: 8,
+    },
+    android: {
+      elevation: 16,
+      shadowColor: '#e27eb5',
+      shadowOpacity: 0.25,
+    },
+  }),
 };
 
 export {Colors, Spacing, Radius, Shadow};

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

@@ -12,7 +12,7 @@ import styles from './styles';
 import {formatComponentName} from '../Application/utils';
 
 const {
-  ScreenContext,
+  ComponentContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 export interface IconButtonProps extends TouchableOpacityProps {
@@ -33,21 +33,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 +130,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};