@momo-kits/foundation 0.81.16 → 0.81.17-beta.2

package/Application/ModalScreen.tsx

@@ -53,43 +53,35 @@ const Modal: React.FC<ModalParams> = props => {
 
   delete params.screen;
 
+  const getTrackingInfo = () => {
+    const routes = props.navigation.getState()?.routes || [];
+    const routesLength = routes.length;
+    let screen_name = routes?.[0]?.params?.screen?.name;
+    if (routesLength > 1) {
+      screen_name = routes[routesLength - 2]?.params?.screen?.name;
+    }
+    const error_code = screen?.({params: {}})?.props?.error;
+    return {
+      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: modalName,
+      error_code,
+    };
+  };
+
   /**
    * 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,
+        ...getTrackingInfo(),
         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',
-        });
-      };
     }
   }, []);
 
@@ -97,6 +89,13 @@ const Modal: React.FC<ModalParams> = props => {
     if (barrierDismissible) {
       return;
     }
+    if (navigator?.trackingInfo) {
+      navigator?.maxApi?.trackEvent('service_popup_dismissed', {
+        ...getTrackingInfo(),
+        action_type: 'touch_outside',
+        trigger_id: '111154100000000001',
+      });
+    }
     navigator?.pop();
   };
 

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/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

@@ -12,13 +12,13 @@ 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);
 
   let descriptionStyle = {};
@@ -37,6 +37,29 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
     callback?.();
   };
 
+  const onTracking = (actionType: 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('service_popup_dismissed', {
+        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: '111154100000000001',
+        action_type: actionType,
+      });
+    }
+  };
+
   /**
    *  build main action of popup
    */
@@ -52,6 +75,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
                   type="text"
                   size="medium"
                   onPress={() => {
+                    onTracking('button_action');
                     onAction(secondary?.onPress);
                   }}
                 />
@@ -64,6 +88,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
               title={primary.title}
               size="medium"
               onPress={() => {
+                onTracking('button_action');
                 onAction(primary.onPress);
               }}
             />
@@ -78,6 +103,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
             title={primary.title}
             size="medium"
             onPress={() => {
+              onTracking('button_action');
               onAction(primary.onPress);
             }}
           />
@@ -89,6 +115,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
                 type="text"
                 size="medium"
                 onPress={() => {
+                  onTracking('button_action');
                   onAction(secondary?.onPress);
                 }}
               />
@@ -120,7 +147,10 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
     return (
       <TouchableOpacity
         style={styles.iconCloseContainer}
-        onPress={() => onAction(onIconClose)}>
+        onPress={() => {
+          onTracking('icon_close');
+          onAction(onIconClose);
+        }}>
         <View
           style={[
             styles.iconClose,
@@ -146,7 +176,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 +198,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 +225,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

@@ -6,9 +6,34 @@ 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 onTracking = (actionType: 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('service_popup_dismissed', {
+        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: '111154100000000001',
+        action_type: actionType,
+      });
+    }
+  };
+
   /**
    * build close action
    */
@@ -17,8 +42,9 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({image, onClose}) => {
       <View style={styles.iconCloseContainer}>
         <TouchableOpacity
           onPress={() => {
+            onTracking('icon_close');
             navigator?.pop();
-            onClose?.();
+            onIconClose?.();
           }}
           style={styles.iconButton}>
           <View
@@ -42,12 +68,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.16",
+    "version": "0.81.17-beta.2",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {