From 59332c6a754b874394212cc716bd6355f27b3cf7 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Mon, 10 Jul 2023 15:16:00 +0100 Subject: [PATCH 01/10] Show View Under Expense Request --- src/pages/home/report/ReportActionItem.js | 21 ++++++++++++++++++++- src/pages/home/report/ReportActionsList.js | 2 +- 2 files changed, 21 insertions(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js index 9c374b130a1b..457a8a67790f 100644 --- a/src/pages/home/report/ReportActionItem.js +++ b/src/pages/home/report/ReportActionItem.js @@ -36,9 +36,9 @@ import SelectionScraper from '../../../libs/SelectionScraper'; import focusTextInputAfterAnimation from '../../../libs/focusTextInputAfterAnimation'; import * as User from '../../../libs/actions/User'; import * as ReportUtils from '../../../libs/ReportUtils'; +import * as ReportActionsUtils from '../../../libs/ReportActionsUtils'; import OfflineWithFeedback from '../../../components/OfflineWithFeedback'; import * as ReportActions from '../../../libs/actions/ReportActions'; -import * as ReportActionsUtils from '../../../libs/ReportActionsUtils'; import reportPropTypes from '../../reportPropTypes'; import {ShowContextMenuContext} from '../../../components/ShowContextMenuContext'; import ChronosOOOListActions from '../../../components/ReportActionItem/ChronosOOOListActions'; @@ -56,6 +56,7 @@ import TaskPreview from '../../../components/ReportActionItem/TaskPreview'; import TaskAction from '../../../components/ReportActionItem/TaskAction'; import TaskView from '../../../components/ReportActionItem/TaskView'; import * as Session from '../../../libs/actions/Session'; +import MoneyRequestView from '../../../components/ReportActionItem/MoneyRequestView'; import {hideContextMenu} from './ContextMenu/ReportActionContextMenu'; const propTypes = { @@ -396,6 +397,15 @@ function ReportActionItem(props) { } if (!props.displayAsGroup) { + const parentReport = ReportActionsUtils.getParentReportAction(props.report); + if (ReportActionsUtils.isTransactionThread(parentReport)) { + return ( + + ); + } return ( + ); + } if (ReportUtils.isTaskReport(props.report)) { return ( { // When the new indicator should not be displayed we explicitly set it to null const shouldDisplayNewMarker = reportAction.reportActionID === newMarkerReportActionID; - const shouldDisplayParentAction = reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED && ReportUtils.isChatThread(report); + const shouldDisplayParentAction = reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED && ReportUtils.isChatThread(report) && !ReportActionsUtils.isTransactionThread(ReportActionsUtils.getParentReportAction(report)); const shouldHideThreadDividerLine = shouldDisplayParentAction && sortedReportActions.length > 1 && sortedReportActions[sortedReportActions.length - 2].reportActionID === newMarkerReportActionID; return shouldDisplayParentAction ? ( From 48f036cdc56054b6f20569fbfaef650e76ee4fed Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Mon, 10 Jul 2023 15:16:56 +0100 Subject: [PATCH 02/10] Add MoneyRequestView --- .../ReportActionItem/MoneyRequestView.js | 145 ++++++++++++++++++ 1 file changed, 145 insertions(+) create mode 100644 src/components/ReportActionItem/MoneyRequestView.js diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js new file mode 100644 index 000000000000..1c280b12a053 --- /dev/null +++ b/src/components/ReportActionItem/MoneyRequestView.js @@ -0,0 +1,145 @@ +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'; + +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 MoneyRequestView(props) { + + const taskTitle = convertToLTR(props.report.reportName || ''); + const isCompleted = ReportUtils.isCompletedTaskReport(props.report); + const isOpen = ReportUtils.isOpenTaskReport(props.report); + const isCanceled = ReportUtils.isCanceledTaskReport(props.report); + + return ( + + { + if (e && e.type === 'click') { + e.currentTarget.blur(); + } + + Navigation.navigate(ROUTES.getTaskReportTitleRoute(props.report.reportID)); + })} + style={({hovered, pressed}) => [styles.ph5, styles.pv2, StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, false, !isOpen), true)]} + ref={props.forwardedRef} + disabled={!isOpen} + accessibilityLabel={taskTitle || props.translate('task.task')} + > + {({hovered, pressed}) => ( + <> + Title + + (isCompleted ? Task.reopenTask(props.report.reportID, taskTitle) : Task.completeTask(props.report.reportID, taskTitle))} + isChecked={isCompleted} + style={styles.taskMenuItemCheckbox} + containerSize={24} + containerBorderRadius={8} + caretSize={16} + accessibilityLabel={taskTitle || props.translate('task.task')} + disabled={isCanceled} + /> + + + {taskTitle} + + + {isOpen && ( + + + + )} + + + )} + + Navigation.navigate(ROUTES.getTaskReportDescriptionRoute(props.report.reportID))} + shouldShowRightIcon={isOpen} + disabled={!isOpen} + wrapperStyle={[styles.pv2]} + numberOfLinesTitle={3} + shouldGreyOutWhenDisabled={false} + /> + {props.report.managerID ? ( + Navigation.navigate(ROUTES.getTaskReportAssigneeRoute(props.report.reportID))} + shouldShowRightIcon={isOpen} + disabled={!isOpen} + wrapperStyle={[styles.pv2]} + isSmallAvatarSubscriptMenu + shouldGreyOutWhenDisabled={false} + /> + ) : ( + Navigation.navigate(ROUTES.getTaskReportAssigneeRoute(props.report.reportID))} + shouldShowRightIcon={isOpen} + disabled={!isOpen} + wrapperStyle={[styles.pv2]} + shouldGreyOutWhenDisabled={false} + /> + )} + + {props.shouldShowHorizontalRule && } + + ); +} + +MoneyRequestView.propTypes = propTypes; +MoneyRequestView.displayName = 'MoneyRequestView'; + +export default compose(withWindowDimensions, withLocalize, withCurrentUserPersonalDetails)(MoneyRequestView); From 9a72f622d1028a9be7f80d010788727969223d18 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Mon, 10 Jul 2023 15:40:48 +0100 Subject: [PATCH 03/10] Show correct information in Request View --- src/components/MoneyRequestHeader.js | 135 ++++------------- .../ReportActionItem/MoneyRequestView.js | 140 +++++++----------- src/pages/home/report/ReportActionItem.js | 9 -- 3 files changed, 81 insertions(+), 203 deletions(-) diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index 23e61490d9a5..cbbddd3c1eed 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -77,7 +77,7 @@ function MoneyRequestHeader(props) { const formattedTransactionDate = DateUtils.getDateStringFromISOTimestamp(transactionDate); const formattedAmount = CurrencyUtils.convertToDisplayString(ReportUtils.getMoneyRequestTotal(props.report), props.report.currency); - const moneyRequestReport = props.isSingleTransactionView ? props.parentReport : props.report; + const moneyRequestReport = props.parentReport; const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID); const isExpenseReport = ReportUtils.isExpenseReport(moneyRequestReport); const payeeName = isExpenseReport ? ReportUtils.getPolicyName(moneyRequestReport, props.policies) : ReportUtils.getDisplayNameForParticipant(moneyRequestReport.managerID); @@ -87,20 +87,17 @@ function MoneyRequestHeader(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 && !props.isSingleTransactionView && isPayer; const bankAccountRoute = ReportUtils.getBankAccountRoute(props.chatReport); const shouldShowPaypal = Boolean(lodashGet(props.personalDetails, [moneyRequestReport.managerID, 'payPalMeAddress'])); const report = props.report; - if (props.isSingleTransactionView) { - report.ownerAccountID = lodashGet(props, ['parentReport', 'ownerAccountID'], null); - report.ownerEmail = lodashGet(props, ['parentReport', 'ownerEmail'], ''); - } + report.ownerAccountID = lodashGet(props, ['parentReport', 'ownerAccountID'], null); + report.ownerEmail = lodashGet(props, ['parentReport', 'ownerEmail'], ''); return ( Navigation.goBack(ROUTES.HOME, false, true)} /> - - {props.translate('common.to')} - - - - - - {payeeName} - - {isExpenseReport && ( - - {props.translate('workspace.common.workspace')} - - )} - - - - {!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 && ( - IOU.payMoneyRequest(paymentType, props.chatReport, props.report)} - enablePaymentsRoute={ROUTES.BANK_ACCOUNT_NEW} - addBankAccountRoute={bankAccountRoute} - shouldShowPaymentOptions - /> - )} - - {props.isSingleTransactionView && ( - <> - Navigation.navigate(ROUTES.getEditRequestRoute(props.report.reportID, CONST.EDIT_REQUEST_FIELD.AMOUNT))} - /> - Navigation.navigate(ROUTES.getEditRequestRoute(props.report.reportID, CONST.EDIT_REQUEST_FIELD.DESCRIPTION))} - /> - Navigation.navigate(ROUTES.getEditRequestRoute(props.report.reportID, CONST.EDIT_REQUEST_FIELD.DATE))} - /> - - )} + <> + Navigation.navigate(ROUTES.getEditRequestRoute(props.report.reportID, CONST.EDIT_REQUEST_FIELD.AMOUNT))} + /> + Navigation.navigate(ROUTES.getEditRequestRoute(props.report.reportID, CONST.EDIT_REQUEST_FIELD.DESCRIPTION))} + /> + Navigation.navigate(ROUTES.getEditRequestRoute(props.report.reportID, CONST.EDIT_REQUEST_FIELD.DATE))} + /> + ); } diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js index 1c280b12a053..f8d612fd91f5 100644 --- a/src/components/ReportActionItem/MoneyRequestView.js +++ b/src/components/ReportActionItem/MoneyRequestView.js @@ -1,7 +1,10 @@ import React, {useEffect} from 'react'; import {View} from 'react-native'; +import {withOnyx} from 'react-native-onyx'; +import lodashGet from 'lodash/get' import PropTypes from 'prop-types'; import reportPropTypes from '../../pages/reportPropTypes'; +import ONYXKEYS from '../../ONYXKEYS'; import withLocalize, {withLocalizePropTypes} from '../withLocalize'; import withWindowDimensions from '../withWindowDimensions'; import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '../withCurrentUserPersonalDetails'; @@ -12,6 +15,7 @@ import MenuItemWithTopDescription from '../MenuItemWithTopDescription'; import MenuItem from '../MenuItem'; import styles from '../../styles/styles'; import * as ReportUtils from '../../libs/ReportUtils'; +import * as ReportActionsUtils from '../../libs/ReportActionsUtils'; import * as PersonalDetailsUtils from '../../libs/PersonalDetailsUtils'; import * as UserUtils from '../../libs/UserUtils'; import * as StyleUtils from '../../styles/StyleUtils'; @@ -25,11 +29,18 @@ import getButtonState from '../../libs/getButtonState'; import PressableWithSecondaryInteraction from '../PressableWithSecondaryInteraction'; import * as Session from '../../libs/actions/Session'; import * as Expensicons from '../Icon/Expensicons'; +import iouReportPropTypes from '../../pages/iouReportPropTypes'; +import DateUtils from '../../libs/DateUtils'; +import * as CurrencyUtils from '../../libs/CurrencyUtils'; const propTypes = { /** The report currently being looked at */ report: reportPropTypes.isRequired, + /** The expense report or iou report (only will have a value if this is a transaction thread) */ + parentReport: iouReportPropTypes, + + /** Whether we should display the horizontal rule below the component */ shouldShowHorizontalRule: PropTypes.bool.isRequired, @@ -39,101 +50,41 @@ const propTypes = { }; function MoneyRequestView(props) { + const parentReportAction = ReportActionsUtils.getParentReportAction(props.report); + const {amount: transactionAmount, currency: transactionCurrency, comment: transactionDescription} = ReportUtils.getMoneyRequestAction(parentReportAction); + const formattedTransactionAmount = transactionAmount && transactionCurrency && CurrencyUtils.convertToDisplayString(transactionAmount, transactionCurrency); + const transactionDate = lodashGet(parentReportAction, ['created']); + const formattedTransactionDate = DateUtils.getDateStringFromISOTimestamp(transactionDate); - const taskTitle = convertToLTR(props.report.reportName || ''); - const isCompleted = ReportUtils.isCompletedTaskReport(props.report); - const isOpen = ReportUtils.isOpenTaskReport(props.report); - const isCanceled = ReportUtils.isCanceledTaskReport(props.report); + const moneyRequestReport = props.parentReport; + const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID); return ( - { - if (e && e.type === 'click') { - e.currentTarget.blur(); - } - - Navigation.navigate(ROUTES.getTaskReportTitleRoute(props.report.reportID)); - })} - style={({hovered, pressed}) => [styles.ph5, styles.pv2, StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, false, !isOpen), true)]} - ref={props.forwardedRef} - disabled={!isOpen} - accessibilityLabel={taskTitle || props.translate('task.task')} - > - {({hovered, pressed}) => ( - <> - Title - - (isCompleted ? Task.reopenTask(props.report.reportID, taskTitle) : Task.completeTask(props.report.reportID, taskTitle))} - isChecked={isCompleted} - style={styles.taskMenuItemCheckbox} - containerSize={24} - containerBorderRadius={8} - caretSize={16} - accessibilityLabel={taskTitle || props.translate('task.task')} - disabled={isCanceled} - /> - - - {taskTitle} - - - {isOpen && ( - - - - )} - - - )} - Navigation.navigate(ROUTES.getTaskReportDescriptionRoute(props.report.reportID))} - shouldShowRightIcon={isOpen} - disabled={!isOpen} - wrapperStyle={[styles.pv2]} - numberOfLinesTitle={3} - shouldGreyOutWhenDisabled={false} + title={formattedTransactionAmount} + shouldShowTitleIcon={isSettled} + titleIcon={Expensicons.Checkmark} + description={`${props.translate('iou.amount')} • ${props.translate('iou.cash')}${isSettled ? ` • ${props.translate('iou.settledExpensify')}` : ''}`} + titleStyle={styles.newKansasLarge} + disabled={isSettled} + // Note: These options are temporarily disabled while we figure out the required API changes + // shouldShowRightIcon={!isSettled} + // onPress={() => Navigation.navigate(ROUTES.getEditRequestRoute(props.report.reportID, CONST.EDIT_REQUEST_FIELD.AMOUNT))} + /> + Navigation.navigate(ROUTES.getEditRequestRoute(props.report.reportID, CONST.EDIT_REQUEST_FIELD.DESCRIPTION))} + /> + Navigation.navigate(ROUTES.getEditRequestRoute(props.report.reportID, CONST.EDIT_REQUEST_FIELD.DATE))} /> - {props.report.managerID ? ( - Navigation.navigate(ROUTES.getTaskReportAssigneeRoute(props.report.reportID))} - shouldShowRightIcon={isOpen} - disabled={!isOpen} - wrapperStyle={[styles.pv2]} - isSmallAvatarSubscriptMenu - shouldGreyOutWhenDisabled={false} - /> - ) : ( - Navigation.navigate(ROUTES.getTaskReportAssigneeRoute(props.report.reportID))} - shouldShowRightIcon={isOpen} - disabled={!isOpen} - wrapperStyle={[styles.pv2]} - shouldGreyOutWhenDisabled={false} - /> - )} - {props.shouldShowHorizontalRule && } ); @@ -142,4 +93,13 @@ function MoneyRequestView(props) { MoneyRequestView.propTypes = propTypes; MoneyRequestView.displayName = 'MoneyRequestView'; -export default compose(withWindowDimensions, withLocalize, withCurrentUserPersonalDetails)(MoneyRequestView); +export default compose( + withWindowDimensions, + withLocalize, + withCurrentUserPersonalDetails, + withOnyx({ + parentReport: { + key: (props) => `${ONYXKEYS.COLLECTION.REPORT}${props.report.parentReportID}`, + }, + }), + )(MoneyRequestView); diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js index 457a8a67790f..757ff71963b3 100644 --- a/src/pages/home/report/ReportActionItem.js +++ b/src/pages/home/report/ReportActionItem.js @@ -397,15 +397,6 @@ function ReportActionItem(props) { } if (!props.displayAsGroup) { - const parentReport = ReportActionsUtils.getParentReportAction(props.report); - if (ReportActionsUtils.isTransactionThread(parentReport)) { - return ( - - ); - } return ( Date: Mon, 10 Jul 2023 16:00:01 +0100 Subject: [PATCH 04/10] Add background image, update header styles --- src/CONST.js | 3 ++ src/components/MoneyRequestHeader.js | 29 +------------- .../ReportActionItem/MoneyRequestView.js | 10 ++++- src/pages/home/ReportScreen.js | 39 +++++++++++-------- 4 files changed, 36 insertions(+), 45 deletions(-) diff --git a/src/CONST.js b/src/CONST.js index 76910d5d8737..fda1fbe742b6 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/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index cbbddd3c1eed..0b9bf736a29b 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -93,7 +93,7 @@ function MoneyRequestHeader(props) { report.ownerAccountID = lodashGet(props, ['parentReport', 'ownerAccountID'], null); report.ownerEmail = lodashGet(props, ['parentReport', 'ownerEmail'], ''); return ( - + Navigation.goBack(ROUTES.HOME, false, true)} + shouldShowBorderBottom /> - <> - Navigation.navigate(ROUTES.getEditRequestRoute(props.report.reportID, CONST.EDIT_REQUEST_FIELD.AMOUNT))} - /> - Navigation.navigate(ROUTES.getEditRequestRoute(props.report.reportID, CONST.EDIT_REQUEST_FIELD.DESCRIPTION))} - /> - Navigation.navigate(ROUTES.getEditRequestRoute(props.report.reportID, CONST.EDIT_REQUEST_FIELD.DATE))} - /> - ); } diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js index f8d612fd91f5..33cb8e0a9dec 100644 --- a/src/components/ReportActionItem/MoneyRequestView.js +++ b/src/components/ReportActionItem/MoneyRequestView.js @@ -1,5 +1,5 @@ import React, {useEffect} from 'react'; -import {View} from 'react-native'; +import {View, Image} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import lodashGet from 'lodash/get' import PropTypes from 'prop-types'; @@ -32,6 +32,7 @@ import * as Expensicons from '../Icon/Expensicons'; import iouReportPropTypes from '../../pages/iouReportPropTypes'; import DateUtils from '../../libs/DateUtils'; import * as CurrencyUtils from '../../libs/CurrencyUtils'; +import EmptyStateBackgroundImage from '../../../assets/images/empty-state_background-fade.png'; const propTypes = { /** The report currently being looked at */ @@ -61,6 +62,13 @@ function MoneyRequestView(props) { return ( + + + Navigation.goBack(ROUTES.HOME, false, true)} + personalDetails={this.props.personalDetails} + report={this.props.report} + /> + ); + + if (isSingleTransactionView) { + 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 24bde2b2f1f22fc9695f477b3272cea3da6b6845 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Tue, 11 Jul 2023 13:35:55 +0100 Subject: [PATCH 05/10] lint --- src/components/MoneyRequestHeader.js | 6 ------ .../ReportActionItem/MoneyRequestView.js | 15 +-------------- 2 files changed, 1 insertion(+), 20 deletions(-) diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index ece5c7732b33..c26a01cc9fe5 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -33,9 +33,6 @@ const propTypes = { /** Personal details so we can get the ones for the report participants */ personalDetails: PropTypes.objectOf(participantPropTypes).isRequired, - /** Whether we're viewing a report with a single transaction in it */ - isSingleTransactionView: PropTypes.bool, - /** Session info for the currently logged in user. */ session: PropTypes.shape({ /** Currently logged in user email */ @@ -46,7 +43,6 @@ const propTypes = { }; const defaultProps = { - isSingleTransactionView: false, session: { email: null, }, @@ -59,8 +55,6 @@ function MoneyRequestHeader(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 bankAccountRoute = ReportUtils.getBankAccountRoute(props.chatReport); - const shouldShowPaypal = Boolean(lodashGet(props.personalDetails, [moneyRequestReport.managerID, 'payPalMeAddress'])); const report = props.report; report.ownerAccountID = lodashGet(props, ['parentReport', 'ownerAccountID'], null); report.ownerEmail = lodashGet(props, ['parentReport', 'ownerEmail'], ''); diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js index 33cb8e0a9dec..7089c2cd835a 100644 --- a/src/components/ReportActionItem/MoneyRequestView.js +++ b/src/components/ReportActionItem/MoneyRequestView.js @@ -1,4 +1,4 @@ -import React, {useEffect} from 'react'; +import React from 'react'; import {View, Image} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import lodashGet from 'lodash/get' @@ -9,25 +9,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 ReportActionsUtils from '../../libs/ReportActionsUtils'; -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 iouReportPropTypes from '../../pages/iouReportPropTypes'; import DateUtils from '../../libs/DateUtils'; From f79fc237fa00454daaeb7cf94f08ff34373819d6 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Tue, 11 Jul 2023 14:14:51 +0100 Subject: [PATCH 06/10] disable pin button --- src/components/MoneyRequestHeader.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index c26a01cc9fe5..a53aa476ff48 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -62,7 +62,7 @@ function MoneyRequestHeader(props) { Date: Tue, 11 Jul 2023 14:53:49 +0100 Subject: [PATCH 07/10] Clean up --- src/components/ReportActionItem/MoneyRequestView.js | 10 +++++++--- src/pages/home/report/ReportActionsList.js | 6 ++++-- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js index 7089c2cd835a..21b8f17494f6 100644 --- a/src/components/ReportActionItem/MoneyRequestView.js +++ b/src/components/ReportActionItem/MoneyRequestView.js @@ -1,7 +1,7 @@ import React from 'react'; import {View, Image} from 'react-native'; import {withOnyx} from 'react-native-onyx'; -import lodashGet from 'lodash/get' +import lodashGet from 'lodash/get'; import PropTypes from 'prop-types'; import reportPropTypes from '../../pages/reportPropTypes'; import ONYXKEYS from '../../ONYXKEYS'; @@ -28,7 +28,6 @@ const propTypes = { /** The expense report or iou report (only will have a value if this is a transaction thread) */ parentReport: iouReportPropTypes, - /** Whether we should display the horizontal rule below the component */ shouldShowHorizontalRule: PropTypes.bool.isRequired, @@ -37,6 +36,10 @@ const propTypes = { ...withCurrentUserPersonalDetailsPropTypes, }; +const defaultProps = { + parentReport: {}, +}; + function MoneyRequestView(props) { const parentReportAction = ReportActionsUtils.getParentReportAction(props.report); const {amount: transactionAmount, currency: transactionCurrency, comment: transactionDescription} = ReportUtils.getMoneyRequestAction(parentReportAction); @@ -86,6 +89,7 @@ function MoneyRequestView(props) { } MoneyRequestView.propTypes = propTypes; +MoneyRequestView.defaultProps = defaultProps; MoneyRequestView.displayName = 'MoneyRequestView'; export default compose( @@ -97,4 +101,4 @@ export default compose( key: (props) => `${ONYXKEYS.COLLECTION.REPORT}${props.report.parentReportID}`, }, }), - )(MoneyRequestView); +)(MoneyRequestView); diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js index 14f56bb0ccc8..d8574e02cbea 100644 --- a/src/pages/home/report/ReportActionsList.js +++ b/src/pages/home/report/ReportActionsList.js @@ -21,7 +21,6 @@ import reportPropTypes from '../../reportPropTypes'; import networkPropTypes from '../../../components/networkPropTypes'; import withLocalize from '../../../components/withLocalize'; import useReportScrollManager from '../../../hooks/useReportScrollManager'; -import MoneyRequestDetails from '../../../components/MoneyRequestDetails'; const propTypes = { /** Position of the "New" line marker */ @@ -126,7 +125,10 @@ function ReportActionsList(props) { ({item: reportAction, index}) => { // When the new indicator should not be displayed we explicitly set it to null const shouldDisplayNewMarker = reportAction.reportActionID === newMarkerReportActionID; - const shouldDisplayParentAction = reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED && ReportUtils.isChatThread(report) && !ReportActionsUtils.isTransactionThread(ReportActionsUtils.getParentReportAction(report)); + const shouldDisplayParentAction = + reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED && + ReportUtils.isChatThread(report) && + !ReportActionsUtils.isTransactionThread(ReportActionsUtils.getParentReportAction(report)); const shouldHideThreadDividerLine = shouldDisplayParentAction && sortedReportActions.length > 1 && sortedReportActions[sortedReportActions.length - 2].reportActionID === newMarkerReportActionID; return shouldDisplayParentAction ? ( From 00b3bd03eeb4e1ae44ae813a92302ac1d372de4b Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Thu, 13 Jul 2023 12:48:40 +0100 Subject: [PATCH 08/10] use localize hook --- src/components/ReportActionItem/MoneyRequestView.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js index 21b8f17494f6..fdcbe8645c5d 100644 --- a/src/components/ReportActionItem/MoneyRequestView.js +++ b/src/components/ReportActionItem/MoneyRequestView.js @@ -5,7 +5,6 @@ import lodashGet from 'lodash/get'; import PropTypes from 'prop-types'; import reportPropTypes from '../../pages/reportPropTypes'; import ONYXKEYS from '../../ONYXKEYS'; -import withLocalize, {withLocalizePropTypes} from '../withLocalize'; import withWindowDimensions from '../withWindowDimensions'; import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '../withCurrentUserPersonalDetails'; import compose from '../../libs/compose'; @@ -20,6 +19,7 @@ import iouReportPropTypes from '../../pages/iouReportPropTypes'; import DateUtils from '../../libs/DateUtils'; 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 */ @@ -31,8 +31,6 @@ const propTypes = { /** Whether we should display the horizontal rule below the component */ shouldShowHorizontalRule: PropTypes.bool.isRequired, - ...withLocalizePropTypes, - ...withCurrentUserPersonalDetailsPropTypes, }; @@ -49,6 +47,7 @@ function MoneyRequestView(props) { const moneyRequestReport = props.parentReport; const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID); + const translate = useLocalize(); return ( @@ -63,7 +62,7 @@ function MoneyRequestView(props) { title={formattedTransactionAmount} shouldShowTitleIcon={isSettled} titleIcon={Expensicons.Checkmark} - description={`${props.translate('iou.amount')} • ${props.translate('iou.cash')}${isSettled ? ` • ${props.translate('iou.settledExpensify')}` : ''}`} + description={`${translate('iou.amount')} • ${translate('iou.cash')}${isSettled ? ` • ${translate('iou.settledExpensify')}` : ''}`} titleStyle={styles.newKansasLarge} disabled={isSettled} // Note: These options are temporarily disabled while we figure out the required API changes @@ -71,14 +70,14 @@ function MoneyRequestView(props) { // onPress={() => Navigation.navigate(ROUTES.getEditRequestRoute(props.report.reportID, CONST.EDIT_REQUEST_FIELD.AMOUNT))} /> Navigation.navigate(ROUTES.getEditRequestRoute(props.report.reportID, CONST.EDIT_REQUEST_FIELD.DESCRIPTION))} /> Navigation.navigate(ROUTES.getEditRequestRoute(props.report.reportID, CONST.EDIT_REQUEST_FIELD.DATE))} @@ -94,7 +93,6 @@ MoneyRequestView.displayName = 'MoneyRequestView'; export default compose( withWindowDimensions, - withLocalize, withCurrentUserPersonalDetails, withOnyx({ parentReport: { From 97f0093b1b883aaae3b101f0e249515f6181cf6a Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Thu, 13 Jul 2023 17:48:03 +0100 Subject: [PATCH 09/10] fix localize --- src/components/ReportActionItem/MoneyRequestView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js index fdcbe8645c5d..acf0fde8d4e7 100644 --- a/src/components/ReportActionItem/MoneyRequestView.js +++ b/src/components/ReportActionItem/MoneyRequestView.js @@ -47,7 +47,7 @@ function MoneyRequestView(props) { const moneyRequestReport = props.parentReport; const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID); - const translate = useLocalize(); + const {translate} = useLocalize(); return ( From b9d2df8551eea2b533ed29c61678e8be83c091a7 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Mon, 17 Jul 2023 10:44:20 +0100 Subject: [PATCH 10/10] style was renamed --- src/components/ReportActionItem/MoneyRequestView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js index acf0fde8d4e7..06cb6465fccd 100644 --- a/src/components/ReportActionItem/MoneyRequestView.js +++ b/src/components/ReportActionItem/MoneyRequestView.js @@ -82,7 +82,7 @@ function MoneyRequestView(props) { // shouldShowRightIcon={!isSettled} // onPress={() => Navigation.navigate(ROUTES.getEditRequestRoute(props.report.reportID, CONST.EDIT_REQUEST_FIELD.DATE))} /> - {props.shouldShowHorizontalRule && } + {props.shouldShowHorizontalRule && } ); }