@momo-kits/template 0.81.10 → 0.81.12

package/TrustBanner/index.tsx

@@ -1,11 +1,20 @@
-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 {
+  requireNativeComponent,
+  TouchableOpacity,
+  UIManager,
+  View,
+} from 'react-native';
+import {TrackingParams, 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 NativeTrustBanner =
+  requireNativeComponent<TrustBannerProps>('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 +22,55 @@ 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',
+  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,
+  trackEvent,
+  screenName = '',
+  serviceName = '',
+  openWeb,
+  openUrl = 'https://momo.vn/an-toan-bao-mat',
 }) => {
-  const {theme} = useContext(ApplicationContext);
+  const {theme, language} = useContext(ApplicationContext);
+  const [data, setData] = useState(defaultData);
+  const {icons, sslImage, pciImage, momoImage, content} = data;
+  const trackingParams: TrackingParams = {
+    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,
+      });
+    }
+  };
 
-  /**
-   * update platform_config
-   */
   const renderIconList = () => {
     return (
       <View style={styles.iconList}>
@@ -66,25 +112,44 @@ const TrustBanner: FC<TrustBannerProps> = ({
   };
 
   if (UIManager.getViewManagerConfig('TrustBannerView')) {
-    return <NativeTrustBanner style={{height: 88}} />;
+    return (
+      <TouchableOpacity
+        onPress={() => {
+          trackEvent?.('service_component_clicked', trackingParams);
+          openWeb?.(openUrl);
+        }}
+        activeOpacity={0.7}
+        style={style}>
+        <NativeTrustBanner
+          content={defaultData.content.vi}
+          style={{height: 88}}
+        />
+      </TouchableOpacity>
+    );
   }
 
   return (
-    <View style={[style, styles.container]}>
+    <TouchableOpacity
+      onPress={() => {
+        trackEvent?.('service_component_clicked', trackingParams);
+        openWeb?.(openUrl);
+      }}
+      activeOpacity={0.7}
+      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 TrackingParams = {
+  service_name: string;
+  screen_name: string;
+  component_name: string;
+  url_config?: string;
+};
+
 export type TrustBannerProps = {
-  content?: string;
-  icons?: string[];
-  pciImage?: string;
-  sslImage?: string;
+  trackEvent?: (eventName: string, trackingParams: TrackingParams) => void;
   style?: ViewStyle | ViewStyle[];
+  openWeb?: (params: string) => void;
+  screenName?: string;
+  serviceName?: string;
+  openUrl?: string;
+  content?: string;
 };
 
 export type CustomAvatarProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/template",
-    "version": "0.81.10",
+    "version": "0.81.12",
     "private": false,
     "main": "index.tsx",
     "dependencies": {},