@momo-kits/foundation 0.81.49 → 0.81.51-beta.0

package/Application/Navigator.ts

@@ -1,79 +1,170 @@
-import {CommonActions, StackActions} from '@react-navigation/native';
+import {
+  CommonActions,
+  NavigationContainerRef,
+  StackActions,
+} from '@react-navigation/native';
 import {
   BottomSheetParams,
   HeaderToolkitProps,
   ModalParams,
+  NavigatorCallbackParamsType,
   ScreenParams,
 } from './types';
+import React from 'react';
+import {
+  NavigationActionCallbackErrorEnum,
+  NavigationActionCallbackStatusEnum,
+} from './constants';
 
 class Navigator {
-  ref?: any;
+  ref: React.RefObject<NavigationContainerRef>;
+  isReady: React.MutableRefObject<boolean>;
   toolkitConfig?: HeaderToolkitProps;
   maxApi?: any;
-  dismissData?: any;
-  toolkitCallback?: (item: any) => void;
+  dismissData?: unknown;
+  toolkitCallback?: (key: string) => void;
 
-  constructor(navigation: any) {
+  constructor(
+    navigation: React.RefObject<NavigationContainerRef>,
+    isReady: React.MutableRefObject<boolean>
+  ) {
     this.ref = navigation;
+    this.isReady = isReady;
   }
 
+  private validateRefAndRunAction = (params: {
+    action: (navigationRef: NavigationContainerRef) => void;
+    callback?: (params: NavigatorCallbackParamsType) => void;
+  }) => {
+    try {
+      if (this.isReady.current && this.ref.current) {
+        params.action(this.ref.current);
+        params.callback?.({status: NavigationActionCallbackStatusEnum.Success});
+      } else {
+        params.callback?.({
+          status: NavigationActionCallbackStatusEnum.Failed,
+          type: NavigationActionCallbackErrorEnum.NotReady,
+        });
+      }
+    } catch (error) {
+      params.callback?.({
+        status: NavigationActionCallbackStatusEnum.Failed,
+        type: NavigationActionCallbackErrorEnum.Error,
+      });
+    }
+  };
+
   /**
    * push new stack screen
    * @param params
    */
-  push = (params: ScreenParams) => {
-    this.ref.current.dispatch(StackActions.push('Stack', params));
+  push = (
+    params: ScreenParams,
+    callback?: (params: NavigatorCallbackParamsType) => void
+  ) => {
+    this.validateRefAndRunAction({
+      action: navigationRef => {
+        navigationRef.dispatch(StackActions.push('Stack', params));
+      },
+      callback,
+    });
   };
 
   /**
    * replace current screen with new screen
    * @param params
    */
-  replace = (params: ScreenParams) => {
-    this.ref.current.dispatch(StackActions.replace('Stack', params));
+  replace = (
+    params: ScreenParams,
+    callback?: (params: NavigatorCallbackParamsType) => void
+  ) => {
+    this.validateRefAndRunAction({
+      action: navigationRef => {
+        navigationRef.dispatch(StackActions.replace('Stack', params));
+      },
+      callback,
+    });
   };
   /**
    * pop to dismiss a screen
    * @param count
    */
-  pop = (count?: number) => {
-    this.ref.current.dispatch(StackActions.pop(count ?? 1));
+  pop = (
+    count?: number,
+    callback?: (params: NavigatorCallbackParamsType) => void
+  ) => {
+    this.validateRefAndRunAction({
+      action: navigationRef => {
+        navigationRef.dispatch(StackActions.pop(count ?? 1));
+      },
+      callback,
+    });
   };
 
   /**
    * present a new screen, show from bottom iOS
    * @param params
    */
-  present = (params: ScreenParams) => {
-    this.ref.current.dispatch(StackActions.push('Dialog', params));
+  present = (
+    params: ScreenParams,
+    callback?: (params: NavigatorCallbackParamsType) => void
+  ) => {
+    this.validateRefAndRunAction({
+      action: navigationRef => {
+        navigationRef.dispatch(StackActions.push('Dialog', params));
+      },
+      callback,
+    });
   };
 
   /**
    * show a modal popup
    * @param params
    */
-  showModal = (params: ModalParams) => {
-    this.ref.current.dispatch(StackActions.push('Modal', params));
+  showModal = (
+    params: ModalParams,
+    callback?: (params: NavigatorCallbackParamsType) => void
+  ) => {
+    this.validateRefAndRunAction({
+      action: navigationRef => {
+        navigationRef.dispatch(StackActions.push('Modal', params));
+      },
+      callback,
+    });
   };
 
   /**
    * show a bottom sheet
    * @param params
+   * @param callback
    */
-  showBottomSheet = (params: BottomSheetParams) => {
-    this.ref.current.dispatch(
-      StackActions.push('Modal', {
-        ...params,
-        isBottomSheet: true,
-      }),
-    );
+  showBottomSheet = (
+    params: BottomSheetParams,
+    callback?: (params: NavigatorCallbackParamsType) => void
+  ) => {
+    this.validateRefAndRunAction({
+      action: navigationRef => {
+        navigationRef.dispatch(
+          StackActions.push('Modal', {
+            ...params,
+            isBottomSheet: true,
+          })
+        );
+      },
+      callback,
+    });
   };
 
   /**
    * pop all screen route
    */
-  popToTop = () => {
-    this.ref.current.dispatch(StackActions.popToTop());
+  popToTop = (callback?: (params: NavigatorCallbackParamsType) => void) => {
+    this.validateRefAndRunAction({
+      action: navigationRef => {
+        navigationRef.dispatch(StackActions.popToTop());
+      },
+      callback,
+    });
   };
 
   /**
@@ -81,39 +172,56 @@ class Navigator {
    * @param name
    * @param params
    */
-  navigate = (name: string, params: any) => {
-    this.ref.current.dispatch(
-      CommonActions.navigate({
-        name,
-        params,
-      }),
-    );
+  navigate = (
+    name: string,
+    params: any,
+    callback?: (params: NavigatorCallbackParamsType) => void
+  ) => {
+    this.validateRefAndRunAction({
+      action: navigationRef => {
+        navigationRef.dispatch(
+          CommonActions.navigate({
+            name,
+            params,
+          })
+        );
+      },
+      callback,
+    });
   };
 
   /**
    * reset a navigation flow with new screen
    * @param params
    */
-  reset = (params: ScreenParams) => {
-    this.ref.current.dispatch(
-      CommonActions.reset({
-        index: 0,
-        routes: [
-          {
-            name: 'Stack',
-            key: `Stack_${new Date().getTime()}`,
-            params,
-          },
-        ],
-      }),
-    );
+  reset = (
+    params: ScreenParams,
+    callback?: (params: NavigatorCallbackParamsType) => void
+  ) => {
+    this.validateRefAndRunAction({
+      action: navigationRef => {
+        navigationRef.dispatch(
+          CommonActions.reset({
+            index: 0,
+            routes: [
+              {
+                name: 'Stack',
+                key: `Stack_${new Date().getTime()}`,
+                params,
+              },
+            ],
+          })
+        );
+      },
+      callback,
+    });
   };
 
   /**
    * dismiss a feature data
    * @param data
    */
-  setDismissData = (data: any) => {
+  setDismissData = (data: unknown) => {
     this.dismissData = data;
   };
 
@@ -121,9 +229,7 @@ class Navigator {
    * set callback function for toolkit
    * @param callback
    */
-  setToolkitCallback = (
-    callback: (item: {key: string; action: string}) => void,
-  ) => {
+  setToolkitCallback = (callback: (key: string) => void) => {
     this.toolkitCallback = callback;
   };
 }

package/Application/StackScreen.tsx

@@ -1,70 +1,327 @@
-import React, {useContext, useEffect, useLayoutEffect} from 'react';
+import React, {useContext, useEffect, useLayoutEffect, useRef} from 'react';
+import {useHeaderHeight} from '@react-navigation/stack';
+import {Alert, InteractionManager, Linking, View} from 'react-native';
 import {ScreenParams} from './types';
 import Navigation from './Navigation';
-import {ApplicationContext, MiniAppContext} from './index';
+import {ApplicationContext, MiniAppContext, ScreenContext} from './index';
 import {GridSystem} from '../Layout';
-import {useHeaderHeight} from '@react-navigation/stack';
+import {Text} from '../Text';
+import {Colors, Radius, Spacing} from '../Consts';
 
+/**
+ * container for stack screen
+ * @param props
+ * @constructor
+ */
 const StackScreen: React.FC<ScreenParams> = props => {
-  const {theme, showGrid, navigator} = useContext(ApplicationContext);
-  const context = useContext(MiniAppContext);
+  const {showGrid, navigator} = useContext(ApplicationContext);
+  const tracking = useRef<any>({
+    timeoutLoad: undefined,
+    timeoutInteraction: undefined,
+    timeoutTracking: undefined,
+    startTime: Date.now(),
+    endTime: Date.now(),
+    traceIdLoad: undefined,
+    traceIdInteraction: undefined,
+    releaseLoad: undefined,
+    releaseInteraction: undefined,
+    timeLoad: 0,
+    timeInteraction: 0,
+  });
 
-  const {screen: Component, options}: ScreenParams = props.route.params;
-  const navigation = new Navigation(props.navigation, theme);
+  const context = useContext<any>(MiniAppContext);
+  const {screen: Component, options, initialParams} = props.route.params;
+  const navigation = new Navigation(props.navigation);
   const heightHeader = useHeaderHeight();
 
-  const params = {
+  const data = {
+    ...initialParams,
     ...props.route.params,
     navigation,
   };
 
-  delete params.screen;
+  delete data.screen;
+  delete data.initialParams;
+
+  const screenName = Component?.name || Component?.type?.name || 'Invalid';
+  const routes = props.navigation.getState()?.routes || [];
 
   /**
    * set options for screen
    */
   useLayoutEffect(() => {
+    let defaultOptions = {
+      headerRight: {
+        type: 'toolkit',
+      },
+    };
     if (options) {
-      navigation.setOptions(options);
+      defaultOptions = {
+        ...defaultOptions,
+        ...options,
+      };
     }
+    navigation.setOptions(defaultOptions);
   }, [options]);
 
   /**
    * tracking for screen
    */
   useEffect(() => {
-    const tracking = {
-      ...context,
-      screen_name: Component.name,
+    if (['Invalid', 'screen'].includes(screenName) && context.enableAutoId) {
+      setTimeout(() => {
+        navigator?.showModal({screen: EmptyScreen});
+      }, 300);
+    }
+
+    const subscription = props.navigation?.addListener?.('focus', () => {
+      navigator?.maxApi?.of?.({screenName});
+      navigator?.maxApi?.getDataObserver('CURRENT_SCREEN', (data: any) => {
+        let preScreenName = data?.screenName;
+        if (routes?.length > 1) {
+          const screen = routes?.[routes?.length - 2]?.params?.screen;
+          preScreenName = screen?.name || screen?.type?.name || 'Invalid';
+        }
+        onScreenNavigated(preScreenName);
+        navigator?.maxApi?.setObserver('CURRENT_SCREEN', {screenName});
+      });
+    });
+    navigator?.maxApi?.startTraceScreenLoad?.(screenName, (data: any) => {
+      tracking.current.traceIdLoad = data?.traceId;
+    });
+    navigator?.maxApi?.startTraceScreenInteraction?.(
+      screenName,
+      (data: any) => {
+        tracking.current.traceIdInteraction = data?.traceId;
+      }
+    );
+
+    tracking.current.timeoutTracking = setTimeout(() => {
+      onScreenLoad();
+      onScreenInteraction();
+    }, 5000);
+
+    return () => {
+      onScreenLoad();
+      onScreenInteraction();
+      clearTimeout(tracking.current.timeoutTracking);
+      subscription?.();
     };
+  }, []);
+
+  /**
+   * tracking for screen load
+   */
+  const onScreenLoad = () => {
+    if (!tracking.current?.releaseLoad) {
+      if (tracking.current.timeLoad === 0) {
+        tracking.current.timeLoad =
+          tracking.current.endTime - tracking.current.startTime;
+      }
 
-    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;
+      context.autoTracking?.({
+        appId: context.appId,
+        code: context.code,
+        buildNumber: context.buildNumber,
+        screenName,
+        componentName: 'Screen',
+        state: 'load',
+        duration: tracking.current.timeLoad,
+      });
+      navigator?.maxApi?.stopTrace?.(
+        tracking.current.traceIdLoad,
+        {value: tracking.current.timeLoad / 1000},
+        null
+      );
+      tracking.current.releaseLoad = true;
+
+      /**
+       * debug
+       */
+      navigator?.maxApi?.showToastDebug?.({
+        appId: context.appId,
+        message: `${screenName} screen_load_time ${tracking.current.timeLoad}`,
+        type: 'ERROR',
+      });
+      if (tracking.current.timeLoad <= 0 && context.enableAutoId) {
+        Alert.alert(screenName, "Can't get screen load time");
+      }
     }
+  };
 
-    navigator?.maxApi?.trackEvent?.('service_frame_displayed', {
-      ...tracking,
-      pre_screen_name,
-      trigger_id: '111378000000000000',
-    });
+  /**
+   * tracking for screen load
+   */
+  const onScreenInteraction = () => {
+    if (!tracking.current?.releaseInteraction) {
+      if (tracking.current.timeLoad === 0) {
+        tracking.current.timeLoad =
+          tracking.current.endTime - tracking.current.startTime;
+      }
+      if (tracking.current.timeInteraction === 0) {
+        tracking.current.timeInteraction = tracking.current.timeLoad;
+      }
+
+      context.autoTracking?.({
+        appId: context.appId,
+        code: context.code,
+        buildNumber: context.buildNumber,
+        screenName,
+        componentName: 'Screen',
+        state: 'interaction',
+        duration: tracking.current.timeInteraction - tracking.current.timeLoad,
+        totalDuration: tracking.current.timeInteraction,
+      });
+      navigator?.maxApi?.stopTrace?.(
+        tracking.current.traceIdInteraction,
+        {value: tracking.current.timeInteraction / 1000},
+        null
+      );
+      tracking.current.releaseInteraction = true;
 
-    return props.navigation.addListener('beforeRemove', () => {
-      navigator?.maxApi?.trackEvent?.('service_icon_clicked', {
-        ...tracking,
-        trigger_id: '111154000000000000',
-        icon_name: 'back',
+      /**
+       * debug toast
+       */
+      navigator?.maxApi?.showToastDebug?.({
+        appId: context.appId,
+        message: `${screenName} screen_interaction_time ${tracking.current.timeInteraction}`,
+        type: 'ERROR',
       });
+      if (tracking.current.timeInteraction <= 0 && context.enableAutoId) {
+        Alert.alert(screenName, "Can't get screen interaction time");
+      }
+    }
+  };
+
+  /**
+   * tracking for screen navigated
+   */
+  const onScreenNavigated = (preScreenName: string) => {
+    context.autoTracking?.({
+      appId: context.appId,
+      code: context.code,
+      buildNumber: context.buildNumber,
+      preScreenName,
+      screenName,
+      componentName: 'Screen',
+      state: 'navigated',
     });
-  }, []);
+
+    /**
+     * debug toast
+     */
+    navigator?.maxApi?.showToastDebug?.({
+      appId: context.appId,
+      message: `${screenName} screen_navigated`,
+      type: 'ERROR',
+    });
+  };
 
   return (
-    <>
-      <Component heightHeader={heightHeader} {...params} />
+    <ScreenContext.Provider
+      value={{
+        screenName,
+        onElementLoad: () => {
+          clearTimeout(tracking.current.timeoutLoad);
+          tracking.current.endTime = Date.now();
+          tracking.current.timeoutInteraction?.cancel?.();
+          tracking.current.timeoutInteraction =
+            InteractionManager.runAfterInteractions(() => {
+              tracking.current.timeInteraction =
+                Date.now() - tracking.current.startTime;
+            });
+          tracking.current.timeoutLoad = setTimeout(() => {
+            if (tracking.current.timeLoad === 0) {
+              tracking.current.timeLoad =
+                tracking.current.endTime - tracking.current.startTime;
+            }
+            onScreenLoad();
+            onScreenInteraction();
+          }, 2000);
+        },
+      }}>
+      <Component
+        heightHeader={heightHeader}
+        {...data}
+        onScreenLoad={onScreenLoad}
+        onScreenInteraction={onScreenInteraction}
+      />
       {showGrid && <GridSystem />}
-    </>
+    </ScreenContext.Provider>
+  );
+};
+
+/**
+ * Empty screen for unvalidated screen name
+ * @constructor
+ */
+const EmptyScreen: React.FC = () => {
+  return (
+    <View
+      style={{
+        backgroundColor: Colors.black_01,
+        padding: Spacing.M,
+        borderRadius: Radius.M,
+      }}>
+      <Text typography={'header_m_bold'}>Unvalidated screen name</Text>
+      <Text
+        typography={'description_default_regular'}
+        style={{paddingVertical: Spacing.S}}>
+        Your screen has not been rendered because Platform has not detected the
+        screen name. Please migrate to support this feature.
+      </Text>
+      <Text typography={'header_default'} style={{width: '100%'}}>
+        Possible fixes:
+      </Text>
+      <View style={{marginLeft: Spacing.S}}>
+        <Text typography={'body_default_regular'}>1. Off webpack config</Text>
+        <Text typography={'body_default_regular'}>
+          2. Screen name refactoring
+        </Text>
+        <View style={{marginLeft: Spacing.S}}>
+          <Text
+            typography={'description_default_regular'}
+            style={{marginBottom: Spacing.S}}>
+            - Với các screen push/import dạng arrow function ={'>'} đổi thành
+            named function
+          </Text>
+          <Text
+            typography={'description_default_regular'}
+            style={{marginBottom: Spacing.S}}>
+            - Với các screen import dạng High Order Component ={'>'} rename
+            generic function thành named function
+          </Text>
+          <Text
+            typography={'description_default_regular'}
+            style={{marginBottom: Spacing.S}}>
+            - Với Tab Navigator, Platform sẽ lấy Tab Container làm screen name.
+            Trong trường hợp miniapp muốn track riêng action cho từng tab, tham
+            khảo theo docs
+          </Text>
+        </View>
+      </View>
+      <Text typography={'header_s_semibold'}>More information: </Text>
+      <Text
+        typography={'body_default_regular'}
+        color={Colors.blue_01}
+        onPress={() => {
+          Linking.openURL(
+            'https://gitlab.mservice.com.vn/momo-platform/mini-app/-/tree/vn.momo.uikits/dev/app'
+          );
+        }}>
+        Mini App: vn.momo.uikits/dev
+      </Text>
+      <Text
+        typography={'body_default_regular'}
+        color={Colors.blue_01}
+        onPress={() => {
+          Linking.openURL(
+            'https://docs.google.com/presentation/d/1bIFoh8gRXb6hsnGJz4O1Kxg4_oNikB1KuuEt2wULCDM/edit?usp=sharing'
+          );
+        }}>
+        https://docs.google.com/presentation/d/1bIFoh8gRXb6hsnGJz4O1Kxg4_oNikB1KuuEt2wULCDM/edit?usp=sharing
+      </Text>
+    </View>
   );
 };
 

package/Application/constants.ts

@@ -0,0 +1,9 @@
+export enum NavigationActionCallbackStatusEnum {
+  Success = 'success',
+  Failed = 'failed',
+}
+
+export enum NavigationActionCallbackErrorEnum {
+  NotReady = 'not_ready',
+  Error = 'error',
+}