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

package/Application/NavigationContainer.tsx

@@ -1,5 +1,4 @@
-import React, {useContext, useEffect, useRef, useState} from 'react';
-import {BottomSheetModalProvider} from '@gorhom/bottom-sheet';
+import React, {useEffect, useRef, useState} from 'react';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import {
   NavigationContainer as ReactNavigationContainer,
@@ -12,7 +11,7 @@ import ModalScreen from './ModalScreen';
 import Navigator from './Navigator';
 import {getDialogOptions, getModalOptions, getStackOptions} from './utils';
 import {LocalizationObject, NavigationContainerProps} from './types';
-import {ApplicationContext, MiniAppContext} from './index';
+import {ApplicationContext} from './index';
 import kitLocalization from '../Assets/language.json';
 
 const Stack = createStackNavigator();
@@ -23,10 +22,11 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   options,
   maxApi,
   localization,
+  initialParams,
 }) => {
-  const context = useContext(MiniAppContext);
-  const navigationRef = React.useRef<NavigationContainerRef>(null);
-  const navigator = useRef(new Navigator(navigationRef));
+  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>();
 
@@ -57,7 +57,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
    * @param key
    */
   const translate = (key: string) => {
-    const language: 'vi' | 'en' = context?.language ?? 'vi';
+    const language: 'vi' | 'en' = 'vi';
     const mergedLocalization: LocalizationObject = {
       vi: {...localization?.vi, ...kitLocalization.vi},
       en: {...localization?.en, ...kitLocalization.en},
@@ -67,52 +67,53 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
 
   return (
     <SafeAreaProvider>
-      <BottomSheetModalProvider>
-        <ApplicationContext.Provider
-          value={{
-            navigator: navigator.current,
-            config: config.current,
-            theme,
-            showGrid,
-            translate,
-          }}>
-          <ReactNavigationContainer
-            theme={{
-              ...theme,
-              colors: {
-                ...theme.colors,
-                background: theme.colors.background.default,
-                card: theme.colors.background.surface,
-                text: theme.colors.text.default,
-                border: theme.colors.border.default,
-                notification: theme.colors.error.primary,
-              },
-            }}
-            ref={navigator.current?.ref}
-            independent={true}>
-            <Stack.Navigator initialRouteName="Stack" headerMode="screen">
-              <Stack.Screen
-                name="Stack"
-                component={StackScreen}
-                initialParams={{screen}}
-                options={{...getStackOptions(), ...options}}
-              />
-              <Stack.Screen
-                name="Dialog"
-                component={StackScreen}
-                options={getDialogOptions()}
-                initialParams={{screen}}
-              />
-              <Stack.Screen
-                name="Modal"
-                component={ModalScreen}
-                options={getModalOptions()}
-                initialParams={{screen}}
-              />
-            </Stack.Navigator>
-          </ReactNavigationContainer>
-        </ApplicationContext.Provider>
-      </BottomSheetModalProvider>
+      <ApplicationContext.Provider
+        value={{
+          navigator: navigator.current,
+          config: config.current,
+          theme,
+          showGrid,
+          translate,
+        }}>
+        <ReactNavigationContainer
+          theme={{
+            ...theme,
+            colors: {
+              ...theme.colors,
+              background: theme.colors.background.default,
+              card: theme.colors.background.surface,
+              text: theme.colors.text.default,
+              border: theme.colors.border.default,
+              notification: theme.colors.error.primary,
+            },
+          }}
+          ref={navigator.current?.ref}
+          onReady={() => {
+            isReady.current = true;
+          }}
+          independent={true}>
+          <Stack.Navigator initialRouteName="Stack" headerMode="screen">
+            <Stack.Screen
+              name="Stack"
+              component={StackScreen}
+              initialParams={{screen, initialParams}}
+              options={{...getStackOptions(), ...options}}
+            />
+            <Stack.Screen
+              name="Dialog"
+              component={StackScreen}
+              options={getDialogOptions()}
+              initialParams={{screen}}
+            />
+            <Stack.Screen
+              name="Modal"
+              component={ModalScreen}
+              options={getModalOptions()}
+              initialParams={{screen}}
+            />
+          </Stack.Navigator>
+        </ReactNavigationContainer>
+      </ApplicationContext.Provider>
     </SafeAreaProvider>
   );
 };

package/Application/Navigator.ts

@@ -8,13 +8,15 @@ import {
 
 class Navigator {
   ref?: any;
+  isReady?: any;
   toolkitConfig?: HeaderToolkitProps;
   maxApi?: any;
   dismissData?: any;
-  toolkitCallback?: (item: any) => void;
+  toolkitCallback?: (key: string) => void;
 
-  constructor(navigation: any) {
+  constructor(navigation: any, isReady: any) {
     this.ref = navigation;
+    this.isReady = isReady;
   }
 
   /**
@@ -22,7 +24,9 @@ class Navigator {
    * @param params
    */
   push = (params: ScreenParams) => {
-    this.ref.current.dispatch(StackActions.push('Stack', params));
+    if (this.isReady.current) {
+      this.ref.current.dispatch(StackActions.push('Stack', params));
+    }
   };
 
   /**
@@ -30,14 +34,18 @@ class Navigator {
    * @param params
    */
   replace = (params: ScreenParams) => {
-    this.ref.current.dispatch(StackActions.replace('Stack', params));
+    if (this.isReady.current) {
+      this.ref.current.dispatch(StackActions.replace('Stack', params));
+    }
   };
   /**
    * pop to dismiss a screen
    * @param count
    */
   pop = (count?: number) => {
-    this.ref.current.dispatch(StackActions.pop(count ?? 1));
+    if (this.isReady.current) {
+      this.ref.current.dispatch(StackActions.pop(count ?? 1));
+    }
   };
 
   /**
@@ -45,7 +53,9 @@ class Navigator {
    * @param params
    */
   present = (params: ScreenParams) => {
-    this.ref.current.dispatch(StackActions.push('Dialog', params));
+    if (this.isReady.current) {
+      this.ref.current.dispatch(StackActions.push('Dialog', params));
+    }
   };
 
   /**
@@ -53,7 +63,9 @@ class Navigator {
    * @param params
    */
   showModal = (params: ModalParams) => {
-    this.ref.current.dispatch(StackActions.push('Modal', params));
+    if (this.isReady.current) {
+      this.ref.current.dispatch(StackActions.push('Modal', params));
+    }
   };
 
   /**
@@ -61,19 +73,23 @@ class Navigator {
    * @param params
    */
   showBottomSheet = (params: BottomSheetParams) => {
-    this.ref.current.dispatch(
-      StackActions.push('Modal', {
-        ...params,
-        isBottomSheet: true,
-      }),
-    );
+    if (this.isReady.current) {
+      this.ref.current.dispatch(
+        StackActions.push('Modal', {
+          ...params,
+          isBottomSheet: true,
+        })
+      );
+    }
   };
 
   /**
    * pop all screen route
    */
   popToTop = () => {
-    this.ref.current.dispatch(StackActions.popToTop());
+    if (this.isReady.current) {
+      this.ref.current.dispatch(StackActions.popToTop());
+    }
   };
 
   /**
@@ -82,12 +98,14 @@ class Navigator {
    * @param params
    */
   navigate = (name: string, params: any) => {
-    this.ref.current.dispatch(
-      CommonActions.navigate({
-        name,
-        params,
-      }),
-    );
+    if (this.isReady.current) {
+      this.ref.current.dispatch(
+        CommonActions.navigate({
+          name,
+          params,
+        })
+      );
+    }
   };
 
   /**
@@ -95,18 +113,20 @@ class Navigator {
    * @param params
    */
   reset = (params: ScreenParams) => {
-    this.ref.current.dispatch(
-      CommonActions.reset({
-        index: 0,
-        routes: [
-          {
-            name: 'Stack',
-            key: `Stack_${new Date().getTime()}`,
-            params,
-          },
-        ],
-      }),
-    );
+    if (this.isReady.current) {
+      this.ref.current.dispatch(
+        CommonActions.reset({
+          index: 0,
+          routes: [
+            {
+              name: 'Stack',
+              key: `Stack_${new Date().getTime()}`,
+              params,
+            },
+          ],
+        })
+      );
+    }
   };
 
   /**
@@ -121,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,24 +1,124 @@
-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';
 
+/**
+ * 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 context = useContext(MiniAppContext);
+  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>({
+    traceIdLoad: undefined,
+    traceIdInteraction: undefined,
+    releaseLoad: undefined,
+    releaseInteraction: undefined,
+    timeoutLoad: undefined,
+    timeoutInteraction: undefined,
+  });
+  const interaction = useRef<any>();
+  const context = useContext<any>(MiniAppContext);
 
-  const {screen: Component, options}: ScreenParams = props.route.params;
+  const {screen: Component, options, initialParams} = props.route.params;
   const navigation = new Navigation(props.navigation, theme);
   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';
 
   /**
    * set options for screen
@@ -27,44 +127,139 @@ const StackScreen: React.FC<ScreenParams> = props => {
     if (options) {
       navigation.setOptions(options);
     }
+    navigator?.maxApi?.startTraceScreenLoad?.(screenName, (data: any) => {
+      tracked.current.traceIdLoad = data?.traceId;
+    });
+    navigator?.maxApi?.startTraceScreenInteraction?.(
+      screenName,
+      (data: any) => {
+        tracked.current.traceIdInteraction = data?.traceId;
+      }
+    );
   }, [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);
+    }
+
+    navigator?.maxApi?.of?.({screenName});
+    tracked.current.timeoutLoad = setTimeout(() => {
+      onScreenLoad();
+    }, 5000);
+    tracked.current.timeoutInteraction = setTimeout(() => {
+      onScreenInteraction();
+    }, 5000);
+
+    return () => {
+      clearTimeout(tracked.current.timeoutLoad);
+      clearTimeout(tracked.current.timeoutInteraction);
+      onScreenLoad();
+      onScreenInteraction();
     };
+  }, []);
 
-    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 onScreenLoad = () => {
+    if (!tracked.current?.releaseLoad) {
+      if (timeLoad.current === 0) {
+        timeLoad.current = endTime.current - startTime.current;
+      }
+      context.autoTracking?.({
+        appId: context.appId,
+        code: context.code,
+        buildNumber: context.buildNumber,
+        screenName,
+        componentName: 'Screen',
+        state: 'load',
+        duration: timeLoad.current,
+      });
+      navigator?.maxApi?.stopTrace?.(
+        tracked.current.traceIdLoad,
+        {value: timeLoad.current / 1000},
+        null
+      );
+      navigator?.maxApi?.showToastDebug?.({
+        appId: `auto - ${context.appId}`,
+        message: `${screenName} screen_load_time ${timeLoad.current}`,
+      });
+      if (timeLoad.current === 0 && context.enableAutoId) {
+        Alert.alert(screenName, "Can't get screen load time");
+      }
+      tracked.current.releaseLoad = true;
     }
+  };
 
-    navigator?.maxApi?.trackEvent?.('service_frame_displayed', {
-      ...tracking,
-      pre_screen_name,
-      trigger_id: '111378000000000000',
-    });
+  /**
+   * tracking for screen load
+   */
+  const onScreenInteraction = () => {
+    if (!tracked.current?.releaseInteraction) {
+      if (timeLoad.current === 0) {
+        timeLoad.current = endTime.current - startTime.current;
+      }
+      if (timeInteraction.current === 0 && context.enableAutoId) {
+        if (context.enableAutoId) {
+          Alert.alert(screenName, "Can't get screen interaction time");
+        }
+        timeInteraction.current = timeLoad.current;
+      }
 
-    return props.navigation.addListener('beforeRemove', () => {
-      navigator?.maxApi?.trackEvent?.('service_icon_clicked', {
-        ...tracking,
-        trigger_id: '111154000000000000',
-        icon_name: 'back',
+      context.autoTracking?.({
+        appId: context.appId,
+        code: context.code,
+        buildNumber: context.buildNumber,
+        screenName,
+        componentName: 'Screen',
+        state: 'interaction',
+        duration: timeInteraction.current - timeLoad.current,
       });
-    });
-  }, []);
+      navigator?.maxApi?.stopTrace?.(
+        tracked.current.traceIdInteraction,
+        {value: timeInteraction.current / 1000},
+        null
+      );
+      navigator?.maxApi?.showToastDebug?.({
+        appId: `auto - ${context.appId}`,
+        message: `${screenName} screen_interaction_time ${timeInteraction.current}`,
+      });
+      tracked.current.releaseInteraction = true;
+    }
+  };
 
   return (
-    <>
-      <Component heightHeader={heightHeader} {...params} />
+    <ScreenContext.Provider
+      value={{
+        screenName,
+        onElementLoad: () => {
+          clearTimeout(timeoutLoad.current);
+          endTime.current = Date.now();
+          interaction.current?.cancel?.();
+          interaction.current = InteractionManager.runAfterInteractions(() => {
+            timeInteraction.current = Date.now() - startTime.current;
+          });
+          timeoutLoad.current = setTimeout(() => {
+            if (timeLoad.current === 0) {
+              timeLoad.current = endTime.current - startTime.current;
+            }
+          }, 2000);
+        },
+      }}>
+      <Component
+        heightHeader={heightHeader}
+        {...data}
+        onScreenLoad={onScreenLoad}
+        onScreenInteraction={onScreenInteraction}
+      />
       {showGrid && <GridSystem />}
-    </>
+    </ScreenContext.Provider>
   );
 };
 

package/Application/index.ts

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