Merge pull request Expensify#28640 from dukenv0307/fix/27824

Fix receipt image is opened in transaction thread report
abdel-h66 · Oct 31, 2023 · 2231ed0 · 2231ed0
2 parents 0a27554 + d5b9258
commit 2231ed0
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/src/components/Attachments/AttachmentCarousel/index.js b/src/components/Attachments/AttachmentCarousel/index.js
@@ -37,17 +37,18 @@ function AttachmentCarousel({report, reportActions, source, onNavigate, setDownl
     const [attachments, setAttachments] = useState([]);
     const [activeSource, setActiveSource] = useState(source);
     const [shouldShowArrows, setShouldShowArrows, autoHideArrows, cancelAutoHideArrows] = useCarouselArrows();
+    const [isReceipt, setIsReceipt] = useState(false);
 
     const compareImage = useCallback(
         (attachment) => {
-            if (attachment.isReceipt) {
+            if (attachment.isReceipt && isReceipt) {
                 const action = ReportActionsUtils.getParentReportAction(report);
                 const transactionID = _.get(action, ['originalMessage', 'IOUTransactionID']);
                 return attachment.transactionID === transactionID;
             }
             return attachment.source === source;
         },
-        [source, report],
+        [source, report, isReceipt],
     );
 
     useEffect(() => {
@@ -86,10 +87,12 @@ function AttachmentCarousel({report, reportActions, source, onNavigate, setDownl
             // 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);
 

diff --git a/src/components/Attachments/AttachmentCarousel/index.native.js b/src/components/Attachments/AttachmentCarousel/index.native.js
@@ -27,17 +27,18 @@ function AttachmentCarousel({report, reportActions, source, onNavigate, onClose,
     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) => {
-            if (attachment.isReceipt) {
+            if (attachment.isReceipt && isReceipt) {
                 const action = ReportActionsUtils.getParentReportAction(report);
                 const transactionID = _.get(action, ['originalMessage', 'IOUTransactionID']);
                 return attachment.transactionID === transactionID;
             }
             return attachment.source === source;
         },
-        [source, report],
+        [source, report, isReceipt],
     );
 
     useEffect(() => {
@@ -76,6 +77,7 @@ function AttachmentCarousel({report, reportActions, source, onNavigate, onClose,
             const item = attachments[newPageIndex];
 
             setPage(newPageIndex);
+            setIsReceipt(item.isReceipt);
             setActiveSource(item.source);
 
             onNavigate(item);