@momo-kits/template 0.81.11 → 0.81.13

package/TrustBanner/index.tsx

@@ -1,11 +1,12 @@
-import React, {FC, useContext} from 'react';
-import {requireNativeComponent, UIManager, View, ViewProps} from 'react-native';
-import {TrustBannerProps} from './types';
+import React, {FC, useContext, useEffect, useState} from 'react';
+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<ViewProps>('TrustBannerView');
+const dataJsonUrl =
+  'https://static.momocdn.net/app/json/component-kits/design_system.json';
 
 const defaultIcons = [
   'https://static.momocdn.net/app/img/kits/trustBanner/ic_viettinbank.png',
@@ -13,18 +14,68 @@ const defaultIcons = [
   'https://static.momocdn.net/app/img/kits/trustBanner/ic_vietcombank.png',
   'https://static.momocdn.net/app/img/kits/trustBanner/ic_bidv.png',
 ];
+
+const defaultData = {
+  content: {
+    vi: 'Bảo mật thông tin & An toàn tài sản của bạn là ưu tiên hàng đầu của MoMo.',
+    en: "Your data security and money safety are MoMo's top priorities.",
+  },
+  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',
+};
+
 const TrustBanner: FC<TrustBannerProps> = ({
-  content = 'Bảo mật thông tin & An toàn tài sản của bạn là ưu tiên hàng đầu của MoMo.',
-  pciImage = 'https://static.momocdn.net/app/img/kits/trustBanner/pci.png',
-  sslImage = 'https://static.momocdn.net/app/img/kits/trustBanner/ssl.png',
-  icons = defaultIcons,
   style,
+  screenName = '',
+  serviceName = '',
+  onPress,
+  trackEvent,
 }) => {
-  const {theme} = useContext(ApplicationContext);
+  const {theme, language} = useContext(ApplicationContext);
+  const [data, setData] = useState(defaultData);
+  const {
+    icons,
+    sslImage,
+    pciImage,
+    momoImage,
+    content,
+    url_config,
+    feature_code,
+  } = data;
+  const trackingParams: TrustBannerCallbackParams = {
+    screen_name: screenName,
+    service_name: serviceName,
+    component_name: 'logo_trust',
+  };
+
+  useEffect(() => {
+    trackEvent?.('service_component_displayed', trackingParams);
+    fetchJson();
+  }, []);
+
+  const fetchJson = async () => {
+    const res = await fetch(dataJsonUrl);
+    const dataJSon = await res.json();
+
+    if (dataJSon && dataJSon?.trustBanner) {
+      setData({
+        icons: dataJSon.trustBanner.icons || defaultData.icons,
+        sslImage: dataJSon.trustBanner.sslImage || defaultData.sslImage,
+        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,
+      });
+    }
+  };
 
-  /**
-   * update platform_config
-   */
   const renderIconList = () => {
     return (
       <View style={styles.iconList}>
@@ -65,26 +116,30 @@ const TrustBanner: FC<TrustBannerProps> = ({
     );
   };
 
-  if (UIManager.getViewManagerConfig('TrustBannerView')) {
-    return <NativeTrustBanner style={{height: 88}} />;
-  }
+  const _onPress = () => {
+    trackEvent?.('service_component_clicked', trackingParams);
+    onPress?.({...trackingParams, url_config, feature_code});
+  };
 
   return (
-    <View style={[style, styles.container]}>
+    <TouchableOpacity
+      onPress={_onPress}
+      activeOpacity={onPress ? 0.7 : 1}
+      style={[style, styles.container]}>
       <Image
         style={styles.momoImage}
         resizeMode={'contain'}
         source={{
-          uri: 'https://static.momocdn.net/app/img/kits/trustBanner/ic_momo_secu.png',
+          uri: momoImage,
         }}
       />
       <View style={styles.flex}>
         <Text style={styles.message} typography={'description_s'}>
-          {content}
+          {content?.[language || 'vi'] || defaultData.content.vi}
         </Text>
         {renderFooter()}
       </View>
-    </View>
+    </TouchableOpacity>
   );
 };
 

package/TrustBanner/types.ts

@@ -1,11 +1,20 @@
 import {ViewStyle} from 'react-native';
 
+export type TrustBannerCallbackParams = {
+  service_name: string;
+  screen_name: string;
+  component_name: string;
+  url_config?: string;
+  feature_code?: string;
+};
+
 export type TrustBannerProps = {
-  content?: string;
-  icons?: string[];
-  pciImage?: string;
-  sslImage?: string;
   style?: ViewStyle | ViewStyle[];
+  screenName?: string;
+  serviceName?: string;
+  content?: string;
+  onPress?: (params: TrustBannerCallbackParams) => void;
+  trackEvent?: (eventName: string, params: TrustBannerCallbackParams) => void;
 };
 
 export type CustomAvatarProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/template",
-    "version": "0.81.11",
+    "version": "0.81.13",
     "private": false,
     "main": "index.tsx",
     "dependencies": {},
@@ -15,4 +15,4 @@
         "@momo-platform/versions": "4.1.11"
     },
     "license": "MoMo"
-}
+}