From cb4d866dd18d98ab8c94ccc73efea674b4e204c5 Mon Sep 17 00:00:00 2001 From: Alex Beaman Date: Tue, 20 Jun 2023 15:35:53 +0300 Subject: [PATCH 1/8] Rename to make var more clear --- src/pages/iou/MoneyRequestModal.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/iou/MoneyRequestModal.js b/src/pages/iou/MoneyRequestModal.js index 6d3e5e3d19b05..9c3f9b878b507 100644 --- a/src/pages/iou/MoneyRequestModal.js +++ b/src/pages/iou/MoneyRequestModal.js @@ -52,7 +52,7 @@ const propTypes = { }), /** Personal details of all the users */ - personalDetails: PropTypes.shape({ + allPersonalDetails: PropTypes.shape({ /** Primary login of participant */ login: PropTypes.string, @@ -81,7 +81,7 @@ const defaultProps = { currentUserPersonalDetails: { localCurrencyCode: CONST.CURRENCY.USD, }, - personalDetails: {}, + allPersonalDetails: {}, iou: { error: false, selectedCurrencyCode: null, @@ -108,7 +108,7 @@ function MoneyRequestModal(props) { const [selectedOptions, setSelectedOptions] = useState( ReportUtils.isPolicyExpenseChat(props.report) ? OptionsListUtils.getPolicyExpenseReportOptions(props.report) - : OptionsListUtils.getParticipantsOptions(props.report, props.personalDetails), + : OptionsListUtils.getParticipantsOptions(props.report, props.allPersonalDetails), ); const [amount, setAmount] = useState(0); @@ -442,7 +442,7 @@ export default compose( iou: { key: ONYXKEYS.IOU, }, - personalDetails: { + allPersonalDetails: { key: ONYXKEYS.PERSONAL_DETAILS_LIST, }, }), From badbbd0ec0717474581bf3c0275df791025720e7 Mon Sep 17 00:00:00 2001 From: Alex Beaman Date: Tue, 20 Jun 2023 15:36:31 +0300 Subject: [PATCH 2/8] Add appropriate defaults --- src/libs/OptionsListUtils.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js index 9934880eb9050..38f4aa3e38502 100644 --- a/src/libs/OptionsListUtils.js +++ b/src/libs/OptionsListUtils.js @@ -216,18 +216,19 @@ function isPersonalDetailsReady(personalDetails) { function getParticipantsOptions(report, personalDetails) { const participants = lodashGet(report, 'participantAccountIDs', []); return _.map(getPersonalDetailsForAccountIDs(participants, personalDetails), (details) => ({ - keyForList: details.login, - login: details.login, + keyForList: details.login || details.displayName || String(details.accountID), + login: details.login || details.displayName, accountID: details.accountID, text: details.displayName, firstName: lodashGet(details, 'firstName', ''), lastName: lodashGet(details, 'lastName', ''), - alternateText: Str.isSMSLogin(details.login || '') ? LocalePhoneNumber.formatPhoneNumber(details.login) : details.login, + alternateText: Str.isSMSLogin(details.login || '') ? LocalePhoneNumber.formatPhoneNumber(details.login) : details.login || details.displayName, icons: [ { source: UserUtils.getAvatar(details.avatar, details.accountID), name: details.login, type: CONST.ICON_TYPE_AVATAR, + id: details.accountID, }, ], payPalMeAddress: lodashGet(details, 'payPalMeAddress', ''), @@ -857,12 +858,13 @@ function getSearchOptions(reports, personalDetails, searchValue = '', betas) { function getIOUConfirmationOptionsFromPayeePersonalDetail(personalDetail, amountText) { return { text: personalDetail.displayName ? personalDetail.displayName : personalDetail.login, - alternateText: personalDetail.login, + alternateText: personalDetail.login || personalDetail.displayName, icons: [ { source: UserUtils.getAvatar(personalDetail.avatar, personalDetail.accountID), name: personalDetail.login, type: CONST.ICON_TYPE_AVATAR, + id: personalDetail.accountID, }, ], descriptiveText: amountText, From 98a739e1b8010cc9abb01550c20853f5e1058f10 Mon Sep 17 00:00:00 2001 From: Alex Beaman Date: Tue, 20 Jun 2023 15:37:05 +0300 Subject: [PATCH 3/8] Make var names clearer & use accountIDs more --- src/components/MoneyRequestConfirmationList.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index 15239b09dd796..05d56f390b2a2 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -155,7 +155,7 @@ function MoneyRequestConfirmationList(props) { const formattedParticipantsList = _.union(formattedSelectedParticipants, formattedUnselectedParticipants); const myIOUAmount = IOUUtils.calculateAmount(selectedParticipants.length, props.iouAmount, true); - const formattedPayeePersonalDetails = OptionsListUtils.getIOUConfirmationOptionsFromPayeePersonalDetail( + const formattedPayeeOption = OptionsListUtils.getIOUConfirmationOptionsFromPayeePersonalDetail( payeePersonalDetails, CurrencyUtils.convertToDisplayString(myIOUAmount, props.iouCurrencyCode), ); @@ -163,7 +163,7 @@ function MoneyRequestConfirmationList(props) { sections.push( { title: translate('moneyRequestConfirmationList.whoPaid'), - data: [formattedPayeePersonalDetails], + data: [formattedPayeeOption], shouldShow: true, indexOffset: 0, }, @@ -211,13 +211,13 @@ function MoneyRequestConfirmationList(props) { const toggleOption = useCallback( (option) => { // Return early if selected option is currently logged in user. - if (option.login === props.session.email) { + if (option.accountID === props.session.accountID) { return; } setParticipants((prevParticipants) => { const newParticipants = _.map(prevParticipants, (participant) => { - if (participant.login === option.login) { + if (participant.accountID === option.accountID) { return {...participant, selected: !participant.selected}; } return participant; @@ -225,7 +225,7 @@ function MoneyRequestConfirmationList(props) { return newParticipants; }); }, - [props.session.email], + [props.session.accountID], ); /** From b22d5857415a3837d83ab2ae5e86cb7eeae14623 Mon Sep 17 00:00:00 2001 From: Alex Beaman Date: Tue, 20 Jun 2023 16:10:02 +0300 Subject: [PATCH 4/8] accountID should always exist and be unique --- src/libs/OptionsListUtils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js index 38f4aa3e38502..f5d8c7703d1ea 100644 --- a/src/libs/OptionsListUtils.js +++ b/src/libs/OptionsListUtils.js @@ -216,7 +216,7 @@ function isPersonalDetailsReady(personalDetails) { function getParticipantsOptions(report, personalDetails) { const participants = lodashGet(report, 'participantAccountIDs', []); return _.map(getPersonalDetailsForAccountIDs(participants, personalDetails), (details) => ({ - keyForList: details.login || details.displayName || String(details.accountID), + keyForList: String(details.accountID), login: details.login || details.displayName, accountID: details.accountID, text: details.displayName, From 45160f4f3b25e8318ec9c41d73735fce80c265d7 Mon Sep 17 00:00:00 2001 From: Alex Beaman Date: Tue, 20 Jun 2023 16:43:41 +0300 Subject: [PATCH 5/8] These are money request reports --- src/libs/OptionsListUtils.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js index f5d8c7703d1ea..57974e0effdc9 100644 --- a/src/libs/OptionsListUtils.js +++ b/src/libs/OptionsListUtils.js @@ -217,7 +217,7 @@ function getParticipantsOptions(report, personalDetails) { const participants = lodashGet(report, 'participantAccountIDs', []); return _.map(getPersonalDetailsForAccountIDs(participants, personalDetails), (details) => ({ keyForList: String(details.accountID), - login: details.login || details.displayName, + login: details.login, accountID: details.accountID, text: details.displayName, firstName: lodashGet(details, 'firstName', ''), @@ -233,6 +233,7 @@ function getParticipantsOptions(report, personalDetails) { ], payPalMeAddress: lodashGet(details, 'payPalMeAddress', ''), phoneNumber: lodashGet(details, 'phoneNumber', ''), + isMoneyRequestReport: true, })); } From bcda4170c69e64acc82d96222d1973751a9599dc Mon Sep 17 00:00:00 2001 From: Alex Beaman Date: Tue, 20 Jun 2023 16:58:59 +0300 Subject: [PATCH 6/8] Remove thing we might add back --- src/libs/OptionsListUtils.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js index 57974e0effdc9..e9e4a2f636a3a 100644 --- a/src/libs/OptionsListUtils.js +++ b/src/libs/OptionsListUtils.js @@ -233,7 +233,6 @@ function getParticipantsOptions(report, personalDetails) { ], payPalMeAddress: lodashGet(details, 'payPalMeAddress', ''), phoneNumber: lodashGet(details, 'phoneNumber', ''), - isMoneyRequestReport: true, })); } From 1f09dde2ad796dda0d50fca3c0817ceff04c82b4 Mon Sep 17 00:00:00 2001 From: Alex Beaman Date: Tue, 20 Jun 2023 16:59:17 +0300 Subject: [PATCH 7/8] Fix default option if accountID exists --- src/components/OptionRow.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js index aa4cde948447b..1a8725e592b7c 100644 --- a/src/components/OptionRow.js +++ b/src/components/OptionRow.js @@ -135,7 +135,7 @@ class OptionRow extends Component { // We only create tooltips for the first 10 users or so since some reports have hundreds of users, causing performance to degrade. const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips( - (this.props.option.participantsList || this.props.option.login ? [this.props.option] : []).slice(0, 10), + (this.props.option.participantsList || this.props.option.accountID ? [this.props.option] : []).slice(0, 10), isMultipleParticipant, ); let subscriptColor = themeColors.appBG; From e8644ea69cc18d9ca4f242cd045c134c55dd3ec3 Mon Sep 17 00:00:00 2001 From: Alex Beaman Date: Tue, 20 Jun 2023 18:24:24 +0300 Subject: [PATCH 8/8] Use accountIDs for matching selected options --- src/components/OptionsList/BaseOptionsList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/OptionsList/BaseOptionsList.js b/src/components/OptionsList/BaseOptionsList.js index df14af5234bd9..9c5777e222c97 100644 --- a/src/components/OptionsList/BaseOptionsList.js +++ b/src/components/OptionsList/BaseOptionsList.js @@ -168,7 +168,7 @@ class BaseOptionsList extends Component { hoverStyle={this.props.optionHoveredStyle} optionIsFocused={!this.props.disableFocusOptions && !isDisabled && this.props.focusedIndex === index + section.indexOffset} onSelectRow={this.props.onSelectRow} - isSelected={Boolean(_.find(this.props.selectedOptions, (option) => option.login === item.login))} + isSelected={Boolean(_.find(this.props.selectedOptions, (option) => option.accountID === item.accountID))} showSelectedState={this.props.canSelectMultipleOptions} boldStyle={this.props.boldStyle} isDisabled={isDisabled}