@momo-kits/template 0.81.7 → 0.81.8

package/HeaderSliderBanner/index.tsx

@@ -56,7 +56,6 @@ const HeaderSliderBanner: FC<HeaderSliderBannerProps> = ({
         height: 210,
         opacity: opacity,
         transform: [{scale}, {translateY}],
-        backgroundColor: 'red',
       }}>
       <Carousel
         {...carouselProps}

package/TrustBanner/CustomAvatar.tsx

@@ -0,0 +1,37 @@
+import React, {FC, useContext} from 'react';
+import {View} from 'react-native';
+import styles from './styles';
+import {ApplicationContext, Colors, Image, Text} from '@momo-kits/foundation';
+import {CustomAvatarProps} from './types';
+
+const CustomAvatar: FC<CustomAvatarProps> = ({image, text, style}) => {
+  const {theme} = useContext(ApplicationContext);
+
+  const renderContent = () => {
+    if (text) {
+      return (
+        <Text color={theme.colors.primary} typography={'description_xs'}>
+          {text}
+        </Text>
+      );
+    }
+
+    return <Image style={styles.avatarImage} source={{uri: image}} />;
+  };
+
+  return (
+    <View
+      style={[
+        styles.customAvatar,
+        {
+          backgroundColor: Colors.black_01,
+          borderColor: theme.colors.border.default,
+        },
+        style,
+      ]}>
+      {renderContent()}
+    </View>
+  );
+};
+
+export default CustomAvatar;

package/TrustBanner/index.tsx

@@ -0,0 +1,87 @@
+import React, {FC, useContext} from 'react';
+import {requireNativeComponent, UIManager, View, ViewProps} from 'react-native';
+import {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 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 TrustBanner: FC<TrustBannerProps> = ({
+  message = '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,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+
+  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={styles.imageList}>
+          <Image
+            resizeMode={'contain'}
+            style={[styles.image, styles.pciImage]}
+            source={{uri: pciImage}}
+          />
+          <Image
+            resizeMode={'contain'}
+            style={styles.image}
+            source={{uri: sslImage}}
+          />
+        </View>
+        {renderIconList()}
+      </View>
+    );
+  };
+
+  if (UIManager.getViewManagerConfig('TrustBannerView')) {
+    return <NativeTrustBanner style={{height: 88}} />;
+  }
+
+  return (
+    <View style={[style, styles.container]}>
+      <Image
+        style={styles.momoImage}
+        resizeMode={'contain'}
+        source={{
+          uri: 'https://static.momocdn.net/app/img/kits/trustBanner/ic_momo_secu.png',
+        }}
+      />
+      <View style={styles.flex}>
+        <Text style={styles.message} typography={'description_s'}>
+          {message}
+        </Text>
+        {renderFooter()}
+      </View>
+    </View>
+  );
+};
+
+export default TrustBanner;

package/TrustBanner/styles.ts

@@ -0,0 +1,46 @@
+import {StyleSheet} from 'react-native';
+import {Colors, Radius, scaleSize, Spacing} from '@momo-kits/foundation';
+
+export default StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    padding: Spacing.M,
+    borderRadius: Radius.S,
+    backgroundColor: Colors.blue_10,
+    width: '100%',
+  },
+  flex: {flex: 1},
+  momoImage: {
+    width: scaleSize(64),
+    height: scaleSize(64),
+    marginRight: Spacing.S,
+  },
+  image: {
+    width: scaleSize(52),
+    height: scaleSize(20),
+  },
+  imageList: {
+    flexDirection: 'row',
+  },
+  pciImage: {
+    marginRight: Spacing.XS,
+  },
+  message: {marginBottom: Spacing.S},
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  customAvatar: {
+    width: scaleSize(24),
+    height: scaleSize(24),
+    borderWidth: 1,
+    borderRadius: Radius.L,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: scaleSize(-6),
+  },
+  iconList: {
+    flexDirection: 'row',
+  },
+  avatarImage: {width: '100%', height: '100%'},
+});

package/TrustBanner/types.ts

@@ -0,0 +1,15 @@
+import {ViewStyle} from 'react-native';
+
+export type TrustBannerProps = {
+  message?: string;
+  icons?: string[];
+  pciImage?: string;
+  sslImage?: string;
+  style?: ViewStyle | ViewStyle[];
+};
+
+export type CustomAvatarProps = {
+  image?: string;
+  text?: string;
+  style?: ViewStyle[] | ViewStyle;
+};

package/index.tsx

@@ -1,3 +1,3 @@
 import HeaderSliderBanner from './HeaderSliderBanner';
-
-export {HeaderSliderBanner};
+import TrustBanner from './TrustBanner';
+export {HeaderSliderBanner, TrustBanner};

package/package.json

@@ -1,12 +1,12 @@
 {
     "name": "@momo-kits/template",
-    "version": "0.81.7",
+    "version": "0.81.8",
     "private": false,
     "main": "index.tsx",
     "dependencies": {},
     "peerDependencies": {
         "@momo-kits/foundation": "latest",
-        "@momo-kits/carousel": "0.80.8-beta.12",
+        "@momo-kits/carousel": "0.81.6-beta.12",
         "prop-types": "^15.7.2",
         "react": "16.9.0",
         "react-native": ">=0.55"