[HOLD for payment 2024-02-07] [$500] IOU - Replacing Receipt with an Invalid File Format Does Not Display an Error Message

@tranvantoan-qn

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Action Performed:

Login to any account
Send a Money Request to another account, using the Scan Receipt option
Click on the Receipt image to open the preview popup
Click on the “Three dots” icon >> select the “Replace” option
Replace the current image with another image in an unsupported format, such as "webp"
Observe that: there is no error, but when reloading the page, the old image still appears (which indicates that new image is not uploaded)

Expected Result:

In this case, the user has uploaded an invalid image format, so there should be an error message. The file should remain optimistically in Onyx until the user decides to clear the error.

Actual Result:

No error displays.

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

Version Number: 1.3.74-2

Reproducible in staging?: Yes

Reproducible in production?: Yes

If this was caught during regression testing, add the test name, ID and link from TestRail:

Email or phone of affected tester (no customers):

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Chrome-Desktop.mp4

Safari-Desktop.mov

bandicam.2023-09-28.00-58-54-891.mp4

Expensify/Expensify Issue URL:

Issue reported by: @tranvantoan-qn

Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1695720594688229

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01bb8307379994bc8e
Upwork Job ID: 1707109060385632256
Last Price Increase: 2023-10-18
Automatic offers:

hoangzinh | Reviewer | 27267319
tienifr | Contributor | 27267321
tranvantoan-qn | Reporter | 27267322

@trjExpensify

Triggered auto assignment to @trjExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

Job added to Upwork: https://www.upwork.com/jobs/~01bb8307379994bc8e

Bug0 Triage Checklist (Main S/O)

This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
This bug is not a duplicate report (check E/App issues and #expensify-bugs)
- If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
This bug is reproducible using the reproduction steps in the OP. S/O
- If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
- If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
This issue is filled out as thoroughly and clearly as possible
- Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

@hoangzinh

Triggered auto assignment to Contributor-plus team member for initial proposal review - @hoangzinh (External)

Proposal - Updated

Please re-state the problem that we are trying to solve in this issue

The app allows the user to upload an invalid file format but then shows the old image.

What is the root cause of that problem?

If we want to forbid files with `UNALLOWED_EXTENSIONS` from being uploaded (front-end only fix, outdated):

The problem stems from the validateReceipt function located in the ReceiptSelector/index.js component:

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;
    }
    ...

In this case UNALLOWED_EXTENSION does not exist within CONST.API_ATTACHMENT_VALIDATIONS, therefore no file format is excluded from upload as receipt.

If we want to show an error message and for the file remain optimistically in Onyx until the user decides to clear the error (updated expected result):

The first problem comes from the fact that IOU.replaceReceipt function is currently getting the transaction by using lodashGet(allTransactions, 'transactionID', {}) which is not corrent because allTransactions is the main object which has keys starting with ransactions_{key} format, therefore transaction is always empty.
The second problem is that Onyx failureData is not being populated with errors when the ReplaceReceipt api call fails.

What changes do you think we should make in order to solve the problem?

Would add UNALLOWED_EXTENSION constant as an array of comma separated strings with the not-allowed formats (TBD).

If we want to show an error message and for the file remain optimistically in Onyx until the user decides to clear the error (updated expected result):

Within IOU.js we should add / change the following:

// Add function that clears transaction error by Id
+ /**
+  * @param {String} transactionID
+  */
+ function clearTransactionError(transactionID){
+     const transaction = lodashGet(allTransactions, `transactions_${transactionID}`, {});
+     Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, {
+        receipt: transaction.errorsData.receipt,
+        filename: transaction.errorsData.filename,
+        errors: null,
+        errorsData:null
+     });
+ }

/**
 * @param {String} transactionID
 * @param {Object} receipt
 * @param {String} filePath
 */
function replaceReceipt(transactionID, receipt, filePath) {
-    const transaction = lodashGet(allTransactions, 'transactionID', {});
+    const transaction = lodashGet(allTransactions, `transactions_${transactionID}`, {});
    const oldReceipt = lodashGet(transaction, 'receipt', {});

    const optimisticData = [
        {
            onyxMethod: Onyx.METHOD.MERGE,
            key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
            value: {
                receipt: {
                    source: filePath,
                    state: CONST.IOU.RECEIPT_STATE.OPEN,
                },
                filename: receipt.name,
            },
        },
    ];

// Populate failureData with error / errorsData
    const failureData = [
        {
            onyxMethod: Onyx.METHOD.MERGE,
            key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
            value: {
-                receipt: oldReceipt,
-                filename: transaction.filename,
+                errors: ErrorUtils.getMicroSecondOnyxError(Localize.translateLocal('attachmentPicker.notAllowedExtension')),
+                errorsData: {
+                   receipt: oldReceipt,
+                   filename: transaction.filename,
+                }
            },
        },
    ];

    API.write('ReplaceReceipt', {transactionID, receipt}, {optimisticData, failureData});
}

Within MoneyRequestView.js we should add / change the following:

// Add function that uses the IOU.clearTransactionError() to clear the error.

+    const clearTransactionError = useCallback(() => {
+        IOU.clearTransactionError(transaction.transactionID);
+    }, [transaction]);

{hasReceipt && (
-                <OfflineWithFeedback pendingAction={pendingAction}>
+                <OfflineWithFeedback pendingAction={pendingAction} errors={transaction.errors} onClose={clearTransactionError}>
                    <View style={styles.moneyRequestViewImage}>
                        <ReportActionItemImage
                            thumbnail={receiptURIs.thumbnail}
                            image={receiptURIs.image}
                            enablePreviewModal
                        />
                    </View>
                </OfflineWithFeedback>
            )}

Within OfflineWithFeedback.js we should change the following in order to add padding spacing.ph5 to the error:

{props.shouldShowErrorMessages && hasErrorMessages && (
-                <View style={StyleUtils.combineStyles(styles.offlineFeedback.error, props.errorRowStyles)}>
+                <View style={StyleUtils.combineStyles(styles.offlineFeedback.error, spacing.ph5, props.errorRowStyles)}>
                    <DotIndicatorMessage
                        style={[styles.flex1]}
                        messages={errorMessages}
                        type="error"
                    />
                    <Tooltip text={translate('common.close')}>
                        <PressableWithoutFeedback
                            onPress={props.onClose}
                            style={[styles.touchableButtonImage]}
                            accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
                            accessibilityLabel={translate('common.close')}
                        >
                            <Icon src={Expensicons.Close} />
                        </PressableWithoutFeedback>
                    </Tooltip>
                </View>
            )}

What alternative solutions did you explore? (Optional)

N/A

Videos

web.mp4

Proposal

Please re-state the problem that we are trying to solve in this issue

IOU - Replacing Receipt with an Invalid File Format Does Not Display an Error Message

What is the root cause of that problem?

In

App/src/pages/iou/ReceiptSelector/index.js

Line 90 in 7ada99f

if (_.contains(CONST.API_ATTACHMENT_VALIDATIONS.UNALLOWED_EXTENSIONS, fileExtension.toLowerCase())) {

we're using UNALLOWED_EXTENSIONS, but it's not in API_ATTACHMENT_VALIDATIONS -> no error message appear

If the image is allowed in FE side, but get errors from BE side, we should show the error message. But in

App/src/libs/actions/IOU.js

Lines 2125 to 2127 in 7ada99f

    
           function replaceReceipt(transactionID, receipt, filePath) { 
        
               const transaction = lodashGet(allTransactions, 'transactionID', {}); 
        
               const oldReceipt = lodashGet(transaction, 'receipt', {});

but we're getting transaction by using lodashGet(allTransactions, 'transactionID', {});, and it's wrong because allTransactions is the object and its keys have the transactions_{key} format, so transaction is always empty

and we don't add errors to failureData -> the error message is not shown

What changes do you think we should make in order to solve the problem?

We should defined UNALLOWED_EXTENSION in API_ATTACHMENT_VALIDATIONS
Change this line to

    const transaction = lodashGet(allTransactions, `transactions_${transactionID}`, {});

Update failureData to store errors and errorsData

value: {
                errors: ErrorUtils.getMicroSecondOnyxError('iou.error.genericEditFailureMessage'),
                errorsData: {
                    receipt: oldReceipt,
                    filename: transaction.filename,
                }
            },

Create the function to clear transaction errors

function clearError(transactionID){
    const transaction = lodashGet(allTransactions, `transactions_${transactionID}`, {});
    Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, {errors: null,
        receipt: transaction.errorsData.receipt,
        filename: transaction.errorsData.filename,
        errorsData:null
    },
    );
}

Add errors to OfflineWithFeedback, this props must be the object for now, but we need to render the component so we need to define the new props for OfflineWithFeedback to render the errors as the React component
Add ConfirmModal component that allow users download local file before dismiss the error
When we refresh app, the receipt and filename will be override from BE results (OpenReport API), but not errors. So we need BE fix to return errors: null

What alternative solutions did you explore? (Optional)

None

Result

Screen.Recording.2023-10-09.at.14.32.18.mov

@JmillsExpensify

@JmillsExpensify @youssef-lr, how does this one jive with this issue for allowing all file extensions? Seems like we're silently failing in this case.

CC: @AndrewGable @Gonals as well from the receipt upload implementation

@trjExpensify

@trjExpensify the issue you linked is for attachments. We have some restrictions when it comes to what types of receipts you can upload I think.

Reviewing label has been removed, please complete the "BugZero Checklist".

@hoangzinh

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.34-1 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

fix: show error message for invalid receipt #34087

If no regressions arise, payment will be issued on 2024-02-07. 🎊

For reference, here are some details about the assignees on this issue:

@hoangzinh requires payment automatic offer (Reviewer)
@tienifr requires payment automatic offer (Contributor)
@tranvantoan-qn requires payment automatic offer (Reporter)

@hoangzinh

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

[@hoangzinh] The PR that introduced the bug has been identified. Link to the PR:
[@hoangzinh] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
[@hoangzinh] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
[@hoangzinh] Determine if we should create a regression test for this bug.
[@hoangzinh] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
[@trjExpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

👋 checklist time here!

BugZero Checklist:

The PR that introduced the bug has been identified. Link to the PR: the root cause is fixed so this PR is just a UI/UX improvement.
The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: N/A
A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: N/A
Determine if we should create a regression test for this bug. YES
If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

Regression Test Proposal

Login to any account
Send a Money Request to another account, using the Scan Receipt option
Click on the Receipt image to open the preview popup
Click on the “Three dots” icon >> select the “Replace” option
Replace the current image with an unsupported file. Ex: [CORRUPT.pdf (https://github.com/Expensify/App/files/13582924/CORRUPT.pdf)
Verify that the error message is shown and users can download the invalid file
Click clear error icon
Verify that the errors are removed, and the previous file is shown

Do we agree 👍 or 👎

@hoangzinh

@hoangzinh, @trjExpensify, @jasperhuangg, @tienifr Whoops! This issue is 2 days overdue. Let's get this updated quick!

@hoangzinh

@hoangzinh those tests look good to me, thanks!

Nice, thanks! Applause have a regression test for the failed upload side, so I've created an issue for the replace receipt side.

@hoangzinh

Summarising payouts as follows:

$500 to @hoangzinh for C+ review
$500 to @tienifr for the fix
$50 to @tranvantoan-qn for the bug report (prior to the Oct 24th cut off).

Settled up, thanks!

Navigation Menu

Repository navigation

[HOLD for payment 2024-02-07] [$500] IOU - Replacing Receipt with an Invalid File Format Does Not Display an Error Message #28343

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Bug0 Triage Checklist (Main S/O)

Proposal - Updated

Please re-state the problem that we are trying to solve in this issue

What is the root cause of that problem?

If we want to forbid files with `UNALLOWED_EXTENSIONS` from being uploaded (front-end only fix, outdated):

If we want to show an error message and for the file remain optimistically in Onyx until the user decides to clear the error (updated expected result):

What changes do you think we should make in order to solve the problem?

If we want to show an error message and for the file remain optimistically in Onyx until the user decides to clear the error (updated expected result):

What alternative solutions did you explore? (Optional)

Videos

Proposal

Please re-state the problem that we are trying to solve in this issue

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

What alternative solutions did you explore? (Optional)

Result

143 remaining items

BugZero Checklist:

Regression Test Proposal

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	function replaceReceipt(transactionID, receipt, filePath) {
	const transaction = lodashGet(allTransactions, 'transactionID', {});
	const oldReceipt = lodashGet(transaction, 'receipt', {});

[HOLD for payment 2024-02-07] [$500] IOU - Replacing Receipt with an Invalid File Format Does Not Display an Error Message #28343

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Activity

melvin-bot commented on Sep 27, 2023

melvin-bot commented on Sep 27, 2023

melvin-bot commented on Sep 27, 2023

Bug0 Triage Checklist (Main S/O)

melvin-bot commented on Sep 27, 2023

ikevin127 commented on Sep 27, 2023

Proposal - Updated

Please re-state the problem that we are trying to solve in this issue

What is the root cause of that problem?

If we want to forbid files with UNALLOWED_EXTENSIONS from being uploaded (front-end only fix, outdated):

If we want to show an error message and for the file remain optimistically in Onyx until the user decides to clear the error (updated expected result):

What changes do you think we should make in order to solve the problem?

If we want to show an error message and for the file remain optimistically in Onyx until the user decides to clear the error (updated expected result):

What alternative solutions did you explore? (Optional)

Videos

tienifr commented on Sep 28, 2023

Proposal

Please re-state the problem that we are trying to solve in this issue

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

What alternative solutions did you explore? (Optional)

Result

trjExpensify commented on Sep 28, 2023

youssef-lr commented on Sep 28, 2023

143 remaining items

melvin-bot commented on Jan 31, 2024

melvin-bot commented on Jan 31, 2024

melvin-bot commented on Jan 31, 2024

trjExpensify commented on Feb 9, 2024

hoangzinh commented on Feb 10, 2024

BugZero Checklist:

Regression Test Proposal

melvin-bot commented on Feb 13, 2024

jasperhuangg commented on Feb 13, 2024

trjExpensify commented on Feb 14, 2024

trjExpensify commented on Feb 14, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

If we want to forbid files with `UNALLOWED_EXTENSIONS` from being uploaded (front-end only fix, outdated):