From ef88ffa2484eae56b8cbfbe2595f80beb129bc3d Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Tue, 14 Nov 2023 10:56:02 +0700
Subject: [PATCH] fix receipt image

---
 src/components/AttachmentModal.js             | 22 +++++++------
 .../extractAttachmentsFromReport.js           |  2 +-
 .../Attachments/AttachmentCarousel/index.js   |  5 ---
 .../ReportActionItem/MoneyRequestView.js      |  1 +
 .../ReportActionItem/ReportActionItemImage.js | 33 ++++++++++++-------
 src/pages/home/report/ReportAttachments.js    |  1 +
 6 files changed, 37 insertions(+), 27 deletions(-)

diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index 6c92e2cf29bb..495841d279b9 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -108,6 +108,7 @@ const defaultProps = {
     onModalHide: () => {},
     onCarouselAttachmentChange: () => {},
     isWorkspaceAvatar: false,
+    isReceiptImage: false,
 };
 
 function AttachmentModal(props) {
@@ -117,7 +118,6 @@ function AttachmentModal(props) {
     const [isAttachmentInvalid, setIsAttachmentInvalid] = useState(false);
     const [isDeleteReceiptConfirmModalVisible, setIsDeleteReceiptConfirmModalVisible] = useState(false);
     const [isAuthTokenRequired, setIsAuthTokenRequired] = useState(props.isAuthTokenRequired);
-    const [isAttachmentReceipt, setIsAttachmentReceipt] = useState(false);
     const [attachmentInvalidReasonTitle, setAttachmentInvalidReasonTitle] = useState('');
     const [attachmentInvalidReason, setAttachmentInvalidReason] = useState(null);
     const [source, setSource] = useState(props.source);
@@ -151,7 +151,6 @@ function AttachmentModal(props) {
         (attachment) => {
             setSource(attachment.source);
             setFile(attachment.file);
-            setIsAttachmentReceipt(attachment.isReceipt);
             setIsAuthTokenRequired(attachment.isAuthTokenRequired);
             onCarouselAttachmentChange(attachment);
         },
@@ -352,9 +351,10 @@ function AttachmentModal(props) {
     }, []);
 
     const sourceForAttachmentView = props.source || source;
+    console.log(props.source);
 
     const threeDotsMenuItems = useMemo(() => {
-        if (!isAttachmentReceipt || !props.parentReport || !props.parentReportActions) {
+        if (!props.isReceiptImage || !props.parentReport || !props.parentReportActions) {
             return [];
         }
         const menuItems = [];
@@ -391,7 +391,9 @@ function AttachmentModal(props) {
         }
         return menuItems;
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isAttachmentReceipt, props.parentReport, props.parentReportActions, props.policy, props.transaction, file]);
+    }, [props.isReceiptImage, props.parentReport, props.parentReportActions, props.policy, props.transaction, file]);
+
+    console.log(props.isReceiptImage);
 
     return (
         <>
@@ -417,21 +419,21 @@ function AttachmentModal(props) {
             >
                 {props.isSmallScreenWidth && <HeaderGap />}
                 <HeaderWithBackButton
-                    title={props.headerTitle || translate(isAttachmentReceipt ? 'common.receipt' : 'common.attachment')}
+                    title={props.headerTitle || translate(props.isReceiptImage ? 'common.receipt' : 'common.attachment')}
                     shouldShowBorderBottom
-                    shouldShowDownloadButton={props.allowDownload && shouldShowDownloadButton && !isAttachmentReceipt && !isOffline}
+                    shouldShowDownloadButton={props.allowDownload && shouldShowDownloadButton && !props.isReceiptImage && !isOffline}
                     onDownloadButtonPress={() => downloadAttachment(source)}
                     shouldShowCloseButton={!props.isSmallScreenWidth}
                     shouldShowBackButton={props.isSmallScreenWidth}
                     onBackButtonPress={closeModal}
                     onCloseButtonPress={closeModal}
-                    shouldShowThreeDotsButton={isAttachmentReceipt && isModalOpen}
+                    shouldShowThreeDotsButton={props.isReceiptImage && isModalOpen}
                     threeDotsAnchorPosition={styles.threeDotsPopoverOffsetAttachmentModal(windowWidth)}
                     threeDotsMenuItems={threeDotsMenuItems}
                     shouldOverlay
                 />
                 <View style={styles.imageModalImageCenterContainer}>
-                    {!_.isEmpty(props.report) ? (
+                    {!_.isEmpty(props.report) && !props.isReceiptImage ? (
                         <AttachmentCarousel
                             report={props.report}
                             onNavigate={onNavigate}
@@ -474,7 +476,7 @@ function AttachmentModal(props) {
                         )}
                     </SafeAreaConsumer>
                 )}
-                {isAttachmentReceipt && (
+                {props.isReceiptImage && (
                     <ConfirmModal
                         title={translate('receipt.deleteReceipt')}
                         isVisible={isDeleteReceiptConfirmModalVisible}
@@ -487,7 +489,7 @@ function AttachmentModal(props) {
                     />
                 )}
             </Modal>
-            {!isAttachmentReceipt && (
+            {!props.isReceiptImage && (
                 <ConfirmModal
                     title={attachmentInvalidReasonTitle ? translate(attachmentInvalidReasonTitle) : ''}
                     onConfirm={closeConfirmModal}
diff --git a/src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js b/src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js
index 6f0dd335c2bb..2417cc061dbb 100644
--- a/src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js
+++ b/src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js
@@ -39,7 +39,7 @@ function extractAttachmentsFromReport(report, reportActions) {
     });
 
     _.forEach(actions, (action, key) => {
-        if (!ReportActionsUtils.shouldReportActionBeVisible(action, key)) {
+        if (!ReportActionsUtils.shouldReportActionBeVisible(action, key) || ReportActionsUtils.isMoneyRequestAction(action)) {
             return;
         }
 
diff --git a/src/components/Attachments/AttachmentCarousel/index.js b/src/components/Attachments/AttachmentCarousel/index.js
index 7d0500433377..6c2a8c744987 100644
--- a/src/components/Attachments/AttachmentCarousel/index.js
+++ b/src/components/Attachments/AttachmentCarousel/index.js
@@ -41,11 +41,6 @@ function AttachmentCarousel({report, reportActions, source, onNavigate, setDownl
 
     const compareImage = useCallback(
         (attachment) => {
-            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, isReceipt],
diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js
index 4b69f14213a2..79aa38d87bfa 100644
--- a/src/components/ReportActionItem/MoneyRequestView.js
+++ b/src/components/ReportActionItem/MoneyRequestView.js
@@ -170,6 +170,7 @@ function MoneyRequestView({report, betas, parentReport, policyCategories, should
                             <ReportActionItemImage
                                 thumbnail={receiptURIs.thumbnail}
                                 image={receiptURIs.image}
+                                source={transaction.receipt.source}
                                 transaction={transaction}
                                 enablePreviewModal
                             />
diff --git a/src/components/ReportActionItem/ReportActionItemImage.js b/src/components/ReportActionItem/ReportActionItemImage.js
index d5f9f7ed06b8..aa4bed6ec2f2 100644
--- a/src/components/ReportActionItem/ReportActionItemImage.js
+++ b/src/components/ReportActionItem/ReportActionItemImage.js
@@ -15,6 +15,7 @@ import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
 import styles from '@styles/styles';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
+import AttachmentModal from '@components/AttachmentModal';
 
 const propTypes = {
     /** thumbnail URI for the image */
@@ -42,7 +43,7 @@ const defaultProps = {
  * and optional preview modal as well.
  */
 
-function ReportActionItemImage({thumbnail, image, enablePreviewModal, transaction}) {
+function ReportActionItemImage({thumbnail, image, enablePreviewModal, transaction, source}) {
     const {translate} = useLocalize();
     const imageSource = tryResolveUrlFromApiRoot(image || '');
     const thumbnailSource = tryResolveUrlFromApiRoot(thumbnail || '');
@@ -78,17 +79,27 @@ function ReportActionItemImage({thumbnail, image, enablePreviewModal, transactio
         return (
             <ShowContextMenuContext.Consumer>
                 {({report}) => (
-                    <PressableWithoutFocus
-                        style={[styles.noOutline, styles.w100, styles.h100]}
-                        onPress={() => {
-                            const route = ROUTES.REPORT_ATTACHMENTS.getRoute(report.reportID, imageSource);
-                            Navigation.navigate(route);
-                        }}
-                        role={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
-                        accessibilityLabel={translate('accessibilityHints.viewAttachment')}
+                    <AttachmentModal
+                        headerTitle={'Receipt'}
+                        source={source}
+                        isAuthTokenRequired
+                        report={report}
+                        isReceiptImage
+                        allowToDownload
                     >
-                        {receiptImageComponent}
-                    </PressableWithoutFocus>
+                        {({show}) => (
+                            <PressableWithoutFocus
+                                style={[styles.noOutline, styles.w100, styles.h100]}
+                                onPress={show}
+                                role={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
+                                accessibilityLabel={translate('accessibilityHints.viewAttachment')}
+                            >
+                                {receiptImageComponent}
+                            </PressableWithoutFocus>
+                        )}
+                        
+                    </AttachmentModal>
+                    
                 )}
             </ShowContextMenuContext.Consumer>
         );
diff --git a/src/pages/home/report/ReportAttachments.js b/src/pages/home/report/ReportAttachments.js
index 173a4b5637be..45fe6fafcf33 100644
--- a/src/pages/home/report/ReportAttachments.js
+++ b/src/pages/home/report/ReportAttachments.js
@@ -38,6 +38,7 @@ function ReportAttachments(props) {
             defaultOpen
             report={report}
             source={source}
+            isReceiptImage={source.startsWith('/receipts/')}
             onModalHide={() => Navigation.dismissModal()}
             onCarouselAttachmentChange={onCarouselAttachmentChange}
         />