[HOLD for @0xmiroslav payment] Make Profile > Personal Details > Address true push-to-page fields.

[JmillsExpensify]

@Beamanator @cristipaval I was in a thread with @shawnborton and he noticed that both our State and Country fields are not true push-to-page inputs. Mind helping us understand why that's the case? Ideally if we're going to allow selection of a list, we'd follow a true push-to-page pattern where the row/input has a right caret, upon which tapping that takes you to the full list on a separate page. Right? Adding a New Feature label on this one given that it's not technically a bug.

In addition to the above, let's make sure we have 20px below each input grouping (could be just an input, or input + hint text), as @shawnborton asked here.

[MelvinBot]

Current assignee @JmillsExpensify is eligible for the NewFeature assigner, not assigning anyone new.

[JmillsExpensify]

Went ahead and assigned myself so no one is assigned and we align on next steps.

[cristipaval]

I think we refactored the parent Profile page but we missed this page.
It looks like there was an issue created for this but there was confusion here and the issue was closed. cc @Beamanator

[JmillsExpensify]

Ok no worries. We can just use this issue to close the loop. Sound good?

[cristipaval]

Sounds good to me. I can take this one and offload it to Callstack, as it is just front-end work.

[Prince-Mendiratta]

Hi @JmillsExpensify @cristipaval! I'd like to work on this, would it be possible to make this issue external or will you be going ahead with Callstack?

[gedu]

Hey hey, Edu here, I am from Callstack - expert contributor group, I can take a look at this one

[cristipaval]

Hey @gedu! Thanks for taking this over! Push-to-page design means that the user should be redirected to a new page to select the option, instead of the system picker. Take a look at how pronouns and Timezone selectors work in the Profile page.

[gedu]

@cristipaval I'm not seeing that State has a dropdown where is that or how can I reproduce it? (I'm up to date with main)

[cristipaval]

You first have to select the country, which I think isn't intuitive and also is not user-friendly to go down to the latest field, select an option, and then go back up to the State field to select an option. @JmillsExpensify @shawnborton What do you think? Shouldn't we reorder the fields to have Country before State, since the State options depend on the Country selection?

[shawnborton]

If we do that, I think I would opt to just have country be the first input of the entire form.

[JmillsExpensify]

Are we using this same page/form for business bank accounts, or only for personal details? If so, I think that might be confusing – that is, unless we default to the United States (we only support USD bank accounts).

[gedu]

For bank account is using Plaid, not sure if you can connect using another way.
If you wanna add a debit card, it uses another component and structure, so moving the Country up will be only for personal details.

[JmillsExpensify]

For bank account is using Plaid, not sure if you can connect using another way.

Ah yes we start with Plaid but immediately after that verification move to an Address page. As long as this is only for personal details, I think it makes sense.

[gedu]

chatting internally for a proposal

[gedu]

Proposal

Please restate the problem we are trying to solve with this issue.
Currently, both the State and Country fields are not true push-to-page inputs. To follow a true push-to-page pattern, we need to display an item that tapping on it should take the user to the full list on a separate page.

What is the root cause of this problem?
The root cause of the problem is that we are using the Picker components for the State and Country fields.

What changes do you think we should make to solve this problem?
To solve this problem, we can make the Country and State fields look like menu items (MenuItemWithTopDescription).

We should display the State field as a menu item only when the selected country is the USA. Additionally, I would move the Country field up, before the State field. If the selected country is the USA, the State field should be another push-to-page component showing the USA states.
We should use two different UI components for the State UI - a menu item when the USA is selected, and a normal input for other countries.

When the user clicks on the Country Menu Item, they will navigate to another page using ROUTES.SETTINGS_COUNTRY. In the new page, we will use the OptionsSelector component and fill it with props.translate(‘allCountries’).
We will create another page for the USA states, ROUTES.SETTINGS_USA_STATES, and use the same OptionsSelector component filled with props.translate(‘allStates’). We can also modify the StatePicker component to apply the push-to-page pattern on the Add a Debit Card page, which also uses the same component.

To send back the selected value, we will use the navigate with concatenation method, like so:

AddressPage
Routes.navigate(${ROUTES.SETTINGS_COUNTRY}?goBackTo=${Navigation.getActiveRoute()})
CountryPage
Routes.navigate(${routes.params.goBackTo}?country=${selectedCountry})

We will handle this the same way it is handled by the CalendarPicker with YearPickerPage.

[MelvinBot]

Looks like something related to react-navigation may have been mentioned in this issue discussion.

As a reminder, please make sure that all proposals are not workarounds and that any and all attempt to fix the issue holistically have been made before proceeding with a solution. Proposals to change our DeprecatedCustomActions.js files should not be accepted.

Feel free to drop a note in #expensify-open-source with any questions.

[cristipaval]

I like your proposal @gedu ! Go ahead with it 🚀

[cristipaval]

FYI: I changed the description of the issue to include what @shawnborton asked here.

[gedu]

@cristipaval awesome I will check it too.

Quick question, in my proposal I wanna use MenuItemWithTopDescription but what do you think?

country_item_selector.mp4

or should I try to use another component?

[gedu]

@cristipaval Hey hey, I think I like this way, what do you think?

country_as_input_push_to_page.mp4

[cristipaval]

Hey @gedu! Use MenuItemWithTopDescription. You could use negative margins to get everything well aligned.

[JmillsExpensify]

As in, $500 and $500?

[mountiny]

yes

[JmillsExpensify]

Ok cool. That works for me. Adding a payment summary for this issue:

• PR review: @s77rt $250
• PR review: @0xmiroslav $250

Upwork job is here: https://www.upwork.com/jobs/~01b61b644b462b028a and I already sent an offer to @s77rt. @0xmiroslav Will you be requesting payment via NewDot?

[s77rt]

Should the payment here be $250 - $250? We have this regression.

[s77rt]

Oh actually we have also another one #21049 (comment)

[melvin-bot]

@JmillsExpensify, @gedu, @mountiny, @0xmiroslav Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

@JmillsExpensify, @gedu, @mountiny, @0xmiroslav Whoops! This issue is 2 days overdue. Let's get this updated quick!

[mountiny]

$250 - $250 sounds good

[mountiny]

@JmillsExpensify bump on this one

[melvin-bot]

@JmillsExpensify, @gedu, @mountiny, @0xmiroslav Eep! 4 days overdue now. Issues have feelings too...

[JmillsExpensify]

Offer extended to @s77rt. @0xmiroslav I think there's still some uncertainty how you're being paid out. Please let me know how you'd like to proceed.

[JmillsExpensify]

@s77rt paid for this job. Going to add a hold for @0xmiroslav.

[mountiny]

making it monthly for the payment to miroslav

[JmillsExpensify]

@0xmiroslav Can we issue payment on this one yet?

[0xmiros]

Not yet

[JmillsExpensify]

I'm going to close this because I have an unsustainable amount of GH issue assigned. Please keep track on this one your side and let us know when you are ready to receive payment. Thanks!