@widergy/mobile-ui 2.10.0 → 2.11.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [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/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/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.11.0",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [