Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix avatars missing in IOU preview #18568

Merged
merged 2 commits into from
May 8, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 14 additions & 2 deletions src/components/ReportActionItem/IOUPreview.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import PropTypes from 'prop-types';
import {withOnyx} from 'react-native-onyx';
import lodashGet from 'lodash/get';
import _ from 'underscore';
import Str from 'expensify-common/lib/str';
import compose from '../../libs/compose';
import styles from '../../styles/styles';
import ONYXKEYS from '../../ONYXKEYS';
Expand Down Expand Up @@ -85,6 +86,13 @@ const propTypes = {
/** True if the IOU Preview card is hovered */
isHovered: PropTypes.bool,

/** All of the personal details for everyone */
personalDetails: PropTypes.objectOf(PropTypes.shape({

/** This is either the user's full name, or their login if full name is an empty string */
displayName: PropTypes.string.isRequired,
})),

/** Session info for the currently logged in user. */
session: PropTypes.shape({
/** Currently logged in user email */
Expand Down Expand Up @@ -117,6 +125,7 @@ const defaultProps = {
walletTerms: {},
pendingAction: null,
isHovered: false,
personalDetails: {},
session: {
email: null,
},
Expand All @@ -138,7 +147,7 @@ const IOUPreview = (props) => {
// When displaying within a IOUDetailsModal we cannot guarentee that participants are included in the originalMessage data
// Because an IOUPreview of type split can never be rendered within the IOUDetailsModal, manually building the email array is only needed for non-billSplit ious
const participantEmails = props.isBillSplit ? props.action.originalMessage.participants : [managerEmail, ownerEmail];
const participantAvatars = OptionsListUtils.getAvatarsForLogins(participantEmails);
const participantAvatars = OptionsListUtils.getAvatarsForLogins(participantEmails, props.personalDetails);

// Pay button should only be visible to the manager of the report.
const isCurrentUserManager = managerEmail === sessionEmail;
Expand Down Expand Up @@ -210,7 +219,7 @@ const IOUPreview = (props) => {
</Text>
)}

<Text>{lodashGet(props.action, 'originalMessage.comment', '')}</Text>
<Text>{Str.htmlDecode(lodashGet(props.action, 'originalMessage.comment', ''))}</Text>

{(isCurrentUserManager
&& !props.shouldHidePayButton
Expand Down Expand Up @@ -254,6 +263,9 @@ IOUPreview.displayName = 'IOUPreview';
export default compose(
withLocalize,
withOnyx({
personalDetails: {
key: ONYXKEYS.PERSONAL_DETAILS,
},
iouReport: {
key: ({iouReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${iouReportID}`,
},
Expand Down
2 changes: 1 addition & 1 deletion src/pages/workspace/WorkspaceInviteMessagePage.js
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,7 @@ class WorkspaceInviteMessagePage extends React.Component {
<View style={[styles.mv4, styles.justifyContentCenter, styles.alignItemsCenter]}>
<MultipleAvatars
size={CONST.AVATAR_SIZE.LARGE}
icons={OptionsListUtils.getAvatarsForLogins(this.props.invitedMembersDraft)}
icons={OptionsListUtils.getAvatarsForLogins(this.props.invitedMembersDraft, this.props.personalDetails)}
shouldStackHorizontally
secondAvatarStyle={[
styles.secondAvatarInline,
Expand Down