@momo-kits/foundation 0.81.7-beta.3 → 0.81.7-beta.5

package/Application/Components.tsx

@@ -23,6 +23,8 @@ import {scaleSize, Text} from '../Text';
 import {Icon} from '../Icon';
 import {PopupNotify} from '../Popup';
 
+const TRIGGER_ID = "'111154000000000000";
+
 const styles = StyleSheet.create({
   navigationButton: {
     height: 28,
@@ -149,7 +151,8 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   backgroundColor,
   accessibilityLabel = '',
 }) => {
-  const {navigator} = useContext(ApplicationContext);
+  const {navigator, appInfo} = useContext(ApplicationContext);
+  const screen_name = navigator?.ref?.current?.getCurrentRoute().name;
 
   useEffect(() => {
     const backHandler = BackHandler.addEventListener(
@@ -162,13 +165,12 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
 
   const goBack = () => {
     const canGoBack = navigator?.ref.current?.canGoBack();
-    const currentRoute = navigator?.ref?.current.getCurrentRoute();
 
-    if (navigator?.trackingInfo) {
+    if (appInfo) {
       navigator?.maxApi?.trackEvent('service_icon_clicked', {
-        ...navigator?.trackingInfo,
-        screen_name: currentRoute?.params?.screen?.name ?? currentRoute?.name,
-        trigger_id: '111154000000000000',
+        ...appInfo,
+        screen_name,
+        trigger_id: TRIGGER_ID,
         icon_name: 'back',
       });
     }
@@ -331,25 +333,9 @@ const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
   }
 
   useEffect(() => {
-    if (navigator?.toolkitConfig) {
-      setToolConfig(navigator?.toolkitConfig);
-    } else {
-      navigator?.requestApi('getToolkit', [undefined], (result: boolean) => {
-        if (result) {
-          navigator?.requestApi(
-            'getToolkitConfig',
-            [undefined],
-            (config: any) => {
-              navigator.toolkitConfig = {
-                ...config?.utilityToolConfig,
-                appCode: config?.appCode,
-              };
-              setToolConfig(navigator?.toolkitConfig);
-            },
-          );
-        }
-      });
-    }
+    navigator?.getToolkit().then((toolConfig: any) => {
+      setToolConfig(toolConfig);
+    });
   }, []);
 
   useEffect(() => {

package/Application/ModalScreen.tsx

@@ -26,9 +26,6 @@ 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?.();
@@ -42,8 +39,10 @@ const ModalScreen: React.FC<any> = props => {
 };
 
 const Modal: React.FC<ModalParams> = props => {
-  const {theme, navigator} = useContext(ApplicationContext);
-  const {screen, barrierDismissible, modalName} = props.route.params;
+  const TRIGGER_ID = '111012100000000000';
+  const {theme, navigator, appInfo} = useContext(ApplicationContext);
+  const {screen, barrierDismissible, modalName}: ModalParams =
+    props.route.params;
   const Component = useRef(screen).current;
   const navigation = new Navigation(props.navigation, theme);
   const params = {
@@ -53,40 +52,35 @@ const Modal: React.FC<ModalParams> = props => {
 
   delete params.screen;
 
-  /**
-   * tracking
-   */
+  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(() => {
-    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,
+    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: '111012100000000000',
+        trigger_id: '111154100000000001',
         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 = () => {
@@ -129,7 +123,7 @@ const Modal: React.FC<ModalParams> = props => {
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const insets = useSafeAreaInsets();
-  const {theme, navigator} = useContext(ApplicationContext);
+  const {theme, navigator, appInfo} = useContext(ApplicationContext);
   const [keyboardSnap, setKeyboardSnap] = useState(0);
   const {screen, options, snapPoint}: BottomSheetParams = props.route.params;
   const Component = useRef(screen).current;
@@ -220,7 +214,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
               />
             </View>
             <NavigationContainer
-              trackingInfo={navigator?.trackingInfo}
+              appInfo={appInfo}
               maxApi={navigator?.maxApi}
               theme={{
                 ...theme,
@@ -264,7 +258,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,10 +14,6 @@ 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;
@@ -28,21 +24,14 @@ 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) => {
-    params = getOptions(this.filterParams(params), this.theme);
+    if (__DEV__) {
+      params = this.filterParams(params);
+    }
+    params = getOptions(params, this.theme);
     this.instance.setOptions(params);
   };
 }

package/Application/NavigationContainer.tsx

@@ -23,16 +23,13 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   options,
   maxApi,
   localization,
-  trackingInfo,
+  appInfo,
 }) => {
   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',
@@ -41,13 +38,10 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
       },
     );
     return () => {
-      subscription?.remove?.();
+      subscription.remove();
     };
   }, []);
 
-  /**
-   * handle mini language & listen change
-   */
   useEffect(() => {
     maxApi?.getLanguage?.((lang: 'vi' | 'en') => {
       setLanguage(lang);
@@ -60,16 +54,8 @@ 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},
@@ -88,6 +74,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
             showGrid,
             language,
             translate,
+            appInfo,
           }}>
           <ReactNavigationContainer
             theme={{

package/Application/Navigator.ts

@@ -4,62 +4,37 @@ 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', {
@@ -69,17 +44,10 @@ 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({
@@ -95,17 +63,36 @@ 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);
+    } else {
+      const instance: any = global;
+      instance?.miniAppApi?.dispatch?.(func, ...args, callback);
     }
   };
+
+  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);
+        }
+      });
+    });
+  };
 }
 
 export default Navigator;

package/Application/StackScreen.tsx

@@ -4,9 +4,11 @@ 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} = useContext(ApplicationContext);
+  const {theme, showGrid, navigator, appInfo} = useContext(ApplicationContext);
   const navigation = new Navigation(props.navigation, theme);
 
   const params = {
@@ -16,36 +18,30 @@ const StackScreen: React.FC<ScreenParams> = props => {
 
   delete params.screen;
 
-  /**
-   * set options for screen
-   */
-  useLayoutEffect(() => {
-    if (options) {
-      navigation.setOptions(options);
-    }
-  }, [options]);
+  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;
+  }
 
-  /**
-   * tracking for screen
-   */
   useEffect(() => {
-    if (navigator?.trackingInfo) {
-      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;
-      }
+    if (appInfo) {
       navigator?.maxApi?.trackEvent('service_frame_displayed', {
-        ...navigator?.trackingInfo,
+        ...appInfo,
         screen_name: Component.name,
         pre_screen_name,
-        trigger_id: '111378000000000000',
+        trigger_id: TRIGGER_ID,
       });
     }
   }, []);
 
+  useLayoutEffect(() => {
+    if (options) {
+      navigation.setOptions(options);
+    }
+  }, [options]);
+
   return (
     <>
       <Component {...params} />

package/Application/types.ts

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

package/Application/utils.tsx

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

package/Consts/colors+spacing+radius.ts

@@ -153,9 +153,9 @@ const Spacing = {
   L: 16,
   XL: 24,
   XXL: 32,
-  Size3XL: 48,
-  Size4XL: 56,
-  Size5XL: 64,
+  Size48: 48,
+  Size56: 56,
+  Size64: 64,
 };
 
 const Radius = {

package/Layout/Card.tsx

@@ -145,7 +145,6 @@ const Card: React.FC<CardProps> = ({
         accessibilityLabel={`Card`}
         style={[
           style,
-          styles.protectedStyle,
           styles.card,
           {
             width: widthSection,

package/Layout/Section.tsx

@@ -22,6 +22,11 @@ export interface SectionProps extends ViewProps {
    */
   useMargin?: boolean;
 
+  /**
+   * Optional. Background color for the Section component.
+   */
+  backgroundColor?: string;
+
   /**
    * Optional. Background image for the Section component.
    */
@@ -31,8 +36,8 @@ export interface SectionProps extends ViewProps {
 const Section: React.FC<SectionProps> = ({
   children,
   useMargin = true,
+  backgroundColor,
   backgroundImage,
-  style,
 }) => {
   const {showGrid} = useContext(ApplicationContext);
   const {numberOfColumns} = useGridSystem();
@@ -151,16 +156,13 @@ const Section: React.FC<SectionProps> = ({
       }}>
       <View
         accessibilityLabel={`Section`}
-        style={[
-          style,
-          styles.protectedStyle,
-          {
-            width: widthSection,
-            marginHorizontal: gridContext.margin,
-            flexDirection: 'row',
-            flexWrap: 'wrap',
-          },
-        ]}>
+        style={{
+          width: widthSection,
+          marginHorizontal: gridContext.margin,
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+          backgroundColor: backgroundColor,
+        }}>
         {!!backgroundImage && (
           <Image
             source={{uri: backgroundImage}}

package/Layout/index.ts

@@ -6,7 +6,6 @@ import {createContext} from 'react';
 import {GridContextProps} from './types';
 import Item from './Item';
 import ItemList from './ItemList';
-import ItemSectionList from './ItemSectionList';
 
 const GridContext = createContext<GridContextProps>({
   numberOfColumns: 12,
@@ -24,5 +23,4 @@ export {
   validateChildren,
   Item,
   ItemList,
-  ItemSectionList,
 };

package/Layout/styles.ts

@@ -45,7 +45,19 @@ export default StyleSheet.create({
     flexDirection: 'row',
     flexWrap: 'wrap',
     borderRadius: Radius.M,
+    paddingTop: undefined,
+    paddingBottom: undefined,
+    paddingLeft: undefined,
+    paddingRight: undefined,
+    paddingVertical: undefined,
+    paddingHorizontal: undefined,
     padding: 12,
+    margin: undefined,
+    marginTop: undefined,
+    marginBottom: undefined,
+    marginLeft: undefined,
+    marginRight: undefined,
+    marginVertical: undefined,
   },
   item: {
     overflow: 'hidden',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.81.7-beta.3",
+    "version": "0.81.7-beta.5",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {
@@ -43,4 +43,4 @@
     },
     "author": "@momo-kits/foundation",
     "license": "ISC"
-}
+}

package/Layout/ItemSectionList.tsx

@@ -1,39 +0,0 @@
-import React, {FC, useContext} from 'react';
-import {SectionList, SectionListProps, View} from 'react-native';
-import Item, {SpanNumber} from './Item';
-import {GridContext} from './index';
-import styles from './styles';
-
-export interface ItemSectionListProps extends SectionListProps<any> {
-  /**
-   * Represents the width of the Card component in terms of span numbers (1-12).
-   */
-  widthSpan?: SpanNumber;
-}
-
-const ItemSectionList: FC<ItemSectionListProps> = ({
-  renderItem,
-  widthSpan,
-  style,
-  contentContainerStyle,
-  ...props
-}) => {
-  const {gutterSize, numberOfColumns} = useContext(GridContext);
-  const widthItem = (widthSpan ?? numberOfColumns) as SpanNumber;
-  const _renderItem = (item: any) => {
-    return <Item widthSpan={widthItem}>{renderItem?.(item)}</Item>;
-  };
-
-  return (
-    <SectionList
-      {...props}
-      renderItem={_renderItem}
-      horizontal={false}
-      ItemSeparatorComponent={() => <View style={{height: gutterSize}} />}
-      style={[style, styles.protectedStyle]}
-      contentContainerStyle={[contentContainerStyle, styles.protectedStyle]}
-    />
-  );
-};
-
-export default ItemSectionList;