@momo-kits/foundation 0.81.2-beta.1 → 0.81.2-beta.3

package/Application/Components.tsx

@@ -151,7 +151,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   backgroundColor,
   accessibilityLabel = '',
 }) => {
-  const {navigator, appInfo} = useContext(ApplicationContext);
+  const {navigator} = useContext(ApplicationContext);
   const screen_name = navigator?.ref?.current?.getCurrentRoute().name;
 
   useEffect(() => {
@@ -166,9 +166,9 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   const goBack = () => {
     const canGoBack = navigator?.ref.current?.canGoBack();
 
-    if (appInfo) {
+    if (navigator?.trackingInfo) {
       navigator?.maxApi?.trackEvent('service_icon_clicked', {
-        ...appInfo,
+        ...navigator?.trackingInfo,
         screen_name,
         trigger_id: TRIGGER_ID,
         icon_name: 'back',

package/Application/ModalScreen.tsx

@@ -26,6 +26,9 @@ import {
 import {HeaderBackground, HeaderLeft, HeaderTitle} from './Components';
 
 const ModalScreen: React.FC<any> = props => {
+  /**
+   * dismiss callback when modal | bottom sheet dismissed
+   */
   useEffect(() => {
     return () => {
       props.route.params?.onDismiss?.();
@@ -39,10 +42,8 @@ const ModalScreen: React.FC<any> = props => {
 };
 
 const Modal: React.FC<ModalParams> = props => {
-  const TRIGGER_ID = '111012100000000000';
-  const {theme, navigator, appInfo} = useContext(ApplicationContext);
-  const {screen, barrierDismissible, modalName}: ModalParams =
-    props.route.params;
+  const {theme, navigator} = useContext(ApplicationContext);
+  const {screen, barrierDismissible, modalName} = props.route.params;
   const Component = useRef(screen).current;
   const navigation = new Navigation(props.navigation, theme);
   const params = {
@@ -52,35 +53,40 @@ const Modal: React.FC<ModalParams> = props => {
 
   delete params.screen;
 
-  const navigationRoutes = props.navigation.getState()?.routes || [];
-  const routesLength = navigationRoutes.length;
-  let screen_name = navigationRoutes?.[0]?.params?.screen?.name;
-  if (routesLength > 1) {
-    screen_name = navigationRoutes[routesLength - 2]?.params?.screen?.name;
-  }
-  const error_code = (screen as Function)?.()?.props?.information;
-
+  /**
+   * tracking
+   */
   useEffect(() => {
-    navigator?.maxApi?.trackEvent('service_component_displayed', {
-      ...appInfo,
-      screen_name,
-      trigger_id: TRIGGER_ID,
-      component_type: 'popup',
-      component_name: modalName,
-      error_code,
-    });
-
-    return () => {
-      navigator?.maxApi?.trackEvent('service_icon_clicked', {
-        ...appInfo,
+    if (navigator?.trackingInfo) {
+      const TRIGGER_ID = '111012100000000000';
+      const navigationRoutes = props.navigation.getState()?.routes || [];
+      const routesLength = navigationRoutes.length;
+      let screen_name = navigationRoutes?.[0]?.params?.screen?.name;
+      if (routesLength > 1) {
+        screen_name = navigationRoutes[routesLength - 2]?.params?.screen?.name;
+      }
+      const error_code = (screen as Function)?.()?.props?.information;
+      navigator?.maxApi?.trackEvent('service_component_displayed', {
+        ...navigator?.trackingInfo,
         screen_name,
-        trigger_id: '111154100000000001',
+        trigger_id: TRIGGER_ID,
         component_type: 'popup',
         component_name: modalName,
         error_code,
-        icon_name: 'close',
       });
-    };
+
+      return () => {
+        navigator?.maxApi?.trackEvent('service_icon_clicked', {
+          ...navigator?.trackingInfo,
+          screen_name,
+          trigger_id: '111154100000000001',
+          component_type: 'popup',
+          component_name: modalName,
+          error_code,
+          icon_name: 'close',
+        });
+      };
+    }
   }, []);
 
   const onDismiss = () => {
@@ -123,7 +129,7 @@ const Modal: React.FC<ModalParams> = props => {
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const insets = useSafeAreaInsets();
-  const {theme, navigator, appInfo} = useContext(ApplicationContext);
+  const {theme, navigator} = useContext(ApplicationContext);
   const [keyboardSnap, setKeyboardSnap] = useState(0);
   const {screen, options, snapPoint}: BottomSheetParams = props.route.params;
   const Component = useRef(screen).current;
@@ -214,7 +220,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
               />
             </View>
             <NavigationContainer
-              appInfo={appInfo}
+              trackingInfo={navigator?.trackingInfo}
               maxApi={navigator?.maxApi}
               theme={{
                 ...theme,
@@ -258,7 +264,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
                       icon="24_navigation_close"
                       backgroundColor="transparent"
                       useBorder={false}
-                      onPress={bottomSheetRef.current?.dismiss}
+                      onPress={() => bottomSheetRef.current?.dismiss()}
                       accessibilityLabel={'BottomSheet/Close'}
                     />
                   </HeaderRightAction>

package/Application/Navigation.ts

@@ -14,6 +14,10 @@ class Navigation {
     this.theme = theme;
   }
 
+  /**
+   * navigation options will be remove if used
+   * @param params
+   */
   private filterParams = (params: NavigationOptions) => {
     if (params.headerRight) {
       const headerRight = params.headerRight?.({}) as React.ReactElement;
@@ -27,6 +31,10 @@ class Navigation {
     return params;
   };
 
+  /**
+   * navigation setOptions support props NavigationOptions base on react-navigation options
+   * @param params
+   */
   setOptions = (params: NavigationOptions) => {
     if (__DEV__) {
       params = this.filterParams(params);

package/Application/NavigationContainer.tsx

@@ -23,13 +23,16 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   options,
   maxApi,
   localization,
-  appInfo,
+  trackingInfo,
 }) => {
   const navigationRef = React.useRef<NavigationContainerRef>(null);
   const navigator = useRef(new Navigator(navigationRef));
   const [showGrid, setShowGrid] = useState(false);
   const [language, setLanguage] = useState<'vi' | 'en'>('vi');
 
+  /**
+   * engine only shake to enable grid view
+   */
   useEffect(() => {
     const subscription = DeviceEventEmitter.addListener(
       'onChangeGrid',
@@ -38,10 +41,13 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
       },
     );
     return () => {
-      subscription.remove();
+      subscription?.remove?.();
     };
   }, []);
 
+  /**
+   * handle mini language & listen change
+   */
   useEffect(() => {
     maxApi?.getLanguage?.((lang: 'vi' | 'en') => {
       setLanguage(lang);
@@ -54,8 +60,16 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
     };
   }, []);
 
+  /**
+   * inject data for navigator
+   */
   navigator.current.maxApi = maxApi;
+  navigator.current.trackingInfo = trackingInfo;
 
+  /**
+   * translate
+   * @param key
+   */
   const translate = (key: string) => {
     const mergedLocalization: LocalizationObject = {
       vi: {...localization?.vi, ...kitLocalization.vi},
@@ -74,7 +88,6 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
             showGrid,
             language,
             translate,
-            appInfo,
           }}>
           <ReactNavigationContainer
             theme={{

package/Application/Navigator.ts

@@ -4,37 +4,62 @@ import {
   HeaderToolkitProps,
   ModalParams,
   ScreenParams,
+  TrackingInfo,
 } from './types';
 
 class Navigator {
   ref?: any;
   toolkitConfig?: HeaderToolkitProps;
   maxApi?: any;
+  trackingInfo?: TrackingInfo;
 
   constructor(navigation: any) {
     this.ref = navigation;
   }
 
+  /**
+   * push new stack screen
+   * @param params
+   */
   push = (params: ScreenParams) => {
     this.ref.current.dispatch(StackActions.push('Stack', params));
   };
 
+  /**
+   * replace current screen with new screen
+   * @param params
+   */
   replace = (params: ScreenParams) => {
     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));
   };
 
+  /**
+   * present a new screen, show from bottom iOS
+   * @param params
+   */
   present = (params: ScreenParams) => {
     this.ref.current.dispatch(StackActions.push('Dialog', params));
   };
 
+  /**
+   * show a modal popup
+   * @param params
+   */
   showModal = (params: ModalParams) => {
     this.ref.current.dispatch(StackActions.push('Modal', params));
   };
 
+  /**
+   * show a bottom sheet
+   * @param params
+   */
   showBottomSheet = (params: BottomSheetParams) => {
     this.ref.current.dispatch(
       StackActions.push('Modal', {
@@ -44,10 +69,17 @@ class Navigator {
     );
   };
 
+  /**
+   * pop all screen route
+   */
   popToTop = () => {
     this.ref.current.dispatch(StackActions.popToTop());
   };
 
+  /**
+   * reset a navigation flow with new screen
+   * @param params
+   */
   reset = (params: ScreenParams) => {
     this.ref.current.dispatch(
       CommonActions.reset({
@@ -63,6 +95,12 @@ class Navigator {
     );
   };
 
+  /**
+   * request max api for mini app
+   * @param func
+   * @param args
+   * @param callback
+   */
   requestApi = (func: any, args: any = [], callback: any) => {
     if (this.maxApi) {
       this.maxApi[func]?.(...args, callback);

package/Application/StackScreen.tsx

@@ -4,11 +4,9 @@ import Navigation from './Navigation';
 import {ApplicationContext} from './index';
 import {GridSystem} from '../Layout';
 
-const TRIGGER_ID = '111378000000000000';
-
 const StackScreen: React.FC<ScreenParams> = props => {
   const {screen: Component, options}: ScreenParams = props.route.params;
-  const {theme, showGrid, navigator, appInfo} = useContext(ApplicationContext);
+  const {theme, showGrid, navigator} = useContext(ApplicationContext);
   const navigation = new Navigation(props.navigation, theme);
 
   const params = {
@@ -18,17 +16,30 @@ const StackScreen: React.FC<ScreenParams> = props => {
 
   delete params.screen;
 
-  const navigationRoutes = props.navigation.getState()?.routes || [];
-  const routesLength = navigationRoutes.length;
-  let pre_screen_name = navigationRoutes?.[0]?.params?.screen?.name;
-  if (routesLength > 1) {
-    pre_screen_name = navigationRoutes[routesLength - 2]?.params?.screen?.name;
-  }
+  /**
+   * set options for screen
+   */
+  useLayoutEffect(() => {
+    if (options) {
+      navigation.setOptions(options);
+    }
+  }, [options]);
 
+  /**
+   * tracking for screen
+   */
   useEffect(() => {
-    if (appInfo) {
+    if (navigator?.trackingInfo) {
+      const TRIGGER_ID = '111378000000000000';
+      const navigationRoutes = props.navigation.getState()?.routes || [];
+      const routesLength = navigationRoutes.length;
+      let pre_screen_name = navigationRoutes?.[0]?.params?.screen?.name;
+      if (routesLength > 1) {
+        pre_screen_name =
+          navigationRoutes[routesLength - 2]?.params?.screen?.name;
+      }
       navigator?.maxApi?.trackEvent('service_frame_displayed', {
-        ...appInfo,
+        ...navigator?.trackingInfo,
         screen_name: Component.name,
         pre_screen_name,
         trigger_id: TRIGGER_ID,
@@ -36,12 +47,6 @@ const StackScreen: React.FC<ScreenParams> = props => {
     }
   }, []);
 
-  useLayoutEffect(() => {
-    if (options) {
-      navigation.setOptions(options);
-    }
-  }, [options]);
-
   return (
     <>
       <Component {...params} />

package/Application/types.ts

@@ -68,7 +68,6 @@ export type Context = {
   showGrid?: boolean;
   language?: 'vi' | 'en';
   translate?: (key: string) => string;
-  appInfo: MiniAppInfo;
 };
 
 export type LocalizationObject = {
@@ -80,11 +79,11 @@ export type LocalizationObject = {
   };
 };
 
-export type MiniAppInfo = {
+export type TrackingInfo = {
+  [key: string]: any;
   feature_code: string;
   app_id: string;
   build_number: number;
-  flow_partner_id?: string;
 };
 
 export type NavigationContainerProps = {
@@ -93,7 +92,7 @@ export type NavigationContainerProps = {
   theme: Theme;
   maxApi: any;
   localization?: LocalizationObject;
-  appInfo: MiniAppInfo;
+  trackingInfo?: TrackingInfo;
 };
 
 export type NavigationScreenProps = {

package/Application/utils.tsx

@@ -13,6 +13,9 @@ import {
 import {NavigationOptions, Theme} from './types';
 import {Colors} from '../Consts';
 
+/**
+ * default options for stack screen
+ */
 const getStackOptions = (): StackNavigationOptions => {
   return {
     headerTitleAlign: 'left',
@@ -24,6 +27,9 @@ const getStackOptions = (): StackNavigationOptions => {
   };
 };
 
+/**
+ * default options for dialog screen
+ */
 const getDialogOptions = (): StackNavigationOptions => {
   return {
     headerTitleAlign: 'left',
@@ -35,6 +41,9 @@ const getDialogOptions = (): StackNavigationOptions => {
   };
 };
 
+/**
+ * default options for modal screen
+ */
 const getModalOptions = (): StackNavigationOptions => {
   return {
     headerShown: false,
@@ -60,6 +69,9 @@ const getModalOptions = (): StackNavigationOptions => {
   };
 };
 
+/**
+ * build react-navigation options
+ */
 const getOptions = (params: NavigationOptions, theme: Theme) => {
   let options = {};
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.81.2-beta.1",
+    "version": "0.81.2-beta.3",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {