@momo-kits/foundation 0.81.17 → 0.81.18-beta.1

package/Application/ModalScreen.tsx

@@ -43,7 +43,7 @@ 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 {screen, barrierDismissible} = props.route.params;
   const Component = useRef(screen).current;
   const navigation = new Navigation(props.navigation, theme);
   const params = {
@@ -53,46 +53,6 @@ const Modal: React.FC<ModalParams> = props => {
 
   delete params.screen;
 
-  /**
-   * tracking
-   */
-  useEffect(() => {
-    if (navigator?.trackingInfo) {
-      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?.({params: {}})?.props?.information;
-      navigator?.maxApi?.trackEvent('service_component_displayed', {
-        feature_code: navigator.trackingInfo.code,
-        app_id: navigator.trackingInfo.appId,
-        miniapp_version: navigator.trackingInfo.buildNumber,
-        flow_partner_id: navigator.trackingInfo.flowPartnerId,
-        screen_name,
-        trigger_id: '111012100000000000',
-        component_type: 'popup',
-        component_name: modalName,
-        error_code,
-      });
-
-      return () => {
-        navigator?.maxApi?.trackEvent('service_icon_clicked', {
-          feature_code: navigator?.trackingInfo?.code,
-          app_id: navigator?.trackingInfo?.appId,
-          miniapp_version: navigator?.trackingInfo?.buildNumber,
-          screen_name,
-          trigger_id: '111154100000000001',
-          component_type: 'popup',
-          component_name: modalName,
-          error_code,
-          icon_name: 'close',
-        });
-      };
-    }
-  }, []);
-
   const onDismiss = () => {
     if (barrierDismissible) {
       return;

package/Application/StackScreen.tsx

@@ -32,12 +32,11 @@ const StackScreen: React.FC<ScreenParams> = props => {
    */
   useEffect(() => {
     if (navigator?.trackingInfo) {
-      const navigationRoutes = props.navigation.getState()?.routes || [];
-      const routesLength = navigationRoutes.length;
-      let pre_screen_name = navigationRoutes?.[0]?.params?.screen?.name;
+      const routes = props.navigation.getState()?.routes || [];
+      const routesLength = routes.length;
+      let pre_screen_name = '';
       if (routesLength > 1) {
-        pre_screen_name =
-          navigationRoutes[routesLength - 2]?.params?.screen?.name;
+        pre_screen_name = routes[routesLength - 2]?.params?.screen?.name;
       }
       navigator?.maxApi?.trackEvent('service_frame_displayed', {
         feature_code: navigator.trackingInfo.code,

package/Application/types.ts

@@ -110,7 +110,6 @@ export type ScreenParams = {
 
 export interface ModalParams extends ScreenParams {
   [key: string]: any;
-  modalName?: string;
   onDismiss?: () => void;
   barrierDismissible?: boolean;
 }

package/Assets/language.json

@@ -1,5 +1,6 @@
 {
   "vi": {
+    "errorCode": "Mã lỗi: ",
     "seeMore": "Xem thêm",
     "cancel": "Huỷ",
     "done": "Xong",
@@ -195,6 +196,7 @@
     "information": "Information",
     "tutorial": "Instruction",
     "question": "FAQ",
-    "support": "Support center"
+    "support": "Support center",
+    "errorCode": "Error code: "
   }
 }

package/Icon/index.tsx

@@ -20,7 +20,6 @@ const Icon: React.FC<IconProps> = ({source, size, color, style = {}}) => {
 
   return (
     <Image
-      accessibilityLabel={`Icon/${getIconSource()?.uri}`}
       loading={false}
       source={getIconSource()}
       style={[style, {width: size, height: size}]}

package/Icon/types.ts

@@ -1,4 +1,4 @@
-import {ViewStyle} from 'react-native';
+import {ImageStyle} from 'react-native-fast-image';
 
 export type IconProps = {
   /**
@@ -23,5 +23,5 @@ export type IconProps = {
    *  Optional. Used to apply custom styling to the Icon component.
    * Accepts an object of style properties.
    */
-  style?: ViewStyle;
+  style?: ImageStyle;
 };

package/Popup/PopupNotify.tsx

@@ -1,4 +1,4 @@
-import React, {useContext, useState} from 'react';
+import React, {useContext, useEffect, useRef, useState} from 'react';
 import {ScrollView, StyleSheet, TouchableOpacity, View} from 'react-native';
 import {PopupNotifyProps} from './types';
 import {Radius, Spacing, Styles} from '../Consts';
@@ -12,14 +12,15 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
   image,
   title = 'Title',
   description = 'Description',
-  information,
+  error,
   secondary,
   primary,
   buttonDirection = 'row',
   onIconClose,
 }) => {
-  const {theme, navigator} = useContext(ApplicationContext);
+  const {theme, navigator, translate} = useContext(ApplicationContext);
   const [scrollContent, setScrollContent] = useState(false);
+  const closeAction = useRef('touch_outside');
 
   let descriptionStyle = {};
   let Description: any = View;
@@ -28,6 +29,19 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
     descriptionStyle = {height: 80};
   }
 
+  /**
+   * tracking
+   */
+  useEffect(() => {
+    onTracking('service_component_displayed', undefined, '111012100000000000');
+    return () => {
+      onTracking(
+        'service_popup_dismissed',
+        closeAction.current,
+        '111154100000000001',
+      );
+    };
+  }, []);
   /**
    * on action popup
    * @param callback
@@ -37,6 +51,34 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
     callback?.();
   };
 
+  const onTracking = (
+    event: string,
+    actionType: string | undefined,
+    trigger_id: string,
+  ) => {
+    if (navigator?.trackingInfo) {
+      const routes = navigator.ref.current?.getRootState()?.routes || [];
+      const routesLength = routes.length;
+      let screen_name = routes?.[0]?.params?.screen?.name;
+      if (routesLength > 1) {
+        screen_name = routes[routesLength - 2]?.params?.screen?.name;
+      }
+
+      navigator?.maxApi?.trackEvent(event, {
+        feature_code: navigator?.trackingInfo?.code,
+        app_id: navigator?.trackingInfo?.appId,
+        miniapp_version: navigator?.trackingInfo?.buildNumber,
+        flow_partner_id: navigator?.trackingInfo?.flowPartnerId,
+        screen_name,
+        component_type: 'popup',
+        component_name: 'PopupNotify',
+        error_code: error,
+        trigger_id,
+        action_type: actionType,
+      });
+    }
+  };
+
   /**
    *  build main action of popup
    */
@@ -52,6 +94,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
                   type="text"
                   size="medium"
                   onPress={() => {
+                    closeAction.current = 'button_action';
                     onAction(secondary?.onPress);
                   }}
                 />
@@ -64,6 +107,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
               title={primary.title}
               size="medium"
               onPress={() => {
+                closeAction.current = 'button_action';
                 onAction(primary.onPress);
               }}
             />
@@ -78,6 +122,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
             title={primary.title}
             size="medium"
             onPress={() => {
+              closeAction.current = 'button_action';
               onAction(primary.onPress);
             }}
           />
@@ -89,6 +134,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
                 type="text"
                 size="medium"
                 onPress={() => {
+                  closeAction.current = 'button_action';
                   onAction(secondary?.onPress);
                 }}
               />
@@ -120,7 +166,10 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
     return (
       <TouchableOpacity
         style={styles.iconCloseContainer}
-        onPress={() => onAction(onIconClose)}>
+        onPress={() => {
+          closeAction.current = 'icon_close';
+          onAction(onIconClose);
+        }}>
         <View
           style={[
             styles.iconClose,
@@ -146,7 +195,11 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
         styles.container,
         {backgroundColor: theme.colors.background.surface},
       ]}>
-      {!!image && <Image source={{uri: image}} style={styles.image} />}
+      {!!image && (
+        <View style={styles.image}>
+          <Image source={{uri: image}} />
+        </View>
+      )}
       <View style={styles.content}>
         <Text typography={'title_xs'} numberOfLines={1}>
           {title}
@@ -164,13 +217,14 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
             {description}
           </Text>
         </Description>
-        {!!information && (
+        {!!error && (
           <View style={styles.information}>
             <Text
               typography={'description_xs'}
               color={theme.colors.text.hint}
               numberOfLines={1}>
-              {information}
+              {translate?.('errorCode')}
+              {error}
             </Text>
           </View>
         )}
@@ -190,6 +244,7 @@ const styles = StyleSheet.create({
     borderTopLeftRadius: Radius.L,
     borderTopRightRadius: Radius.L,
     aspectRatio: 1.7777,
+    overflow: 'hidden',
   },
   content: {padding: Spacing.XL},
   description: {

package/Popup/PopupPromotion.tsx

@@ -1,4 +1,4 @@
-import React, {useContext} from 'react';
+import React, {useContext, useEffect, useRef} from 'react';
 import {StyleSheet, TouchableOpacity, View} from 'react-native';
 import {PopupPromotionProps} from './types';
 import {ApplicationContext} from '../Application';
@@ -6,8 +6,52 @@ import {Image} from '../Image';
 import {Radius, Spacing} from '../Consts';
 import {Icon} from '../Icon';
 
-const PopupPromotion: React.FC<PopupPromotionProps> = ({image, onClose}) => {
+const PopupPromotion: React.FC<PopupPromotionProps> = ({
+  image,
+  onIconClose,
+}) => {
   const {theme, navigator} = useContext(ApplicationContext);
+  const closeAction = useRef('touch_outside');
+
+  /**
+   * tracking
+   */
+  useEffect(() => {
+    onTracking('service_component_displayed', undefined, '111012100000000000');
+    return () => {
+      onTracking(
+        'service_popup_dismissed',
+        closeAction.current,
+        '111154100000000001',
+      );
+    };
+  }, []);
+
+  const onTracking = (
+    event: string,
+    actionType: string | undefined,
+    trigger_id: string,
+  ) => {
+    if (navigator?.trackingInfo) {
+      const routes = navigator.ref.current?.getRootState()?.routes || [];
+      const routesLength = routes.length;
+      let screen_name = routes?.[0]?.params?.screen?.name;
+      if (routesLength > 1) {
+        screen_name = routes[routesLength - 2]?.params?.screen?.name;
+      }
+      navigator?.maxApi?.trackEvent(event, {
+        feature_code: navigator?.trackingInfo?.code,
+        app_id: navigator?.trackingInfo?.appId,
+        miniapp_version: navigator?.trackingInfo?.buildNumber,
+        flow_partner_id: navigator?.trackingInfo?.flowPartnerId,
+        screen_name,
+        component_type: 'popup',
+        component_name: 'PopupPromotion',
+        trigger_id,
+        action_type: actionType,
+      });
+    }
+  };
 
   /**
    * build close action
@@ -17,8 +61,9 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({image, onClose}) => {
       <View style={styles.iconCloseContainer}>
         <TouchableOpacity
           onPress={() => {
+            closeAction.current = 'icon_close';
             navigator?.pop();
-            onClose?.();
+            onIconClose?.();
           }}
           style={styles.iconButton}>
           <View
@@ -42,12 +87,13 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({image, onClose}) => {
 
   return (
     <View accessibilityLabel={'PopupPromotion'}>
-      <Image
-        style={styles.container}
-        source={{
-          uri: image,
-        }}
-      />
+      <View style={styles.container}>
+        <Image
+          source={{
+            uri: image,
+          }}
+        />
+      </View>
       {buildCloseIcon()}
     </View>
   );

package/Popup/types.ts

@@ -18,9 +18,9 @@ export type PopupNotifyProps = {
   description: string | React.ReactNode;
 
   /**
-   * `information`: Optional. Represents additional information text to be displayed in the PopupNotify component.
+   * `error`: Optional. Represents additional error text to be displayed in the PopupNotify component.
    */
-  information?: string;
+  error?: string;
 
   /**
    * `secondary`: Optional. Represents the secondary action that can be performed from the PopupNotify component.
@@ -55,7 +55,7 @@ export type PopupPromotionProps = {
   /**
    * `onClose`: Optional. A callback function that is called when the PopupPromotion component is closed.
    */
-  onClose?: () => void;
+  onIconClose?: () => void;
 };
 
 type PopupAction = {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.81.17",
+    "version": "0.81.18-beta.1",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {
@@ -10,17 +10,17 @@
         "@momo-kits/foundation"
     ],
     "dependencies": {
-        "@gorhom/bottom-sheet": "https://gitlab.com/momo-platform/bottom-sheet.git",
+        "@gorhom/bottom-sheet": "git+https://gitlab.com/momo-platform/bottom-sheet.git#main",
         "react-native-safe-area-context": "3.1.4",
         "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://gitlab.com/momo-platform/react-navigation-bottom-tabs.git#main",
+        "@react-navigation/bottom-tabs": "git+https://gitlab.com/momo-platform/react-navigation-bottom-tabs.git#main",
         "@react-navigation/core": "5.16.1",
         "@react-navigation/native": "5.9.8",
         "@react-navigation/routers": "5.7.4",
         "lottie-react-native": "3.3.2",
-        "@react-navigation/stack": "https://gitlab.com/momo-platform/react-navigation-stack.git"
+        "@react-navigation/stack": "git+https://gitlab.com/momo-platform/react-navigation-stack.git#main"
     },
     "peerDependencies": {
         "react-native": "*"