@momo-kits/template 0.103.2-rc.4 → 0.103.2-rc.41

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,33 +73,19 @@ 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'}
-            style={[styles.image, styles.pciImage]}
+            style={styles.pciImage}
             source={{uri: pciImage}}
           />
           <Image
@@ -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/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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/template",
-    "version": "0.103.2-rc.4",
+    "version": "0.103.2-rc.41",
     "private": false,
     "main": "index.tsx",
     "dependencies": {},