@momo-kits/foundation 0.81.1-beta.6 → 0.81.1-optimize.1

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} = props.route.params;
   const Component = useRef(screen).current;
   const navigation = new Navigation(props.navigation, theme);
   const params = {
@@ -52,37 +53,6 @@ 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;
-
-  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,
-        screen_name,
-        trigger_id: '111154100000000001',
-        component_type: 'popup',
-        component_name: modalName,
-        error_code,
-        icon_name: 'close',
-      });
-    };
-  }, []);
-
   const onDismiss = () => {
     if (barrierDismissible) {
       return;
@@ -104,7 +74,7 @@ const Modal: React.FC<ModalParams> = props => {
             style={styles.modalSpaceVertical}
             onPress={() => onDismiss()}
           />
-          <View style={styles.modalContent} accessibilityLabel={'Modal'}>
+          <View style={styles.modalContent}>
             <Component {...params} />
           </View>
           <Pressable
@@ -123,9 +93,10 @@ 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 {screen, options, snapPoint, indicatorColor}: BottomSheetParams =
+    props.route.params;
   const Component = useRef(screen).current;
   const navigation = new Navigation(props.navigation, theme);
   const params = {
@@ -196,15 +167,8 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         bottomInset={Platform.OS === 'ios' ? bottomInset : 0}
         handleComponent={null}
         backdropComponent={backdropComponent}>
-        <BottomSheetView accessibilityLabel={'BottomSheet'}>
-          <View
-            style={[
-              styles.sheetContainer,
-              {
-                backgroundColor,
-                paddingBottom: Math.min(insets.bottom, 20) + Spacing.S,
-              },
-            ]}>
+        <BottomSheetView>
+          <View style={[styles.sheetContainer, {backgroundColor}]}>
             <View style={styles.indicatorContainer}>
               <View
                 style={[
@@ -214,7 +178,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
               />
             </View>
             <NavigationContainer
-              appInfo={appInfo}
               maxApi={navigator?.maxApi}
               theme={{
                 ...theme,
@@ -226,23 +189,11 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
                 ...{
                   headerLeft: (props: any) => {
                     if (props.canGoBack) {
-                      return (
-                        <HeaderLeft
-                          {...props}
-                          useBorder={false}
-                          backgroundColor="transparent"
-                          accessibilityLabel={'BottomSheet/'}
-                        />
-                      );
+                      return <HeaderLeft {...props} useBorder={false} />;
                     }
                   },
                   headerTitle: (props: any) => {
-                    return (
-                      <HeaderTitle
-                        {...props}
-                        accessibilityLabel={'BottomSheet/'}
-                      />
-                    );
+                    return <HeaderTitle {...props} />;
                   },
                   headerTintColor: theme.colors.text.default,
                   headerBackground: () => (
@@ -256,15 +207,19 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
                     <NavigationButton
                       {...props}
                       icon="24_navigation_close"
-                      backgroundColor="transparent"
                       useBorder={false}
-                      onPress={bottomSheetRef.current?.dismiss}
-                      accessibilityLabel={'BottomSheet/Close'}
+                      onPress={() => bottomSheetRef.current?.dismiss()}
                     />
                   </HeaderRightAction>
                 ),
               }}
             />
+            <View
+              style={{
+                height: Math.min(insets.bottom, 20),
+                backgroundColor: indicatorColor ?? backgroundColor,
+              }}
+            />
           </View>
         </BottomSheetView>
       </BottomSheetModal>

package/Application/Navigation.ts

@@ -14,6 +14,10 @@ class Navigation {
     this.theme = theme;
   }
 
+  /**
+   * navigation options filter by design system rule
+   * @param params
+   */
   private filterParams = (params: NavigationOptions) => {
     if (params.headerRight) {
       const headerRight = params.headerRight?.({}) as React.ReactElement;
@@ -24,14 +28,21 @@ class Navigation {
         );
       }
     }
+
+    if (params.headerLeft) {
+      console.warn('headerLeft not allow override render by design system!');
+      delete params.headerLeft;
+    }
+
     return params;
   };
 
+  /**
+   * navigation setOptions support props NavigationOptions base on react-navigation options
+   * @param params
+   */
   setOptions = (params: NavigationOptions) => {
-    if (__DEV__) {
-      params = this.filterParams(params);
-    }
-    params = getOptions(params, this.theme);
+    params = getOptions(this.filterParams(params), this.theme);
     this.instance.setOptions(params);
   };
 }

package/Application/NavigationContainer.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useRef, useState} from 'react';
+import React, {useContext, useEffect, useRef, useState} from 'react';
 import {BottomSheetModalProvider} from '@gorhom/bottom-sheet';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import {
@@ -6,13 +6,13 @@ import {
   NavigationContainerRef,
 } from '@react-navigation/native';
 import {createStackNavigator} from '@react-navigation/stack';
+import {DeviceEventEmitter} from 'react-native';
 import StackScreen from './StackScreen';
 import ModalScreen from './ModalScreen';
 import Navigator from './Navigator';
 import {getDialogOptions, getModalOptions, getStackOptions} from './utils';
 import {LocalizationObject, NavigationContainerProps} from './types';
-import {ApplicationContext} from './index';
-import {DeviceEventEmitter} from 'react-native';
+import {ApplicationContext, MiniAppContext} from './index';
 import kitLocalization from '../Assets/language.json';
 
 const Stack = createStackNavigator();
@@ -23,13 +23,17 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   options,
   maxApi,
   localization,
-  appInfo,
 }) => {
+  const context = useContext(MiniAppContext);
   const navigationRef = React.useRef<NavigationContainerRef>(null);
   const navigator = useRef(new Navigator(navigationRef));
   const [showGrid, setShowGrid] = useState(false);
-  const [language, setLanguage] = useState<'vi' | 'en'>('vi');
+  const config = useRef<any>();
 
+  /**
+   * handle mini language & listen change
+   * engine only shake to enable grid view
+   */
   useEffect(() => {
     const subscription = DeviceEventEmitter.addListener(
       'onChangeGrid',
@@ -37,26 +41,23 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
         setShowGrid(!!enable);
       },
     );
-    return () => {
-      subscription.remove();
-    };
-  }, []);
 
-  useEffect(() => {
-    maxApi?.getLanguage?.((lang: 'vi' | 'en') => {
-      setLanguage(lang);
-    });
-    const listener = maxApi?.observer?.('language', (lang: 'vi' | 'en') => {
-      setLanguage(lang);
-    });
     return () => {
-      listener?.();
+      subscription?.remove?.();
     };
   }, []);
 
+  /**
+   * inject data for navigator
+   */
   navigator.current.maxApi = maxApi;
 
+  /**
+   * translate
+   * @param key
+   */
   const translate = (key: string) => {
+    const language: 'vi' | 'en' = context?.language ?? 'vi';
     const mergedLocalization: LocalizationObject = {
       vi: {...localization?.vi, ...kitLocalization.vi},
       en: {...localization?.en, ...kitLocalization.en},
@@ -69,12 +70,11 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
       <BottomSheetModalProvider>
         <ApplicationContext.Provider
           value={{
-            theme,
             navigator: navigator.current,
+            config: config.current,
+            theme,
             showGrid,
-            language,
             translate,
-            appInfo,
           }}>
           <ReactNavigationContainer
             theme={{

package/Application/Navigator.ts

@@ -10,31 +10,56 @@ class Navigator {
   ref?: any;
   toolkitConfig?: HeaderToolkitProps;
   maxApi?: any;
+  dismissData?: any;
+  toolkitCallback?: (item: any) => void;
 
   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,31 @@ class Navigator {
     );
   };
 
+  /**
+   * pop all screen route
+   */
   popToTop = () => {
     this.ref.current.dispatch(StackActions.popToTop());
   };
 
+  /**
+   * navigate
+   * @param name
+   * @param params
+   */
+  navigate = (name: string, params: any) => {
+    this.ref.current.dispatch(
+      CommonActions.navigate({
+        name,
+        params,
+      }),
+    );
+  };
+
+  /**
+   * reset a navigation flow with new screen
+   * @param params
+   */
   reset = (params: ScreenParams) => {
     this.ref.current.dispatch(
       CommonActions.reset({
@@ -63,35 +109,22 @@ class Navigator {
     );
   };
 
-  requestApi = (func: any, args: any = [], callback: any) => {
-    if (this.maxApi) {
-      this.maxApi[func]?.(...args, callback);
-    } else {
-      const instance: any = global;
-      instance?.miniAppApi?.dispatch?.(func, ...args, callback);
-    }
+  /**
+   * dismiss a feature data
+   * @param data
+   */
+  setDismissData = (data: any) => {
+    this.dismissData = data;
   };
 
-  getToolkit = async (): Promise<HeaderToolkitProps | undefined> => {
-    return new Promise(resolve => {
-      if (this.toolkitConfig) {
-        resolve(this.toolkitConfig);
-        return;
-      }
-      this.requestApi('getToolkit', [undefined], (result: boolean) => {
-        if (result) {
-          this.requestApi('getToolkitConfig', [undefined], (config: any) => {
-            this.toolkitConfig = {
-              ...config?.utilityToolConfig,
-              appCode: config?.appCode,
-            };
-            resolve(this.toolkitConfig);
-          });
-        } else {
-          resolve(undefined);
-        }
-      });
-    });
+  /**
+   * set callback function for toolkit
+   * @param callback
+   */
+  setToolkitCallback = (
+    callback: (item: {key: string; action: string}) => void,
+  ) => {
+    this.toolkitCallback = callback;
   };
 }
 

package/Application/StackScreen.tsx

@@ -1,15 +1,17 @@
 import React, {useContext, useEffect, useLayoutEffect} from 'react';
 import {ScreenParams} from './types';
 import Navigation from './Navigation';
-import {ApplicationContext} from './index';
+import {ApplicationContext, MiniAppContext} from './index';
 import {GridSystem} from '../Layout';
-
-const TRIGGER_ID = '111378000000000000';
+import {useHeaderHeight} from '@react-navigation/stack';
 
 const StackScreen: React.FC<ScreenParams> = props => {
+  const {theme, showGrid, navigator} = useContext(ApplicationContext);
+  const context = useContext(MiniAppContext);
+
   const {screen: Component, options}: ScreenParams = props.route.params;
-  const {theme, showGrid, navigator, appInfo} = useContext(ApplicationContext);
   const navigation = new Navigation(props.navigation, theme);
+  const heightHeader = useHeaderHeight();
 
   const params = {
     ...props.route.params,
@@ -18,33 +20,49 @@ 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;
-  }
-
-  useEffect(() => {
-    if (appInfo) {
-      navigator?.maxApi?.trackEvent('service_frame_displayed', {
-        ...appInfo,
-        screen_name: Component.name,
-        pre_screen_name,
-        trigger_id: TRIGGER_ID,
-      });
-    }
-  }, []);
-
+  /**
+   * set options for screen
+   */
   useLayoutEffect(() => {
     if (options) {
       navigation.setOptions(options);
     }
   }, [options]);
 
+  /**
+   * tracking for screen
+   */
+  useEffect(() => {
+    const tracking = {
+      ...context,
+      screen_name: Component.name,
+    };
+
+    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;
+    }
+
+    navigator?.maxApi?.trackEvent?.('service_frame_displayed', {
+      ...tracking,
+      pre_screen_name,
+      trigger_id: '111378000000000000',
+    });
+
+    return props.navigation.addListener('beforeRemove', () => {
+      navigator?.maxApi?.trackEvent?.('service_icon_clicked', {
+        ...tracking,
+        trigger_id: '111154000000000000',
+        icon_name: 'back',
+      });
+    });
+  }, []);
+
   return (
     <>
-      <Component {...params} />
+      <Component heightHeader={heightHeader} {...params} />
       {showGrid && <GridSystem />}
     </>
   );

package/Application/index.ts

@@ -1,23 +1,33 @@
 import {NavigationContainer} from './NavigationContainer';
 import Screen from '../Layout/Screen';
 import {
-  NavigationButton,
-  HeaderTitle,
-  HeaderLeft,
+  HeaderAnimated,
   HeaderBackground,
+  HeaderCustom,
+  HeaderLeft,
   HeaderRightAction,
+  HeaderTitle,
   HeaderToolkitAction,
-  HeaderCustom,
-  HeaderAnimated,
+  NavigationButton,
 } from './Components';
 import BottomTab from './BottomTab';
 import {createContext} from 'react';
 import {defaultContext} from '../Consts';
+import {MiniAppInfo} from './types';
 
 const ApplicationContext = createContext(defaultContext);
+const MiniAppContext = createContext<MiniAppInfo>({
+  appId: '',
+  buildNumber: 0,
+  code: '',
+  toolkitConfig: {},
+  fromCode: '',
+});
+
 export {
-  NavigationContainer,
   ApplicationContext,
+  MiniAppContext,
+  NavigationContainer,
   Screen,
   BottomTab,
   NavigationButton,

package/Application/types.ts

@@ -63,12 +63,21 @@ export type Theme = {
 };
 
 export type Context = {
+  [key: string]: any;
   theme: Theme;
   navigator?: Navigator;
   showGrid?: boolean;
-  language?: 'vi' | 'en';
   translate?: (key: string) => string;
-  appInfo: MiniAppInfo;
+};
+
+export type MiniAppInfo = {
+  [key: string]: any;
+  code: string;
+  appId: string;
+  buildNumber: number;
+  flowPartnerId?: string;
+  toolkitConfig?: any;
+  fromCode?: string;
 };
 
 export type LocalizationObject = {
@@ -80,20 +89,12 @@ export type LocalizationObject = {
   };
 };
 
-export type MiniAppInfo = {
-  feature_code: string;
-  app_id: string;
-  build_number: number;
-  flow_partner_id?: string;
-};
-
 export type NavigationContainerProps = {
   screen: Screen;
   options?: NavigationOptions;
   theme: Theme;
   maxApi: any;
   localization?: LocalizationObject;
-  appInfo: MiniAppInfo;
 };
 
 export type NavigationScreenProps = {
@@ -106,12 +107,10 @@ export type ScreenParams = {
   [key: string]: any;
   screen: Screen;
   options?: NavigationOptions;
-  tracking?: any;
 };
 
 export interface ModalParams extends ScreenParams {
   [key: string]: any;
-  modalName?: string;
   onDismiss?: () => void;
   barrierDismissible?: boolean;
 }
@@ -119,16 +118,29 @@ export interface ModalParams extends ScreenParams {
 export interface BottomSheetParams extends ScreenParams {
   [key: string]: any;
   onDismiss?: () => void;
-  snapPoint?: '30%' | '50%' | '70%' | '90%';
+  snapPoint?: '30%' | '50%' | '70%' | '90%' | 'content';
+  indicatorColor?: string;
 }
 
 export type NavigationButtonProps = {
   icon: string;
   tintColor?: string;
-  backgroundColor?: string;
   useBorder?: boolean;
   onPress: () => void;
-  accessibilityLabel?: string;
+  badgeType?: 'dot' | 'number';
+  badgeValue?: number;
+};
+
+export type PinnedToolType = {
+  key: string;
+  badgeValue?: number;
+  badgeType?: 'number' | 'dot';
+};
+
+export type RuntimeToolType = {
+  title: {vi: string; en: string};
+  icon: string;
+  key: string;
 };
 
 export interface NavigationOptions extends StackNavigationOptions {
@@ -137,12 +149,15 @@ export interface NavigationOptions extends StackNavigationOptions {
   surface?: boolean;
   hiddenBack?: boolean;
   customTitle?: TitleCustomProps;
+  toolkitParams?: {
+    pinnedTool?: PinnedToolType;
+    runtimeTools?: RuntimeToolType[];
+  };
 }
 
 export interface HeaderBackProps extends NavigationButtonProps {
   preventBack?: PopupNotifyProps;
   onPressLeftHeader?: () => void;
-  accessibilityLabel?: string;
 }
 
 export type HeaderBackgroundProps = {
@@ -165,9 +180,7 @@ export type TitleCustomProps = {
 export type HeaderToolkitProps = {
   [key: string]: any;
   appCode: string;
-  hidden: boolean;
-  type: string;
-  onAction?: (action: string) => void;
+  configs: any[];
 };
 
 export type HeaderAnimatedProps = {
@@ -187,7 +200,9 @@ export type BottomTabItemProps = {
 };
 
 export type BottomTabProps = {
+  nested?: boolean;
   tabs: BottomTabItemProps[];
+  initialRouteName?: string;
   navigation: Navigation;
   listeners?: {
     tabPress?: any;