@momo-kits/foundation 0.80.9 → 0.81.1-beta.0

package/Application/StackScreen.tsx

@@ -1,32 +1,146 @@
-import React, {useContext, useLayoutEffect} from 'react';
+import React, {useContext, useEffect, useLayoutEffect, useRef} from 'react';
 import {ScreenParams} from './types';
 import Navigation from './Navigation';
-import {ApplicationContext} from './index';
+import {ApplicationContext, MiniAppContext, ScreenContext} from './index';
 import {GridSystem} from '../Layout';
+import {useHeaderHeight} from '@react-navigation/stack';
+import {Alert, InteractionManager} from 'react-native';
 
 const StackScreen: React.FC<ScreenParams> = props => {
-  const {screen: Component, options}: ScreenParams = props.route.params;
-  const {theme, showGrid} = useContext(ApplicationContext);
+  const {theme, showGrid, navigator} = useContext(ApplicationContext);
+  const startTime = useRef(Date.now());
+  const endTime = useRef(Date.now());
+  const timeLoad = useRef(0);
+  const timeInteraction = useRef(0);
+  const timeoutLoad = useRef<any>();
+  const tracked = useRef<any>({
+    releaseLoad: undefined,
+    releaseInteraction: undefined,
+    timeoutLoad: undefined,
+    timeoutInteraction: undefined,
+  });
+  const interaction = useRef<any>();
+  const context = useContext<any>(MiniAppContext);
+
+  const {screen: Component, options, initialParams} = props.route.params;
   const navigation = new Navigation(props.navigation, theme);
+  const heightHeader = useHeaderHeight();
 
-  const params = {
+  const data = {
+    ...initialParams,
     ...props.route.params,
     navigation,
   };
 
-  delete params.screen;
+  delete data.screen;
+  delete data.initialParams;
+
+  const screenName = Component?.name || Component?.type?.name || 'Invalid';
 
+  /**
+   * set options for screen
+   */
   useLayoutEffect(() => {
     if (options) {
       navigation.setOptions(options);
     }
   }, [options]);
 
+  /**
+   * tracking for screen
+   */
+  useEffect(() => {
+    if (__DEV__ && (!screenName || screenName == 'Invalid')) {
+      Alert.alert('Design system', `Unvalidated screen name "${screenName}" !`);
+    }
+
+    navigator?.maxApi?.of?.({screenName});
+    tracked.current.timeoutLoad = setTimeout(() => {
+      onScreenLoad();
+    }, 5000);
+    tracked.current.timeoutInteraction = setTimeout(() => {
+      onScreenInteraction();
+    }, 5000);
+
+    return () => {
+      onScreenLoad();
+      onScreenInteraction();
+    };
+  }, []);
+
+  /**
+   * tracking for screen load
+   */
+  const onScreenLoad = () => {
+    clearTimeout(tracked.current.timeoutLoad);
+    if (!tracked.current?.releaseLoad) {
+      context.autoTracking?.({
+        appId: context.appId,
+        code: context.code,
+        buildNumber: context.buildNumber,
+        screenName,
+        componentName: 'Screen',
+        state: 'load',
+        duration: timeLoad.current,
+      });
+      navigator?.maxApi?.showToastDebug?.({
+        appId: `auto - ${context.appId}`,
+        message: `${screenName} screen_load_time ${timeLoad.current}`,
+      });
+      tracked.current.releaseLoad = true;
+    }
+  };
+
+  /**
+   * tracking for screen load
+   */
+  const onScreenInteraction = () => {
+    clearTimeout(tracked.current.timeoutInteraction);
+    if (!tracked.current?.releaseInteraction) {
+      context.autoTracking?.({
+        appId: context.appId,
+        code: context.code,
+        buildNumber: context.buildNumber,
+        screenName,
+        componentName: 'Screen',
+        state: 'interaction',
+        duration: timeInteraction.current - timeLoad.current,
+      });
+
+      navigator?.maxApi?.showToastDebug?.({
+        appId: `auto - ${context.appId}`,
+        message: `${screenName} screen_interaction_time ${timeInteraction.current}`,
+      });
+      tracked.current.releaseInteraction = true;
+    }
+  };
+
   return (
-    <>
-      <Component {...params} />
+    <ScreenContext.Provider
+      value={{
+        screenName,
+        onElementLoad: () => {
+          endTime.current = Date.now();
+          interaction.current?.cancel?.();
+          interaction.current = InteractionManager.runAfterInteractions(() => {
+            timeInteraction.current = Date.now() - startTime.current;
+          });
+          clearTimeout(timeoutLoad.current);
+          timeoutLoad.current = setTimeout(() => {
+            if (timeLoad.current === 0) {
+              timeLoad.current = endTime.current - startTime.current;
+            }
+          }, 2000);
+        },
+      }}>
+      <Component
+        heightHeader={heightHeader}
+        {...data}
+        onScreenLoad={onScreenLoad}
+        onScreenInteraction={onScreenInteraction}
+      />
       {showGrid && <GridSystem />}
-    </>
+    </ScreenContext.Provider>
   );
 };
 

package/Application/index.ts

@@ -1,24 +1,37 @@
+import {Platform} from 'react-native';
 import {NavigationContainer} from './NavigationContainer';
 import Screen from '../Layout/Screen';
 import {
+  HeaderAnimated,
+  HeaderBackground,
+  HeaderCustom,
   HeaderRightAction,
-  NavigationButton,
-  HeaderToolkitAction,
   HeaderTitle,
+  NavigationButton,
 } from './Components';
 import BottomTab from './BottomTab';
 import {createContext} from 'react';
 import {defaultContext} from '../Consts';
 
+const Context = createContext({});
 const ApplicationContext = createContext(defaultContext);
 
+const MiniAppContext = (Platform as any).MiniAppContext ?? createContext({});
+const ScreenContext = (Platform as any).ScreenContext ?? createContext({});
+const ComponentContext = (Platform as any).ComponentContext ?? Context;
+
 export {
-  NavigationContainer,
   ApplicationContext,
+  MiniAppContext,
+  ScreenContext,
+  ComponentContext,
+  NavigationContainer,
   Screen,
+  BottomTab,
   NavigationButton,
-  HeaderRightAction,
-  HeaderToolkitAction,
   HeaderTitle,
-  BottomTab,
+  HeaderBackground,
+  HeaderRightAction,
+  HeaderCustom,
+  HeaderAnimated,
 };

package/Application/types.ts

@@ -1,8 +1,9 @@
-import {Animated} from 'react-native';
-import React from 'react';
-import Navigator from './Navigator';
+import {StackNavigationOptions} from '@react-navigation/stack';
+import React, {ReactElement} from 'react';
+import {Animated, ViewProps} from 'react-native';
 import {PopupNotifyProps} from '../Popup/types';
 import Navigation from './Navigation';
+import Navigator from './Navigator';
 
 type Screen = React.ComponentType<NavigationScreenProps>;
 
@@ -62,10 +63,10 @@ export type Theme = {
 };
 
 export type Context = {
+  [key: string]: any;
   theme: Theme;
   navigator?: Navigator;
   showGrid?: boolean;
-  language?: 'vi' | 'en';
   translate?: (key: string) => string;
 };
 
@@ -82,8 +83,9 @@ export type NavigationContainerProps = {
   screen: Screen;
   options?: NavigationOptions;
   theme: Theme;
-  maxApi?: any;
+  maxApi: any;
   localization?: LocalizationObject;
+  initialParams?: any;
 };
 
 export type NavigationScreenProps = {
@@ -98,52 +100,87 @@ export type ScreenParams = {
   options?: NavigationOptions;
 };
 
-export interface ModalParams extends ScreenParams {
+export type ModalParams = {
   [key: string]: any;
+  screen: React.ComponentType;
   onDismiss?: () => void;
   barrierDismissible?: boolean;
-}
+};
 
-export interface BottomSheetParams extends ScreenParams {
+export type BottomSheetParams = {
   [key: string]: any;
-  onDismiss?: () => void;
-  snapPoint?: '30%' | '50%' | '70%' | '90%';
-}
+  screen: React.ComponentType;
+  options: {
+    title: string;
+    surface?: boolean;
+  };
+  surface?: boolean;
+  onDismiss?: (type?: string) => void;
+  barrierDismissible?: boolean;
+  draggable?: boolean;
+  useBottomInset?: boolean;
+  keyboardVerticalOffset?: number;
+};
 
 export type NavigationButtonProps = {
   icon: string;
   tintColor?: string;
-  backgroundColor?: string;
   useBorder?: boolean;
   onPress: () => void;
+  badgeType?: 'dot' | 'number';
+  badgeValue?: number;
   accessibilityLabel?: string;
 };
 
-export type NavigationOptions = {
+export type PinnedToolType = {
+  key: string;
+  badgeValue?: number;
+  badgeType?: 'number' | 'dot';
+};
+
+export type RuntimeToolType = {
+  title: {vi: string; en: string};
+  icon: string;
+  key: string;
+};
+
+export interface NavigationOptions
+  extends Omit<StackNavigationOptions, 'headerRight'> {
   preventBack?: PopupNotifyProps;
   onPressLeftHeader?: () => void;
   surface?: boolean;
-  headerTransparent?: boolean;
   hiddenBack?: boolean;
-  title?: string;
-  headerTitle?: (props?: any) => React.ReactElement;
-  headerTitleAlign?: 'left' | 'center';
   customTitle?: TitleCustomProps;
-  headerRight?: (props?: any) => React.ReactElement;
-  animatedValue?: Animated.Value;
+  headerRight?: HeaderRightToolkit | HeaderRightActions | Element;
+}
+
+export type HeaderRightToolkit = {
+  type?: 'toolkit';
+  pinnedTool?: PinnedToolType;
+  runtimeTools?: RuntimeToolType[];
+  preventClose?: PopupNotifyProps;
+  useMore?: boolean;
+};
+
+export type HeaderRightActions = {
+  type?: 'iconButton';
+  buttons: IconButton[];
+};
+
+export type IconButton = {
+  icon: string;
+  onPress: () => void;
 };
 
 export interface HeaderBackProps extends NavigationButtonProps {
   preventBack?: PopupNotifyProps;
   onPressLeftHeader?: () => void;
-  accessibilityLabel?: string;
 }
 
 export type HeaderBackgroundProps = {
   image?: string | null;
-  backgroundColor?: string | null;
   animatedValue?: Animated.Value;
-  useBorder?: boolean;
+  useSurface?: boolean;
 };
 
 export type TitleCustomProps = {
@@ -159,26 +196,46 @@ export type TitleCustomProps = {
 export type HeaderToolkitProps = {
   [key: string]: any;
   appCode: string;
-  hidden: boolean;
-  type: string;
-  onAction?: (action: string) => void;
+  configs: any[];
 };
 
+export interface HeaderAnimatedProps extends ViewProps {
+  animatedValue: Animated.Value;
+  image: string;
+}
+
 export type BottomTabItemProps = {
   name: string;
   label: string;
   icon: string;
   showDot?: boolean;
-  badgeLabel?: string;
+  badgeLabel?: string | number;
   screen: Screen;
   options: NavigationOptions;
+  initialParams?: any;
 };
 
 export type BottomTabProps = {
+  nested?: boolean;
   tabs: BottomTabItemProps[];
+  initialRouteName?: string;
   navigation: Navigation;
   listeners?: {
     tabPress?: any;
     focus?: any;
   };
+  floatingButton?: FloatingButtonProps;
+};
+
+export type FloatingButtonProps = {
+  container?: React.ReactNode;
+  icon: string | React.ReactNode;
+  label: string;
+  onPress: () => void;
+};
+
+export type AnimatedHeader = {
+  type: 'default' | 'surface';
+  component?: (props?: any) => React.ReactElement;
+  headerTitle?: (props?: any) => React.ReactElement;
 };

package/Application/utils.tsx

@@ -13,39 +13,37 @@ import {
 import {NavigationOptions, Theme} from './types';
 import {Colors} from '../Consts';
 
-const getTintColor = (theme: Theme): any => {
-  if (theme.assets?.headerBackground) {
-    return {
-      headerTintColor: Colors.black_01,
-    };
-  }
-  return {
-    headerTintColor: theme.colors.text.default,
-  };
-};
-
-const getStackOptions = (theme: Theme): StackNavigationOptions => {
+/**
+ * default options for stack screen
+ */
+const getStackOptions = (): StackNavigationOptions => {
   return {
     headerTitleAlign: 'left',
     headerTitle: HeaderTitle,
-    headerBackground: HeaderBackground,
+    headerBackground: (props: any) => <HeaderBackground {...props} />,
     headerLeft: (props: any) => <HeaderLeft {...props} />,
     headerRight: (props: any) => <HeaderToolkitAction {...props} />,
-    ...getTintColor(theme),
+    headerTintColor: Colors.black_01,
   };
 };
 
-const getDialogOptions = (theme: Theme): StackNavigationOptions => {
+/**
+ * default options for dialog screen
+ */
+const getDialogOptions = (): StackNavigationOptions => {
   return {
     headerTitleAlign: 'left',
     headerTitle: HeaderTitle,
     headerLeft: (props: any) => <HeaderLeft {...props} />,
-    headerBackground: HeaderBackground,
-    ...getTintColor(theme),
+    headerBackground: (props: any) => <HeaderBackground {...props} />,
+    headerTintColor: Colors.black_01,
     ...TransitionPresets.ModalTransition,
   };
 };
 
+/**
+ * default options for modal screen
+ */
 const getModalOptions = (): StackNavigationOptions => {
   return {
     headerShown: false,
@@ -71,9 +69,10 @@ const getModalOptions = (): StackNavigationOptions => {
   };
 };
 
+/**
+ * build react-navigation options
+ */
 const getOptions = (params: NavigationOptions, theme: Theme) => {
-  let backgroundProps: any;
-  let titleProps: any;
   let options = {};
 
   if (
@@ -95,40 +94,24 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
     };
   }
 
-  if (typeof params.surface == 'boolean') {
+  if (typeof params.surface === 'boolean') {
     if (params.surface) {
       options = {
         ...options,
-        ...getTintColor({
-          ...theme,
-          assets: {...theme.assets, headerBackground: undefined},
-        }),
-      };
-      backgroundProps = {
-        image: null,
-        backgroundColor: theme.colors.background.surface,
-        useBorder: true,
+        headerTintColor: theme.colors.text.default,
+        headerBackground: () => (
+          <HeaderBackground image={null} useSurface={true} />
+        ),
       };
     } else {
       options = {
         ...options,
-        ...getTintColor(theme),
+        headerTintColor: Colors.black_01,
         headerBackground: HeaderBackground,
       };
     }
   }
 
-  if (params.animatedValue) {
-    backgroundProps = {...backgroundProps, animatedValue: params.animatedValue};
-    titleProps = {animatedValue: params.animatedValue};
-    options = {
-      ...options,
-      headerTitle: (props: any) => {
-        return <HeaderTitle {...titleProps} {...props} />;
-      },
-    };
-  }
-
   if (params.customTitle) {
     options = {
       ...options,
@@ -139,17 +122,23 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
     };
   }
 
-  if (backgroundProps) {
-    options = {
-      ...options,
-      headerBackground: () => <HeaderBackground {...backgroundProps} />,
-    };
-  }
-
   return {
     ...params,
     ...options,
   };
 };
 
-export {getStackOptions, getDialogOptions, getModalOptions, getOptions};
+const formatNameLength = (name = '') => {
+  let formattedName = name;
+  if (formattedName.length > 100) {
+    formattedName = formattedName.substring(0, 100);
+  }
+  return formattedName;
+};
+export {
+  getStackOptions,
+  getDialogOptions,
+  getModalOptions,
+  getOptions,
+  formatNameLength,
+};

package/Assets/icon.json

@@ -801,7 +801,7 @@
     "uri": "https://img.mservice.com.vn/app/img/kits/navigation_minus_circle_full.png"
   },
   "navigation_more_horiz": {
-    "uri": "https://img.mservice.com.vn/app/img/kits/navigation_more_horiz.png"
+    "uri": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAgKADAAQAAAABAAAAgAAAAABIjgR3AAAFAklEQVR4Ae2aS4tcRRiGM2rEO14SY7wFURGc+CPEyyYJLnSlaCCKLgSzUNBNRAMSF0LIRhGDBMQQMAQ3Zin+A/VHKOIlTm4aJ5fx+VBCT5Puru9UleOE54OX7nO66n2rnj7dp+ucXrPGkoAEJCABCUhAAhKQgAQkIAEJSEACEpCABCQgAQlIQAISkIAEJCABCUhAAhKQgAQkIAEJSEACEpCABCQgAQlIQAISkIAEJCABCUhAAhKQgAQkIAEJSEACEpCABCQgAQlIQAISkIAEJCABCUhAAhKQgAQkIAEJSEACEpCABCQgAQlIQAISkIAEJCABCUhAAhLoTmCue8JYwNLS0m3s2ooeQXeiJfQj+h59NTc39zuP3Yr89ZhH/mYU+RdQ5H+HIn+Bx25F/u2YR/48ivzzKPK/RUfJP87j5VdM/EH0BTqHJtVZXjiI7mtNAM+H0BF0Hk2qyP8MbeqQ/zC+X6Jp+Yu8fgDd2zp/Rf2Y0E4UcEvrLxq+3GrQeL2OMvlnaL+jYf6b+E078Hl5Wf3J1gut8lfUh4nsWza13Mae2sET92Euclnr3Q3yP1nmmNvYVZu/ov2Z62u5+V6y9UtDJ4FbfPJra3tF/lu14fR/dmj+ivZj4A+gOKfVVnwd3pOdDH3inJ/52p80ztO8sHFA/jz9pp3vJ+WN7z/Jjvjh2KWu6OL6j+l7PKxt4H8NHu8O8InTx1UD+o13uY4d74zvLNh+nzYt+N6Az9sFeYOadFkGcsTewmh+Ri3egJjYGbSOJdLp2JhV5MdS7yfU4g2IuMiN/BjHzCI/vjF+QK34nsBrPfmLM8OTDVoBGo/dwo5Wb354x7fAk/GksGKd3XJu1+P3eGF2NNuGWr354XcTejSetK6WkEbHFhdZWlfGM9O2dJwZz0zbHvmlnk0/JaOhcYWrdWU8M21Lx5nxzLTtkV/q2e0AiMurrSvjmWlbOs6MZ6Ztj/xSz24HQFzbbl0Zz0zb0nFmPDNte+SXenY7AOLGSuvKeGbalo4z45lp2yO/1LPpL9WLoSyDbmTjV3T1xZ11T7LLsJuJ+wW1WomklmHMfx3ZsQy9ErWoY5hsYBl4roXZqEeXVQADPUnI56NBlc8PlK7BI4e2Czwcqswc7f4pnoujO6Y9p20c/IentUm+th/P5m9+cgy55nwK7kZ/oNo6gUH6Uih9NqG4q1dbCxjEfxhSRZ/7UYtL4b/hE99oq68Y+POopi7Q+ZmhM6fvjppw+kb+UxX5r1Tmx72EuKi2eosJ7BoIIeC/UTtzPHZX5O9skL9nYH68+a/W5v8v+jOR59CpBIjjtH261eDx2o7irl5pxdf+4E/++LjxehFlTofHaL913GdVbzOhO9BHKG5vTqo438cfSOJmTtPCcyP6GE07EOPA24vS5/xZg8XzLrQfTTsQ48D7AN06y6/V6y1vWBSNicnFjZ3H0KX+FPp15td2UeBYo3/z48bOZhSXbOOqXVy4ibX7N/9B/rXkPIHmUeSP/ik08s+yz5KABCQgAQlIQAISkIAEJCABCUhAAhKQgAQkIAEJSEACEpCABCQgAQlIQAISkIAEJCABCUhAAhKQgAQkIAEJSEACEpCABCQgAQlIQAISkIAEJCABCUhAAhKQgAQkIAEJSEACEpCABCQgAQlIQAISkIAEJCABCUhAAhKQgAQkIAEJSEACEpCABCQgAQlIQAISuJwI/A2lzL3lHltsxwAAAABJRU5ErkJggg=="
   },
   "navigation_more_vert": {
     "uri": "https://img.mservice.com.vn/app/img/kits/navigation_more_vert.png"
@@ -822,7 +822,7 @@
     "uri": "https://img.mservice.com.vn/app/img/kits/navigation_scan.png"
   },
   "navigation_search": {
-    "uri": "https://img.mservice.com.vn/app/img/kits/navigation_search.png"
+    "uri": "data:image/webp;base64,UklGRqwEAABXRUJQVlA4TKAEAAAvf8AfEDVIchtJkqT6/6fZ21hkukWeZouKkARJtmlbtm3btm3b741sjWzbtm3btm184xkLgiS5cZsGUuXbsJOAoPSD88dlwMVKiDwdxtRJ4UUP+XlwcpVn1A0I4dWOVnEMET7n62avxi24FD4tSyT9AJCpq/YI7oQjYZj3Bp2zU3A/dBDfF0y+bsBMGCK3KTpOwFyoR70h9Nreo+EvXyi7Ye4vmA7TaLcCQy4ohB90NoLaKqiEL1HbwOH84sdyqk+aQC5smHLkKViZWT8vXlACZQ/EfAcXOJa5bPO4uGm51A91wtzix3+w5I88UhfXAw5GL6Rh6Bvcu77smyD4N4okpNkXWIVGSPVXWz7DqyjYN+vEa3yZctrvunwjw9gGSmW3/EXx6ZILFiTM/BYx2FjwRqzabUHmhe1UtXBWS4RTBMW1xt/MLYm5eiGKXqSGnsX3ZwPNaMUsvYMYtGoL/eIymuGauS66JIzSmOMkP4NE9z9GeAdfELGdrxqK0cgj0sqM6Sa/a6NuxI5BCrENnHO763RvvF7jUlV4B8hOY7PHVvq/EQNSCJpHAyS1AQaWs8QZxHGq40oLu9a32IIU5Mc3dx7z76wGipNE0TT28W8WfnHd4hSrhz5MTSKvuW7C9q931W1Cqjo3KK/1Xpxx0ThVVBKTtWVLZhdU/9P8A3OUvIRheXDUmz4AwVFp0fKJsExgwmKUm8BJe26nmggb7XqpWr1t6BK1k7Al0togegyMTiKcCKjv2xwFliaRT7jUWQ3slyZeNnUmAjeTGCdM6wylAzGTqCcc68wGLieRSnjW2QrsjY6sieA6V4Hl0Q1noqx+xM5Xp4NC9hqYbcPXOgJiJ/CzjVmrg2pN5eIsk5YwGiUu4VZmI0E3imGipQtpeqS7Mwqhz7RnhlvFBQTahwu2nArmUGUm4TVMUmKkCRtIMA4jDVIQKpKX2Bov2XGiuQeVl+ahH2HxCD/eGhmpdp/ox2GOV4234PWe6CtUrTMmu9LIaxIkDAqIR75jqOAH4qMhdie299sGnAIaPkDeczWQe8fQNv/F4fAbJLZLZz/U5xQ9DaGDWLMvMq1zLv7mZDl8xMkgiGTU+gbfzDvX0csGFiceYNdAMQ1yyD1zz3AAMsrFdQOtHyCHUcRTb+Q3yBR2z/X7Wp3uxDvS7vj6AAtEu4OTKLAIr2Jg3W/2JsEyXGPrphKwCmds770kKhnewXuzhKITLMMJJ9iXYZX3vdBvlzANg3X4p5wK1CsjLpcfQ96OCV0juBL+6xVIFd2vawEMvEyl2fg+47xrQpIDroZHR1ZNGDJry5VPMBCusXZfjI83cDf2T2JOCxQSdb1VItAwzelXs8e2Vx5ajif5kvHVGvZLGMI9jrH9PWfsmAepWH9mLrH4mrJ2zYNAkLO7fOpjCHHRirfLA5G8In9usCX8x/Zm8zwHOnnhJr1d4E47rx9b24ncI2ARZClMrVFL9t344dKeZb1yBDL6ua+byl1jLl39vktXq8Ty/ET6+NRwHp84H59sXghPT24vhKcnqRfCw9MetPPs9EHyhfDUQKrhx2WS58GBkw030p/3/nUYBw=="
   },
   "navigation_search_add": {
     "uri": "https://img.mservice.com.vn/app/img/kits/navigation_search_add.png"
@@ -2640,7 +2640,7 @@
     "uri": "https://img.mservice.io/momo_app_v2/new_version/img/appx_icon/16_navigation_close_circle_full.png"
   },
   "16_navigation_close_circle": {
-    "uri": "https://img.mservice.io/momo_app_v2/new_version/img/appx_icon/16_navigation_close_circle.png"
+    "uri": "data:image/webp;base64,UklGRkICAABXRUJQVlA4TDUCAAAvP8APEM8x//M//wzbRlKcvMws3D1DYBwIAASMF4YAQCHQAAED7AAg8AMYB0DhQCMgGAnwAARuAAHcAABsSCQMYAgFAFIhSQDYtJHKzMzMzB3//2mWbdmahaMVR/QfgiS5cZsB4DskKoXzC7H/FklUBov99fENkd/zoJJwTKqzegmDvEIn5Y706CFQEo3Y0dm9m0AL9yIHNC/CSkLTlvhY5+N50q2XslGo+8lZ5w3HrchshMJhWGStRMGrHm0yFuSOArKtYpyqbhWnjgFvdw84tbF+RSfo1x2rGeX1LBlDS5gpLyPcafAvfvoxK4kC/IM4BnjRsxGzFB/gPZh4g6+tjdnDl+b4S1wAfXYgEQzghIkePM1NYsHDeqZUvYFbk24I4NJbWs9ISFqqG+X5NG/Ch3lZE3/AyZG+zjxAtGvs4/27pid6e//R6A6UkZSOjpBUVebCSzWZ93NNCgE3g441SFVWmQqoJvNB4xhI4pXu5JdkqKHwVtRgnNcQQClNmP4P2kJRU9XghLaMAE8qKgNQpphRijTms2SgspRMGKlI44lkqbKXdBmpSOOuJKhcJXVGKtI4SK4qD0mJEWphHEDkqnwlWcYo3jgrCfTQv6H/Cf1B5HG7+D15UyHLW3zdyDurG+R1i75u0tdtRN9o2/SNAqZv0Pct8r5J37fJ5wbyuYV+biKf22znxpb93Eg+t5LPzeRzO/XeQL63UO9NLve2tXlvW4eU672xOliqe+NywInY/4owAA=="
   },
   "16_navigation_close": {
     "uri": "https://img.mservice.io/momo_app_v2/new_version/img/appx_icon/16_navigation_close.png"
@@ -3918,7 +3918,7 @@
     "uri": "https://img.mservice.com.vn/app/img/kits/Phonebook-outline.png"
   },
   "ic_back": {
-    "uri": "https://img.mservice.com.vn/momo_app_v2/new_version/img/appx_icon/ic_back_ios.png"
+    "uri": "data:image/webp;base64,UklGRqIBAABXRUJQVlA4TJYBAAAvX8AXEFVActtIkjT//zRn9WzKYwOJRgQkAADLRtvOtm3btm3b9r1svWzbtm3btu27OHIkN26abK9JbpFIPuE+bAQmFS5c6qcQhrE34CPEZKHr9/kJf0SiUPENfAnNTcj4eH7FaRKiXoGBmyJ4PQILPUGwuwUmtHpgdLFV0RO1461eyDmQ2tsahZYTgY2tGZg54VjcWoabE4aprU1EOaEa3tpHnhOS7q1TNDkhaN66wpQTnKqtOxw5QRVsPeHvLRfSt16J9ZS49UGup/Ctb+o9BW790u/JbeufZU82/jecggWWvy3fnrT8bAX1pORrK7YnKe9byT1RetrKAe2hcqsM7PZwMVEP/h5A/Eb52039I3LfPlL/IUkvkHvA/7q+Lgm+t76u8ikm2/q+cC/37/e1/L5cTGHf1xUH1EX5ui4IqMLv69ID6up4X+AS01se0Ncc0Jcd0Ffm++JgIvxBX9+fS/TnKsHE8O1cqD/XKia+b+Zy/bniAXPRZlAd5ZjmA+bS1WDq51MVI+R2A4tKRx51UL6PD3EB"
   },
   "share": {
     "uri": "https://img.mservice.com.vn/app/img/mini-app-center/share.png"
@@ -3936,7 +3936,7 @@
     "uri": "https://img.mservice.com.vn/app/img/kits/error_mess_icon.png"
   },
   "media_fail": {
-    "uri": "https://static.momocdn.net/app/img/kits/media_fail.png"
+    "uri": "data:image/png;base64,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"
   },
   "ic_checked": {
     "uri": "https://img.mservice.com.vn/app/img/kits/checked_ic.png"
@@ -3949,5 +3949,83 @@
   },
   "ic_money_bag": {
     "uri": "https://static.momocdn.net/app/img/kits/ic_money_bag.png"
+  },
+  "basic_flaged": {
+    "uri": "https://static.momocdn.net/app/img/kits/basic_flaged.png"
+  },
+  "basic_user": {
+    "uri": "https://static.momocdn.net/app/img/kits/basic_user.png"
+  },
+  "media_player_play_not": {
+    "uri": "https://static.momocdn.net/app/img/kits/media_player_play_not.png"
+  },
+  "navigation_AR": {
+    "uri": "https://static.momocdn.net/app/img/kits/navigation_AR.png"
+  },
+  "navigation_scan_barcode": {
+    "uri": "https://static.momocdn.net/app/img/kits/navigation_scan_barcode.png"
+  },
+  "notifications_follow": {
+    "uri": "https://static.momocdn.net/app/img/kits/notifications_follow.png"
+  },
+  "notifications_followed": {
+    "uri": "https://static.momocdn.net/app/img/kits/notifications_followed.png"
+  },
+  "notifications_unfollow": {
+    "uri": "https://static.momocdn.net/app/img/kits/notifications_unfollow.png"
+  },
+  "reaction_disliked": {
+    "uri": "https://static.momocdn.net/app/img/kits/reaction_disliked.png"
+  },
+  "reaction_liked": {
+    "uri": "https://static.momocdn.net/app/img/kits/reaction_liked.png"
+  },
+  "travel_247": {
+    "uri": "https://static.momocdn.net/app/img/kits/travel_247.png"
+  },
+  "travel_children_area": {
+    "uri": "https://static.momocdn.net/app/img/kits/travel_children_area.png"
+  },
+  "travel_cooker": {
+    "uri": "https://static.momocdn.net/app/img/kits/travel_cooker.png"
+  },
+  "travel_dishwasher": {
+    "uri": "https://static.momocdn.net/app/img/kits/travel_dishwasher.png"
+  },
+  "travel_electronic_stove": {
+    "uri": "https://static.momocdn.net/app/img/kits/travel_electronic_stove.png"
+  },
+  "travel_friend_group": {
+    "uri": "https://static.momocdn.net/app/img/kits/travel_friend_group.png"
+  },
+  "travel_gas_stove": {
+    "uri": "https://static.momocdn.net/app/img/kits/travel_gas_stove.png"
+  },
+  "travel_kid_area": {
+    "uri": "https://static.momocdn.net/app/img/kits/travel_kid_area.png"
+  },
+  "travel_led_Light": {
+    "uri": "https://static.momocdn.net/app/img/kits/travel_led_Light.png"
+  },
+  "travel_light": {
+    "uri": "https://static.momocdn.net/app/img/kits/travel_light.png"
+  },
+  "travel_music": {
+    "uri": "https://static.momocdn.net/app/img/kits/travel_music.png"
+  },
+  "travel_outdoor_table": {
+    "uri": "https://static.momocdn.net/app/img/kits/travel_outdoor_table.png"
+  },
+  "travel_private_room": {
+    "uri": "https://static.momocdn.net/app/img/kits/travel_private_room.png"
+  },
+  "travel_romantic": {
+    "uri": "https://static.momocdn.net/app/img/kits/travel_romantic.png"
+  },
+  "travel_smoking": {
+    "uri": "https://static.momocdn.net/app/img/kits/travel_smoking.png"
+  },
+  "travel_suitcase": {
+    "uri": "https://static.momocdn.net/app/img/kits/travel_suitcase.png"
   }
 }