@momo-kits/native-kits 0.157.1-beta.9-debug → 0.157.1-com.1-debug

package/src/libs/TabView/types.ts

@@ -0,0 +1,166 @@
+import {ReactElement} from 'react';
+import {PagerViewProps} from 'react-native-pager-view';
+import {Animated, ViewStyle} from 'react-native';
+
+export type Tab = {
+  /**
+   * The title of the tab.
+   */
+  title: string;
+
+  /**
+   * Optional. The icon associated with the tab, usually represented by a string referencing the icon's name or path.
+   */
+  icon?: string;
+
+  renderIcon?: (active: boolean) => ReactElement;
+
+  /**
+   * The main component or content to be displayed when this tab is active.
+   */
+  component: ReactElement;
+
+  /**
+   * Optional. If `true`, shows a dot indicator on the tab, often used to signal notifications or updates.
+   */
+  showDot?: boolean;
+
+  /**
+   * Optional. Specifies the size of the dot indicator, either 'small' or 'large'.
+   */
+  dotSize?: 'small' | 'large';
+
+  badgeValue?: string | number;
+
+  accessibilityLabel?: string;
+};
+
+export type TabItemProps = {
+  /**
+   * The Tab object containing the details and content of this tab item.
+   */
+  tab: Tab;
+
+  /**
+   * Indicates if this tab item is currently active or selected.
+   */
+  active: boolean;
+
+  /**
+   * Optional. A callback function that is triggered when this tab item is pressed.
+   */
+  onPressTabItem?: () => void;
+
+  /**
+   * Optional. Specifies the width of the tab item. Useful for customizing layout and appearance.
+   */
+  width?: number;
+
+  /**
+   * Optional. Specifies the layout direction for the tab's content, either in a row or column format.
+   */
+  direction?: 'row' | 'column';
+
+  selectedColor?: string;
+
+  unselectedColor?: string;
+};
+
+export type TabViewProps = {
+  /**
+   * Optional. If `true`, allows the tab bar to be scrollable, useful for a large number of tabs.
+   */
+  scrollable?: boolean;
+
+  /**
+   * An array of Tab objects representing each tab in the view.
+   */
+  tabs: Tab[];
+
+  /**
+   * Optional. A callback function that is triggered when a tab item is pressed, receiving the index of the tab as a parameter.
+   */
+  onPressTabItem?: (index: number) => void;
+
+  /**
+   * Optional. Specifies the visual style of the tab view, such as 'default' or 'card'.
+   */
+  type?: 'default' | 'card';
+
+  /**
+   * Optional. Specifies the initial page or tab to be displayed.
+   */
+  initialPage?: number;
+
+  /**
+   * Optional. Additional properties to pass to the underlying pager view component.
+   */
+  pagerProps?: Omit<PagerViewProps, 'children'>;
+
+  /**
+   * Optional. Specifies the layout direction for the tab's content, either in a row or column format.
+   */
+  direction?: 'row' | 'column';
+
+  selectedColor?: string;
+
+  unselectedColor?: string;
+
+  style?: ViewStyle;
+
+  accessibilityLabel?: string;
+
+  accessibilityLabelForSelectedCard?: string;
+
+  /**
+   * Optional. If `true`, the TabView will wrap its content height instead of using flex layout.
+   * When enabled, swipe gestures are disabled and only the selected tab content is rendered.
+   * Default is `false` (uses PagerView with flex layout and swipe enabled).
+   */
+  fitContent?: boolean;
+};
+
+/**
+ * Properties for the TabBar component, which displays the navigation tabs.
+ */
+export type TabBarProps = {
+  /**
+   * An array of Tab objects representing each tab in the tab bar.
+   */
+  tabs: Tab[];
+
+  /**
+   * The index of the currently selected or active tab.
+   */
+  selectedIndex: number;
+
+  /**
+   * Optional. A callback function that is triggered when a tab item is pressed, receiving the index of the tab as a parameter.
+   */
+  onPressTabItem?: (index: number) => void;
+
+  /**
+   * The width of the container in which the tab bar is placed. Useful for layout calculations.
+   */
+  containerWidth: number;
+
+  /**
+   * Represents the horizontal scroll position in a scrollable tab bar.
+   */
+  scrollX: Animated.Value;
+
+  /**
+   * Optional. Specifies the layout direction for the tab's content, either in a row or column format.
+   */
+  direction?: 'row' | 'column';
+
+  selectedColor?: string;
+
+  unselectedColor?: string;
+
+  accessibilityLabelForSelectedCard?: string;
+};
+
+export type TabViewRef = {
+  goToPage: (page: number) => void;
+};

package/src/libs/Template/HeaderSliderBanner/index.tsx

@@ -0,0 +1,86 @@
+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
+          style={{width: '100%', height: '100%'}}
+          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/src/libs/Template/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/src/libs/Template/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/src/libs/Template/TrustBanner/index.tsx

@@ -0,0 +1,161 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { FC, useContext, useEffect } from 'react';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { TrustBannerCallbackParams, TrustBannerProps } from './types';
+import styles from './styles';
+import {
+  ApplicationContext,
+  Icon,
+  Image,
+  MiniAppContext,
+  Styles,
+  Text,
+} from '@momo-kits/foundation';
+// @ts-ignore
+import MaxApi from '@momo-platform/api';
+
+const defaultData = {
+  content: {
+    vi: 'An toàn tài sản & Bảo mật thông tin của bạn là ưu tiên hàng đầu của MoMo.',
+    en: "Ensuring financial security and data privacy is MoMo's highest priority.",
+  },
+  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_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',
+  ],
+  titleWeb: {
+    vi: 'Thông tin',
+    en: 'Information',
+  },
+};
+
+const TrustBanner: FC<TrustBannerProps> = ({
+  style,
+  screenName = '',
+  serviceName = '',
+  trackEvent,
+}) => {
+  const context = useContext<any>(MiniAppContext);
+  const {
+    theme,
+    translate = (data: { vi: string; en: string }) => {
+      return data.vi;
+    },
+  } = useContext(ApplicationContext);
+
+  const {
+    sslImage,
+    pciImage,
+    momoImage,
+    urlConfig,
+    content,
+    subContent,
+    titleWeb,
+  } = context?.designSystemConfig?.config?.trustBanner || defaultData;
+
+  const translationSubContent = translate(subContent) || subContent.vi;
+  const translationContent = translate(content);
+
+  //to check for old version of translation, need to be removed in next sprints.
+  const finalSubContent =
+    typeof translationSubContent === 'string'
+      ? translationSubContent
+      : subContent.vi;
+  const finalContent =
+    typeof translationContent === 'string' ? translationContent : content.vi;
+
+  const trackingParams: TrustBannerCallbackParams = {
+    screen_name: screenName,
+    service_name: serviceName,
+    component_name: 'logo_trust',
+  };
+
+  useEffect(() => {
+    trackEvent?.('service_component_displayed', trackingParams);
+  }, []);
+
+  const _onPress = () => {
+    trackEvent?.('service_component_clicked', { ...trackingParams, urlConfig });
+    if (urlConfig.indexOf('https') > -1) {
+      const openWebData = {
+        url: urlConfig,
+        title: translate(titleWeb) || subContent.vi,
+      };
+      MaxApi.openWeb(openWebData);
+    } else {
+      MaxApi.startFeatureCode(urlConfig, {}, () => {});
+    }
+  };
+
+  const renderFooter = () => {
+    return (
+      <View style={stylesInside.footerContainer}>
+        <View style={Styles.row}>
+          <Text typography={'action_xs_bold'} color={'#eb2f96'}>
+            {finalSubContent}
+          </Text>
+          <Icon
+            source={'arrow_chevron_right_small'}
+            color={'#eb2f96'}
+            size={20}
+          />
+        </View>
+        <View style={styles.imageList}>
+          <Image
+            resizeMode={'contain'}
+            style={styles.pciImage}
+            source={{ uri: pciImage }}
+          />
+          <Image
+            resizeMode={'contain'}
+            style={styles.image}
+            source={{ uri: sslImage }}
+          />
+        </View>
+      </View>
+    );
+  };
+
+  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'}
+          numberOfLines={2}
+        >
+          {finalContent}
+        </Text>
+        {renderFooter()}
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const stylesInside = StyleSheet.create({
+  footerContainer: { flexDirection: 'row', justifyContent: 'space-between' },
+});
+
+export default TrustBanner;

package/src/libs/Template/TrustBanner/styles.ts

@@ -0,0 +1,48 @@
+import {StyleSheet} from 'react-native';
+import {Colors, Radius, 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: 64,
+    height: 64,
+    marginRight: Spacing.S,
+  },
+  image: {
+    width: 52,
+    height: 20,
+  },
+  imageList: {
+    flexDirection: 'row',
+  },
+  pciImage: {
+    marginRight: Spacing.XS,
+    width: 25,
+    height: 20,
+  },
+  message: {marginBottom: Spacing.S},
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  customAvatar: {
+    width: 24,
+    height: 24,
+    borderWidth: 1,
+    borderRadius: Radius.L,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: -6,
+  },
+  iconList: {
+    flexDirection: 'row',
+  },
+  avatarImage: {width: '100%', height: '100%'},
+});

package/src/libs/Template/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/src/libs/Template/index.tsx

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

package/src/libs/Template/package.json

@@ -0,0 +1,18 @@
+{
+    "name": "@momo-kits/template",
+    "version": "0.157.1-beta.4",
+    "private": false,
+    "main": "index.tsx",
+    "peerDependencies": {
+        "@momo-kits/foundation": "latest",
+        "@momo-kits/carousel": "*",
+        "react": "*",
+        "react-native": "*",
+        "@momo-platform/api": "0.1.67-rc.3"
+    },
+    "license": "MoMo",
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/"
+    },
+    "dependencies": {}
+}

package/src/libs/Template/publish.sh

@@ -0,0 +1,17 @@
+#!/bin/bash
+
+if [ "$1" == "stable" ]; then
+  npm version $(npm view @momo-kits/foundation@stable version)
+  npm version patch
+  npm publish --tag stable --access=public
+elif [ "$1" == "latest" ]; then
+  npm publish --tag latest --access=public
+elif [ "$1" == "beta" ]; then
+  npm publish --tag beta --access=public
+else
+  npm publish --tag alpha --access=public
+fi
+
+PACKAGE_NAME=$(npm pkg get name)
+NEW_PACKAGE_VERSION=$(npm pkg get version)
+