@momo-kits/foundation 0.76.1-beta.1 → 0.77.1-optimize.2

package/Popup/PopupNotify.tsx

@@ -1,24 +1,65 @@
-import React, {useContext} from 'react';
-import {StyleSheet, TouchableOpacity, View} from 'react-native';
-import {PopupNotifyProps} from './types';
+import React, {useContext, useEffect, useRef, useState} from 'react';
+import {ScrollView, StyleSheet, TouchableOpacity, View} from 'react-native';
+import {ApplicationContext, MiniAppContext} from '../Application';
+import {Button} from '../Button';
 import {Radius, Spacing, Styles} from '../Consts';
+import {Icon} from '../Icon';
 import {Image} from '../Image';
 import {Text} from '../Text';
-import {ApplicationContext} from '../Application';
-import {Button} from '../Button';
-import {Icon} from '../Icon';
+import {PopupNotifyProps} from './types';
 
 const PopupNotify: React.FC<PopupNotifyProps> = ({
+  id,
   image,
-  title,
-  description,
-  information,
+  title = 'Title',
+  description = 'Description',
+  error,
   secondary,
   primary,
   buttonDirection = 'row',
   onIconClose,
 }) => {
-  const {theme, navigator} = useContext(ApplicationContext);
+  const context = useContext<any>(MiniAppContext);
+  const {theme, navigator, translate} = useContext(ApplicationContext);
+  const [scrollContent, setScrollContent] = useState(false);
+  const closeAction = useRef('touch_outside');
+  let descriptionStyle = {};
+  let Description: any = View;
+  if (scrollContent) {
+    Description = ScrollView;
+    descriptionStyle = {height: 80};
+  }
+  /**
+   * tracking
+   */
+  useEffect(() => {
+    const routes = navigator?.ref.current?.getRootState()?.routes || [];
+    const routesLength = routes.length;
+    let screen_name = routes?.[0]?.params?.screen?.name;
+    if (routesLength > 1) {
+      screen_name = routes[routesLength - 2]?.params?.screen?.name;
+    }
+    const tracking = {
+      appId: context.appId,
+      code: context.code,
+      screen_name,
+      component_type: 'popup',
+      component_name: id,
+      error_code: error ? error : undefined,
+    };
+    navigator?.maxApi?.trackEvent?.('service_component_displayed', {
+      ...tracking,
+      trigger_id: '111012100000000000',
+    });
+
+    return () => {
+      navigator?.maxApi?.trackEvent?.('service_popup_dismissed', {
+        ...tracking,
+        trigger_id: '111154100000000001',
+        action_type: closeAction.current,
+      });
+    };
+  }, []);
 
   /**
    * on action popup
@@ -44,8 +85,10 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
                   type="text"
                   size="medium"
                   onPress={() => {
+                    closeAction.current = 'button_action';
                     onAction(secondary?.onPress);
                   }}
+                  accessibilityLabel={'btn_popup_cancel'}
                 />
               </View>
               <View style={styles.buttonSpace} />
@@ -56,8 +99,10 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
               title={primary.title}
               size="medium"
               onPress={() => {
+                closeAction.current = 'button_action';
                 onAction(primary.onPress);
               }}
+              accessibilityLabel={'btn_popup_allow'}
             />
           </View>
         </View>
@@ -67,9 +112,11 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       return (
         <View style={Styles.columnCenter}>
           <Button
+            accessibilityLabel={'btn_popup_allow'}
             title={primary.title}
             size="medium"
             onPress={() => {
+              closeAction.current = 'button_action';
               onAction(primary.onPress);
             }}
           />
@@ -77,10 +124,12 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
             <>
               <View style={styles.buttonSpace} />
               <Button
+                accessibilityLabel={'btn_popup_cancel'}
                 title={secondary?.title}
                 type="text"
                 size="medium"
                 onPress={() => {
+                  closeAction.current = 'button_action';
                   onAction(secondary?.onPress);
                 }}
               />
@@ -109,25 +158,32 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
    * build close action
    */
   const buildCloseIcon = () => {
-    return (
-      <View style={styles.iconCloseContainer}>
+    if (typeof onIconClose === 'function') {
+      return (
         <TouchableOpacity
-          onPress={() => onAction(onIconClose)}
-          style={[
-            styles.iconClose,
-            {
-              backgroundColor: theme.colors.text.default,
-              borderColor: theme.colors.background.surface,
-            },
-          ]}>
-          <Icon
-            source="navigation_close"
-            color={theme.colors.background.surface}
-            size={14}
-          />
+          accessibilityLabel={'ic_popup_close'}
+          style={styles.iconCloseContainer}
+          onPress={() => {
+            closeAction.current = 'icon_close';
+            onAction(onIconClose);
+          }}>
+          <View
+            style={[
+              styles.iconClose,
+              {
+                backgroundColor: theme.colors.text.default,
+                borderColor: theme.colors.background.surface,
+              },
+            ]}>
+            <Icon
+              source="navigation_close"
+              color={theme.colors.background.surface}
+              size={14}
+            />
+          </View>
         </TouchableOpacity>
-      </View>
-    );
+      );
+    }
   };
 
   return (
@@ -139,21 +195,29 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       ]}>
       {!!image && <Image source={{uri: image}} style={styles.image} />}
       <View style={styles.content}>
-        <Text typography={'title_xs'} numberOfLines={1}>
+        <Text typography={'header_default_bold'} numberOfLines={1}>
           {title}
         </Text>
-        <View style={styles.description}>
-          <Text typography={'paragraph_default'} numberOfLines={3}>
+        <Description style={[styles.description, descriptionStyle]}>
+          <Text
+            typography={'body_default_regular'}
+            onTextLayout={({nativeEvent: {lines}}) => {
+              const enableScroll = lines.length > 3;
+              if (enableScroll != scrollContent) {
+                setScrollContent(enableScroll);
+              }
+            }}>
             {description}
           </Text>
-        </View>
-        {!!information && (
+        </Description>
+        {!!error && (
           <View style={styles.information}>
             <Text
-              typography={'description_xs'}
+              typography={'description_xs_regular'}
               color={theme.colors.text.hint}
               numberOfLines={1}>
-              {information}
+              {translate?.('errorCode')}
+              {error}
             </Text>
           </View>
         )}
@@ -173,6 +237,7 @@ const styles = StyleSheet.create({
     borderTopLeftRadius: Radius.L,
     borderTopRightRadius: Radius.L,
     aspectRatio: 1.7777,
+    overflow: 'hidden',
   },
   content: {padding: Spacing.XL},
   description: {
@@ -191,8 +256,9 @@ const styles = StyleSheet.create({
   },
   iconCloseContainer: {
     position: 'absolute',
-    top: -Spacing.S,
-    right: -Spacing.S,
+    top: -Spacing.M,
+    right: -Spacing.M,
+    padding: Spacing.XS,
   },
   iconClose: {
     width: 20,
@@ -204,12 +270,4 @@ const styles = StyleSheet.create({
   },
 });
 
-PopupNotify.defaultProps = {
-  title: 'Title',
-  primary: {
-    title: 'Primary',
-    onPress: () => {},
-  },
-};
-
 export default PopupNotify;

package/Popup/PopupPromotion.tsx

@@ -1,13 +1,49 @@
-import React, {useContext} from 'react';
+import React, {useContext, useEffect, useRef} from 'react';
 import {StyleSheet, TouchableOpacity, View} from 'react-native';
 import {PopupPromotionProps} from './types';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, MiniAppContext} from '../Application';
 import {Image} from '../Image';
 import {Radius, Spacing} from '../Consts';
 import {Icon} from '../Icon';
 
-const PopupPromotion: React.FC<PopupPromotionProps> = ({image, onClose}) => {
+const PopupPromotion: React.FC<PopupPromotionProps> = ({
+  id,
+  image,
+  onIconClose,
+}) => {
+  const context = useContext<any>(MiniAppContext);
   const {theme, navigator} = useContext(ApplicationContext);
+  const closeAction = useRef('touch_outside');
+
+  /**
+   * tracking
+   */
+  useEffect(() => {
+    const routes = navigator?.ref.current?.getRootState()?.routes || [];
+    const routesLength = routes.length;
+    let screen_name = routes?.[0]?.params?.screen?.name;
+    if (routesLength > 1) {
+      screen_name = routes[routesLength - 2]?.params?.screen?.name;
+    }
+    const tracking = {
+      appId: context.appId,
+      code: context.code,
+      screen_name,
+      component_type: 'popup',
+      component_name: id,
+    };
+    navigator?.maxApi?.trackEvent?.('service_component_displayed', {
+      ...tracking,
+      trigger_id: '111012100000000000',
+    });
+    return () => {
+      navigator?.maxApi?.trackEvent?.('service_popup_dismissed', {
+        ...tracking,
+        trigger_id: '111154100000000001',
+        action_type: closeAction.current,
+      });
+    };
+  }, []);
 
   /**
    * build close action
@@ -16,22 +52,27 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({image, onClose}) => {
     return (
       <View style={styles.iconCloseContainer}>
         <TouchableOpacity
+          accessibilityLabel={'ic_popup_close'}
           onPress={() => {
+            closeAction.current = 'icon_close';
             navigator?.pop();
-            onClose?.();
+            onIconClose?.();
           }}
-          style={[
-            styles.iconClose,
-            {
-              backgroundColor: theme.colors.text.default,
-              borderColor: theme.colors.background.surface,
-            },
-          ]}>
-          <Icon
-            source="navigation_close"
-            color={theme.colors.background.surface}
-            size={14}
-          />
+          style={styles.iconButton}>
+          <View
+            style={[
+              styles.iconClose,
+              {
+                backgroundColor: theme.colors.text.default,
+                borderColor: theme.colors.background.surface,
+              },
+            ]}>
+            <Icon
+              source="navigation_close"
+              color={theme.colors.background.surface}
+              size={14}
+            />
+          </View>
         </TouchableOpacity>
       </View>
     );
@@ -40,10 +81,10 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({image, onClose}) => {
   return (
     <View accessibilityLabel={'PopupPromotion'}>
       <Image
-        style={styles.container}
         source={{
           uri: image,
         }}
+        style={styles.container}
       />
       {buildCloseIcon()}
     </View>
@@ -53,12 +94,16 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({image, onClose}) => {
 const styles = StyleSheet.create({
   container: {
     aspectRatio: 0.72,
+    width: '100%',
   },
   iconCloseContainer: {
     width: '100%',
     flexDirection: 'row',
     justifyContent: 'center',
-    marginTop: Spacing.L,
+    marginTop: Spacing.S,
+  },
+  iconButton: {
+    padding: 8,
   },
   iconClose: {
     width: 20,
@@ -70,8 +115,4 @@ const styles = StyleSheet.create({
   },
 });
 
-PopupPromotion.defaultProps = {
-  image: 'https://google.com',
-};
-
 export default PopupPromotion;

package/Popup/types.ts

@@ -1,4 +1,10 @@
+import React from 'react';
+
 export type PopupNotifyProps = {
+  /**
+   * `id`: Optional. id component_name for tracking component.
+   */
+  id?: string;
   /**
    * `image`: Optional. Represents the URL or path of the image to be displayed in the PopupNotify component.
    */
@@ -12,12 +18,12 @@ export type PopupNotifyProps = {
   /**
    * `description`: Represents the description text to be displayed in the PopupNotify component.
    */
-  description: string;
+  description: string | React.ReactNode;
 
   /**
-   * `information`: Optional. Represents additional information text to be displayed in the PopupNotify component.
+   * `error`: Optional. Represents additional error text to be displayed in the PopupNotify component.
    */
-  information?: string;
+  error?: string;
 
   /**
    * `secondary`: Optional. Represents the secondary action that can be performed from the PopupNotify component.
@@ -44,6 +50,11 @@ export type PopupNotifyProps = {
 };
 
 export type PopupPromotionProps = {
+  /**
+   * `id`: Optional. id component_name for tracking component.
+   */
+  id?: string;
+
   /**
    * `image`: Represents the URL or path of the image to be displayed in the PopupPromotion component.
    */
@@ -52,7 +63,7 @@ export type PopupPromotionProps = {
   /**
    * `onClose`: Optional. A callback function that is called when the PopupPromotion component is closed.
    */
-  onClose?: () => void;
+  onIconClose?: () => void;
 };
 
 type PopupAction = {

package/Radio/index.tsx

@@ -4,8 +4,9 @@ import {TouchableOpacity, View} from 'react-native';
 import {RadioProps} from './types';
 import {Text} from '../Text';
 import styles from './styles';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, ComponentContext} from '../Application';
 import {Spacing} from '../Consts';
+import {formatNameLength} from '../Application/utils';
 
 const Radio: FC<RadioProps> = ({
   value,
@@ -14,6 +15,8 @@ const Radio: FC<RadioProps> = ({
   onChange,
   label,
   style,
+  params,
+  accessibilityLabel,
 }) => {
   const {theme} = useContext(ApplicationContext);
   const selected = value === groupValue;
@@ -38,27 +41,38 @@ const Radio: FC<RadioProps> = ({
   }
 
   return (
-    <TouchableOpacity
-      accessibilityLabel={`Radio/${label}`}
-      onPress={onChange}
-      disabled={disabled}
-      style={[
-        style,
-        {
-          flexDirection: 'row',
-          alignItems: 'center',
-        },
-      ]}>
-      <View
+    <ComponentContext.Provider
+      value={{
+        componentName: 'Radio',
+        params,
+        state: disabled ? 'disabled' : 'enabled',
+        componentId: accessibilityLabel,
+        componentLabel: formatNameLength(label || ''),
+        componentValue: selected,
+        action: 'click',
+      }}>
+      <TouchableOpacity
+        accessibilityLabel={accessibilityLabel}
+        onPress={onChange}
+        disabled={disabled}
         style={[
-          styles.radio,
-          checkBoxStyle,
-          disabledStyle,
-          {marginRight: label ? Spacing.XS : 0},
-        ]}
-      />
-      {!!label && <Text typography={'description_default'}>{label}</Text>}
-    </TouchableOpacity>
+          style,
+          {
+            flexDirection: 'row',
+            alignItems: 'center',
+          },
+        ]}>
+        <View
+          style={[
+            styles.radio,
+            checkBoxStyle,
+            disabledStyle,
+            {marginRight: label ? Spacing.XS : 0},
+          ]}
+        />
+        {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
+      </TouchableOpacity>
+    </ComponentContext.Provider>
   );
 };
 

package/Radio/types.ts

@@ -1,11 +1,11 @@
-import {ViewStyle} from 'react-native';
+import {TouchableOpacityProps, ViewStyle} from 'react-native';
 
-export type RadioProps = {
+export interface RadioProps extends TouchableOpacityProps {
   /**
    * `value`: Represents the value associated with the Radio component.
    * It is used to determine whether the Radio component is selected or not in comparison with the `groupValue`.
    */
-  value: string;
+  value: any;
 
   /**
    * `disabled`: Optional. If `true`, the user won't be able to interact with the Radio component.
@@ -28,11 +28,13 @@ export type RadioProps = {
    * `groupValue`: Represents the value of the selected Radio component within a group of Radio components.
    * The Radio component for which `value` equals `groupValue` will be selected.
    */
-  groupValue: string;
+  groupValue: any;
 
   /**
    * `style`: Optional. Used to apply custom styling to the Radio component.
    * Accepts an object of style properties.
    */
   style?: ViewStyle;
-};
+
+  params?: any;
+}

package/Skeleton/index.tsx

@@ -41,7 +41,7 @@ const Skeleton: React.FC<SkeletonTypes> = ({style}) => {
     }
   };
   return (
-    <View style={[styles.container, style]} accessibilityLabel={'Skeleton'}>
+    <View style={[styles.container, style]}>
       <View
         onLayout={e => onLayout(e.nativeEvent.layout.width)}
         style={[Styles.flex, {backgroundColor: PRIMARY_COLOR}]}>

package/Skeleton/types.ts

@@ -1,3 +1,6 @@
 export type SkeletonTypes = {
+  /**
+   * Optional. Custom styles for the Skeleton component.
+   */
   style?: object;
 };

package/Switch/index.tsx

@@ -1,40 +1,51 @@
-import React, {FC, useContext} from 'react';
+import React, {FC} from 'react';
 import {TouchableOpacity, View} from 'react-native';
 import {SwitchProps} from './types';
 import styles from './styles';
-import {ApplicationContext} from '../Application';
 import {Colors} from '../Consts';
+import {ComponentContext} from '../Application';
 
-const Switch: FC<SwitchProps> = props => {
-  const {theme} = useContext(ApplicationContext);
-  const {value, onChange, disabled, style} = props;
+const Switch: FC<SwitchProps> = ({
+  value = false,
+  onChange,
+  disabled = false,
+  style,
+  params,
+  accessibilityLabel,
+}) => {
   const circleBackgroundColor = value ? Colors.black_01 : Colors.black_03;
   const circleAlign = value ? 'flex-end' : 'flex-start';
 
-  let backgroundColor = value ? theme.colors.primary : Colors.black_07;
+  let backgroundColor = value ? Colors.green_03 : Colors.black_07;
   if (disabled) {
-    backgroundColor = value ? theme.colors.background.tonal : Colors.black_05;
+    backgroundColor = value ? Colors.green_09 : Colors.black_05;
   }
 
   return (
-    <TouchableOpacity
-      accessibilityLabel={'Switch'}
-      disabled={disabled}
-      onPress={() => onChange?.(!value)}
-      style={[
-        style,
-        styles.container,
-        {backgroundColor, alignItems: circleAlign},
-      ]}>
-      <View style={[styles.circle, {backgroundColor: circleBackgroundColor}]}>
-        <View style={[styles.circleSmall, {backgroundColor}]} />
-      </View>
-    </TouchableOpacity>
+    <ComponentContext.Provider
+      value={{
+        componentName: 'Switch',
+        params,
+        state: disabled ? 'disabled' : 'enabled',
+        componentId: accessibilityLabel,
+        componentValue: value,
+        action: 'click',
+      }}>
+      <TouchableOpacity
+        disabled={disabled}
+        accessibilityLabel={accessibilityLabel}
+        onPress={() => onChange?.(!value)}
+        style={[
+          style,
+          styles.container,
+          {backgroundColor, alignItems: circleAlign},
+        ]}>
+        <View style={[styles.circle, {backgroundColor: circleBackgroundColor}]}>
+          <View style={[styles.circleSmall, {backgroundColor}]} />
+        </View>
+      </TouchableOpacity>
+    </ComponentContext.Provider>
   );
 };
 
-Switch.defaultProps = {
-  value: false,
-  disabled: false,
-};
 export {Switch};

package/Switch/types.ts

@@ -1,6 +1,6 @@
-import {ViewStyle} from 'react-native';
+import {TouchableOpacityProps, ViewStyle} from 'react-native';
 
-export type SwitchProps = {
+export interface SwitchProps extends TouchableOpacityProps {
   /**
    * `value`: Represents whether the Switch component is currently in the 'on' (`true`) or 'off' (`false`) state.
    */
@@ -23,4 +23,6 @@ export type SwitchProps = {
    * Accepts an object of style properties.
    */
   style?: ViewStyle;
-};
+
+  params?: any;
+}

package/Tag/index.tsx

@@ -60,9 +60,7 @@ const Tag: FC<TagProps> = ({
   }
 
   return (
-    <View
-      style={[style, sizeStyle, {backgroundColor: tagColor}]}
-      accessibilityLabel={`Tag/${label}`}>
+    <View style={[style, sizeStyle, {backgroundColor: tagColor}]}>
       {!!icon && (
         <Icon
           style={styles.icon}
@@ -71,7 +69,7 @@ const Tag: FC<TagProps> = ({
           color={labelColor}
         />
       )}
-      <Text color={labelColor} typography={'label_s'}>
+      <Text color={labelColor} typography={'label_s_medium'}>
         {label}
       </Text>
     </View>