@momo-kits/template 0.81.14 → 0.81.16-cns.1

package/TrustBanner/CustomAvatar.tsx

@@ -1,19 +1,12 @@
-import React, {FC, useContext} from 'react';
-import {View} from 'react-native';
+import React, {FC} from 'react';
+import {Image, Text, 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 <Text style={styles.description_xs}>{text}</Text>;
     }
 
     return <Image style={styles.avatarImage} source={{uri: image}} />;
@@ -24,8 +17,8 @@ const CustomAvatar: FC<CustomAvatarProps> = ({image, text, style}) => {
       style={[
         styles.customAvatar,
         {
-          backgroundColor: Colors.black_01,
-          borderColor: theme.colors.border.default,
+          backgroundColor: '#fff',
+          borderColor: '#E8E8E8',
         },
         style,
       ]}>

package/TrustBanner/index.tsx

@@ -1,18 +1,9 @@
-import React, {FC, useContext, useEffect, useState} from 'react';
-import {
-  requireNativeComponent,
-  TouchableOpacity,
-  UIManager,
-  View,
-} from 'react-native';
-import {TrackingParams, TrustBannerProps} from './types';
+import React, {FC, useEffect, useState} from 'react';
+import {Image, Text, 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';
 
-const NativeTrustBanner =
-  requireNativeComponent<TrustBannerProps>('TrustBannerView');
-
 const dataJsonUrl =
   'https://static.momocdn.net/app/json/component-kits/design_system.json';
 
@@ -30,6 +21,8 @@ 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',
@@ -37,20 +30,28 @@ const defaultData = {
 
 const TrustBanner: FC<TrustBannerProps> = ({
   style,
-  trackEvent,
   screenName = '',
   serviceName = '',
-  openWeb,
-  openUrl = 'https://momo.vn/an-toan-bao-mat',
+  onPress,
+  trackEvent,
+  language = 'vi',
 }) => {
-  const {theme, language} = useContext(ApplicationContext);
   const [data, setData] = useState(defaultData);
-  const {icons, sslImage, pciImage, momoImage, content} = data;
-  const trackingParams: TrackingParams = {
+  const {
+    icons,
+    sslImage,
+    pciImage,
+    momoImage,
+    url_config,
+    content,
+    feature_code,
+  } = data;
+  const trackingParams: TrustBannerCallbackParams = {
     screen_name: screenName,
     service_name: serviceName,
     component_name: 'logo_trust',
   };
+
   useEffect(() => {
     trackEvent?.('service_component_displayed', trackingParams);
     fetchJson();
@@ -67,6 +68,9 @@ const TrustBanner: FC<TrustBannerProps> = ({
         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,
       });
     }
   };
@@ -81,8 +85,8 @@ const TrustBanner: FC<TrustBannerProps> = ({
           style={[
             styles.customAvatar,
             {
-              borderColor: theme.colors.border.default,
-              backgroundColor: Colors.pink_09,
+              borderColor: '#E8E8E8',
+              backgroundColor: '#FDEAF4',
             },
           ]}
           text="+36"
@@ -111,30 +115,15 @@ const TrustBanner: FC<TrustBannerProps> = ({
     );
   };
 
-  if (UIManager.getViewManagerConfig('TrustBannerView')) {
-    return (
-      <TouchableOpacity
-        onPress={() => {
-          trackEvent?.('service_component_clicked', trackingParams);
-          openWeb?.(openUrl);
-        }}
-        activeOpacity={0.7}
-        style={style}>
-        <NativeTrustBanner
-          content={defaultData.content.vi}
-          style={{height: 88}}
-        />
-      </TouchableOpacity>
-    );
-  }
+  const _onPress = () => {
+    trackEvent?.('service_component_clicked', trackingParams);
+    onPress?.({...trackingParams, url_config, feature_code});
+  };
 
   return (
     <TouchableOpacity
-      onPress={() => {
-        trackEvent?.('service_component_clicked', trackingParams);
-        openWeb?.(openUrl);
-      }}
-      activeOpacity={0.7}
+      onPress={_onPress}
+      activeOpacity={onPress ? 0.7 : 1}
       style={[style, styles.container]}>
       <Image
         style={styles.momoImage}
@@ -144,7 +133,7 @@ const TrustBanner: FC<TrustBannerProps> = ({
         }}
       />
       <View style={styles.flex}>
-        <Text style={styles.message} typography={'description_s'}>
+        <Text style={[styles.message, styles.description_s]}>
           {content?.[language || 'vi'] || defaultData.content.vi}
         </Text>
         {renderFooter()}

package/TrustBanner/styles.ts

@@ -1,19 +1,30 @@
-import {StyleSheet} from 'react-native';
-import {Colors, Radius, scaleSize, Spacing} from '@momo-kits/foundation';
+import {Dimensions, StyleSheet} from 'react-native';
+
+const deviceWidth = Dimensions.get('window').width;
+const DEFAULT_SCREEN_SIZE = 375;
+const scaleSize = (size: number) => {
+  const scaleRate = deviceWidth / DEFAULT_SCREEN_SIZE;
+
+  if (scaleRate > 1) {
+    return Math.min(Math.round(size * scaleRate), size + 3);
+  }
+
+  return size;
+};
 
 export default StyleSheet.create({
   container: {
     flexDirection: 'row',
-    padding: Spacing.M,
-    borderRadius: Radius.S,
-    backgroundColor: Colors.blue_10,
+    padding: 12,
+    borderRadius: 8,
+    backgroundColor: '#F2F8FF',
     width: '100%',
   },
   flex: {flex: 1},
   momoImage: {
     width: scaleSize(64),
     height: scaleSize(64),
-    marginRight: Spacing.S,
+    marginRight: 8,
   },
   image: {
     width: scaleSize(52),
@@ -23,9 +34,9 @@ export default StyleSheet.create({
     flexDirection: 'row',
   },
   pciImage: {
-    marginRight: Spacing.XS,
+    marginRight: 4,
   },
-  message: {marginBottom: Spacing.S},
+  message: {marginBottom: 8},
   footer: {
     flexDirection: 'row',
     justifyContent: 'space-between',
@@ -34,7 +45,7 @@ export default StyleSheet.create({
     width: scaleSize(24),
     height: scaleSize(24),
     borderWidth: 1,
-    borderRadius: Radius.L,
+    borderRadius: 16,
     alignItems: 'center',
     justifyContent: 'center',
     marginLeft: scaleSize(-6),
@@ -43,4 +54,14 @@ export default StyleSheet.create({
     flexDirection: 'row',
   },
   avatarImage: {width: '100%', height: '100%'},
+  description_s: {
+    fontSize: scaleSize(12),
+    lineHeight: scaleSize(16),
+    color: '#484848',
+  },
+  description_xs: {
+    fontSize: scaleSize(10),
+    lineHeight: scaleSize(14),
+    color: '#EB2F96',
+  },
 });

package/TrustBanner/types.ts

@@ -1,20 +1,49 @@
 import {ViewStyle} from 'react-native';
 
-export type TrackingParams = {
+export type TrustBannerCallbackParams = {
   service_name: string;
   screen_name: string;
   component_name: string;
   url_config?: string;
+  feature_code?: string;
 };
 
 export type TrustBannerProps = {
-  trackEvent?: (eventName: string, trackingParams: TrackingParams) => void;
+  /**
+   * Optional. Styles to customize the appearance of the banner. Can be a single
+   * style object or an array of style objects.
+   */
   style?: ViewStyle | ViewStyle[];
-  openWeb?: (params: string) => void;
+
+  /**
+   * Optional. The name of the screen where the banner is displayed. This can be
+   * used to identify the context in which the banner appears.
+   */
   screenName?: string;
+
+  /**
+   * Optional. The name of the service or feature the banner is associated with.
+   * This helps in providing contextual information within the banner content.
+   */
   serviceName?: string;
-  openUrl?: string;
-  content?: string;
+
+  /**
+   * Optional. A callback function can be openWeb or startFeatureCode,
+   * return params:
+   *   service_name,
+   *   screen_name,
+   *   component_name,
+   *   url_config,
+   *   feature_code,
+   */
+  onPress?: (params: TrustBannerCallbackParams) => void;
+
+  /**
+   * Optional. instance of maxApi trackEvent function.
+   */
+  trackEvent?: (eventName: string, params: TrustBannerCallbackParams) => void;
+
+  language?: 'vi' | 'en';
 };
 
 export type CustomAvatarProps = {

package/index.tsx

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

package/package.json

@@ -1,18 +1,13 @@
 {
     "name": "@momo-kits/template",
-    "version": "0.81.14",
+    "version": "0.81.16-cns.1",
     "private": false,
     "main": "index.tsx",
     "dependencies": {},
     "peerDependencies": {
-        "@momo-kits/foundation": "latest",
-        "@momo-kits/carousel": "0.81.6-beta.12",
         "prop-types": "^15.7.2",
         "react": "16.9.0",
         "react-native": ">=0.55"
     },
-    "devDependencies": {
-        "@momo-platform/versions": "4.1.11"
-    },
     "license": "MoMo"
-}
+}

package/HeaderSliderBanner/index.tsx

@@ -1,85 +0,0 @@
-import React, {FC} from 'react';
-import {Animated, TouchableOpacity, View} from 'react-native';
-import Carousel from '@momo-kits/carousel';
-import {Image, Pagination, Spacing} from '@momo-kits/foundation';
-import {HeaderSliderBannerProps} from './types';
-
-const HeaderSliderBanner: FC<HeaderSliderBannerProps> = ({
-  animatedValue = new Animated.Value(0),
-  paginationBottom = 56,
-  data = [],
-  activeIndex = 0,
-  paginationProps,
-  carouselProps,
-  onSnapToItem,
-  onPressItem,
-  paginationType = 'black_white',
-}) => {
-  const scale = animatedValue.interpolate({
-    inputRange: [-300, 0, 300],
-    outputRange: [4, 1, 1],
-    extrapolate: 'clamp',
-  });
-  const opacity = animatedValue.interpolate({
-    inputRange: [0, 150, 300],
-    outputRange: [1, 0.5, 0],
-    extrapolate: 'clamp',
-  });
-  const translateY = animatedValue.interpolate({
-    inputRange: [-300, 0],
-    outputRange: [-80, -2],
-    extrapolate: 'clamp',
-  });
-
-  const paginationOpacity = animatedValue.interpolate({
-    inputRange: [-40, 0],
-    outputRange: [0, 1],
-  });
-
-  const renderItem = (info: {item: any; index: number}) => {
-    const {item, index} = info;
-    return (
-      <TouchableOpacity disabled={!onPressItem} onPress={onPressItem}>
-        <Image
-          key={`Header banner ${item}_${index}`}
-          source={{
-            uri: item,
-          }}
-        />
-      </TouchableOpacity>
-    );
-  };
-
-  return (
-    <Animated.View
-      style={{
-        height: 210,
-        opacity: opacity,
-        transform: [{scale}, {translateY}],
-      }}>
-      <Carousel
-        {...carouselProps}
-        full={true}
-        data={data}
-        onSnapToItem={onSnapToItem}
-        renderItem={renderItem}
-      />
-      <Animated.View
-        style={{
-          position: 'absolute',
-          bottom: paginationBottom - Spacing.S,
-          alignSelf: 'center',
-          opacity: paginationOpacity,
-        }}>
-        <Pagination
-          {...paginationProps}
-          activeIndex={activeIndex}
-          dataLength={data.length}
-          type={paginationType}
-        />
-      </Animated.View>
-    </Animated.View>
-  );
-};
-
-export default HeaderSliderBanner;

package/HeaderSliderBanner/types.ts

@@ -1,16 +0,0 @@
-import {PaginationProps} from '@momo-kits/foundation';
-import {CarouselProps} from '@momo-kits/carousel';
-import {Animated} from 'react-native';
-import AnimatedValue = Animated.AnimatedValue;
-
-export type HeaderSliderBannerProps = {
-  animatedValue: AnimatedValue;
-  data: string[];
-  onSnapToItem: (index: number) => void;
-  activeIndex: number;
-  paginationProps?: PaginationProps;
-  carouselProps?: CarouselProps;
-  paginationBottom?: 8 | 24 | 56;
-  onPressItem?: () => void;
-  paginationType: 'black_white' | 'number';
-};