@widergy/mobile-ui 2.10.0 → 2.12.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [2.12.0](https://github.com/widergy/mobile-ui/compare/v2.11.0...v2.12.0) (2026-04-13)
+
+
+### Features
+
+* [AUTO-208] Test id's implementation to form fields ([#492](https://github.com/widergy/mobile-ui/issues/492)) ([7ac3c8b](https://github.com/widergy/mobile-ui/commit/7ac3c8b58a46f554e9bafbd88b4fb24ac6695d50))
+
+# [2.11.0](https://github.com/widergy/mobile-ui/compare/v2.10.0...v2.11.0) (2026-04-13)
+
+
+### Features
+
+* [UGGC-95] UTCoupon ([#493](https://github.com/widergy/mobile-ui/issues/493)) ([11a3367](https://github.com/widergy/mobile-ui/commit/11a336717acfe31e146288981360481b5ad73268))
+
 # [2.10.0](https://github.com/widergy/mobile-ui/compare/v2.9.7...v2.10.0) (2026-04-13)
 
 

package/lib/components/FilePicker/index.js

@@ -22,6 +22,7 @@ class FilePicker extends Component {
   handleShowPicker = async () => {
     const {
       allowedTypes = DEFAULT_ALLOWED_TYPES,
+      dataTestId,
       onMaxSizeError,
       onError,
       onChange,
@@ -102,11 +103,13 @@ class FilePicker extends Component {
   };
 
   render() {
-    const { error, title, filePlaceholder, style, withMarkdownTitle, markdownStyles, disabled } = this.props;
+    const { error, title, filePlaceholder, style, withMarkdownTitle, markdownStyles, disabled, dataTestId } =
+      this.props;
     const { fileName } = this.state;
     return (
       <View style={style}>
         <Picker
+          dataTestId={dataTestId}
           icon={UPLOAD_ICON}
           error={error}
           onAdd={this.handleShowPicker}

package/lib/components/MultipleFilePicker/components/Picker/index.js

@@ -13,6 +13,7 @@ import styles from './styles';
 
 const Picker = ({
   maxFiles,
+  dataTestId,
   disabled = false,
   error,
   filePlaceholder,
@@ -32,9 +33,11 @@ const Picker = ({
       ) : (
         uploadedFiles.map((file, index) => (
           <UploadedFile
+            dataTestId={dataTestId}
             disabled={disabled}
             file={file}
             filePlaceholder={filePlaceholder}
+            index={index}
             key={file.name}
             onDelete={() => onDelete(index)}
           />
@@ -44,6 +47,7 @@ const Picker = ({
       {uploadedFiles.length < maxFiles && (
         <UTButton
           colorTheme="primary"
+          dataTestId={dataTestId ? `${dataTestId}.uploadButton` : undefined}
           disabled={disabled}
           Icon="IconUpload"
           onPress={onAdd}
@@ -72,6 +76,7 @@ const Picker = ({
 
 Picker.propTypes = {
   maxFiles: number,
+  dataTestId: string,
   disabled: bool,
   error: string,
   filePlaceholder: string,

package/lib/components/MultipleFilePicker/components/UploadedFiles/index.js

@@ -1,4 +1,4 @@
-import { string, bool, func, object } from 'prop-types';
+import { string, bool, func, number, object } from 'prop-types';
 import { View } from 'react-native';
 import React from 'react';
 
@@ -11,9 +11,16 @@ import UTLabel from '../../../UTLabel';
 import { bytesFormater } from './utils';
 import styles from './styles';
 
-const UploadedFiles = ({ disabled = false, file, filePlaceholder, onDelete }) => {
+const UploadedFiles = ({
+  dataTestId,
+  disabled = false,
+  file,
+  filePlaceholder,
+  index,
+  onDelete
+}) => {
   return (
-    <Surface style={styles.container}>
+    <Surface style={styles.container} testID={dataTestId ? `${dataTestId}.preview.${index}` : undefined}>
       <UTIcon name="IconCheck" size={32} colorTheme="accent" shade="04" />
       <View style={styles.texts}>
         <UTLabel numberOfLines={1} weight="medium">
@@ -23,15 +30,25 @@ const UploadedFiles = ({ disabled = false, file, filePlaceholder, onDelete }) =>
           {bytesFormater(file.size)}
         </UTLabel>
       </View>
-      {!disabled && <UTButton Icon="IconTrash" colorTheme="primary" variant="text" onPress={onDelete} />}
+      {!disabled && (
+        <UTButton
+          dataTestId={dataTestId ? `${dataTestId}.delete.${index}` : undefined}
+          Icon="IconTrash"
+          colorTheme="primary"
+          variant="text"
+          onPress={onDelete}
+        />
+      )}
     </Surface>
   );
 };
 
 UploadedFiles.propTypes = {
+  dataTestId: string,
   disabled: bool,
   file: object,
   filePlaceholder: string,
+  index: number,
   onDelete: func
 };
 

package/lib/components/MultipleFilePicker/index.js

@@ -29,6 +29,7 @@ import styles from './styles';
 const MultipleFilePicker = ({
   allowedPDFUploadSizes,
   allowedTypes,
+  dataTestId,
   disabled,
   enabledInputs: { camera, files, gallery } = { files: true },
   error,
@@ -401,8 +402,9 @@ const MultipleFilePicker = ({
   };
 
   return (
-    <View style={style}>
+    <View style={style} testID={dataTestId}>
       <Picker
+        dataTestId={dataTestId}
         disabled={disabled}
         error={error}
         filePlaceholder={filePlaceholder}
@@ -421,25 +423,29 @@ const MultipleFilePicker = ({
               Icon: 'IconCamera',
               onPress: onPickCamera,
               show: camera,
+              testIdModifier: 'camera',
               text: 'Cámara'
             },
             {
               Icon: 'IconPhoto',
               onPress: onPickGallery,
               show: gallery,
+              testIdModifier: 'gallery',
               text: 'Fotos'
             },
             {
               Icon: 'IconFileArrowRight',
               onPress: onPickFiles,
               show: files,
+              testIdModifier: 'files',
               text: 'Archivos'
             }
           ].map(
-            ({ Icon, onPress, show, text }) =>
+            ({ Icon, onPress, show, testIdModifier, text }) =>
               show && (
                 <UTButton
                   colorTheme="secondary"
+                  dataTestId={dataTestId ? `${dataTestId}.${testIdModifier}` : undefined}
                   Icon={Icon}
                   key={text}
                   onPress={onPress}

package/lib/components/Picker/index.js

@@ -11,6 +11,7 @@ import { withTheme, themeType } from '../../theming';
 import styles from './styles';
 
 const Picker = ({
+  dataTestId,
   icon,
   error,
   onAdd,
@@ -35,7 +36,13 @@ const Picker = ({
       </Label>
     )}
     <View style={styles.fieldInput}>
-      <Touchable borderless style={styles.touchable} disabled={disabled} onPress={onAdd}>
+      <Touchable
+        borderless
+        style={styles.touchable}
+        dataTestId={dataTestId}
+        disabled={disabled}
+        onPress={onAdd}
+      >
         <Input
           backgroundColor="transparent"
           value={fileName}
@@ -59,6 +66,7 @@ const Picker = ({
 );
 
 Picker.propTypes = {
+  dataTestId: string,
   icon: string.isRequired,
   error: oneOfType([string, bool]),
   onAdd: func.isRequired,

package/lib/components/RadioGroup/index.js

@@ -18,12 +18,12 @@ class RadioGroup extends Component {
     onOptionChange(option && option[keyField]);
   };
 
-  renderOptions = option => {
+  renderOptions = (option, index) => {
     const { selectedOption, radioProps, keyField, disabled, dataTestId } = this.props;
     return (
       <RadioButton
         style={styles.radio}
-        dataTestId={dataTestId ? `${dataTestId}.radioButton_${option.id}` : undefined}
+        dataTestId={dataTestId ? `${dataTestId}.button.${index}` : undefined}
         option={option}
         key={option.id}
         label={option.label}

package/lib/components/UTCoupon/README.md

@@ -0,0 +1,69 @@
+# UTCoupon
+
+Tarjeta de cupón seleccionable usada en flujos de pedidos. Muestra imagen de marca, nombre del producto, condiciones de uso, fecha de vencimiento y precio. Soporta tres estados: default, activo y agotado.
+
+La forma de ticket (recortes elípticos en los bordes laterales) se implementa con SVG.
+
+## Props
+
+| Prop         | Tipo                        | Default | Descripción                                                                                |
+| ------------ | --------------------------- | ------- | ------------------------------------------------------------------------------------------ |
+| `image`      | `number \| { uri: string }` | —       | Fuente de imagen para la sección izquierda (misma forma que `Image` source de RN)          |
+| `detail`     | `string`                    | —       | Texto pequeño superior (ej. municipio, código de producto)                                 |
+| `title`      | `string`                    | —       | Texto principal central (ej. "Carga 11Kg")                                                 |
+| `subtitle`   | `string`                    | —       | Texto secundario inferior (ej. "1 uso mensualmente")                                       |
+| `value`      | `string`                    | —       | Texto de la sección derecha (ej. "$2.500")                                                 |
+| `active`     | `bool`                      | `false` | Estado seleccionado: borde azul. Mutuamente excluyente con `disabled`.                     |
+| `disabled`   | `bool`                      | `false` | Estado agotado: overlay gris, `onPress` deshabilitado. Mutuamente excluyente con `active`. |
+| `onPress`    | `func`                      | —       | Callback de selección. Se ignora si `disabled` es `true`.                                  |
+| `style`      | `shape`                     | `{}`    | Overrides de estilo por subelemento (ver tabla de llaves).                                 |
+| `dataTestId` | `string`                    | —       | ID raíz; los subelementos añaden sufijos automáticamente.                                  |
+
+## Uso
+
+```jsx
+import { UTCoupon } from '@widergy/mobile-ui';
+
+// Default
+<UTCoupon
+  image={require('./assets/logo.png')}
+  detail="Mun. Las Condes"
+  title="Carga 11Kg"
+  subtitle="1 uso mensualmente"
+  value="$2.500"
+  onPress={() => handleSelect(coupon)}
+/>
+
+// Activo (seleccionado)
+<UTCoupon
+  image={{ uri: 'https://example.com/logo.png' }}
+  detail="ANM51-1000220101-3"
+  title="Carga 11Kg"
+  subtitle="Vence el 16/08/2025"
+  value="$2.500"
+  active
+  onPress={() => handleSelect(coupon)}
+/>
+
+// Agotado
+<UTCoupon
+  image={require('./assets/logo.png')}
+  title="Carga 11Kg"
+  subtitle="Sin stock"
+  value="$2.500"
+  disabled
+/>
+```
+
+## Test IDs
+
+Dado `dataTestId="coupon"`, los subelementos reciben:
+
+| Subelemento | testID                 |
+| ----------- | ---------------------- |
+| Raíz        | `"coupon"`             |
+| Imagen      | `"coupon.icon"`        |
+| Detail      | `"coupon.description"` |
+| Title       | `"coupon.titleText"`   |
+| Subtitle    | `"coupon.subtitle"`    |
+| Value       | `"coupon.label"`       |

package/lib/components/UTCoupon/constants.js

@@ -0,0 +1,8 @@
+export const BORDER_RADIUS = 12;
+
+export const ICON_SECTION_WIDTH = 80;
+
+// Notch (elliptical cutout at top/bottom edges, centered near the icon section right edge)
+export const NOTCH_RADIUS_X = 26; // horizontal semi-axis (notch width = 52)
+export const NOTCH_RADIUS_Y = 8; // vertical semi-axis (notch depth from edge = 8)
+export const NOTCH_CENTER_X = 104; // fixed x position of the notch center

package/lib/components/UTCoupon/index.js

@@ -0,0 +1,159 @@
+import React, { memo, useRef, useState } from 'react';
+import { Image, TouchableOpacity, View } from 'react-native';
+import { ClipPath, Defs, Path, Rect, Svg } from 'react-native-svg';
+
+import UTLabel from '../UTLabel';
+import { useTheme } from '../../theming';
+import { TEST_ID_CONSTANTS } from '../../constants/testIds';
+
+import { defaultProps, propTypes } from './proptypes';
+import { retrieveStyle } from './theme';
+import { ICON_SECTION_WIDTH } from './constants';
+import { buildCouponPath } from './utils';
+
+const {
+  description: detailTestId,
+  icon: iconTestId,
+  label: valueTestId,
+  subtitle: subtitleTestId,
+  titleText: titleTestId
+} = TEST_ID_CONSTANTS;
+
+const UTCoupon = ({
+  active = false,
+  dataTestId,
+  detail,
+  disabled = false,
+  image,
+  onPress,
+  style,
+  subtitle,
+  title,
+  value
+}) => {
+  const theme = useTheme();
+  const themedStyles = retrieveStyle({ theme, style });
+  const [cardLayout, setCardLayout] = useState({ width: 0, height: 0 });
+  const clipId = useRef(`clip${Math.random()}`).current;
+
+  const handleLayout = ({ nativeEvent: { layout } }) => {
+    if (layout.width !== cardLayout.width || layout.height !== cardLayout.height) {
+      setCardLayout({ width: layout.width, height: layout.height });
+    }
+  };
+
+  const couponPath = cardLayout.width > 0 ? buildCouponPath(cardLayout.width, cardLayout.height) : null;
+
+  const couponBorderPath =
+    active && cardLayout.width > 0 ? buildCouponPath(cardLayout.width, cardLayout.height, 1) : null; // Border path inset by 1px (= strokeWidth/2) so the full 2px stroke renders
+
+  return (
+    <View testID={dataTestId} style={themedStyles.root} onLayout={handleLayout}>
+      {couponPath && (
+        <Svg width={cardLayout.width} height={cardLayout.height} style={themedStyles.absoluteFill}>
+          <Defs>
+            <ClipPath id={clipId}>
+              <Path d={couponPath} />
+            </ClipPath>
+          </Defs>
+          <Path d={couponPath} fill={theme.Palette.light['01']} />
+          <Rect
+            x={0}
+            y={0}
+            width={ICON_SECTION_WIDTH}
+            height={cardLayout.height}
+            fill={theme.Palette.information['01']}
+            clipPath={`url(#${clipId})`}
+          />
+        </Svg>
+      )}
+
+      <TouchableOpacity
+        style={themedStyles.contentRow}
+        onPress={disabled ? undefined : onPress}
+        activeOpacity={disabled ? 1 : 0.7}
+      >
+        <View style={themedStyles.iconContainer}>
+          {image && (
+            <Image
+              testID={dataTestId ? `${dataTestId}.${iconTestId}` : undefined}
+              source={image}
+              style={[themedStyles.image, { height: cardLayout.height }]}
+            />
+          )}
+        </View>
+
+        <View style={themedStyles.rightSection}>
+          <View style={themedStyles.textContainer}>
+            {detail && (
+              <UTLabel
+                dataTestId={dataTestId ? `${dataTestId}.${detailTestId}` : undefined}
+                colorTheme="gray"
+                variant="xsmall"
+                style={themedStyles.detail}
+              >
+                {detail}
+              </UTLabel>
+            )}
+            {title && (
+              <UTLabel
+                dataTestId={dataTestId ? `${dataTestId}.${titleTestId}` : undefined}
+                colorTheme="dark"
+                variant="title2"
+                weight="medium"
+                style={themedStyles.title}
+              >
+                {title}
+              </UTLabel>
+            )}
+            {subtitle && (
+              <UTLabel
+                dataTestId={dataTestId ? `${dataTestId}.${subtitleTestId}` : undefined}
+                colorTheme="gray"
+                variant="small"
+                style={themedStyles.subtitle}
+              >
+                {subtitle}
+              </UTLabel>
+            )}
+          </View>
+
+          {value && (
+            <UTLabel
+              dataTestId={dataTestId ? `${dataTestId}.${valueTestId}` : undefined}
+              colorTheme="accent"
+              variant="title2"
+              weight="medium"
+              style={themedStyles.value}
+            >
+              {value}
+            </UTLabel>
+          )}
+        </View>
+      </TouchableOpacity>
+
+      {disabled && (
+        <View style={[themedStyles.absoluteFill, themedStyles.disabledOverlay]} pointerEvents="none" />
+      )}
+
+      {couponBorderPath && (
+        <View style={themedStyles.absoluteFill} pointerEvents="none">
+          <Svg width={cardLayout.width} height={cardLayout.height} style={themedStyles.absoluteFill}>
+            <Path
+              d={couponBorderPath}
+              fill="none"
+              stroke={theme.Palette.accent['05']}
+              strokeWidth={2}
+              strokeLinejoin="round"
+            />
+          </Svg>
+        </View>
+      )}
+    </View>
+  );
+};
+
+UTCoupon.propTypes = propTypes;
+UTCoupon.defaultProps = defaultProps;
+
+export default memo(UTCoupon);

package/lib/components/UTCoupon/proptypes.js

@@ -0,0 +1,29 @@
+import { bool, func, number, object, oneOfType, shape, string } from 'prop-types';
+
+export const propTypes = {
+  image: oneOfType([number, shape({ uri: string })]),
+  detail: string,
+  title: string,
+  subtitle: string,
+  value: string,
+  active: bool,
+  disabled: bool,
+  onPress: func,
+  dataTestId: string,
+  style: shape({
+    root: object,
+    iconContainer: object,
+    image: object,
+    textContainer: object,
+    detail: object,
+    title: object,
+    subtitle: object,
+    value: object
+  })
+};
+
+export const defaultProps = {
+  active: false,
+  disabled: false,
+  style: {}
+};

package/lib/components/UTCoupon/theme.js

@@ -0,0 +1,71 @@
+import { getShadow, mergeMultipleStyles } from '../../utils/styleUtils';
+
+import { BORDER_RADIUS, ICON_SECTION_WIDTH } from './constants';
+
+const ownStyles = {
+  root: {
+    width: '100%'
+  },
+  absoluteFill: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0
+  },
+  contentRow: {
+    flexDirection: 'row',
+    alignItems: 'stretch'
+  },
+  iconContainer: {
+    width: ICON_SECTION_WIDTH,
+    alignSelf: 'stretch',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderTopLeftRadius: BORDER_RADIUS,
+    borderBottomLeftRadius: BORDER_RADIUS,
+    overflow: 'hidden'
+  },
+  image: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: ICON_SECTION_WIDTH,
+    resizeMode: 'cover'
+  },
+  rightSection: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 18,
+    paddingLeft: 14,
+    paddingRight: 14
+  },
+  textContainer: {
+    flex: 1,
+    gap: 4
+  },
+  detail: {},
+  title: {},
+  subtitle: {},
+  value: {
+    marginLeft: 8,
+    textAlign: 'right'
+  },
+  disabledOverlay: {
+    borderRadius: BORDER_RADIUS
+  }
+};
+
+const getThemeStyles = theme => ({
+  root: {
+    borderRadius: BORDER_RADIUS * 2,
+    ...getShadow({ level: 1, theme })
+  },
+  disabledOverlay: {
+    backgroundColor: theme.colors.effect
+  }
+});
+
+export const retrieveStyle = ({ theme, style = {} }) =>
+  mergeMultipleStyles(ownStyles, getThemeStyles(theme), theme?.UTCoupon, style);

package/lib/components/UTCoupon/utils.js

@@ -0,0 +1,40 @@
+import { BORDER_RADIUS, NOTCH_CENTER_X, NOTCH_RADIUS_X, NOTCH_RADIUS_Y } from './constants';
+
+// Traces a rounded rectangle with two concave half-ellipse notches on the top and bottom edges, centered at x = NOTCH_CENTER_X.
+// `inset` shifts all edges inward by this many pixels — use strokeWidth/2 so the full stroke renders within the SVG viewport without clipping.
+export const buildCouponPath = (width, height, inset = 0) => {
+  // KAPPA = 4*(√2−1)/3 ≈ 0.5523: the control-point ratio that best fits a cubic bezier to a quarter-ellipse arc (minimises radial error at t=0.5).
+  const KAPPA = 0.5523;
+
+  const cornerR = BORDER_RADIUS - inset; // effective corner radius after inset
+  const notchX = NOTCH_CENTER_X; // x position of the notch center
+  const notchRx = NOTCH_RADIUS_X; // notch horizontal semi-axis (width)
+  const notchRy = NOTCH_RADIUS_Y; // notch vertical semi-axis (depth)
+  const notchCp = notchRx * KAPPA; // bezier control-point offset for notch curves
+  const cornerCp = cornerR * KAPPA; // bezier control-point offset for corner curves
+
+  return [
+    `M ${cornerR + inset} ${inset}`,
+    `L ${notchX - notchRx} ${inset}`,
+    // Top notch: two beziers forming a half-ellipse curving DOWNWARD into the card.
+    `C ${notchX - notchRx + notchCp} ${inset} ${notchX - notchCp} ${inset + notchRy} ${notchX} ${inset + notchRy}`,
+    `C ${notchX + notchCp} ${inset + notchRy} ${notchX + notchRx - notchCp} ${inset} ${notchX + notchRx} ${inset}`,
+    `L ${width - cornerR - inset} ${inset}`,
+    // Top-right corner
+    `C ${width - cornerR - inset + cornerCp} ${inset} ${width - inset} ${inset + cornerCp} ${width - inset} ${cornerR + inset}`,
+    `L ${width - inset} ${height - cornerR - inset}`,
+    // Bottom-right corner
+    `C ${width - inset} ${height - cornerR - inset + cornerCp} ${width - cornerR - inset + cornerCp} ${height - inset} ${width - cornerR - inset} ${height - inset}`,
+    `L ${notchX + notchRx} ${height - inset}`,
+    // Bottom notch: two beziers forming a half-ellipse curving UPWARD into the card.
+    `C ${notchX + notchRx - notchCp} ${height - inset} ${notchX + notchCp} ${height - inset - notchRy} ${notchX} ${height - inset - notchRy}`,
+    `C ${notchX - notchCp} ${height - inset - notchRy} ${notchX - notchRx + notchCp} ${height - inset} ${notchX - notchRx} ${height - inset}`,
+    `L ${cornerR + inset} ${height - inset}`,
+    // Bottom-left corner
+    `C ${cornerR + inset - cornerCp} ${height - inset} ${inset} ${height - cornerR - inset + cornerCp} ${inset} ${height - cornerR - inset}`,
+    `L ${inset} ${cornerR + inset}`,
+    // Top-left corner
+    `C ${inset} ${cornerR + inset - cornerCp} ${cornerR + inset - cornerCp} ${inset} ${cornerR + inset} ${inset}`,
+    'Z'
+  ].join(' ');
+};

package/lib/components/UTSwitch/index.js

@@ -9,6 +9,7 @@ import ownStyles from './styles';
 import switchProptypes from './proptypes';
 
 const UTSwitch = ({
+  dataTestId,
   disabled,
   style,
   onColor,
@@ -101,6 +102,7 @@ const UTSwitch = ({
       onPressIn={onClick}
       onPressOut={onClickEnd}
       hitSlop={hitSlop}
+      testID={dataTestId}
     >
       <Animated.View
         style={[

package/lib/index.js

@@ -44,6 +44,7 @@ export { default as UTButton } from './components/UTButton';
 export { default as UTButtonGroup } from './components/UTButtonGroup';
 export { default as UTCBUInput } from './components/UTCBUInput';
 export { default as UTCheckBox } from './components/UTCheckBox';
+export { default as UTCoupon } from './components/UTCoupon';
 export { default as UTCuit } from './components/UTCuit';
 export { default as UTCheckList } from './components/UTCheckList';
 export { default as UTDataCategory } from './components/UTDataCategory';

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "2.10.0",
+  "version": "2.12.0",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [