[HOLD for payment 2023-04-12] Make a datepicker always open on DOB page

[mountiny]

Problem

We have created a new datepicker component, which is custom and it's always on its own page. That means there is no other action for the user to do than to select a date. At the moment, however, the datepicker is closed when user navigated to the datepicker page meaning the user needs to take one unnecessary action to open the datepicker.

Given there is no other input on that given page, we should not put any hurdles to the user and have the component open at all time so user can interact with it from the first moment.

Why

Worse UX.

Solution

Make the datepicker component always visible.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~015416c73c2411f8c9
• Upwork Job ID: 1640348942409441280
• Last Price Increase: 2023-03-27

[MelvinBot]

Triggered auto assignment to @adelekennedy (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details.

[ArekChr]

Hello, I can work on that issue, Callstack

[mountiny]

Thanks!

[MelvinBot]

Job added to Upwork: https://www.upwork.com/jobs/~015416c73c2411f8c9

[MelvinBot]

Current assignee @adelekennedy is eligible for the External assigner, not assigning anyone new.

[MelvinBot]

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

[MelvinBot]

Current assignee @mountiny is eligible for the External assigner, not assigning anyone new.

[mollfpr]

@mountiny I see that @ArekChr will work on this issue. Can we remove the help wanted label? Thanks!

[mountiny]

Yep, sorry, its a follow up to the component he implemented.

[mountiny]

Any updates on this one @ArekChr ?

[ArekChr]

Hey @mountiny, I haven't had a chance to make any progress on this before, but I'm about to write a proposal

[ArekChr]

Proposal

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

Make a date picker always open on the date of birth page.

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

Now, opening the picker from the parent level is only possible on the Web platform by calling this.datePicker.click(), which invokes onPress={this.showPicker} of TextInput inside NewDatePicker.
Using textInputRef to open on mobile from the parent component is impossible, resulting in inconsistency.

We suggest calling the showPicker method, defined in the NewDatePicker component from the parent level. It can be accessed using the ref of the component.
To achieve that, we need to change the setting of the inner instance from TextInput to NewDatePicker. This will give us access to the NewDatePicker component methods and properties by reference.

Then we can add logic regarding opening the picker in the componentDidMount method of the DateOfBirthPage by simply calling this.datePicker.showPicker().

This solution simplifies opening the picker from the parent component by removing its old logic, which calls focus and click. And provides access to the NewDatePicker instance instead, which supports an opening picker for all platforms from the parent level.

Alternative Solutions

None were explored.

[mountiny]

@mollfpr let me know what you think, proposal looks good to me

[mollfpr]

Looks good to me 👍

[mountiny]

@ArekChr feel free to follow up with a PR, thanks!

[MelvinBot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[MelvinBot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.2.94-3 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• refactor: forward ref to datepicker instance #16779

If no regressions arise, payment will be issued on 2023-04-12. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[mountiny]

@adelekennedy I think only thing to handle here is $1000 to @mollfpr for the PR review.

@mollfpr can you also check if there is anything to do regarding bz checklist?

[mollfpr]

@mountiny Since this is a new component and open the date picker always open is a new feature; no regression or checklist should be added. We can use the test step for the regression step.

1. Go to settings -> Profile -> Personal Details
2. Click Date of birth
3. It should open the date of birth page with opened new calendar picker

[mountiny]

@mollfpr do you have access to testrail? I think there should be one test being added soon or it might be there already and we should update that one instead of adding new one

[mollfpr]

@mountiny I checked that we don't have any test cases regarding the DOB page.

[mountiny]

Its not added yet, but this one should be it #14322 (comment)

[mollfpr]

@mountiny I think the proposed regression test #14322 (comment) already covers this issue.

[mountiny]

Perfect! in that case nothing needs to be added @adelekennedy

[mountiny]

This is ready to be paid out

[adelekennedy]

@mollfpr sent offer!

[mollfpr]

@adelekennedy Accepted, thank you!