[HOLD for payment 2023-10-10] [$500] Web - Country and State fields are empty if accessed via deep link

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

---

Action Performed:

1. Open App -> Navigate to Settings -> Profile -> Personal Details -> Home address
2. Enter Address details > Save the updated address
3. Copy address URL (https://staging.new.expensify.com/settings/profile/personal-details/address)
4. Sign Out
5. Paste URL and hit enter
6. Login with your credentials
7. Home address page opens but "Country" and "State" values are missing

Expected Result:

"Country" and "State/Province" values should be shown if saved by user

Actual Result:

"Country" and "State/Province" values are missing given that user's saved the values

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: 1.3.70.7
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

country_state_value_missing.mov

Recording.4612.mp4

Expensify/Expensify Issue URL:
Issue reported by: @ufumerfarooq
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1695140296239169

View all open jobs on GitHub

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~010def5669f0fd1df5

[melvin-bot]

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

[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 @Christinadobrzyn (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 - @eVoloshchak (External)

[saranshbalyan-1234]

Proposal

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

"Country" and "State/Province" values are missing while using deeplink

What is the root cause of that problem?

App/src/pages/settings/Profile/PersonalDetails/AddressPage.js

Line 70 in f6efb26

const address = lodashGet(privatePersonalDetails, 'address') || {};

The address object is initially empty, which is causing the issue as we are not setting the state and country states once the address object is changed.

App/src/pages/settings/Profile/PersonalDetails/AddressPage.js

Line 73 in f6efb26

const [state, setState] = useState(address.state);

App/src/pages/settings/Profile/PersonalDetails/AddressPage.js

Line 65 in f6efb26

const [currentCountry, setCurrentCountry] = useState(PersonalDetails.getCountryISO(lodashGet(privatePersonalDetails, 'address.country')));

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

    useEffect(() => {
      setState(address.state)
      setCurrentCountry(address.country)
    }, [address]);
    

Also we can move country state from

App/src/pages/settings/Profile/PersonalDetails/AddressPage.js

Line 65 in f6efb26

const [currentCountry, setCurrentCountry] = useState(PersonalDetails.getCountryISO(lodashGet(privatePersonalDetails, 'address.country')));

to this

    const [currentCountry, setCurrentCountry] = useState(PersonalDetails.getCountryISO(address.country));

What alternative solutions did you explore? (Optional)

N/A

[lcsvcn]

Proposal

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

Country and State fields are empty if accessed via deep link

What is the root cause of that problem?

The issue arises from the fact that the address.state and address.country values are being fetched after the initial state initialization. This delay in fetching the values is due to the presence of an isLoading variable. Consequently, when the initial state is set, it is based on an empty JSON object because the actual values have not yet been retrieved. This results in incorrect initialization with empty values, which should ideally reflect the user's address information.

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

I recommend initializing all fields (such as state, country, firstStreet, and secondStreet) with empty values initially. Then, use the useEffect hook to update these fields only when the isLoadingPersonalDetails variable indicates that the data retrieval process has completed.

Please note that both of these lines in the code:

App/src/pages/settings/Profile/PersonalDetails/AddressPage.js

Line 65 in f6efb26

const [currentCountry, setCurrentCountry] = useState(PersonalDetails.getCountryISO(lodashGet(privatePersonalDetails, 'address.country')));

App/src/pages/settings/Profile/PersonalDetails/AddressPage.js

Line 73 in f6efb26

const [state, setState] = useState(address.state);

Are unnecessary, as they set values when the address data is still loading.

This approach simplifies the code and ensures that we always work with the most up-to-date values.

At src/pages/settings/Profile/PersonalDetails/AddressPage.js:

    const address = lodashGet(privatePersonalDetails, 'address') || {};
    const isLoadingPersonalDetails = lodashGet(privatePersonalDetails, 'isLoading', true);

    const [state, setState] = useState('');
    const [country, setCountry] = useState('');
    const [firstStreet, setFirstStreet] = useState('');
    const [secondStreet, setSecondStreet] = useState('');
    
    useEffect(() => {
       if(isLoadingPersonalDetails === true) { 
            return;
        }
        
        const street =  (address.street || '').split('\n');
        
        setState(address.state);
        setCountry(address.country);
        setFirstStreet(street[0]);
        setFirstStreet(street[1]);
    }, [address, isLoadingPersonalDetails]);

We can keep the street1, street2 as it is in the line:

App/src/pages/settings/Profile/PersonalDetails/AddressPage.js

Line 72 in f6efb26

const [street1, street2] = (address.street || '').split('\n');

Because they currently aren't using setState. I would suggest changing to the setState, even tho we are not changing theirs states, and use in the useEffect to avoid future bugs similar to this, because street1 and street2 are using outdated values. But that part is optional, since it work fine without changing them, so that part is completely optional and up to the review to see if they agree with the modification or not. If we would not change we just change the state and country part of the implementation that I suggested.

This is a video working locally with the changes that I mention above.

Video

video.bug.mov

Here are my suggested changes for review

If my proposal is accepted, I can open a PR in a few hours to fix this. Thank you!

What alternative solutions did you explore? (Optional)

N/A