@momo-kits/foundation 0.88.1-beta.3 → 0.88.1-beta.5

package/Application/Navigator.ts

@@ -128,6 +128,10 @@ class Navigator {
   ) => {
     this.toolkitCallback = callback;
   };
+
+  setTrackingInfo = (newInfo: TrackingInfo) => {
+    this.trackingInfo = {...this.trackingInfo, ...newInfo};
+  };
 }
 
 export default Navigator;

package/Application/StackScreen.tsx

@@ -70,9 +70,8 @@ const StackScreen: React.FC<ScreenParams> = props => {
   return (
     <ScreenContext.Provider
       value={{
-        app_id: navigator?.trackingInfo?.appId,
-        screen_name: Component.name,
-        feature_code: navigator?.trackingInfo?.code,
+        ...navigator?.trackingInfo,
+        screenName: Component.name,
         autoTracking: navigator?.maxApi?.autoTracking,
       }}>
       <Component heightHeader={heightHeader} {...params} />

package/Application/types.ts

@@ -82,9 +82,10 @@ export type LocalizationObject = {
 
 export type TrackingInfo = {
   [key: string]: any;
-  code: string;
   appId: string;
-  buildNumber: number;
+  code: string;
+  screenName: string;
+  buildNumber: string;
   flowPartnerId?: string;
 };
 
@@ -207,9 +208,3 @@ export type AnimatedHeader = {
   type: 'default' | 'surface';
   component?: (props?: any) => React.ReactElement;
 };
-
-export type ScreenInfo = {
-  app_id: string;
-  feature_code: string;
-  screen_name: string;
-};

package/Button/index.tsx

@@ -14,7 +14,7 @@ import {Colors, Spacing} from '../Consts';
 import styles from './styles';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
-import {ScreenInfo} from '../Application/types';
+import {TrackingInfo} from '../Application/types';
 
 const {
   ScreenContext,
@@ -76,6 +76,8 @@ export interface ButtonProps extends TouchableOpacityProps {
   onPress: () => void;
 
   trackingParams?: any;
+
+  component_id?: string;
 }
 
 const Button: FC<ButtonProps> = ({
@@ -89,6 +91,7 @@ const Button: FC<ButtonProps> = ({
   title = 'Button',
   onPress,
   trackingParams,
+  component_id,
   ...rest
 }) => {
   const {theme, config} = useContext(ApplicationContext);
@@ -102,7 +105,7 @@ const Button: FC<ButtonProps> = ({
     };
   }
 
-  const screenInfo = useContext<ScreenInfo>(ScreenContext);
+  const screenInfo = useContext<TrackingInfo>(ScreenContext);
   const getSizeStyle = () => {
     const styleSheet: {[key: string]: any} = styles;
     return styleSheet[size ?? 'small'];
@@ -306,6 +309,7 @@ const Button: FC<ButtonProps> = ({
         componentName: 'Button',
         params: trackingParams,
         state: type === 'disabled' ? 'disabled' : 'enabled',
+        component_id,
       }}>
       <TouchableOpacity
         {...rest}

package/CheckBox/index.tsx

@@ -5,6 +5,7 @@ import styles from './styles';
 import {ApplicationContext} from '../Application';
 import {Text} from '../Text';
 import {Icon} from '../Icon';
+import {TrackingInfo} from '../Application/types';
 
 const {
   ScreenContext,
@@ -23,7 +24,7 @@ const CheckBox: FC<CheckBoxProps> = ({
   const iconSource = indeterminate ? 'ic_minus' : 'ic_checked';
   let borderColor = theme.colors.text.default;
   let backgroundColor = theme.colors.background.surface;
-  const screenInfo = useContext<any>(ScreenContext);
+  const screenInfo = useContext<TrackingInfo>(ScreenContext);
 
   if (haveValue) {
     borderColor = theme.colors.primary;

package/IconButton/index.tsx

@@ -9,6 +9,7 @@ import {ApplicationContext} from '../Application';
 import {Colors} from '../Consts';
 import {Icon} from '../Icon';
 import styles from './styles';
+import {TrackingInfo} from '../Application/types';
 
 const {
   ScreenContext,
@@ -40,7 +41,7 @@ const IconButton: React.FC<IconButtonProps> = ({
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
-  const screenInfo = useContext<any>(ScreenContext);
+  const screenInfo = useContext<TrackingInfo>(ScreenContext);
 
   /**
    * get size icon button

package/Input/Input.tsx

@@ -13,7 +13,7 @@ import {InputProps} from './index';
 import {Icon} from '../Icon';
 import {checkTyping} from './utils';
 import {Loader} from '../Loader';
-import {ScreenInfo} from '../Application/types';
+import {TrackingInfo} from '../Application/types';
 const {
   ScreenContext,
 } = require('react-native/Libraries/Components/ScreenContext');
@@ -43,6 +43,7 @@ const Input = forwardRef(
       onPressIcon,
       style,
       trackingParams,
+      component_id,
       ...props
     }: InputProps,
     ref,
@@ -52,7 +53,7 @@ const Input = forwardRef(
     const [haveValue, setHaveValue] = useState(!!value || !!props.defaultValue);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
     const accessibilityLabel = `Input/${floatingValue ?? placeholder}`;
-    const screenInfo = useContext<ScreenInfo>(ScreenContext);
+    const screenInfo = useContext<TrackingInfo>(ScreenContext);
 
     const onClearText = () => {
       inputRef?.current?.clear();
@@ -172,6 +173,7 @@ const Input = forwardRef(
           componentName: 'Input',
           params: trackingParams,
           state: disabled ? 'disabled' : 'enabled',
+          component_id,
         }}>
         <View
           style={[style, styles.wrapper]}

package/Input/InputMoney.tsx

@@ -12,7 +12,7 @@ import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputMoneyProps} from './index';
 import {Icon} from '../Icon';
 import {formatMoneyToNumber, formatNumberToMoney} from './utils';
-import {ScreenInfo} from '../Application/types';
+import {TrackingInfo} from '../Application/types';
 const {
   ScreenContext,
 } = require('react-native/Libraries/Components/ScreenContext');
@@ -36,6 +36,7 @@ const InputMoney = forwardRef(
       style,
       trackingParams,
       defaultValue = '',
+      component_id,
       ...props
     }: InputMoneyProps,
     ref,
@@ -44,7 +45,7 @@ const InputMoney = forwardRef(
     const [focused, setFocused] = useState(false);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
     const accessibilityLabel = `InputMoney/${floatingValue}`;
-    const screenInfo = useContext<ScreenInfo>(ScreenContext);
+    const screenInfo = useContext<TrackingInfo>(ScreenContext);
 
     const validateText = (text: string) => {
       const valueFormat = formatMoneyToNumber(text, 'đ');
@@ -154,6 +155,7 @@ const InputMoney = forwardRef(
           componentName: 'InputMoney',
           params: trackingParams,
           state: 'enable',
+          component_id,
         }}>
         <View
           style={[style, styles.wrapper]}

package/Input/InputOTP.tsx

@@ -21,7 +21,7 @@ import styles from './styles';
 import {ErrorView, getBorderColor} from './common';
 import {ApplicationContext} from '../Application';
 import {Spacing} from '../Consts';
-import {ScreenInfo} from '../Application/types';
+import {TrackingInfo} from '../Application/types';
 const {
   ScreenContext,
 } = require('react-native/Libraries/Components/ScreenContext');
@@ -84,6 +84,7 @@ const InputOTP = forwardRef(
       dataType = 'number',
       trackingParams,
       style,
+      component_id,
       ...props
     }: InputOTPProps,
     ref,
@@ -94,7 +95,7 @@ const InputOTP = forwardRef(
     const inputRef = useRef<TextInput>(null);
     const {theme} = useContext(ApplicationContext);
     const accessibilityLabel = `InputOTP/${floatingValue ?? placeholder}`;
-    const screenInfo = useContext<ScreenInfo>(ScreenContext);
+    const screenInfo = useContext<TrackingInfo>(ScreenContext);
 
     useImperativeHandle(ref, () => ({
       onChangeText: (text: string) => {
@@ -235,6 +236,7 @@ const InputOTP = forwardRef(
           componentName: 'InputOTP',
           params: trackingParams,
           state: 'enable',
+          component_id,
         }}>
         <TouchableOpacity
           activeOpacity={1}

package/Input/InputSearch.tsx

@@ -12,7 +12,7 @@ import styles from './styles';
 import {Icon} from '../Icon';
 import {Text} from '../Text';
 import {checkTyping} from './utils';
-import {ScreenInfo} from '../Application/types';
+import {TrackingInfo} from '../Application/types';
 const {
   ScreenContext,
 } = require('react-native/Libraries/Components/ScreenContext');
@@ -34,6 +34,8 @@ const InputSearch = forwardRef(
       defaultValue,
       onPressButtonText,
       trackingParams,
+      component_id,
+
       ...props
     }: InputSearchProps,
     ref,
@@ -43,7 +45,7 @@ const InputSearch = forwardRef(
     const [haveValue, setHaveValue] = useState(!!value || !!defaultValue);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
     const accessibilityLabel = `InputMoney/${placeholder}`;
-    const screenInfo = useContext<ScreenInfo>(ScreenContext);
+    const screenInfo = useContext<TrackingInfo>(ScreenContext);
 
     const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
       setFocused(true);
@@ -131,6 +133,7 @@ const InputSearch = forwardRef(
           componentName: 'InputSearch',
           params: trackingParams,
           state: 'enabled',
+          component_id,
         }}>
         <View
           style={[style, styles.searchInputContainer]}

package/Input/index.tsx

@@ -82,6 +82,7 @@ export interface InputProps extends TextInputProps {
   onPressIcon?: () => void;
 
   trackingParams?: any;
+  component_id?: string;
 }
 
 type InputPropsWithoutSizeAndIcon = Omit<
@@ -130,6 +131,8 @@ export interface InputSearchProps extends TextInputProps {
   icon?: string;
 
   trackingParams?: any;
+
+  component_id?: string;
 }
 
 export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}

package/Radio/index.tsx

@@ -6,6 +6,7 @@ import {Text} from '../Text';
 import styles from './styles';
 import {ApplicationContext} from '../Application';
 import {Spacing} from '../Consts';
+import {TrackingInfo} from '../Application/types';
 
 const {
   ScreenContext,
@@ -41,7 +42,7 @@ const Radio: FC<RadioProps> = ({
     };
   }
 
-  const screenInfo = useContext<any>(ScreenContext);
+  const screenInfo = useContext<TrackingInfo>(ScreenContext);
 
   return (
     <ScreenContext.Provider

package/Switch/index.tsx

@@ -3,6 +3,7 @@ import {TouchableOpacity, View} from 'react-native';
 import {SwitchProps} from './types';
 import styles from './styles';
 import {Colors} from '../Consts';
+import {TrackingInfo} from '../Application/types';
 
 const {
   ScreenContext,
@@ -12,7 +13,7 @@ const Switch: FC<SwitchProps> = props => {
   const {value, onChange, disabled, style} = props;
   const circleBackgroundColor = value ? Colors.black_01 : Colors.black_03;
   const circleAlign = value ? 'flex-end' : 'flex-start';
-  const screenInfo = useContext<any>(ScreenContext);
+  const screenInfo = useContext<TrackingInfo>(ScreenContext);
 
   let backgroundColor = value ? Colors.green_03 : Colors.black_07;
   if (disabled) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.88.1-beta.3",
+    "version": "0.88.1-beta.5",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {