From 9a02fcc0e863e8b8f2a0e2c194b7fc4ad59af6d0 Mon Sep 17 00:00:00 2001 From: Yuwen Memon Date: Wed, 26 Apr 2023 18:29:57 -0700 Subject: [PATCH 01/23] Add MoneyRequestHeader and AvatarWithDisplayName components --- src/components/AvatarWithDisplayName.js | 106 ++++++++++++++++++++++++ src/components/HeaderWithCloseButton.js | 26 +++++- src/components/MoneyRequestHeader.js | 78 +++++++++++++++++ 3 files changed, 206 insertions(+), 4 deletions(-) create mode 100644 src/components/AvatarWithDisplayName.js create mode 100644 src/components/MoneyRequestHeader.js diff --git a/src/components/AvatarWithDisplayName.js b/src/components/AvatarWithDisplayName.js new file mode 100644 index 000000000000..94b28d80a22a --- /dev/null +++ b/src/components/AvatarWithDisplayName.js @@ -0,0 +1,106 @@ +import React from 'react'; +import {View} from 'react-native'; +import PropTypes from 'prop-types'; +import {CONST} from 'expensify-common/lib/CONST'; +import reportPropTypes from '../pages/reportPropTypes'; +import participantPropTypes from './participantPropTypes'; +import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions'; +import withLocalize, {withLocalizePropTypes} from './withLocalize'; +import styles from '../styles/styles'; +import SubscriptAvatar from './SubscriptAvatar'; +import * as ReportUtils from '../libs/ReportUtils'; +import Avatar from './Avatar'; +import DisplayNames from './DisplayNames'; +import compose from '../libs/compose'; + +const propTypes = { + /* Onyx Props */ + + /** The report currently being looked at */ + report: reportPropTypes, + + /** 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, + }), + + /** Personal details of all the users */ + personalDetails: PropTypes.objectOf(participantPropTypes), + + ...windowDimensionsPropTypes, + ...withLocalizePropTypes, +}; + +const defaultProps = { + personalDetails: {}, + policies: {}, + report: null, +}; + +const AvatarWithDisplayName = (props) => { + const title = ReportUtils.getReportName(props.report, props.policies); + + const subtitle = ReportUtils.getChatRoomSubtitle(props.report, props.policies); + + // We hide the button when we are chatting with an automated Expensify account since it's not possible to contact + // these users via alternative means. It is possible to request a call with Concierge, so we leave the option for them. + const shouldShowSubscript = props.report.type === CONST.REPORT.TYPE.EXPENSE; + const icons = ReportUtils.getIcons(props.report, props.personalDetails, props.policies); + return ( + + + {Boolean(props.report && title) && ( + + {shouldShowSubscript ? ( + + ) : ( + + )} + + + + {subtitle} + + + + )} + + + ); +}; +AvatarWithDisplayName.propTypes = propTypes; +AvatarWithDisplayName.displayName = 'AvatarWithDisplayName'; +AvatarWithDisplayName.defaultProps = defaultProps; + +export default compose( + withWindowDimensions, + withLocalize, +)(AvatarWithDisplayName); diff --git a/src/components/HeaderWithCloseButton.js b/src/components/HeaderWithCloseButton.js index cd9813457502..259ceab2b921 100755 --- a/src/components/HeaderWithCloseButton.js +++ b/src/components/HeaderWithCloseButton.js @@ -17,6 +17,8 @@ import ThreeDotsMenu, {ThreeDotsMenuItemPropTypes} from './ThreeDotsMenu'; import withDelayToggleButtonState, {withDelayToggleButtonStatePropTypes} from './withDelayToggleButtonState'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; import withKeyboardState, {keyboardStatePropTypes} from './withKeyboardState'; +import AvatarWithDisplayName from './AvatarWithDisplayName'; +import iouReportPropTypes from '../pages/iouReportPropTypes'; const propTypes = { /** Title of the Header */ @@ -78,6 +80,11 @@ const propTypes = { total: PropTypes.number, }), + /** Whether we should show an avatar */ + shouldShowAvatarWithDisplay: PropTypes.bool, + + report: iouReportPropTypes, + ...withLocalizePropTypes, ...withDelayToggleButtonStatePropTypes, ...keyboardStatePropTypes, @@ -97,6 +104,8 @@ const defaultProps = { shouldShowThreeDotsButton: false, shouldShowCloseButton: true, shouldShowStepCounter: true, + shouldShowAvatarWithDisplay: false, + report: null, guidesCallTaskID: '', stepCounter: null, threeDotsMenuItems: [], @@ -153,10 +162,19 @@ class HeaderWithCloseButton extends Component { )} -
+ {this.props.shouldShowAvatarWithDisplay ? ( + + ) : ( +
+ )} + { this.props.shouldShowDownloadButton && ( diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js new file mode 100644 index 000000000000..c8d9fad776e1 --- /dev/null +++ b/src/components/MoneyRequestHeader.js @@ -0,0 +1,78 @@ +import React from 'react'; +import {View} from 'react-native'; +import PropTypes from 'prop-types'; +import colors from '../styles/colors'; +import HeaderWithCloseButton from './HeaderWithCloseButton'; +import iouReportPropTypes from '../pages/iouReportPropTypes'; +import withLocalize, {withLocalizePropTypes} from './withLocalize'; +import * as ReportUtils from '../libs/ReportUtils'; +import * as Expensicons from './Icon/Expensicons'; +import AvatarWithDisplayName from './AvatarWithDisplayName'; +import SettlementButton from './SettlementButton'; +import CONST from '../CONST'; + +const propTypes = { + /** The report currently being looked at */ + report: iouReportPropTypes.isRequired, + + /** 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, + + isTransactionDetail: PropTypes.bool, + + ...withLocalizePropTypes, +}; + +const defaultProps = { + isTransactionDetail: false, +}; + +const MoneyRequestHeader = (props) => { + const formattedAmount = props.numberFormat(props.report.total, { + style: 'currency', + currency: props.report.currency, + }); + const isSettled = /* ReportUtils.isSettled(props.report.reportID); */ false; + const isAdmin = ReportUtils.isPolicyExpenseChatAdmin(props.report, props.policies); + return ( + + {}, + }]} + report={props.report} + /> + To + + + {!props.isSingleRequest && ( + {formattedAmount} + )} + + + {isAdmin && !isSettled && ( + + )} + + ); +}; + +MoneyRequestHeader.displayName = 'MoneyRequestHeader'; +MoneyRequestHeader.propTypes = propTypes; +MoneyRequestHeader.defaultProps = defaultProps; + +export default withLocalize(MoneyRequestHeader); From 6832775909784cb884931c5ac13d822aeef3c62a Mon Sep 17 00:00:00 2001 From: Yuwen Memon Date: Thu, 27 Apr 2023 14:27:11 -0700 Subject: [PATCH 02/23] Get the avatar with display name rendering --- src/components/AvatarWithDisplayName.js | 18 ++++++++++-------- src/components/MoneyRequestHeader.js | 11 +++++++---- src/libs/ReportUtils.js | 6 +++--- 3 files changed, 20 insertions(+), 15 deletions(-) diff --git a/src/components/AvatarWithDisplayName.js b/src/components/AvatarWithDisplayName.js index 94b28d80a22a..e26fb5da5fe7 100644 --- a/src/components/AvatarWithDisplayName.js +++ b/src/components/AvatarWithDisplayName.js @@ -1,7 +1,7 @@ import React from 'react'; import {View} from 'react-native'; import PropTypes from 'prop-types'; -import {CONST} from 'expensify-common/lib/CONST'; +import CONST from '../CONST'; import reportPropTypes from '../pages/reportPropTypes'; import participantPropTypes from './participantPropTypes'; import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions'; @@ -12,6 +12,8 @@ import * as ReportUtils from '../libs/ReportUtils'; import Avatar from './Avatar'; import DisplayNames from './DisplayNames'; import compose from '../libs/compose'; +import * as OptionsListUtils from '../libs/OptionsListUtils'; +import Text from './Text'; const propTypes = { /* Onyx Props */ @@ -39,14 +41,12 @@ const defaultProps = { }; const AvatarWithDisplayName = (props) => { - const title = ReportUtils.getReportName(props.report, props.policies); - + const title = ReportUtils.getDisplayNameForParticipant(props.report.ownerEmail, true); const subtitle = ReportUtils.getChatRoomSubtitle(props.report, props.policies); - - // We hide the button when we are chatting with an automated Expensify account since it's not possible to contact - // these users via alternative means. It is possible to request a call with Concierge, so we leave the option for them. - const shouldShowSubscript = props.report.type === CONST.REPORT.TYPE.EXPENSE; + const isExpenseReport = ReportUtils.isExpenseReport(props.report); const icons = ReportUtils.getIcons(props.report, props.personalDetails, props.policies); + const ownerPersonalDetails = OptionsListUtils.getPersonalDetailsForLogins([props.report.ownerEmail], props.personalDetails); + const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips(ownerPersonalDetails, false); return ( @@ -59,7 +59,7 @@ const AvatarWithDisplayName = (props) => { styles.justifyContentBetween, ]} > - {shouldShowSubscript ? ( + {isExpenseReport ? ( { { const isSettled = /* ReportUtils.isSettled(props.report.reportID); */ false; const isAdmin = ReportUtils.isPolicyExpenseChatAdmin(props.report, props.policies); return ( - { {isAdmin && !isSettled && ( )} - + ); }; diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js index 398cd025e598..8f1cd5efa651 100644 --- a/src/libs/ReportUtils.js +++ b/src/libs/ReportUtils.js @@ -378,7 +378,7 @@ function getChatRoomSubtitle(report, policiesMap) { // The domainAll rooms are just #domainName, so we ignore the prefix '#' to get the domainName return report.reportName.substring(1); } - if (isPolicyExpenseChat(report) && report.isOwnPolicyExpenseChat) { + if ((isPolicyExpenseChat(report) && report.isOwnPolicyExpenseChat) || isExpenseReport(report)) { return Localize.translateLocal('workspace.common.workspace'); } if (isArchivedRoom(report)) { @@ -676,7 +676,7 @@ function getIcons(report, personalDetails, policies, defaultIcon = null) { result.source = Expensicons.ActiveRoomAvatar; return [result]; } - if (isPolicyExpenseChat(report)) { + if (isPolicyExpenseChat(report) || isExpenseReport(report)) { const workspaceName = lodashGet(policies, [ `${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`, 'name', ]); @@ -686,7 +686,7 @@ function getIcons(report, personalDetails, policies, defaultIcon = null) { ]) || getDefaultWorkspaceAvatar(workspaceName); // Return the workspace avatar if the user is the owner of the policy expense chat - if (report.isOwnPolicyExpenseChat) { + if (report.isOwnPolicyExpenseChat && !isExpenseReport(report)) { result.source = policyExpenseChatAvatarSource; result.type = CONST.ICON_TYPE_WORKSPACE; result.name = workspaceName; From 2d52d926be19960799d7ea8195a8372bf1797dce Mon Sep 17 00:00:00 2001 From: Yuwen Memon Date: Thu, 27 Apr 2023 16:33:50 -0700 Subject: [PATCH 03/23] Get some rudimentary style in there, get workspace logo part working better --- src/components/HeaderWithCloseButton.js | 10 +++++ src/components/MoneyRequestHeader.js | 57 ++++++++++++++++++------- src/libs/ReportUtils.js | 8 ++++ 3 files changed, 60 insertions(+), 15 deletions(-) diff --git a/src/components/HeaderWithCloseButton.js b/src/components/HeaderWithCloseButton.js index 259ceab2b921..f98cd383f86f 100755 --- a/src/components/HeaderWithCloseButton.js +++ b/src/components/HeaderWithCloseButton.js @@ -19,6 +19,7 @@ import withLocalize, {withLocalizePropTypes} from './withLocalize'; import withKeyboardState, {keyboardStatePropTypes} from './withKeyboardState'; import AvatarWithDisplayName from './AvatarWithDisplayName'; import iouReportPropTypes from '../pages/iouReportPropTypes'; +import participantPropTypes from './participantPropTypes'; const propTypes = { /** Title of the Header */ @@ -85,6 +86,13 @@ const propTypes = { report: iouReportPropTypes, + policies: PropTypes.shape({ + /** Name of the policy */ + name: PropTypes.string, + }), + + personalDetails: PropTypes.objectOf(participantPropTypes), + ...withLocalizePropTypes, ...withDelayToggleButtonStatePropTypes, ...keyboardStatePropTypes, @@ -106,6 +114,8 @@ const defaultProps = { shouldShowStepCounter: true, shouldShowAvatarWithDisplay: false, report: null, + policies: {}, + personalDetails: {}, guidesCallTaskID: '', stepCounter: null, threeDotsMenuItems: [], diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index c0dbb797eea6..a47952f5a677 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -11,6 +11,11 @@ import SettlementButton from './SettlementButton'; import CONST from '../CONST'; import Text from './Text'; import participantPropTypes from './participantPropTypes'; +import Avatar from './Avatar'; +import styles from '../styles/styles'; +import {getDefaultWorkspaceAvatar, getPolicyName} from '../libs/ReportUtils'; +import lodashGet from 'lodash/get'; +import ONYXKEYS from '../ONYXKEYS'; const propTypes = { /** The report currently being looked at */ @@ -40,12 +45,15 @@ const MoneyRequestHeader = (props) => { }); const isSettled = /* ReportUtils.isSettled(props.report.reportID); */ false; const isAdmin = ReportUtils.isPolicyExpenseChatAdmin(props.report, props.policies); + const workspaceName = ReportUtils.getPolicyName(props.report, props.policies); + const workspaceAvatar = ReportUtils.getWorkspaceAvatar(props.report, props.policies); return ( { onSelected: () => {}, }]} report={props.report} + policies={props.policies} + personalDetails={props.personalDetails} /> To - - - {!props.isSingleRequest && ( - {formattedAmount} - )} - + + + + + {workspaceName} + + + + {!props.isSingleRequest && ( + {formattedAmount} + )} + {isAdmin && !isSettled && ( + + )} + - {isAdmin && !isSettled && ( - - )} ); }; diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js index 8f1cd5efa651..7aae22feeeba 100644 --- a/src/libs/ReportUtils.js +++ b/src/libs/ReportUtils.js @@ -538,6 +538,13 @@ function getDefaultWorkspaceAvatar(workspaceName) { return !alphaNumeric ? defaultWorkspaceAvatars.WorkspaceBuilding : defaultWorkspaceAvatars[`Workspace${alphaNumeric[0]}`]; } +function getWorkspaceAvatar(report, policies) { + const workspaceName = getPolicyName(report, policies); + return lodashGet(policies, [ + `${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`, 'avatar', + ]) || getDefaultWorkspaceAvatar(workspaceName); +} + /** * Helper method to return old dot default avatar associated with login * @@ -1810,4 +1817,5 @@ export { getMoneyRequestOptions, canRequestMoney, getWhisperDisplayNames, + getWorkspaceAvatar, }; From 48e99fd6aae3a062e5be6ad5b84aed9acf00858e Mon Sep 17 00:00:00 2001 From: Yuwen Memon Date: Thu, 27 Apr 2023 18:13:17 -0700 Subject: [PATCH 04/23] Add some more styles --- src/components/MoneyRequestHeader.js | 50 +++++++++++++++------------- 1 file changed, 26 insertions(+), 24 deletions(-) diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index a47952f5a677..10f02f2b453c 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -64,37 +64,39 @@ const MoneyRequestHeader = (props) => { policies={props.policies} personalDetails={props.personalDetails} /> - To - + + To - - - {workspaceName} - - - - {!props.isSingleRequest && ( - {formattedAmount} - )} - {isAdmin && !isSettled && ( - - )} + + + {workspaceName} + + + + {!props.isSingleRequest && ( + {formattedAmount} + )} + {isAdmin && !isSettled && ( + + )} + From 887324686e043d5cb9bd68b8c032f593c1970624 Mon Sep 17 00:00:00 2001 From: Yuwen Memon Date: Fri, 28 Apr 2023 16:47:00 -0700 Subject: [PATCH 05/23] Update Avatar logic for IOU vs. Expense Report --- src/components/AvatarWithDisplayName.js | 11 ++++++++--- src/components/MoneyRequestHeader.js | 13 ++++--------- src/libs/ReportUtils.js | 7 +++++++ 3 files changed, 19 insertions(+), 12 deletions(-) diff --git a/src/components/AvatarWithDisplayName.js b/src/components/AvatarWithDisplayName.js index e26fb5da5fe7..83e409b3b37b 100644 --- a/src/components/AvatarWithDisplayName.js +++ b/src/components/AvatarWithDisplayName.js @@ -16,8 +16,6 @@ import * as OptionsListUtils from '../libs/OptionsListUtils'; import Text from './Text'; const propTypes = { - /* Onyx Props */ - /** The report currently being looked at */ report: reportPropTypes, @@ -27,6 +25,9 @@ const propTypes = { name: PropTypes.string, }), + /** The size of the avatar */ + size: PropTypes.oneOf(Object.values(CONST.AVATAR_SIZE)), + /** Personal details of all the users */ personalDetails: PropTypes.objectOf(participantPropTypes), @@ -38,6 +39,7 @@ const defaultProps = { personalDetails: {}, policies: {}, report: null, + size: CONST.AVATAR_SIZE.DEFAULT, }; const AvatarWithDisplayName = (props) => { @@ -65,10 +67,13 @@ const AvatarWithDisplayName = (props) => { secondaryAvatar={icons[1]} mainTooltip={props.report.ownerEmail} secondaryTooltip={subtitle} + size={props.size} /> ) : ( )} diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index 10f02f2b453c..92bf107d4313 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -6,16 +6,11 @@ import iouReportPropTypes from '../pages/iouReportPropTypes'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; import * as ReportUtils from '../libs/ReportUtils'; import * as Expensicons from './Icon/Expensicons'; -import AvatarWithDisplayName from './AvatarWithDisplayName'; import SettlementButton from './SettlementButton'; -import CONST from '../CONST'; import Text from './Text'; import participantPropTypes from './participantPropTypes'; import Avatar from './Avatar'; import styles from '../styles/styles'; -import {getDefaultWorkspaceAvatar, getPolicyName} from '../libs/ReportUtils'; -import lodashGet from 'lodash/get'; -import ONYXKEYS from '../ONYXKEYS'; const propTypes = { /** The report currently being looked at */ @@ -27,15 +22,15 @@ const propTypes = { name: PropTypes.string, }).isRequired, - personalDetails: PropTypes.objectOf(participantPropTypes), + personalDetails: PropTypes.objectOf(participantPropTypes).isRequired, - isTransactionDetail: PropTypes.bool, + isSingleTransactionView: PropTypes.bool, ...withLocalizePropTypes, }; const defaultProps = { - isTransactionDetail: false, + isSingleTransactionView: false, }; const MoneyRequestHeader = (props) => { @@ -90,7 +85,7 @@ const MoneyRequestHeader = (props) => { - {!props.isSingleRequest && ( + {!props.isSingleTransactionView && ( {formattedAmount} )} {isAdmin && !isSettled && ( diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js index 7aae22feeeba..f4dd0723100b 100644 --- a/src/libs/ReportUtils.js +++ b/src/libs/ReportUtils.js @@ -719,6 +719,13 @@ function getIcons(report, personalDetails, policies, defaultIcon = null) { workspaceIcon, ]; } + if (isIOUReport(report)) { + return [{ + source: getAvatar(lodashGet(personalDetails, [report.ownerEmail, 'avatar']), report.ownerEmail), + name: report.ownerEmail, + type: CONST.ICON_TYPE_AVATAR, + }]; + } const participantDetails = []; const participants = report.participants || []; From b31c2d136ba3292d0f96c6e7f641539dcf103736 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Mon, 1 May 2023 11:47:16 +0100 Subject: [PATCH 06/23] Initial styling pass --- src/CONST.js | 1 + src/components/AvatarWithDisplayName.js | 9 ++++-- src/components/HeaderWithCloseButton.js | 4 ++- src/components/MoneyRequestHeader.js | 39 ++++++++++++++++++------- src/libs/ReportUtils.js | 1 + src/pages/home/ReportScreen.js | 20 ++++++++----- src/styles/StyleUtils.js | 2 ++ src/styles/styles.js | 8 +++++ 8 files changed, 62 insertions(+), 22 deletions(-) diff --git a/src/CONST.js b/src/CONST.js index 3326bfd69bb6..721283583b62 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -955,6 +955,7 @@ const CONST = { SMALL_SUBSCRIPT: 'small-subscript', MID_SUBSCRIPT: 'mid-subscript', LARGE_BORDERED: 'large-bordered', + HEADER: 'header', }, OPTION_MODE: { COMPACT: 'compact', diff --git a/src/components/AvatarWithDisplayName.js b/src/components/AvatarWithDisplayName.js index 83e409b3b37b..35d57cf86bbf 100644 --- a/src/components/AvatarWithDisplayName.js +++ b/src/components/AvatarWithDisplayName.js @@ -50,8 +50,8 @@ const AvatarWithDisplayName = (props) => { const ownerPersonalDetails = OptionsListUtils.getPersonalDetailsForLogins([props.report.ownerEmail], props.personalDetails); const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips(ownerPersonalDetails, false); return ( - - + + {Boolean(props.report && title) && ( { styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, + {backgroundColor: 'orange'}, ]} > {isExpenseReport ? ( @@ -73,10 +74,12 @@ const AvatarWithDisplayName = (props) => { )} - + {this.props.shouldShowBackButton && ( @@ -185,7 +187,7 @@ class HeaderWithCloseButton extends Component { /> )} - + { this.props.shouldShowDownloadButton && ( diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index 92bf107d4313..0cc092996908 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -11,6 +11,8 @@ 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'; const propTypes = { /** The report currently being looked at */ @@ -44,7 +46,8 @@ const MoneyRequestHeader = (props) => { const workspaceAvatar = ReportUtils.getWorkspaceAvatar(props.report, props.policies); return ( { policies={props.policies} personalDetails={props.personalDetails} /> - - To + + To { > - - {workspaceName} - + + + {workspaceName} + + + Workspace + + - + {!props.isSingleTransactionView && ( - {formattedAmount} + {formattedAmount} )} {isAdmin && !isSettled && ( diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js index f4dd0723100b..c3bdcb47791a 100644 --- a/src/libs/ReportUtils.js +++ b/src/libs/ReportUtils.js @@ -104,6 +104,7 @@ function getReportParticipantsTitle(logins) { * @param {Object} report * @returns {Boolean} */ +// eslint-disable-next-line no-unused-vars function isExpenseReport(report) { return lodashGet(report, 'type') === CONST.REPORT.TYPE.EXPENSE; } diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index df5ba50e622a..a6b318b28090 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -39,6 +39,7 @@ import personalDetailsPropType from '../personalDetailsPropType'; import getIsReportFullyVisible from '../../libs/getIsReportFullyVisible'; import EmojiPicker from '../../components/EmojiPicker/EmojiPicker'; import * as EmojiPickerAction from '../../libs/actions/EmojiPickerAction'; +import MoneyRequestHeader from '../../components/MoneyRequestHeader'; const propTypes = { /** Navigation route context info provided by react navigation */ @@ -241,6 +242,17 @@ class ReportScreen extends React.Component { // (which is shown, until all the actual views of the ReportScreen have been rendered) const shouldAnimate = !shouldFreeze; + + const moneyRequestHeader = this.props.report.type === 'iou' && this.props.report.reportID === '4571118460201617' + ? + : ( Navigation.navigate(ROUTES.HOME)} + personalDetails={this.props.personalDetails} + report={this.props.report} + policies={this.props.policies} + />); + return ( - Navigation.navigate(ROUTES.HOME)} - personalDetails={this.props.personalDetails} - report={this.props.report} - policies={this.props.policies} - /> + {moneyRequestHeader} {Boolean(this.props.accountManagerReportID) && ReportUtils.isConciergeChatReport(this.props.report) && this.state.isBannerVisible && ( Date: Mon, 1 May 2023 13:14:39 +0100 Subject: [PATCH 07/23] Align the bottom half --- src/components/AvatarWithDisplayName.js | 30 +++++++++++++------------ src/components/HeaderWithCloseButton.js | 8 ++++--- src/components/MoneyRequestHeader.js | 7 +++--- 3 files changed, 24 insertions(+), 21 deletions(-) diff --git a/src/components/AvatarWithDisplayName.js b/src/components/AvatarWithDisplayName.js index 35d57cf86bbf..2d1e560530ef 100644 --- a/src/components/AvatarWithDisplayName.js +++ b/src/components/AvatarWithDisplayName.js @@ -1,5 +1,6 @@ import React from 'react'; import {View} from 'react-native'; +import _ from 'underscore'; import PropTypes from 'prop-types'; import CONST from '../CONST'; import reportPropTypes from '../pages/reportPropTypes'; @@ -26,7 +27,7 @@ const propTypes = { }), /** The size of the avatar */ - size: PropTypes.oneOf(Object.values(CONST.AVATAR_SIZE)), + size: PropTypes.oneOf(_.values(CONST.AVATAR_SIZE)), /** Personal details of all the users */ personalDetails: PropTypes.objectOf(participantPropTypes), @@ -59,7 +60,6 @@ const AvatarWithDisplayName = (props) => { styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, - {backgroundColor: 'orange'}, ]} > {isExpenseReport ? ( @@ -79,7 +79,7 @@ const AvatarWithDisplayName = (props) => { containerStyles={props.size === CONST.AVATAR_SIZE.SMALL ? styles.emptyAvatarSmall : styles.emptyAvatar} /> )} - + { textStyles={[styles.headerText, styles.pre]} shouldUseFullTitle={isExpenseReport} /> - - {subtitle} - + {subtitle ? ( + + {subtitle} + + ) : null } )} diff --git a/src/components/HeaderWithCloseButton.js b/src/components/HeaderWithCloseButton.js index aa2add9083c7..068effdd3abf 100755 --- a/src/components/HeaderWithCloseButton.js +++ b/src/components/HeaderWithCloseButton.js @@ -93,6 +93,9 @@ const propTypes = { personalDetails: PropTypes.objectOf(participantPropTypes), + // eslint-disable-next-line react/forbid-prop-types + containerStyles: PropTypes.arrayOf(PropTypes.object), + ...withLocalizePropTypes, ...withDelayToggleButtonStatePropTypes, ...keyboardStatePropTypes, @@ -123,6 +126,7 @@ const defaultProps = { top: 0, left: 0, }, + containerStyles: [], }; class HeaderWithCloseButton extends Component { @@ -147,7 +151,7 @@ class HeaderWithCloseButton extends Component { render() { return ( - + {this.props.shouldShowBackButton && ( diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index 0cc092996908..ce1e02f5a156 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -61,17 +61,16 @@ const MoneyRequestHeader = (props) => { report={props.report} policies={props.policies} personalDetails={props.personalDetails} + containerStyles={[styles.pt5, styles.pb3]} /> - - To + + To Date: Mon, 1 May 2023 13:21:03 -0700 Subject: [PATCH 08/23] Revert ReportScreen.js back to normal --- src/pages/home/ReportScreen.js | 20 +++++++------------- 1 file changed, 7 insertions(+), 13 deletions(-) diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index a6b318b28090..df5ba50e622a 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -39,7 +39,6 @@ import personalDetailsPropType from '../personalDetailsPropType'; import getIsReportFullyVisible from '../../libs/getIsReportFullyVisible'; import EmojiPicker from '../../components/EmojiPicker/EmojiPicker'; import * as EmojiPickerAction from '../../libs/actions/EmojiPickerAction'; -import MoneyRequestHeader from '../../components/MoneyRequestHeader'; const propTypes = { /** Navigation route context info provided by react navigation */ @@ -242,17 +241,6 @@ class ReportScreen extends React.Component { // (which is shown, until all the actual views of the ReportScreen have been rendered) const shouldAnimate = !shouldFreeze; - - const moneyRequestHeader = this.props.report.type === 'iou' && this.props.report.reportID === '4571118460201617' - ? - : ( Navigation.navigate(ROUTES.HOME)} - personalDetails={this.props.personalDetails} - report={this.props.report} - policies={this.props.policies} - />); - return ( - {moneyRequestHeader} + Navigation.navigate(ROUTES.HOME)} + personalDetails={this.props.personalDetails} + report={this.props.report} + policies={this.props.policies} + /> {Boolean(this.props.accountManagerReportID) && ReportUtils.isConciergeChatReport(this.props.report) && this.state.isBannerVisible && ( Date: Mon, 1 May 2023 13:46:26 -0700 Subject: [PATCH 09/23] Hide close button --- src/components/MoneyRequestHeader.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index ce1e02f5a156..fecd201cff7f 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -62,6 +62,7 @@ const MoneyRequestHeader = (props) => { policies={props.policies} personalDetails={props.personalDetails} containerStyles={[styles.pt5, styles.pb3]} + shouldShowCloseButton={false} /> To From 9caca423fc78f8af44595053747bd988818656bb Mon Sep 17 00:00:00 2001 From: Yuwen Memon Date: Mon, 1 May 2023 15:32:30 -0700 Subject: [PATCH 10/23] Fix some header alignment and get formatting looking better --- src/components/HeaderWithCloseButton.js | 48 +++++++++++++------------ src/components/MoneyRequestHeader.js | 16 +++++---- src/styles/styles.js | 5 +++ 3 files changed, 40 insertions(+), 29 deletions(-) diff --git a/src/components/HeaderWithCloseButton.js b/src/components/HeaderWithCloseButton.js index 068effdd3abf..39aca418e872 100755 --- a/src/components/HeaderWithCloseButton.js +++ b/src/components/HeaderWithCloseButton.js @@ -161,34 +161,36 @@ class HeaderWithCloseButton extends Component { styles.overflowHidden, ]} > - {this.props.shouldShowBackButton && ( - - { - if (this.props.isKeyboardShown) { - Keyboard.dismiss(); - } - this.props.onBackButtonPress(); - }} - style={[styles.touchableButtonImage]} - > - - - - )} - {this.props.shouldShowAvatarWithDisplay ? ( - - ) : ( + + {this.props.shouldShowBackButton && ( + + { + if (this.props.isKeyboardShown) { + Keyboard.dismiss(); + } + this.props.onBackButtonPress(); + }} + style={[styles.touchableButtonImage]} + > + + + + )} + {this.props.shouldShowAvatarWithDisplay && ( + + )} + + {!this.props.shouldShowAvatarWithDisplay && (
)} - { this.props.shouldShowDownloadButton && ( diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index fecd201cff7f..d8b16fb9dd4e 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -13,6 +13,8 @@ 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'; const propTypes = { /** The report currently being looked at */ @@ -36,7 +38,7 @@ const defaultProps = { }; const MoneyRequestHeader = (props) => { - const formattedAmount = props.numberFormat(props.report.total, { + const formattedAmount = props.numberFormat(props.report.total / 100, { style: 'currency', currency: props.report.currency, }); @@ -58,11 +60,13 @@ const MoneyRequestHeader = (props) => { text: props.translate('common.delete'), onSelected: () => {}, }]} + threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton} report={props.report} policies={props.policies} personalDetails={props.personalDetails} containerStyles={[styles.pt5, styles.pb3]} shouldShowCloseButton={false} + shouldShowBackButton={props.isSmallScreenWidth} /> To @@ -101,13 +105,10 @@ const MoneyRequestHeader = (props) => { - + {!props.isSingleTransactionView && ( {formattedAmount} )} - {isAdmin && !isSettled && ( - - )} @@ -119,4 +120,7 @@ MoneyRequestHeader.displayName = 'MoneyRequestHeader'; MoneyRequestHeader.propTypes = propTypes; MoneyRequestHeader.defaultProps = defaultProps; -export default withLocalize(MoneyRequestHeader); +export default compose( + withWindowDimensions, + withLocalize, +)(MoneyRequestHeader); diff --git a/src/styles/styles.js b/src/styles/styles.js index ca0382a33e6f..4799042bba0e 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2790,6 +2790,11 @@ const styles = { right: 60, }, + threeDotsPopoverOffsetNoCloseButton: { + top: 50, + right: 10, + }, + invert: { // It's important to invert the Y AND X axis to prevent a react native issue that can lead to ANRs on android 13 transform: [{scaleX: -1}, {scaleY: -1}], From 04e5b454c5d7099eedabff78036c3a6c0951346b Mon Sep 17 00:00:00 2001 From: Yuwen Memon Date: Mon, 1 May 2023 16:25:36 -0700 Subject: [PATCH 11/23] Style --- src/components/MoneyRequestHeader.js | 2 -- src/components/ReportActionItem/IOUAction.js | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index d8b16fb9dd4e..b51c7fe8f4fc 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -6,7 +6,6 @@ import iouReportPropTypes from '../pages/iouReportPropTypes'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; import * as ReportUtils from '../libs/ReportUtils'; import * as Expensicons from './Icon/Expensicons'; -import SettlementButton from './SettlementButton'; import Text from './Text'; import participantPropTypes from './participantPropTypes'; import Avatar from './Avatar'; @@ -43,7 +42,6 @@ const MoneyRequestHeader = (props) => { currency: props.report.currency, }); const isSettled = /* ReportUtils.isSettled(props.report.reportID); */ false; - const isAdmin = ReportUtils.isPolicyExpenseChatAdmin(props.report, props.policies); const workspaceName = ReportUtils.getPolicyName(props.report, props.policies); const workspaceAvatar = ReportUtils.getWorkspaceAvatar(props.report, props.policies); return ( diff --git a/src/components/ReportActionItem/IOUAction.js b/src/components/ReportActionItem/IOUAction.js index a7fe3f17102a..6835776a8736 100644 --- a/src/components/ReportActionItem/IOUAction.js +++ b/src/components/ReportActionItem/IOUAction.js @@ -67,7 +67,7 @@ const defaultProps = { const IOUAction = (props) => { const launchDetailsModal = () => { - Navigation.navigate(ROUTES.getIouDetailsRoute(props.chatReportID, props.action.originalMessage.IOUReportID)); + Navigation.navigate(ROUTES.getReportRoute(props.action.originalMessage.IOUReportID)); }; const shouldShowIOUPreview = ( From 854de26b67bf82ee5b4955709cd593f218c05a3e Mon Sep 17 00:00:00 2001 From: Yuwen Memon Date: Mon, 1 May 2023 21:20:51 -0700 Subject: [PATCH 12/23] Back button functionality --- src/components/MoneyRequestHeader.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index b51c7fe8f4fc..0fe0699ba596 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -14,6 +14,8 @@ 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'; const propTypes = { /** The report currently being looked at */ @@ -65,6 +67,7 @@ const MoneyRequestHeader = (props) => { containerStyles={[styles.pt5, styles.pb3]} shouldShowCloseButton={false} shouldShowBackButton={props.isSmallScreenWidth} + onBackButtonPress={() => Navigation.navigate(ROUTES.HOME)} /> To From a4a9226c8e2385f62052707dc58b19652a99cb41 Mon Sep 17 00:00:00 2001 From: Yuwen Memon Date: Tue, 2 May 2023 11:08:01 -0700 Subject: [PATCH 13/23] PR comments --- src/components/AvatarWithDisplayName.js | 2 +- src/components/HeaderWithCloseButton.js | 4 +++ src/components/MoneyRequestHeader.js | 38 +++++++++++++------- src/components/ReportActionItem/IOUAction.js | 2 +- src/libs/OptionsListUtils.js | 4 +-- src/libs/ReportUtils.js | 5 +-- src/styles/styles.js | 8 +++-- 7 files changed, 39 insertions(+), 24 deletions(-) diff --git a/src/components/AvatarWithDisplayName.js b/src/components/AvatarWithDisplayName.js index 2d1e560530ef..f304ea116ecb 100644 --- a/src/components/AvatarWithDisplayName.js +++ b/src/components/AvatarWithDisplayName.js @@ -51,7 +51,7 @@ const AvatarWithDisplayName = (props) => { const ownerPersonalDetails = OptionsListUtils.getPersonalDetailsForLogins([props.report.ownerEmail], props.personalDetails); const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips(ownerPersonalDetails, false); return ( - + {Boolean(props.report && title) && ( { currency: props.report.currency, }); const isSettled = /* ReportUtils.isSettled(props.report.reportID); */ false; - const workspaceName = ReportUtils.getPolicyName(props.report, props.policies); - const workspaceAvatar = ReportUtils.getWorkspaceAvatar(props.report, props.policies); + const isExpenseReport = ReportUtils.isExpenseReport(props.report); + const payeeName = isExpenseReport ? ReportUtils.getPolicyName(props.report, props.policies) : ReportUtils.getDisplayNameForParticipant(props.report.managerEmail); + const payeeAvatar = isExpenseReport ? ReportUtils.getWorkspaceAvatar(props.report, props.policies) : ReportUtils.getAvatar(lodashGet(props.personalDetails, [props.report.managerEmail, 'avatar']), props.personalDetails); return ( { ]} > @@ -96,20 +101,27 @@ const MoneyRequestHeader = (props) => { style={[styles.headerText, styles.pre]} numberOfLines={1} > - {workspaceName} - - - Workspace + {payeeName} + {isExpenseReport && ( + + {props.translate('workspace.common.workspace')} + + )} - + {!props.isSingleTransactionView && ( {formattedAmount} )} + {isSettled && ( + + + + )} diff --git a/src/components/ReportActionItem/IOUAction.js b/src/components/ReportActionItem/IOUAction.js index 6835776a8736..a7fe3f17102a 100644 --- a/src/components/ReportActionItem/IOUAction.js +++ b/src/components/ReportActionItem/IOUAction.js @@ -67,7 +67,7 @@ const defaultProps = { const IOUAction = (props) => { const launchDetailsModal = () => { - Navigation.navigate(ROUTES.getReportRoute(props.action.originalMessage.IOUReportID)); + Navigation.navigate(ROUTES.getIouDetailsRoute(props.chatReportID, props.action.originalMessage.IOUReportID)); }; const shouldShowIOUPreview = ( diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js index e05c3613207d..0c848b9a48c9 100644 --- a/src/libs/OptionsListUtils.js +++ b/src/libs/OptionsListUtils.js @@ -110,9 +110,7 @@ function getPolicyExpenseReportOptions(report) { } const filteredPolicyExpenseReports = _.filter(policyExpenseReports, policyExpenseReport => policyExpenseReport.policyID === report.policyID); return _.map(filteredPolicyExpenseReports, (expenseReport) => { - const policyExpenseChatAvatarSource = lodashGet(policies, [ - `${ONYXKEYS.COLLECTION.POLICY}${expenseReport.policyID}`, 'avatar', - ]) || ReportUtils.getDefaultWorkspaceAvatar(expenseReport.displayName); + const policyExpenseChatAvatarSource = ReportUtils.getWorkspaceAvatar(expenseReport, policies); return { ...expenseReport, keyForList: expenseReport.policyID, diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js index c3bdcb47791a..0f1e4b4d49c6 100644 --- a/src/libs/ReportUtils.js +++ b/src/libs/ReportUtils.js @@ -104,7 +104,6 @@ function getReportParticipantsTitle(logins) { * @param {Object} report * @returns {Boolean} */ -// eslint-disable-next-line no-unused-vars function isExpenseReport(report) { return lodashGet(report, 'type') === CONST.REPORT.TYPE.EXPENSE; } @@ -689,9 +688,7 @@ function getIcons(report, personalDetails, policies, defaultIcon = null) { `${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`, 'name', ]); - const policyExpenseChatAvatarSource = lodashGet(policies, [ - `${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`, 'avatar', - ]) || getDefaultWorkspaceAvatar(workspaceName); + const policyExpenseChatAvatarSource = getWorkspaceAvatar(report, policies); // Return the workspace avatar if the user is the owner of the policy expense chat if (report.isOwnPolicyExpenseChat && !isExpenseReport(report)) { diff --git a/src/styles/styles.js b/src/styles/styles.js index 4799042bba0e..3820967ebe60 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -3117,12 +3117,16 @@ const styles = { }, newKansasLarge: { - fontFamily: fontFamily.EXP_NEW_KANSAS_MEDIUM, + ...headlineFont, fontSize: variables.fontSizeXLarge, - fontWeight: '500', lineHeight: 27, }, + moneyRequestHeaderCheckmark: { + marginLeft: 5, + alignSelf: 'center', + }, + loginHeroBody: { fontFamily: fontFamily.EXP_NEUE, fontSize: variables.fontSizeSignInHeroBody, From e58f154b10056f723d893f745e6b4f4879cce19d Mon Sep 17 00:00:00 2001 From: Yuwen Memon Date: Tue, 2 May 2023 11:36:45 -0700 Subject: [PATCH 14/23] Remove policies param from getWorkspaceAvatar --- src/components/MoneyRequestHeader.js | 2 +- src/libs/OptionsListUtils.js | 2 +- src/libs/ReportUtils.js | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index d5ca5eb4b2a0..33f78cebf1e3 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -50,7 +50,7 @@ const MoneyRequestHeader = (props) => { const isSettled = /* ReportUtils.isSettled(props.report.reportID); */ false; const isExpenseReport = ReportUtils.isExpenseReport(props.report); const payeeName = isExpenseReport ? ReportUtils.getPolicyName(props.report, props.policies) : ReportUtils.getDisplayNameForParticipant(props.report.managerEmail); - const payeeAvatar = isExpenseReport ? ReportUtils.getWorkspaceAvatar(props.report, props.policies) : ReportUtils.getAvatar(lodashGet(props.personalDetails, [props.report.managerEmail, 'avatar']), props.personalDetails); + const payeeAvatar = isExpenseReport ? ReportUtils.getWorkspaceAvatar(props.report) : ReportUtils.getAvatar(lodashGet(props.personalDetails, [props.report.managerEmail, 'avatar']), props.personalDetails); return ( policyExpenseReport.policyID === report.policyID); return _.map(filteredPolicyExpenseReports, (expenseReport) => { - const policyExpenseChatAvatarSource = ReportUtils.getWorkspaceAvatar(expenseReport, policies); + const policyExpenseChatAvatarSource = ReportUtils.getWorkspaceAvatar(expenseReport); return { ...expenseReport, keyForList: expenseReport.policyID, diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js index efb616c1cca1..87bcf8821973 100644 --- a/src/libs/ReportUtils.js +++ b/src/libs/ReportUtils.js @@ -568,9 +568,9 @@ function getDefaultWorkspaceAvatar(workspaceName) { return !alphaNumeric ? defaultWorkspaceAvatars.WorkspaceBuilding : defaultWorkspaceAvatars[`Workspace${alphaNumeric[0]}`]; } -function getWorkspaceAvatar(report, policies) { - const workspaceName = getPolicyName(report, policies); - return lodashGet(policies, [ +function getWorkspaceAvatar(report) { + const workspaceName = getPolicyName(report, allPolicies); + return lodashGet(allPolicies, [ `${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`, 'avatar', ]) || getDefaultWorkspaceAvatar(workspaceName); } @@ -717,7 +717,7 @@ function getIcons(report, personalDetails, defaultIcon = null) { `${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`, 'name', ]); - const policyExpenseChatAvatarSource = getWorkspaceAvatar(report, allPolicies); + const policyExpenseChatAvatarSource = getWorkspaceAvatar(report); // Return the workspace avatar if the user is the owner of the policy expense chat if (report.isOwnPolicyExpenseChat && !isExpenseReport(report)) { From b6f5732ae00900210f834f6817b21e055d9ddbaf Mon Sep 17 00:00:00 2001 From: Yuwen Memon Date: Tue, 2 May 2023 11:45:30 -0700 Subject: [PATCH 15/23] JSX Linting --- src/components/MoneyRequestHeader.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index 33f78cebf1e3..c51ce997e376 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -1,6 +1,7 @@ import React from 'react'; import {View} from 'react-native'; import PropTypes from 'prop-types'; +import lodashGet from 'lodash/get'; import HeaderWithCloseButton from './HeaderWithCloseButton'; import iouReportPropTypes from '../pages/iouReportPropTypes'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; @@ -17,7 +18,6 @@ import compose from '../libs/compose'; import Navigation from '../libs/Navigation/Navigation'; import ROUTES from '../ROUTES'; import Icon from './Icon'; -import lodashGet from 'lodash/get'; const propTypes = { /** The report currently being looked at */ @@ -49,8 +49,12 @@ const MoneyRequestHeader = (props) => { }); const isSettled = /* ReportUtils.isSettled(props.report.reportID); */ false; const isExpenseReport = ReportUtils.isExpenseReport(props.report); - const payeeName = isExpenseReport ? ReportUtils.getPolicyName(props.report, props.policies) : ReportUtils.getDisplayNameForParticipant(props.report.managerEmail); - const payeeAvatar = isExpenseReport ? ReportUtils.getWorkspaceAvatar(props.report) : ReportUtils.getAvatar(lodashGet(props.personalDetails, [props.report.managerEmail, 'avatar']), props.personalDetails); + const payeeName = isExpenseReport + ? ReportUtils.getPolicyName(props.report, props.policies) + : ReportUtils.getDisplayNameForParticipant(props.report.managerEmail); + const payeeAvatar = isExpenseReport + ? ReportUtils.getWorkspaceAvatar(props.report) + : ReportUtils.getAvatar(lodashGet(props.personalDetails, [props.report.managerEmail, 'avatar']), props.personalDetails); return ( Date: Wed, 3 May 2023 10:25:01 -0700 Subject: [PATCH 16/23] Update src/components/MoneyRequestHeader.js Co-authored-by: David Bondy --- 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 c51ce997e376..15f57c32f55b 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -47,7 +47,7 @@ const MoneyRequestHeader = (props) => { style: 'currency', currency: props.report.currency, }); - const isSettled = /* ReportUtils.isSettled(props.report.reportID); */ false; + const isSettled = false; // TODO: use ReportUtils.isSettled(props.report.reportID) once that method is added const isExpenseReport = ReportUtils.isExpenseReport(props.report); const payeeName = isExpenseReport ? ReportUtils.getPolicyName(props.report, props.policies) From 413a867601166f2e86f3896c253af98628cf07ae Mon Sep 17 00:00:00 2001 From: Yuwen Memon Date: Wed, 3 May 2023 10:41:17 -0700 Subject: [PATCH 17/23] Update src/components/MoneyRequestHeader.js Co-authored-by: Carlos Martins --- 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 15f57c32f55b..8a6ccd383a58 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -79,7 +79,7 @@ const MoneyRequestHeader = (props) => { onBackButtonPress={() => Navigation.navigate(ROUTES.HOME)} /> - To + {props.translate('common.to')} Date: Wed, 3 May 2023 10:41:56 -0700 Subject: [PATCH 18/23] Remove ternary --- src/components/AvatarWithDisplayName.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/AvatarWithDisplayName.js b/src/components/AvatarWithDisplayName.js index f304ea116ecb..2b0213bcbc56 100644 --- a/src/components/AvatarWithDisplayName.js +++ b/src/components/AvatarWithDisplayName.js @@ -88,7 +88,7 @@ const AvatarWithDisplayName = (props) => { textStyles={[styles.headerText, styles.pre]} shouldUseFullTitle={isExpenseReport} /> - {subtitle ? ( + {subtitle && ( { > {subtitle} - ) : null } + )} )} From 89c919aea34f36318deb979e59beb4a409174b22 Mon Sep 17 00:00:00 2001 From: Yuwen Memon Date: Wed, 3 May 2023 10:48:54 -0700 Subject: [PATCH 19/23] Align tooltip --- 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 8a6ccd383a58..5975146504f7 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -73,7 +73,7 @@ const MoneyRequestHeader = (props) => { report={props.report} policies={props.policies} personalDetails={props.personalDetails} - containerStyles={[styles.pt5, styles.pb3]} + containerStyles={[styles.pt5, styles.pb3, styles.pr1]} shouldShowCloseButton={false} shouldShowBackButton={props.isSmallScreenWidth} onBackButtonPress={() => Navigation.navigate(ROUTES.HOME)} From ead5b8c8c0be5637d62741a183473ad4937d708a Mon Sep 17 00:00:00 2001 From: Yuwen Memon Date: Wed, 3 May 2023 14:20:14 -0700 Subject: [PATCH 20/23] Get rid of flex1 for header --- src/components/MoneyRequestHeader.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index 5975146504f7..728ff0a22752 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -81,7 +81,6 @@ const MoneyRequestHeader = (props) => { {props.translate('common.to')} Date: Wed, 3 May 2023 14:58:36 -0700 Subject: [PATCH 21/23] Remove another flex1 --- src/components/AvatarWithDisplayName.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/AvatarWithDisplayName.js b/src/components/AvatarWithDisplayName.js index 2b0213bcbc56..d3833c82932f 100644 --- a/src/components/AvatarWithDisplayName.js +++ b/src/components/AvatarWithDisplayName.js @@ -56,7 +56,6 @@ const AvatarWithDisplayName = (props) => { {Boolean(props.report && title) && ( Date: Wed, 3 May 2023 15:05:32 -0700 Subject: [PATCH 22/23] Add a flex --- src/components/HeaderWithCloseButton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/HeaderWithCloseButton.js b/src/components/HeaderWithCloseButton.js index 37adf18b8ade..0238c2d6dc03 100755 --- a/src/components/HeaderWithCloseButton.js +++ b/src/components/HeaderWithCloseButton.js @@ -165,7 +165,7 @@ class HeaderWithCloseButton extends Component { styles.overflowHidden, ]} > - + {this.props.shouldShowBackButton && ( Date: Thu, 4 May 2023 11:44:33 -0700 Subject: [PATCH 23/23] Fix JS error --- src/components/AvatarWithDisplayName.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AvatarWithDisplayName.js b/src/components/AvatarWithDisplayName.js index d3833c82932f..9fcde2ab8518 100644 --- a/src/components/AvatarWithDisplayName.js +++ b/src/components/AvatarWithDisplayName.js @@ -87,7 +87,7 @@ const AvatarWithDisplayName = (props) => { textStyles={[styles.headerText, styles.pre]} shouldUseFullTitle={isExpenseReport} /> - {subtitle && ( + {!_.isEmpty(subtitle) && (