fix persist receipt error

src/ONYXKEYS.ts

@@ -362,7 +362,6 @@ type OnyxValues = {
     [ONYXKEYS.LAST_OPENED_PUBLIC_ROOM_ID]: string;
     [ONYXKEYS.PREFERRED_THEME]: ValueOf<typeof CONST.THEME>;
     [ONYXKEYS.IS_USING_MEMORY_ONLY_KEYS]: boolean;
-    [ONYXKEYS.RECEIPT_MODAL]: OnyxTypes.ReceiptModal;
     [ONYXKEYS.MAPBOX_ACCESS_TOKEN]: OnyxTypes.MapboxAccessToken;
     [ONYXKEYS.ONYX_UPDATES_FROM_SERVER]: OnyxTypes.OnyxUpdatesFromServer;
     [ONYXKEYS.ONYX_UPDATES_LAST_UPDATE_ID_APPLIED_TO_CLIENT]: number;

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,22 +16,14 @@ 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';
 import Navigation from '../../../libs/Navigation/Navigation';
 
 const propTypes = {
-    /** Information shown to the user when a receipt is not valid */
-    receiptModal: PropTypes.shape({
-        isAttachmentInvalid: PropTypes.bool,
-        attachmentInvalidReasonTitle: PropTypes.string,
-        attachmentInvalidReason: PropTypes.string,
-    }),
-
     /** The report on which the request is initiated on */
     report: reportPropTypes,
 
@@ -54,11 +47,6 @@ const propTypes = {
 };
 
 const defaultProps = {
-    receiptModal: {
-        isAttachmentInvalid: false,
-        attachmentInvalidReasonTitle: '',
-        attachmentInvalidReason: '',
-    },
     report: {},
     iou: iouDefaultProps,
     transactionID: '',
@@ -67,22 +55,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;
         }
 
@@ -154,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>
     );
@@ -172,7 +195,6 @@ ReceiptSelector.displayName = 'ReceiptSelector';
 
 export default withOnyx({
     iou: {key: ONYXKEYS.IOU},
-    receiptModal: {key: ONYXKEYS.RECEIPT_MODAL},
     report: {
         key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${lodashGet(route, 'params.reportID', '')}`,
     },

src/types/onyx/index.ts

@@ -29,7 +29,6 @@ import FrequentlyUsedEmoji from './FrequentlyUsedEmoji';
 import ReimbursementAccount from './ReimbursementAccount';
 import ReimbursementAccountDraft from './ReimbursementAccountDraft';
 import WalletTransfer from './WalletTransfer';
-import ReceiptModal from './ReceiptModal';
 import MapboxAccessToken from './MapboxAccessToken';
 import {OnyxUpdatesFromServer, OnyxUpdateEvent} from './OnyxUpdatesFromServer';
 import Download from './Download';