@momo-kits/foundation 0.81.1-optimize.21 → 0.81.1-rc.0

package/Application/ModalScreen.tsx

@@ -21,10 +21,10 @@ const ModalScreen: React.FC<any> = props => {
 };
 
 const Modal: React.FC<ModalParams> = props => {
-  const {theme, navigator} = useContext(ApplicationContext);
+  const {navigator} = useContext(ApplicationContext);
   const {screen, barrierDismissible} = props.route.params;
   const Component = useRef(screen).current;
-  const navigation = new Navigation(props.navigation, theme);
+  const navigation = new Navigation(props.navigation);
   const params = {
     ...props.route.params,
     navigation,

package/Application/Navigation.ts

@@ -1,17 +1,13 @@
-import React from 'react';
 import {NavigationProp} from '@react-navigation/native';
-import {NavigationOptions, Theme} from './types';
-import {HeaderRightAction} from './index';
+import {NavigationOptions} from './types';
 import {getOptions} from './utils';
-import {HeaderToolkitAction} from './Components';
 
 class Navigation {
   instance: NavigationProp<any>;
-  readonly theme: Theme;
+  onHeaderRightChange?: (width: number) => void;
 
-  constructor(instance: any, theme: Theme) {
+  constructor(instance: any) {
     this.instance = instance;
-    this.theme = theme;
   }
 
   /**
@@ -19,16 +15,6 @@ class Navigation {
    * @param params
    */
   private filterParams = (params: NavigationOptions) => {
-    if (params.headerRight) {
-      const headerRight = params.headerRight?.({}) as React.ReactElement;
-      const type = headerRight?.type;
-      if (type !== HeaderRightAction && type !== HeaderToolkitAction) {
-        console.warn(
-          'headerRight contains element type of HeaderRightAction | HeaderToolkitAction, Please check again.',
-        );
-      }
-    }
-
     if (params.headerLeft) {
       console.warn('headerLeft not allow override render by design system!');
       delete params.headerLeft;
@@ -42,7 +28,7 @@ class Navigation {
    * @param params
    */
   setOptions = (params: NavigationOptions) => {
-    params = getOptions(this.filterParams(params), this.theme);
+    params = getOptions(this.filterParams(params), this);
     this.instance.setOptions(params);
   };
 }

package/Application/NavigationContainer.tsx

@@ -10,9 +10,9 @@ import StackScreen from './StackScreen';
 import ModalScreen from './ModalScreen';
 import Navigator from './Navigator';
 import {getDialogOptions, getModalOptions, getStackOptions} from './utils';
-import {LocalizationObject, NavigationContainerProps} from './types';
+import {NavigationContainerProps} from './types';
 import {ApplicationContext} from './index';
-import kitLocalization from '../Assets/language.json';
+import Localize from './Localize';
 
 const Stack = createStackNavigator();
 
@@ -21,15 +21,18 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   theme,
   options,
   maxApi,
-  localization,
   initialParams,
+  localize = new Localize({vi: {}, en: {}}),
 }) => {
   const navigationRef = useRef<NavigationContainerRef>(null);
   const isReady = useRef(false);
   const navigator = useRef(new Navigator(navigationRef, isReady));
   const [showGrid, setShowGrid] = useState(false);
   const config = useRef<any>();
-
+  /**
+   * inject data for navigator
+   */
+  navigator.current.maxApi = maxApi;
   /**
    * handle mini language & listen change
    * engine only shake to enable grid view
@@ -39,7 +42,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
       'onChangeGrid',
       enable => {
         setShowGrid(!!enable);
-      },
+      }
     );
 
     return () => {
@@ -47,22 +50,8 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
     };
   }, []);
 
-  /**
-   * inject data for navigator
-   */
-  navigator.current.maxApi = maxApi;
-
-  /**
-   * translate
-   * @param key
-   */
   const translate = (key: string) => {
-    const language: 'vi' | 'en' = 'vi';
-    const mergedLocalization: LocalizationObject = {
-      vi: {...localization?.vi, ...kitLocalization.vi},
-      en: {...localization?.en, ...kitLocalization.en},
-    };
-    return mergedLocalization?.[language]?.[key] || key;
+    return localize?.translate(key);
   };
 
   return (
@@ -87,7 +76,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
               notification: theme.colors.error.primary,
             },
           }}
-          ref={navigator.current?.ref}
+          ref={navigationRef}
           onReady={() => {
             isReady.current = true;
           }}

package/Application/Navigator.ts

@@ -12,7 +12,7 @@ class Navigator {
   toolkitConfig?: HeaderToolkitProps;
   maxApi?: any;
   dismissData?: any;
-  toolkitCallback?: (item: any) => void;
+  toolkitCallback?: (key: string) => void;
 
   constructor(navigation: any, isReady: any) {
     this.ref = navigation;
@@ -25,7 +25,7 @@ class Navigator {
    */
   push = (params: ScreenParams) => {
     if (this.isReady.current) {
-      this.ref.current.dispatch(StackActions.push('Stack', params));
+      this.ref.current?.dispatch?.(StackActions.push('Stack', params));
     }
   };
 
@@ -35,7 +35,7 @@ class Navigator {
    */
   replace = (params: ScreenParams) => {
     if (this.isReady.current) {
-      this.ref.current.dispatch(StackActions.replace('Stack', params));
+      this.ref.current?.dispatch?.(StackActions.replace('Stack', params));
     }
   };
   /**
@@ -44,7 +44,7 @@ class Navigator {
    */
   pop = (count?: number) => {
     if (this.isReady.current) {
-      this.ref.current.dispatch(StackActions.pop(count ?? 1));
+      this.ref.current?.dispatch?.(StackActions.pop(count ?? 1));
     }
   };
 
@@ -54,7 +54,7 @@ class Navigator {
    */
   present = (params: ScreenParams) => {
     if (this.isReady.current) {
-      this.ref.current.dispatch(StackActions.push('Dialog', params));
+      this.ref.current?.dispatch?.(StackActions.push('Dialog', params));
     }
   };
 
@@ -64,7 +64,7 @@ class Navigator {
    */
   showModal = (params: ModalParams) => {
     if (this.isReady.current) {
-      this.ref.current.dispatch(StackActions.push('Modal', params));
+      this.ref.current?.dispatch?.(StackActions.push('Modal', params));
     }
   };
 
@@ -74,11 +74,11 @@ class Navigator {
    */
   showBottomSheet = (params: BottomSheetParams) => {
     if (this.isReady.current) {
-      this.ref.current.dispatch(
+      this.ref.current?.dispatch?.(
         StackActions.push('Modal', {
           ...params,
           isBottomSheet: true,
-        }),
+        })
       );
     }
   };
@@ -88,7 +88,7 @@ class Navigator {
    */
   popToTop = () => {
     if (this.isReady.current) {
-      this.ref.current.dispatch(StackActions.popToTop());
+      this.ref.current?.dispatch?.(StackActions.popToTop());
     }
   };
 
@@ -99,11 +99,11 @@ class Navigator {
    */
   navigate = (name: string, params: any) => {
     if (this.isReady.current) {
-      this.ref.current.dispatch(
+      this.ref.current?.dispatch?.(
         CommonActions.navigate({
           name,
           params,
-        }),
+        })
       );
     }
   };
@@ -114,7 +114,7 @@ class Navigator {
    */
   reset = (params: ScreenParams) => {
     if (this.isReady.current) {
-      this.ref.current.dispatch(
+      this.ref.current?.dispatch?.(
         CommonActions.reset({
           index: 0,
           routes: [
@@ -124,7 +124,7 @@ class Navigator {
               params,
             },
           ],
-        }),
+        })
       );
     }
   };
@@ -141,9 +141,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,6 +1,6 @@
 import React, {useContext, useEffect, useLayoutEffect, useRef} from 'react';
 import {useHeaderHeight} from '@react-navigation/stack';
-import {InteractionManager, Linking, View} from 'react-native';
+import {Alert, InteractionManager, Linking, View} from 'react-native';
 import {ScreenParams} from './types';
 import Navigation from './Navigation';
 import {ApplicationContext, MiniAppContext, ScreenContext} from './index';
@@ -8,103 +8,30 @@ import {GridSystem} from '../Layout';
 import {Text} from '../Text';
 import {Colors, Radius, Spacing} from '../Consts';
 
-/**
- * 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>
-  );
-};
-
 /**
  * container for stack screen
  * @param props
  * @constructor
  */
 const StackScreen: React.FC<ScreenParams> = props => {
-  const {theme, showGrid, navigator} = useContext(ApplicationContext);
-  const startTime = useRef(Date.now());
-  const endTime = useRef(Date.now());
-  const timeLoad = useRef(0);
-  const timeInteraction = useRef(0);
-  const timeoutLoad = useRef<any>();
-  const tracked = useRef<any>({
-    releaseLoad: undefined,
-    releaseInteraction: undefined,
+  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 interaction = useRef<any>();
-  const context = useContext<any>(MiniAppContext);
 
+  const context = useContext<any>(MiniAppContext);
   const {screen: Component, options, initialParams} = props.route.params;
-  const navigation = new Navigation(props.navigation, theme);
+  const navigation = new Navigation(props.navigation);
   const heightHeader = useHeaderHeight();
 
   const data = {
@@ -117,14 +44,24 @@ const StackScreen: React.FC<ScreenParams> = props => {
   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]);
 
   /**
@@ -137,17 +74,38 @@ const StackScreen: React.FC<ScreenParams> = props => {
       }, 300);
     }
 
-    navigator?.maxApi?.of?.({screenName});
-    tracked.current.timeoutLoad = setTimeout(() => {
+    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();
-    }, 5000);
-    tracked.current.timeoutInteraction = setTimeout(() => {
       onScreenInteraction();
     }, 5000);
 
     return () => {
       onScreenLoad();
       onScreenInteraction();
+      clearTimeout(tracking.current.timeoutTracking);
+      subscription?.();
     };
   }, []);
 
@@ -155,8 +113,12 @@ const StackScreen: React.FC<ScreenParams> = props => {
    * tracking for screen load
    */
   const onScreenLoad = () => {
-    clearTimeout(tracked.current.timeoutLoad);
-    if (!tracked.current?.releaseLoad) {
+    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,
@@ -164,13 +126,26 @@ const StackScreen: React.FC<ScreenParams> = props => {
         screenName,
         componentName: 'Screen',
         state: 'load',
-        duration: timeLoad.current,
+        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: `auto - ${context.appId}`,
-        message: `${screenName} screen_load_time ${timeLoad.current}`,
+        appId: context.appId,
+        message: `${screenName} screen_load_time ${tracking.current.timeLoad}`,
+        type: 'ERROR',
       });
-      tracked.current.releaseLoad = true;
+      if (tracking.current.timeLoad <= 0 && context.enableAutoId) {
+        Alert.alert(screenName, "Can't get screen load time");
+      }
     }
   };
 
@@ -178,8 +153,15 @@ const StackScreen: React.FC<ScreenParams> = props => {
    * tracking for screen load
    */
   const onScreenInteraction = () => {
-    clearTimeout(tracked.current.timeoutInteraction);
-    if (!tracked.current?.releaseInteraction) {
+    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,
@@ -187,32 +169,74 @@ const StackScreen: React.FC<ScreenParams> = props => {
         screenName,
         componentName: 'Screen',
         state: 'interaction',
-        duration: timeInteraction.current - timeLoad.current,
+        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: `auto - ${context.appId}`,
-        message: `${screenName} screen_interaction_time ${timeInteraction.current}`,
+        appId: context.appId,
+        message: `${screenName} screen_interaction_time ${tracking.current.timeInteraction}`,
+        type: 'ERROR',
       });
-      tracked.current.releaseInteraction = true;
+      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 (
     <ScreenContext.Provider
       value={{
         screenName,
         onElementLoad: () => {
-          endTime.current = Date.now();
-          interaction.current?.cancel?.();
-          interaction.current = InteractionManager.runAfterInteractions(() => {
-            timeInteraction.current = Date.now() - startTime.current;
-          });
-          clearTimeout(timeoutLoad.current);
-          timeoutLoad.current = setTimeout(() => {
-            if (timeLoad.current === 0) {
-              timeLoad.current = endTime.current - startTime.current;
+          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);
         },
       }}>
@@ -227,4 +251,78 @@ const StackScreen: React.FC<ScreenParams> = props => {
   );
 };
 
+/**
+ * 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>
+  );
+};
+
 export default StackScreen;