@momo-kits/foundation 0.109.1-tracking.2 → 0.109.1-tracking.28

package/Application/BottomSheet.tsx

@@ -135,13 +135,19 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
               borderBottomWidth: 1,
             },
           ]}>
-          <View style={styles.iconButton} />
-          <Text
-            style={[Styles.flex, {textAlign: 'center'}]}
-            numberOfLines={1}
-            typography="header_default_bold">
-            {options.title ?? ''}
-          </Text>
+          {options.header ? (
+            <View style={Styles.flex}>{options.header}</View>
+          ) : (
+            <>
+              <View style={styles.iconButton} />
+              <Text
+                style={[Styles.flex, {textAlign: 'center'}]}
+                numberOfLines={1}
+                typography="header_default_bold">
+                {options.title ?? ''}
+              </Text>
+            </>
+          )}
           <TouchableOpacity
             style={styles.iconButton}
             onPress={() => onDismiss(true)}>

package/Application/Components/BottomSheetHelpCenter.tsx

@@ -0,0 +1,147 @@
+import React, {useContext} from 'react';
+import {StyleSheet, TouchableOpacity, View} from 'react-native';
+import {ApplicationContext, MiniAppContext} from '../index';
+import {Colors, Radius, Spacing, Styles} from '../../Consts';
+import {Text} from '../../Text';
+import {Icon} from '../../Icon';
+
+const ServiceItem: React.FC<any> = ({service}) => {
+  const {theme, translate} = useContext(ApplicationContext);
+  const {title, description, icon, onPress} = service;
+  const serviceTitle = translate?.(title);
+  const serviceDescription = translate?.(description);
+  return (
+    <TouchableOpacity onPress={onPress} style={Styles.row}>
+      <View style={styles.iconWrapper}>
+        <Icon color={theme.colors.text.hint} source={icon} size={28} />
+      </View>
+      <View>
+        <View style={Styles.row}>
+          <Text typography={'action_xs_bold'}>{serviceTitle}</Text>
+          <Icon source={'arrow_chevron_right_small'} size={16} />
+        </View>
+        <Text
+          typography={'description_xs_regular'}
+          color={theme.colors.text.hint}>
+          {serviceDescription}
+        </Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const BottomSheetHelpCenter: React.FC<any> = ({onRequestClose}) => {
+  const {theme, navigator} = useContext(ApplicationContext);
+  const context = useContext<any>(MiniAppContext);
+
+  const onPressFaq = () => {
+    onRequestClose?.(() => {
+      navigator?.maxApi?.startFeatureCode?.(
+        'helpcenter_problemlevel1',
+        context?.toolkitConfig?.faq
+      );
+    });
+  };
+
+  const onPressChatbot = () => {
+    onRequestClose?.(() => {
+      navigator?.maxApi?.getDataObserver('CURRENT_SCREEN', (data: any) => {
+        let screenName = data?.screenName;
+        navigator?.maxApi?.startFeatureCode?.('chatbot', {
+          botId: 'botGptCs',
+          forwardParams: {
+            forService: 'navigation',
+            mini_app_id: context?.appId,
+            feature_code: context?.code,
+            screen_name: screenName,
+          },
+        });
+      });
+    });
+  };
+
+  const onPressFeedback = () => {
+    onRequestClose?.(() => {
+      navigator?.maxApi?.startFeatureCode?.('feedback', {
+        forService: 'navigation',
+        loggedStatus: true,
+        application: {
+          appId: context?.appId,
+          appCode: context?.code,
+          appName: context?.name,
+          buildNumber: context?.buildNumber,
+        },
+      });
+    });
+  };
+
+  const services = [
+    {
+      title: {vi: 'Câu hỏi thường gặp', en: 'Câu hỏi thường gặp'},
+      description: {
+        vi: 'Giải đáp các thắc mắc mọi người thường gặp',
+        en: 'Giải đáp các thắc mắc mọi người thường gặp',
+      },
+      icon: 'notifications_circle_question',
+      onPress: onPressFaq,
+    },
+    {
+      title: {vi: 'Hỗ trợ trực tuyến', en: 'Hỗ trợ trực tuyến'},
+      description: {
+        vi: 'Trả lời mọi câu hỏi của bạn 24/7',
+        en: 'Trả lời mọi câu hỏi của bạn 24/7',
+      },
+      icon: 'ic_support',
+      onPress: onPressChatbot,
+    },
+    {
+      title: {vi: 'Chia sẻ góp ý', en: 'Chia sẻ góp ý'},
+      description: {
+        vi: 'Đề xuất cải thiện hoặc báo lỗi sản phẩm/dịch vụ',
+        en: 'Đề xuất cải thiện hoặc báo lỗi sản phẩm/dịch vụ',
+      },
+      icon: 'file_mail',
+      onPress: onPressFeedback,
+    },
+  ];
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: theme.colors.background.surface,
+        },
+      ]}>
+      {services.map((item, index) => {
+        return (
+          <>
+            <ServiceItem service={item} />
+            {index !== services.length - 1 && <View style={styles.divider} />}
+          </>
+        );
+      })}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {height: 300, width: '100%', padding: Spacing.M},
+  divider: {
+    marginVertical: Spacing.M,
+    backgroundColor: Colors.black_02,
+    height: 1,
+    width: '100%',
+  },
+  iconWrapper: {
+    width: 36,
+    height: 36,
+    backgroundColor: Colors.black_02,
+    borderRadius: Radius.M,
+    marginRight: Spacing.S,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export {BottomSheetHelpCenter};

package/Application/Components/HeaderRight.tsx

@@ -12,14 +12,14 @@ import {PopupNotify} from '../../Popup';
 import {Tool, ToolGroup} from '../types';
 import {Icon} from '../../Icon';
 import {scaleSize, Text} from '../../Text';
+import {BottomSheetHelpCenter} from './BottomSheetHelpCenter';
+import {Image} from '../../Image';
 
 const WHITE_LIST = [
   'vn.momo.appx',
   'vn.momo.transactionhistory',
   'vn.momo.promotionhub',
 ];
-const HELP_CENTER_CODE = 'helpcenter';
-const HELP_CENTER_ICON = 'help_center';
 
 /**
  * main component for header right
@@ -29,6 +29,7 @@ const HeaderRight: React.FC<any> = props => {
   const {useOnBoarding = false, buttonOnBoarding, onPress} = headerRight;
   const context = useContext<any>(MiniAppContext);
   const {translate} = useContext(ApplicationContext);
+
   if (
     WHITE_LIST.includes(context?.appId) &&
     typeof props.headerRight === 'function'
@@ -36,10 +37,6 @@ const HeaderRight: React.FC<any> = props => {
     return props.headerRight(props);
   }
 
-  if (context?.toolkitConfig?.hidden === true) {
-    return <View />;
-  }
-
   if (useOnBoarding && onPress) {
     return (
       <TouchableOpacity onPress={onPress} style={styles.onBoarding}>
@@ -68,7 +65,7 @@ const HeaderToolkitAction: React.FC<any> = ({
   useMore = false,
   tools = [],
 }) => {
-  const {navigator} = useContext(ApplicationContext);
+  const {navigator, translate} = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
 
   const [isFavorite, setIsFavorite] = useState<boolean>(false);
@@ -88,6 +85,9 @@ const HeaderToolkitAction: React.FC<any> = ({
     };
   }
 
+  /**
+   * check app is favorite
+   */
   const checkAppIsFavorite = () => {
     navigator?.maxApi?.dispatchFunction?.(
       'isFavoriteApp',
@@ -100,6 +100,9 @@ const HeaderToolkitAction: React.FC<any> = ({
     );
   };
 
+  /**
+   * close navigation container
+   */
   const onClose = () => {
     if (preventClose) {
       navigator?.showModal({
@@ -125,6 +128,9 @@ const HeaderToolkitAction: React.FC<any> = ({
     }
   };
 
+  /**
+   * on press shortcut
+   */
   const onPressShortcut = () => {
     setIsLoading(true);
     navigator?.maxApi?.dispatchFunction?.(
@@ -143,14 +149,39 @@ const HeaderToolkitAction: React.FC<any> = ({
     );
   };
 
+  /**
+   * on press help center
+   */
   const onPressHelpCenter = () => {
-    navigator?.maxApi?.dispatchFunction?.(
-      'startFeatureCode',
-      HELP_CENTER_CODE,
-      () => {}
-    );
+    const appName = translate?.(context?.name);
+    const appDescription = translate?.(context?.description);
+    navigator?.showBottomSheet({
+      options: {
+        header: (
+          <View style={[Styles.row, {paddingLeft: Spacing.M}]}>
+            <Image
+              source={{uri: context?.icon}}
+              style={{width: 40, height: 40, marginRight: Spacing.S}}
+            />
+            <View>
+              <Text typography={'label_default_medium'}>{appName}</Text>
+              <Text
+                typography={'description_default_regular'}
+                color={Colors.black_12}>
+                {appDescription}
+              </Text>
+            </View>
+          </View>
+        ),
+      },
+      surface: true,
+      screen: BottomSheetHelpCenter,
+    });
   };
 
+  /**
+   * on press icon more
+   */
   const onPressIconMore = () => {
     navigator?.maxApi?.dispatchFunction?.('showTools', tools, (key: string) => {
       for (const group of tools) {
@@ -201,14 +232,18 @@ const HeaderToolkitAction: React.FC<any> = ({
         />
       )}
       <View style={[styles.toolkitContainer, buttonStyle]}>
-        <TouchableOpacity
-          accessibilityLabel={'btn_navigation_help_center'}
-          style={styles.toolkitButton}
-          onPress={onPressHelpCenter}
-          hitSlop={{top: 7, bottom: 7, left: 7, right: 0}}>
-          <Icon color={tintColor} source={HELP_CENTER_ICON} size={20} />
-        </TouchableOpacity>
-        <View style={[styles.divider, {backgroundColor: tintColor}]} />
+        {context.appId !== 'vn.momo.helpcenter' && (
+          <>
+            <TouchableOpacity
+              accessibilityLabel={'btn_navigation_help_center'}
+              style={styles.toolkitButton}
+              onPress={onPressHelpCenter}
+              hitSlop={{top: 7, bottom: 7, left: 7, right: 0}}>
+              <Icon color={tintColor} source={'help_center'} size={20} />
+            </TouchableOpacity>
+            <View style={[styles.divider, {backgroundColor: tintColor}]} />
+          </>
+        )}
         <TouchableOpacity
           accessibilityLabel={'btn_navigation_close'}
           onPress={onClose}

package/Application/Components/HeaderTitle.tsx

@@ -27,7 +27,7 @@ const HeaderTitle: React.FC<any> = props => {
   );
 
   return (
-    <View pointerEvents={'none'}>
+    <View pointerEvents={'none'} style={styles.headerTitleContainer}>
       <Animated.Text
         {...props}
         accessibilityLabel={'title_navigation_header'}
@@ -35,6 +35,7 @@ const HeaderTitle: React.FC<any> = props => {
           styles.title,
           {fontFamily: `${theme.font}-Bold`, opacity, color: props.tintColor},
         ]}
+        numberOfLines={1}
       />
       <Verified />
     </View>
@@ -258,9 +259,8 @@ const styles = StyleSheet.create({
     alignSelf: 'center',
   },
   headerTitleContainer: {
-    alignItems: 'center',
     justifyContent: 'center',
-    width: Dimensions.get('window').width - 182,
+    maxWidth: Dimensions.get('window').width - 178,
   },
   circle: {
     width: 32,

package/Application/NavigationContainer.tsx

@@ -32,12 +32,12 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   const isReady = useRef(false);
   const navigator = useRef(new Navigator(navigationRef, isReady));
   const [showGrid, setShowGrid] = useState(false);
-  const config = useRef<any>();
 
   /**
    * inject data for navigator
    */
   navigator.current.maxApi = maxApi;
+
   /**
    * handle mini language & listen change
    * engine only shake to enable grid view
@@ -55,8 +55,11 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
     };
   }, []);
 
-  const translate = (key: string) => {
-    return localize?.translate(key);
+  const translate = (data?: string | {vi: string; en: string}) => {
+    if (data && typeof data !== 'string') {
+      return localize?.translateData(data);
+    }
+    return localize?.translate(data as string);
   };
 
   return (
@@ -64,7 +67,6 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
       <ApplicationContext.Provider
         value={{
           navigator: navigator.current,
-          config: config.current,
           theme,
           showGrid,
           translate,

package/Application/Navigator.ts

@@ -1,15 +1,9 @@
 import {CommonActions, StackActions} from '@react-navigation/native';
-import {
-  BottomSheetParams,
-  HeaderToolkitProps,
-  ModalParams,
-  ScreenParams,
-} from './types';
+import {BottomSheetParams, ModalParams, ScreenParams} from './types';
 
 class Navigator {
   ref?: any;
   isReady?: any;
-  toolkitConfig?: HeaderToolkitProps;
   maxApi?: any;
   dismissData?: any;
   toolkitCallback?: (key: string) => void;
@@ -111,16 +105,14 @@ class Navigator {
   };
 
   /**
-   * navigate
+   * navigate route name bottom tab only
    * @param name
-   * @param params
    */
-  navigate = (name: string, params: any) => {
+  navigate = (name: string) => {
     if (this.isReady.current) {
       this.ref.current?.dispatch?.(
         CommonActions.navigate({
           name,
-          params,
         })
       );
     }

package/Application/StackScreen.tsx

@@ -137,9 +137,9 @@ const StackScreen: React.FC<ScreenParams> = props => {
         message: `${screenName} screen_load_time ${timeLoad}`,
         type: 'ERROR',
       });
-      if (lastElement.current) {
+      if (lastElement.current?.children?.current?.length > 0) {
         Alert.alert(
-          'Last Element',
+          `${screenName}- load ${timeLoad}ms`,
           JSON.stringify(lastElement.current?.children?.current)
         );
       }

package/Application/types.ts

@@ -71,7 +71,7 @@ export type Context = {
   theme: Theme;
   navigator?: Navigator;
   showGrid?: boolean;
-  translate?: (key: string) => string;
+  translate?: (data: string | {vi: string; en: string}) => string;
 };
 
 export type LocalizationObject = {
@@ -128,7 +128,8 @@ export type BottomSheetParams = {
   [key: string]: any;
   screen: React.ComponentType;
   options: {
-    title: string;
+    header?: React.ReactNode;
+    title?: string;
   };
   useNativeModal?: boolean;
   surface?: boolean;

package/Application/utils.tsx

@@ -122,7 +122,11 @@ const getOptions = (
   if (params.headerRight) {
     options = {
       ...options,
-      ...exportHeaderRight(params),
+      ...{
+        headerRight: (props: any) => {
+          return <HeaderRight {...props} headerRight={params.headerRight} />;
+        },
+      },
     };
   }
 
@@ -132,14 +136,6 @@ const getOptions = (
   };
 };
 
-const exportHeaderRight = (params: NavigationOptions) => {
-  return {
-    headerRight: (props: any) => {
-      return <HeaderRight {...props} headerRight={params.headerRight} />;
-    },
-  };
-};
-
 const exportHeaderTitle = (
   params: NavigationOptions,
   animatedValue?: Animated.Value
@@ -177,6 +173,5 @@ export {
   getModalOptions,
   getOptions,
   exportHeaderTitle,
-  exportHeaderRight,
   formatNameLength,
 };

package/Assets/icon.json

@@ -4045,5 +4045,8 @@
   },
   "navigation_more_icon": {
     "uri": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAYfSURBVHgB7VrBThtJEK0eD6tIycFoV4rZRNrhDwaHSNxibrkFjnuCHHMCvgA47gn4AswXgI852XtKpGA8f7Czl8S3tSDZlTLj6a3usQmerunusUngME+Kgtvd1V1TPdWvXhugRIkSJUqUuDdgMAP85eUGJIkH4HipNR6A44TBhw8BzADFroJkgPME8OhREHQ6AyiAwg77jUYVLi+3cOg2fqzmdAsB+H5wcdGE27WrgkET5ub2g/fvQ7vuBeA/e7YGHI4LLCiEn+ZWTYvxV1Y8iOJT4NyH6WA1j4ADlvDr9V109hSKPH0AD75GPf/5c70jszk7nqft+75xbVYOy8gC24PpUIVh0pZRpGzX65szOjuGB467bepkdFgulMMB8RUmC7YPDluFZDiPW2pR/s3hhOhbhSg6JidgbINobUpbaDO46LKb/+RcFWcJ+xypw/iWKcrGdxije4xObGaaQ5x4NQiCkBxTr+OTZupDQieC8/POdT+xOKfyz0QfDq2g110DC/j15T0csKubQ1kCmMChobRpnBXA7HyIA3dUW5nFua66lRnrgC0q7ExpS5inG6J1WJ6H4t2YRFPn7BjSaQadiUYO5nfVAfszPIqIM5h7oDWvQ0Is0GEnYAvOWpmWqu/TyetHwbSl1QQQx/YRYDxU2tzYgzuE9Tn8DQ+KnMP3DgaHk1BpKhIhKuHFrBD3vW0Y3uGko7RlM60erzKfwyAwFBacf9cdpHVYZmPGJheIUcOzeQMMkFRUzfCdiU+MiDZnHtjCdYm+LNQNsTmHW0RbMyUXKkTVg98dkFQ0Ge5PfI6iECRjuwHGN2w4cboOrj74RH+sWVVLGNFezhka4qxHsjaV9Sv8pinvmkgNXxO228S7Hl7bzUJseY5nLWOvqHE4xyJo4IINhsN1pIA9UB3xJIVMOBienaCiO+Q3DPk45418u+QgscsI8H0woAIW6Pf7g9rTp29xYS+hWHkoMObdfdL2x49hbeHXefxzBWYB5hqM7htTN+tzWMo2uHAlielxhGOWTFQUF7oNZPVjCcG/h/GqVVeYArKGZQ6+Q5yqakQSOkEKeqarWki7grtz2Mqxq0I4ypOTIlLSTCKegFQzxmen64a22lIhu1mI4wwzPO6cOyUxJe4jpnuHhaT65Yun23KzatPXcwmJKR7x91uwW0ymlckKNSiqKKCtn2H/o6mSl+DhCd8E6hgUdjlvFUlW34baLEBE9Orq1NrRLBx2iE7vWM1zebk7YmtmiCNyzl0vkiitiEft51/eobPTEwMcW3vypIok421eF7l1//3vHXrxEuxRQwl4DUnRn2i7bzPArFqKbQzsGG4DOYpiGtkrQV09mA4DlHSXbCJtwaWZWv+mB34L/w/JEi9JsNBgeE+UcSCtpTtK/6urA6CdTUkMpJd0uXZT3VvciiyBAdoIp7d4vJ1pJqseZawo8SqVdqbKGiDVXLxJGORW/hr9RZgQtHSPIhe5ujdeDAQX53uggUnx8NQRdqqlXChX+mLGnfMmWqKIUFDEwrvbeUxqpHurD50pCosCQ/FA3M/Gbgi2IFXLzNlN1rT6KAnII0nRvblvkoGnUC0LgOkFu9GtopdpboG9fbX+dYYN3ZDv67AJFFNjRFLLQxyHhFFPN+RuHZ4dhaulu3WYilAx1ZLS2bQP4U4dHikhWdXSmGmvQamWhsu44jcPMLTXtBKL20IGqu6dIwHfxOiifjPTHJoKFb3Dgt0obZbyiwDjL5S27GUclWmRVOicHpGVNvFVB0xL0n05uqEXLCgTVX6ILOoEHj4Ms7+Tuq5fxXbLRgApadA9V8S2HG06/UkSQ/KC0hE8eDCAz599JEMvcrTv0HRRn5o0gPxZwdTgr6kaFh+sl6N724PBetDtnpm6mZNWEiONEzcBM0LqxnTBLqNScUTkpxTlkIpaOCtgdFjyWaFHz+K0KNSH8bquy0j3Xio4z0BG1oKKjmF/8/D4MVI+Zx4nMGfemwsC9gfukjd5Nw/ZefqfPh3VFhb+xnFinqre7vD3oNcrpHEV/62lSGTiwJe1qZOzIDzOxI9MC2pZylyCa4uKjTP/Nu2WKFGiRIkS9wT/Ay6Ttv4kHF2TAAAAAElFTkSuQmCC"
+  },
+  "ic_support": {
+    "uri": "https://static.momocdn.net/app/img/kits/ic_support.png"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "0.109.1-tracking.2",
+  "version": "0.109.1-tracking.28",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {},