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

package/Application/Navigator.ts

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

package/Application/StackScreen.tsx

@@ -1,327 +1,70 @@
-import React, {useContext, useEffect, useLayoutEffect, useRef} from 'react';
-import {useHeaderHeight} from '@react-navigation/stack';
-import {Alert, InteractionManager, Linking, View} from 'react-native';
+import React, {useContext, useEffect, useLayoutEffect} from 'react';
 import {ScreenParams} from './types';
 import Navigation from './Navigation';
-import {ApplicationContext, MiniAppContext, ScreenContext} from './index';
+import {ApplicationContext, MiniAppContext} from './index';
 import {GridSystem} from '../Layout';
-import {Text} from '../Text';
-import {Colors, Radius, Spacing} from '../Consts';
+import {useHeaderHeight} from '@react-navigation/stack';
 
-/**
- * container for stack screen
- * @param props
- * @constructor
- */
 const StackScreen: React.FC<ScreenParams> = props => {
-  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 {theme, showGrid, navigator} = useContext(ApplicationContext);
+  const context = useContext(MiniAppContext);
 
-  const context = useContext<any>(MiniAppContext);
-  const {screen: Component, options, initialParams} = props.route.params;
-  const navigation = new Navigation(props.navigation);
+  const {screen: Component, options}: ScreenParams = props.route.params;
+  const navigation = new Navigation(props.navigation, theme);
   const heightHeader = useHeaderHeight();
 
-  const data = {
-    ...initialParams,
+  const params = {
     ...props.route.params,
     navigation,
   };
 
-  delete data.screen;
-  delete data.initialParams;
-
-  const screenName = Component?.name || Component?.type?.name || 'Invalid';
-  const routes = props.navigation.getState()?.routes || [];
+  delete params.screen;
 
   /**
    * set options for screen
    */
   useLayoutEffect(() => {
-    let defaultOptions = {
-      headerRight: {
-        type: 'toolkit',
-      },
-    };
     if (options) {
-      defaultOptions = {
-        ...defaultOptions,
-        ...options,
-      };
+      navigation.setOptions(options);
     }
-    navigation.setOptions(defaultOptions);
   }, [options]);
 
   /**
    * tracking for screen
    */
   useEffect(() => {
-    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?.();
+    const tracking = {
+      ...context,
+      screen_name: Component.name,
     };
-  }, []);
-
-  /**
-   * tracking for screen load
-   */
-  const onScreenLoad = () => {
-    if (!tracking.current?.releaseLoad) {
-      if (tracking.current.timeLoad === 0) {
-        tracking.current.timeLoad =
-          tracking.current.endTime - tracking.current.startTime;
-      }
 
-      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");
-      }
+    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 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;
-
-      /**
-       * 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',
+    navigator?.maxApi?.trackEvent?.('service_frame_displayed', {
+      ...tracking,
+      pre_screen_name,
+      trigger_id: '111378000000000000',
     });
 
-    /**
-     * debug toast
-     */
-    navigator?.maxApi?.showToastDebug?.({
-      appId: context.appId,
-      message: `${screenName} screen_navigated`,
-      type: 'ERROR',
+    return props.navigation.addListener('beforeRemove', () => {
+      navigator?.maxApi?.trackEvent?.('service_icon_clicked', {
+        ...tracking,
+        trigger_id: '111154000000000000',
+        icon_name: 'back',
+      });
     });
-  };
+  }, []);
 
   return (
-    <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}
-      />
+    <>
+      <Component heightHeader={heightHeader} {...params} />
       {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/index.ts

@@ -1,39 +1,41 @@
-import {Platform} from 'react-native';
-import {createContext} from 'react';
 import {NavigationContainer} from './NavigationContainer';
-import Localize from './Localize';
 import Screen from '../Layout/Screen';
 import {
   HeaderAnimated,
   HeaderBackground,
   HeaderCustom,
+  HeaderLeft,
+  HeaderRightAction,
   HeaderTitle,
+  HeaderToolkitAction,
   NavigationButton,
-  HeaderRightAction,
 } from './Components';
 import BottomTab from './BottomTab';
+import {createContext} from 'react';
 import {defaultContext} from '../Consts';
+import {MiniAppInfo} from './types';
 
-const Context = createContext({});
 const ApplicationContext = createContext(defaultContext);
-
-const MiniAppContext = (Platform as any).MiniAppContext ?? createContext({});
-const ScreenContext = (Platform as any).ScreenContext ?? createContext({});
-const ComponentContext = (Platform as any).ComponentContext ?? Context;
+const MiniAppContext = createContext<MiniAppInfo>({
+  appId: '',
+  buildNumber: 0,
+  code: '',
+  toolkitConfig: {},
+  fromCode: '',
+});
 
 export {
   ApplicationContext,
   MiniAppContext,
-  ScreenContext,
-  ComponentContext,
   NavigationContainer,
-  Localize,
   Screen,
   BottomTab,
   NavigationButton,
-  HeaderRightAction,
   HeaderTitle,
+  HeaderLeft,
   HeaderBackground,
+  HeaderRightAction,
+  HeaderToolkitAction,
   HeaderCustom,
   HeaderAnimated,
 };