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

package/Application/ModalScreen.tsx

@@ -53,40 +53,39 @@ const Modal: React.FC<ModalParams> = props => {
 
   delete params.screen;
 
+  const getTrackingInfo = () => {
+    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?.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,
+          ...getTrackingInfo(),
           trigger_id: '111154100000000001',
-          component_type: 'popup',
-          component_name: modalName,
-          error_code,
           icon_name: 'close',
         });
       };

package/Application/StackScreen.tsx

@@ -33,11 +33,10 @@ 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;
-      if (routesLength > 1) {
-        pre_screen_name =
-          navigationRoutes[routesLength - 2]?.params?.screen?.name;
+      const routes = navigationRoutes.length;
+      let pre_screen_name = '';
+      if (routes > 1) {
+        pre_screen_name = navigationRoutes[routes - 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 = {};
@@ -146,7 +146,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 +168,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 +195,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,7 +6,7 @@ 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);
 
   /**
@@ -18,7 +18,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({image, onClose}) => {
         <TouchableOpacity
           onPress={() => {
             navigator?.pop();
-            onClose?.();
+            onIconClose?.();
           }}
           style={styles.iconButton}>
           <View
@@ -42,12 +42,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.1",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {