@momo-kits/foundation 0.157.1-test.2 → 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/Popup/index.tsx

@@ -1,4 +1,4 @@
 import PopupNotify from './PopupNotify';
 import PopupPromotion from './PopupPromotion';
 
-export {PopupNotify, PopupPromotion};
+export { PopupNotify, PopupPromotion };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "0.157.1-test.2",
+  "version": "0.157.3-beta.20",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {},