[$1000] Request Money – The address input lacks a red outline or error message when an incomplete IOU is created offline

[kbecciv]

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: 1.4.7.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:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

1. Go to https://staging.new.expensify.com/
2. Log in
3. Global Create > Request Money
4. Select Distance option
5. Disable the internet connection
6. Enter a vague start location like "SF"
7. Enter a vague finish location like "LA"
8. Finish the request creation flow
9. Enable the internet connection
10. Verify there's a red dot on the request report in the LHN, on the report preview in the workspace chat, and on the request
11. Navigate to the request with the error
12. Click on the request
13. Click on the start waypoint

Expected Result:

The address input has a red outline and below it is an error message like “Unable to find the location for this address. Please edit the address and try again

Actual Result:

The address input lacks a red outline or error message when an incomplete IOU is created offline

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

Bug6298369_1701504006546.Address_input_has_no_red_outline.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01bc96448abc5e7e68
• Upwork Job ID: 1730973988318359552
• Last Price Increase: 2024-02-05
• Automatic offers:
• shubham1206agra | Contributor | 28064604

[melvin-bot]

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

[melvin-bot]

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

[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 Contributor-plus team member for initial proposal review - @ntdiary (External)

[chiItepin]

Proposal

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

The user can't tell if the address finder is offline due to a lack of a proper hint and inline validation, thus, causing the user to select an invalid address while being offline and being able to submit.

What is the root cause of that problem?

There is no proper validation to tackle the lack of network connection in WaypointEditor.js, the form's validation is currently not validating offline users.

const validate = (values) => {
...
        if (!isOffline && waypointValue !== '' && waypointAddress !== waypointValue) {
            ErrorUtils.addErrorMessage(errors, `waypoint${waypointIndex}`, 'distance.errors.selectSuggestedAddress');
        }

This condition is basically excluding the addition of the error message for users that are offline, quite an issue since it may introduce "invalid" addresses.

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

Ideally, a proper validation message should be shown to the user to let them know they are offline at the moment if they are offline and there are no autocomplete items as shown below:

to do this, the validate function would need an addition such as:

        if (isOffline && hasNoRecentWaypoints) {
            ErrorUtils.addErrorMessage(errors, `waypoint${waypointIndex}`, 'common.youAppearToBeOffline');
        }

Additionally, the !isOffline check from the following current condition should be removed such as:

      // before
        if (!isOffline && waypointValue !== '' && waypointAddress !== waypointValue) {
            ErrorUtils.addErrorMessage(errors, `waypoint${waypointIndex}`, 'distance.errors.selectSuggestedAddress');
        }
      // after
         if (waypointValue !== '' && waypointAddress !== waypointValue) {
            ErrorUtils.addErrorMessage(errors, `waypoint${waypointIndex}`, 'distance.errors.selectSuggestedAddress');
        }

Please select a suggested address or use current location

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[tienifr]

Proposal

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

Request Money – The address input lacks a red outline or error message when an incomplete IOU is created offline

What is the root cause of that problem?

We have 2 problems here:

1. Error message is not shown in form

To show the error messages, we have to call validate function, but this function is just called when users press Save button or blur the input

App/src/pages/iou/WaypointEditor.js

Lines 216 to 217 in d2056af

	validate={validate}
	onSubmit={submit}

When users go offline, we allow them to write any addresses, so BE will validate them then return the correct latitude and longitude. If the addresses are invalid, BE will return the error -> validate function is not called -> there's no error is shown

2. red not is not shown in menu item

In

App/src/components/DistanceRequest/index.js

Lines 198 to 199 in d2056af

	renderItem={({item, drag, isActive, getIndex}) => (
	<DistanceRequestRenderItem

we did not pass brickRoadIndicator to DistanceRequestRenderItem and just show the error above Save button here

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

We need to define the new property in waypoint like isChecking to indicate that this waypoint is verified or not,

In saveWaypoint function, we will set isChecking to true if it's new waypoint without lat and lng

Onyx.merge(`${isDraft ? ONYXKEYS.COLLECTION.TRANSACTION : ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}`, {
        comment: {
            waypoints: {
                [`waypoint${index}`]: {
                    ...waypoint,
                    isChecking: (_.isUndefined(waypoint?.isChecking) && !waypoint?.lat && !waypoint?.lng)? true : false
                },
            },
        },

then set isChecking to false for all waypoints in successData of GetRoute API (for now these waypoints are verifed)

1. In FormProvider.js we create the new props named validateOnMounted, and run it function right after component did mount

    useEffect(()=>{
        if(!validateOnMounted){
            return;
        }
        const errors = validateOnMounted()
        setErrors(errors)
    },[])

In WaypointEditor define validateOnMounted function, then pass it to FormProvider. We can early return if the waypoint.isChecking is true (wait for BE result), or waypointValue is empty (users don't set the waypoint). If the lat or lng is empty, that means BE can't verify that waypoint so we add the error message for it

    const validateOnMounted = ()=>{
        const errors = {}

        const waypointValue = transaction.comment.waypoints[`waypoint${waypointIndex}`];

        if(_.isEmpty(waypointValue) || waypointValue.isChecking || (waypointValue.lat && waypointValue.lng)){
            return errors;
        }
        ErrorUtils.addErrorMessage(errors, `waypoint${waypointIndex}`, 'distance.errors.selectSuggestedAddress');
        return errors
    }

...

<FormProvider
...
validateOnMounted={validateOnMounted}
..

2. We can check if the current waypoint has error in

App/src/components/DistanceRequest/index.js

Line 198 in d2056af

renderItem={({item, drag, isActive, getIndex}) => (

const waypointValue = transaction.comment?.waypoints?.[`waypoint${getIndex()}`];
const hasError = !waypointValue.isChecking && !_.isEmpty(waypointValue) && (!waypointValue.lat || !waypointValue.lng)
return ( <DistanceRequestRenderItem
...
brickRoadIndicator={hasError && 'error'}

Result

Screen.Recording.2023-12-21.at.11.40.36.mp4

What alternative solutions did you explore? (Optional)

[conorpendergrast]

Reproduced on iOS (SafarI). @ntdiary two proposals for your review above!