@widergy/mobile-ui 1.41.0 → 1.43.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [1.43.0](https://github.com/widergy/mobile-ui/compare/v1.42.0...v1.43.0) (2025-05-05)
+
+
+### Features
+
+* [UGENSA-1749] hide amount in rate chart ([#426](https://github.com/widergy/mobile-ui/issues/426)) ([53bf273](https://github.com/widergy/mobile-ui/commit/53bf273e688d4c06849381e854a93908d2f9fcdf))
+
+# [1.42.0](https://github.com/widergy/mobile-ui/compare/v1.41.0...v1.42.0) (2025-04-30)
+
+
+### Features
+
+* [UGC-1420] UTStatus and support in UTProductItem ([#429](https://github.com/widergy/mobile-ui/issues/429)) ([3e2b309](https://github.com/widergy/mobile-ui/commit/3e2b309479ff062f4949b0cbedcb781eab8aa5fc))
+
 # [1.41.0](https://github.com/widergy/mobile-ui/compare/v1.40.4...v1.41.0) (2025-04-29)
 
 

package/lib/components/RateChart/components/CategoryButton/index.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import { arrayOf, bool, object, string } from 'prop-types';
 import { Linking, View } from 'react-native';
+import { isEmpty } from 'lodash';
 
 import UTButton from '../../../UTButton';
 
 const CategoryButton = ({ category, texts, showCategory, categoryButtonUrl = '' }) => {
-  const handleOpenUrl = () => Linking.openURL(categoryButtonUrl);
+  const handleOpenUrl = () => (!isEmpty(categoryButtonUrl) ? Linking.openURL(categoryButtonUrl) : {});
 
   return (
     <View>

package/lib/components/RateChart/components/RateStagesGraph/components/Indicator/index.js

@@ -1,5 +1,5 @@
 import React, { Fragment, useState } from 'react';
-import { number, string, arrayOf, shape, any } from 'prop-types';
+import { number, string, arrayOf, shape, any, bool } from 'prop-types';
 import { View } from 'react-native';
 
 import Magnitude from '../../../Magnitude';
@@ -10,13 +10,14 @@ import styles, { ICON_SIZE } from './styles';
 import { getIndicatorPosition, getTextPosition, getTotalRange } from './utils';
 
 const Indicator = ({
-  consumptionValue,
-  consumptionUnit,
-  amountValue,
   amountUnit,
+  amountValue,
+  consumptionLimit,
+  consumptionUnit,
+  consumptionValue,
   rateStages,
   texts,
-  consumptionLimit
+  withoutAmountValue
 }) => {
   const { indicatorLabel } = texts || {};
   const [surfaceWidth, setSurfaceWidth] = useState(0);
@@ -63,7 +64,7 @@ const Indicator = ({
           unity={consumptionUnit}
           iconProps={{ height: ICON_SIZE, width: ICON_SIZE }}
         />
-        {consumptionValue > 0 && (
+        {!withoutAmountValue && consumptionValue > 0 && (
           <Magnitude
             semibold
             value={amountValue}
@@ -102,13 +103,14 @@ const Indicator = ({
 };
 
 Indicator.propTypes = {
-  consumptionValue: number,
-  consumptionUnit: string,
-  amountValue: string,
   amountUnit: number,
+  amountValue: string,
+  consumptionLimit: number,
+  consumptionUnit: string,
+  consumptionValue: number,
   rateStages: arrayOf(shape(any)),
   texts: arrayOf(shape(any)),
-  consumptionLimit: number
+  withoutAmountValue: bool
 };
 
 export default Indicator;

package/lib/components/RateChart/components/RateStagesGraph/index.js

@@ -9,14 +9,15 @@ import styles from './styles';
 import Indicator from './components/Indicator';
 
 const RateStagesGraph = ({
-  consumptionValue,
-  consumptionUnit,
-  amountValue,
   amountUnit,
+  amountValue,
+  consumptionLimit,
+  consumptionUnit,
+  consumptionValue,
   rateStages,
   texts,
-  withoutStages,
-  consumptionLimit
+  withoutAmountValue,
+  withoutStages
 }) => (
   <View style={styles.container}>
     <Bars rateStages={rateStages} withoutStages={withoutStages} />
@@ -28,18 +29,20 @@ const RateStagesGraph = ({
       amountUnit={amountUnit}
       rateStages={rateStages}
       texts={texts}
+      withoutAmountValue={withoutAmountValue}
     />
   </View>
 );
 
 RateStagesGraph.propTypes = {
-  consumptionValue: number,
+  amountUnit: string,
+  amountValue: number,
   consumptionLimit: number,
   consumptionUnit: string,
-  amountValue: number,
-  amountUnit: string,
+  consumptionValue: number,
   rateStages: rateStagesTypes,
   texts: arrayOf(shape(any)),
+  withoutAmountValue: bool,
   withoutStages: bool
 };
 

package/lib/components/RateChart/index.js

@@ -7,19 +7,20 @@ import RateStagesGraph from './components/RateStagesGraph';
 import styles from './styles';
 
 const RateChart = ({
-  consumptionValue,
-  consumptionUnit,
-  amountValue,
   amountUnit,
+  amountValue,
   category,
+  categoryButtonUrl,
+  consumptionLimit,
+  consumptionUnit,
+  consumptionValue,
   rate,
   rateStages,
-  texts,
-  withoutStages,
   showCategory,
   showCategoryButton,
-  categoryButtonUrl,
-  consumptionLimit
+  texts,
+  withoutAmountValue = false,
+  withoutStages
 }) => {
   const consumptionValueCorrected = consumptionValue && Math.round(consumptionValue);
 
@@ -45,6 +46,7 @@ const RateChart = ({
             rateStages={rateStages}
             texts={texts}
             withoutStages={withoutStages}
+            withoutAmountValue={withoutAmountValue}
           />
         )}
       </View>
@@ -53,19 +55,20 @@ const RateChart = ({
 };
 
 RateChart.propTypes = {
-  consumptionValue: number,
-  consumptionUnit: string,
-  amountValue: number,
   amountUnit: string,
+  amountValue: number,
   category: string,
-  rate: string,
+  categoryButtonUrl: string,
   consumptionLimit: number,
+  consumptionUnit: string,
+  consumptionValue: number,
+  rate: string,
   rateStages: arrayOf(shape(any)),
-  texts: arrayOf(shape(any)),
-  withoutStages: bool,
   showCategory: bool,
   showCategoryButton: bool,
-  categoryButtonUrl: string
+  texts: arrayOf(shape(any)),
+  withoutAmountValue: bool,
+  withoutStages: bool
 };
 
 export default RateChart;

package/lib/components/UTProductItem/components/Status/index.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+import { bool, object, shape, string } from 'prop-types';
+
+import UTStatus from '../../../UTStatus';
+
+const Status = ({ shouldUseGap, statusProps, themedStyles }) => {
+  const { Icon, label, labelProps, type, variant, withoutIcon } = statusProps;
+
+  return (
+    <UTStatus
+      Icon={Icon}
+      labelProps={labelProps}
+      style={{ container: [shouldUseGap ? themedStyles.gap : '', themedStyles.status] }}
+      type={type}
+      variant={variant}
+      withoutIcon={withoutIcon}
+    >
+      {label}
+    </UTStatus>
+  );
+};
+
+Status.propTypes = {
+  shouldUseGap: bool,
+  statusProps: shape({
+    label: string,
+    labelProps: object
+  }),
+  themedStyles: ViewPropTypes.style
+};
+
+export default Status;

package/lib/components/UTProductItem/index.js

@@ -29,6 +29,7 @@ const UTProductItem = ({
   secondaryAction,
   selectedQuantity,
   style,
+  statusProps = {},
   title
 }) => {
   const theme = useTheme();
@@ -47,7 +48,8 @@ const UTProductItem = ({
             discount,
             previousAmount,
             themedStyles,
-            title
+            title,
+            statusProps
           }).map(({ Component, props }, index, array) => (
             <Component key={Math.random} {...props} shouldUseGap={index !== array.length - 1} />
           ))}
@@ -90,7 +92,8 @@ UTProductItem.propTypes = {
   quantityLabelProps: object,
   secondaryAction: ActionPropTypes,
   selectedQuantity: number,
-  title: string
+  title: string,
+  statusProps: object
 };
 
 export default UTProductItem;

package/lib/components/UTProductItem/styles.js

@@ -83,5 +83,8 @@ export const getUTProductItemStyles = (theme = {}) =>
     },
     spaceBetween: {
       justifyContent: 'space-between'
+    },
+    status: {
+      alignSelf: 'flex-start'
     }
   });

package/lib/components/UTProductItem/utils.js

@@ -1,7 +1,10 @@
+import isEmpty from 'lodash/isEmpty';
+
 import Title from './components/Title';
 import AdditionalInfo from './components/AdditionalInfo';
 import Discount from './components/Discount';
 import Amount from './components/Amount';
+import Status from './components/Status';
 
 export const leftSectionComponents = ({
   additionalInfo,
@@ -9,7 +12,8 @@ export const leftSectionComponents = ({
   discount,
   previousAmount,
   themedStyles,
-  title
+  title,
+  statusProps
 }) =>
   [
     { Component: Title, key: 'title', props: { themedStyles, title }, show: !!title },
@@ -19,6 +23,12 @@ export const leftSectionComponents = ({
       props: { additionalInfo, themedStyles },
       show: additionalInfo
     },
+    {
+      Component: Status,
+      key: 'status',
+      props: { themedStyles, statusProps },
+      show: !isEmpty(statusProps)
+    },
     {
       Component: Discount,
       key: 'discount',

package/lib/components/UTStatus/README.md

@@ -0,0 +1,24 @@
+# UTStatus
+
+## Description
+
+`UTStatus` is a simple status indicator that combines an icon and a label. It's fully theme-aware and supports multiple variants and types. It is designed to be flexible and themeable to fit different UI requirements.
+
+## Props
+
+| Name        | Type   | Default   | Description                                                                                                                         |
+| ----------- | ------ | --------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| Icon        | string | -         | Allows display for a custom icon. If omitted, a default Icon for the variant will be used.                                          |
+| labelProps  | object | {}        | Props to pass down to the internal UTLabel component.                                                                               |
+| style       | object | -         | Custom styles to apply to the component.                                                                                            |
+| type        | string | 'dark'    | Color theme to apply for both the icon and label text.                                                                              |
+| variant     | string | 'success' | The variant will defined the default icon that the component will render, as well as the background color for the status container. |
+| withoutIcon | bool   | false     | if `true`, no icon will be rendered.                                                                                                |
+
+## Example
+
+```jsx
+<UTStatus variant="error" type="negative" labelProps={{ withMarkdown: true }}>
+  Error con Markdown
+</UTStatus>
+```

package/lib/components/UTStatus/constants.js

@@ -0,0 +1,14 @@
+export const VARIANTS = {
+  accent: 'accent',
+  error: 'error',
+  gray: 'gray',
+  information: 'information',
+  success: 'success',
+  warning: 'warning'
+};
+
+export const TYPES = {
+  accent: 'accent',
+  dark: 'dark',
+  negative: 'negative'
+};

package/lib/components/UTStatus/index.js

@@ -0,0 +1,48 @@
+import { View } from 'react-native';
+import React from 'react';
+import { bool, object, string } from 'prop-types';
+
+import UTLabel from '../UTLabel';
+import UTIcon from '../UTIcon';
+import { mergeMultipleStyles } from '../../utils/styleUtils';
+import { useTheme } from '../../theming';
+
+import { defaultIconMapper, ownStyles, getVariantStyles } from './theme';
+import { TYPES, VARIANTS } from './constants';
+
+const UTStatus = ({
+  children,
+  Icon,
+  labelProps = {},
+  style,
+  type = TYPES.dark,
+  variant = VARIANTS.success,
+  withoutIcon
+}) => {
+  const theme = useTheme();
+  const themedStyles = mergeMultipleStyles(
+    ownStyles,
+    getVariantStyles(theme)({ variant, type }),
+    theme?.UTStatus,
+    style
+  );
+  const StatusIcon = Icon ?? defaultIconMapper(variant);
+  return (
+    <View style={themedStyles.container}>
+      {withoutIcon ? null : <UTIcon colorTheme={type} name={StatusIcon} />}
+      <UTLabel colorTheme={type} {...labelProps}>
+        {children}
+      </UTLabel>
+    </View>
+  );
+};
+
+UTStatus.propTypes = {
+  Icon: string,
+  labelProps: object,
+  type: string,
+  variant: string,
+  withoutIcon: bool
+};
+
+export default UTStatus;

package/lib/components/UTStatus/theme.js

@@ -0,0 +1,30 @@
+import { TYPES, VARIANTS } from './constants';
+
+export const defaultIconMapper = variant =>
+  ({
+    [VARIANTS.accent]: 'IconInfoCircle',
+    [VARIANTS.error]: 'IconX',
+    [VARIANTS.information]: 'IconInfoCircle',
+    [VARIANTS.success]: 'IconCheck',
+    [VARIANTS.gray]: 'IconArchive',
+    [VARIANTS.warning]: 'IconAlertTriangle'
+  })[variant];
+
+export const ownStyles = {
+  container: {
+    flexDirection: 'row',
+    gap: 8,
+    borderRadius: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    alignItems: 'center'
+  }
+};
+
+export const getVariantStyles =
+  theme =>
+  ({ variant, type }) => ({
+    container: {
+      backgroundColor: theme.Palette[variant]?.[type === TYPES.negative ? '04' : '01']
+    }
+  });

package/lib/index.js

@@ -64,6 +64,7 @@ export { default as UTRoundView } from './components/UTRoundView';
 export { default as UTSearchField } from './components/UTSearchField';
 export { default as UTSelect } from './components/UTSelect';
 export { default as UTSelectableCard } from './components/UTSelectableCard';
+export { default as UTStatus } from './components/UTStatus';
 export { default as UTStatusMessage } from './components/UTStatusMessage';
 export { default as UTStepFeedback } from './components/UTStepFeedback';
 export { default as UTSwitch } from './components/UTSwitch';

package/package.json

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