@momo-kits/foundation 0.89.5 → 0.89.6-rc.2

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/index.ts

@@ -1,41 +1,39 @@
+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 = 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,
+  Localize,
   Screen,
   BottomTab,
   NavigationButton,
+  HeaderRightAction,
   HeaderTitle,
-  HeaderLeft,
   HeaderBackground,
-  HeaderRightAction,
-  HeaderToolkitAction,
   HeaderCustom,
   HeaderAnimated,
 };

package/Application/types.ts

@@ -1,9 +1,11 @@
-import {Animated} from 'react-native';
+import {EventArg} from '@react-navigation/core';
 import {StackNavigationOptions} from '@react-navigation/stack';
 import React from 'react';
-import Navigator from './Navigator';
+import {Animated, ViewProps} from 'react-native';
 import {PopupNotifyProps} from '../Popup/types';
+import Localize from './Localize';
 import Navigation from './Navigation';
+import Navigator from './Navigator';
 
 type Screen = React.ComponentType<NavigationScreenProps>;
 
@@ -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,7 +86,8 @@ export type NavigationContainerProps = {
   options?: NavigationOptions;
   theme: Theme;
   maxApi: any;
-  localization?: LocalizationObject;
+  initialParams?: any;
+  localize: Localize;
 };
 
 export type NavigationScreenProps = {
@@ -109,32 +102,43 @@ 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;
-  snapPoint?: '30%' | '50%' | '70%' | '90%' | 'content';
-  indicatorColor?: string;
-}
+  screen: React.ComponentType;
+  options: {
+    title: string;
+    surface?: boolean;
+  };
+  useNativeModal?: boolean;
+  surface?: boolean;
+  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;
 };
 
 export type PinnedToolType = {
   key: string;
   badgeValue?: number;
-  badgeType?: 'number' | 'dot';
+  badgeType?: 'number' | 'dot' | 'dot-animation';
 };
 
 export type RuntimeToolType = {
@@ -143,18 +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[];
-  };
+  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;
@@ -162,9 +177,8 @@ export interface HeaderBackProps extends NavigationButtonProps {
 
 export type HeaderBackgroundProps = {
   image?: string | null;
-  backgroundColor?: string | null;
   animatedValue?: Animated.Value;
-  useBorder?: boolean;
+  useSurface?: boolean;
 };
 
 export type TitleCustomProps = {
@@ -183,20 +197,25 @@ export type HeaderToolkitProps = {
   configs: any[];
 };
 
-export type HeaderAnimatedProps = {
+export interface HeaderAnimatedProps extends ViewProps {
   animatedValue: Animated.Value;
   image: string;
-  onPress?: () => void;
-};
+}
 
 export type BottomTabItemProps = {
   name: string;
   label: string;
   icon: string;
   showDot?: boolean;
-  badgeLabel?: string;
+  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 = {
@@ -205,12 +224,22 @@ 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;
+};
+
+export type FloatingButtonProps = {
+  container?: React.ReactNode;
+  icon: string | React.ReactNode;
+  label: string;
+  onPress: () => void;
 };
 
 export type AnimatedHeader = {
   type: 'default' | 'surface';
   component?: (props?: any) => React.ReactElement;
+  headerTitle?: (props?: any) => React.ReactElement;
 };