fix persist receipt error

src/libs/ReceiptUtils.js

@@ -1,34 +1,11 @@
-import lodashGet from 'lodash/get';
-import _ from 'underscore';
 import Str from 'expensify-common/lib/str';
 import * as FileUtils from './fileDownload/FileUtils';
 import CONST from '../CONST';
-import Receipt from './actions/Receipt';
 import ReceiptHTML from '../../assets/images/receipt-html.png';
 import ReceiptDoc from '../../assets/images/receipt-doc.png';
 import ReceiptGeneric from '../../assets/images/receipt-generic.png';
 import ReceiptSVG from '../../assets/images/receipt-svg.png';
 
-function validateReceipt(file) {
-    const {fileExtension} = FileUtils.splitExtensionFromFileName(lodashGet(file, 'name', ''));
-    if (_.contains(CONST.API_ATTACHMENT_VALIDATIONS.UNALLOWED_EXTENSIONS, fileExtension.toLowerCase())) {
-        Receipt.setUploadReceiptError(true, 'attachmentPicker.wrongFileType', 'attachmentPicker.notAllowedExtension');
-        return false;
-    }
-
-    if (lodashGet(file, 'size', 0) > CONST.API_ATTACHMENT_VALIDATIONS.MAX_SIZE) {
-        Receipt.setUploadReceiptError(true, 'attachmentPicker.attachmentTooLarge', 'attachmentPicker.sizeExceeded');
-        return false;
-    }
-
-    if (lodashGet(file, 'size', 0) < CONST.API_ATTACHMENT_VALIDATIONS.MIN_SIZE) {
-        Receipt.setUploadReceiptError(true, 'attachmentPicker.attachmentTooSmall', 'attachmentPicker.sizeNotMet');
-        return false;
-    }
-
-    return true;
-}
-
 /**
  * Grab the appropriate receipt image and thumbnail URIs based on file type
  *
@@ -64,4 +41,5 @@ function getThumbnailAndImageURIs(path, filename) {
     return {thumbnail: null, image};
 }
 
-export {validateReceipt, getThumbnailAndImageURIs};
+// eslint-disable-next-line import/prefer-default-export
+export {getThumbnailAndImageURIs};

src/pages/iou/ReceiptSelector/index.js

@@ -1,6 +1,7 @@
 import {View, Text, PixelRatio} from 'react-native';
 import React, {useContext, useState} from 'react';
 import lodashGet from 'lodash/get';
+import _ from 'underscore';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import * as IOU from '../../../libs/actions/IOU';
@@ -15,12 +16,11 @@ import ReceiptDropUI from '../ReceiptDropUI';
 import AttachmentPicker from '../../../components/AttachmentPicker';
 import ConfirmModal from '../../../components/ConfirmModal';
 import ONYXKEYS from '../../../ONYXKEYS';
-import Receipt from '../../../libs/actions/Receipt';
 import useWindowDimensions from '../../../hooks/useWindowDimensions';
 import useLocalize from '../../../hooks/useLocalize';
 import {DragAndDropContext} from '../../../components/DragAndDrop/Provider';
-import * as ReceiptUtils from '../../../libs/ReceiptUtils';
 import {iouPropTypes, iouDefaultProps} from '../propTypes';
+import * as FileUtils from '../../../libs/fileDownload/FileUtils';
 
 const propTypes = {
     /** Information shown to the user when a receipt is not valid */
@@ -62,22 +62,58 @@ const defaultProps = {
 function ReceiptSelector(props) {
     const reportID = lodashGet(props.route, 'params.reportID', '');
     const iouType = lodashGet(props.route, 'params.iouType', '');
-    const isAttachmentInvalid = lodashGet(props.receiptModal, 'isAttachmentInvalid', false);
-    const attachmentInvalidReasonTitle = lodashGet(props.receiptModal, 'attachmentInvalidReasonTitle', '');
-    const attachmentInvalidReason = lodashGet(props.receiptModal, 'attachmentInvalidReason', '');
+    const [isAttachmentInvalid, setIsAttachmentInvalid] = useState(false);
+    const [attachmentInvalidReasonTitle, setAttachmentInvalidReasonTitle] = useState('');
+    const [attachmentInvalidReason, setAttachmentValidReason] = useState('');
     const [receiptImageTopPosition, setReceiptImageTopPosition] = useState(0);
     const {isSmallScreenWidth} = useWindowDimensions();
     const {translate} = useLocalize();
     const {isDraggingOver} = useContext(DragAndDropContext);
 
+    const hideReciptModal = () => {
+        setIsAttachmentInvalid(false);
+    };
+
+    /**
+     * Sets the upload receipt error modal content when an invalid receipt is uploaded
+     * @param {*} isInvalid
+     * @param {*} title
+     * @param {*} reason
+     */
+    const setUploadReceiptError = (isInvalid, title, reason) => {
+        setIsAttachmentInvalid(isInvalid);
+        setAttachmentInvalidReasonTitle(title);
+        setAttachmentValidReason(reason);
+    };
+
+    function validateReceipt(file) {
+        const {fileExtension} = FileUtils.splitExtensionFromFileName(lodashGet(file, 'name', ''));
+        if (_.contains(CONST.API_ATTACHMENT_VALIDATIONS.UNALLOWED_EXTENSIONS, fileExtension.toLowerCase())) {
+            setUploadReceiptError(true, 'attachmentPicker.wrongFileType', 'attachmentPicker.notAllowedExtension');
+            return false;
+        }
+
+        if (lodashGet(file, 'size', 0) > CONST.API_ATTACHMENT_VALIDATIONS.MAX_SIZE) {
+            setUploadReceiptError(true, 'attachmentPicker.attachmentTooLarge', 'attachmentPicker.sizeExceeded');
+            return false;
+        }
+
+        if (lodashGet(file, 'size', 0) < CONST.API_ATTACHMENT_VALIDATIONS.MIN_SIZE) {
+            setUploadReceiptError(true, 'attachmentPicker.attachmentTooSmall', 'attachmentPicker.sizeNotMet');
+            return false;
+        }
+
+        return true;
+    }
+
     /**
      * Sets the Receipt objects and navigates the user to the next page
      * @param {Object} file
      * @param {Object} iou
      * @param {Object} report
      */
     const setReceiptAndNavigate = (file, iou, report) => {
-        if (!ReceiptUtils.validateReceipt(file)) {
+        if (!validateReceipt(file)) {
             return;
         }
 
@@ -142,13 +178,12 @@ function ReceiptSelector(props) {
             />
             <ConfirmModal
                 title={attachmentInvalidReasonTitle ? translate(attachmentInvalidReasonTitle) : ''}
-                onConfirm={Receipt.closeUploadReceiptModal}
-                onCancel={Receipt.closeUploadReceiptModal}
+                onConfirm={hideReciptModal}
+                onCancel={hideReciptModal}
                 isVisible={isAttachmentInvalid}
                 prompt={attachmentInvalidReason ? translate(attachmentInvalidReason) : ''}
                 confirmText={translate('common.close')}
                 shouldShowCancelButton={false}
-                onModalHide={Receipt.clearUploadReceiptError}
             />
         </View>
     );