[HOLD for payment 2024-08-01] [$250] Scan - No error pop-up and scan expense with corrupted PDF can be submitted via QAB

[izarutskaya]

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

---

Version Number: v1.4.82-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4622999
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace chat.
3. Go to + > Submit expense > Scan.
4. Upload a corrupted PDF (attached below).
5. Note that it shows error pop-up and the expense is not submitted.
6. Submit a manual request in the workspace chat.
7. Go to FAB > Submit expense under QAB > Scan.
8. Upload the same corrupted PDF.

Expected Result:

App will show error pop-up and the scan expense is not submitted.

Actual Result:

There is inconsistency in submitting corrupted PDF via FAB and QAB.
App shows error pop-up and the expense is not submitted when submitting via FAB.
App does not show error pop-up and the scan expense is submitted when submitting via QAB.

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6511609_1718252208027.20240613_120908.mp4

LARGE PDF FILE corrupted.pdf

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~013830a17b8e9e0b20
• Upwork Job ID: 1801414678071173121
• Last Price Increase: 2024-06-14
• Automatic offers:
• suneox | Reviewer | 102912100
• Krishna2323 | Contributor | 102912103

Issue Owner

Current Issue Owner: @VictoriaExpensify

[melvin-bot]

Triggered auto assignment to @VictoriaExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[izarutskaya]

We think this issue might be related to the #collect project.

[Krishna2323]

Proposal

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

Scan - No error pop-up and scan expense with corrupted PDF can be submitted via QAB

What is the root cause of that problem?

The pdf error is detected when it is rendered on the confirmation page but in case of QAB, the confirmation page is skipped and we don't get the error alert. This also happens with for protected pdf's.

App/src/components/MoneyRequestConfirmationList.tsx

Lines 1115 to 1128 in bce61c0

	<PDFThumbnail
	// eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style
	previewSourceURL={resolvedReceiptImage as string}
	// We don't support scanning password protected PDF receipt
	enabled={!isAttachmentInvalid}
	onPassword={() => {
	setIsAttachmentInvalid(true);
	setInvalidAttachmentPromt(translate('attachmentPicker.protectedPDFNotSupported'));
	}}
	onLoadError={() => {
	setInvalidAttachmentPromt(translate('attachmentPicker.errorWhileSelectingCorruptedAttachment'));
	setIsAttachmentInvalid(true);
	}}
	/>

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

If we want to validate the pdf on scan page then we would need to make few changes.

1. Create a state for storing the pdf file object.

const [pdfFile, setPdfFile] = useState<null | FileObject>(null);

2. Update setReceiptAndNavigate function, first we should accept a new parameter to check if the pdf is already validated, then check if the file is a pdf file or not and if so then call setPdfFile(file); to set the file and return from setReceiptAndNavigate.

App/src/pages/iou/request/step/IOURequestStepScan/index.tsx

Lines 418 to 434 in 1f7ebfc

	const setReceiptAndNavigate = (file: FileObject) => {
	validateReceipt(file).then((isFileValid) => {
	if (!isFileValid) {
	return;
	}
	// Store the receipt on the transaction object in Onyx
	const source = URL.createObjectURL(file as Blob);
	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
	IOU.setMoneyRequestReceipt(transactionID, source, file.name || '', action !== CONST.IOU.ACTION.EDIT);
	if (action === CONST.IOU.ACTION.EDIT) {
	updateScanAndNavigate(file, source);
	return;
	}
	navigateToConfirmationStep(file, source);
	});
	};

    const setReceiptAndNavigate = (file: FileObject, isPdfValidated?: boolean) => {
        validateReceipt(file).then((isFileValid) => {
            if (!isFileValid) {
                return;
            }
            if (Str.isPDF(file.name ?? '') && !isPdfValidated) {
                setPdfFile(file);
                return;
            }
            // Store the receipt on the transaction object in Onyx
            const source = URL.createObjectURL(file as Blob);
            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
            IOU.setMoneyRequestReceipt(transactionID, source, file.name || '', action !== CONST.IOU.ACTION.EDIT);

            if (action === CONST.IOU.ACTION.EDIT) {
                updateScanAndNavigate(file, source);
                return;
            }
            navigateToConfirmationStep(file, source);
        });
    };

3. Update PDFThumbnail to accept a new prop onLoadSuccess and pass it to onLoadSuccess prop of Document.
   

   App/src/components/PDFThumbnail/index.tsx

   Line 21 in 1f7ebfc

   <Document

4. Render the pdf component without displaying it and trigger the alert modals when callbacks triggers.

            {pdfFile && (
                <View style={{position: 'absolute', opacity: 0}}>
                    <PDFThumbnail
                        previewSourceURL={pdfFile.uri ?? ''}
                        onPassword={() => {
                            setUploadReceiptError(true, 'attachmentPicker.attachmentError', 'attachmentPicker.errorWhileSelectingCorruptedAttachment');
                        }}
                        onLoadSuccess={() => {
                            setPdfFile(null);
                            setReceiptAndNavigate(pdfFile, true);
                        }}
                        onLoadError={() => {
                            setUploadReceiptError(true, 'attachmentPicker.attachmentError', 'attachmentPicker.errorWhileSelectingCorruptedAttachment');
                        }}
                    />
                </View>
            )}

Note: There are some differences between PDFThumbnail component for native and web to there will be minor changes required accordingly.

In this PR, we added the functionality to detect the corrupted pdf files on confirmation page, so if we go with the new solution then we would need to clean up that component as well.

Test Branch

What alternative solutions did you explore? (Optional)

Result

Monosnap.screencast.2024-06-13.21-00-13.mp4

[VictoriaExpensify]

Agree this inconsistency should be fixed

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~013830a17b8e9e0b20

[melvin-bot]

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