From fac11e2491438b7441d0b2be04971fbd1ac888d8 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Sat, 8 Jul 2023 09:36:19 +0100 Subject: [PATCH 01/23] Add total amount to expense report view (in line with ReportActions) --- src/languages/en.js | 1 + src/languages/es.js | 1 + src/pages/home/report/ReportActionItem.js | 9 +++++++++ 3 files changed, 11 insertions(+) diff --git a/src/languages/en.js b/src/languages/en.js index 60235a0e150a..d875bfbc244a 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -147,6 +147,7 @@ export default { km: 'kilometer', copied: 'Copied!', someone: 'Someone', + total: 'Total', }, anonymousReportFooter: { logoTagline: 'Join in on the discussion.', diff --git a/src/languages/es.js b/src/languages/es.js index 08ca8fb88710..0f23a81f7c79 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -146,6 +146,7 @@ export default { km: 'kilómetro', copied: '¡Copiado!', someone: 'Alguien', + total: 'Total', }, anonymousReportFooter: { logoTagline: 'Únete a la discussion.', diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js index 9c374b130a1b..23805d4d5bda 100644 --- a/src/pages/home/report/ReportActionItem.js +++ b/src/pages/home/report/ReportActionItem.js @@ -55,6 +55,7 @@ import ReportActionItemDraft from './ReportActionItemDraft'; import TaskPreview from '../../../components/ReportActionItem/TaskPreview'; import TaskAction from '../../../components/ReportActionItem/TaskAction'; import TaskView from '../../../components/ReportActionItem/TaskView'; +import MoneyReportView from '../../../components/ReportActionItem/MoneyReportView'; import * as Session from '../../../libs/actions/Session'; import {hideContextMenu} from './ContextMenu/ReportActionContextMenu'; @@ -422,6 +423,14 @@ function ReportActionItem(props) { /> ); } + if (ReportUtils.isExpenseReport(props.report) || ReportUtils.isIOUReport(props.report)) { + return ( + + ); + } return ( Date: Sat, 8 Jul 2023 09:37:49 +0100 Subject: [PATCH 02/23] Add MoneyReportView.js --- .../ReportActionItem/MoneyReportView.js | 84 +++++++++++++++++++ 1 file changed, 84 insertions(+) create mode 100644 src/components/ReportActionItem/MoneyReportView.js diff --git a/src/components/ReportActionItem/MoneyReportView.js b/src/components/ReportActionItem/MoneyReportView.js new file mode 100644 index 000000000000..62e0c253f0e0 --- /dev/null +++ b/src/components/ReportActionItem/MoneyReportView.js @@ -0,0 +1,84 @@ +import React, {useEffect} from 'react'; +import {View} from 'react-native'; +import PropTypes from 'prop-types'; +import reportPropTypes from '../../pages/reportPropTypes'; +import withLocalize, {withLocalizePropTypes} from '../withLocalize'; +import withWindowDimensions from '../withWindowDimensions'; +import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '../withCurrentUserPersonalDetails'; +import compose from '../../libs/compose'; +import Navigation from '../../libs/Navigation/Navigation'; +import ROUTES from '../../ROUTES'; +import MenuItemWithTopDescription from '../MenuItemWithTopDescription'; +import MenuItem from '../MenuItem'; +import styles from '../../styles/styles'; +import * as ReportUtils from '../../libs/ReportUtils'; +import * as PersonalDetailsUtils from '../../libs/PersonalDetailsUtils'; +import * as UserUtils from '../../libs/UserUtils'; +import * as StyleUtils from '../../styles/StyleUtils'; +import * as Task from '../../libs/actions/Task'; +import CONST from '../../CONST'; +import Checkbox from '../Checkbox'; +import convertToLTR from '../../libs/convertToLTR'; +import Text from '../Text'; +import Icon from '../Icon'; +import getButtonState from '../../libs/getButtonState'; +import PressableWithSecondaryInteraction from '../PressableWithSecondaryInteraction'; +import * as Session from '../../libs/actions/Session'; +import * as Expensicons from '../Icon/Expensicons'; +import variables from '../../styles/variables'; +import * as CurrencyUtils from '../../libs/CurrencyUtils'; + + +const propTypes = { + /** The report currently being looked at */ + report: reportPropTypes.isRequired, + + /** Whether we should display the horizontal rule below the component */ + shouldShowHorizontalRule: PropTypes.bool.isRequired, + + ...withLocalizePropTypes, + + ...withCurrentUserPersonalDetailsPropTypes, +}; + +function MoneyReportView(props) { + const formattedAmount = CurrencyUtils.convertToDisplayString(ReportUtils.getMoneyRequestTotal(props.report), props.report.currency); + const isSettled = ReportUtils.isSettled(props.report.reportID); + + return ( + <> + + + + {props.translate('common.total')} + + + + {isSettled && ( + + + + )} + + {formattedAmount} + + + + {props.shouldShowHorizontalRule && } + + ); +} + +MoneyReportView.propTypes = propTypes; +MoneyReportView.displayName = 'MoneyReportView'; + +export default compose(withWindowDimensions, withLocalize, withCurrentUserPersonalDetails)(MoneyReportView); From 374e0469d08925eb195cfce874df493115b4c1c8 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Sat, 8 Jul 2023 09:43:55 +0100 Subject: [PATCH 03/23] Remove to {payer} and total amount from money request header --- src/components/MoneyRequestHeader.js | 66 +++++++--------------------- 1 file changed, 15 insertions(+), 51 deletions(-) diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index 23e61490d9a5..d63e0126f5eb 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -116,58 +116,22 @@ function MoneyRequestHeader(props) { onBackButtonPress={() => Navigation.goBack(ROUTES.HOME, false, true)} /> - {props.translate('common.to')} - - - - - - {payeeName} - - {isExpenseReport && ( - - {props.translate('workspace.common.workspace')} - - )} + + {shouldShowSettlementButton && !props.isSmallScreenWidth && ( + + IOU.payMoneyRequest(paymentType, props.chatReport, props.report)} + enablePaymentsRoute={ROUTES.BANK_ACCOUNT_NEW} + addBankAccountRoute={bankAccountRoute} + shouldShowPaymentOptions + /> - - - {!props.isSingleTransactionView && {formattedAmount}} - {!props.isSingleTransactionView && isSettled && ( - - - - )} - {shouldShowSettlementButton && !props.isSmallScreenWidth && ( - - IOU.payMoneyRequest(paymentType, props.chatReport, props.report)} - enablePaymentsRoute={ROUTES.BANK_ACCOUNT_NEW} - addBankAccountRoute={bankAccountRoute} - shouldShowPaymentOptions - /> - - )} - + )} {shouldShowSettlementButton && props.isSmallScreenWidth && ( Date: Sat, 8 Jul 2023 10:35:42 +0100 Subject: [PATCH 04/23] Separate Report and Request Header Logic --- .../ReportActionItem/MoneyReportView.js | 3 +- src/pages/home/ReportScreen.js | 52 +++++++++++++------ 2 files changed, 36 insertions(+), 19 deletions(-) diff --git a/src/components/ReportActionItem/MoneyReportView.js b/src/components/ReportActionItem/MoneyReportView.js index 62e0c253f0e0..72045a989dd8 100644 --- a/src/components/ReportActionItem/MoneyReportView.js +++ b/src/components/ReportActionItem/MoneyReportView.js @@ -28,7 +28,6 @@ import * as Expensicons from '../Icon/Expensicons'; import variables from '../../styles/variables'; import * as CurrencyUtils from '../../libs/CurrencyUtils'; - const propTypes = { /** The report currently being looked at */ report: reportPropTypes.isRequired, @@ -49,7 +48,7 @@ function MoneyReportView(props) { <> - diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index 4571e5318a8b..712bfc8db95f 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -35,6 +35,7 @@ import withNavigationFocus from '../../components/withNavigationFocus'; import getIsReportFullyVisible from '../../libs/getIsReportFullyVisible'; import * as EmojiPickerAction from '../../libs/actions/EmojiPickerAction'; import MoneyRequestHeader from '../../components/MoneyRequestHeader'; +import MoneyReportHeader from '../../components/MoneyReportHeader'; import withNavigation, {withNavigationPropTypes} from '../../components/withNavigation'; import * as ComposerActions from '../../libs/actions/Composer'; import ReportScreenContext from './ReportScreenContext'; @@ -252,6 +253,39 @@ class ReportScreen extends React.Component { const policy = this.props.policies[`${ONYXKEYS.COLLECTION.POLICY}${this.props.report.policyID}`]; + let headerView = ( + Navigation.goBack(ROUTES.HOME, false, true)} + personalDetails={this.props.personalDetails} + report={this.props.report} + /> + ); + + if (isSingleTransactionView) { + headerView = ( + + ); + } + + if (ReportUtils.isMoneyRequestReport(this.props.report)) { + headerView = ( + + ); + } + return ( - {ReportUtils.isMoneyRequestReport(this.props.report) || isSingleTransactionView ? ( - - ) : ( - Navigation.goBack(ROUTES.HOME, false, true)} - personalDetails={this.props.personalDetails} - report={this.props.report} - /> - )} - + {headerView} {ReportUtils.isTaskReport(this.props.report) && this.props.isSmallScreenWidth && ReportUtils.isOpenTaskReport(this.props.report) && ( From fc4a0dc1bec916bc92a37f75e7e5e3fde720fcb6 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Sat, 8 Jul 2023 11:21:37 +0100 Subject: [PATCH 05/23] Add src/components/MoneyReportHeader.js --- src/components/MoneyReportHeader.js | 154 ++++++++++++++++++++++++++++ 1 file changed, 154 insertions(+) create mode 100644 src/components/MoneyReportHeader.js diff --git a/src/components/MoneyReportHeader.js b/src/components/MoneyReportHeader.js new file mode 100644 index 000000000000..f2c243df1833 --- /dev/null +++ b/src/components/MoneyReportHeader.js @@ -0,0 +1,154 @@ +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'; +import HeaderWithBackButton from './HeaderWithBackButton'; +import iouReportPropTypes from '../pages/iouReportPropTypes'; +import withLocalize, {withLocalizePropTypes} from './withLocalize'; +import * as ReportUtils from '../libs/ReportUtils'; +import * as Expensicons from './Icon/Expensicons'; +import Text from './Text'; +import participantPropTypes from './participantPropTypes'; +import Avatar from './Avatar'; +import styles from '../styles/styles'; +import themeColors from '../styles/themes/default'; +import CONST from '../CONST'; +import withWindowDimensions from './withWindowDimensions'; +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'; +import * as IOU from '../libs/actions/IOU'; +import * as CurrencyUtils from '../libs/CurrencyUtils'; +import MenuItemWithTopDescription from './MenuItemWithTopDescription'; +import DateUtils from '../libs/DateUtils'; +import reportPropTypes from '../pages/reportPropTypes'; +import * as UserUtils from '../libs/UserUtils'; + +const propTypes = { + /** The report currently being looked at */ + report: iouReportPropTypes.isRequired, + + /** The expense report or iou report (only will have a value if this is a transaction thread) */ + parentReport: iouReportPropTypes, + + /** The policies which the user has access to and which the report could be tied to */ + policies: PropTypes.shape({ + /** Name of the policy */ + name: PropTypes.string, + }).isRequired, + + /** The chat report this report is linked to */ + chatReport: reportPropTypes, + + /** Personal details so we can get the ones for the report participants */ + personalDetails: PropTypes.objectOf(participantPropTypes).isRequired, + + /** Session info for the currently logged in user. */ + session: PropTypes.shape({ + /** Currently logged in user email */ + email: PropTypes.string, + }), + + ...withLocalizePropTypes, +}; + +const defaultProps = { + chatReport: {}, + session: { + email: null, + }, + parentReport: {}, +}; + +function MoneyReportHeader(props) { + const moneyRequestReport = props.report; + const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID); + const policy = props.policies[`${ONYXKEYS.COLLECTION.POLICY}${props.report.policyID}`]; + const isPayer = + Policy.isAdminOfFreePolicy([policy]) || (ReportUtils.isMoneyRequestReport(moneyRequestReport) && lodashGet(props.session, 'accountID', null) === moneyRequestReport.managerID); + // const shouldShowSettlementButton = !isSettled && isPayer; + const shouldShowSettlementButton = true; + const bankAccountRoute = ReportUtils.getBankAccountRoute(props.chatReport); + const shouldShowPaypal = Boolean(lodashGet(props.personalDetails, [moneyRequestReport.managerID, 'payPalMeAddress'])); + const report = props.report; + return ( + + {}, + }, + ]} + threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(props.windowWidth)} + report={report} + policies={props.policies} + personalDetails={props.personalDetails} + shouldShowBackButton={props.isSmallScreenWidth} + onBackButtonPress={() => Navigation.goBack(ROUTES.HOME, false, true)} + shouldShowBorderBottom + /> + + + {shouldShowSettlementButton && !props.isSmallScreenWidth && ( + + IOU.payMoneyRequest(paymentType, props.chatReport, props.report)} + enablePaymentsRoute={ROUTES.BANK_ACCOUNT_NEW} + addBankAccountRoute={bankAccountRoute} + shouldShowPaymentOptions + /> + + )} + + {shouldShowSettlementButton && props.isSmallScreenWidth && ( + IOU.payMoneyRequest(paymentType, props.chatReport, props.report)} + enablePaymentsRoute={ROUTES.BANK_ACCOUNT_NEW} + addBankAccountRoute={bankAccountRoute} + shouldShowPaymentOptions + /> + )} + + + ); +} + +MoneyReportHeader.displayName = 'MoneyReportHeader'; +MoneyReportHeader.propTypes = propTypes; +MoneyReportHeader.defaultProps = defaultProps; + +export default compose( + withWindowDimensions, + withLocalize, + withOnyx({ + chatReport: { + key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT}${report.chatReportID}`, + }, + session: { + key: ONYXKEYS.SESSION, + }, + parentReport: { + key: (props) => `${ONYXKEYS.COLLECTION.REPORT}${props.report.parentReportID}`, + }, + }), +)(MoneyReportHeader); From b1a6aaa880d305d814709d7571a1f27ce65078aa Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Sat, 8 Jul 2023 12:20:34 +0100 Subject: [PATCH 06/23] Button Spacing in Report Header --- src/components/HeaderWithBackButton.js | 4 +-- src/components/MoneyReportHeader.js | 39 +++++++++++++------------- 2 files changed, 22 insertions(+), 21 deletions(-) diff --git a/src/components/HeaderWithBackButton.js b/src/components/HeaderWithBackButton.js index 267634c1cbbb..aaea4d8f7806 100755 --- a/src/components/HeaderWithBackButton.js +++ b/src/components/HeaderWithBackButton.js @@ -199,7 +199,8 @@ class HeaderWithBackButton extends Component { subtitle={this.props.stepCounter && this.props.shouldShowStepCounter ? this.props.translate('stepCounter', this.props.stepCounter) : this.props.subtitle} /> )} - + + {this.props.children} {this.props.shouldShowDownloadButton && ( )} - {this.props.shouldShowGetAssistanceButton && ( Navigation.goBack(ROUTES.HOME, false, true)} - shouldShowBorderBottom - /> - - - {shouldShowSettlementButton && !props.isSmallScreenWidth && ( - - IOU.payMoneyRequest(paymentType, props.chatReport, props.report)} - enablePaymentsRoute={ROUTES.BANK_ACCOUNT_NEW} - addBankAccountRoute={bankAccountRoute} - shouldShowPaymentOptions - /> - - )} + shouldShowBorderBottom={!props.isSmallScreenWidth} + > + {shouldShowSettlementButton && !props.isSmallScreenWidth && ( + + IOU.payMoneyRequest(paymentType, props.chatReport, props.report)} + enablePaymentsRoute={ROUTES.BANK_ACCOUNT_NEW} + addBankAccountRoute={bankAccountRoute} + shouldShowPaymentOptions + style={[styles.pv2]} + totalAmount={formattedAmount} + /> + )} + + {shouldShowSettlementButton && props.isSmallScreenWidth && ( Date: Sat, 8 Jul 2023 12:22:01 +0100 Subject: [PATCH 07/23] remove unused --- src/components/MoneyReportHeader.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/MoneyReportHeader.js b/src/components/MoneyReportHeader.js index 0f48cfe6f022..7c1d45423900 100644 --- a/src/components/MoneyReportHeader.js +++ b/src/components/MoneyReportHeader.js @@ -110,7 +110,6 @@ function MoneyReportHeader(props) { addBankAccountRoute={bankAccountRoute} shouldShowPaymentOptions style={[styles.pv2]} - totalAmount={formattedAmount} /> )} From e2095204ae62c0718e9ff0c93cc428c97cd9ab2a Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Sat, 8 Jul 2023 17:48:28 +0100 Subject: [PATCH 08/23] Add total amount to settlement button --- src/components/MoneyReportHeader.js | 3 +++ src/components/SettlementButton.js | 10 +++++++--- src/languages/en.js | 4 ++-- src/languages/es.js | 4 ++-- 4 files changed, 14 insertions(+), 7 deletions(-) diff --git a/src/components/MoneyReportHeader.js b/src/components/MoneyReportHeader.js index 7c1d45423900..fb9d2766c34e 100644 --- a/src/components/MoneyReportHeader.js +++ b/src/components/MoneyReportHeader.js @@ -76,6 +76,7 @@ function MoneyReportHeader(props) { const bankAccountRoute = ReportUtils.getBankAccountRoute(props.chatReport); const shouldShowPaypal = Boolean(lodashGet(props.personalDetails, [moneyRequestReport.managerID, 'payPalMeAddress'])); const report = props.report; + const formattedAmount = CurrencyUtils.convertToDisplayString(ReportUtils.getMoneyRequestTotal(props.report), props.report.currency); return ( )} @@ -126,6 +128,7 @@ function MoneyReportHeader(props) { enablePaymentsRoute={ROUTES.BANK_ACCOUNT_NEW} addBankAccountRoute={bankAccountRoute} shouldShowPaymentOptions + formattedAmount={formattedAmount} /> )} diff --git a/src/components/SettlementButton.js b/src/components/SettlementButton.js index dbcaae083659..29e37d5a6be5 100644 --- a/src/components/SettlementButton.js +++ b/src/components/SettlementButton.js @@ -54,6 +54,9 @@ const propTypes = { /** Additional styles to add to the component */ style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]), + /** Total money amount in form */ + formattedAmount: PropTypes.string, + ...withLocalizePropTypes, }; @@ -67,6 +70,7 @@ const defaultProps = { style: [], iouReport: {}, policyID: '', + formattedAmount: '', }; class SettlementButton extends React.Component { @@ -79,17 +83,17 @@ class SettlementButton extends React.Component { const isExpenseReport = ReportUtils.isExpenseReport(this.props.iouReport); const paymentMethods = { [CONST.IOU.PAYMENT_TYPE.EXPENSIFY]: { - text: this.props.translate('iou.settleExpensify'), + text: this.props.translate('iou.settleExpensify', {formattedAmount: this.props.formattedAmount || ''}), icon: Expensicons.Wallet, value: CONST.IOU.PAYMENT_TYPE.EXPENSIFY, }, [CONST.IOU.PAYMENT_TYPE.VBBA]: { - text: this.props.translate('iou.settleExpensify'), + text: this.props.translate('iou.settleExpensify', {formattedAmount: this.props.formattedAmount || ''}), icon: Expensicons.Wallet, value: CONST.IOU.PAYMENT_TYPE.VBBA, }, [CONST.IOU.PAYMENT_TYPE.PAYPAL_ME]: { - text: this.props.translate('iou.settlePaypalMe'), + text: this.props.translate('iou.settlePaypalMe', {formattedAmount: this.props.formattedAmount || ''}), icon: Expensicons.PayPal, value: CONST.IOU.PAYMENT_TYPE.PAYPAL_ME, }, diff --git a/src/languages/en.js b/src/languages/en.js index d875bfbc244a..b36defa2ecf4 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -353,10 +353,10 @@ export default { settledExpensify: 'Paid', settledElsewhere: 'Paid elsewhere', settledPaypalMe: 'Paid using Paypal.me', - settleExpensify: 'Pay with Expensify', + settleExpensify: ({formattedAmount}) => `Pay ${formattedAmount} with Expensify`, settleElsewhere: "I'll settle up elsewhere", payExpenseElsewhere: 'Pay elsewhere', - settlePaypalMe: 'Pay with PayPal.me', + settlePaypalMe: ({formattedAmount}) => `Pay ${formattedAmount} with PayPal.me`, requestAmount: ({amount}) => `request ${amount}`, splitAmount: ({amount}) => `split ${amount}`, amountEach: ({amount}) => `${amount} each`, diff --git a/src/languages/es.js b/src/languages/es.js index 0f23a81f7c79..174300d3f50b 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -352,10 +352,10 @@ export default { settledExpensify: 'Pagado', settledElsewhere: 'Pagado de otra forma', settledPaypalMe: 'Pagado con PayPal.me', - settleExpensify: 'Pagar con Expensify', + settleExpensify: ({formattedAmount}) => `Pagar ${formattedAmount} con Expensify`, settleElsewhere: 'Voy a pagar de otra forma', payExpenseElsewhere: 'Pagar de otra forma', - settlePaypalMe: 'Pagar con PayPal.me', + settlePaypalMe: ({formattedAmount}) => `Pagar ${formattedAmount} con PayPal.me`, requestAmount: ({amount}) => `solicitar ${amount}`, splitAmount: ({amount}) => `dividir ${amount}`, amountEach: ({amount}) => `${amount} cada uno`, From 433c33d4fee85d99b423eafb5801f22ef604d9e5 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Sat, 8 Jul 2023 17:58:32 +0100 Subject: [PATCH 09/23] Add back button and three dots to match mock up --- src/components/MoneyReportHeader.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/MoneyReportHeader.js b/src/components/MoneyReportHeader.js index fb9d2766c34e..5b5bdf39dfdb 100644 --- a/src/components/MoneyReportHeader.js +++ b/src/components/MoneyReportHeader.js @@ -82,7 +82,7 @@ function MoneyReportHeader(props) { Navigation.goBack(ROUTES.HOME, false, true)} shouldShowBorderBottom={!props.isSmallScreenWidth} > From 1547842aaabe2f777f683c7475d697bb1a3eeb99 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Sat, 8 Jul 2023 18:58:57 +0100 Subject: [PATCH 10/23] add background image to report view --- src/components/ReportActionItem/MoneyReportView.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/MoneyReportView.js b/src/components/ReportActionItem/MoneyReportView.js index 72045a989dd8..3e03fc6bcf1d 100644 --- a/src/components/ReportActionItem/MoneyReportView.js +++ b/src/components/ReportActionItem/MoneyReportView.js @@ -1,5 +1,5 @@ import React, {useEffect} from 'react'; -import {View} from 'react-native'; +import {View, Image} from 'react-native'; import PropTypes from 'prop-types'; import reportPropTypes from '../../pages/reportPropTypes'; import withLocalize, {withLocalizePropTypes} from '../withLocalize'; @@ -27,6 +27,8 @@ import * as Session from '../../libs/actions/Session'; import * as Expensicons from '../Icon/Expensicons'; import variables from '../../styles/variables'; import * as CurrencyUtils from '../../libs/CurrencyUtils'; +import EmptyStateBackgroundImage from '../../../assets/images/empty-state_background-fade.png'; + const propTypes = { /** The report currently being looked at */ @@ -46,6 +48,13 @@ function MoneyReportView(props) { return ( <> + + + Date: Mon, 10 Jul 2023 11:01:37 +0100 Subject: [PATCH 11/23] Add constant to CONST --- src/CONST.js | 3 +++ src/components/ReportActionItem/MoneyReportView.js | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/CONST.js b/src/CONST.js index 76910d5d8737..267a6e2eeff1 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -159,6 +159,9 @@ const CONST = { CONTAINER_MINHEIGHT: 500, VIEW_HEIGHT: 275, }, + MONEY_REPORT: { + MIN_HEIGHT: 280, + } }, RIGHT_MODAL_BACKGROUND_OVERLAY_OPACITY: 0.4, diff --git a/src/components/ReportActionItem/MoneyReportView.js b/src/components/ReportActionItem/MoneyReportView.js index 3e03fc6bcf1d..9ff3259256f9 100644 --- a/src/components/ReportActionItem/MoneyReportView.js +++ b/src/components/ReportActionItem/MoneyReportView.js @@ -48,7 +48,7 @@ function MoneyReportView(props) { return ( <> - + Date: Tue, 11 Jul 2023 12:18:43 +0100 Subject: [PATCH 12/23] Clean up --- src/components/MoneyReportHeader.js | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/src/components/MoneyReportHeader.js b/src/components/MoneyReportHeader.js index 0df89bf20ece..4c91ac6ef47d 100644 --- a/src/components/MoneyReportHeader.js +++ b/src/components/MoneyReportHeader.js @@ -8,26 +8,18 @@ import iouReportPropTypes from '../pages/iouReportPropTypes'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; import * as ReportUtils from '../libs/ReportUtils'; import * as Expensicons from './Icon/Expensicons'; -import Text from './Text'; import participantPropTypes from './participantPropTypes'; -import Avatar from './Avatar'; import styles from '../styles/styles'; -import themeColors from '../styles/themes/default'; -import CONST from '../CONST'; import withWindowDimensions from './withWindowDimensions'; 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'; import * as IOU from '../libs/actions/IOU'; import * as CurrencyUtils from '../libs/CurrencyUtils'; -import MenuItemWithTopDescription from './MenuItemWithTopDescription'; -import DateUtils from '../libs/DateUtils'; import reportPropTypes from '../pages/reportPropTypes'; -import * as UserUtils from '../libs/UserUtils'; const propTypes = { /** The report currently being looked at */ @@ -71,8 +63,7 @@ function MoneyReportHeader(props) { const policy = props.policies[`${ONYXKEYS.COLLECTION.POLICY}${props.report.policyID}`]; const isPayer = Policy.isAdminOfFreePolicy([policy]) || (ReportUtils.isMoneyRequestReport(moneyRequestReport) && lodashGet(props.session, 'accountID', null) === moneyRequestReport.managerID); - // const shouldShowSettlementButton = !isSettled && isPayer; - const shouldShowSettlementButton = true; + const shouldShowSettlementButton = !isSettled && isPayer; const bankAccountRoute = ReportUtils.getBankAccountRoute(props.chatReport); const shouldShowPaypal = Boolean(lodashGet(props.personalDetails, [moneyRequestReport.managerID, 'payPalMeAddress'])); const report = props.report; From ccbeb0f2a0f29e610ef971cfa24ee02c5bc5894f Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Tue, 11 Jul 2023 12:20:38 +0100 Subject: [PATCH 13/23] prettier --- src/CONST.js | 2 +- src/components/MoneyReportHeader.js | 32 +++++++++---------- .../ReportActionItem/MoneyReportView.js | 1 - 3 files changed, 17 insertions(+), 18 deletions(-) diff --git a/src/CONST.js b/src/CONST.js index 267a6e2eeff1..fda1fbe742b6 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -161,7 +161,7 @@ const CONST = { }, MONEY_REPORT: { MIN_HEIGHT: 280, - } + }, }, RIGHT_MODAL_BACKGROUND_OVERLAY_OPACITY: 0.4, diff --git a/src/components/MoneyReportHeader.js b/src/components/MoneyReportHeader.js index 4c91ac6ef47d..307a0ff44d2c 100644 --- a/src/components/MoneyReportHeader.js +++ b/src/components/MoneyReportHeader.js @@ -88,23 +88,23 @@ function MoneyReportHeader(props) { shouldShowBackButton onBackButtonPress={() => Navigation.goBack(ROUTES.HOME, false, true)} shouldShowBorderBottom={!props.isSmallScreenWidth} - > + > {shouldShowSettlementButton && !props.isSmallScreenWidth && ( - - IOU.payMoneyRequest(paymentType, props.chatReport, props.report)} - enablePaymentsRoute={ROUTES.BANK_ACCOUNT_NEW} - addBankAccountRoute={bankAccountRoute} - shouldShowPaymentOptions - style={[styles.pv2]} - formattedAmount={formattedAmount} - /> - + + IOU.payMoneyRequest(paymentType, props.chatReport, props.report)} + enablePaymentsRoute={ROUTES.BANK_ACCOUNT_NEW} + addBankAccountRoute={bankAccountRoute} + shouldShowPaymentOptions + style={[styles.pv2]} + formattedAmount={formattedAmount} + /> + )} diff --git a/src/components/ReportActionItem/MoneyReportView.js b/src/components/ReportActionItem/MoneyReportView.js index 9ff3259256f9..498ab0c37de7 100644 --- a/src/components/ReportActionItem/MoneyReportView.js +++ b/src/components/ReportActionItem/MoneyReportView.js @@ -29,7 +29,6 @@ import variables from '../../styles/variables'; import * as CurrencyUtils from '../../libs/CurrencyUtils'; import EmptyStateBackgroundImage from '../../../assets/images/empty-state_background-fade.png'; - const propTypes = { /** The report currently being looked at */ report: reportPropTypes.isRequired, From 4940131ddc049c18772cab6e9e4bd18e25ab8407 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Tue, 11 Jul 2023 12:41:44 +0100 Subject: [PATCH 14/23] Fix lint --- src/components/MoneyReportHeader.js | 6 ------ src/components/ReportActionItem/MoneyReportView.js | 14 +------------- 2 files changed, 1 insertion(+), 19 deletions(-) diff --git a/src/components/MoneyReportHeader.js b/src/components/MoneyReportHeader.js index 307a0ff44d2c..d991ae36d6a6 100644 --- a/src/components/MoneyReportHeader.js +++ b/src/components/MoneyReportHeader.js @@ -25,9 +25,6 @@ const propTypes = { /** The report currently being looked at */ report: iouReportPropTypes.isRequired, - /** The expense report or iou report (only will have a value if this is a transaction thread) */ - parentReport: iouReportPropTypes, - /** The policies which the user has access to and which the report could be tied to */ policies: PropTypes.shape({ /** Name of the policy */ @@ -141,8 +138,5 @@ export default compose( session: { key: ONYXKEYS.SESSION, }, - parentReport: { - key: (props) => `${ONYXKEYS.COLLECTION.REPORT}${props.report.parentReportID}`, - }, }), )(MoneyReportHeader); diff --git a/src/components/ReportActionItem/MoneyReportView.js b/src/components/ReportActionItem/MoneyReportView.js index 498ab0c37de7..a975e3bff4d8 100644 --- a/src/components/ReportActionItem/MoneyReportView.js +++ b/src/components/ReportActionItem/MoneyReportView.js @@ -1,4 +1,4 @@ -import React, {useEffect} from 'react'; +import React from 'react'; import {View, Image} from 'react-native'; import PropTypes from 'prop-types'; import reportPropTypes from '../../pages/reportPropTypes'; @@ -6,24 +6,12 @@ import withLocalize, {withLocalizePropTypes} from '../withLocalize'; import withWindowDimensions from '../withWindowDimensions'; import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '../withCurrentUserPersonalDetails'; import compose from '../../libs/compose'; -import Navigation from '../../libs/Navigation/Navigation'; -import ROUTES from '../../ROUTES'; -import MenuItemWithTopDescription from '../MenuItemWithTopDescription'; -import MenuItem from '../MenuItem'; import styles from '../../styles/styles'; import * as ReportUtils from '../../libs/ReportUtils'; -import * as PersonalDetailsUtils from '../../libs/PersonalDetailsUtils'; -import * as UserUtils from '../../libs/UserUtils'; import * as StyleUtils from '../../styles/StyleUtils'; -import * as Task from '../../libs/actions/Task'; import CONST from '../../CONST'; -import Checkbox from '../Checkbox'; -import convertToLTR from '../../libs/convertToLTR'; import Text from '../Text'; import Icon from '../Icon'; -import getButtonState from '../../libs/getButtonState'; -import PressableWithSecondaryInteraction from '../PressableWithSecondaryInteraction'; -import * as Session from '../../libs/actions/Session'; import * as Expensicons from '../Icon/Expensicons'; import variables from '../../styles/variables'; import * as CurrencyUtils from '../../libs/CurrencyUtils'; From 2b71f1e1f4a7367c025f6fac5b405f51932849ba Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Tue, 11 Jul 2023 12:54:58 +0100 Subject: [PATCH 15/23] lint --- src/components/MoneyReportHeader.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/MoneyReportHeader.js b/src/components/MoneyReportHeader.js index d991ae36d6a6..15ce8c6001c7 100644 --- a/src/components/MoneyReportHeader.js +++ b/src/components/MoneyReportHeader.js @@ -51,7 +51,6 @@ const defaultProps = { session: { email: null, }, - parentReport: {}, }; function MoneyReportHeader(props) { From 1ab77cdaf012a96b1920a95781cfee17f7005657 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Thu, 13 Jul 2023 11:36:26 +0100 Subject: [PATCH 16/23] useLocalize hook, clean up --- src/components/MenuItem.js | 2 +- src/components/MoneyReportHeader.js | 10 +++++----- .../ReportActionItem/MoneyReportView.js | 16 ++++++---------- src/components/ReportActionItem/TaskView.js | 2 +- src/styles/styles.js | 6 +++++- 5 files changed, 18 insertions(+), 18 deletions(-) diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index ff26c0f6e7e4..d2715c9672c1 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -94,7 +94,7 @@ function MenuItem(props) { const descriptionTextStyle = StyleUtils.combineStyles([ styles.textLabelSupporting, props.icon && !_.isArray(props.icon) ? styles.ml3 : undefined, - styles.lineHeightNormal, + styles.lhNormal, props.title ? descriptionVerticalMargin : StyleUtils.getFontSizeStyle(variables.fontSizeNormal), props.descriptionTextStyle, isDeleted ? styles.offlineFeedback.deleted : undefined, diff --git a/src/components/MoneyReportHeader.js b/src/components/MoneyReportHeader.js index 15ce8c6001c7..49f82c06332b 100644 --- a/src/components/MoneyReportHeader.js +++ b/src/components/MoneyReportHeader.js @@ -20,6 +20,7 @@ import ONYXKEYS from '../ONYXKEYS'; import * as IOU from '../libs/actions/IOU'; import * as CurrencyUtils from '../libs/CurrencyUtils'; import reportPropTypes from '../pages/reportPropTypes'; +import useLocalize from '../hooks/useLocalize'; const propTypes = { /** The report currently being looked at */ @@ -42,8 +43,6 @@ const propTypes = { /** Currently logged in user email */ email: PropTypes.string, }), - - ...withLocalizePropTypes, }; const defaultProps = { @@ -62,8 +61,9 @@ function MoneyReportHeader(props) { const shouldShowSettlementButton = !isSettled && isPayer; const bankAccountRoute = ReportUtils.getBankAccountRoute(props.chatReport); const shouldShowPaypal = Boolean(lodashGet(props.personalDetails, [moneyRequestReport.managerID, 'payPalMeAddress'])); - const report = props.report; const formattedAmount = CurrencyUtils.convertToDisplayString(ReportUtils.getMoneyRequestTotal(props.report), props.report.currency); + const {translate} = useLocalize(); + return ( {}, }, ]} threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(props.windowWidth)} - report={report} + report={props.report} policies={props.policies} personalDetails={props.personalDetails} shouldShowBackButton diff --git a/src/components/ReportActionItem/MoneyReportView.js b/src/components/ReportActionItem/MoneyReportView.js index a975e3bff4d8..189e0146b0a0 100644 --- a/src/components/ReportActionItem/MoneyReportView.js +++ b/src/components/ReportActionItem/MoneyReportView.js @@ -2,9 +2,7 @@ import React from 'react'; import {View, Image} from 'react-native'; import PropTypes from 'prop-types'; import reportPropTypes from '../../pages/reportPropTypes'; -import withLocalize, {withLocalizePropTypes} from '../withLocalize'; import withWindowDimensions from '../withWindowDimensions'; -import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '../withCurrentUserPersonalDetails'; import compose from '../../libs/compose'; import styles from '../../styles/styles'; import * as ReportUtils from '../../libs/ReportUtils'; @@ -16,6 +14,7 @@ import * as Expensicons from '../Icon/Expensicons'; import variables from '../../styles/variables'; import * as CurrencyUtils from '../../libs/CurrencyUtils'; import EmptyStateBackgroundImage from '../../../assets/images/empty-state_background-fade.png'; +import useLocalize from '../../hooks/useLocalize'; const propTypes = { /** The report currently being looked at */ @@ -23,15 +22,12 @@ const propTypes = { /** Whether we should display the horizontal rule below the component */ shouldShowHorizontalRule: PropTypes.bool.isRequired, - - ...withLocalizePropTypes, - - ...withCurrentUserPersonalDetailsPropTypes, }; function MoneyReportView(props) { const formattedAmount = CurrencyUtils.convertToDisplayString(ReportUtils.getMoneyRequestTotal(props.report), props.report.currency); const isSettled = ReportUtils.isSettled(props.report.reportID); + const {translate} = useLocalize(); return ( <> @@ -45,10 +41,10 @@ function MoneyReportView(props) { - {props.translate('common.total')} + {translate('common.total')} @@ -68,7 +64,7 @@ function MoneyReportView(props) { - {props.shouldShowHorizontalRule && } + {props.shouldShowHorizontalRule && } ); } @@ -76,4 +72,4 @@ function MoneyReportView(props) { MoneyReportView.propTypes = propTypes; MoneyReportView.displayName = 'MoneyReportView'; -export default compose(withWindowDimensions, withLocalize, withCurrentUserPersonalDetails)(MoneyReportView); +export default compose(withWindowDimensions)(MoneyReportView); diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js index 6e6afe1591e7..9fae9e2280ea 100644 --- a/src/components/ReportActionItem/TaskView.js +++ b/src/components/ReportActionItem/TaskView.js @@ -137,7 +137,7 @@ function TaskView(props) { /> )} - {props.shouldShowHorizontalRule && } + {props.shouldShowHorizontalRule && } ); } diff --git a/src/styles/styles.js b/src/styles/styles.js index c75514a9b53c..98aaf2da214b 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1077,6 +1077,10 @@ const styles = { lineHeight: '140%', }, + lhNormal: { + lineHeight: variables.lineHeightNormal, + }, + formHelp: { color: themeColors.textSupporting, fontSize: variables.fontSizeLabel, @@ -3445,7 +3449,7 @@ const styles = { ...spacing.mr3, }, - taskHorizontalRule: { + reportHorizontalRule: { borderBottomWidth: 1, borderColor: themeColors.border, ...spacing.mh5, From b7e9f5515b779174f2802b7122b650f74ceba1f6 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Thu, 13 Jul 2023 11:39:53 +0100 Subject: [PATCH 17/23] remove withLocalize from MoneyReportHeader --- src/components/MoneyReportHeader.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/MoneyReportHeader.js b/src/components/MoneyReportHeader.js index 49f82c06332b..440b5afac408 100644 --- a/src/components/MoneyReportHeader.js +++ b/src/components/MoneyReportHeader.js @@ -5,7 +5,6 @@ import PropTypes from 'prop-types'; import lodashGet from 'lodash/get'; import HeaderWithBackButton from './HeaderWithBackButton'; import iouReportPropTypes from '../pages/iouReportPropTypes'; -import withLocalize, {withLocalizePropTypes} from './withLocalize'; import * as ReportUtils from '../libs/ReportUtils'; import * as Expensicons from './Icon/Expensicons'; import participantPropTypes from './participantPropTypes'; @@ -129,7 +128,6 @@ MoneyReportHeader.defaultProps = defaultProps; export default compose( withWindowDimensions, - withLocalize, withOnyx({ chatReport: { key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT}${report.chatReportID}`, From 885537e8ffd34be05b2c57469e445be8cc7e3c2f Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Thu, 13 Jul 2023 12:05:06 +0100 Subject: [PATCH 18/23] lint --- src/components/MoneyReportHeader.js | 4 +++- src/components/ReportActionItem/MoneyReportView.js | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/MoneyReportHeader.js b/src/components/MoneyReportHeader.js index 440b5afac408..d21260c980b1 100644 --- a/src/components/MoneyReportHeader.js +++ b/src/components/MoneyReportHeader.js @@ -9,7 +9,7 @@ import * as ReportUtils from '../libs/ReportUtils'; import * as Expensicons from './Icon/Expensicons'; import participantPropTypes from './participantPropTypes'; import styles from '../styles/styles'; -import withWindowDimensions from './withWindowDimensions'; +import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions'; import compose from '../libs/compose'; import Navigation from '../libs/Navigation/Navigation'; import ROUTES from '../ROUTES'; @@ -42,6 +42,8 @@ const propTypes = { /** Currently logged in user email */ email: PropTypes.string, }), + + ...windowDimensionsPropTypes, }; const defaultProps = { diff --git a/src/components/ReportActionItem/MoneyReportView.js b/src/components/ReportActionItem/MoneyReportView.js index 189e0146b0a0..bdbcdf84e4d3 100644 --- a/src/components/ReportActionItem/MoneyReportView.js +++ b/src/components/ReportActionItem/MoneyReportView.js @@ -2,7 +2,7 @@ import React from 'react'; import {View, Image} from 'react-native'; import PropTypes from 'prop-types'; import reportPropTypes from '../../pages/reportPropTypes'; -import withWindowDimensions from '../withWindowDimensions'; +import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions'; import compose from '../../libs/compose'; import styles from '../../styles/styles'; import * as ReportUtils from '../../libs/ReportUtils'; @@ -22,6 +22,8 @@ const propTypes = { /** Whether we should display the horizontal rule below the component */ shouldShowHorizontalRule: PropTypes.bool.isRequired, + + ...windowDimensionsPropTypes, }; function MoneyReportView(props) { From a83aa764eb0fc6a1e427e8a939522da6a1e238bc Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Thu, 13 Jul 2023 12:11:34 +0100 Subject: [PATCH 19/23] lint --- src/components/ReportActionItem/MoneyReportView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/MoneyReportView.js b/src/components/ReportActionItem/MoneyReportView.js index bdbcdf84e4d3..86fa96bbd98e 100644 --- a/src/components/ReportActionItem/MoneyReportView.js +++ b/src/components/ReportActionItem/MoneyReportView.js @@ -74,4 +74,4 @@ function MoneyReportView(props) { MoneyReportView.propTypes = propTypes; MoneyReportView.displayName = 'MoneyReportView'; -export default compose(withWindowDimensions)(MoneyReportView); +export default withWindowDimensions(MoneyReportView); From 16408a9d4dba9fa85219b135b99fcf43e36b779e Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Thu, 13 Jul 2023 12:15:52 +0100 Subject: [PATCH 20/23] lint --- src/components/ReportActionItem/MoneyReportView.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/ReportActionItem/MoneyReportView.js b/src/components/ReportActionItem/MoneyReportView.js index 86fa96bbd98e..1920cc79f090 100644 --- a/src/components/ReportActionItem/MoneyReportView.js +++ b/src/components/ReportActionItem/MoneyReportView.js @@ -3,7 +3,6 @@ import {View, Image} from 'react-native'; import PropTypes from 'prop-types'; import reportPropTypes from '../../pages/reportPropTypes'; import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions'; -import compose from '../../libs/compose'; import styles from '../../styles/styles'; import * as ReportUtils from '../../libs/ReportUtils'; import * as StyleUtils from '../../styles/StyleUtils'; From 53a82a0a2d28b21737bc29bcca33fedf300a6222 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Thu, 13 Jul 2023 12:20:49 +0100 Subject: [PATCH 21/23] prettier --- src/components/ReportActionItem/MoneyReportView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/MoneyReportView.js b/src/components/ReportActionItem/MoneyReportView.js index 1920cc79f090..142567ecf6be 100644 --- a/src/components/ReportActionItem/MoneyReportView.js +++ b/src/components/ReportActionItem/MoneyReportView.js @@ -2,7 +2,7 @@ import React from 'react'; import {View, Image} from 'react-native'; import PropTypes from 'prop-types'; import reportPropTypes from '../../pages/reportPropTypes'; -import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions'; +import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions'; import styles from '../../styles/styles'; import * as ReportUtils from '../../libs/ReportUtils'; import * as StyleUtils from '../../styles/StyleUtils'; From 36b6f29a73d1696bf78fb77a4853419a9003774a Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Thu, 13 Jul 2023 17:57:59 +0100 Subject: [PATCH 22/23] Fix IOS spacing and header size --- src/components/MoneyReportHeader.js | 32 +++++++++---------- .../ReportActionItem/MoneyReportView.js | 6 ++-- 2 files changed, 19 insertions(+), 19 deletions(-) diff --git a/src/components/MoneyReportHeader.js b/src/components/MoneyReportHeader.js index d21260c980b1..b03adaac72d2 100644 --- a/src/components/MoneyReportHeader.js +++ b/src/components/MoneyReportHeader.js @@ -66,7 +66,7 @@ function MoneyReportHeader(props) { const {translate} = useLocalize(); return ( - + Navigation.goBack(ROUTES.HOME, false, true)} - shouldShowBorderBottom={!props.isSmallScreenWidth} + shouldShowBorderBottom={!shouldShowSettlementButton || !props.isSmallScreenWidth} > {shouldShowSettlementButton && !props.isSmallScreenWidth && ( @@ -104,22 +104,22 @@ function MoneyReportHeader(props) { )} + {shouldShowSettlementButton && props.isSmallScreenWidth && ( - {shouldShowSettlementButton && props.isSmallScreenWidth && ( - IOU.payMoneyRequest(paymentType, props.chatReport, props.report)} - enablePaymentsRoute={ROUTES.BANK_ACCOUNT_NEW} - addBankAccountRoute={bankAccountRoute} - shouldShowPaymentOptions - formattedAmount={formattedAmount} - /> - )} + IOU.payMoneyRequest(paymentType, props.chatReport, props.report)} + enablePaymentsRoute={ROUTES.BANK_ACCOUNT_NEW} + addBankAccountRoute={bankAccountRoute} + shouldShowPaymentOptions + formattedAmount={formattedAmount} + /> + )} ); } diff --git a/src/components/ReportActionItem/MoneyReportView.js b/src/components/ReportActionItem/MoneyReportView.js index 142567ecf6be..3909f12475b2 100644 --- a/src/components/ReportActionItem/MoneyReportView.js +++ b/src/components/ReportActionItem/MoneyReportView.js @@ -2,7 +2,7 @@ import React from 'react'; import {View, Image} from 'react-native'; import PropTypes from 'prop-types'; import reportPropTypes from '../../pages/reportPropTypes'; -import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions'; +import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions'; import styles from '../../styles/styles'; import * as ReportUtils from '../../libs/ReportUtils'; import * as StyleUtils from '../../styles/StyleUtils'; @@ -31,7 +31,7 @@ function MoneyReportView(props) { const {translate} = useLocalize(); return ( - <> + {props.shouldShowHorizontalRule && } - + ); } From 684c6eedc76af444379d70a0fa230c63facbc0c4 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Thu, 13 Jul 2023 18:02:39 +0100 Subject: [PATCH 23/23] prettier --- src/components/MoneyReportHeader.js | 28 +++++++++---------- .../ReportActionItem/MoneyReportView.js | 2 +- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/src/components/MoneyReportHeader.js b/src/components/MoneyReportHeader.js index b03adaac72d2..696a7656293d 100644 --- a/src/components/MoneyReportHeader.js +++ b/src/components/MoneyReportHeader.js @@ -105,20 +105,20 @@ function MoneyReportHeader(props) { )} {shouldShowSettlementButton && props.isSmallScreenWidth && ( - - IOU.payMoneyRequest(paymentType, props.chatReport, props.report)} - enablePaymentsRoute={ROUTES.BANK_ACCOUNT_NEW} - addBankAccountRoute={bankAccountRoute} - shouldShowPaymentOptions - formattedAmount={formattedAmount} - /> - + + IOU.payMoneyRequest(paymentType, props.chatReport, props.report)} + enablePaymentsRoute={ROUTES.BANK_ACCOUNT_NEW} + addBankAccountRoute={bankAccountRoute} + shouldShowPaymentOptions + formattedAmount={formattedAmount} + /> + )} ); diff --git a/src/components/ReportActionItem/MoneyReportView.js b/src/components/ReportActionItem/MoneyReportView.js index 3909f12475b2..8ed4bfee5089 100644 --- a/src/components/ReportActionItem/MoneyReportView.js +++ b/src/components/ReportActionItem/MoneyReportView.js @@ -2,7 +2,7 @@ import React from 'react'; import {View, Image} from 'react-native'; import PropTypes from 'prop-types'; import reportPropTypes from '../../pages/reportPropTypes'; -import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions'; +import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions'; import styles from '../../styles/styles'; import * as ReportUtils from '../../libs/ReportUtils'; import * as StyleUtils from '../../styles/StyleUtils';