@momo-kits/template 0.74.2-react-native.1

package/HeaderSliderBanner/index.tsx

@@ -0,0 +1,85 @@
+import React, {FC} from 'react';
+import {Animated, TouchableOpacity} 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

@@ -0,0 +1,16 @@
+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';
+};

package/TrustBanner/CustomAvatar.tsx

@@ -0,0 +1,39 @@
+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_regular'}>
+          {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,143 @@
+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 MaxApi from '@momo-platform/api';
+
+const defaultData = {
+  content: {
+    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',
+  sslImage: 'https://static.momocdn.net/app/img/kits/trustBanner/ssl.png',
+  momoImage:
+    'https://static.momocdn.net/app/img/kits/trustBanner/ic_momo_secu.png',
+  urlConfig: 'login_and_security',
+  icons: [
+    '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> = ({
+  style,
+  screenName = '',
+  serviceName = '',
+  trackEvent,
+}) => {
+  const {theme, language} = useContext(ApplicationContext);
+  const [data, setData] = useState(defaultData);
+  const {icons, sslImage, pciImage, momoImage, urlConfig, content} = data;
+  const trackingParams: TrustBannerCallbackParams = {
+    screen_name: screenName,
+    service_name: serviceName,
+    component_name: 'logo_trust',
+  };
+
+  useEffect(() => {
+    trackEvent?.('service_component_displayed', trackingParams);
+    fetchJson();
+  }, []);
+
+  const fetchJson = () => {
+    try {
+      const config = JSON.parse(
+        NativeModules?.ConfigsModule?.getConfigSync?.('DESIGN_SYSTEM'),
+      );
+      const dataJSon = config?.trustBanner;
+
+      if (dataJSon && dataJSon?.trustBanner) {
+        setData({
+          icons: dataJSon.trustBanner.icons || defaultData.icons,
+          sslImage: dataJSon.trustBanner.sslImage || defaultData.sslImage,
+          pciImage: dataJSon.trustBanner.pciImage || defaultData.pciImage,
+          momoImage: dataJSon.trustBanner.momoImage || defaultData.momoImage,
+          content: dataJSon.trustBanner.content || defaultData.content,
+          urlConfig: dataJSon.trustBanner.urlConfig || defaultData.urlConfig,
+        });
+      }
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  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>
+    );
+  };
+
+  const _onPress = () => {
+    trackEvent?.('service_component_clicked', {...trackingParams, urlConfig});
+    if (urlConfig.indexOf('https') > -1) {
+      MaxApi.openWeb(urlConfig, {}, () => {});
+    } else {
+      MaxApi.startFeatureCode(urlConfig, {}, () => {});
+    }
+  };
+
+  return (
+    <TouchableOpacity
+      onPress={_onPress}
+      activeOpacity={0.7}
+      style={[style, styles.container]}>
+      <Image
+        style={styles.momoImage}
+        resizeMode={'contain'}
+        source={{
+          uri: momoImage,
+        }}
+      />
+      <View style={styles.flex}>
+        <Text
+          style={styles.message}
+          color={theme.colors.text.secondary}
+          typography={'description_default_regular'}>
+          {content?.[language || 'vi'] || defaultData.content.vi}
+        </Text>
+        {renderFooter()}
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+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,50 @@
+import {ViewStyle} from 'react-native';
+
+export type TrustBannerCallbackParams = {
+  service_name: string;
+  screen_name: string;
+  component_name: string;
+  urlConfig?: string;
+};
+
+export type TrustBannerProps = {
+  /**
+   * Optional. Styles to customize the appearance of the banner. Can be a single
+   * style object or an array of style objects.
+   */
+  style?: ViewStyle | ViewStyle[];
+
+  /**
+   * 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;
+
+  /**
+   * 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;
+};
+
+export type CustomAvatarProps = {
+  image?: string;
+  text?: string;
+  style?: ViewStyle[] | ViewStyle;
+};

package/index.tsx

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

package/package.json

@@ -0,0 +1,16 @@
+{
+    "name": "@momo-kits/template",
+    "version": "0.74.2-react-native.1",
+    "private": false,
+    "main": "index.tsx",
+    "peerDependencies": {
+        "@momo-kits/foundation": "*",
+        "@momo-kits/carousel": "*",
+        "prop-types": "15.7.2",
+        "react": "*",
+        "react-native": "*",
+        "@momo-platform/api": "0.1.67-rc.3"
+    },
+    "license": "MoMo",
+    "dependencies": {}
+}

package/publish.sh

@@ -0,0 +1,28 @@
+#!/bin/bash
+rm -rf dist
+mkdir dist
+
+cp . ./dist
+
+# GET VERSION from mck_package.json
+VERSIONSTRING=( v$(jq .version package.json) )
+VERSION=(${VERSIONSTRING//[\"]/})
+echo VERSION: $VERSION
+
+rsync -r --verbose --exclude '*.mdx' --exclude '*Demo.js'  --exclude 'props-type.js' --exclude 'prop-types.js' ./* dist
+
+# #babel component to dist
+#babel ./dist -d dist --copy-files
+
+#copy option
+#cp -r ./src/ dist
+
+
+#npm login
+#publish dist to npm
+cd dist
+npm publish --tag beta --access=public
+cd ..
+rm -rf dist
+
+##curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/bank new version release: '*"$VERSION"*' `https://www.npmjs.com/package/@momo-kits/avatar`"}'