Add new Profile page #20144
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -55,6 +55,7 @@ const ReportWelcomeText = (props) => { | |
| const isChatRoom = ReportUtils.isChatRoom(props.report); | ||
| const isDefault = !(isChatRoom || isPolicyExpenseChat); | ||
| const participants = lodashGet(props.report, 'participants', []); | ||
| const participantAccountIDs = lodashGet(props.report, 'participantAccountIDs', []); | ||
| const isMultipleParticipant = participants.length > 1; | ||
| const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips(OptionsListUtils.getPersonalDetailsForLogins(participants, props.personalDetails), isMultipleParticipant); | ||
| const roomWelcomeMessage = ReportUtils.getRoomWelcomeMessage(props.report); | ||
|
|
@@ -97,7 +98,7 @@ const ReportWelcomeText = (props) => { | |
| <Tooltip text={tooltip}> | ||
| <Text | ||
| style={[styles.textStrong]} | ||
| onPress={() => Navigation.navigate(ROUTES.getProfileRoute(participantAccountIDs[index]))} | ||
|
There was a problem hiding this comment. This was overlooked. There was a problem hiding this comment. #20583 (comment) for more details about the root cause. There was a problem hiding this comment. Oh wow, that makes total sense. Should've considered that. Thanks for the feedback! |
||
| > | ||
| {displayName} | ||
| </Text> | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,228 @@ | ||
| import React from 'react'; | ||
puneetlath marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| import {View, ScrollView} from 'react-native'; | ||
| import PropTypes from 'prop-types'; | ||
| import _ from 'underscore'; | ||
| import {withOnyx} from 'react-native-onyx'; | ||
| import Str from 'expensify-common/lib/str'; | ||
| import lodashGet from 'lodash/get'; | ||
| import {parsePhoneNumber} from 'awesome-phonenumber'; | ||
| import styles from '../styles/styles'; | ||
| import Text from '../components/Text'; | ||
| import ONYXKEYS from '../ONYXKEYS'; | ||
| import Avatar from '../components/Avatar'; | ||
| import HeaderWithCloseButton from '../components/HeaderWithCloseButton'; | ||
| import Navigation from '../libs/Navigation/Navigation'; | ||
| import ScreenWrapper from '../components/ScreenWrapper'; | ||
| import personalDetailsPropType from './personalDetailsPropType'; | ||
| import withLocalize, {withLocalizePropTypes} from '../components/withLocalize'; | ||
| import compose from '../libs/compose'; | ||
| import CommunicationsLink from '../components/CommunicationsLink'; | ||
| import Tooltip from '../components/Tooltip'; | ||
| import CONST from '../CONST'; | ||
| import * as ReportUtils from '../libs/ReportUtils'; | ||
| import * as Expensicons from '../components/Icon/Expensicons'; | ||
| import MenuItem from '../components/MenuItem'; | ||
| import AttachmentModal from '../components/AttachmentModal'; | ||
| import PressableWithoutFocus from '../components/PressableWithoutFocus'; | ||
| import * as Report from '../libs/actions/Report'; | ||
| import OfflineWithFeedback from '../components/OfflineWithFeedback'; | ||
| import AutoUpdateTime from '../components/AutoUpdateTime'; | ||
| import * as UserUtils from '../libs/UserUtils'; | ||
| import * as PersonalDetails from '../libs/actions/PersonalDetails'; | ||
| import FullScreenLoadingIndicator from '../components/FullscreenLoadingIndicator'; | ||
|
|
||
| const matchType = PropTypes.shape({ | ||
| params: PropTypes.shape({ | ||
| /** accountID passed via route /a/:accountID */ | ||
| accountID: PropTypes.string, | ||
|
|
||
| /** report ID passed */ | ||
| reportID: PropTypes.string, | ||
puneetlath marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| }), | ||
| }); | ||
|
|
||
| const propTypes = { | ||
| /* Onyx Props */ | ||
|
|
||
| /** The personal details of all users */ | ||
| personalDetails: personalDetailsPropType, | ||
puneetlath marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| /** Route params */ | ||
| route: matchType.isRequired, | ||
|
|
||
| /** Login list for the user that is signed in */ | ||
| loginList: PropTypes.shape({ | ||
| /** Date login was validated, used to show info indicator status */ | ||
| validatedDate: PropTypes.string, | ||
|
|
||
| /** Field-specific server side errors keyed by microtime */ | ||
| errorFields: PropTypes.objectOf(PropTypes.objectOf(PropTypes.string)), | ||
puneetlath marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| }), | ||
|
|
||
| ...withLocalizePropTypes, | ||
| }; | ||
|
|
||
| const defaultProps = { | ||
| // When opening someone else's profile (via deep link) before login, this is empty | ||
| personalDetails: {}, | ||
| loginList: {}, | ||
| }; | ||
|
|
||
| /** | ||
| * Gets the phone number to display for SMS logins | ||
| * | ||
| * @param {Object} details | ||
| * @param {String} details.login | ||
| * @param {String} details.displayName | ||
| * @returns {String} | ||
| */ | ||
| const getPhoneNumber = (details) => { | ||
| // If the user hasn't set a displayName, it is set to their phone number, so use that | ||
| const displayName = lodashGet(details, 'displayName', ''); | ||
| const parsedPhoneNumber = parsePhoneNumber(displayName); | ||
| if (parsedPhoneNumber.possible) { | ||
| return parsedPhoneNumber.number.e164; | ||
| } | ||
|
|
||
| // If the user has set a displayName, get the phone number from the SMS login | ||
| return details.login ? Str.removeSMSDomain(details.login) : ''; | ||
| }; | ||
|
|
||
| class ProfilePage extends React.PureComponent { | ||
puneetlath marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| componentDidMount() { | ||
| PersonalDetails.openPublicProfilePage(this.props.route.params.accountID); | ||
puneetlath marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| } | ||
|
|
||
| render() { | ||
| const accountID = lodashGet(this.props.route.params, 'accountID', 0); | ||
| const reportID = lodashGet(this.props.route.params, 'reportID', ''); | ||
| const details = lodashGet(this.props.personalDetails, accountID, {}); | ||
| const displayName = details.displayName ? details.displayName : this.props.translate('common.hidden'); | ||
| const avatar = lodashGet(details, 'avatar', UserUtils.getDefaultAvatar()); | ||
| const originalFileName = lodashGet(details, 'originalFileName', ''); | ||
| const login = lodashGet(details, 'login', ''); | ||
| const timezone = lodashGet(details, 'timezone', {}); | ||
|
|
||
| // If we have a reportID param this means that we | ||
| // arrived here via the ParticipantsPage and should be allowed to navigate back to it | ||
| const shouldShowBackButton = Boolean(reportID); | ||
puneetlath marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| const shouldShowLocalTime = !ReportUtils.hasAutomatedExpensifyEmails([login]) && !_.isEmpty(timezone); | ||
|
|
||
| let pronouns = lodashGet(details, 'pronouns', ''); | ||
| if (pronouns && pronouns.startsWith(CONST.PRONOUNS.PREFIX)) { | ||
| const localeKey = pronouns.replace(CONST.PRONOUNS.PREFIX, ''); | ||
| pronouns = this.props.translate(`pronouns.${localeKey}`); | ||
| } | ||
|
|
||
| const isSMSLogin = Str.isSMSLogin(login); | ||
| const phoneNumber = getPhoneNumber(details); | ||
| const phoneOrEmail = isSMSLogin ? getPhoneNumber(details) : login; | ||
|
|
||
| const isCurrentUser = _.keys(this.props.loginList).includes(login); | ||
|
|
||
| return ( | ||
| <ScreenWrapper> | ||
| <HeaderWithCloseButton | ||
| title={this.props.translate('common.profile')} | ||
| shouldShowBackButton={shouldShowBackButton} | ||
| onBackButtonPress={() => Navigation.goBack()} | ||
| onCloseButtonPress={() => Navigation.dismissModal()} | ||
| /> | ||
| <View | ||
| pointerEvents="box-none" | ||
| style={[styles.containerWithSpaceBetween]} | ||
| > | ||
| {_.isEmpty(details) ? ( | ||
| <FullScreenLoadingIndicator style={styles.flex1} /> | ||
| ) : ( | ||
| <ScrollView> | ||
| <View style={styles.avatarSectionWrapper}> | ||
| <AttachmentModal | ||
| headerTitle={displayName} | ||
| source={UserUtils.getFullSizeAvatar(avatar, login || accountID)} | ||
| isAuthTokenRequired | ||
| originalFileName={originalFileName} | ||
| > | ||
| {({show}) => ( | ||
| <PressableWithoutFocus | ||
| style={styles.noOutline} | ||
| onPress={show} | ||
| > | ||
| <OfflineWithFeedback pendingAction={lodashGet(details, 'pendingFields.avatar', null)}> | ||
| <Avatar | ||
| containerStyles={[styles.avatarLarge, styles.mb3]} | ||
| imageStyles={[styles.avatarLarge]} | ||
| source={UserUtils.getAvatar(avatar, login || accountID)} | ||
puneetlath marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| size={CONST.AVATAR_SIZE.LARGE} | ||
| /> | ||
| </OfflineWithFeedback> | ||
| </PressableWithoutFocus> | ||
| )} | ||
| </AttachmentModal> | ||
| {Boolean(displayName) && ( | ||
| <Text | ||
| style={[styles.textHeadline, styles.mb6, styles.pre]} | ||
| numberOfLines={1} | ||
| > | ||
| {displayName} | ||
| </Text> | ||
| )} | ||
| {login ? ( | ||
| <View style={[styles.mb6, styles.detailsPageSectionContainer, styles.w100]}> | ||
| <Text | ||
| style={[styles.textLabelSupporting, styles.mb1]} | ||
| numberOfLines={1} | ||
| > | ||
| {this.props.translate(isSMSLogin ? 'common.phoneNumber' : 'common.email')} | ||
| </Text> | ||
| <CommunicationsLink value={phoneOrEmail}> | ||
| <Tooltip text={phoneOrEmail}> | ||
| <Text numberOfLines={1}>{isSMSLogin ? this.props.formatPhoneNumber(phoneNumber) : login}</Text> | ||
| </Tooltip> | ||
| </CommunicationsLink> | ||
| </View> | ||
| ) : null} | ||
| {pronouns ? ( | ||
| <View style={[styles.mb6, styles.detailsPageSectionContainer]}> | ||
| <Text | ||
| style={[styles.textLabelSupporting, styles.mb1]} | ||
| numberOfLines={1} | ||
| > | ||
| {this.props.translate('profilePage.preferredPronouns')} | ||
| </Text> | ||
| <Text numberOfLines={1}>{pronouns}</Text> | ||
| </View> | ||
| ) : null} | ||
| {shouldShowLocalTime && <AutoUpdateTime timezone={timezone} />} | ||
| </View> | ||
| {!isCurrentUser && Boolean(login) && ( | ||
| <MenuItem | ||
| title={`${this.props.translate('common.message')}${displayName}`} | ||
| icon={Expensicons.ChatBubble} | ||
| onPress={() => Report.navigateToAndOpenReport([login])} | ||
| wrapperStyle={styles.breakAll} | ||
| shouldShowRightIcon | ||
| /> | ||
| )} | ||
| </ScrollView> | ||
| )} | ||
| </View> | ||
| </ScreenWrapper> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| ProfilePage.propTypes = propTypes; | ||
| ProfilePage.defaultProps = defaultProps; | ||
|
|
||
| export default compose( | ||
| withLocalize, | ||
| withOnyx({ | ||
| personalDetails: { | ||
| key: ONYXKEYS.PERSONAL_DETAILS_LIST, | ||
| }, | ||
| loginList: { | ||
| key: ONYXKEYS.LOGIN_LIST, | ||
| }, | ||
| }), | ||
| )(ProfilePage); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👋 Just a heads-up that this has caused a regression in #21969
Deep linking wasn't working for the new PROFILE route.
When adding a new route we should also add it to App/well-known
/apple-app-site-association for iOS
And to AndroidManifest.xml for Android
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh wow. I had no idea. Can we make that obvious somehow? Like with a checklist item or lint rule or something.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@puneetlath, I proposed to add a checklist item in https://expensify.slack.com/archives/C049HHMV9SM/p1690395182200269
Looks like we should add it, I'll do that tomorrow (not sure what the process is just yet, will find it)