@momo-kits/foundation 0.150.2-phuc.13 → 0.150.2-scaleSize.35

package/Application/StackScreen.tsx

@@ -1,17 +1,12 @@
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-} from 'react';
+import React, { useContext, useEffect, useLayoutEffect, useRef } from 'react';
 import { Alert, InteractionManager } from 'react-native';
 import { useHeaderHeight } from '@react-navigation/elements';
 import { ScreenTrackingParams } from './types';
 import Navigation from './Navigation';
-import { ApplicationContext, MiniAppContext, ScreenContext } from './index';
+import { ApplicationContext, MiniAppContext, ScreenContext } from '../Context';
 import { GridSystem } from '../Layout';
 import { version } from '../package.json';
+import { useAppState } from './utils';
 
 const runAfterInteractions = InteractionManager.runAfterInteractions;
 
@@ -54,6 +49,7 @@ const StackScreen: React.FC<any> = props => {
   } = props.route.params;
   const navigation = useRef(new Navigation(props.navigation, context)).current;
   const heightHeader = useHeaderHeight();
+  const { isBackgroundToForeground } = useAppState();
 
   const data = {
     ...initialParams,
@@ -75,11 +71,81 @@ const StackScreen: React.FC<any> = props => {
     }
   }, [navigation, options]);
 
-  const onScreenNavigated = useCallback(
-    (preScreenName: string, screenName: string) => {
-      const data: any = {
-        preScreenName,
-        screenName,
+  /**
+   * tracking for screen
+   */
+  useEffect(() => {
+    let focusScreen: any;
+    let onFocusApp: any;
+    if (['Invalid', 'screen'].includes(screenName)) {
+      navigator?.maxApi?.showPopup?.('notice', {
+        title: 'Invalid screen name',
+        message:
+          'Your screen has not been rendered because Platform has not detected the screen name. Please migrate to support this feature.',
+      });
+    }
+
+    if (!bottomTab) {
+      focusScreen = props.navigation.addListener('focus', () => {
+        navigator?.maxApi?.getDataObserver?.('current_screen', (item: any) => {
+          onScreenNavigated(item?.screenName, screenName);
+          navigator?.maxApi?.setObserver?.('current_screen', { screenName });
+        });
+      });
+      onFocusApp = navigator?.maxApi?.listen?.('onFocusApp', () => {
+        if (props.navigation.isFocused()) {
+          navigator?.maxApi?.getDataObserver?.(
+            'current_screen',
+            (item: any) => {
+              onScreenNavigated(item?.screenName, screenName);
+              navigator?.maxApi?.setObserver?.('current_screen', {
+                screenName,
+              });
+            },
+          );
+        }
+      });
+    }
+
+    navigator?.maxApi?.startTraceScreenLoad?.(
+      screenName,
+      context,
+      (item: any) => {
+        tracking.current.traceIdLoad = item?.traceId;
+      },
+    );
+    navigator?.maxApi?.startTraceScreenInteraction?.(
+      screenName,
+      context,
+      (item: any) => {
+        tracking.current.traceIdInteraction = item?.traceId;
+      },
+    );
+
+    tracking.current.timeoutTracking = setTimeout(() => {
+      onScreenLoad();
+      onScreenInteraction();
+    }, 5000);
+
+    return () => {
+      onScreenLoad();
+      onScreenInteraction();
+      clearTimeout(tracking.current.timeoutLoad);
+      clearTimeout(tracking.current.timeoutInteraction);
+      clearTimeout(tracking.current.timeoutTracking);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      clearTimeout(tracking.current.timeoutLoading);
+      focusScreen?.();
+      onFocusApp?.remove?.();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onScreenNavigated = (pre: string, current: string) => {
+    if (!isBackgroundToForeground) {
+      const item: any = {
+        preScreenName: pre,
+        screenName: current,
         componentName: 'Screen',
         state: 'navigated',
         action: tracking.current?.mounted ? 'back' : 'push',
@@ -87,7 +153,7 @@ const StackScreen: React.FC<any> = props => {
 
       context?.autoTracking?.({
         ...context,
-        ...data,
+        ...item,
       });
 
       tracking.current.mounted = true;
@@ -100,14 +166,13 @@ const StackScreen: React.FC<any> = props => {
         message: `${screenName} screen_navigated`,
         type: 'ERROR',
       });
-    },
-    [context, navigator?.maxApi],
-  );
+    }
+  };
 
   /**
    * tracking for screen load
    */
-  const onScreenLoad = useCallback(() => {
+  const onScreenLoad = () => {
     if (!tracking.current?.releaseLoad) {
       let timeLoad = tracking.current.timeLoad;
       if (timeLoad === 0) {
@@ -150,12 +215,12 @@ const StackScreen: React.FC<any> = props => {
         );
       }
     }
-  }, [context, navigator?.maxApi, screenName]);
+  };
 
   /**
    * tracking for screen load
    */
-  const onScreenInteraction = useCallback(() => {
+  const onScreenInteraction = () => {
     if (!tracking.current?.releaseInteraction) {
       let timeLoad = tracking.current.timeLoad;
       if (timeLoad === 0) {
@@ -191,130 +256,7 @@ const StackScreen: React.FC<any> = props => {
         type: 'ERROR',
       });
     }
-  }, [context, navigator?.maxApi, screenName]);
-
-  /**
-   * tracking for screen
-   */
-  useEffect(() => {
-    let focusScreen: any;
-    let onFocusApp: any;
-    if (['Invalid', 'screen'].includes(screenName)) {
-      navigator?.maxApi?.showPopup?.('notice', {
-        title: 'Invalid screen name',
-        message:
-          'Your screen has not been rendered because Platform has not detected the screen name. Please migrate to support this feature.',
-      });
-    }
-
-    if (!bottomTab) {
-      focusScreen = props.navigation.addListener('focus', () => {
-        navigator?.maxApi?.getDataObserver?.('current_screen', (data: any) => {
-          onScreenNavigated(data?.screenName, screenName);
-          navigator?.maxApi?.setObserver?.('current_screen', { screenName });
-        });
-      });
-      onFocusApp = navigator?.maxApi?.listen?.('onFocusApp', () => {
-        if (props.navigation.isFocused()) {
-          navigator?.maxApi?.getDataObserver?.(
-            'current_screen',
-            (data: any) => {
-              onScreenNavigated(data?.screenName, screenName);
-              navigator?.maxApi?.setObserver?.('current_screen', {
-                screenName,
-              });
-            },
-          );
-        }
-      });
-    }
-
-    navigator?.maxApi?.startTraceScreenLoad?.(
-      screenName,
-      context,
-      (data: any) => {
-        tracking.current.traceIdLoad = data?.traceId;
-      },
-    );
-    navigator?.maxApi?.startTraceScreenInteraction?.(
-      screenName,
-      context,
-      (data: any) => {
-        tracking.current.traceIdInteraction = data?.traceId;
-      },
-    );
-
-    tracking.current.timeoutTracking = setTimeout(() => {
-      onScreenLoad();
-      onScreenInteraction();
-    }, 5000);
-
-    return () => {
-      onScreenLoad();
-      onScreenInteraction();
-      clearTimeout(tracking.current.timeoutLoad);
-      clearTimeout(tracking.current.timeoutInteraction);
-      clearTimeout(tracking.current.timeoutTracking);
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      clearTimeout(tracking.current.timeoutLoading);
-      focusScreen?.();
-      onFocusApp?.remove?.();
-    };
-  }, [
-    bottomTab,
-    context,
-    navigator?.maxApi,
-    onScreenInteraction,
-    onScreenLoad,
-    onScreenNavigated,
-    props.navigation,
-    screenName,
-  ]);
-
-  /**
-   * tracking for screen
-   */
-  useEffect(() => {
-    if (['Invalid', 'screen'].includes(screenName)) {
-      navigator?.maxApi?.showPopup?.('notice', {
-        title: 'Invalid screen name',
-        message:
-          'Your screen has not been rendered because Platform has not detected the screen name. Please migrate to support this feature.',
-      });
-    }
-
-    navigator?.maxApi?.startTraceScreenLoad?.(
-      screenName,
-      context,
-      (item: any) => {
-        tracking.current.traceIdLoad = item?.traceId;
-      },
-    );
-    navigator?.maxApi?.startTraceScreenInteraction?.(
-      screenName,
-      context,
-      (item: any) => {
-        tracking.current.traceIdInteraction = item?.traceId;
-      },
-    );
-
-    tracking.current.timeoutTracking = setTimeout(() => {
-      onScreenLoad();
-      onScreenInteraction();
-    }, 5000);
-
-    return () => {
-      onScreenLoad();
-      onScreenInteraction();
-    };
-  }, [
-    context,
-    navigator?.maxApi,
-    onScreenInteraction,
-    onScreenLoad,
-    props.navigation,
-    screenName,
-  ]);
+  };
 
   /**
    * tracking for first interaction by user
@@ -343,16 +285,19 @@ const StackScreen: React.FC<any> = props => {
     }
   };
 
+  /**
+   * tracking for loading screen
+   */
   const onScreenLoading = () => {
-    if (!tracking.current?.releaseLoading) {
-      const timeLoad =
-        tracking.current.timeEndLoading - tracking.current.timeStartLoading;
+    const start = tracking.current.timeStartLoading;
+    const end = tracking.current.timeEndLoading;
+    if (!tracking.current?.releaseLoading && start && end && end > start) {
       context?.autoTracking?.({
         ...context,
         screenName,
         componentName: 'Screen',
         state: 'loading',
-        duration: timeLoad,
+        duration: end - start,
         loadingType: 'skeleton',
       });
       tracking.current.releaseLoading = true;
@@ -369,7 +314,7 @@ const StackScreen: React.FC<any> = props => {
            */
           if (item?.componentName === 'Widget') {
             const index = widgets.current.findIndex(
-              (e: any) => e.componentId === item.componentId,
+              (element: any) => element.componentId === item.componentId,
             );
             const time = Date.now() - tracking.current.startTime;
             if (index === -1) {
@@ -404,8 +349,8 @@ const StackScreen: React.FC<any> = props => {
           /**
            * support for debug last element
            */
-          if (data?.componentName) {
-            tracking.current.lastElement = data;
+          if (item?.componentName) {
+            tracking.current.lastElement = item;
           }
 
           /**
@@ -414,7 +359,7 @@ const StackScreen: React.FC<any> = props => {
           if (item?.interaction) {
             onScreenLoad();
             onScreenInteraction();
-            onFirstInteraction(data?.action);
+            onFirstInteraction(item?.action);
           }
           /**
            * timeout for handle tracking screen
@@ -439,7 +384,6 @@ const StackScreen: React.FC<any> = props => {
           /**
            * tracking for loading screen
            */
-          clearTimeout(tracking.current.timeoutLoading);
           if (!loading) {
             tracking.current.timeEndLoading = Date.now();
           }
@@ -447,12 +391,13 @@ const StackScreen: React.FC<any> = props => {
           /**
            * timeout for handle tracking screen
            */
+          clearTimeout(tracking.current.timeoutLoading);
           tracking.current.timeoutLoading = setTimeout(() => {
             onScreenLoading();
           }, 2000);
         },
-        onSetParams: (data: ScreenTrackingParams) => {
-          tracking.current.params = data;
+        onSetParams: (item: ScreenTrackingParams) => {
+          tracking.current.params = item;
         },
       }}
     >

package/Application/WidgetContainer.tsx

@@ -2,7 +2,7 @@ import React, { useContext, useRef, useState } from 'react';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import Navigator from './Navigator';
 import { WidgetContainerProps } from './types';
-import { ApplicationContext, MiniAppContext } from './index';
+import { ApplicationContext, MiniAppContext } from '../Context';
 import Localize from './Localize';
 import { defaultTheme } from '../Consts';
 import {

package/Application/index.ts

@@ -1,48 +1,29 @@
-import { Platform } from 'react-native';
-import { createContext } from 'react';
 import { NavigationContainer } from './NavigationContainer';
 import { WidgetContainer } from './WidgetContainer';
 import Localize from './Localize';
 import BottomTab from './BottomTab';
-import { defaultContext } from '../Consts';
-import {
-  HeaderAnimated,
-  HeaderBackground,
-  HeaderTitle,
-  NavigationButton,
-} from './Components';
-import { setAutomationID, useComponentId, exportHeaderTitle } from './utils';
-import Navigation from './Navigation';
-import Navigator from './Navigator';
 
-const Context = createContext({});
-const ApplicationContext = createContext(defaultContext);
+export * from './Components/BackgroundImageView';
+export * from './Components/HeaderAnimated';
+export * from './Components/HeaderBackground';
+export * from './Components/HeaderExtendHeader';
+export * from './Components/HeaderLeft';
+export * from './Components/HeaderRight';
+export * from './Components/HeaderTitle';
+export * from './Components/NavigationButton';
+export * from './Components/SearchHeader';
 
-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,
-});
+import { exportHeaderTitle, setAutomationID, useComponentId } from './utils';
+import Navigation from './Navigation';
+import Navigator from './Navigator';
 
 export {
-  ApplicationContext,
-  MiniAppContext,
-  ScreenContext,
-  ComponentContext,
-  SkeletonContext,
   NavigationContainer,
   WidgetContainer,
   Localize,
-  HeaderTitle,
-  HeaderBackground,
-  NavigationButton,
   BottomTab,
-  HeaderAnimated,
   setAutomationID,
   useComponentId,
-  TrackingScopeContext,
   Navigation,
   Navigator,
   exportHeaderTitle,

package/Application/types.ts

@@ -1,17 +1,54 @@
-import {EventArg} from '@react-navigation/core';
-import {StackNavigationOptions} from '@react-navigation/stack';
-import React, {ReactNode} from 'react';
+import { EventArg } from '@react-navigation/core';
+import { StackNavigationOptions } from '@react-navigation/stack';
+import React, { ReactNode } from 'react';
 import {
   Animated,
   TouchableOpacityProps,
   ViewProps,
   ViewStyle,
 } from 'react-native';
-import {PopupNotifyProps} from '../Popup/types';
-import Localize from './Localize';
-import Navigation from './Navigation';
-import Navigator from './Navigator';
-import {InputRef, InputSearchProps} from '../Input';
+import { PopupNotifyProps } from '../Popup/types';
+import { InputRef, InputSearchProps } from '../Input';
+
+export type NavigationProps = {
+  context: any;
+  setOptions: (params: NavigationOptions) => void;
+};
+
+export type NavigatorProps = {
+  ref?: any;
+  isReady?: any;
+  isWidget?: any;
+  maxApi?: any;
+  dismissData?: any;
+  push: (params: ScreenParams) => void;
+  replace: (params: ScreenParams) => void;
+  pop: (count?: number) => void;
+  present: (params: ScreenParams) => void;
+  showModal: (params: ModalParams, onError?: (error: string) => void) => void;
+  showBottomSheet: (
+    params: BottomSheetParams,
+    onError?: (error: string) => void,
+  ) => void;
+  popToTop: () => void;
+  navigate: (name: string) => void;
+  reset: (params: ScreenParams) => void;
+  setDismissData: (data: any) => void;
+  setCurrentContext: (context: {
+    code?: string;
+    name?: { vi: string; en: string };
+    description?: { vi: string; en: string };
+    icon?: string;
+  }) => void;
+};
+
+export type LocalizeProps = {
+  getCurrentLanguage: 'en' | 'vi';
+  getAssets: LocalizationObject;
+  translate: (key: string) => string;
+  translateData: (data: { vi: string; en: string }) => string;
+  addTranslations: (translations: LocalizationObject) => void;
+};
 
 export type Theme = {
   dark: boolean;
@@ -72,9 +109,9 @@ export type Theme = {
 export type Context = {
   [key: string]: any;
   theme: Theme;
-  navigator?: Navigator;
+  navigator?: NavigatorProps;
   showGrid?: boolean;
-  translate?: (data: string | {vi: string; en: string}) => string;
+  translate?: (data: string | { vi: string; en: string }) => string;
 };
 
 export type LocalizationObject = {
@@ -87,39 +124,47 @@ export type LocalizationObject = {
 };
 
 export type ToolGroup = {
-  title: {vi: string; en: string};
+  title: { vi: string; en: string };
   items: Tool[];
 };
 
 export type Tool = {
   icon: string;
-  name: {vi: string; en: string};
+  name: { vi: string; en: string };
   key: string;
   showBadge?: boolean;
   showRightIcon?: boolean;
   onPress: () => void;
 };
 
+export type FeaturesFlag = {
+  enableForceFoundationList?: boolean;
+  enableBottomTabAnimation?: boolean;
+  enableHapticBottomTab?: boolean;
+  enableHapticDialog?: boolean;
+};
+
 export type NavigationContainerProps = {
   screen: React.ComponentType<NavigationScreenProps>;
   options?: NavigationOptions;
   theme?: Theme;
   maxApi: any;
   initialParams?: any;
-  localize: Localize;
+  localize: LocalizeProps;
+  features: FeaturesFlag;
 };
 
 export type WidgetContainerProps = {
   widget: React.ComponentType<any>;
   theme?: Theme;
   maxApi: any;
-  localize: Localize;
+  localize: LocalizeProps;
 };
 
 export type NavigationScreenProps = {
   [key: string]: any;
   options?: NavigationOptions;
-  navigation: Navigation;
+  navigation: NavigationProps;
 };
 
 export type ScreenParams = {
@@ -157,9 +202,12 @@ export type BottomSheetParams = {
   useBottomInset?: boolean;
   useKeyboardAvoidingView?: boolean;
   keyboardVerticalOffset?: number;
-  useScrollOverflow?: boolean;
   useDivider?: boolean;
   footerComponent?: React.ReactNode;
+  leftOptions?: {
+    iconLeft?: string;
+    onPressIconLeft?: () => void;
+  };
 };
 
 export interface NavigationButtonProps extends TouchableOpacityProps {
@@ -263,14 +311,13 @@ export type BottomTabProps = {
   nested?: boolean;
   tabs: BottomTabItemProps[];
   initialRouteName?: string;
-  navigation: Navigation;
+  navigation: NavigationProps;
   listeners?: {
     tabPress?: (e: EventArg<'tabPress', true, undefined>) => void;
     focus?: (e: EventArg<'focus', false, unknown>) => void;
     blur?: (e: EventArg<'blur', false, unknown>) => void;
   };
   floatingButton?: FloatingButtonProps;
-  useAnimation?: boolean;
 };
 
 export type FloatingButtonProps = {
@@ -292,4 +339,5 @@ export interface SearchHeaderProps extends InputSearchProps {
   headerRightWidth?: 0 | 74 | 110 | number;
   leftPosition?: 12 | 48 | number;
   renderButtons?: () => ReactNode;
+  hiddenBack?: boolean;
 }

package/Application/utils.tsx

@@ -1,19 +1,20 @@
-import React, { useContext, useMemo } from 'react';
+import React, { useContext, useEffect, useMemo, useRef } from 'react';
 import {
   StackNavigationOptions,
   TransitionPresets,
 } from '@react-navigation/stack';
-import {
-  HeaderBackground,
-  HeaderLeft,
-  HeaderRight,
-  HeaderTitle,
-  TitleCustom,
-} from './Components';
-import { HeaderTitleProps, NavigationOptions } from './types';
+import type { HeaderTitleProps, NavigationOptions } from './types';
 import { Colors, Spacing } from '../Consts';
-import { Animated, Platform } from 'react-native';
-import { MiniAppContext, ScreenContext, TrackingScopeContext } from './index';
+import { Animated, AppState, Platform } from 'react-native';
+import {
+  MiniAppContext,
+  ScreenContext,
+  TrackingScopeContext,
+} from '../Context';
+import { HeaderTitle, TitleCustom } from './Components/HeaderTitle';
+import { HeaderBackground } from './Components/HeaderBackground';
+import { HeaderLeft } from './Components/HeaderLeft';
+import { HeaderRight } from './Components/HeaderRight';
 
 /**
  * default options for stack screen
@@ -197,12 +198,34 @@ const useComponentId = (componentName: string, accessibilityLabel?: string) => {
   return { componentId };
 };
 
-export const getImageName = (source: any): string => {
-  const parts = source?.uri?.split?.('/');
-  if (parts?.length > 0) {
-    return parts?.[parts.length - 1];
-  }
-  return '';
+const useAppState = () => {
+  const isBackgroundToForeground = useRef(false);
+  const appState = useRef(AppState.currentState);
+
+  useEffect(() => {
+    const subscription = AppState.addEventListener('change', nextAppState => {
+      isBackgroundToForeground.current = !!(
+        appState.current.match(/inactive|background/) &&
+        nextAppState === 'active'
+      );
+      appState.current = nextAppState;
+
+      if (isBackgroundToForeground.current) {
+        setTimeout(() => {
+          isBackgroundToForeground.current = false;
+        }, 100);
+      }
+    });
+
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
+  return {
+    isBackgroundToForeground: isBackgroundToForeground.current,
+    appState: appState.current,
+  };
 };
 
 export {
@@ -212,4 +235,5 @@ export {
   exportHeaderTitle,
   setAutomationID,
   useComponentId,
+  useAppState,
 };

package/Assets/language.json

@@ -98,7 +98,9 @@
     "tutorial": "Hướng dẫn sử dụng",
     "question": "Câu hỏi thường gặp",
     "support": "Trung tâm hỗ trợ",
-    "skip": "Bỏ qua"
+    "skip": "Bỏ qua",
+    "enterPhoneNumber": "Vui lòng nhập số điện thoại",
+    "invalidPhoneNumber": "Số điện thoại không đúng"
   },
   "en": {
     "seeMore": "See more",
@@ -199,6 +201,8 @@
     "question": "FAQ",
     "support": "Support center",
     "errorCode": "Error code: ",
-    "skip": "Skip"
+    "skip": "Skip",
+    "enterPhoneNumber": "Please enter your phone number",
+    "invalidPhoneNumber": "Invalid phone number"
   }
 }