@momo-kits/foundation 0.121.3 → 0.10000.1

package/Application/BottomSheet.tsx

@@ -50,7 +50,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     useKeyboardAvoidingView = true,
     useScrollOverflow = false,
     keyboardVerticalOffset,
-    useDivider,
+    useDivider = true,
   }: BottomSheetParams = props.route.params;
 
   const customEasingOpen = Easing.bezier(0.05, 0.7, 0.1, 1);

package/Application/Components/HeaderRight.tsx

@@ -55,6 +55,7 @@ const HeaderToolkitAction: React.FC<any> = ({
   useShortcut = false,
   useMore = false,
   tools = [],
+  useCloseIcon = false,
 }) => {
   const {navigator} = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
@@ -104,14 +105,14 @@ const HeaderToolkitAction: React.FC<any> = ({
   );
 
   const onDismiss = () => {
-    if (isWhiteList) {
-      navigator?.maxApi?.dispatchFunction?.('dismissAll');
-    } else {
+    if (useCloseIcon && !isWhiteList) {
       navigator?.maxApi?.dispatchFunction?.(
         'dismiss',
         navigator?.dismissData,
         undefined
       );
+    } else {
+      navigator?.maxApi?.dispatchFunction?.('dismissAll');
     }
   };
 
@@ -299,7 +300,9 @@ const HeaderToolkitAction: React.FC<any> = ({
           <Icon
             color={tintColor}
             source={
-              isWhiteList ? '16_basic_home' : '16_navigation_close_circle'
+              useCloseIcon && !isWhiteList
+                ? '16_navigation_close_circle'
+                : '16_basic_home'
             }
             size={20}
           />

package/Application/ModalScreen.tsx

@@ -96,7 +96,7 @@ const Modal: React.FC<ModalParams> = props => {
       style={StyleSheet.absoluteFillObject}>
       <KeyboardAvoidingView
         style={Styles.flexCenter}
-        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
         <Pressable
           style={StyleSheet.absoluteFillObject}
           onPress={() => onDismiss(undefined, barrierDismissible)}>

package/Application/NavigationContainer.tsx

@@ -30,7 +30,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
 }) => {
   const context = useContext<any>(MiniAppContext);
   const navigationRef = useRef<NavigationContainerRef>(null);
-  const routes = useRef<any>();
+  const routes = useRef<any>(undefined);
   const isReady = useRef(false);
   const navigator = useRef(new Navigator(navigationRef, isReady));
   const [showGrid, setShowGrid] = useState(false);
@@ -62,8 +62,21 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
       }
     );
 
+    const onFocusApp = maxApi?.listen?.('onFocusApp', () => {
+      const routes = navigationRef.current?.getRootState?.()?.routes;
+      const currentRoute: any = routes?.[routes?.length - 1];
+      const current = currentRoute?.params?.screen;
+      const screenName = current?.name ?? current?.type?.name;
+
+      maxApi?.getDataObserver?.('current_screen', (data: any) => {
+        onScreenNavigated(data?.screenName, screenName, 'push', 'Screen');
+        maxApi?.setObserver?.('current_screen', {screenName});
+      });
+    });
+
     return () => {
       subscription?.remove?.();
+      onFocusApp?.remove?.();
     };
   }, []);
 
@@ -159,16 +172,15 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
             onReady={() => {
               isReady.current = true;
               routes.current = navigationRef.current?.getRootState?.()?.routes;
-              maxApi?.getDataObserver('CURRENT_SCREEN', (data: any) => {
+              const screenName = screen?.name ?? (screen as any)?.type?.name;
+              maxApi?.getDataObserver?.('current_screen', (data: any) => {
                 onScreenNavigated(
                   data?.screenName,
-                  screen?.name,
+                  screenName,
                   'push',
                   'Screen'
                 );
-                maxApi?.setObserver('CURRENT_SCREEN', {
-                  screenName: screen?.name,
-                });
+                maxApi?.setObserver?.('current_screen', {screenName});
               });
             }}
             onStateChange={state => {
@@ -208,7 +220,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
 
               routes.current = state?.routes;
               maxApi?.of?.({screenName});
-              maxApi?.setObserver('CURRENT_SCREEN', {screenName});
+              maxApi?.setObserver?.('current_screen', {screenName});
             }}
             independent={true}>
             <Stack.Navigator initialRouteName="Stack" headerMode="screen">

package/Application/index.ts

@@ -21,6 +21,9 @@ const MiniAppContext = (Platform as any).MiniAppContext ?? Context;
 const ScreenContext = (Platform as any).ScreenContext ?? Context;
 const ComponentContext = (Platform as any).ComponentContext ?? Context;
 const SkeletonContext = createContext({loading: false});
+const TrackingScopeContext = createContext<{scopeName?: string}>({
+  scopeName: undefined,
+});
 
 export {
   ApplicationContext,
@@ -39,4 +42,5 @@ export {
   HeaderAnimated,
   setAutomationID,
   useComponentId,
+  TrackingScopeContext,
 };

package/Application/types.ts

@@ -192,6 +192,7 @@ export type HeaderRightToolkit = {
   tools?: ToolGroup[];
   preventClose?: PopupNotifyProps;
   useMore?: boolean;
+  useCloseIcon?: boolean;
 };
 
 export interface HeaderBackProps extends NavigationButtonProps {

package/Application/utils.tsx

@@ -13,7 +13,7 @@ import {
 import {HeaderTitleProps, NavigationOptions} from './types';
 import {Colors} from '../Consts';
 import {Animated, Platform} from 'react-native';
-import {MiniAppContext, ScreenContext} from './index';
+import {MiniAppContext, ScreenContext, TrackingScopeContext} from './index';
 
 /**
  * default options for stack screen
@@ -173,12 +173,13 @@ const setAutomationID = (accessibilityLabel = '') => {
 const useComponentId = (componentName: string, accessibilityLabel?: string) => {
   const app = useContext<any>(MiniAppContext);
   const screen = useContext<any>(ScreenContext);
+  const {scopeName} = useContext<any>(TrackingScopeContext);
 
   const componentId = useMemo(() => {
     if (accessibilityLabel) {
       return accessibilityLabel;
     }
-    return `${app.appId}/${app.code}/${screen.screenName}/${componentName}`;
+    return `${app.appId}/${app.code}/${screen.screenName}/${scopeName}/${componentName}`;
   }, [componentName, accessibilityLabel, app, screen]);
 
   return {componentId};

package/TrackingScope.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import {TrackingScopeContext} from './Application';
+
+const TrackingScope = ({
+  scopeName,
+  children,
+}: {
+  scopeName: string;
+  children: any;
+}) => {
+  return (
+    <TrackingScopeContext.Provider value={{scopeName}}>
+      {children}
+    </TrackingScopeContext.Provider>
+  );
+};
+
+export default TrackingScope;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "0.121.3",
+  "version": "0.10000.1",
   "minimumDeployTarget": 32,
-  "deploymentTarget": 120,
+  "deploymentTarget": 10000,
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {},
@@ -16,13 +16,13 @@
     "react-native-linear-gradient": "2.8.3",
     "react-native-gesture-handler": "1.10.3",
     "react-native-fast-image": "8.1.5",
+    "@react-navigation/bottom-tabs": "https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-bottom-tabs.git",
     "@react-navigation/core": "5.16.1",
     "@react-navigation/native": "5.9.8",
     "@react-navigation/routers": "5.7.4",
-    "react-native-reanimated": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-reanimated.git#v1.13.4_gradle_7",
-    "lottie-react-native": "https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/momo-lottie-react-native.git",
-    "@react-navigation/stack": "https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-navigation-stack.git",
-    "@react-navigation/bottom-tabs": "https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-bottom-tabs.git"
+    "react-native-reanimated": "https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-reanimated.git#v1.13.4_gradle_7",
+    "lottie-react-native": "https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/momo-lottie-react-native.git#test_lottie_ios",
+    "@react-navigation/stack": "https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-navigation-stack.git"
   },
   "peerDependencies": {
     "react-native": "*"

package/publish.sh

@@ -9,10 +9,13 @@ elif [ "$1" == "latest" ]; then
   npm version $(npm view @momo-kits/foundation@latest version)
   npm version prerelease --preid=rc
   npm publish --tag latest --access=public
-else
+elif [ "$1" == "beta" ]; then
   npm version $(npm view @momo-kits/foundation@beta version)
   npm version prerelease --preid=beta
   npm publish --tag beta --access=public
+else
+  npm publish --tag alpha --access=public
 fi
+
 PACKAGE_NAME=$(npm pkg get name)
 NEW_PACKAGE_VERSION=$(npm pkg get version)

package/Application/Components/BottomSheetHelpCenter.tsx

@@ -1,192 +0,0 @@
-import React, {useContext} from 'react';
-import {StyleSheet, TouchableOpacity, View} from 'react-native';
-import {ApplicationContext, MiniAppContext} from '../index';
-import {Colors, Radius, Spacing, Styles} from '../../Consts';
-import {Text} from '../../Text';
-import {Icon} from '../../Icon';
-
-const ServiceItem: React.FC<any> = ({service}) => {
-  const {theme, translate} = useContext(ApplicationContext);
-  const {title, description, icon, onPress} = service;
-  const serviceTitle = translate?.(title);
-  const serviceDescription = translate?.(description);
-
-  return (
-    <TouchableOpacity onPress={onPress} style={Styles.row}>
-      <View style={styles.iconWrapper}>
-        <Icon color={theme.colors.text.hint} source={icon} size={28} />
-      </View>
-      <View>
-        <View style={Styles.row}>
-          <Text typography={'action_xs_bold'}>{serviceTitle}</Text>
-          <Icon source={'arrow_chevron_right_small'} size={16} />
-        </View>
-        <Text
-          typography={'description_xs_regular'}
-          color={theme.colors.text.hint}>
-          {serviceDescription}
-        </Text>
-      </View>
-    </TouchableOpacity>
-  );
-};
-
-const BottomSheetHelpCenter: React.FC<any> = ({onRequestClose}) => {
-  const {theme, navigator} = useContext(ApplicationContext);
-  const context = useContext<any>(MiniAppContext);
-
-  const onPressFaq = () => {
-    const routes = navigator?.ref.current?.getRootState()?.routes || [];
-    const routesLength = routes.length;
-    let screenName = routes?.[0]?.params?.screen?.name;
-    if (routesLength > 1) {
-      screenName = routes[routesLength - 2]?.params?.screen?.name;
-    }
-
-    context?.autoTracking?.({
-      ...context,
-      componentName: 'TouchableOpacity',
-      componentId: 'bottomsheet_faq_item',
-      screenName: screenName,
-    });
-
-    onRequestClose?.(() => {
-      navigator?.maxApi?.startFeatureCode?.(
-        'helpcenter_problemlevel1',
-        context?.toolkitConfig?.faq
-      );
-    });
-  };
-
-  const onPressChatbot = () => {
-    const routes = navigator?.ref.current?.getRootState()?.routes || [];
-    const routesLength = routes.length;
-    let screenName = routes?.[0]?.params?.screen?.name;
-    if (routesLength > 1) {
-      screenName = routes[routesLength - 2]?.params?.screen?.name;
-    }
-
-    context?.autoTracking?.({
-      ...context,
-      componentName: 'TouchableOpacity',
-      componentId: 'bottomsheet_chatbot_item',
-      screenName: screenName,
-    });
-
-    onRequestClose?.(() => {
-      navigator?.maxApi?.getDataObserver('CURRENT_SCREEN', (data: any) => {
-        let screenName = data?.screenName;
-        navigator?.maxApi?.startFeatureCode?.('chatbot', {
-          botId: 'botGptCs',
-          forwardParams: {
-            forService: 'navigation',
-            mini_app_id: context?.appId,
-            feature_code: context?.code,
-            screen_name: screenName,
-          },
-        });
-      });
-    });
-  };
-
-  const onPressFeedback = () => {
-    const routes = navigator?.ref.current?.getRootState()?.routes || [];
-    const routesLength = routes.length;
-    let screenName = routes?.[0]?.params?.screen?.name;
-    if (routesLength > 1) {
-      screenName = routes[routesLength - 2]?.params?.screen?.name;
-    }
-
-    context?.autoTracking?.({
-      ...context,
-      componentName: 'TouchableOpacity',
-      componentId: 'bottomsheet_feedback_item',
-      screenName: screenName,
-    });
-
-    onRequestClose?.(() => {
-      navigator?.maxApi?.startFeatureCode?.('feedback', {
-        forService: 'navigation',
-        loggedStatus: true,
-        application: {
-          appId: context?.appId,
-          appCode: context?.code,
-          appName: context?.name?.['en'],
-          buildNumber: context?.buildNumber,
-        },
-        newUi: true,
-        stepFeedback: 1,
-      });
-    });
-  };
-
-  const services = [
-    {
-      title: {vi: 'Câu hỏi thường gặp', en: 'Câu hỏi thường gặp'},
-      description: {
-        vi: 'Giải đáp các thắc mắc mọi người thường gặp',
-        en: 'Giải đáp các thắc mắc mọi người thường gặp',
-      },
-      icon: 'notifications_circle_question',
-      onPress: onPressFaq,
-    },
-    {
-      title: {vi: 'Hỗ trợ trực tuyến', en: 'Hỗ trợ trực tuyến'},
-      description: {
-        vi: 'Trả lời mọi câu hỏi của bạn 24/7',
-        en: 'Trả lời mọi câu hỏi của bạn 24/7',
-      },
-      icon: 'ic_support',
-      onPress: onPressChatbot,
-    },
-    {
-      title: {vi: 'Chia sẻ góp ý', en: 'Chia sẻ góp ý'},
-      description: {
-        vi: 'Đề xuất cải thiện hoặc báo lỗi sản phẩm/dịch vụ',
-        en: 'Đề xuất cải thiện hoặc báo lỗi sản phẩm/dịch vụ',
-      },
-      icon: 'file_mail',
-      onPress: onPressFeedback,
-    },
-  ];
-
-  return (
-    <View
-      style={[
-        styles.container,
-        {
-          backgroundColor: theme.colors.background.surface,
-        },
-      ]}>
-      {services.map((item, index) => {
-        return (
-          <>
-            <ServiceItem service={item} />
-            {index !== services.length - 1 && <View style={styles.divider} />}
-          </>
-        );
-      })}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {height: 300, width: '100%', padding: Spacing.M},
-  divider: {
-    marginVertical: Spacing.M,
-    backgroundColor: Colors.black_02,
-    height: 1,
-    width: '100%',
-  },
-  iconWrapper: {
-    width: 36,
-    height: 36,
-    backgroundColor: Colors.black_02,
-    borderRadius: Radius.M,
-    marginRight: Spacing.S,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
-
-export {BottomSheetHelpCenter};