@momo-kits/template 0.89.1-beta.5 → 0.89.1-rc.1

package/TrustBanner/index.tsx

@@ -1,10 +1,19 @@
 import React, {FC, useContext, useEffect, useState} from 'react';
-import {NativeModules, TouchableOpacity, View} from 'react-native';
+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';
-import MaxApi from '@momo-platform/api';
+
+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',
+  'https://static.momocdn.net/app/img/kits/trustBanner/ic_agribank.png',
+  '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: {
@@ -13,26 +22,31 @@ 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',
-  urlConfig: 'login_and_security',
-  icons: [
-    'https://static.momocdn.net/app/img/kits/trustBanner/ic_viettinbank.png',
-    'https://static.momocdn.net/app/img/kits/trustBanner/ic_agribank.png',
-    'https://static.momocdn.net/app/img/kits/trustBanner/ic_vietcombank.png',
-    'https://static.momocdn.net/app/img/kits/trustBanner/ic_bidv.png',
-  ],
 };
 
 const TrustBanner: FC<TrustBannerProps> = ({
   style,
   screenName = '',
   serviceName = '',
+  onPress,
   trackEvent,
 }) => {
   const {theme, language} = useContext(ApplicationContext);
   const [data, setData] = useState(defaultData);
-  const {icons, sslImage, pciImage, momoImage, urlConfig, content} = data;
+  const {
+    icons,
+    sslImage,
+    pciImage,
+    momoImage,
+    url_config,
+    content,
+    feature_code,
+  } = data;
   const trackingParams: TrustBannerCallbackParams = {
     screen_name: screenName,
     service_name: serviceName,
@@ -44,25 +58,21 @@ const TrustBanner: FC<TrustBannerProps> = ({
     fetchJson();
   }, []);
 
-  const fetchJson = () => {
-    try {
-      const config = JSON.parse(
-        NativeModules?.ConfigsModule?.getConfigSync?.('DESIGN_SYSTEM'),
-      );
-      const dataJSon = config?.trustBanner;
+  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,
-          urlConfig: dataJSon.trustBanner.urlConfig || defaultData.urlConfig,
-        });
-      }
-    } catch (e) {
-      console.log(e);
+    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,
+      });
     }
   };
 
@@ -107,18 +117,14 @@ const TrustBanner: FC<TrustBannerProps> = ({
   };
 
   const _onPress = () => {
-    trackEvent?.('service_component_clicked', {...trackingParams, urlConfig});
-    if (urlConfig.indexOf('https') > -1) {
-      MaxApi.openWeb(urlConfig, {}, () => {});
-    } else {
-      MaxApi.startFeatureCode(urlConfig, {}, () => {});
-    }
+    trackEvent?.('service_component_clicked', {...trackingParams, url_config});
+    onPress?.({...trackingParams, url_config, feature_code});
   };
 
   return (
     <TouchableOpacity
       onPress={_onPress}
-      activeOpacity={0.7}
+      activeOpacity={onPress ? 0.7 : 1}
       style={[style, styles.container]}>
       <Image
         style={styles.momoImage}
@@ -131,7 +137,7 @@ const TrustBanner: FC<TrustBannerProps> = ({
         <Text
           style={styles.message}
           color={theme.colors.text.secondary}
-          typography={'description_s'}>
+          typography={'description_default_regular'}>
           {content?.[language || 'vi'] || defaultData.content.vi}
         </Text>
         {renderFooter()}

package/TrustBanner/types.ts

@@ -4,7 +4,8 @@ export type TrustBannerCallbackParams = {
   service_name: string;
   screen_name: string;
   component_name: string;
-  urlConfig?: string;
+  url_config?: string;
+  feature_code?: string;
 };
 
 export type TrustBannerProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/template",
-    "version": "0.89.1-beta.5",
+    "version": "0.89.1-rc.1",
     "private": false,
     "main": "index.tsx",
     "dependencies": {},
@@ -9,8 +9,7 @@
         "@momo-kits/carousel": "*",
         "prop-types": "^15.7.2",
         "react": "16.9.0",
-        "react-native": ">=0.55",
-        "@momo-platform/api": "0.1.67-rc.3"
+        "react-native": ">=0.55"
     },
     "license": "MoMo"
 }