🍒 Cherry pick PR #32516 to staging 🍒

android/app/build.gradle

@@ -91,8 +91,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001040800
-        versionName "1.4.8-0"
+        versionCode 1001040801
+        versionName "1.4.8-1"
     }
 
     flavorDimensions "default"

ios/NewExpensify/Info.plist

@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.4.8.0</string>
+	<string>1.4.8.1</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/NewExpensifyTests/Info.plist

@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.4.8.0</string>
+	<string>1.4.8.1</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.4.8-0",
+  "version": "1.4.8-1",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

src/components/AttachmentModal.js

@@ -90,9 +90,6 @@ const propTypes = {
 
     /** Denotes whether it is a workspace avatar or not */
     isWorkspaceAvatar: PropTypes.bool,
-
-    /** Whether it is a receipt attachment or not */
-    isReceiptAttachment: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -110,7 +107,6 @@ const defaultProps = {
     onModalHide: () => {},
     onCarouselAttachmentChange: () => {},
     isWorkspaceAvatar: false,
-    isReceiptAttachment: false,
 };
 
 function AttachmentModal(props) {
@@ -122,6 +118,7 @@ function AttachmentModal(props) {
     const [isAttachmentInvalid, setIsAttachmentInvalid] = useState(false);
     const [isDeleteReceiptConfirmModalVisible, setIsDeleteReceiptConfirmModalVisible] = useState(false);
     const [isAuthTokenRequired, setIsAuthTokenRequired] = useState(props.isAuthTokenRequired);
+    const [isAttachmentReceipt, setIsAttachmentReceipt] = useState(null);
     const [attachmentInvalidReasonTitle, setAttachmentInvalidReasonTitle] = useState('');
     const [attachmentInvalidReason, setAttachmentInvalidReason] = useState(null);
     const [source, setSource] = useState(props.source);
@@ -157,6 +154,7 @@ function AttachmentModal(props) {
         (attachment) => {
             setSource(attachment.source);
             setFile(attachment.file);
+            setIsAttachmentReceipt(attachment.isReceipt);
             setIsAuthTokenRequired(attachment.isAuthTokenRequired);
             onCarouselAttachmentChange(attachment);
         },
@@ -359,7 +357,7 @@ function AttachmentModal(props) {
     const sourceForAttachmentView = props.source || source;
 
     const threeDotsMenuItems = useMemo(() => {
-        if (!props.isReceiptAttachment || !props.parentReport || !props.parentReportActions) {
+        if (!isAttachmentReceipt || !props.parentReport || !props.parentReportActions) {
             return [];
         }
         const menuItems = [];
@@ -394,17 +392,17 @@ function AttachmentModal(props) {
         }
         return menuItems;
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.isReceiptAttachment, props.parentReport, props.parentReportActions, props.policy, props.transaction, file]);
+    }, [isAttachmentReceipt, props.parentReport, props.parentReportActions, props.policy, props.transaction, file]);
 
     // There are a few things that shouldn't be set until we absolutely know if the file is a receipt or an attachment.
-    // props.isReceiptAttachment will be null until its certain what the file is, in which case it will then be true|false.
+    // isAttachmentReceipt will be null until its certain what the file is, in which case it will then be true|false.
     let headerTitle = props.headerTitle;
     let shouldShowDownloadButton = false;
     let shouldShowThreeDotsButton = false;
-    if (!_.isNull(props.isReceiptAttachment)) {
-        headerTitle = translate(props.isReceiptAttachment ? 'common.receipt' : 'common.attachment');
-        shouldShowDownloadButton = props.allowDownload && isDownloadButtonReadyToBeShown && !props.isReceiptAttachment && !isOffline;
-        shouldShowThreeDotsButton = props.isReceiptAttachment && isModalOpen;
+    if (!_.isNull(isAttachmentReceipt)) {
+        headerTitle = translate(isAttachmentReceipt ? 'common.receipt' : 'common.attachment');
+        shouldShowDownloadButton = props.allowDownload && isDownloadButtonReadyToBeShown && !isAttachmentReceipt && !isOffline;
+        shouldShowThreeDotsButton = isAttachmentReceipt && isModalOpen;
     }
 
     return (
@@ -445,7 +443,7 @@ function AttachmentModal(props) {
                     shouldOverlay
                 />
                 <View style={styles.imageModalImageCenterContainer}>
-                    {!_.isEmpty(props.report) && !props.isReceiptAttachment ? (
+                    {!_.isEmpty(props.report) ? (
                         <AttachmentCarousel
                             report={props.report}
                             onNavigate={onNavigate}
@@ -488,7 +486,7 @@ function AttachmentModal(props) {
                         )}
                     </SafeAreaConsumer>
                 )}
-                {props.isReceiptAttachment && (
+                {isAttachmentReceipt && (
                     <ConfirmModal
                         title={translate('receipt.deleteReceipt')}
                         isVisible={isDeleteReceiptConfirmModalVisible}
@@ -501,7 +499,7 @@ function AttachmentModal(props) {
                     />
                 )}
             </Modal>
-            {!props.isReceiptAttachment && (
+            {!isAttachmentReceipt && (
                 <ConfirmModal
                     title={attachmentInvalidReasonTitle ? translate(attachmentInvalidReasonTitle) : ''}
                     onConfirm={closeConfirmModal}

src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js

@@ -1,16 +1,20 @@
 import {Parser as HtmlParser} from 'htmlparser2';
+import lodashGet from 'lodash/get';
 import _ from 'underscore';
+import * as ReceiptUtils from '@libs/ReceiptUtils';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
+import * as TransactionUtils from '@libs/TransactionUtils';
 import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
 import CONST from '@src/CONST';
 
 /**
  * Constructs the initial component state from report actions
  * @param {Object} parentReportAction
  * @param {Object} reportActions
+ * @param {Object} transaction
  * @returns {Array}
  */
-function extractAttachmentsFromReport(parentReportAction, reportActions) {
+function extractAttachmentsFromReport(parentReportAction, reportActions, transaction) {
     const actions = [parentReportAction, ...ReportActionsUtils.getSortedReportActions(_.values(reportActions))];
     const attachments = [];
 
@@ -29,16 +33,39 @@ function extractAttachmentsFromReport(parentReportAction, reportActions) {
                 source: tryResolveUrlFromApiRoot(expensifySource || attribs.src),
                 isAuthTokenRequired: Boolean(expensifySource),
                 file: {name: attribs[CONST.ATTACHMENT_ORIGINAL_FILENAME_ATTRIBUTE]},
+                isReceipt: false,
                 hasBeenFlagged: attribs['data-flagged'] === 'true',
             });
         },
     });
 
     _.forEach(actions, (action, key) => {
-        if (!ReportActionsUtils.shouldReportActionBeVisible(action, key) || ReportActionsUtils.isMoneyRequestAction(action)) {
+        if (!ReportActionsUtils.shouldReportActionBeVisible(action, key)) {
             return;
         }
 
+        // We're handling receipts differently here because receipt images are not
+        // part of the report action message, the images are constructed client-side
+        if (ReportActionsUtils.isMoneyRequestAction(action)) {
+            const transactionID = lodashGet(action, ['originalMessage', 'IOUTransactionID']);
+            if (!transactionID) {
+                return;
+            }
+
+            if (TransactionUtils.hasReceipt(transaction)) {
+                const {image} = ReceiptUtils.getThumbnailAndImageURIs(transaction);
+                const isLocalFile = typeof image === 'string' && _.some(CONST.ATTACHMENT_LOCAL_URL_PREFIX, (prefix) => image.startsWith(prefix));
+                attachments.unshift({
+                    source: tryResolveUrlFromApiRoot(image),
+                    isAuthTokenRequired: !isLocalFile,
+                    file: {name: transaction.filename},
+                    isReceipt: true,
+                    transactionID,
+                });
+                return;
+            }
+        }
+
         const decision = _.get(action, ['message', 0, 'moderationDecision', 'decision'], '');
         const hasBeenFlagged = decision === CONST.MODERATION.MODERATOR_DECISION_PENDING_HIDE || decision === CONST.MODERATION.MODERATOR_DECISION_HIDDEN;
         const html = _.get(action, ['message', 0, 'html'], '').replace('/>', `data-flagged="${hasBeenFlagged}" data-id="${action.reportActionID}"/>`);

src/components/Attachments/AttachmentCarousel/index.js

@@ -1,3 +1,4 @@
+import lodashGet from 'lodash/get';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {FlatList, Keyboard, PixelRatio, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
@@ -27,7 +28,7 @@ const viewabilityConfig = {
     itemVisiblePercentThreshold: 95,
 };
 
-function AttachmentCarousel({report, reportActions, parentReportActions, source, onNavigate, setDownloadButtonVisibility, translate}) {
+function AttachmentCarousel({report, reportActions, parentReportActions, source, onNavigate, setDownloadButtonVisibility, translate, transaction}) {
     const styles = useThemeStyles();
     const scrollRef = useRef(null);
 
@@ -38,12 +39,21 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
     const [attachments, setAttachments] = useState([]);
     const [activeSource, setActiveSource] = useState(source);
     const [shouldShowArrows, setShouldShowArrows, autoHideArrows, cancelAutoHideArrows] = useCarouselArrows();
+    const [isReceipt, setIsReceipt] = useState(false);
 
-    const compareImage = useCallback((attachment) => attachment.source === source, [source]);
+    const compareImage = useCallback(
+        (attachment) => {
+            if (attachment.isReceipt && isReceipt) {
+                return attachment.transactionID === transaction.transactionID;
+            }
+            return attachment.source === source;
+        },
+        [source, isReceipt, transaction],
+    );
 
     useEffect(() => {
         const parentReportAction = parentReportActions[report.parentReportActionID];
-        const attachmentsFromReport = extractAttachmentsFromReport(parentReportAction, reportActions);
+        const attachmentsFromReport = extractAttachmentsFromReport(parentReportAction, reportActions, transaction);
 
         const initialPage = _.findIndex(attachmentsFromReport, compareImage);
 
@@ -78,10 +88,12 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
             // to get the index of the current page
             const entry = _.first(viewableItems);
             if (!entry) {
+                setIsReceipt(false);
                 setActiveSource(null);
                 return;
             }
 
+            setIsReceipt(entry.item.isReceipt);
             setPage(entry.index);
             setActiveSource(entry.item.source);
 
@@ -229,6 +241,15 @@ export default compose(
             canEvict: false,
         },
     }),
+    // eslint-disable-next-line rulesdir/no-multiple-onyx-in-file
+    withOnyx({
+        transaction: {
+            key: ({report, parentReportActions}) => {
+                const parentReportAction = lodashGet(parentReportActions, [report.parentReportActionID]);
+                return `${ONYXKEYS.COLLECTION.TRANSACTION}${lodashGet(parentReportAction, 'originalMessage.IOUTransactionID', 0)}`;
+            },
+        },
+    }),
     withLocalize,
     withWindowDimensions,
 )(AttachmentCarousel);

src/components/Attachments/AttachmentCarousel/index.native.js

@@ -1,3 +1,4 @@
+import lodashGet from 'lodash/get';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {Keyboard, PixelRatio, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
@@ -17,7 +18,7 @@ import extractAttachmentsFromReport from './extractAttachmentsFromReport';
 import AttachmentCarouselPager from './Pager';
 import useCarouselArrows from './useCarouselArrows';
 
-function AttachmentCarousel({report, reportActions, parentReportActions, source, onNavigate, setDownloadButtonVisibility, translate, onClose}) {
+function AttachmentCarousel({report, reportActions, parentReportActions, source, onNavigate, setDownloadButtonVisibility, translate, transaction, onClose}) {
     const styles = useThemeStyles();
     const pagerRef = useRef(null);
 
@@ -27,12 +28,21 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
     const [activeSource, setActiveSource] = useState(source);
     const [isPinchGestureRunning, setIsPinchGestureRunning] = useState(true);
     const [shouldShowArrows, setShouldShowArrows, autoHideArrows, cancelAutoHideArrows] = useCarouselArrows();
+    const [isReceipt, setIsReceipt] = useState(false);
 
-    const compareImage = useCallback((attachment) => attachment.source === source, [source]);
+    const compareImage = useCallback(
+        (attachment) => {
+            if (attachment.isReceipt && isReceipt) {
+                return attachment.transactionID === transaction.transactionID;
+            }
+            return attachment.source === source;
+        },
+        [source, isReceipt, transaction],
+    );
 
     useEffect(() => {
         const parentReportAction = parentReportActions[report.parentReportActionID];
-        const attachmentsFromReport = extractAttachmentsFromReport(parentReportAction, reportActions);
+        const attachmentsFromReport = extractAttachmentsFromReport(parentReportAction, reportActions, transaction);
 
         const initialPage = _.findIndex(attachmentsFromReport, compareImage);
 
@@ -67,7 +77,9 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
             const item = attachments[newPageIndex];
 
             setPage(newPageIndex);
+            setIsReceipt(item.isReceipt);
             setActiveSource(item.source);
+
             onNavigate(item);
         },
         [setShouldShowArrows, attachments, onNavigate],
@@ -174,5 +186,14 @@ export default compose(
             canEvict: false,
         },
     }),
+    // eslint-disable-next-line rulesdir/no-multiple-onyx-in-file
+    withOnyx({
+        transaction: {
+            key: ({report, parentReportActions}) => {
+                const parentReportAction = lodashGet(parentReportActions, [report.parentReportActionID]);
+                return `${ONYXKEYS.COLLECTION.TRANSACTION}${lodashGet(parentReportAction, 'originalMessage.IOUTransactionID', 0)}`;
+            },
+        },
+    }),
     withLocalize,
 )(AttachmentCarousel);