@momo-kits/foundation 0.168.1-beta.37 → 0.168.1-beta.39

package/Application/Components/HeaderToolkitAction.tsx

@@ -4,17 +4,19 @@ import { NavigationButton } from './NavigationButton';
 import { MiniAppContext } from '../../Context';
 import { Colors, Spacing, Styles } from '../../Consts';
 import { Icon } from '../../Icon';
-import { DuoMetrics, useScreenLayout } from '../../Layout/utils';
+import { DuoMetrics } from '../../Layout/utils';
 import { SideBarButton, SideBarGroup, SideBarGroupItem } from './SideBarButton';
 import { useDuoBarCompression } from '../BottomTab/DuoBarCompression';
 import { styles } from './HeaderRight.styles';
 import { useToolkitActions } from './useToolkitActions';
+import { HeaderBarMetrics } from '../headerLayout';
 
 const CLOSE_ICON = '16_navigation_close_circle';
 const HOME_ICON = '16_basic_home';
 
 /**
- * Header toolkit action
+ * Header toolkit: optional shortcut plus the help center / close capsule. When
+ * `vertical` (iPhone Duo side bar) it reports its height and may fold into one button.
  */
 const HeaderToolkitAction: React.FC<any> = ({
   tintColor,
@@ -27,9 +29,9 @@ const HeaderToolkitAction: React.FC<any> = ({
   vertical = false,
 }) => {
   const context = useContext<any>(MiniAppContext);
-  const { toolbarCompressed, toolbarHidden, expandToolbar, setToolbarHeight } =
-    useDuoBarCompression();
-  const { statusBarClearance } = useScreenLayout();
+  const compression = useDuoBarCompression();
+  const { toolbarCompressed, toolbarHidden } = compression;
+  const { expandToolbar, setToolbarHeight } = compression;
   const {
     isLoading,
     iconShortcut,
@@ -56,18 +58,22 @@ const HeaderToolkitAction: React.FC<any> = ({
 
   const useHelpCenter = context.appId !== 'vn.momo.helpcenter';
   const closeIcon = useCloseIcon ? CLOSE_ICON : HOME_ICON;
+  let toolkitWidthStyle: ViewStyle = styles.toolkitNarrow;
+  if (useHelpCenter) {
+    toolkitWidthStyle = styles.toolkitWide;
+  }
 
   const groupCount = useHelpCenter ? 2 : 1;
   let capsuleHeight = DuoMetrics.controlSize;
   if (groupCount > 1) {
     capsuleHeight = groupCount * DuoMetrics.itemPitch;
   }
-  // Back slot, the optional shortcut, then the help/home capsule
-  const fullToolbarHeight =
-    DuoMetrics.controlSize +
-    Spacing.M +
-    (useShortcut ? DuoMetrics.controlSize + Spacing.M : 0) +
-    capsuleHeight;
+  const backSlotHeight = DuoMetrics.controlSize + Spacing.M;
+  let shortcutHeight = 0;
+  if (useShortcut) {
+    shortcutHeight = DuoMetrics.controlSize + Spacing.M;
+  }
+  const fullToolbarHeight = backSlotHeight + shortcutHeight + capsuleHeight;
 
   useEffect(() => {
     if (vertical) {
@@ -80,8 +86,7 @@ const HeaderToolkitAction: React.FC<any> = ({
     return null;
   }
 
-  // HIG "Toolbar compressed": tools fold into one button; tapping it expands the
-  // toolbar and compresses the tab bar instead. Not the useMore icon, to tell them apart
+  // HIG "Toolbar compressed": a menu icon (not the "more" one) that expands the toolbar
   if (vertical && toolbarCompressed) {
     return (
       <SideBarButton
@@ -126,39 +131,6 @@ const HeaderToolkitAction: React.FC<any> = ({
     );
   }
 
-  // on the status bar row the controls keep the side bar size
-  if (statusBarClearance) {
-    return (
-      <View style={styles.sideBarRow}>
-        {useShortcut && (
-          <SideBarButton
-            disabled={isLoading}
-            icon={iconShortcut}
-            onPress={shortcutOnPress}
-            tintColor={tintColor}
-            showBadge={showBadge}
-          />
-        )}
-        <SideBarGroup tintColor={tintColor} horizontal>
-          {useHelpCenter && (
-            <SideBarGroupItem
-              accessibilityLabel={'btn_navigation_help_center'}
-              icon={'help_center'}
-              tintColor={tintColor}
-              onPress={onPressHelpCenter}
-            />
-          )}
-          <SideBarGroupItem
-            accessibilityLabel={'btn_navigation_close'}
-            icon={closeIcon}
-            tintColor={tintColor}
-            onPress={onClose}
-          />
-        </SideBarGroup>
-      </View>
-    );
-  }
-
   return (
     <View style={Styles.row}>
       {useShortcut && (
@@ -170,15 +142,7 @@ const HeaderToolkitAction: React.FC<any> = ({
           showBadge={showBadge}
         />
       )}
-      <View
-        style={[
-          styles.toolkitContainer,
-          buttonStyle,
-          context.appId !== 'vn.momo.helpcenter'
-            ? styles.toolkitWide
-            : styles.toolkitNarrow,
-        ]}
-      >
+      <View style={[styles.toolkitContainer, buttonStyle, toolkitWidthStyle]}>
         {useHelpCenter && (
           <>
             <TouchableOpacity
@@ -187,7 +151,11 @@ const HeaderToolkitAction: React.FC<any> = ({
               onPress={onPressHelpCenter}
               hitSlop={{ top: 7, bottom: 7, left: 7, right: 0 }}
             >
-              <Icon color={tintColor} source={'help_center'} size={20} />
+              <Icon
+                color={tintColor}
+                source={'help_center'}
+                size={HeaderBarMetrics.iconSize}
+              />
             </TouchableOpacity>
             <View style={[styles.divider, { backgroundColor: tintColor }]} />
           </>
@@ -198,7 +166,11 @@ const HeaderToolkitAction: React.FC<any> = ({
           style={styles.toolkitButton}
           hitSlop={{ top: 7, bottom: 7, left: 0, right: 7 }}
         >
-          <Icon color={tintColor} source={closeIcon} size={20} />
+          <Icon
+            color={tintColor}
+            source={closeIcon}
+            size={HeaderBarMetrics.iconSize}
+          />
         </TouchableOpacity>
       </View>
     </View>

package/Application/Components/NavigationButton.tsx

@@ -5,9 +5,13 @@ import { StyleSheet, TouchableOpacity, View, ViewStyle } from 'react-native';
 import { Colors, Spacing } from '../../Consts';
 import { Icon } from '../../Icon';
 import { BadgeDot } from '../../Badge';
+import { HeaderBarMetrics } from '../headerLayout';
+
+const { buttonSize, iconSize } = HeaderBarMetrics;
 
 /**
- * default navigation button used header nav
+ * Round 32pt icon button of the header (back, shortcut) with an optional badge
+ * dot; switches to a dark fill under a white tint so the icon stays readable.
  */
 const NavigationButton: React.FC<NavigationButtonProps> = ({
   icon,
@@ -34,7 +38,7 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
         <Icon
           source={icon}
           color={tintColor ?? theme.colors.text.default}
-          size={20}
+          size={iconSize}
         />
       </TouchableOpacity>
       {showBadge && <BadgeDot size={'small'} style={styles.badgeDot} />}
@@ -44,12 +48,12 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
 
 const styles = StyleSheet.create({
   container: {
-    width: 28,
+    width: buttonSize,
   },
   navigationButton: {
-    height: 28,
-    width: 28,
-    borderRadius: 14,
+    height: buttonSize,
+    width: buttonSize,
+    borderRadius: buttonSize / 2,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: Colors.black_01 + '99',

package/Application/Components/SearchHeader.tsx

@@ -1,5 +1,5 @@
 import { Colors, Radius, Spacing, Styles } from '../../Consts';
-import { InputRef, InputSearch } from '../../Input';
+import { InputRef, InputSearch, type InputSearchProps } from '../../Input';
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 import React, { useContext } from 'react';
@@ -8,8 +8,18 @@ import { ApplicationContext, MiniAppContext } from '../../Context';
 import { Text } from '../../Text';
 import { useNormalizedSharedValue } from '../hooks';
 import { useScreenLayout } from '../../Layout';
-import { DuoMetrics } from '../../Layout/utils';
+import { HeaderBarMetrics } from '../headerLayout';
 
+const { buttonSize, pillWidth, sidePadding, titleGap } = HeaderBarMetrics;
+// help center | home pill and the bar padding right of it
+const TOOLKIT_WIDTH = pillWidth + sidePadding;
+// the iPhone Duo side bar keeps its right header width
+const DUO_TOOLKIT_WIDTH = 73;
+
+/**
+ * Header search bar whose fill turns from surface to default once scrolled, with
+ * a cancel button that goes back (or dismisses the mini app) unless `renderButtons`.
+ */
 const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
   (
     {
@@ -24,21 +34,27 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
     const { theme, navigator } = useContext(ApplicationContext);
     const context = useContext<any>(MiniAppContext);
     const layout = useScreenLayout();
-    // the iPhone Duo status bar row keeps a side bar sized back button
-    const BACK_WIDTH = layout.statusBarClearance ? DuoMetrics.controlSize : 28;
+    let defaultRightWidth = TOOLKIT_WIDTH;
+    let searchSize: InputSearchProps['size'] = 'header';
+    if (layout.sideBar) {
+      defaultRightWidth = DUO_TOOLKIT_WIDTH;
+      searchSize = 'default';
+    }
 
     const sharedValue = useNormalizedSharedValue(animatedValue);
-    const leftPosition = props?.leftPosition ?? BACK_WIDTH + 20;
-    const headerRightWidth = props?.headerRightWidth ?? 73;
+    const defaultLeft = buttonSize + sidePadding + titleGap;
+    const leftPosition = props?.leftPosition ?? defaultLeft;
+    const headerRightWidth = props?.headerRightWidth ?? defaultRightWidth;
 
     // iPhone Duo side bar holds back: the search shares the content width with the buttons only
-    let searchMaxWidth = layout.width - leftPosition - 12 - headerRightWidth;
+    const rowWidth = layout.width - leftPosition - sidePadding;
+    let searchMaxWidth = rowWidth - headerRightWidth;
     if (layout.sideBar) {
       searchMaxWidth = layout.contentWidth - Spacing.M * 2 - headerRightWidth;
     }
-    if (layout.statusBarClearance) {
-      searchMaxWidth -=
-        layout.statusBarClearance.left + layout.statusBarClearance.right;
+    const clearance = layout.statusBarClearance;
+    if (clearance) {
+      searchMaxWidth -= clearance.left + clearance.right;
     }
 
     const backgroundStyle = useAnimatedStyle(() => {
@@ -76,6 +92,15 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
 
     const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
+    let buttons: React.ReactNode = (
+      <TouchableOpacity onPress={goBackSafe} style={styles.searchAction}>
+        <Text typography={'action_default_bold'}>{buttonText}</Text>
+      </TouchableOpacity>
+    );
+    if (typeof renderButtons === 'function') {
+      buttons = renderButtons();
+    }
+
     return (
       <View
         style={[styles.container, showBaseLineDebug && styles.debugBaseLine]}
@@ -92,18 +117,13 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
             <InputSearch
               ref={ref}
               {...props}
+              size={searchSize}
               backgroundColor={'transparent'}
               showButtonText={false}
             />
           </Animated.View>
         </View>
-        {renderButtons && typeof renderButtons === 'function' ? (
-          renderButtons()
-        ) : (
-          <TouchableOpacity onPress={goBackSafe} style={styles.searchAction}>
-            <Text typography={'action_default_bold'}>{buttonText}</Text>
-          </TouchableOpacity>
-        )}
+        {buttons}
       </View>
     );
   },

package/Application/Components/TitleJourney.tsx

@@ -14,8 +14,8 @@ import {
 } from './HeaderTitle.shared';
 
 /**
- * Header user title
- * @constructor
+ * Header title for a journey: `start` and `end` around an icon, with an optional
+ * description below; a shimmer while `isLoading`.
  */
 const TitleJourney: React.FC<TitleJourneyProps> = ({
   start,

package/Application/Components/TitleLocation.tsx

@@ -9,8 +9,8 @@ import { styles } from './HeaderTitle.styles';
 import { useHeaderFontFamily, useTitleMaxWidth } from './HeaderTitle.shared';
 
 /**
- * Header user title
- * @constructor
+ * Header title showing a location with a dropdown chevron and an optional
+ * description above it; a shimmer while `isLoading`.
  */
 const TitleLocation: React.FC<TitleLocationProps> = ({
   tintColor,

package/Application/Components/TitleUser.tsx

@@ -10,8 +10,8 @@ import { styles } from './HeaderTitle.styles';
 import { useHeaderFontFamily, useTitleMaxWidth } from './HeaderTitle.shared';
 
 /**
- * Header user title
- * @constructor
+ * Header title for a user or group: avatar (1 to 4 images, a `+N` stack, or name
+ * initials), title with verified icons and subtitle; a shimmer while `isLoading`.
  */
 const TitleUser: React.FC<TitleUserProps> = ({
   title,

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

@@ -27,6 +27,10 @@ import { isIPhoneDuo } from './utils';
 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} />;
@@ -34,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);
@@ -50,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({

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

@@ -33,6 +33,10 @@ import { ReservedRegionsProvider } from '../Layout/ReservedRegions';
 
 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,
@@ -92,6 +96,10 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   );
 };
 
+/**
+ * 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,
@@ -109,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;
 
@@ -122,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);
@@ -228,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,
               }}