@momo-kits/foundation 0.169.7-beta.4 → 0.169.7-beta.5

package/Application/Components/useToolkitActions.tsx

@@ -15,7 +15,8 @@ type ToolkitActionsParams = {
 };
 
 /**
- * state and handlers behind the header toolkit buttons
+ * State and handlers behind the header toolkit: the favorite shortcut (kept in sync
+ * with the home), single tool or "more" shortcut, help center and close.
  */
 const useToolkitActions = ({
   preventClose,
@@ -31,20 +32,15 @@ const useToolkitActions = ({
   const [isFavorite, setIsFavorite] = useState<boolean>(false);
   const [isLoading, setIsLoading] = useState(false);
 
-  /**
-   * check app is favorite
-   */
-  const checkAppIsFavorite = useCallback(
-    () =>
-      navigator?.maxApi?.dispatchFunction?.(
-        'isFavoriteApp',
-        { code: context?.code },
-        (result: boolean) => {
-          setIsFavorite(result);
-        },
-      ),
-    [context?.code, navigator?.maxApi],
-  );
+  const checkAppIsFavorite = useCallback(() => {
+    return navigator?.maxApi?.dispatchFunction?.(
+      'isFavoriteApp',
+      { code: context?.code },
+      (result: boolean) => {
+        setIsFavorite(result);
+      },
+    );
+  }, [context?.code, navigator?.maxApi]);
 
   useEffect(() => {
     if (useShortcut) {
@@ -75,9 +71,6 @@ const useToolkitActions = ({
     }
   };
 
-  /**
-   * close navigation container
-   */
   const onClose = () => {
     const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
     context?.autoTracking?.({
@@ -107,9 +100,6 @@ const useToolkitActions = ({
     }
   };
 
-  /**
-   * on press shortcut
-   */
   const onPressShortcut = () => {
     const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
     const expected = !isFavorite;
@@ -139,9 +129,6 @@ const useToolkitActions = ({
     }, 1000);
   };
 
-  /**
-   * on press help center
-   */
   const onPressHelpCenter = () => {
     const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
     context?.autoTracking?.({
@@ -154,9 +141,6 @@ const useToolkitActions = ({
     navigator?.maxApi?.dispatchFunction?.('showHelpCenter', context);
   };
 
-  /**
-   * on press icon more
-   */
   const onPressIconMore = () => {
     const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
     context?.autoTracking?.({
@@ -200,9 +184,10 @@ const useToolkitActions = ({
     iconShortcut = 'navigation_more_icon';
     shortcutOnPress = onPressIconMore;
   } else if (isHaveOneTool) {
-    const singleTool = tools.find(
+    const singleToolGroup = tools.find(
       (group: ToolGroup) => group?.items?.length === 1,
-    )?.items[0];
+    );
+    const singleTool = singleToolGroup?.items[0];
     iconShortcut = singleTool?.icon;
     shortcutOnPress = () => {
       singleTool?.onPress?.();
@@ -216,9 +201,9 @@ const useToolkitActions = ({
     };
   }
 
-  const showBadge = tools.some((group: ToolGroup) =>
-    group?.items?.some?.(tool => tool?.showBadge),
-  );
+  const showBadge = tools.some((group: ToolGroup) => {
+    return group?.items?.some?.(tool => tool?.showBadge);
+  });
 
   return {
     isLoading,

package/Application/Localize.ts

@@ -2,6 +2,10 @@ import { NativeModules } from 'react-native';
 import { LocalizationObject } from './types';
 import defaultLanguage from '../Assets/language.json';
 
+/**
+ * String table for kit and feature copy. The language is read once from the
+ * native `RNResource` module at construction; Vietnamese is the default.
+ */
 class Localize {
   private assets: LocalizationObject;
   private readonly currentLanguage: 'en' | 'vi';
@@ -25,14 +29,17 @@ class Localize {
     return this.assets;
   }
 
+  /** Text for `key` in the current language, or the key itself if missing. */
   translate(key: string) {
     return this.assets[this.currentLanguage]?.[key] || key;
   }
 
+  /** Picks the current-language text of a `{ vi, en }` pair, else its JSON. */
   translateData(data: { vi: string; en: string }) {
     return data[this.currentLanguage] ?? JSON.stringify(data);
   }
 
+  /** Merges extra translations; keys that already exist keep their text. */
   addTranslations(translations: LocalizationObject) {
     this.assets = {
       vi: { ...translations?.vi, ...this.assets.vi },

package/Application/ModalScreen.tsx

@@ -24,10 +24,13 @@ import Navigation from './Navigation';
 import { ModalParams } from './types';
 import BottomSheet from './BottomSheet';
 import { isIPhoneDuo } from './utils';
-import { AdoptionProbe } from './KitAdoption';
 import { useModalLayout } from './modalLayout';
 import { scheduleOnRN } from 'react-native-worklets';
 
+/**
+ * Screen of the `Modal` route: a bottom sheet when pushed by
+ * `showBottomSheet`, otherwise a centered popup.
+ */
 const ModalScreen: React.FC<any> = props => {
   if (props.route?.params?.isBottomSheet) {
     return <BottomSheet {...props} />;
@@ -35,6 +38,10 @@ const ModalScreen: React.FC<any> = props => {
   return <Modal {...props} />;
 };
 
+/**
+ * Centered popup that fades and scales in over a scrim. On foldables it is
+ * centered in the modal placement area, at most a popup wide.
+ */
 const Modal: React.FC<ModalParams> = props => {
   const { navigator } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
@@ -51,9 +58,7 @@ const Modal: React.FC<ModalParams> = props => {
   const isDuo = isIPhoneDuo();
   const { isFoldable, placement, popup, scrimOpacity } = useModalLayout();
 
-  /**
-   * Fire auto_popup_displayed tracking event on mount
-   */
+  // Auto-tracks the popup as displayed on the current screen.
   useEffect(() => {
     navigator?.maxApi?.getDataObserver?.('current_screen', (curScreen: any) => {
       context.autoTracking({
@@ -183,12 +188,7 @@ const Modal: React.FC<ModalParams> = props => {
             modalStyle,
           ]}
         >
-          <AdoptionProbe
-            screenName={Component?.name || Component?.type?.name || 'Invalid'}
-            navigation={props.navigation}
-          >
-            <Component {...params} onRequestClose={onDismiss} />
-          </AdoptionProbe>
+          <Component {...params} onRequestClose={onDismiss} />
         </Animated.View>
       </KeyboardAvoidingView>
     </Container>

package/Application/Navigation.ts

@@ -11,6 +11,10 @@ export const WHITE_LIST = [
   'vn.momo.ekyc',
 ];
 
+/**
+ * Screen-level navigation handle given to features; `setOptions` enforces the
+ * design system's header rules before applying React Navigation options.
+ */
 class Navigation {
   instance: NavigationProp<any>;
   context: any;
@@ -21,39 +25,33 @@ class Navigation {
   }
 
   /**
-   * navigation options filter by design system rule
-   * @param params
+   * Drops header overrides the design system forbids: any `headerLeft`, and
+   * render-function `headerRight`/`headerTitle` outside `WHITE_LIST` apps.
    */
   private filterParams = (params: NavigationOptions) => {
+    const isWhiteListed = WHITE_LIST.includes(this.context?.appId);
+    const rightType = typeof params.headerRight;
+    const titleType = typeof params.headerTitle;
+    const isTitleRenderer = titleType !== 'string' && titleType !== 'object';
+
     if (params.headerLeft) {
       console.warn('headerLeft not allow override render by design system!');
       delete params.headerLeft;
     }
 
-    if (
-      params.headerRight &&
-      typeof params.headerRight !== 'object' &&
-      !WHITE_LIST.includes(this.context?.appId)
-    ) {
+    if (params.headerRight && rightType !== 'object' && !isWhiteListed) {
       console.warn('headerRight not allow type func render by design system!');
       delete params.headerRight;
     }
 
-    if (
-      params.headerTitle &&
-      !['string', 'object'].includes(typeof params.headerTitle) &&
-      !WHITE_LIST.includes(this.context?.appId)
-    ) {
+    if (params.headerTitle && isTitleRenderer && !isWhiteListed) {
       console.warn('headerTitle not allow type func render by design system!');
       delete params.headerTitle;
     }
     return params;
   };
 
-  /**
-   * navigation setOptions support props NavigationOptions base on react-navigation options
-   * @param params
-   */
+  /** Applies kit `NavigationOptions` to the screen after `filterParams`. */
   setOptions = (params: NavigationOptions) => {
     const options = getOptions(this.filterParams(params));
     this.instance.setOptions(options as StackNavigationOptions);

package/Application/NavigationContainer.tsx

@@ -30,10 +30,13 @@ import { HeaderBackground } from './Components/HeaderBackground';
 import { useScreenLayout } from '../Layout';
 import { getHeaderRowOptions } from '../Layout/utils';
 import { ReservedRegionsProvider } from '../Layout/ReservedRegions';
-import { AdoptionBadge } from './KitAdoption';
 
 const Stack = createStackNavigator();
 
+/**
+ * Root of a mini app: safe area, reserved regions and the merged mini app
+ * context around the kit's navigator.
+ */
 const NavigationContainer: React.FC<NavigationContainerProps> = ({
   screen,
   theme = defaultTheme,
@@ -87,13 +90,16 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
             initialParams={initialParams}
             localize={localize}
           />
-          <AdoptionBadge />
         </MiniAppContext.Provider>
       </ReservedRegionsProvider>
     </SafeAreaProvider>
   );
 };
 
+/**
+ * Stack navigator with its `Stack`, `Dialog` and `Modal` routes, under an
+ * `ApplicationContext` carrying the navigator, themed fonts and `translate`.
+ */
 const Navigation: React.FC<any> = ({
   screen,
   theme = defaultTheme,
@@ -111,9 +117,10 @@ const Navigation: React.FC<any> = ({
   const syncCanGoBack = useNativeCanGoBack();
   const isWhiteList = isWhiteListDesignSystem(context);
   const fontFamily = isWhiteList ? 'MomoTrustSans' : 'SFProText';
-  const navigationFontFamily = isWhiteList
-    ? 'MomoTrustSans-Regular'
-    : 'SFProText';
+  let navigationFontFamily = 'SFProText';
+  if (isWhiteList) {
+    navigationFontFamily = 'MomoTrustSans-Regular';
+  }
   let headerBackground = context?.designSystemConfig?.config?.headerBar;
   let headerGradient = theme.colors?.gradient;
 
@@ -124,15 +131,9 @@ const Navigation: React.FC<any> = ({
     headerGradient = context?.designSystemConfig?.config?.headerGradient;
   }
 
-  /**
-   * inject data for navigator
-   */
   navigator.current.maxApi = maxApi;
 
-  /**
-   * translate context method
-   * @param data
-   */
+  /** Text for a localization key, or the current-language side of `{ vi, en }`. */
   const translate = (data?: string | { vi: string; en: string }) => {
     if (data && typeof data !== 'string') {
       return localize?.translateData(data);
@@ -230,12 +231,12 @@ const Navigation: React.FC<any> = ({
                   backgroundColor: theme.colors.background.default,
                 },
                 headerLeft: (props: any) => <HeaderLeft {...props} floating />,
-                headerBackground: (props: any) => (
-                  <HeaderBackground {...props} />
-                ),
-                headerRight: (props: any) => (
-                  <HeaderRight {...props} floating />
-                ),
+                headerBackground: (props: any) => {
+                  return <HeaderBackground {...props} />;
+                },
+                headerRight: (props: any) => {
+                  return <HeaderRight {...props} floating />;
+                },
                 headerTintColor: Colors.black_17,
                 ...TransitionPresets.ModalTransition,
               }}

package/Application/Navigator.ts

@@ -1,6 +1,10 @@
 import {CommonActions, StackActions} from '@react-navigation/native';
 import {BottomSheetParams, ModalParams, ScreenParams} from './types';
 
+/**
+ * Imperative navigation API exposed to features through `ApplicationContext`.
+ * Every action is a no-op until the container reports ready.
+ */
 class Navigator {
   ref?: any;
   isReady?: any;
@@ -14,40 +18,28 @@ class Navigator {
     this.isWidget = isWidget;
   }
 
-  /**
-   * push new stack screen
-   * @param params
-   */
+  /** Pushes a new stack screen. */
   push = (params: ScreenParams) => {
     if (this.isReady.current) {
       this.ref.current?.dispatch?.(StackActions.push('Stack', params));
     }
   };
 
-  /**
-   * replace current screen with new screen
-   * @param params
-   */
+  /** Replaces the current screen with a new stack screen. */
   replace = (params: ScreenParams) => {
     if (this.isReady.current) {
       this.ref.current?.dispatch?.(StackActions.replace('Stack', params));
     }
   };
 
-  /**
-   * pop to dismiss a screen
-   * @param count
-   */
+  /** Pops `count` screens, 1 by default. */
   pop = (count?: number) => {
     if (this.isReady.current) {
       this.ref.current?.dispatch?.(StackActions.pop(count ?? 1));
     }
   };
 
-  /**
-   * present a new screen, show from bottom iOS
-   * @param params
-   */
+  /** Presents a screen as a dialog (slides up from the bottom on iOS). */
   present = (params: ScreenParams) => {
     if (this.isReady.current) {
       this.ref.current?.dispatch?.(StackActions.push('Dialog', params));
@@ -55,9 +47,8 @@ class Navigator {
   };
 
   /**
-   * show a modal popup
-   * @param params
-   * @param onError
+   * Shows a modal popup; inside a widget it always uses the native modal.
+   * Failures are reported through `onError` instead of throwing.
    */
   showModal = (params: ModalParams, onError?: (error: string) => void) => {
     try {
@@ -76,11 +67,7 @@ class Navigator {
     }
   };
 
-  /**
-   * show a bottom sheet
-   * @param params
-   * @param onError
-   */
+  /** Shows a bottom sheet through the modal route; failures go to `onError`. */
   showBottomSheet = (
     params: BottomSheetParams,
     onError?: (error: string) => void
@@ -102,31 +89,21 @@ class Navigator {
     }
   };
 
-  /**
-   * pop all screen route
-   */
+  /** Pops back to the first screen of the stack. */
   popToTop = () => {
     if (this.isReady.current) {
       this.ref.current?.dispatch?.(StackActions.popToTop());
     }
   };
 
-  /**
-   * navigate route name bottom tab only
-   * @param name
-   */
+  /** Navigates to a route by name; meant for bottom tab routes only. */
   navigate = (name: string) => {
     if (this.isReady.current) {
-      this.ref.current?.dispatch?.(
-        CommonActions.navigate(name)
-      );
+      this.ref.current?.dispatch?.(CommonActions.navigate(name));
     }
   };
 
-  /**
-   * reset a navigation flow with new screen
-   * @param params
-   */
+  /** Resets the flow to a single new stack screen. */
   reset = (params: ScreenParams) => {
     if (this.isReady.current) {
       this.ref.current?.dispatch?.(
@@ -144,26 +121,21 @@ class Navigator {
     }
   };
 
-  /**
-   * dismiss a feature data
-   * @param data
-   */
+  /** Sets the payload the header passes to `maxApi.dismiss` on close. */
   setDismissData = (data: any) => {
     this.dismissData = data;
   };
 
   /**
-   * set app context using for features of kit
-   * @param context
+   * No-op placeholder; `NavigationContainer` and `WidgetContainer` replace it
+   * with their context state setter.
    */
-  setCurrentContext = (context: {
+  setCurrentContext = (_context: {
     code?: string;
     name?: {vi: string; en: string};
     description?: {vi: string; en: string};
     icon?: string;
-  }) => {
-    console.log(context);
-  };
+  }) => {};
 }
 
 export default Navigator;

package/Application/ScaleSizeProvider.tsx

@@ -1,16 +1,23 @@
-import React, { FC } from 'react';
-import { ScaleSizeContext } from '../Context';
+import React, { FC, useContext, useMemo } from 'react';
+import { MiniAppContext } from '../Context';
 import { ScaleSizeProviderProps } from './types';
 
-/** @deprecated Max font scale is fixed at 1.5; this provider no longer affects scaling. */
+/**
+ * Caps the font scale of its subtree at `scaleSizeMaxRate` × the design size
+ * (`useScaleSize`), passed down in MiniAppContext. The nearest provider wins;
+ * an undefined rate lifts an outer cap.
+ */
 const ScaleSizeProvider: FC<ScaleSizeProviderProps> = ({
   scaleSizeMaxRate,
   children,
 }) => {
+  const context = useContext<object | undefined>(MiniAppContext);
+  const value = useMemo(() => {
+    return { ...context, scaleSizeMaxRate };
+  }, [context, scaleSizeMaxRate]);
+
   return (
-    <ScaleSizeContext.Provider value={{ scaleSizeMaxRate }}>
-      {children}
-    </ScaleSizeContext.Provider>
+    <MiniAppContext.Provider value={value}>{children}</MiniAppContext.Provider>
   );
 };
 

package/Application/StackScreen.tracking.ts

@@ -1,26 +1,24 @@
 import { Alert } from 'react-native';
 import { version } from '../package.json';
-import { getAdoptionTrackingParams } from './KitAdoption';
-import type { AdoptionMeasureRef } from './KitAdoption/types';
 
 type ScreenTrackingDeps = {
   tracking: { current: any };
   context: any;
   navigator: any;
   screenName: string;
-  adoptionMeasure?: AdoptionMeasureRef;
 };
 
+/**
+ * Auto-tracking reporters of a stack screen. Each event fires at most once per
+ * screen, guarded by the `release*` flags on `tracking.current`.
+ */
 export const createScreenTracking = ({
   tracking,
   context,
   navigator,
   screenName,
-  adoptionMeasure,
 }: ScreenTrackingDeps) => {
-  /**
-   * tracking for screen load
-   */
+  /** Reports the screen load time. */
   const onScreenLoad = () => {
     if (!tracking.current?.releaseLoad) {
       let timeLoad = tracking.current.timeLoad;
@@ -28,8 +26,6 @@ export const createScreenTracking = ({
         timeLoad = tracking.current.endTime - tracking.current.startTime;
       }
 
-      const adoption = getAdoptionTrackingParams(adoptionMeasure?.current?.());
-
       context?.autoTracking?.({
         ...context,
         screenName,
@@ -40,7 +36,6 @@ export const createScreenTracking = ({
         params: tracking.current.params,
         version: version,
         lastElement: tracking.current.lastElement,
-        adoption,
       });
       navigator?.maxApi?.stopTrace?.(
         tracking.current.traceIdLoad,
@@ -49,29 +44,22 @@ export const createScreenTracking = ({
       );
       tracking.current.releaseLoad = true;
 
-      /**
-       * debug
-       */
       navigator?.maxApi?.showToastDebug?.({
         appId: context.appId,
         message: `${screenName} screen_load_time ${timeLoad}`,
         type: 'ERROR',
       });
-      if (
-        __DEV__ &&
-        tracking.current.lastElement?.children?.current?.length > 0
-      ) {
+      const lastChildren = tracking.current.lastElement?.children?.current;
+      if (__DEV__ && lastChildren?.length > 0) {
         Alert.alert(
           `${screenName}- load ${timeLoad}ms`,
-          JSON.stringify(tracking.current.lastElement?.children?.current),
+          JSON.stringify(lastChildren),
         );
       }
     }
   };
 
-  /**
-   * tracking for screen load
-   */
+  /** Reports the time until the screen became interactive. */
   const onScreenInteraction = () => {
     if (!tracking.current?.releaseInteraction) {
       let timeLoad = tracking.current.timeLoad;
@@ -99,9 +87,6 @@ export const createScreenTracking = ({
       );
       tracking.current.releaseInteraction = true;
 
-      /**
-       * debug toast
-       */
       navigator?.maxApi?.showToastDebug?.({
         appId: context.appId,
         message: `${screenName} screen_interaction_time ${tracking.current.timeInteraction}`,
@@ -110,9 +95,7 @@ export const createScreenTracking = ({
     }
   };
 
-  /**
-   * tracking for first interaction by user
-   */
+  /** Reports the user's first interaction with the screen. */
   const onFirstInteraction = (action: string) => {
     if (!tracking.current?.releaseUserInteraction) {
       const timeLoad = tracking.current.endTime - tracking.current.startTime;
@@ -126,9 +109,6 @@ export const createScreenTracking = ({
       });
       tracking.current.releaseUserInteraction = true;
 
-      /**
-       * debug
-       */
       navigator?.maxApi?.showToastDebug?.({
         appId: context.appId,
         message: `${screenName} user_interaction ${timeLoad}`,
@@ -137,9 +117,7 @@ export const createScreenTracking = ({
     }
   };
 
-  /**
-   * tracking for loading screen
-   */
+  /** Reports how long the skeleton loading state lasted. */
   const onScreenLoading = () => {
     const start = tracking.current.timeStartLoading;
     const end = tracking.current.timeEndLoading;