@momo-kits/template 0.102.3-beta.0 → 0.102.3-beta.1

package/TrustBanner/index.tsx

@@ -2,8 +2,7 @@ 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';
 import MaxApi from '@momo-platform/api';
 
 const defaultData = {
@@ -11,10 +10,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',
@@ -31,9 +33,12 @@ const TrustBanner: FC<TrustBannerProps> = ({
   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} = data;
+
   const trackingParams: TrustBannerCallbackParams = {
     screen_name: screenName,
     service_name: serviceName,
@@ -48,7 +53,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,6 +64,7 @@ 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,
         });
       }
@@ -67,29 +73,15 @@ 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 renderFooter = () => {
     return (
-      <View style={styles.footer}>
+      <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
+        <TouchableOpacity 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'} />
+        </TouchableOpacity>
         <View style={styles.imageList}>
           <Image
             resizeMode={'contain'}
@@ -102,7 +94,6 @@ const TrustBanner: FC<TrustBannerProps> = ({
             source={{uri: sslImage}}
           />
         </View>
-        {renderIconList()}
       </View>
     );
   };
@@ -115,7 +106,6 @@ const TrustBanner: FC<TrustBannerProps> = ({
       MaxApi.startFeatureCode(urlConfig, {}, () => {});
     }
   };
-
   return (
     <TouchableOpacity
       disabled={disabledPress}
@@ -134,7 +124,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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/template",
-    "version": "0.102.3-beta.0",
+    "version": "0.102.3-beta.1",
     "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