[HOLD for payment 2023-09-29] [$500] Request money - Scan - Brief disappearance of "Attachment too small" modal text before modal closure

[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!

---

Action Performed:

1. Open a chat
2. Navigate to "Request money" > "Scan"
3. Attempt to upload a text file or incorrect file
4. Click on the "Close" button
5. Notice the "Attachment too small" modal text briefly disappears for a moment before the modal closes

Expected Result:

The "Attachment too small" modal text should remain visible without disappearance before the modal closes

Actual Result:

Brief disappearance of "Attachment too small" modal text before modal closure

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: v1.3.68-13

Reproducible in staging?: Y

Reproducible in production?: Y

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

screen-recording-2023-09-09-at-124504-am-nrxf8tiu_13kW677f.mp4

Recording.1517.mp4

Expensify/Expensify Issue URL:

Issue reported by: @ayazhussain79

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01fc29b362e680f18d
• Upwork Job ID: 1701645130088493056
• Last Price Increase: 2023-09-12
• Automatic offers:
• jjcoffee | Reviewer | 26724139
• dukenv0307 | Contributor | 26724141

[dukenv0307]

Proposal

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

Brief disappearance of "Attachment too small" modal text before modal closure

What is the root cause of that problem?

1. When we upload an invalid file in Scan receipt, this modal appears to show the error message, and the isVisible is set to isAttachmentInvalid

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

Lines 143 to 151 in 662af46

	<ConfirmModal
	title={attachmentInvalidReasonTitle}
	onConfirm={Receipt.clearUploadReceiptError}
	onCancel={Receipt.clearUploadReceiptError}
	isVisible={isAttachmentInvalid}
	prompt={attachmentInvalidReason}
	confirmText={translate('common.close')}
	shouldShowCancelButton={false}
	/>

2. We get the isAttachmentInvalid, attachmentInvalidReasonTitle, attachmentInvalidReason from ONYXKEYS.RECEIPT_MODAL in Onyx.

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

Lines 65 to 67 in 662af46

	const isAttachmentInvalid = lodashGet(props.receiptModal, 'isAttachmentInvalid', false);
	const attachmentInvalidReasonTitle = lodashGet(props.receiptModal, 'attachmentInvalidReasonTitle', '');
	const attachmentInvalidReason = lodashGet(props.receiptModal, 'attachmentInvalidReason', '');

3. When we Close the error modal, we trigger this function to clear the error.

App/src/libs/actions/Receipt.ts

Line 18 in 662af46

function clearUploadReceiptError() {

4. But in the BaseModal, we have an animation that FadeOut when closing the modal that delays the updation of isAttachmentInvalid

App/src/components/Modal/BaseModal.js

Line 189 in a365583

animationOut={animationOut || modalStyleAnimationOut}

As a result, the attachmentInvalidReasonTitle, and attachmentInvalidReason are set to empty strings first, this makes the text disappear before the modal is completely closed.

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

1. In src/libs/actions/Receipt.ts, we should create a new function closeUploadReceiptModal to update the isAttachmentInvalid to false in order to close the modal

function closeUploadReceiptModal() {
    Onyx.merge(ONYXKEYS.RECEIPT_MODAL, {
        isAttachmentInvalid: false,
    });
}

2. Pass this function to onConfirm and onCancel functions to close the modal when we click the Close button

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

Line 143 in 662af46

<ConfirmModal

3. Add onModalHide prop to ConfirmModal, and pass the Receipt.clearUploadReceiptError function so that we can successfully clear all the error messages once the modal is completely closed

What alternative solutions did you explore? (Optional)

• In the clearUploadReceiptError function, instead of setting both attachmentInvalidReasonTitle and attachmentInvalidReason to empty strings, we just need to update
  the isAttachmentInvalid to false in Onyx.

App/src/libs/actions/Receipt.ts

Line 18 in 662af46

function clearUploadReceiptError() {

Result

Screen.Recording.2023-09-12.at.14.43.19.mov

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @NicMendonca (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[melvin-bot]

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

[oogushikun]

Proposal

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

Brief disappearance of "Attachment too small" modal text before modal closure

What is the root cause of that problem?

The issue is coming from the ReceiptSelector component. The prop receiptModal coming from onyx is being reset to it's initial state before the modal gets closed.

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

• Introduce a state variable to handle the modal visibility

const [showModal, setShowModal] = useState(false);

• Add a useffect to update the new state variable when the receipt is invalidated

    useEffect(() => {
        if (isAttachmentInvalid) {
            setShowModal(true);
        }
    }, [isAttachmentInvalid]);

• Add a new function that will be called when we close the modal. The function will set the showModal state variable to false, and once that's done it'll then call the receipt action clearUploadReceiptError.

    const closeModal = () => {
        setShowModal(false, () => {
            Receipt.clearUploadReceiptError();
        });
    }

    <ConfirmModal
        title={attachmentInvalidReasonTitle}
        onConfirm={closeModal}
        onCancel={closeModal}
        isVisible={showModal}
        prompt={attachmentInvalidReason}
        confirmText={translate('common.close')}
        shouldShowCancelButton={false}
    />

Result

receiptselector-1.mov