@momo-kits/template 0.81.14 → 0.81.16

package/HeaderSliderBanner/index.tsx

@@ -1,5 +1,5 @@
 import React, {FC} from 'react';
-import {Animated, TouchableOpacity, View} from 'react-native';
+import {Animated, TouchableOpacity} from 'react-native';
 import Carousel from '@momo-kits/carousel';
 import {Image, Pagination, Spacing} from '@momo-kits/foundation';
 import {HeaderSliderBannerProps} from './types';

package/TrustBanner/index.tsx

@@ -1,18 +1,10 @@
 import React, {FC, useContext, useEffect, useState} from 'react';
-import {
-  requireNativeComponent,
-  TouchableOpacity,
-  UIManager,
-  View,
-} from 'react-native';
-import {TrackingParams, TrustBannerProps} from './types';
+import {TouchableOpacity, View} from 'react-native';
+import {TrustBannerCallbackParams, TrustBannerProps} from './types';
 import styles from './styles';
 import {ApplicationContext, Colors, Image, Text} from '@momo-kits/foundation';
 import CustomAvatar from './CustomAvatar';
 
-const NativeTrustBanner =
-  requireNativeComponent<TrustBannerProps>('TrustBannerView');
-
 const dataJsonUrl =
   'https://static.momocdn.net/app/json/component-kits/design_system.json';
 
@@ -30,6 +22,8 @@ const defaultData = {
   },
   pciImage: 'https://static.momocdn.net/app/img/kits/trustBanner/pci.png',
   sslImage: 'https://static.momocdn.net/app/img/kits/trustBanner/ssl.png',
+  url_config: 'https://momo.vn/an-toan-bao-mat',
+  feature_code: 'login_and_security',
   icons: defaultIcons,
   momoImage:
     'https://static.momocdn.net/app/img/kits/trustBanner/ic_momo_secu.png',
@@ -37,20 +31,28 @@ const defaultData = {
 
 const TrustBanner: FC<TrustBannerProps> = ({
   style,
-  trackEvent,
   screenName = '',
   serviceName = '',
-  openWeb,
-  openUrl = 'https://momo.vn/an-toan-bao-mat',
+  onPress,
+  trackEvent,
 }) => {
   const {theme, language} = useContext(ApplicationContext);
   const [data, setData] = useState(defaultData);
-  const {icons, sslImage, pciImage, momoImage, content} = data;
-  const trackingParams: TrackingParams = {
+  const {
+    icons,
+    sslImage,
+    pciImage,
+    momoImage,
+    url_config,
+    content,
+    feature_code,
+  } = data;
+  const trackingParams: TrustBannerCallbackParams = {
     screen_name: screenName,
     service_name: serviceName,
     component_name: 'logo_trust',
   };
+
   useEffect(() => {
     trackEvent?.('service_component_displayed', trackingParams);
     fetchJson();
@@ -67,6 +69,9 @@ const TrustBanner: FC<TrustBannerProps> = ({
         pciImage: dataJSon.trustBanner.pciImage || defaultData.pciImage,
         momoImage: dataJSon.trustBanner.momoImage || defaultData.momoImage,
         content: dataJSon.trustBanner.content || defaultData.content,
+        url_config: dataJSon.trustBanner.url_config || defaultData.url_config,
+        feature_code:
+          dataJSon.trustBanner.feature_code || defaultData.feature_code,
       });
     }
   };
@@ -111,30 +116,15 @@ const TrustBanner: FC<TrustBannerProps> = ({
     );
   };
 
-  if (UIManager.getViewManagerConfig('TrustBannerView')) {
-    return (
-      <TouchableOpacity
-        onPress={() => {
-          trackEvent?.('service_component_clicked', trackingParams);
-          openWeb?.(openUrl);
-        }}
-        activeOpacity={0.7}
-        style={style}>
-        <NativeTrustBanner
-          content={defaultData.content.vi}
-          style={{height: 88}}
-        />
-      </TouchableOpacity>
-    );
-  }
+  const _onPress = () => {
+    trackEvent?.('service_component_clicked', trackingParams);
+    onPress?.({...trackingParams, url_config, feature_code});
+  };
 
   return (
     <TouchableOpacity
-      onPress={() => {
-        trackEvent?.('service_component_clicked', trackingParams);
-        openWeb?.(openUrl);
-      }}
-      activeOpacity={0.7}
+      onPress={_onPress}
+      activeOpacity={onPress ? 0.7 : 1}
       style={[style, styles.container]}>
       <Image
         style={styles.momoImage}

package/TrustBanner/types.ts

@@ -1,20 +1,47 @@
 import {ViewStyle} from 'react-native';
 
-export type TrackingParams = {
+export type TrustBannerCallbackParams = {
   service_name: string;
   screen_name: string;
   component_name: string;
   url_config?: string;
+  feature_code?: string;
 };
 
 export type TrustBannerProps = {
-  trackEvent?: (eventName: string, trackingParams: TrackingParams) => void;
+  /**
+   * Optional. Styles to customize the appearance of the banner. Can be a single
+   * style object or an array of style objects.
+   */
   style?: ViewStyle | ViewStyle[];
-  openWeb?: (params: string) => void;
+
+  /**
+   * Optional. The name of the screen where the banner is displayed. This can be
+   * used to identify the context in which the banner appears.
+   */
   screenName?: string;
+
+  /**
+   * Optional. The name of the service or feature the banner is associated with.
+   * This helps in providing contextual information within the banner content.
+   */
   serviceName?: string;
-  openUrl?: string;
-  content?: string;
+
+  /**
+   * Optional. A callback function can be openWeb or startFeatureCode,
+   * return params:
+   *   service_name,
+   *   screen_name,
+   *   component_name,
+   *   url_config,
+   *   feature_code,
+   */
+  onPress?: (params: TrustBannerCallbackParams) => void;
+
+  /**
+   * Optional. instance of maxApi trackEvent function.
+   */
+  trackEvent?: (eventName: string, params: TrustBannerCallbackParams) => void;
 };
 
 export type CustomAvatarProps = {

package/package.json

@@ -1,18 +1,15 @@
 {
     "name": "@momo-kits/template",
-    "version": "0.81.14",
+    "version": "0.81.16",
     "private": false,
     "main": "index.tsx",
     "dependencies": {},
     "peerDependencies": {
-        "@momo-kits/foundation": "latest",
-        "@momo-kits/carousel": "0.81.6-beta.12",
+        "@momo-kits/foundation": "*",
+        "@momo-kits/carousel": "*",
         "prop-types": "^15.7.2",
         "react": "16.9.0",
         "react-native": ">=0.55"
     },
-    "devDependencies": {
-        "@momo-platform/versions": "4.1.11"
-    },
     "license": "MoMo"
-}
+}