From 673a57f7a24bbc7467376a2cf22c44058ab662c4 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Sun, 25 Jul 2021 18:41:31 +0530 Subject: [PATCH 1/3] added Balance badge to the Settings page --- src/components/Badge.js | 63 ++++++++++++++++++++++++++++++ src/components/EnvironmentBadge.js | 18 +++------ src/components/IOUBadge.js | 32 ++++++--------- src/components/MenuItem.js | 7 ++++ src/pages/settings/InitialPage.js | 19 +++++++++ src/styles/styles.js | 20 ++++++---- 6 files changed, 118 insertions(+), 41 deletions(-) create mode 100644 src/components/Badge.js diff --git a/src/components/Badge.js b/src/components/Badge.js new file mode 100644 index 000000000000..0f0aa55b5640 --- /dev/null +++ b/src/components/Badge.js @@ -0,0 +1,63 @@ +import React from 'react'; +import {Pressable, View} from 'react-native'; +import PropTypes from 'prop-types'; +import styles, {getBadgeColorStyle} from '../styles/styles'; +import Text from './Text'; + +const propTypes = { + /** Is success type */ + success: PropTypes.bool, + + /** Is success type */ + error: PropTypes.bool, + + /** Whether badge is clickable */ + pressable: PropTypes.bool, + + /** Text to display in the Badge */ + text: PropTypes.string.isRequired, + + /** Styles for Badge */ + badgeStyles: PropTypes.arrayOf(PropTypes.object), + + /** Callback to be called on onPress */ + onPress: PropTypes.func, +}; + +const defaultProps = { + success: false, + error: false, + pressable: false, + badgeStyles: [], + onPress: undefined, +}; + +const Badge = (props) => { + const textStyles = props.success || props.error ? styles.textWhite : undefined; + const Wrapper = props.pressable ? Pressable : View; + const wrapperStyles = ({pressed}) => ([ + styles.badge, + styles.ml2, + getBadgeColorStyle(props.success, props.error, pressed), + ...props.badgeStyles, + ]); + + return ( + + + {props.text} + + + ); +}; + +Badge.displayName = 'EnvironmentBadge'; +Badge.propTypes = propTypes; +Badge.defaultProps = defaultProps; +export default Badge; diff --git a/src/components/EnvironmentBadge.js b/src/components/EnvironmentBadge.js index f7bde09733a5..122a0e47d87a 100644 --- a/src/components/EnvironmentBadge.js +++ b/src/components/EnvironmentBadge.js @@ -1,9 +1,7 @@ import React from 'react'; -import {View} from 'react-native'; -import styles from '../styles/styles'; import CONST from '../CONST'; -import Text from './Text'; import withEnvironment, {environmentPropTypes} from './withEnvironment'; +import Badge from './Badge'; const EnvironmentBadge = (props) => { // If we are on production, don't show any badge @@ -11,16 +9,12 @@ const EnvironmentBadge = (props) => { return null; } - const backgroundColorStyle = props.environment === CONST.ENVIRONMENT.STAGING - ? styles.badgeSuccess - : styles.badgeDanger; - return ( - - - {props.environment} - - + ); }; diff --git a/src/components/IOUBadge.js b/src/components/IOUBadge.js index ebc9852d5401..2eb516b42729 100644 --- a/src/components/IOUBadge.js +++ b/src/components/IOUBadge.js @@ -1,15 +1,13 @@ import React from 'react'; import PropTypes from 'prop-types'; -import {Pressable} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import ONYXKEYS from '../ONYXKEYS'; -import styles, {getBadgeColorStyle} from '../styles/styles'; import Navigation from '../libs/Navigation/Navigation'; import ROUTES from '../ROUTES'; import compose from '../libs/compose'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; import CONST from '../CONST'; -import Text from './Text'; +import Badge from './Badge'; const propTypes = { /** IOU Report data object */ @@ -53,24 +51,16 @@ const IOUBadge = (props) => { Navigation.navigate(ROUTES.getIouDetailsRoute(props.iouReport.chatReportID, props.iouReport.reportID)); }; return ( - ([ - styles.badge, - styles.ml2, - getBadgeColorStyle(props.session.email === props.iouReport.ownerEmail, pressed), - ])} - > - - {props.numberFormat( - props.iouReport.total / 100, - {style: 'currency', currency: props.iouReport.currency}, - )} - - + ); }; diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index 1a28310396ed..36bc13ba1806 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -8,8 +8,12 @@ import styles, {getButtonBackgroundColorStyle, getIconFillColor} from '../styles import Icon from './Icon'; import {ArrowRight} from './Icon/Expensicons'; import getButtonState from '../libs/getButtonState'; +import Badge from './Badge'; const propTypes = { + // Text to be shown as badge near the right end. + badgeText: PropTypes.string, + /** Any additional styles to apply */ // eslint-disable-next-line react/forbid-prop-types wrapperStyle: PropTypes.object, @@ -58,6 +62,7 @@ const propTypes = { }; const defaultProps = { + badgeText: undefined, shouldShowRightIcon: false, wrapperStyle: {}, success: false, @@ -74,6 +79,7 @@ const defaultProps = { }; const MenuItem = ({ + badgeText, onPress, icon, iconRight, @@ -141,6 +147,7 @@ const MenuItem = ({ + {badgeText && } {subtitle && ( { + const walletBalance = numberFormat( + userWallet.availableBalance, + {style: 'currency', currency: 'USD'}, + ); + // On the very first sign in or after clearing storage these // details will not be present on the first render so we'll just // return nothing for now. @@ -169,6 +183,7 @@ const InitialSettingsPage = ({ {_.map(menuItems, (item, index) => { const keyTitle = item.translationKey ? translate(item.translationKey) : item.title; + const isPaymentItem = item.translationKey === 'common.payments'; return ( ); })} @@ -206,5 +222,8 @@ export default compose( policies: { key: ONYXKEYS.COLLECTION.POLICY, }, + userWallet: { + key: ONYXKEYS.USER_WALLET, + }, }), )(InitialSettingsPage); diff --git a/src/styles/styles.js b/src/styles/styles.js index c765784a5a93..9aeb38318f68 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -366,7 +366,7 @@ const styles = { }, badgeText: { - color: themeColors.textReversed, + color: themeColors.text, fontSize: variables.fontSizeSmall, lineHeight: 16, ...whiteSpace.noWrap, @@ -2012,17 +2012,21 @@ function getBackgroundColorStyle(backgroundColor) { } /** - * Generate a style for the background color of the IOU badge + * Generate a style for the background color of the Badge * - * @param {Boolean} isOwner - * @param {Boolean} [isPressed] - * @returns {Object} + * @param {*} success + * @param {*} error + * @param {boolean} [isPressed=false] + * @return {Object} */ -function getBadgeColorStyle(isOwner, isPressed = false) { - if (isOwner) { +function getBadgeColorStyle(success, error, isPressed = false) { + if (success) { return isPressed ? styles.badgeSuccessPressed : styles.badgeSuccess; } - return isPressed ? styles.badgeDangerPressed : styles.badgeDanger; + if (error) { + return isPressed ? styles.badgeDangerPressed : styles.badgeDanger; + } + return {}; } /** From 915649e485da68590fe82d91e33f79489f746316 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Sun, 25 Jul 2021 19:30:36 +0530 Subject: [PATCH 2/3] fix: dev stuff --- src/components/Badge.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Badge.js b/src/components/Badge.js index 0f0aa55b5640..26ee47648c69 100644 --- a/src/components/Badge.js +++ b/src/components/Badge.js @@ -57,7 +57,7 @@ const Badge = (props) => { ); }; -Badge.displayName = 'EnvironmentBadge'; +Badge.displayName = 'Badge'; Badge.propTypes = propTypes; Badge.defaultProps = defaultProps; export default Badge; From 68cc9ce48dc69c7bb5fe498140b7e0524fb3ceb4 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Wed, 28 Jul 2021 11:23:41 +0530 Subject: [PATCH 3/3] small changes --- src/components/Badge.js | 4 ++-- src/components/MenuItem.js | 2 +- src/pages/settings/InitialPage.js | 4 +++- src/styles/styles.js | 4 ++-- 4 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/components/Badge.js b/src/components/Badge.js index 26ee47648c69..84399afce0b9 100644 --- a/src/components/Badge.js +++ b/src/components/Badge.js @@ -5,10 +5,10 @@ import styles, {getBadgeColorStyle} from '../styles/styles'; import Text from './Text'; const propTypes = { - /** Is success type */ + /** Is Success type */ success: PropTypes.bool, - /** Is success type */ + /** Is Error type */ error: PropTypes.bool, /** Whether badge is clickable */ diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index 36bc13ba1806..f046068643e1 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -11,7 +11,7 @@ import getButtonState from '../libs/getButtonState'; import Badge from './Badge'; const propTypes = { - // Text to be shown as badge near the right end. + /** Text to be shown as badge near the right end. */ badgeText: PropTypes.string, /** Any additional styles to apply */ diff --git a/src/pages/settings/InitialPage.js b/src/pages/settings/InitialPage.js index 880016fc2b37..064691876484 100755 --- a/src/pages/settings/InitialPage.js +++ b/src/pages/settings/InitialPage.js @@ -81,7 +81,9 @@ const defaultProps = { network: {}, session: {}, policies: {}, - userWallet: {}, + userWallet: { + availableBalance: 0, + }, }; const defaultMenuItems = [ diff --git a/src/styles/styles.js b/src/styles/styles.js index 9aeb38318f68..6d5258bd0bf5 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2014,8 +2014,8 @@ function getBackgroundColorStyle(backgroundColor) { /** * Generate a style for the background color of the Badge * - * @param {*} success - * @param {*} error + * @param {Boolean} success + * @param {Boolean} error * @param {boolean} [isPressed=false] * @return {Object} */