Scan - Clicking outside of the allow location modal submits the scan expense

[lanitochka17]

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: 9.0.23-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): nathanmulugetatesting+1091@gmail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Navigate to staging.new.expensify.com
2. Create a workspace
3. Make sure the location permission is denied on the browser settings
4. Go to workspace chat and click on plus > Submit expense
5. Go to scan tab
6. Upload an attachment to scan and click on submit
7. After the allow location modal opens up click somewhere else outside the modal

Expected Result:

The Allow location modal closes and the app doesn't submit the scan expense

Actual Result:

When clicking outside the allow location modal the scan expense gets submitted

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

Add any screenshot/video evidence

Bug6579103_1724318133318.bandicam_2024-08-22_11-48-23-544.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @ikevin127

[melvin-bot]

Triggered auto assignment to @muttmuure (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.

[lanitochka17]

@muttmuure FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[Krishna2323]

Edited by proposal-police: This proposal was edited at 2024-08-22 13:08:20 UTC.

Proposal

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

What is the root cause of that problem?

We call onDeny when backdrop is pressed and the expense gets submitted.

App/src/components/LocationPermissionModal/index.tsx

Lines 66 to 69 in bf5d743

	const skipLocationPermission = () => {
	onDeny(RESULTS.DENIED);
	setShowModal(false);
	setHasError(false);

App/src/components/LocationPermissionModal/index.tsx

Line 84 in bf5d743

onCancel={skipLocationPermission}

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

• In ConfirmModal, we can accept a new callback onBackdropPress and pass it to Modal.
• From LocationPermissionModal, we can pass the code below to ConfirmModal.

            onBackdropPress={() => {
                setShowModal(false);
                // setHasError(false);
                resetPermissionFlow();
            }}

• Same should be done in android file.

NOTE: We shouldn't call setHasError(false); is pressed because it will change the text of the confirm button.

What alternative solutions did you explore? (Optional)


Result

Monosnap.screencast.2024-08-22.18-33-52.mp4

[NJ-2020]

Edited by proposal-police: This proposal was edited at 2024-08-22 12:54:16 UTC.

Proposal

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

Scan - Clicking outside of the allow location modal submits the scan expense

What is the root cause of that problem?

When we deny or click outside we still create the transaction

App/src/pages/iou/request/step/IOURequestStepConfirmation.tsx

Line 605 in d2eaf93

onDeny={() => createTransaction(selectedParticipantList, false)}

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

We can add new parameter to LocationPermissionModal like onCancel meaning clicking outside we can set the setStartLocationPermissionFlow to false on cancel and on deny we can still create the transaction

What alternative solutions did you explore? (Optional)

[Krishna2323]

Proposal Updated

• Added code snippet

[nkdengineer]

Proposal

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

When clicking outside the allow location modal the scan expense gets submitted

What is the root cause of that problem?

When we click outside, onClose is triggered and by default behavior of confirm modal we call onCancel

App/src/components/ConfirmModal.tsx

Line 141 in d2eaf93

onClose={onCancel}

And then onDeny is called creates the transaction

App/src/components/LocationPermissionModal/index.tsx

Lines 66 to 70 in d2eaf93

	const skipLocationPermission = () => {
	onDeny(RESULTS.DENIED);
	setShowModal(false);
	setHasError(false);
	};

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

We should separate onClose and onCancel by create a new prop onClose in confirm modal then we will fallback onCancel to onClose event if onClose prop is undefined

onClose={onClose ?? onCancel}

App/src/components/ConfirmModal.tsx

Line 141 in d2eaf93

onClose={onCancel}

Then we will pass onClose that will only close the location permission modal

onClose={() => {
    setShowModal(false);
    setHasError(false);
    resetPermissionFlow();
}}

App/src/components/LocationPermissionModal/index.tsx

Line 83 in d2eaf93

onConfirm={grantLocationPermission}

What alternative solutions did you explore? (Optional)

[Krishna2323]

Proposal Updated

• Minor updated in code snippet and added a note.

[melvin-bot]

@muttmuure Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

Unable to auto-create job on Upwork. The BZ team member should create it manually for this issue.

[muttmuure]

Not overdue

[melvin-bot]

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

[ikevin127]

Thanks everyone for the proposals! 🚀

@Krishna2323's proposal is the most complete and detailed both in terms of RCA and most importantly solution, despite the many edits (which I'm not a fan of). The solution tests well according to the Expected result and takes into account details which the other proposals don't (setHasError(false) and the addition of onBackdropPress prop which is already accepted by the Modal component).

Note: I checked the timeline of edits and nothing is outstanding or "borrowed" from the other proposals (please let me know if you think otherwise). Given this, I think we should go with them for this issue.

🎀👀🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @neil-marcellini, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[ikevin127]

@neil-marcellini 👋 Friendly bump for assignment based on proposal review if it makes sense to you.

[raza1708]

Awesome

[melvin-bot]

📣 @raza1708! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[trjExpensify]

Maybe @Julesssss can review that approved proposal to keep this moving, as he has context on this feature?

[Julesssss]

Yeah no worries, Neil I can take this one.

The onBackdropPress proposal sounds good to me 👍

[ikevin127]

⚠️ Automation failed here -> this should've been paid out yesterday 2024-09-17 according to production deploy checklist Deploy Checklist: New Expensify 2024-09-09 which was shipped to production on 2024-09-10.

cc @muttmuure @Julesssss

[Julesssss]

Yeah, looks ike this can be paid.

[Krishna2323]

@muttmuure, friendly bump

[ikevin127]

Bumped for payments on Slack as well: https://expensify.slack.com/archives/C01GTK53T8Q/p1727218685162429?thread_ts=1724914803.531589&cid=C01GTK53T8Q

[muttmuure]

Please apply to https://www.upwork.com/jobs/~021838979607891473449

@ikevin127 @Krishna2323

[ikevin127]

@muttmuure Applied as C+ reviewer.

[Krishna2323]

@muttmuure, applied to the offer.

[muttmuure]

Offer sent

[muttmuure]

Paid