From 780477c067a00c8b2224671bf8fce05205a8c170 Mon Sep 17 00:00:00 2001 From: Pierre Michel Date: Mon, 12 Jun 2023 06:53:22 -0600 Subject: [PATCH 01/17] Make part of MoneyRequestHeader scrollable, the top of the header stays fixed, the other part is moved as a footer of the InvertedFlatList which makes it a header Signed-off-by: Pierre Michel --- src/components/MoneyRequestHeader.js | 36 ++---- src/components/MoneyRequestTopHeader.js | 121 +++++++++++++++++++++ src/pages/home/ReportScreen.js | 4 +- src/pages/home/report/ReportActionsList.js | 30 ++++- src/pages/home/report/ReportActionsView.js | 1 + src/styles/styles.js | 4 + src/styles/utilities/spacing.js | 4 + 7 files changed, 170 insertions(+), 30 deletions(-) create mode 100644 src/components/MoneyRequestTopHeader.js diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index 600a96aede18..7df7fd3f42c0 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -36,11 +36,14 @@ const propTypes = { /** 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 */ + /** The policy object for the current route */ + policy: PropTypes.shape({ + /** The name of the policy */ name: PropTypes.string, - }).isRequired, + + /** The URL for the policy avatar */ + avatar: PropTypes.string, + }), /** The chat report this report is linked to */ chatReport: reportPropTypes, @@ -80,37 +83,18 @@ const MoneyRequestHeader = (props) => { const moneyRequestReport = props.isSingleTransactionView ? props.parentReport : props.report; const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID); const isExpenseReport = ReportUtils.isExpenseReport(moneyRequestReport); - const payeeName = isExpenseReport ? ReportUtils.getPolicyName(moneyRequestReport, props.policies) : ReportUtils.getDisplayNameForParticipant(moneyRequestReport.managerEmail); + const payeeName = isExpenseReport ? ReportUtils.getPolicyName(moneyRequestReport) : ReportUtils.getDisplayNameForParticipant(moneyRequestReport.managerEmail); const payeeAvatar = isExpenseReport ? ReportUtils.getWorkspaceAvatar(moneyRequestReport) : UserUtils.getAvatar(lodashGet(props.personalDetails, [moneyRequestReport.managerEmail, 'avatar']), moneyRequestReport.managerEmail); - const policy = props.policies[`${ONYXKEYS.COLLECTION.POLICY}${props.report.policyID}`]; + const isPayer = - Policy.isAdminOfFreePolicy([policy]) || (ReportUtils.isMoneyRequestReport(moneyRequestReport) && lodashGet(props.session, 'email', null) === moneyRequestReport.managerEmail); + Policy.isAdminOfFreePolicy([props.policy]) || (ReportUtils.isMoneyRequestReport(moneyRequestReport) && lodashGet(props.session, 'email', null) === moneyRequestReport.managerEmail); const shouldShowSettlementButton = !isSettled && !props.isSingleTransactionView && isPayer; const bankAccountRoute = ReportUtils.getBankAccountRoute(props.chatReport); const shouldShowPaypal = Boolean(lodashGet(props.personalDetails, [moneyRequestReport.managerEmail, 'payPalMeAddress'])); return ( - {}, - }, - ]} - threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(props.windowWidth)} - report={props.report} - parentReport={moneyRequestReport} - policies={props.policies} - personalDetails={props.personalDetails} - shouldShowBackButton={props.isSmallScreenWidth} - onBackButtonPress={() => Navigation.goBack(ROUTES.HOME)} - /> {props.translate('common.to')} diff --git a/src/components/MoneyRequestTopHeader.js b/src/components/MoneyRequestTopHeader.js new file mode 100644 index 000000000000..5513775089d8 --- /dev/null +++ b/src/components/MoneyRequestTopHeader.js @@ -0,0 +1,121 @@ +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 */ + policies: PropTypes.objectOf( + PropTypes.shape({ + /** The policy name */ + name: PropTypes.string, + + /** The type of the policy */ + type: PropTypes.string, + }), + ), + + + /** 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 */ + email: PropTypes.string, + }), + + ...withLocalizePropTypes, +}; + +const defaultProps = { + isSingleTransactionView: false, + session: { + email: null, + }, + parentReport: {}, +}; + +const MoneyRequestTopHeader = (props) => { + const moneyRequestReport = props.isSingleTransactionView ? props.parentReport : 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, 'email', null) === moneyRequestReport.managerEmail); + return ( + + + {}, + }, + ]} + threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(props.windowWidth)} + report={props.report} + parentReport={moneyRequestReport} + policies={props.policies} + personalDetails={props.personalDetails} + shouldShowBackButton={props.isSmallScreenWidth} + onBackButtonPress={() => Navigation.goBack(ROUTES.HOME)} + /> + + ); +}; + +MoneyRequestTopHeader.displayName = 'MoneyRequestTopHeader'; +MoneyRequestTopHeader.propTypes = propTypes; +MoneyRequestTopHeader.defaultProps = defaultProps; + +export default compose( + withWindowDimensions, + withLocalize, + withOnyx({ + session: { + key: ONYXKEYS.SESSION, + }, + parentReport: { + key: (props) => `${ONYXKEYS.COLLECTION.REPORT}${props.report.parentReportID}`, + }, + }), +)(MoneyRequestTopHeader); diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index 652ea5eb5d2c..5fa8c622c665 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -36,7 +36,7 @@ import getIsReportFullyVisible from '../../libs/getIsReportFullyVisible'; import EmojiPicker from '../../components/EmojiPicker/EmojiPicker'; import * as EmojiPickerAction from '../../libs/actions/EmojiPickerAction'; import TaskHeader from '../../components/TaskHeader'; -import MoneyRequestHeader from '../../components/MoneyRequestHeader'; +import MoneyRequestTopHeader from '../../components/MoneyRequestTopHeader'; import withNavigation, {withNavigationPropTypes} from '../../components/withNavigation'; import * as ComposerActions from '../../libs/actions/Composer'; @@ -263,7 +263,7 @@ class ReportScreen extends React.Component { shouldShowErrorMessages={false} > {ReportUtils.isMoneyRequestReport(this.props.report) || isSingleTransactionView ? ( - { // To notify there something changes we can use extraData prop to flatlist const extraData = [props.isSmallScreenWidth ? props.newMarkerReportActionID : undefined, ReportUtils.isArchivedRoom(props.report)]; const shouldShowReportRecipientLocalTime = ReportUtils.canShowReportRecipientLocalTime(props.personalDetails, props.report, props.currentUserPersonalDetails.login); + + const parentReportAction = ReportActionsUtils.getParentReportAction(props.report); + const isSingleTransactionView = ReportActionsUtils.isTransactionThread(parentReportAction); + const showMoneyRequestHeader = ReportUtils.isMoneyRequestReport(props.report) || isSingleTransactionView; return ( { ref={ReportScrollManager.flatListRef} data={props.sortedReportActions} renderItem={renderItem} - contentContainerStyle={[styles.chatContentScrollView, shouldShowReportRecipientLocalTime && styles.pt0]} + contentContainerStyle={[styles.chatContentScrollView, shouldShowReportRecipientLocalTime && styles.pt0, showMoneyRequestHeader && styles.pb0]} keyExtractor={keyExtractor} initialRowHeight={32} initialNumToRender={calculateInitialNumToRender()} onEndReached={props.loadMoreChats} onEndReachedThreshold={0.75} + ListFooterComponentStyle={showMoneyRequestHeader && styles.chatFooterAtTheTop} + ListFooterComponent={() => { if (props.report.isLoadingMoreReportActions) { return ; @@ -178,7 +194,17 @@ const ReportActionsList = (props) => { /> ); } - + if(showMoneyRequestHeader) { + return ( + + ); + } return null; }} keyboardShouldPersistTaps="handled" diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js index 6c7cf10da781..ce377f4ecf1d 100755 --- a/src/pages/home/report/ReportActionsView.js +++ b/src/pages/home/report/ReportActionsView.js @@ -352,6 +352,7 @@ class ReportActionsView extends React.Component { isLoadingMoreReportActions={this.props.report.isLoadingMoreReportActions} loadMoreChats={this.loadMoreChats} newMarkerReportActionID={this.state.newMarkerReportActionID} + policy={this.props.policy} /> Date: Tue, 20 Jun 2023 08:53:41 -0600 Subject: [PATCH 02/17] ListFooterComponentStyle was overwritten so the header was at the bottom Signed-off-by: Pierre Michel --- src/components/InvertedFlatList/index.android.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/InvertedFlatList/index.android.js b/src/components/InvertedFlatList/index.android.js index 287a5975df9f..812267c1ed08 100644 --- a/src/components/InvertedFlatList/index.android.js +++ b/src/components/InvertedFlatList/index.android.js @@ -19,7 +19,7 @@ export default forwardRef((props, ref) => ( // Manually invert the FlatList to circumvent a react-native bug that causes ANR (application not responding) on android 13 inverted={false} style={styles.invert} - ListFooterComponentStyle={styles.invert} + ListFooterComponentStyle={[styles.invert, props.ListFooterComponentStyle]} verticalScrollbarPosition="left" // We are mirroring the X and Y axis, so we need to swap the scrollbar position CellRendererComponent={InvertedCell} /> From 367261d85b4bc08febcdbf392ef7706d2d817fa6 Mon Sep 17 00:00:00 2001 From: Pierre Michel Date: Tue, 20 Jun 2023 09:59:32 -0600 Subject: [PATCH 03/17] Merge was wrong, it looks like we use the Id now instead of the email Signed-off-by: Pierre Michel --- 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 f792fc9bf589..aadd716d0ae8 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -83,7 +83,7 @@ function MoneyRequestHeader(props) { const moneyRequestReport = props.isSingleTransactionView ? props.parentReport : props.report; const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID); const isExpenseReport = ReportUtils.isExpenseReport(moneyRequestReport); - const payeeName = isExpenseReport ? ReportUtils.getPolicyName(moneyRequestReport) : ReportUtils.getDisplayNameForParticipant(moneyRequestReport.managerEmail); + const payeeName = isExpenseReport ? ReportUtils.getPolicyName(moneyRequestReport) : ReportUtils.getDisplayNameForParticipant(moneyRequestReport.managerID); const payeeAvatar = isExpenseReport ? ReportUtils.getWorkspaceAvatar(moneyRequestReport) : UserUtils.getAvatar(lodashGet(props.personalDetails, [moneyRequestReport.managerID, 'avatar']), moneyRequestReport.managerID); From 7bab3f14cc86ed9f111fd5afc91490d566958e79 Mon Sep 17 00:00:00 2001 From: Pierre Michel Date: Thu, 29 Jun 2023 17:08:24 -0600 Subject: [PATCH 04/17] Another problem with the merge, we use the id now Signed-off-by: Pierre Michel --- 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 aadd716d0ae8..b6aeb3e1386e 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -88,7 +88,7 @@ function MoneyRequestHeader(props) { ? ReportUtils.getWorkspaceAvatar(moneyRequestReport) : UserUtils.getAvatar(lodashGet(props.personalDetails, [moneyRequestReport.managerID, 'avatar']), moneyRequestReport.managerID); const isPayer = - Policy.isAdminOfFreePolicy([props.policy]) || (ReportUtils.isMoneyRequestReport(moneyRequestReport) && lodashGet(props.session, 'email', null) === moneyRequestReport.managerEmail); + Policy.isAdminOfFreePolicy([props.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'])); From f60c83c4be9e240d6e5aea9c4994b6dcd8d7fcac Mon Sep 17 00:00:00 2001 From: Pierre Michel Date: Thu, 29 Jun 2023 17:28:13 -0600 Subject: [PATCH 05/17] Changing names of files Signed-off-by: Pierre Michel --- src/components/MoneyRequestDetails.js | 215 +++++++++++++++++++++ src/components/MoneyRequestHeader.js | 160 ++++----------- src/components/MoneyRequestTopHeader.js | 121 ------------ src/pages/home/ReportScreen.js | 2 +- src/pages/home/report/ReportActionsList.js | 12 +- 5 files changed, 255 insertions(+), 255 deletions(-) create mode 100644 src/components/MoneyRequestDetails.js delete mode 100644 src/components/MoneyRequestTopHeader.js diff --git a/src/components/MoneyRequestDetails.js b/src/components/MoneyRequestDetails.js new file mode 100644 index 000000000000..d79fefabdf42 --- /dev/null +++ b/src/components/MoneyRequestDetails.js @@ -0,0 +1,215 @@ +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 policy object for the current route */ + policy: PropTypes.shape({ + /** The name of the policy */ + name: PropTypes.string, + + /** The URL for the policy avatar */ + avatar: PropTypes.string, + }), + + /** 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, + + /** 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 */ + email: PropTypes.string, + }), + + ...withLocalizePropTypes, +}; + +const defaultProps = { + isSingleTransactionView: false, + chatReport: {}, + session: { + email: null, + }, + parentReport: {}, +}; + +function MoneyRequestHeader(props) { + // These are only used for the single transaction view and not for expense and iou reports + const {amount: transactionAmount, currency: transactionCurrency, comment: transactionDescription} = ReportUtils.getMoneyRequestAction(props.parentReportAction); + const formattedTransactionAmount = transactionAmount && transactionCurrency && CurrencyUtils.convertToDisplayString(transactionAmount, transactionCurrency); + const transactionDate = lodashGet(props.parentReportAction, ['created']); + 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 isSettled = ReportUtils.isSettled(moneyRequestReport.reportID); + const isExpenseReport = ReportUtils.isExpenseReport(moneyRequestReport); + const payeeName = isExpenseReport ? ReportUtils.getPolicyName(moneyRequestReport) : ReportUtils.getDisplayNameForParticipant(moneyRequestReport.managerID); + const payeeAvatar = isExpenseReport + ? ReportUtils.getWorkspaceAvatar(moneyRequestReport) + : UserUtils.getAvatar(lodashGet(props.personalDetails, [moneyRequestReport.managerID, 'avatar']), moneyRequestReport.managerID); + const isPayer = + Policy.isAdminOfFreePolicy([props.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'])); + return ( + + + {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))} + /> + + )} + + ); +} + +MoneyRequestHeader.displayName = 'MoneyRequestHeader'; +MoneyRequestHeader.propTypes = propTypes; +MoneyRequestHeader.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}`, + }, + }), +)(MoneyRequestHeader); diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index d79fefabdf42..ca755431ad03 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -36,17 +36,17 @@ const propTypes = { /** The expense report or iou report (only will have a value if this is a transaction thread) */ parentReport: iouReportPropTypes, - /** The policy object for the current route */ - policy: PropTypes.shape({ - /** The name of the policy */ - name: PropTypes.string, + /** The policies which the user has access to */ + policies: PropTypes.objectOf( + PropTypes.shape({ + /** The policy name */ + name: PropTypes.string, - /** The URL for the policy avatar */ - avatar: PropTypes.string, - }), + /** The type of the policy */ + type: PropTypes.string, + }), + ), - /** 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, @@ -65,134 +65,43 @@ const propTypes = { const defaultProps = { isSingleTransactionView: false, - chatReport: {}, session: { email: null, }, parentReport: {}, }; -function MoneyRequestHeader(props) { - // These are only used for the single transaction view and not for expense and iou reports - const {amount: transactionAmount, currency: transactionCurrency, comment: transactionDescription} = ReportUtils.getMoneyRequestAction(props.parentReportAction); - const formattedTransactionAmount = transactionAmount && transactionCurrency && CurrencyUtils.convertToDisplayString(transactionAmount, transactionCurrency); - const transactionDate = lodashGet(props.parentReportAction, ['created']); - const formattedTransactionDate = DateUtils.getDateStringFromISOTimestamp(transactionDate); - - const formattedAmount = CurrencyUtils.convertToDisplayString(ReportUtils.getMoneyRequestTotal(props.report), props.report.currency); +const MoneyRequestHeader = (props) => { const moneyRequestReport = props.isSingleTransactionView ? props.parentReport : props.report; const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID); - const isExpenseReport = ReportUtils.isExpenseReport(moneyRequestReport); - const payeeName = isExpenseReport ? ReportUtils.getPolicyName(moneyRequestReport) : ReportUtils.getDisplayNameForParticipant(moneyRequestReport.managerID); - const payeeAvatar = isExpenseReport - ? ReportUtils.getWorkspaceAvatar(moneyRequestReport) - : UserUtils.getAvatar(lodashGet(props.personalDetails, [moneyRequestReport.managerID, 'avatar']), moneyRequestReport.managerID); + const policy = props.policies[`${ONYXKEYS.COLLECTION.POLICY}${props.report.policyID}`]; const isPayer = - Policy.isAdminOfFreePolicy([props.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'])); + Policy.isAdminOfFreePolicy([policy]) || (ReportUtils.isMoneyRequestReport(moneyRequestReport) && lodashGet(props.session, 'email', null) === moneyRequestReport.managerEmail); return ( - - {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))} - /> - - )} + + {}, + }, + ]} + threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(props.windowWidth)} + report={props.report} + parentReport={moneyRequestReport} + policies={props.policies} + personalDetails={props.personalDetails} + shouldShowBackButton={props.isSmallScreenWidth} + onBackButtonPress={() => Navigation.goBack(ROUTES.HOME)} + /> ); -} +}; MoneyRequestHeader.displayName = 'MoneyRequestHeader'; MoneyRequestHeader.propTypes = propTypes; @@ -202,9 +111,6 @@ export default compose( withWindowDimensions, withLocalize, withOnyx({ - chatReport: { - key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT}${report.chatReportID}`, - }, session: { key: ONYXKEYS.SESSION, }, diff --git a/src/components/MoneyRequestTopHeader.js b/src/components/MoneyRequestTopHeader.js deleted file mode 100644 index 5513775089d8..000000000000 --- a/src/components/MoneyRequestTopHeader.js +++ /dev/null @@ -1,121 +0,0 @@ -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 */ - policies: PropTypes.objectOf( - PropTypes.shape({ - /** The policy name */ - name: PropTypes.string, - - /** The type of the policy */ - type: PropTypes.string, - }), - ), - - - /** 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 */ - email: PropTypes.string, - }), - - ...withLocalizePropTypes, -}; - -const defaultProps = { - isSingleTransactionView: false, - session: { - email: null, - }, - parentReport: {}, -}; - -const MoneyRequestTopHeader = (props) => { - const moneyRequestReport = props.isSingleTransactionView ? props.parentReport : 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, 'email', null) === moneyRequestReport.managerEmail); - return ( - - - {}, - }, - ]} - threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(props.windowWidth)} - report={props.report} - parentReport={moneyRequestReport} - policies={props.policies} - personalDetails={props.personalDetails} - shouldShowBackButton={props.isSmallScreenWidth} - onBackButtonPress={() => Navigation.goBack(ROUTES.HOME)} - /> - - ); -}; - -MoneyRequestTopHeader.displayName = 'MoneyRequestTopHeader'; -MoneyRequestTopHeader.propTypes = propTypes; -MoneyRequestTopHeader.defaultProps = defaultProps; - -export default compose( - withWindowDimensions, - withLocalize, - withOnyx({ - session: { - key: ONYXKEYS.SESSION, - }, - parentReport: { - key: (props) => `${ONYXKEYS.COLLECTION.REPORT}${props.report.parentReportID}`, - }, - }), -)(MoneyRequestTopHeader); diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index f227012cbb28..384e7bf948df 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -36,7 +36,7 @@ import getIsReportFullyVisible from '../../libs/getIsReportFullyVisible'; import EmojiPicker from '../../components/EmojiPicker/EmojiPicker'; import * as EmojiPickerAction from '../../libs/actions/EmojiPickerAction'; import TaskHeader from '../../components/TaskHeader'; -import MoneyRequestTopHeader from '../../components/MoneyRequestTopHeader'; +import MoneyRequestHeader from '../../components/MoneyRequestHeader'; import withNavigation, {withNavigationPropTypes} from '../../components/withNavigation'; import * as ComposerActions from '../../libs/actions/Composer'; import ReportScreenContext from './ReportScreenContext'; diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js index 6b77fe5d6c10..cf74e6e51581 100644 --- a/src/pages/home/report/ReportActionsList.js +++ b/src/pages/home/report/ReportActionsList.js @@ -21,7 +21,7 @@ import reportPropTypes from '../../reportPropTypes'; import networkPropTypes from '../../../components/networkPropTypes'; import withLocalize from '../../../components/withLocalize'; import useReportScrollManager from '../../../hooks/useReportScrollManager'; -import MoneyRequestHeader from '../../../components/MoneyRequestHeader'; +import MoneyRequestDetails from '../../../components/MoneyRequestDetails'; const propTypes = { /** Position of the "New" line marker */ @@ -162,7 +162,7 @@ function ReportActionsList(props) { const parentReportAction = ReportActionsUtils.getParentReportAction(props.report); const isSingleTransactionView = ReportActionsUtils.isTransactionThread(parentReportAction); - const showMoneyRequestHeader = ReportUtils.isMoneyRequestReport(props.report) || isSingleTransactionView; + const showMoneyRequestDetails = ReportUtils.isMoneyRequestReport(props.report) || isSingleTransactionView; return ( { if (props.report.isLoadingMoreReportActions) { @@ -195,9 +195,9 @@ function ReportActionsList(props) { /> ); } - if(showMoneyRequestHeader) { + if(showMoneyRequestDetails) { return ( - Date: Thu, 29 Jun 2023 17:45:25 -0600 Subject: [PATCH 06/17] Fix problem with merging Signed-off-by: Pierre Michel --- src/pages/home/ReportScreen.js | 2 +- src/pages/home/report/ReportActionsView.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index 384e7bf948df..de274b0591c7 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -348,7 +348,7 @@ class ReportScreen extends React.Component { report={this.props.report} isComposerFullSize={this.props.isComposerFullSize} onSubmitComment={this.onSubmitComment} - policies={this.props.policies} + policy={policy} /> )} diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js index cad34e5aa58b..b4a19554f9d8 100755 --- a/src/pages/home/report/ReportActionsView.js +++ b/src/pages/home/report/ReportActionsView.js @@ -353,7 +353,7 @@ class ReportActionsView extends React.Component { isLoadingMoreReportActions={this.props.report.isLoadingMoreReportActions} loadMoreChats={this.loadMoreChats} newMarkerReportActionID={this.state.newMarkerReportActionID} - policy={this.props.policy} + policy={this.props.policy} /> Date: Thu, 29 Jun 2023 17:54:35 -0600 Subject: [PATCH 07/17] Fixing the merge again Signed-off-by: Pierre Michel --- src/pages/home/ReportScreen.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index de274b0591c7..b97c14b5106f 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -328,7 +328,7 @@ class ReportScreen extends React.Component { report={this.props.report} isComposerFullSize={this.props.isComposerFullSize} parentViewHeight={this.state.skeletonViewContainerHeight} - policies={this.props.policies} + policy={policy} /> )} @@ -348,7 +348,7 @@ class ReportScreen extends React.Component { report={this.props.report} isComposerFullSize={this.props.isComposerFullSize} onSubmitComment={this.onSubmitComment} - policy={policy} + policies={this.props.policies} /> )} From 1c0af6e3efd0d977ad74a19317d6245e74aab6ea Mon Sep 17 00:00:00 2001 From: Pierre Michel Date: Thu, 29 Jun 2023 17:59:12 -0600 Subject: [PATCH 08/17] I changed that but I don't know why so I changed it back Signed-off-by: Pierre Michel --- src/components/MoneyRequestHeader.js | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index ca755431ad03..487579e732c9 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -36,17 +36,11 @@ const propTypes = { /** 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 */ - policies: PropTypes.objectOf( - PropTypes.shape({ - /** The policy name */ - name: PropTypes.string, - - /** The type of the policy */ - type: PropTypes.string, - }), - ), - + /** 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, /** Personal details so we can get the ones for the report participants */ personalDetails: PropTypes.objectOf(participantPropTypes).isRequired, From 6b961a1963df63272e0f06c43442bed191ac013a Mon Sep 17 00:00:00 2001 From: Pierre Michel Date: Thu, 29 Jun 2023 18:25:40 -0600 Subject: [PATCH 09/17] Correct one lint error Signed-off-by: Pierre Michel --- src/pages/home/report/ReportActionsList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js index cf74e6e51581..f9e62d17e691 100644 --- a/src/pages/home/report/ReportActionsList.js +++ b/src/pages/home/report/ReportActionsList.js @@ -195,7 +195,7 @@ function ReportActionsList(props) { /> ); } - if(showMoneyRequestDetails) { + if (showMoneyRequestDetails) { return ( Date: Thu, 29 Jun 2023 18:56:54 -0600 Subject: [PATCH 10/17] Correct Lint errors Signed-off-by: Pierre Michel --- src/components/InvertedFlatList/index.android.js | 10 ++++++++++ src/components/MoneyRequestDetails.js | 13 ++++++------- src/components/MoneyRequestHeader.js | 6 ------ 3 files changed, 16 insertions(+), 13 deletions(-) diff --git a/src/components/InvertedFlatList/index.android.js b/src/components/InvertedFlatList/index.android.js index a7f86c808c1a..ada6670acc40 100644 --- a/src/components/InvertedFlatList/index.android.js +++ b/src/components/InvertedFlatList/index.android.js @@ -2,6 +2,16 @@ import React, {forwardRef} from 'react'; import {View} from 'react-native'; import BaseInvertedFlatList from './BaseInvertedFlatList'; import styles from '../../styles/styles'; +import PropTypes from 'prop-types'; +import stylePropTypes from '../../styles/stylePropTypes'; + +const propTypes = { + ListFooterComponentStyle: stylePropTypes, +}; + +const defaultProps = { + ListFooterComponentStyle: {}, +}; function InvertedCell(props) { return ( diff --git a/src/components/MoneyRequestDetails.js b/src/components/MoneyRequestDetails.js index d79fefabdf42..6a15ac571d87 100644 --- a/src/components/MoneyRequestDetails.js +++ b/src/components/MoneyRequestDetails.js @@ -3,7 +3,6 @@ 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'; @@ -16,7 +15,6 @@ 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'; @@ -70,9 +68,10 @@ const defaultProps = { email: null, }, parentReport: {}, + policy: null, }; -function MoneyRequestHeader(props) { +function MoneyRequestDetails(props) { // These are only used for the single transaction view and not for expense and iou reports const {amount: transactionAmount, currency: transactionCurrency, comment: transactionDescription} = ReportUtils.getMoneyRequestAction(props.parentReportAction); const formattedTransactionAmount = transactionAmount && transactionCurrency && CurrencyUtils.convertToDisplayString(transactionAmount, transactionCurrency); @@ -194,9 +193,9 @@ function MoneyRequestHeader(props) { ); } -MoneyRequestHeader.displayName = 'MoneyRequestHeader'; -MoneyRequestHeader.propTypes = propTypes; -MoneyRequestHeader.defaultProps = defaultProps; +MoneyRequestDetails.displayName = 'MoneyRequestDetails'; +MoneyRequestDetails.propTypes = propTypes; +MoneyRequestDetails.defaultProps = defaultProps; export default compose( withWindowDimensions, @@ -212,4 +211,4 @@ export default compose( key: (props) => `${ONYXKEYS.COLLECTION.REPORT}${props.report.parentReportID}`, }, }), -)(MoneyRequestHeader); +)(MoneyRequestDetails); diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index 487579e732c9..1a031129c6bc 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -8,21 +8,15 @@ 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'; From 8e1432a3a1d0bc3fded1f96fba25a50cef7d65ad Mon Sep 17 00:00:00 2001 From: Pierre Michel Date: Thu, 29 Jun 2023 19:47:03 -0600 Subject: [PATCH 11/17] just to fix lint errors, for the props validation Signed-off-by: Pierre Michel --- .../InvertedFlatList/index.android.js | 56 +++++++++++++++---- src/components/MoneyRequestHeader.js | 11 +--- 2 files changed, 49 insertions(+), 18 deletions(-) diff --git a/src/components/InvertedFlatList/index.android.js b/src/components/InvertedFlatList/index.android.js index ada6670acc40..baf46c3f001a 100644 --- a/src/components/InvertedFlatList/index.android.js +++ b/src/components/InvertedFlatList/index.android.js @@ -1,11 +1,18 @@ import React, {forwardRef} from 'react'; -import {View} from 'react-native'; +import {View, FlatList} from 'react-native'; +import PropTypes from 'prop-types'; +import _ from 'underscore'; import BaseInvertedFlatList from './BaseInvertedFlatList'; import styles from '../../styles/styles'; -import PropTypes from 'prop-types'; import stylePropTypes from '../../styles/stylePropTypes'; const propTypes = { + /** Passed via forwardRef so we can access the FlatList ref */ + innerRef: PropTypes.shape({ + current: PropTypes.instanceOf(FlatList), + }).isRequired, + + /** The style of the footer of the list */ ListFooterComponentStyle: stylePropTypes, }; @@ -23,16 +30,45 @@ function InvertedCell(props) { ); } +class InvertedFlatList extends React.Component { + constructor(props) { + super(props); + + this.list = undefined; + } + + componentDidMount() { + if (!_.isFunction(this.props.innerRef)) { + // eslint-disable-next-line no-param-reassign + this.props.innerRef.current = this.list; + } else { + this.props.innerRef(this.list); + } + } + + render() { + return ( + (this.list = el)} + // Manually invert the FlatList to circumvent a react-native bug that causes ANR (application not responding) on android 13 + inverted={false} + style={styles.invert} + ListFooterComponentStyle={[styles.invert, this.props.ListFooterComponentStyle]} + verticalScrollbarPosition="left" // We are mirroring the X and Y axis, so we need to swap the scrollbar position + CellRendererComponent={InvertedCell} + /> + ); + } +} +InvertedFlatList.propTypes = propTypes; +InvertedFlatList.defaultProps = defaultProps; + export default forwardRef((props, ref) => ( - )); diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index 1a031129c6bc..b9dc10695f46 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -17,11 +17,6 @@ import Navigation from '../libs/Navigation/Navigation'; import ROUTES from '../ROUTES'; import * as Policy from '../libs/actions/Policy'; import ONYXKEYS from '../ONYXKEYS'; -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 */ @@ -59,12 +54,12 @@ const defaultProps = { parentReport: {}, }; -const MoneyRequestHeader = (props) => { +function MoneyRequestHeader(props) { const moneyRequestReport = props.isSingleTransactionView ? props.parentReport : 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, 'email', null) === moneyRequestReport.managerEmail); + Policy.isAdminOfFreePolicy([policy]) || (ReportUtils.isMoneyRequestReport(moneyRequestReport) && lodashGet(props.session, 'email', null) === moneyRequestReport.managerEmail); return ( @@ -89,7 +84,7 @@ const MoneyRequestHeader = (props) => { /> ); -}; +} MoneyRequestHeader.displayName = 'MoneyRequestHeader'; MoneyRequestHeader.propTypes = propTypes; From 837f69072e3af7139f6f139c312e703dc296afc7 Mon Sep 17 00:00:00 2001 From: Pierre Michel Date: Fri, 30 Jun 2023 02:40:58 -0600 Subject: [PATCH 12/17] Try with former lint version because new one seem to bug Signed-off-by: Pierre Michel --- .github/actionlint.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/actionlint.yaml b/.github/actionlint.yaml index 9a314079362c..d2a8b4a0b9b5 100644 --- a/.github/actionlint.yaml +++ b/.github/actionlint.yaml @@ -1,5 +1,5 @@ # See https://github.com/rhysd/actionlint/blob/main/docs/config.md self-hosted-runner: labels: - - ubuntu-latest-xl + - ubuntu-20.04-64core - macos-12-xl From 61985bc5e2cb9da271e81b47825bebe846b284ce Mon Sep 17 00:00:00 2001 From: Pierre Michel Date: Fri, 30 Jun 2023 03:00:48 -0600 Subject: [PATCH 13/17] After run prettier Signed-off-by: Pierre Michel --- src/components/MoneyRequestHeader.js | 41 +++++++++++----------- src/pages/home/report/ReportActionsList.js | 3 +- src/styles/styles.js | 2 +- 3 files changed, 22 insertions(+), 24 deletions(-) diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index b9dc10695f46..f082b3bfd07c 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -59,29 +59,28 @@ function MoneyRequestHeader(props) { 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, 'email', null) === moneyRequestReport.managerEmail); + Policy.isAdminOfFreePolicy([policy]) || (ReportUtils.isMoneyRequestReport(moneyRequestReport) && lodashGet(props.session, 'email', null) === moneyRequestReport.managerEmail); return ( - - {}, - }, - ]} - threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(props.windowWidth)} - report={props.report} - parentReport={moneyRequestReport} - policies={props.policies} - personalDetails={props.personalDetails} - shouldShowBackButton={props.isSmallScreenWidth} - onBackButtonPress={() => Navigation.goBack(ROUTES.HOME)} - /> + {}, + }, + ]} + threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(props.windowWidth)} + report={props.report} + parentReport={moneyRequestReport} + policies={props.policies} + personalDetails={props.personalDetails} + shouldShowBackButton={props.isSmallScreenWidth} + onBackButtonPress={() => Navigation.goBack(ROUTES.HOME)} + /> ); } diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js index f9e62d17e691..6e0b4e69cd73 100644 --- a/src/pages/home/report/ReportActionsList.js +++ b/src/pages/home/report/ReportActionsList.js @@ -53,7 +53,7 @@ const propTypes = { /** Information about the network */ network: networkPropTypes.isRequired, - + /** The policy object for the current route */ policy: PropTypes.shape({ /** The name of the policy */ @@ -177,7 +177,6 @@ function ReportActionsList(props) { onEndReached={props.loadMoreChats} onEndReachedThreshold={0.75} ListFooterComponentStyle={showMoneyRequestDetails && styles.chatFooterAtTheTop} - ListFooterComponent={() => { if (props.report.isLoadingMoreReportActions) { return ; diff --git a/src/styles/styles.js b/src/styles/styles.js index 710116a4c189..8f721084faed 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1581,7 +1581,7 @@ const styles = { chatItemReactionsDraftRight: { marginLeft: 52, }, - chatFooterAtTheTop : { + chatFooterAtTheTop: { flexGrow: 1, justifyContent: 'flex-start', }, From 54f6edd531eedfabaa6dc838304ce36d4a8a450b Mon Sep 17 00:00:00 2001 From: Pierre Michel Date: Fri, 30 Jun 2023 10:06:11 -0600 Subject: [PATCH 14/17] Revert "Try with former lint version because new one seem to bug" This reverts commit 837f69072e3af7139f6f139c312e703dc296afc7. Signed-off-by: Pierre Michel --- .github/actionlint.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/actionlint.yaml b/.github/actionlint.yaml index d2a8b4a0b9b5..9a314079362c 100644 --- a/.github/actionlint.yaml +++ b/.github/actionlint.yaml @@ -1,5 +1,5 @@ # See https://github.com/rhysd/actionlint/blob/main/docs/config.md self-hosted-runner: labels: - - ubuntu-20.04-64core + - ubuntu-latest-xl - macos-12-xl From 86d22728cc5e9a657a0e3bf2ab85adfcd45f46c9 Mon Sep 17 00:00:00 2001 From: Pierre Michel Date: Mon, 3 Jul 2023 14:41:46 -0600 Subject: [PATCH 15/17] Resolve the errors about prop type in the android console Signed-off-by: Pierre Michel --- src/components/InvertedFlatList/index.android.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/InvertedFlatList/index.android.js b/src/components/InvertedFlatList/index.android.js index baf46c3f001a..020040a916d6 100644 --- a/src/components/InvertedFlatList/index.android.js +++ b/src/components/InvertedFlatList/index.android.js @@ -13,7 +13,8 @@ const propTypes = { }).isRequired, /** The style of the footer of the list */ - ListFooterComponentStyle: stylePropTypes, + // eslint-disable-next-line react/forbid-prop-types + ListFooterComponentStyle: PropTypes.any, }; const defaultProps = { From 8e10409ee74e60752519a758f084953b2139635f Mon Sep 17 00:00:00 2001 From: Pierre Michel Date: Mon, 3 Jul 2023 15:30:35 -0600 Subject: [PATCH 16/17] Resolve lint errors and merging errors Signed-off-by: Pierre Michel --- src/components/InvertedFlatList/index.android.js | 1 - src/components/MoneyRequestHeader.js | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/InvertedFlatList/index.android.js b/src/components/InvertedFlatList/index.android.js index 020040a916d6..484a0a4ce31f 100644 --- a/src/components/InvertedFlatList/index.android.js +++ b/src/components/InvertedFlatList/index.android.js @@ -4,7 +4,6 @@ import PropTypes from 'prop-types'; import _ from 'underscore'; import BaseInvertedFlatList from './BaseInvertedFlatList'; import styles from '../../styles/styles'; -import stylePropTypes from '../../styles/stylePropTypes'; const propTypes = { /** Passed via forwardRef so we can access the FlatList ref */ diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index 9f5222a1df14..111d436e7bf9 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -62,7 +62,7 @@ function MoneyRequestHeader(props) { Policy.isAdminOfFreePolicy([policy]) || (ReportUtils.isMoneyRequestReport(moneyRequestReport) && lodashGet(props.session, 'accountID', null) === moneyRequestReport.managerID); const report = props.report; if (props.isSingleTransactionView) { - report.ownerAccountID = lodashGet(props, ['parentReport', ''], null); + report.ownerAccountID = lodashGet(props, ['parentReport', 'ownerAccountID'], null); report.ownerEmail = lodashGet(props, ['parentReport', 'ownerEmail'], ''); } return ( From bd3ac02780b56b9f0e737f95e0f2911fa453e343 Mon Sep 17 00:00:00 2001 From: Pierre Michel Date: Mon, 3 Jul 2023 16:31:01 -0600 Subject: [PATCH 17/17] Reverting to the good prop type and fixing the console error on android Signed-off-by: Pierre Michel --- src/components/InvertedFlatList/index.android.js | 4 ++-- src/pages/home/report/ReportActionsList.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/InvertedFlatList/index.android.js b/src/components/InvertedFlatList/index.android.js index 484a0a4ce31f..baf46c3f001a 100644 --- a/src/components/InvertedFlatList/index.android.js +++ b/src/components/InvertedFlatList/index.android.js @@ -4,6 +4,7 @@ import PropTypes from 'prop-types'; import _ from 'underscore'; import BaseInvertedFlatList from './BaseInvertedFlatList'; import styles from '../../styles/styles'; +import stylePropTypes from '../../styles/stylePropTypes'; const propTypes = { /** Passed via forwardRef so we can access the FlatList ref */ @@ -12,8 +13,7 @@ const propTypes = { }).isRequired, /** The style of the footer of the list */ - // eslint-disable-next-line react/forbid-prop-types - ListFooterComponentStyle: PropTypes.any, + ListFooterComponentStyle: stylePropTypes, }; const defaultProps = { diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js index 04675270d4ac..67d81f77d90b 100644 --- a/src/pages/home/report/ReportActionsList.js +++ b/src/pages/home/report/ReportActionsList.js @@ -176,7 +176,7 @@ function ReportActionsList(props) { initialNumToRender={calculateInitialNumToRender()} onEndReached={props.loadMoreChats} onEndReachedThreshold={0.75} - ListFooterComponentStyle={showMoneyRequestDetails && styles.chatFooterAtTheTop} + ListFooterComponentStyle={showMoneyRequestDetails ? styles.chatFooterAtTheTop : {}} ListFooterComponent={() => { if (props.report.isLoadingMoreReportActions) { return ;