From 0d9213eb6e521060b7b3a954f6c5097091e1bb5b Mon Sep 17 00:00:00 2001 From: Ionatan Wiznia Date: Tue, 9 May 2023 19:36:47 -0300 Subject: [PATCH 01/59] Start working on money request header --- src/components/MoneyRequestHeader.js | 35 ++++++++++++++++++- src/components/ReportActionItem/IOUPreview.js | 4 ++- 2 files changed, 37 insertions(+), 2 deletions(-) diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index 089276725f58..f3b131a298b3 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -1,4 +1,5 @@ import React from 'react'; +import {withOnyx} from 'react-native-onyx'; import {View} from 'react-native'; import PropTypes from 'prop-types'; import lodashGet from 'lodash/get'; @@ -18,6 +19,9 @@ import compose from '../libs/compose'; import Navigation from '../libs/Navigation/Navigation'; import ROUTES from '../ROUTES'; import Icon from './Icon'; +import SettlementButton from './SettlementButton'; +import * as Policy from '../libs/actions/Policy'; +import ONYXKEYS from '../ONYXKEYS'; const propTypes = { /** The report currently being looked at */ @@ -29,6 +33,9 @@ const propTypes = { name: PropTypes.string, }).isRequired, + /** The chat report this is the report is tied to */ + chatReport: iouReportPropTypes, + /** Personal details so we can get the ones for the report participants */ personalDetails: PropTypes.objectOf(participantPropTypes).isRequired, @@ -40,6 +47,14 @@ const propTypes = { const defaultProps = { isSingleTransactionView: false, + chatReport: null, +}; + +const payRequest = (paymentType, chatReport) => { + if (chatReport && chatReport.chatType === CONST.REPORT.CHAT_TYPE.POLICY_EXPENSE_CHAT) { + + } else { + } }; const MoneyRequestHeader = (props) => { @@ -53,6 +68,8 @@ const MoneyRequestHeader = (props) => { const payeeAvatar = isExpenseReport ? ReportUtils.getWorkspaceAvatar(props.report) : ReportUtils.getAvatar(lodashGet(props.personalDetails, [props.report.managerEmail, 'avatar']), props.report.managerEmail); + const policy = props.policies[`policy_${props.report.policyID}`]; + const shouldShowSettlementButton = !isSettled && (Policy.isAdminOfFreePolicy([policy]) || props.report.type === CONST.REPORT.TYPE.IOU); return ( { /> )} + {shouldShowSettlementButton && ( + payRequest(paymentType, props.chatReport)} + /> + )} @@ -121,4 +146,12 @@ MoneyRequestHeader.displayName = 'MoneyRequestHeader'; MoneyRequestHeader.propTypes = propTypes; MoneyRequestHeader.defaultProps = defaultProps; -export default compose(withWindowDimensions, withLocalize)(MoneyRequestHeader); +export default compose( + withWindowDimensions, + withLocalize, + withOnyx({ + chatReport: { + key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT}${report.chatReportID}`, + }, + }), +)(MoneyRequestHeader); diff --git a/src/components/ReportActionItem/IOUPreview.js b/src/components/ReportActionItem/IOUPreview.js index 202689085d97..f43b73d0073c 100644 --- a/src/components/ReportActionItem/IOUPreview.js +++ b/src/components/ReportActionItem/IOUPreview.js @@ -75,6 +75,8 @@ const propTypes = { /** Does the iouReport have an outstanding IOU? */ hasOutstandingIOU: PropTypes.bool, + + state: PropTypes.string, }), /** True if this is this IOU is a split instead of a 1:1 request */ @@ -205,7 +207,7 @@ const IOUPreview = (props) => { {Str.htmlDecode(lodashGet(props.action, 'originalMessage.comment', ''))} - {isCurrentUserManager && !props.shouldHidePayButton && props.iouReport.stateNum === CONST.REPORT.STATE_NUM.PROCESSING && ( + {isCurrentUserManager && !props.shouldHidePayButton && props.iouReport.state === CONST.REPORT.STATE.PROCESSING && ( - -); - -ButtonWithDropdown.propTypes = propTypes; -ButtonWithDropdown.defaultProps = defaultProps; -ButtonWithDropdown.displayName = 'ButtonWithDropdown'; -export default ButtonWithDropdown; diff --git a/src/components/ButtonWithMenu.js b/src/components/ButtonWithDropdownMenu.js similarity index 59% rename from src/components/ButtonWithMenu.js rename to src/components/ButtonWithDropdownMenu.js index a1576ad5f551..c4b5501cea79 100644 --- a/src/components/ButtonWithMenu.js +++ b/src/components/ButtonWithDropdownMenu.js @@ -4,8 +4,10 @@ import {View} from 'react-native'; import _ from 'underscore'; import styles from '../styles/styles'; import Button from './Button'; -import ButtonWithDropdown from './ButtonWithDropdown'; +import * as Expensicons from './Icon/Expensicons'; +import Icon from './Icon'; import PopoverMenu from './PopoverMenu'; +import themeColors from '../styles/themes/default'; const propTypes = { /** Text to display for the menu header */ @@ -40,7 +42,12 @@ const defaultProps = { menuHeaderText: '', }; -class ButtonWithMenu extends PureComponent { +/** + * This component shows a button that has a separation on the right part that shows a pressable caret button if more than 1 + * options was passed or a simple normal button if more than 1 option was passed. + * If there's more than one option, pressing the caret will show a popover menu with all options. + */ +class ButtonWithDropdownMenu extends PureComponent { constructor(props) { super(props); @@ -59,15 +66,33 @@ class ButtonWithMenu extends PureComponent { return ( {this.props.options.length > 1 ? ( - this.props.onPress(event, selectedItem.value)} - onDropdownPress={() => { - this.setMenuVisibility(true); - }} - /> + + + ) : ( - - ) : ( + const selectedItem = props.options[selectedItemIndex]; + return ( + + {props.options.length > 1 ? ( + + + ) : ( +