Add feature to view Profile Picture in full screen

src/components/AttachmentModal.js

@@ -25,9 +25,6 @@ import TextWithEllipsis from './TextWithEllipsis';
  */
 
 const propTypes = {
-    /** Determines title of the modal header depending on if we are uploading an attachment or not */
-    isUploadingAttachment: PropTypes.bool,
-
     /** Optional source URL for the image shown. If not passed in via props must be specified when modal is opened. */
     sourceURL: PropTypes.string,
 
@@ -46,17 +43,24 @@ const propTypes = {
     /** Do the urls require an authToken? */
     isAuthTokenRequired: PropTypes.bool,
 
+    /** Determines if download Button should be shown or not */
+    allowDownload: PropTypes.bool,
+
+    /** Title shown in the header of the modal */
+    headerTitle: PropTypes.string,
+
     ...withLocalizePropTypes,
 
     ...windowDimensionsPropTypes,
 };
 
 const defaultProps = {
-    isUploadingAttachment: false,
     sourceURL: null,
     onConfirm: null,
     originalFileName: null,
     isAuthTokenRequired: false,
+    allowDownload: false,
+    headerTitle: null,
     onModalHide: () => {},
 };
 
@@ -145,6 +149,7 @@ class AttachmentModal extends PureComponent {
             : [styles.imageModalImageCenterContainer, styles.p5];
 
         const {fileName, fileExtension} = this.splitExtensionFromFileName();
+
         return (
             <>
                 <Modal
@@ -157,11 +162,9 @@ class AttachmentModal extends PureComponent {
                     propagateSwipe
                 >
                     <HeaderWithCloseButton
-                        title={this.props.isUploadingAttachment
-                            ? this.props.translate('reportActionCompose.sendAttachment')
-                            : this.props.translate('common.attachment')}
+                        title={this.props.headerTitle}
                         shouldShowBorderBottom
-                        shouldShowDownloadButton={!this.props.isUploadingAttachment}
+                        shouldShowDownloadButton={this.props.allowDownload}
                         onDownloadButtonPress={() => fileDownload(sourceURL, this.props.originalFileName)}
                         onCloseButtonPress={() => this.setState({isModalOpen: false})}
                         subtitle={(

src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import htmlRendererPropTypes from './htmlRendererPropTypes';
 import Config from '../../../CONFIG';
-import AttachmentModal from '../../AttachmentModal';
+import PreviewAttachmentModal from '../../PreviewAttachmentModal';
 import styles from '../../../styles/styles';
 import ThumbnailImage from '../../ThumbnailImage';
 import PressableWithoutFocus from '../../PressableWithoutFocus';
@@ -45,7 +45,7 @@ const ImageRenderer = (props) => {
     );
 
     return (
-        <AttachmentModal
+        <PreviewAttachmentModal
             sourceURL={source}
             isAuthTokenRequired={isAttachment}
             originalFileName={originalFileName}
@@ -62,7 +62,7 @@ const ImageRenderer = (props) => {
                     />
                 </PressableWithoutFocus>
             )}
-        </AttachmentModal>
+        </PreviewAttachmentModal>
     );
 };
 

src/components/PreviewAttachmentModal.js

@@ -0,0 +1,37 @@
+import _ from 'underscore';
+import React from 'react';
+import PropTypes from 'prop-types';
+import AttachmentModal from './AttachmentModal';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
+
+const propTypes = {
+    /** Determines title of the modal header depending on if we are viewing a profile picture or not */
+    isProfilePicture: PropTypes.bool,
+
+    /** DisplayName to be used as headerTitle if isProfilePicture is true. */
+    displayName: PropTypes.string,
+
+    ...withLocalizePropTypes,
+};
+
+const defaultProps = {
+    isProfilePicture: false,
+    displayName: null,
+};
+
+const PreviewAttachmentModal = (props) => {
+    const propsToPass = _.omit(props, 'displayName', 'isProfilePicture');
+    return (
+        <AttachmentModal
+            headerTitle={props.isProfilePicture ? props.displayName : props.translate('common.attachment')}
+            allowDownload={!props.isProfilePicture}
+            /* eslint-disable-next-line react/jsx-props-no-spreading */
+            {...propsToPass}
+        />
+    );
+};
+
+PreviewAttachmentModal.propTypes = propTypes;
+PreviewAttachmentModal.defaultProps = defaultProps;
+PreviewAttachmentModal.displayName = 'PreviewAttachmentModal';
+export default withLocalize(PreviewAttachmentModal);

src/components/UploadAttachmentModal.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import AttachmentModal from './AttachmentModal';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
+
+const propTypes = {
+    ...withLocalizePropTypes,
+};
+
+const UploadAttachmentModal = props => (
+    <AttachmentModal
+        headerTitle={props.translate('reportActionCompose.sendAttachment')}
+        /* eslint-disable-next-line react/jsx-props-no-spreading */
+        {...props}
+    />
+);
+
+UploadAttachmentModal.propTypes = propTypes;
+UploadAttachmentModal.displayName = 'UploadAttachmentModal';
+export default withLocalize(UploadAttachmentModal);

src/libs/actions/PersonalDetails.js

@@ -99,6 +99,7 @@ function formatPersonalDetails(personalDetailsList) {
         const lastName = details.lastName || '';
         const payPalMeAddress = details.expensify_payPalMeAddress || '';
         const phoneNumber = details.phoneNumber || '';
+        const avatarHighResolution = details.avatar || details.avatarThumbnail;
         formattedResult[sanitizedLogin] = {
             login: sanitizedLogin,
             avatar,
@@ -109,6 +110,7 @@ function formatPersonalDetails(personalDetailsList) {
             timezone,
             payPalMeAddress,
             phoneNumber,
+            avatarHighResolution,
         };
     });
     Timing.end(CONST.TIMING.PERSONAL_DETAILS_FORMATTED);

src/pages/DetailsPage.js

@@ -20,6 +20,8 @@ import * as ReportUtils from '../libs/reportUtils';
 import DateUtils from '../libs/DateUtils';
 import * as Expensicons from '../components/Icon/Expensicons';
 import MenuItem from '../components/MenuItem';
+import PreviewAttachmentModal from '../components/PreviewAttachmentModal';
+import PressableWithoutFocus from '../components/PressableWithoutFocus';
 import * as Report from '../libs/actions/Report';
 
 const matchType = PropTypes.shape({
@@ -98,11 +100,25 @@ const DetailsPage = (props) => {
                 {details ? (
                     <ScrollView>
                         <View style={styles.pageWrapper}>
-                            <Avatar
-                                containerStyles={[styles.avatarLarge, styles.mb3]}
-                                imageStyles={[styles.avatarLarge]}
-                                source={details.avatar}
-                            />
+                            <PreviewAttachmentModal
+                                sourceURL={details.avatarHighResolution}
+                                isAuthTokenRequired
+                                displayName={isSMSLogin ? props.toLocalPhone(details.displayName) : details.displayName}
+                                isProfilePicture
+                            >
+                                {({show}) => (
+                                    <PressableWithoutFocus
+                                        style={styles.noOutline}
+                                        onPress={show}
+                                    >
+                                        <Avatar
+                                            containerStyles={[styles.avatarLarge, styles.mb3]}
+                                            imageStyles={[styles.avatarLarge]}
+                                            source={details.avatar}
+                                        />
+                                    </PressableWithoutFocus>
+                                )}
+                            </PreviewAttachmentModal>
                             {details.displayName && (
                                 <Text style={[styles.displayName, styles.mb6]} numberOfLines={1}>
                                     {isSMSLogin ? props.toLocalPhone(details.displayName) : details.displayName}

src/pages/home/report/ReportActionCompose.js

@@ -19,7 +19,7 @@ import * as Expensicons from '../../../components/Icon/Expensicons';
 import AttachmentPicker from '../../../components/AttachmentPicker';
 import * as Report from '../../../libs/actions/Report';
 import ReportTypingIndicator from './ReportTypingIndicator';
-import AttachmentModal from '../../../components/AttachmentModal';
+import UploadAttachmentModal from '../../../components/UploadAttachmentModal';
 import compose from '../../../libs/compose';
 import PopoverMenu from '../../../components/PopoverMenu';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
@@ -413,7 +413,7 @@ class ReportActionCompose extends React.Component {
                     styles.flexRow,
                 ]}
                 >
-                    <AttachmentModal
+                    <UploadAttachmentModal
                         isUploadingAttachment
                         onConfirm={(file) => {
                             this.submitForm();
@@ -552,7 +552,7 @@ class ReportActionCompose extends React.Component {
                                 />
                             </>
                         )}
-                    </AttachmentModal>
+                    </UploadAttachmentModal>
                     {canUseTouchScreen() && this.props.isMediumScreenWidth ? null : (
                         <EmojiPickerButton
                             isDisabled={isBlockedFromConcierge}