@widergy/mobile-ui 1.3.4 → 1.4.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.4.1](https://github.com/widergy/mobile-ui/compare/v1.4.0...v1.4.1) (2024-04-04)
+
+
+### Bug Fixes
+
+* minor fixes ([#271](https://github.com/widergy/mobile-ui/issues/271)) ([4cf7246](https://github.com/widergy/mobile-ui/commit/4cf724618ced022d4dbe515bf90395875957442d))
+
+# [1.4.0](https://github.com/widergy/mobile-ui/compare/v1.3.4...v1.4.0) (2024-03-26)
+
+
+### Features
+
+* added UTProductItem ([#268](https://github.com/widergy/mobile-ui/issues/268)) ([c28b3e8](https://github.com/widergy/mobile-ui/commit/c28b3e83e9f3aea060857778dc15d5537aca7702))
+
 ## [1.3.4](https://github.com/widergy/mobile-ui/compare/v1.3.3...v1.3.4) (2024-03-19)
 
 

package/lib/components/IconButton/index.js

@@ -10,14 +10,16 @@ import propTypes from './propTypes';
 const IconButton = ({
   color,
   disabled,
+  effectColor,
+  height,
+  iconMargin,
+  iconStyle,
   name,
   onPress,
-  effectColor,
   size,
   style,
-  iconStyle,
   type,
-  iconMargin
+  width
 }) => (
   <Touchable
     borderless
@@ -26,15 +28,15 @@ const IconButton = ({
     effectColor={effectColor}
     style={[styles.container, getContainerSize(size, iconMargin), style]}
   >
-    <Icon style={iconStyle} color={color} name={name} size={size} type={type} />
+    <Icon style={iconStyle} {...{ color, height, name, size, type, width }} />
   </Touchable>
 );
 
 IconButton.propTypes = propTypes;
 
 IconButton.defaultProps = {
-  size: DEFAULT_ICON_SIZE,
-  iconMargin: ICON_MARGIN
+  iconMargin: ICON_MARGIN,
+  size: DEFAULT_ICON_SIZE
 };
 
 export default IconButton;

package/lib/components/UTModal/index.js

@@ -15,26 +15,27 @@ import ownStyles from './styles';
 import { CLOSE_ICON } from './constants';
 
 const UTModal = ({
-  children,
-  onRequestClose,
   acceptButton,
-  cancelButton,
-  visible,
-  title,
-  subtitle,
-  subtitleProps = {},
-  loading,
+  backgroundImg,
   backgroundStyles,
-  imageStyles,
-  disableTouchable,
-  loadingText,
-  modalBackgroundColor,
+  cancelButton,
+  children,
   color,
+  disableTouchable,
+  hideCloseButton,
+  hideSeparatorBar,
   imageComponent,
+  imageStyles,
   labelProps,
+  loading,
+  loadingText,
+  modalBackgroundColor,
   modalStyles,
-  backgroundImg,
-  hideSeparatorBar
+  onRequestClose,
+  subtitle,
+  subtitleProps = {},
+  title,
+  visible
 }) => {
   const theme = useTheme();
   const themeStyles = theme.simpleButton;
@@ -67,18 +68,20 @@ const UTModal = ({
                 )}
                 {!!imageComponent && (
                   <View style={[styles.content, imageStyles]}>
-                    <Touchable
-                      borderless
-                      style={styles.closeIcon}
-                      onPress={onRequestClose || cancelButton.onPress}
-                    >
-                      <Icon name={CLOSE_ICON} color={color || 'black'} style={styles.iconSpacing} />
-                    </Touchable>
+                    {!hideCloseButton && (
+                      <Touchable
+                        borderless
+                        style={styles.closeIcon}
+                        onPress={onRequestClose || cancelButton.onPress}
+                      >
+                        <Icon name={CLOSE_ICON} color={color || 'black'} style={styles.iconSpacing} />
+                      </Touchable>
+                    )}
                     <View style={styles.imageContainer}>{imageComponent}</View>
                   </View>
                 )}
                 <View style={styles.content}>
-                  {!backgroundImg && !imageComponent && (
+                  {!backgroundImg && !imageComponent && !hideCloseButton && (
                     <Touchable borderless style={styles.closeIcon} onPress={onRequestClose}>
                       <Icon name={CLOSE_ICON} color={color || 'black'} style={styles.iconSpacing} />
                     </Touchable>

package/lib/components/UTModal/proptypes.js

@@ -6,30 +6,31 @@ import { IS_ANDROID } from '../../utils/platformUtils/constants';
 
 const buttonPropType = shape({
   backgroundColor: string,
-  text: string,
-  onPress: func,
   disabled: bool,
   loadingText: string,
+  onPress: func,
+  text: string,
   textColor: string
 });
 
 export default {
-  onRequestClose: IS_ANDROID ? func.isRequired : func,
-  cancelButton: buttonPropType,
   acceptButton: buttonPropType,
-  visible: bool.isRequired,
-  loading: bool,
-  title: string,
+  backgroundImg: number,
+  backgroundStyles: ViewPropTypes.style,
+  cancelButton: buttonPropType,
   disableTouchable: bool,
-  modalBackgroundColor: string,
-  onKeyboardDismiss: func,
-  loadingText: string,
   fill: string,
-  imageStyles: ViewPropTypes.style,
-  backgroundStyles: ViewPropTypes.style,
-  modalStyles: ViewPropTypes.style,
+  hideCloseButton: bool,
   image: element,
-  backgroundImg: number,
+  imageStyles: ViewPropTypes.style,
   labelProps: shape(bool),
-  theme: themeType
+  loading: bool,
+  loadingText: string,
+  modalBackgroundColor: string,
+  modalStyles: ViewPropTypes.style,
+  onKeyboardDismiss: func,
+  onRequestClose: IS_ANDROID ? func.isRequired : func,
+  theme: themeType,
+  title: string,
+  visible: bool.isRequired
 };

package/lib/components/UTProductItem/README.md

@@ -0,0 +1,28 @@
+# UTProductItem
+
+### Description
+
+This component displays a product with its corresponding image, price and/or discounts. It also provides handlers for adding/removing the amount of products selected.
+
+## Props
+
+| Name             | Type           | Default | Description                                                                     |
+| ---------------- | -------------- | ------- | ------------------------------------------------------------------------------- |
+| action           | actionType     |         | Renders a button on the rightSection of the component                           |
+| additionalInfo   | string         |         | Renders a smaller text under the title                                          |
+| amount           | number         |         | Specifies the number to be displayed as a price                                 |
+| counter          | counterType    |         | Renders a chip on the top right corner with a current number and a limit number |
+| discount         | number         |         | Renders a chip above the amount with the given discount as a percentage         |
+| imageProps       | imagePropsType |         | Renders an image at the leftmost part of the component                          |
+| previousAmount   | number         |         | Renders a text with strikethrough alongside the discount chip                   |
+| secondaryAction  | actionType     |         | Renders a button alongside the main action                                      |
+| selectedQuantity | number         |         | Renders a number between the action and the secondary action                    |
+| title            | string         |         | Renders the main text on the left section of the component                      |
+
+### Custom Types
+
+| Type           | Shape                                                                        |
+| -------------- | ---------------------------------------------------------------------------- |
+| actionType     | `{ color: string, name: string, onPress: func, size: number, type: string }` |
+| counterType    | `{ current: number, limit: number }`                                         |
+| imagePropsType | `{ image: element \| string, withUri: bool  }`                               |

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

@@ -0,0 +1,19 @@
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+import { bool, string } from 'prop-types';
+import React from 'react';
+
+import Label from '../../../Label';
+
+const AdditionalInfo = ({ additionalInfo, shouldUseGap, themedStyles }) => (
+  <Label small style={[themedStyles.additionalInfo, shouldUseGap ? themedStyles.gap : '']}>
+    {additionalInfo}
+  </Label>
+);
+
+AdditionalInfo.propTypes = {
+  additionalInfo: string,
+  shouldUseGap: bool,
+  themedStyles: ViewPropTypes.style
+};
+
+export default AdditionalInfo;

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

@@ -0,0 +1,17 @@
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+import { bool, number } from 'prop-types';
+import React from 'react';
+
+import Label from '../../../Label';
+
+const Amount = ({ amount, shouldUseGap, themedStyles }) => (
+  <Label style={[themedStyles.amount, shouldUseGap ? themedStyles.gap : '']}>{`$ ${amount}`}</Label>
+);
+
+Amount.propTypes = {
+  amount: number,
+  shouldUseGap: bool,
+  themedStyles: ViewPropTypes.style
+};
+
+export default Amount;

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

@@ -0,0 +1,28 @@
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+import { bool, number } from 'prop-types';
+import React from 'react';
+import { View } from 'react-native';
+
+import Label from '../../../Label';
+
+const Discount = ({ previousAmount, shouldUseGap, discount, themedStyles }) => (
+  <View style={[themedStyles.amountContainer, shouldUseGap ? themedStyles.gap : '']}>
+    <View style={themedStyles.discountChip}>
+      <Label small style={themedStyles.discount}>
+        {discount}
+      </Label>
+    </View>
+    {previousAmount && (
+      <Label small color="gray" style={themedStyles.previousAmount}>{`$ ${previousAmount}`}</Label>
+    )}
+  </View>
+);
+
+Discount.propTypes = {
+  discount: number,
+  previousAmount: number,
+  shouldUseGap: bool,
+  themedStyles: ViewPropTypes.style
+};
+
+export default Discount;

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import { number } from 'prop-types';
+import { View } from 'react-native';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+import isEmpty from 'lodash/isEmpty';
+import isNil from 'lodash/isNil';
+
+import IconButton from '../../../IconButton';
+import Label from '../../../Label';
+import { ActionPropTypes } from '../../propTypes';
+import ImageButton from '../../../ImageButton';
+import { useTheme } from '../../../../theming';
+
+const QuantitySelector = ({ action, secondaryAction, selectedQuantity, themedStyles }) => {
+  const { UTProductItem } = useTheme();
+  const ICON_SIZE = 24;
+
+  const renderAction = ({ color, image, name, size, type, styles, onPress }) =>
+    image ? (
+      <ImageButton image={image} size={size || ICON_SIZE} containerStyle={styles.image} onPress={onPress} />
+    ) : (
+      <IconButton
+        color={color || UTProductItem?.actionIconColor || '#091E42'}
+        height={size || ICON_SIZE}
+        iconMargin={8}
+        name={name}
+        onPress={onPress}
+        size={size || ICON_SIZE}
+        style={styles.icon}
+        type={type}
+        width={size || ICON_SIZE}
+      />
+    );
+
+  return (
+    <View style={themedStyles.actionsContainer}>
+      {!isEmpty(secondaryAction) &&
+        renderAction({
+          ...secondaryAction,
+          styles: { icon: themedStyles.secondaryActionIcon, image: themedStyles.secondaryActionImage }
+        })}
+      {!isNil(selectedQuantity) && <Label style={themedStyles.selectedQuantity}>{selectedQuantity}</Label>}
+      {!isEmpty(action) &&
+        renderAction({
+          ...action,
+          styles: { icon: themedStyles.actionIcon, image: themedStyles.actionImage }
+        })}
+    </View>
+  );
+};
+
+QuantitySelector.propTypes = {
+  action: ActionPropTypes,
+  secondaryAction: ActionPropTypes,
+  selectedQuantity: number,
+  themedStyles: ViewPropTypes.style
+};
+
+export default QuantitySelector;

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

@@ -0,0 +1,19 @@
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+import { bool, string } from 'prop-types';
+import React from 'react';
+
+import Label from '../../../Label';
+
+const Title = ({ shouldUseGap, themedStyles, title }) => (
+  <Label medium style={[themedStyles.title, shouldUseGap ? themedStyles.gap : '']}>
+    {title}
+  </Label>
+);
+
+Title.propTypes = {
+  shouldUseGap: bool,
+  themedStyles: ViewPropTypes.style,
+  title: string
+};
+
+export default Title;

package/lib/components/UTProductItem/index.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { View } from 'react-native';
+import merge from 'lodash/merge';
+import { bool, element, number, oneOf, shape, string } from 'prop-types';
+import isEmpty from 'lodash/isEmpty';
+
+import ImageIcon from '../ImageIcon';
+import { useTheme } from '../../theming';
+import Label from '../Label';
+
+import { leftSectionComponents } from './utils';
+import QuantitySelector from './components/QuantitySelector';
+import { ActionPropTypes } from './propTypes';
+import { getUTProductItemStyles } from './styles';
+
+const UTProductItem = ({
+  action,
+  additionalInfo,
+  amount,
+  counter,
+  discount,
+  imageProps,
+  previousAmount,
+  secondaryAction,
+  selectedQuantity,
+  style,
+  title
+}) => {
+  const theme = useTheme();
+  const themedStyles = merge({}, getUTProductItemStyles(theme?.UTProductItem), theme?.UTProductItem, style);
+
+  const IMAGE_SIZE = 70;
+
+  return (
+    <View style={themedStyles.container}>
+      <View style={themedStyles.leftSection}>
+        {!isEmpty(imageProps) && <ImageIcon style={themedStyles.image} size={IMAGE_SIZE} {...imageProps} />}
+        <View style={themedStyles.mainInfo}>
+          {leftSectionComponents({
+            additionalInfo,
+            amount,
+            discount,
+            previousAmount,
+            themedStyles,
+            title
+          }).map(({ Component, props }, index, array) => (
+            <Component key={Math.random} {...props} shouldUseGap={index !== array.length - 1} />
+          ))}
+        </View>
+      </View>
+      <View style={[themedStyles.rightSection, !isEmpty(counter) && themedStyles.spaceBetween]}>
+        {!isEmpty(counter) && (
+          <Label small style={themedStyles.counter}>{`${counter.current}/${counter.limit}`}</Label>
+        )}
+        <QuantitySelector {...{ action, secondaryAction, selectedQuantity, themedStyles }} />
+      </View>
+    </View>
+  );
+};
+
+UTProductItem.propTypes = {
+  action: ActionPropTypes,
+  additionalInfo: string,
+  amount: number,
+  counter: shape({ current: number, limit: number }),
+  discount: number,
+  imageProps: shape({ image: oneOf([string, element]), withUri: bool }),
+  previousAmount: number,
+  secondaryAction: ActionPropTypes,
+  selectedQuantity: number,
+  title: string
+};
+
+export default UTProductItem;

package/lib/components/UTProductItem/propTypes.js

@@ -0,0 +1,9 @@
+import { func, number, shape, string } from 'prop-types';
+
+export const ActionPropTypes = shape({
+  color: string,
+  name: string,
+  onPress: func,
+  size: number,
+  type: string
+});

package/lib/components/UTProductItem/styles.js

@@ -0,0 +1,80 @@
+import { StyleSheet } from 'react-native';
+
+export const getUTProductItemStyles = (theme = {}) =>
+  StyleSheet.create({
+    actionsContainer: {
+      alignItems: 'center',
+      backgroundColor: theme.actionsBackground || '#E4E6EA',
+      borderRadius: 8,
+      display: 'flex',
+      flexDirection: 'row'
+    },
+    additionalInfo: {
+      color: theme.additionalInfoColor || 'gray'
+    },
+    amountContainer: {
+      alignItems: 'center',
+      display: 'flex',
+      flexDirection: 'row'
+    },
+    container: {
+      borderBottomColor: theme.separatorColor || 'gray',
+      borderBottomWidth: 1,
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      paddingVertical: 24
+    },
+    counter: {
+      backgroundColor: theme.counterBackground || '#EBF8FD',
+      borderRadius: 4,
+      color: theme.counterColor || '#035B83',
+      paddingHorizontal: 8,
+      paddingVertical: 4
+    },
+    discount: {
+      color: theme.discountColor || 'white'
+    },
+    discountChip: {
+      backgroundColor: theme.discountBackground || '#285AFF',
+      borderRadius: 4,
+      marginRight: 8,
+      paddingHorizontal: 8,
+      paddingVertical: 4
+    },
+    gap: {
+      marginBottom: 4
+    },
+    image: {
+      borderRadius: 14,
+      marginRight: 16
+    },
+    leftSection: {
+      alignItems: 'center',
+      display: 'flex',
+      flexDirection: 'row'
+    },
+    mainInfo: {
+      display: 'flex',
+      minWidth: 160
+    },
+    previousAmount: {
+      color: theme.previousAmountColor || 'gray',
+      textDecorationLine: 'line-through',
+      textDecorationStyle: 'solid'
+    },
+    rightSection: {
+      alignItems: 'flex-end',
+      display: 'flex',
+      justifyContent: 'center'
+    },
+    secondaryActionImage: {
+      marginHorizontal: 4
+    },
+    selectedQuantity: {
+      paddingHorizontal: 8
+    },
+    spaceBetween: {
+      justifyContent: 'space-between'
+    }
+  });

package/lib/components/UTProductItem/utils.js

@@ -0,0 +1,29 @@
+import Title from './components/Title';
+import AdditionalInfo from './components/AdditionalInfo';
+import Discount from './components/Discount';
+import Amount from './components/Amount';
+
+export const leftSectionComponents = ({
+  additionalInfo,
+  amount,
+  discount,
+  previousAmount,
+  themedStyles,
+  title
+}) =>
+  [
+    { Component: Title, key: 'title', props: { themedStyles, title }, show: !!title },
+    {
+      Component: AdditionalInfo,
+      key: 'additionalInfo',
+      props: { additionalInfo, themedStyles },
+      show: !!additionalInfo
+    },
+    {
+      Component: Discount,
+      key: 'discount',
+      props: { discount, previousAmount, themedStyles },
+      show: !!discount
+    },
+    { Component: Amount, key: 'amount', props: { amount, themedStyles }, show: !!amount }
+  ].filter(elem => elem.show);

package/lib/components/UTWorkflowContainer/versions/V1/components/BottomActions/components/ActionButton/index.js

@@ -20,6 +20,7 @@ const ActionButton = ({ hidden, disabled, onPress, label, mode, style }) => {
         lowerCase
         title={label}
         onPress={onPress}
+        contentStyle={themedStyles.buttonContent}
         containerStyle={themedStyles.buttonContainer}
       />
     </View>

package/lib/index.js

@@ -40,6 +40,7 @@ export { default as UTDetailDrawer } from './components/UTDetailDrawer';
 export { default as UTImage } from './components/UTImage';
 export { default as UTWorkflowContainer } from './components/UTWorkflowContainer';
 export { default as UTSelectableCard } from './components/UTSelectableCard';
+export { default as UTProductItem } from './components/UTProductItem';
 export { default as UTProgressBar } from './components/UTProgressBar';
 export { default as UTOnBoarding } from './components/UTOnBoarding';
 export { default as UTRoundView } from './components/UTRoundView';

package/package.json

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