@momo-kits/foundation 0.92.7-rc.21 → 0.92.7-rc.22

package/Application/StackScreen.tsx

@@ -1,29 +1,37 @@
 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, ScreenContext} from './index';
 import {GridSystem} from '../Layout';
-import {useHeaderHeight} from '@react-navigation/stack';
-import {Alert, InteractionManager} from 'react-native';
+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 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 = {
@@ -36,36 +44,68 @@ 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]);
 
   /**
    * tracking for screen
    */
   useEffect(() => {
-    if (__DEV__ && (!screenName || screenName == 'Invalid')) {
-      Alert.alert('Design system', `Unvalidated screen name "${screenName}" !`);
+    if (['Invalid', 'screen'].includes(screenName) && context.enableAutoId) {
+      setTimeout(() => {
+        navigator?.showModal({screen: EmptyScreen});
+      }, 300);
     }
 
-    navigator?.maxApi?.of?.({screenName});
+    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;
+      }
+    );
 
-    tracked.current.timeoutLoad = setTimeout(() => {
+    tracking.current.timeoutTracking = setTimeout(() => {
       onScreenLoad();
-    }, 5000);
-    tracked.current.timeoutInteraction = setTimeout(() => {
       onScreenInteraction();
     }, 5000);
 
     return () => {
       onScreenLoad();
       onScreenInteraction();
+      clearTimeout(tracking.current.timeoutTracking);
+      subscription?.();
     };
   }, []);
 
@@ -73,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,
@@ -82,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");
+      }
     }
   };
 
@@ -96,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,
@@ -105,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);
         },
       }}>
@@ -145,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;

package/Application/index.ts

@@ -1,16 +1,17 @@
 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,
-  HeaderRightAction,
   HeaderTitle,
   NavigationButton,
+  HeaderRightAction,
 } from './Components';
 import BottomTab from './BottomTab';
-import {createContext} from 'react';
 import {defaultContext} from '../Consts';
 
 const Context = createContext({});
@@ -26,12 +27,13 @@ export {
   ScreenContext,
   ComponentContext,
   NavigationContainer,
+  Localize,
   Screen,
   BottomTab,
   NavigationButton,
+  HeaderRightAction,
   HeaderTitle,
   HeaderBackground,
-  HeaderRightAction,
   HeaderCustom,
   HeaderAnimated,
 };

package/Application/types.ts

@@ -1,7 +1,9 @@
+import {EventArg} from '@react-navigation/core';
 import {StackNavigationOptions} from '@react-navigation/stack';
 import React from 'react';
-import {Animated, ScrollViewProps, ViewProps} from 'react-native';
+import {Animated, ViewProps} from 'react-native';
 import {PopupNotifyProps} from '../Popup/types';
+import Localize from './Localize';
 import Navigation from './Navigation';
 import Navigator from './Navigator';
 
@@ -70,16 +72,6 @@ export type Context = {
   translate?: (key: string) => string;
 };
 
-export type MiniAppInfo = {
-  [key: string]: any;
-  code: string;
-  appId: string;
-  buildNumber: number;
-  flowPartnerId?: string;
-  toolkitConfig?: any;
-  fromCode?: string;
-};
-
 export type LocalizationObject = {
   vi: {
     [key: string]: string;
@@ -94,8 +86,8 @@ export type NavigationContainerProps = {
   options?: NavigationOptions;
   theme: Theme;
   maxApi: any;
-  localization?: LocalizationObject;
   initialParams?: any;
+  localize: Localize;
 };
 
 export type NavigationScreenProps = {
@@ -110,26 +102,35 @@ export type ScreenParams = {
   options?: NavigationOptions;
 };
 
-export interface ModalParams extends ScreenParams {
+export type ModalParams = {
   [key: string]: any;
+  screen: React.ComponentType;
   onDismiss?: () => void;
   barrierDismissible?: boolean;
-}
+};
 
-export interface BottomSheetParams extends ScreenParams {
+export type BottomSheetParams = {
   [key: string]: any;
-  onDismiss?: () => void;
+  screen: React.ComponentType;
+  options: {
+    title: string;
+    surface?: boolean;
+  };
+  useNativeModal?: boolean;
   surface?: boolean;
-  footerComponent?: React.ReactNode;
-  scrollViewProps?: ScrollViewProps;
-}
+  onDismiss?: (type?: string) => void;
+  barrierDismissible?: boolean;
+  draggable?: boolean;
+  useBottomInset?: boolean;
+  keyboardVerticalOffset?: number;
+};
 
 export type NavigationButtonProps = {
   icon: string;
   tintColor?: string;
   useBorder?: boolean;
   onPress: () => void;
-  badgeType?: 'dot' | 'number';
+  badgeType?: 'dot' | 'number' | 'dot-animation';
   badgeValue?: number;
   accessibilityLabel?: string;
 };
@@ -137,7 +138,7 @@ export type NavigationButtonProps = {
 export type PinnedToolType = {
   key: string;
   badgeValue?: number;
-  badgeType?: 'number' | 'dot';
+  badgeType?: 'number' | 'dot' | 'dot-animation';
 };
 
 export type RuntimeToolType = {
@@ -146,19 +147,29 @@ export type RuntimeToolType = {
   key: string;
 };
 
-export interface NavigationOptions extends StackNavigationOptions {
+export interface NavigationOptions
+  extends Omit<StackNavigationOptions, 'headerRight'> {
   preventBack?: PopupNotifyProps;
   onPressLeftHeader?: () => void;
   surface?: boolean;
   hiddenBack?: boolean;
   customTitle?: TitleCustomProps;
-  toolkitParams?: {
-    pinnedTool?: PinnedToolType;
-    runtimeTools?: RuntimeToolType[];
-    preventClose?: PopupNotifyProps;
-  };
+  headerRight?: HeaderRightToolkit | HeaderRightActions | any;
 }
 
+export type HeaderRightToolkit = {
+  type?: 'toolkit';
+  pinnedTool?: PinnedToolType;
+  runtimeTools?: RuntimeToolType[];
+  preventClose?: PopupNotifyProps;
+  useMore?: boolean;
+};
+
+export type HeaderRightActions = {
+  type?: 'icon';
+  buttons: NavigationButtonProps[];
+};
+
 export interface HeaderBackProps extends NavigationButtonProps {
   preventBack?: PopupNotifyProps;
   onPressLeftHeader?: () => void;
@@ -199,6 +210,12 @@ export type BottomTabItemProps = {
   badgeLabel?: string | number;
   screen: Screen;
   options: NavigationOptions;
+  initialParams?: any;
+  listeners?: {
+    tabPress?: (e: EventArg<'tabPress', true, undefined>) => void;
+    focus?: (e: EventArg<'focus', false, unknown>) => void;
+    blur?: (e: EventArg<'blur', false, unknown>) => void;
+  };
 };
 
 export type BottomTabProps = {
@@ -207,8 +224,9 @@ export type BottomTabProps = {
   initialRouteName?: string;
   navigation: Navigation;
   listeners?: {
-    tabPress?: any;
-    focus?: any;
+    tabPress?: (e: EventArg<'tabPress', true, undefined>) => void;
+    focus?: (e: EventArg<'focus', false, unknown>) => void;
+    blur?: (e: EventArg<'blur', false, unknown>) => void;
   };
   floatingButton?: FloatingButtonProps;
 };

package/Application/utils.tsx

@@ -7,11 +7,13 @@ import {
   HeaderBackground,
   HeaderCustom,
   HeaderLeft,
+  HeaderRight,
   HeaderTitle,
-  HeaderToolkitAction,
 } from './Components';
-import {NavigationOptions, Theme} from './types';
+import {NavigationOptions} from './types';
 import {Colors} from '../Consts';
+import Navigation from './Navigation';
+import {LayoutChangeEvent} from 'react-native';
 
 /**
  * default options for stack screen
@@ -22,7 +24,7 @@ const getStackOptions = (): StackNavigationOptions => {
     headerTitle: HeaderTitle,
     headerBackground: (props: any) => <HeaderBackground {...props} />,
     headerLeft: (props: any) => <HeaderLeft {...props} />,
-    headerRight: (props: any) => <HeaderToolkitAction {...props} />,
+    headerRight: (props: any) => <HeaderRight {...props} />,
     headerTintColor: Colors.black_01,
   };
 };
@@ -72,33 +74,42 @@ const getModalOptions = (): StackNavigationOptions => {
 /**
  * build react-navigation options
  */
-const getOptions = (params: NavigationOptions, theme: Theme) => {
+const getOptions = (params: NavigationOptions, navigation?: Navigation) => {
   let options = {};
 
+  /**
+   * left header factory
+   */
   if (
     typeof params.onPressLeftHeader === 'function' ||
     params.preventBack !== undefined ||
     typeof params.hiddenBack === 'boolean'
   ) {
+    let headerLeft: any = (props: any) => (
+      <HeaderLeft
+        {...props}
+        preventBack={params.preventBack}
+        onPressLeftHeader={params.onPressLeftHeader}
+      />
+    );
+    if (params.hiddenBack) {
+      headerLeft = null;
+    }
     options = {
       ...options,
-      headerLeft: params.hiddenBack
-        ? null
-        : (props: any) => (
-            <HeaderLeft
-              {...props}
-              preventBack={params.preventBack}
-              onPressLeftHeader={params.onPressLeftHeader}
-            />
-          ),
+      headerLeft,
     };
   }
 
-  if (typeof params.surface == 'boolean') {
+  /**
+   * surface header style
+   */
+  if (typeof params.surface === 'boolean') {
+    console.warn('surface options is deprecated, headerType instead in screen');
     if (params.surface) {
       options = {
         ...options,
-        headerTintColor: theme.colors.text.default,
+        headerTintColor: Colors.black_17,
         headerBackground: () => (
           <HeaderBackground image={null} useSurface={true} />
         ),
@@ -112,7 +123,13 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
     }
   }
 
+  /**
+   * custom title
+   */
   if (params.customTitle) {
+    console.warn(
+      'customTitle options is deprecated, please used headerTitle instead'
+    );
     options = {
       ...options,
       headerTitleAlign: 'left',
@@ -122,12 +139,37 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
     };
   }
 
-  if (params.toolkitParams) {
+  /**
+   *  header right
+   */
+  if (params.headerRight) {
+    let headerRight: any = (props: any) => {
+      return (
+        <HeaderRight
+          {...props}
+          {...params.headerRight}
+          onLayout={(e: LayoutChangeEvent) => {
+            navigation?.onHeaderRightChange?.(e.nativeEvent.layout.width);
+          }}
+        />
+      );
+    };
+    if (typeof params.headerRight === 'function') {
+      headerRight = (props: any) => {
+        return (
+          <HeaderRight
+            {...props}
+            onLayout={(e: LayoutChangeEvent) => {
+              navigation?.onHeaderRightChange?.(e.nativeEvent.layout.width);
+            }}>
+            {params.headerRight(props)}
+          </HeaderRight>
+        );
+      };
+    }
     options = {
       ...options,
-      headerRight: (props: any) => {
-        return <HeaderToolkitAction {...params.toolkitParams} {...props} />;
-      },
+      headerRight,
     };
   }
 

package/Assets/icon_bank.json

@@ -503,4 +503,4 @@
   "zalopay_icon": {
     "uri": "https://static.momocdn.net/app/img/kits/icon_bank/zalopay_icon.png"
   }
-}
+}