@momo-kits/foundation 0.92.2-tracking.4 → 0.92.2

package/Input/Input.tsx

@@ -14,10 +14,15 @@ import {InputProps} from './index';
 import {Icon} from '../Icon';
 import {checkTyping} from './utils';
 import {Loader} from '../Loader';
-import {formatComponentName} from '../Application/utils';
+import {
+  formatComponentName,
+  getAccessibilityID,
+  cleanNameForTracking,
+} from '../Application/utils';
 
 const {
-  ComponentContext,
+  ScreenContext,
+  MiniAppContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const Input = forwardRef(
@@ -47,16 +52,18 @@ const Input = forwardRef(
       keyboardType,
       style,
       params,
-      accessibilityLabel,
+      componentId,
       ...props
     }: InputProps,
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
+    const {appId, code} = useContext<any>(MiniAppContext);
     const [focused, setFocused] = useState(false);
     const [haveValue, setHaveValue] = useState(!!value || !!props.defaultValue);
     const [secureTextInput, setSecureTextInput] = useState(secureTextEntry);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
+    const screenInfo = useContext<any>(ScreenContext);
 
     const onClearText = () => {
       inputRef?.current?.clear();
@@ -115,6 +122,21 @@ const Input = forwardRef(
       let textColor = theme.colors.text.default;
       let placeholderColor = theme.colors.text.hint;
       let iconTintColor = iconColor;
+      const accessibilityID = disabled
+        ? getAccessibilityID(
+            `${appId}/${code}/${
+              screenInfo.screenName
+            }/input_${cleanNameForTracking(
+              floatingValue ?? placeholder,
+            )}_disabled`,
+          )
+        : getAccessibilityID(
+            `${appId}/${code}/${
+              screenInfo.screenName
+            }/input_${cleanNameForTracking(
+              floatingValue ?? placeholder ?? value,
+            )}`,
+          );
 
       if (disabled) {
         textColor = disabledColor;
@@ -156,7 +178,7 @@ const Input = forwardRef(
             )}
             <TextInput
               {...props}
-              accessibilityLabel={accessibilityLabel}
+              {...accessibilityID}
               editable={props.editable && !disabled}
               secureTextEntry={secure}
               textAlignVertical="center"
@@ -212,19 +234,20 @@ const Input = forwardRef(
     }
 
     return (
-      <ComponentContext.Provider
+      <ScreenContext.Provider
         value={{
+          ...screenInfo,
           componentName: 'Input',
           params,
           componentLabel: formatComponentName(floatingValue || ''),
           state: inputState,
-          componentId: accessibilityLabel,
+          componentId,
         }}>
         <View style={[style, styles.wrapper]}>
           {renderInputView()}
           <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
         </View>
-      </ComponentContext.Provider>
+      </ScreenContext.Provider>
     );
   },
 );

package/Input/InputDropDown.tsx

@@ -7,10 +7,15 @@ import {InputDropDownProps} from './index';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
 import {Styles} from '../Consts';
-import {formatComponentName} from '../Application/utils';
+import {
+  cleanNameForTracking,
+  formatComponentName,
+  getAccessibilityID,
+} from '../Application/utils';
 
 const {
-  ComponentContext,
+  ScreenContext,
+  MiniAppContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const InputDropDown = ({
@@ -32,11 +37,13 @@ const InputDropDown = ({
   leadingIconColor,
   style,
   params,
-  accessibilityLabel,
+  componentId,
   ...props
 }: InputDropDownProps) => {
+  const {appId, code} = useContext<any>(MiniAppContext);
   const {theme} = useContext(ApplicationContext);
   const full = !!value || !!placeholder;
+  const screenInfo = useContext<any>(ScreenContext);
 
   const renderIcon = (color: string | undefined) => {
     if (loading) {
@@ -52,6 +59,19 @@ const InputDropDown = ({
     let textColor = theme.colors.text.default;
     let placeholderColor = theme.colors.text.hint;
     let iconTintColor = iconColor;
+    const accessibilityID = disabled
+      ? getAccessibilityID(
+          `${appId}/${code}/${
+            screenInfo.screenName
+          }/input_${cleanNameForTracking(
+            floatingValue ?? placeholder,
+          )}_disabled`,
+        )
+      : getAccessibilityID(
+          `${appId}/${code}/${
+            screenInfo.screenName
+          }/input_${cleanNameForTracking(floatingValue ?? placeholder)}`,
+        );
 
     if (disabled) {
       textColor = disabledColor;
@@ -87,7 +107,7 @@ const InputDropDown = ({
           {full && (
             <TextInput
               {...props}
-              accessibilityLabel={accessibilityLabel}
+              {...accessibilityID}
               onPressIn={onPress}
               editable={false}
               textAlignVertical="top"
@@ -112,13 +132,14 @@ const InputDropDown = ({
   };
 
   return (
-    <ComponentContext.Provider
+    <ScreenContext.Provider
       value={{
+        ...screenInfo,
         componentName: 'InputOTP',
         params,
         state: 'enabled',
         componentLabel: formatComponentName(floatingValue || ''),
-        componentId: accessibilityLabel,
+        componentId,
       }}>
       <TouchableOpacity
         onPress={onPress}
@@ -126,7 +147,7 @@ const InputDropDown = ({
         {renderInputView()}
         <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
       </TouchableOpacity>
-    </ComponentContext.Provider>
+    </ScreenContext.Provider>
   );
 };
 

package/Input/InputMoney.tsx

@@ -18,10 +18,15 @@ import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputMoneyProps} from './index';
 import {Icon} from '../Icon';
 import {formatMoneyToNumber, formatNumberToMoney} from './utils';
-import {formatComponentName} from '../Application/utils';
+import {
+  cleanNameForTracking,
+  formatComponentName,
+  getAccessibilityID,
+} from '../Application/utils';
 
 const {
-  ComponentContext,
+  ScreenContext,
+  MiniAppContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const InputMoney = forwardRef(
@@ -43,14 +48,16 @@ const InputMoney = forwardRef(
       style,
       params,
       defaultValue = '',
-      accessibilityLabel,
+      componentId,
       ...props
     }: InputMoneyProps,
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
+    const {appId, code} = useContext<any>(MiniAppContext);
     const [focused, setFocused] = useState(false);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
+    const screenInfo = useContext<any>(ScreenContext);
 
     const validateText = (text: string) => {
       const valueFormat = formatMoneyToNumber(text, 'đ');
@@ -96,6 +103,17 @@ const InputMoney = forwardRef(
       let textColor = theme.colors.text.default;
       let placeholderColor = theme.colors.text.hint;
       let iconTintColor = iconColor;
+      const accessibilityID = disabled
+        ? getAccessibilityID(
+            `${appId}/${code}/${
+              screenInfo.screenName
+            }/input_${cleanNameForTracking(floatingValue)}_disabled`,
+          )
+        : getAccessibilityID(
+            `${appId}/${code}/${
+              screenInfo.screenName
+            }/input_${cleanNameForTracking(floatingValue)}`,
+          );
 
       if (disabled) {
         textColor = disabledColor;
@@ -121,7 +139,7 @@ const InputMoney = forwardRef(
           <View style={styles.inputView}>
             <TextInput
               {...props}
-              accessibilityLabel={accessibilityLabel}
+              {...accessibilityID}
               editable={!disabled}
               textAlignVertical="top"
               ref={inputRef}
@@ -173,19 +191,20 @@ const InputMoney = forwardRef(
     }
 
     return (
-      <ComponentContext.Provider
+      <ScreenContext.Provider
         value={{
+          ...screenInfo,
           componentName: 'InputMoney',
           params,
           componentLabel: formatComponentName(floatingValue || ''),
           state: inputState,
-          componentId: accessibilityLabel,
+          componentId,
         }}>
         <View style={[style, styles.wrapper]}>
           {renderInputView()}
           <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
         </View>
-      </ComponentContext.Provider>
+      </ScreenContext.Provider>
     );
   },
 );

package/Input/InputOTP.tsx

@@ -21,10 +21,15 @@ import styles from './styles';
 import {ErrorView, getBorderColor} from './common';
 import {ApplicationContext} from '../Application';
 import {Spacing} from '../Consts';
-import {formatComponentName} from '../Application/utils';
+import {
+  cleanNameForTracking,
+  formatComponentName,
+  getAccessibilityID,
+} from '../Application/utils';
 
 const {
-  ComponentContext,
+  ScreenContext,
+  MiniAppContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const OTPCaret: FC<CaretProps> = ({index, length}) => {
@@ -85,16 +90,19 @@ const InputOTP = forwardRef(
       dataType = 'number',
       params,
       style,
-      accessibilityLabel,
+      componentId,
       ...props
     }: InputOTPProps,
     ref,
   ) => {
     const MAX_LENGTH = 10;
+    const {appId, code} = useContext<any>(MiniAppContext);
+
     const [value, setValue] = useState('');
     const [focused, setFocused] = useState(false);
     const inputRef = useRef<TextInput>(null);
     const {theme} = useContext(ApplicationContext);
+    const screenInfo = useContext<any>(ScreenContext);
 
     useImperativeHandle(ref, () => ({
       onChangeText: (text: string) => {
@@ -187,6 +195,12 @@ const InputOTP = forwardRef(
       );
     };
 
+    const accessibilityID = getAccessibilityID(
+      `${appId}/${code}/${screenInfo.screenName}/input_${cleanNameForTracking(
+        floatingValue,
+      )}`,
+    );
+
     const renderInputView = () => {
       return (
         <View
@@ -212,7 +226,7 @@ const InputOTP = forwardRef(
           <View style={styles.inputView}>
             <TextInput
               {...props}
-              accessibilityLabel={accessibilityLabel}
+              {...accessibilityID}
               ref={inputRef}
               value={value}
               onChangeText={_onChangeText}
@@ -229,13 +243,14 @@ const InputOTP = forwardRef(
     };
 
     return (
-      <ComponentContext.Provider
+      <ScreenContext.Provider
         value={{
+          ...screenInfo,
           componentName: 'InputOTP',
           params,
           componentLabel: formatComponentName(floatingValue || ''),
           state: 'enabled',
-          componentId: accessibilityLabel,
+          componentId,
         }}>
         <TouchableOpacity
           activeOpacity={1}
@@ -244,7 +259,7 @@ const InputOTP = forwardRef(
           {renderInputView()}
           <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
         </TouchableOpacity>
-      </ComponentContext.Provider>
+      </ScreenContext.Provider>
     );
   },
 );

package/Input/InputSearch.tsx

@@ -12,9 +12,11 @@ import styles from './styles';
 import {Icon} from '../Icon';
 import {Text} from '../Text';
 import {checkTyping} from './utils';
+import {getAccessibilityID} from '../Application/utils';
 
 const {
-  ComponentContext,
+  ScreenContext,
+  MiniAppContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const InputSearch = forwardRef(
@@ -33,16 +35,18 @@ const InputSearch = forwardRef(
       defaultValue,
       onPressButtonText,
       params,
+      componentId,
       hasColorBG = false,
-      accessibilityLabel,
       ...props
     }: InputSearchProps,
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
+    const {appId, code} = useContext<any>(MiniAppContext);
     const [focused, setFocused] = useState(false);
     const [haveValue, setHaveValue] = useState(!!value || !!defaultValue);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
+    const screenInfo = useContext<any>(ScreenContext);
 
     const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
       setFocused(true);
@@ -68,7 +72,9 @@ const InputSearch = forwardRef(
       return (
         <TextInput
           {...props}
-          accessibilityLabel={accessibilityLabel}
+          {...getAccessibilityID(
+            `${appId}/${code}/${screenInfo.screenName}/input_search`,
+          )}
           textAlignVertical="center"
           ref={inputRef}
           style={[
@@ -139,12 +145,13 @@ const InputSearch = forwardRef(
       : theme.colors.background.surface;
 
     return (
-      <ComponentContext.Provider
+      <ScreenContext.Provider
         value={{
+          ...screenInfo,
           componentName: 'InputSearch',
           params,
           state: inputState,
-          componentId: accessibilityLabel,
+          componentId,
         }}>
         <View style={[style, styles.searchInputContainer]}>
           <View
@@ -172,7 +179,7 @@ const InputSearch = forwardRef(
             </TouchableOpacity>
           )}
         </View>
-      </ComponentContext.Provider>
+      </ScreenContext.Provider>
     );
   },
 );

package/Input/InputTextArea.tsx

@@ -18,9 +18,11 @@ import {
 import {InputTextAreaProps} from './index';
 import {Icon} from '../Icon';
 import {ApplicationContext} from '../Application';
+import {cleanNameForTracking, getAccessibilityID} from '../Application/utils';
 
 const {
-  ComponentContext,
+  ScreenContext,
+  MiniAppContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const InputTextArea = forwardRef(
@@ -42,12 +44,13 @@ const InputTextArea = forwardRef(
       required,
       errorSpacing,
       style,
-      accessibilityLabel,
       ...props
     }: InputTextAreaProps,
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
+    const screenInfo = useContext<any>(ScreenContext);
+    const {appId, code} = useContext<any>(MiniAppContext);
     const [focused, setFocused] = useState(false);
     const [inputValue, setInputValue] = useState(defaultValue ?? '');
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
@@ -93,6 +96,20 @@ const InputTextArea = forwardRef(
         placeholderColor = disabledColor;
       }
 
+      const accessibilityID = disabled
+        ? getAccessibilityID(
+            `${appId}/${code}/${
+              screenInfo.screenName
+            }/input_${cleanNameForTracking(
+              floatingValue ?? placeholder,
+            )}_disabled`,
+          )
+        : getAccessibilityID(
+            `${appId}/${code}/${
+              screenInfo.screenName
+            }/input_${cleanNameForTracking(floatingValue ?? placeholder)}`,
+          );
+
       return (
         <View
           style={[
@@ -114,7 +131,7 @@ const InputTextArea = forwardRef(
             <View style={styles.textAreaView}>
               <TextInput
                 {...props}
-                accessibilityLabel={ComponentContext}
+                {...accessibilityID}
                 ref={inputRef}
                 editable={!disabled}
                 textAlignVertical="top"

package/Input/index.tsx

@@ -82,6 +82,7 @@ export interface InputProps extends TextInputProps {
   onPressIcon?: () => void;
 
   params?: any;
+  componentId?: string;
 }
 
 type InputPropsWithoutSizeAndIcon = Omit<
@@ -129,6 +130,8 @@ export interface InputSearchProps extends TextInputProps {
   hasColorBG?: boolean;
 
   params?: any;
+
+  componentId?: string;
 }
 
 export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}
@@ -166,7 +169,7 @@ export type CaretProps = {
   length?: number;
 };
 
-export interface InputDropDownProps extends InputProps {
+export interface InputDropDownProps {
   /**
    * Optional. Defines the size of the InputDropDown component.
    * 'small' - A smaller, less prominent input.
@@ -261,6 +264,11 @@ export interface InputDropDownProps extends InputProps {
     [key: string]: any;
   };
 
+  /**
+   * component id for element tracking.
+   */
+  componentId?: string;
+
   /**
    * Optional. Represents the style of the InputDropDown component.
    */

package/Popup/PopupNotify.tsx

@@ -47,8 +47,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       screen_name = routes[routesLength - 2]?.params?.screen?.name;
     }
     const tracking = {
-      appId: context.appId,
-      code: context.code,
+      ...context,
       screen_name,
       component_type: 'popup',
       component_name: id,

package/Popup/PopupPromotion.tsx

@@ -31,8 +31,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
       screen_name = routes[routesLength - 2]?.params?.screen?.name;
     }
     const tracking = {
-      appId: context.appId,
-      code: context.code,
+      ...context,
       screen_name,
       component_type: 'popup',
       component_name: id,
@@ -121,4 +120,8 @@ const styles = StyleSheet.create({
   },
 });
 
+PopupPromotion.defaultProps = {
+  image: 'https://google.com',
+};
+
 export default PopupPromotion;

package/Radio/index.tsx

@@ -6,10 +6,15 @@ import {Text} from '../Text';
 import styles from './styles';
 import {ApplicationContext} from '../Application';
 import {Spacing} from '../Consts';
-import {formatNameLength} from '../Application/utils';
+import {
+  cleanNameForTracking,
+  formatNameLength,
+  getAccessibilityID,
+} from '../Application/utils';
 
 const {
-  ComponentContext,
+  ScreenContext,
+  MiniAppContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const Radio: FC<RadioProps> = ({
@@ -20,9 +25,11 @@ const Radio: FC<RadioProps> = ({
   label,
   style,
   params,
-  accessibilityLabel,
+  componentId,
 }) => {
+  const {appId, code} = useContext<any>(MiniAppContext);
   const {theme} = useContext(ApplicationContext);
+  const screenInfo = useContext<any>(ScreenContext);
   const selected = value === groupValue;
   let disabledStyle = {};
   let checkBoxStyle = {
@@ -44,19 +51,26 @@ const Radio: FC<RadioProps> = ({
     };
   }
 
+  const accessibilityID = getAccessibilityID?.(
+    `${appId}/${code}/${screenInfo.screenName}/rdo_${cleanNameForTracking(
+      label,
+    )}_${selected}`,
+  );
+
   return (
-    <ComponentContext.Provider
+    <ScreenContext.Provider
       value={{
+        ...screenInfo,
         componentName: 'Button',
         params,
         state: disabled ? 'disabled' : 'enabled',
-        componentId: accessibilityLabel,
+        componentId,
         componentLabel: formatNameLength(label || ''),
         componentValue: value,
         action: 'click',
       }}>
       <TouchableOpacity
-        accessibilityLabel={accessibilityLabel}
+        {...accessibilityID}
         onPress={onChange}
         disabled={disabled}
         style={[
@@ -76,7 +90,7 @@ const Radio: FC<RadioProps> = ({
         />
         {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
       </TouchableOpacity>
-    </ComponentContext.Provider>
+    </ScreenContext.Provider>
   );
 };
 

package/Radio/types.ts

@@ -1,6 +1,6 @@
-import {TouchableOpacityProps, ViewStyle} from 'react-native';
+import {ViewStyle} from 'react-native';
 
-export interface RadioProps extends TouchableOpacityProps {
+export type RadioProps = {
   /**
    * `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`.
@@ -36,5 +36,8 @@ export interface RadioProps extends TouchableOpacityProps {
    */
   style?: ViewStyle;
 
-  params?: any;
-}
+
+  params?: any
+
+  componentId?: string
+};