@momo-kits/foundation 0.157.2-test.1 → 0.157.3-beta.20

package/Application/BottomSheet.tsx

@@ -29,6 +29,7 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 import layoutStyles from '../Layout/styles';
+import { version } from '../package.json';
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const { theme, navigator } = useContext(ApplicationContext);
@@ -54,10 +55,40 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     useDivider = true,
     footerComponent,
     leftOptions,
-  }: BottomSheetParams = props.route.params;
+    screen_name,
+    componentName,
+    componentLabel,
+    description,
+    title,
+  } = props as BottomSheetParams;
 
   const translateY = useSharedValue(heightDevice);
 
+  /**
+   * Fire auto_popup_displayed tracking event on mount
+   */
+  useEffect(() => {
+    if (typeof context?.autoTracking !== 'function') {
+      return;
+    }
+
+    context.autoTracking({
+      ...context,
+      eventName: 'auto_popup_displayed',
+      screen_name: screen_name ?? context.screenName,
+      miniapp_version: context.miniapp_version,
+      tracking_source: 1,
+      app_id: context.appId,
+      feature_code: context.feature_code,
+      kits_version: version,
+      component_name: componentName,
+      component_label: componentLabel,
+      description,
+      title,
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const openAnimation = useCallback(() => {
     translateY.value = withTiming(0, {
       duration: 350,

package/Application/ModalScreen.tsx

@@ -1,14 +1,14 @@
 import React, { useCallback, useContext, useEffect, useRef } from 'react';
 import {
   Animated,
+  BackHandler,
   Easing,
   KeyboardAvoidingView,
+  Modal as ModalRN,
   Platform,
   Pressable,
   StyleSheet,
   View,
-  Modal as ModalRN,
-  BackHandler,
 } from 'react-native';
 
 import { ApplicationContext, MiniAppContext } from '../Context';
@@ -17,6 +17,7 @@ import Navigation from './Navigation';
 import { ModalParams } from './types';
 import BottomSheet from './BottomSheet';
 import { runOnJS } from 'react-native-reanimated';
+import { version } from '../package.json';
 
 const ModalScreen: React.FC<any> = props => {
   if (props.route?.params?.isBottomSheet) {
@@ -28,14 +29,44 @@ const ModalScreen: React.FC<any> = props => {
 const Modal: React.FC<ModalParams> = props => {
   const { navigator } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
-  const modalParams = useRef<any>(undefined);
   const {
     screen,
     barrierDismissible,
     modalStyle,
     useNativeModal = false,
+    screen_name,
+    componentName,
+    componentLabel,
+    description,
+    title,
   } = props.route.params;
   const Component = useRef(screen).current;
+
+  /**
+   * Fire auto_popup_displayed tracking event on mount
+   */
+  useEffect(() => {
+    if (typeof context?.autoTracking !== 'function') {
+      return;
+    }
+
+    context.autoTracking({
+      ...context,
+      eventName: 'auto_popup_displayed',
+      screen_name: screen_name ?? context.screenName,
+      miniapp_version: context.miniapp_version,
+      tracking_source: 1,
+      app_id: context.appId,
+      feature_code: context.feature_code,
+      kits_version: version,
+      component_name: componentName,
+      component_label: componentLabel,
+      description,
+      title,
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const opacity = useRef(new Animated.Value(0)).current;
   const scale = useRef(new Animated.Value(0.8)).current;
 
@@ -50,26 +81,6 @@ const Modal: React.FC<ModalParams> = props => {
     Container = ModalRN;
   }
 
-  if (screen != null) {
-    const screenProps = screen?.()?.props || {};
-    modalParams.current = {
-      title: screenProps?.title || '',
-      description: screenProps?.description || '',
-    };
-  }
-
-  useEffect(() => {
-    const item: any = {
-      screenName: params.screen,
-      componentName: 'Modal',
-      ...modalParams.current,
-    };
-    context?.autoTracking?.({
-      ...context,
-      ...item,
-    });
-  }, [context, params.screen]);
-
   useEffect(() => {
     Animated.parallel([
       Animated.timing(opacity, {

package/Application/types.ts

@@ -185,7 +185,35 @@ export type ScreenTrackingParams = {
   value2?: any;
 };
 
-export type ModalParams = {
+export type ModalTrackingProps = {
+  /**
+   * Optional. Screen name for auto_popup_displayed tracking event.
+   * Falls back to the current screen's name from context if not provided.
+   */
+  screen_name?: string;
+
+  /**
+   * Optional. Component name for auto_popup_displayed tracking event.
+   */
+  componentName?: string;
+
+  /**
+   * Optional. Component label for auto_popup_displayed tracking event.
+   */
+  componentLabel?: string;
+
+  /**
+   * Optional. Description for auto_popup_displayed tracking event.
+   */
+  description?: string;
+
+  /**
+   * Optional. Title for auto_popup_displayed tracking event.
+   */
+  title?: string;
+};
+
+export type ModalParams = ModalTrackingProps & {
   [key: string]: any;
   screen: React.ComponentType;
   onDismiss?: () => void;
@@ -194,7 +222,7 @@ export type ModalParams = {
   useNativeModal?: boolean;
 };
 
-export type BottomSheetParams = {
+export type BottomSheetParams = ModalTrackingProps & {
   [key: string]: any;
   screen: React.ComponentType;
   options: {

package/Badge/Badge.tsx

@@ -6,7 +6,6 @@ import { ApplicationContext, MiniAppContext } from '../Context';
 import { BadgeProps } from './types';
 import { Colors, Radius, Spacing } from '../Consts';
 import { Text, useScaleSize } from '../Text';
-import { useScreenRegistry } from '../Layout/utils';
 
 const Badge: FC<BadgeProps> = ({
   label = '',
@@ -14,7 +13,6 @@ const Badge: FC<BadgeProps> = ({
   backgroundColor,
   accessibilityLabel,
 }) => {
-  useScreenRegistry('Badge');
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const { componentId } = useComponentId('Badge', accessibilityLabel);

package/Badge/BadgeDot.tsx

@@ -3,10 +3,8 @@ import { View } from 'react-native';
 import { BadgeDotProps } from './types';
 import styles from './styles';
 import { MiniAppContext } from '../Context';
-import { useScreenRegistry } from '../Layout/utils';
 
 const BadgeDot: FC<BadgeDotProps> = ({ size = 'large', style }) => {
-  useScreenRegistry('BadgeDot');
   const context = useContext<any>(MiniAppContext);
   let dotStyle;
   let dotContainerStyle;

package/Badge/BadgeDotAnimation.tsx

@@ -2,12 +2,10 @@ import React, { useEffect, useRef } from 'react';
 import { Animated, View } from 'react-native';
 import { BadgeDotProps } from './types';
 import styles from './styles';
-import { useScreenRegistry } from '../Layout/utils';
 
 const DURATION = 500;
 
 const BadgeDotAnimation = ({ size, style }: BadgeDotProps) => {
-  useScreenRegistry('BadgeDotAnimation');
   // Refs for animated values
   const scaleAnim = useRef(new Animated.Value(1)).current;
   const waveScaleAnim = useRef(new Animated.Value(1)).current;

package/Badge/BadgeRibbon.tsx

@@ -7,7 +7,6 @@ import { ApplicationContext, MiniAppContext } from '../Context';
 import { Text } from '../Text';
 import { Colors } from '../Consts';
 import { Image } from '../Image';
-import { useScreenRegistry } from '../Layout/utils';
 
 const BadgeRibbon: FC<BadgeRibbonProps> = ({
   position = 'top_right',
@@ -15,7 +14,6 @@ const BadgeRibbon: FC<BadgeRibbonProps> = ({
   isRound = false,
   style = {},
 }) => {
-  useScreenRegistry('BadgeRibbon');
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const isRight = position === 'top_right' || position === 'bottom_right';

package/Button/index.tsx

@@ -28,7 +28,6 @@ import Reanimated, {
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
-import { useScreenRegistry } from '../Layout';
 
 const AnimationLinear = Animated.createAnimatedComponent(LinearGradient);
 
@@ -74,7 +73,6 @@ const Button: FC<ButtonProps> = ({
 }) => {
   const { theme, config } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
-  useScreenRegistry('Button');
   const skeleton = useContext(SkeletonContext);
   const animationRef = useRef<LottieView>(null);
   const pressAnim = useSharedValue(0);

package/CheckBox/index.tsx

@@ -10,7 +10,6 @@ import {
 } from '../Context';
 import { Text } from '../Text';
 import { Icon } from '../Icon';
-import { useScreenRegistry } from '../Layout';
 
 const CheckBox: FC<CheckBoxProps> = ({
   value,
@@ -25,7 +24,6 @@ const CheckBox: FC<CheckBoxProps> = ({
 }) => {
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
-  useScreenRegistry('CheckBox');
   const haveValue = value || indeterminate;
   const iconSource = indeterminate ? 'ic_minus' : 'ic_checked';
   let borderColor = theme.colors.text.default;

package/Context/index.ts

@@ -2,17 +2,8 @@ import { Platform } from 'react-native';
 import { createContext } from 'react';
 import { defaultContext } from '../Consts';
 
-export type ScreenRegistryContextType = {
-  register: (id: string, name: string) => void;
-  unregister: (id: string) => void;
-};
-
 const Context = createContext({});
 const ApplicationContext = createContext(defaultContext);
-const ScreenRegistryContext = createContext<ScreenRegistryContextType>({
-  register: () => {},
-  unregister: () => {},
-});
 
 const MiniAppContext = (Platform as any).MiniAppContext ?? Context;
 const ScreenContext = (Platform as any).ScreenContext ?? Context;
@@ -29,7 +20,6 @@ export {
   ApplicationContext,
   MiniAppContext,
   ScreenContext,
-  ScreenRegistryContext,
   ComponentContext,
   SkeletonContext,
   TrackingScopeContext,

package/Divider/DashDivider.tsx

@@ -3,7 +3,6 @@ import { View, ViewStyle } from 'react-native';
 import { ApplicationContext } from '../Context';
 import { Spacing } from '../Consts';
 import Svg, { Line } from 'react-native-svg';
-import { useScreenRegistry } from '../Layout/utils';
 
 export interface DashDividerProps {
   /**
@@ -13,7 +12,6 @@ export interface DashDividerProps {
 }
 
 const DashDivider: React.FC<DashDividerProps> = ({ style }) => {
-  useScreenRegistry('DashDivider');
   const { theme } = useContext(ApplicationContext);
   const borderColor = theme.colors.border.default;
 

package/Divider/index.tsx

@@ -3,7 +3,6 @@ import { View, ViewStyle } from 'react-native';
 import { ApplicationContext } from '../Context';
 import { Spacing } from '../Consts';
 import { DashDivider } from './DashDivider';
-import { useScreenRegistry } from '../Layout';
 
 export interface DividerProps {
   /**
@@ -26,9 +25,8 @@ const Divider: React.FC<DividerProps> = ({
 }) => {
   const { theme } = useContext(ApplicationContext);
 
-  useScreenRegistry('Divider');
-
   if (type === 'dash') return <DashDivider style={style} />;
+
   return (
     <View
       style={[

package/Icon/index.tsx

@@ -6,7 +6,6 @@ import { ApplicationContext, MiniAppContext } from '../Context';
 import { Image } from '../Image';
 import { StyleSheet } from 'react-native';
 import { Colors } from '../Consts';
-import { useScreenRegistry } from '../Layout';
 
 const Icon: React.FC<IconProps> = ({
   source = 'ic_back',
@@ -17,7 +16,6 @@ const Icon: React.FC<IconProps> = ({
 }) => {
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
-  useScreenRegistry('Icon');
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 

package/IconButton/index.tsx

@@ -43,7 +43,6 @@ const IconButton: React.FC<IconButtonProps> = ({
   params,
   ...rest
 }) => {
-  useScreenRegistry('IconButton');
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
 

package/Image/index.tsx

@@ -12,7 +12,6 @@ import { Skeleton } from '../Skeleton';
 import { Icon } from '../Icon';
 import { Styles } from '../Consts';
 import { ImageProps } from './types';
-import { useScreenRegistry } from '../Layout';
 
 type Status = 'success' | 'loading' | 'error';
 
@@ -37,7 +36,6 @@ const Image: React.FC<ImageProps> = ({
   const skeleton = useContext(SkeletonContext);
   const error = useRef(false);
   const [status, setStatus] = useState<Status>('success');
-  useScreenRegistry('Image');
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 

package/Input/Input.tsx

@@ -31,7 +31,6 @@ import {
   ComponentContext,
   MiniAppContext,
 } from '../Context';
-import { useScreenRegistry } from '../Layout/utils';
 
 /**
  * Input default component
@@ -73,7 +72,6 @@ const Input = forwardRef(
     }: InputProps,
     ref,
   ) => {
-    useScreenRegistry('Input');
     const { theme } = useContext(ApplicationContext);
     const context = useContext<any>(MiniAppContext);
     const scaledFontSize = useScaleSize(14);

package/Input/InputDropDown.tsx

@@ -17,7 +17,6 @@ import { InputDropDownProps } from './index';
 import { Text, useScaleSize } from '../Text';
 import styles from './styles';
 import { Spacing } from '../Consts';
-import { useScreenRegistry } from '../Layout/utils';
 
 const InputDropDown = ({
   value,
@@ -39,7 +38,6 @@ const InputDropDown = ({
   multiline,
   ...props
 }: InputDropDownProps) => {
-  useScreenRegistry('InputDropDown');
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const scaleHeight = useScaleSize(size === 'small' ? 48 : 56, 1.1);

package/Input/InputMoney.tsx

@@ -34,7 +34,6 @@ import { InputMoneyProps } from './index';
 import styles from './styles';
 import { formatNumberToMoney } from './utils';
 import SystemTextInput from './SystemTextInput';
-import { useScreenRegistry } from '../Layout/utils';
 
 const InputMoney = forwardRef(
   (
@@ -66,7 +65,6 @@ const InputMoney = forwardRef(
     }: InputMoneyProps,
     ref,
   ) => {
-    useScreenRegistry('InputMoney');
     const { theme } = useContext(ApplicationContext);
     const context = useContext<any>(MiniAppContext);
     const scaleHeight = useScaleSize(size === 'small' ? 48 : 56, 1.1);

package/Input/InputOTP.tsx

@@ -28,7 +28,6 @@ import {
   ComponentContext,
   MiniAppContext,
 } from '../Context';
-import { useScreenRegistry } from '../Layout/utils';
 
 const OTPCaret: FC<CaretProps> = ({ index, length }) => {
   const DURATION = 300;
@@ -91,7 +90,6 @@ const InputOTP = forwardRef(
     }: InputOTPProps,
     ref,
   ) => {
-    useScreenRegistry('InputOTP');
     const MAX_LENGTH = 10;
     const [value, setValue] = useState('');
     const [focused, setFocused] = useState(false);

package/Input/InputPhoneNumber.tsx

@@ -33,7 +33,6 @@ import styles from './styles';
 import SystemTextInput from './SystemTextInput';
 import { Image } from '../Image';
 import { Typography } from '../Text/types';
-import { useScreenRegistry } from '../Layout/utils';
 
 /**
  * Input default component
@@ -66,7 +65,6 @@ const InputPhoneNumber = forwardRef(
     }: InputPhoneNumberProps,
     ref,
   ) => {
-    useScreenRegistry('InputPhoneNumber');
     const { theme } = useContext(ApplicationContext);
     const context = useContext<any>(MiniAppContext);
     const scaleHeight = useScaleSize(size === 'small' ? 48 : 56, 1.1);

package/Input/InputSearch.tsx

@@ -28,7 +28,6 @@ import { InputRef, InputSearchProps } from './index';
 import styles from './styles';
 import { Styles } from '../Consts';
 import SystemTextInput from './SystemTextInput';
-import { useScreenRegistry } from '../Layout/utils';
 
 const TextTyping: FC<any> = ({
   data = [],
@@ -142,7 +141,6 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
   },
   ref,
 ) => {
-  useScreenRegistry('InputSearch');
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const scaledFontSize = useScaleSize(14);
@@ -350,6 +348,4 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
   );
 };
 
-const ForwardedInputSearch = forwardRef(InputSearch);
-ForwardedInputSearch.displayName = 'InputSearch';
-export default ForwardedInputSearch;
+export default forwardRef(InputSearch);

package/Input/InputTextArea.tsx

@@ -22,7 +22,6 @@ import { InputTextAreaProps } from './index';
 import styles from './styles';
 import SystemTextInput from './SystemTextInput';
 import { useComponentId } from '../Application';
-import { useScreenRegistry } from '../Layout/utils';
 
 const InputTextArea = forwardRef(
   (
@@ -48,7 +47,6 @@ const InputTextArea = forwardRef(
     }: InputTextAreaProps,
     ref,
   ) => {
-    useScreenRegistry('InputTextArea');
     const componentName = 'InputTextArea';
 
     const { componentId } = useComponentId(

package/Layout/Card.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { Dimensions, View, ViewProps } from 'react-native';
-import { useGridSystem, useScreenRegistry } from './utils';
+import { useGridSystem } from './utils';
 import { GridContextProps } from './types';
 import { GridContext, GridSystem } from './index';
 import { Image } from '../Image';
@@ -27,7 +27,6 @@ const Card: React.FC<CardProps> = ({
   useShadow = false,
   ...props
 }) => {
-  useScreenRegistry('Card');
   const { showGrid, theme } = useContext(ApplicationContext);
   const { numberOfColumns } = useGridSystem();
 

package/Layout/FloatingButton.tsx

@@ -14,7 +14,6 @@ import {
 } from 'react-native';
 import { ApplicationContext } from '../Context';
 import { Icon } from '../Icon';
-import { useScreenRegistry } from './utils';
 
 export interface FloatingButtonProps {
   label?: string;
@@ -39,7 +38,6 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
   animatedValue,
   bottom = 12,
 }: FloatingButtonProps) => {
-  useScreenRegistry('FloatingButton');
   const { theme } = useContext(ApplicationContext);
   const maxWidth = useRef(0);
   const minWidth = size === 'small' ? 36 : 48;

package/Layout/Item.tsx

@@ -2,7 +2,6 @@ import React, { useContext } from 'react';
 import { View, ViewProps } from 'react-native';
 import { GridContext } from './index';
 import { ApplicationContext, MiniAppContext } from '../Context';
-import { useScreenRegistry } from './utils';
 import styles from './styles';
 import { SpanNumber } from './types';
 
@@ -24,7 +23,6 @@ const Item: React.FC<ItemProps> = ({
   children,
   style,
 }) => {
-  useScreenRegistry('Item');
   const { showGrid } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const grid = useContext(GridContext);

package/Layout/ItemList.tsx

@@ -4,7 +4,6 @@ import Item from './Item';
 import { GridContext } from './index';
 import styles from './styles';
 import { SpanNumber } from './types';
-import { useScreenRegistry } from './utils';
 
 export interface ItemListProps extends FlatListProps<any> {
   /**
@@ -25,7 +24,6 @@ const ItemList = forwardRef(
     }: ItemListProps,
     ref,
   ) => {
-    useScreenRegistry('ItemList');
     const { gutterSize, numberOfColumns } = useContext(GridContext);
     const widthItem = (widthSpan ?? numberOfColumns) as SpanNumber;
     const numColumns = Math.floor(numberOfColumns / widthItem);

package/Layout/ItemSectionList.tsx

@@ -4,7 +4,6 @@ import Item from './Item';
 import { GridContext } from './index';
 import styles from './styles';
 import { SpanNumber } from './types';
-import { useScreenRegistry } from './utils';
 
 export interface ItemSectionListProps extends SectionListProps<any> {
   /**
@@ -20,7 +19,6 @@ const ItemSectionList: FC<ItemSectionListProps> = ({
   contentContainerStyle,
   ...props
 }) => {
-  useScreenRegistry('ItemSectionList');
   const { gutterSize, numberOfColumns } = useContext(GridContext);
   const widthItem = (widthSpan ?? numberOfColumns) as SpanNumber;
   const _renderItem = (item: any) => {