@momo-kits/template 0.102.4 → 0.103.1-beta.0

package/TrustBanner/index.tsx

@@ -2,8 +2,8 @@ import React, {FC, useContext, useEffect, useState} from 'react';
 import {NativeModules, 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 {ApplicationContext, Icon, Image, Text} from '@momo-kits/foundation';
+// @ts-ignore
 import MaxApi from '@momo-platform/api';
 
 const defaultData = {
@@ -11,10 +11,13 @@ const defaultData = {
     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',
+  subContent: {
+    vi: 'Tìm hiểu thêm',
+    en: 'Learn more',
+  },
+  pciImage: 'https://static.momocdn.net/app/img/kits/trustBanner/pci_dss.png',
   sslImage: 'https://static.momocdn.net/app/img/kits/trustBanner/ssl.png',
-  momoImage:
-    'https://static.momocdn.net/app/img/kits/trustBanner/ic_momo_secu.png',
+  momoImage: 'https://static.momocdn.net/app/img/kits/trustBanner/ic_secu.png',
   urlConfig: 'login_and_security',
   icons: [
     'https://static.momocdn.net/app/img/kits/trustBanner/ic_viettinbank.png',
@@ -22,6 +25,10 @@ const defaultData = {
     'https://static.momocdn.net/app/img/kits/trustBanner/ic_vietcombank.png',
     'https://static.momocdn.net/app/img/kits/trustBanner/ic_bidv.png',
   ],
+  titleWeb: {
+    vi: 'Thông tin',
+    en: 'Information',
+  },
 };
 
 const TrustBanner: FC<TrustBannerProps> = ({
@@ -29,11 +36,21 @@ const TrustBanner: FC<TrustBannerProps> = ({
   screenName = '',
   serviceName = '',
   trackEvent,
-  disabledPress = false,
 }) => {
-  const {theme, language} = useContext(ApplicationContext);
+  const {theme, language = 'vi'} = useContext(ApplicationContext);
+  const currentLanguage: 'en' | 'vi' = language;
   const [data, setData] = useState(defaultData);
-  const {icons, sslImage, pciImage, momoImage, urlConfig, content} = data;
+
+  const {
+    sslImage,
+    pciImage,
+    momoImage,
+    urlConfig,
+    content,
+    subContent,
+    titleWeb,
+  } = data;
+
   const trackingParams: TrustBannerCallbackParams = {
     screen_name: screenName,
     service_name: serviceName,
@@ -48,7 +65,7 @@ const TrustBanner: FC<TrustBannerProps> = ({
   const fetchJson = () => {
     try {
       const config = JSON.parse(
-        NativeModules?.ConfigsModule?.getConfigSync?.('DESIGN_SYSTEM'),
+        NativeModules?.ConfigsModule?.getConfigSync?.('DESIGN_SYSTEM')
       );
       const dataJSon = config?.trustBanner;
 
@@ -59,7 +76,9 @@ const TrustBanner: FC<TrustBannerProps> = ({
           pciImage: dataJSon.trustBanner.pciImage || defaultData.pciImage,
           momoImage: dataJSon.trustBanner.momoImage || defaultData.momoImage,
           content: dataJSon.trustBanner.content || defaultData.content,
+          subContent: dataJSon.trustBanner.subContent || defaultData.subContent,
           urlConfig: dataJSon.trustBanner.urlConfig || defaultData.urlConfig,
+          titleWeb: dataJSon.trustBanner.titleWeb || defaultData.titleWeb,
         });
       }
     } catch (e) {
@@ -67,33 +86,32 @@ const TrustBanner: FC<TrustBannerProps> = ({
     }
   };
 
-  const renderIconList = () => {
-    return (
-      <View style={styles.iconList}>
-        {icons.map(icon => {
-          return <CustomAvatar image={icon} />;
-        })}
-        <CustomAvatar
-          style={[
-            styles.customAvatar,
-            {
-              borderColor: theme.colors.border.default,
-              backgroundColor: Colors.pink_09,
-            },
-          ]}
-          text="36+"
-        />
-      </View>
-    );
+  const _onPress = () => {
+    trackEvent?.('service_component_clicked', {...trackingParams, urlConfig});
+    if (urlConfig.indexOf('https') > -1) {
+      const openWebData = {
+        url: urlConfig,
+        title: titleWeb?.[currentLanguage] || defaultData.subContent.vi,
+      };
+      MaxApi.openWeb(openWebData);
+    } else {
+      MaxApi.startFeatureCode(urlConfig, {}, () => {});
+    }
   };
 
   const renderFooter = () => {
     return (
-      <View style={styles.footer}>
+      <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
+        <View style={{flexDirection: 'row', alignItems: 'center'}}>
+          <Text typography={'action_xs_bold'} color={'#eb2f96'}>
+            {subContent?.[currentLanguage] || defaultData.subContent.vi}
+          </Text>
+          <Icon source={'arrow_chevron_right_small'} color={'#eb2f96'} />
+        </View>
         <View style={styles.imageList}>
           <Image
             resizeMode={'contain'}
-            style={[styles.image, styles.pciImage]}
+            style={styles.pciImage}
             source={{uri: pciImage}}
           />
           <Image
@@ -102,23 +120,12 @@ const TrustBanner: FC<TrustBannerProps> = ({
             source={{uri: sslImage}}
           />
         </View>
-        {renderIconList()}
       </View>
     );
   };
 
-  const _onPress = () => {
-    trackEvent?.('service_component_clicked', {...trackingParams, urlConfig});
-    if (urlConfig.indexOf('https') > -1) {
-      MaxApi.openWeb(urlConfig, {}, () => {});
-    } else {
-      MaxApi.startFeatureCode(urlConfig, {}, () => {});
-    }
-  };
-
   return (
     <TouchableOpacity
-      disabled={disabledPress}
       onPress={_onPress}
       activeOpacity={0.7}
       style={[style, styles.container]}>
@@ -134,7 +141,7 @@ const TrustBanner: FC<TrustBannerProps> = ({
           style={styles.message}
           color={theme.colors.text.secondary}
           typography={'description_default_regular'}>
-          {content?.[language || 'vi'] || defaultData.content.vi}
+          {content?.[currentLanguage] || defaultData.content.vi}
         </Text>
         {renderFooter()}
       </View>

package/TrustBanner/styles.ts

@@ -24,6 +24,8 @@ export default StyleSheet.create({
   },
   pciImage: {
     marginRight: Spacing.XS,
+    width: 25,
+    height: 20,
   },
   message: {marginBottom: Spacing.S},
   footer: {

package/TrustBanner/types.ts

@@ -41,8 +41,6 @@ export type TrustBannerProps = {
    * Optional. instance of maxApi trackEvent function.
    */
   trackEvent?: (eventName: string, params: TrustBannerCallbackParams) => void;
-
-  disabledPress?: boolean;
 };
 
 export type CustomAvatarProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/template",
-    "version": "0.102.4",
+    "version": "0.103.1-beta.0",
     "private": false,
     "main": "index.tsx",
     "dependencies": {},
@@ -13,4 +13,4 @@
         "@momo-platform/api": "0.1.67-rc.3"
     },
     "license": "MoMo"
-}
+}

package/publish.sh

@@ -7,15 +7,15 @@ rsync -r --exclude=/dist ./* dist
 cd dist
 
 if [ "$1" == "stable" ]; then
-  #npm version $(npm view @momo-kits/template@stable version)
-  #npm version patch
+  npm version $(npm view @momo-kits/foundation@stable version)
+  npm version patch
   npm publish --tag stable --access=public
 elif [ "$1" == "latest" ]; then
-  #npm version $(npm view @momo-kits/foundation@latest version)
+  npm version $(npm view @momo-kits/foundation@latest version)
   npm publish --tag latest --access=public
 else
-  #npm version $(npm view @momo-kits/template@beta version)
-  #npm version prerelease --preid=beta
+  npm version $(npm view @momo-kits/template@beta version)
+  npm version prerelease --preid=beta
   npm publish --tag beta --access=public
 fi