[HOLD for payment 2023-10-27] [$125] DEV: Send Money - Console error on select date

[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: Dev 1.3.81.0
Reproducible in staging?: n
Reproducible in production?: n
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: @gadhiyamanan
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1697005322687549

Action Performed:

1. Click on FAB and select send money
2. Enter amount and select user
3. Click on Date

Expected Result:

It should not show console error

Actual Result:

Console error appears

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

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

Screen.Recording.2023-10-11.at.11.50.20.AM.mov

MacOS: Desktop

Screen.Recording.2023-10-11.at.12.47.33.PM.mov

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0185739100858c4b73
• Upwork Job ID: 1712083237317971968
• Last Price Increase: 2023-10-16
• Automatic offers:
• abdulrahuman5196 | Reviewer | 27217350
• akinwale | Contributor | 27217351
• gadhiyamanan | Reporter | 27217352

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0185739100858c4b73

[melvin-bot]

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

[akinwale]

Proposal

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

There is a console error after opening the Date push-to-page for a money request.

What is the root cause of that problem?

In MoneyRequestDatePage, the withOnyx key used for obtaining the value for the selectedTab prop is trying to retrieve the key for selectedTab_ReceiptTab.

App/src/pages/iou/MoneyRequestDatePage.js

Lines 120 to 122 in d59cc1e

	selectedTab: {
	key: `${ONYXKEYS.COLLECTION.SELECTED_TAB}${CONST.TAB.RECEIPT_TAB_ID}`,
	},

For a send money request, the page is not embedded in OnyxTabNavigator, so this key is never set and the error occurs. If a request money action is performed before a send money action, there will be no error.

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

Solution 1
Add a default prop value of empty string for selectedTab in MoneyRequestDatePage and remove isRequired to make it an optional prop. The prop type can also be updated to allow an empty value, but I did not see any errors nor warnings if the empty string value is not included.

-selectedTab: PropTypes.oneOf([CONST.TAB.DISTANCE, CONST.TAB.MANUAL, CONST.TAB.SCAN]).isRequired,
+selectedTab: PropTypes.oneOf([CONST.TAB.DISTANCE, CONST.TAB.MANUAL, CONST.TAB.SCAN, '']).isRequired,

Solution 2
Set the value for the selectedTab_ReceiptTab Onyx key when creating a send money request to an empty value. This may also require updating the allowed values for prop type for the selectedTab prop in the MoneyRequestDatePage component.

Tab.setSelectedTab(CONST.TAB.RECEIPT_TAB_ID, '');

What alternative solutions did you explore? (Optional)

None.

[Pujan92]

Not able to reproduce.

[akinwale]

Not able to reproduce.

It's not reproducible if you have already performed a request money action in the current session. It can be reliably reproduced if you perform ths Send money action first after logging in to a new session.

[Pujan92]

Oh, ok. I will try with that.

[ikevin127]

Proposal

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

Send Money - Opening Date or Description should not console errors:

Warning: Failed prop type: The prop 'selectedTab' is marked as required in 'MoneyRequestDatePage', but its value is 'undefined'.
or
Warning: Failed prop type: The prop 'selectedTab' is marked as required in 'MoneyRequestDescriptionPage', but its value is 'undefined'.

What is the root cause of that problem?

The same console error happens when opening both Description and Date, see video below.

MacOS: Chrome / Safari

web.mov

App/src/pages/iou/MoneyRequestSelectorPage.js

Lines 103 to 110 in b1d7d2c

	<OnyxTabNavigator
	id={CONST.TAB.RECEIPT_TAB_ID}
	selectedTab={props.selectedTab}
	tabBar={({state, navigation, position}) => (
	<TabSelector
	state={state}
	navigation={navigation}
	position={position}

The problem comes from the fact that within the component mentioned above, the Send Money - Description and Date components are not wrapped by OnyxTabNavigator which means that when those tabs are selected within Send Money, the selectedTab prop will be undefined for both of them.

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

Considering the current logic of the Send Money functionality is working as expected, except the console error thrown by the selectedTab prop being undefined I suggest removing isRequired from the selectedTab prop from both MoneyRequestDatePage.js and MoneyRequestDescriptionPage.js components in which the error is thrown when undefined, like so:

    /** The current tab we have navigated to in the request modal. String that corresponds to the request type. */
-    selectedTab: PropTypes.oneOf([CONST.TAB.DISTANCE, CONST.TAB.MANUAL, CONST.TAB.SCAN]).isRequired,
+    selectedTab: PropTypes.oneOf([CONST.TAB.DISTANCE, CONST.TAB.MANUAL, CONST.TAB.SCAN]),

What alternative solutions did you explore? (Optional)

N/A

Videos

MacOS: Chrome / Safari

web.mov

[abdulrahuman5196]

@akinwale Send money doesn't have date anymore.
Is this console error happening still? In any other place?

[akinwale]

@akinwale Send money doesn't have date anymore. Is this console error happening still? In any other place?

@abdulrahuman5196 It happens when you tap description since that also has the selectedTab property as required so we have to fix it for that.

[abdulrahuman5196]

From @akinwale 's proposal here #29296 (comment)

Add a default prop value of empty string for selectedTab in MoneyRequestDatePage and remove isRequired to make it an optional prop

This looks good to me since for send money selectedTab wouldn't be present and we are just using the selected tab to identify distance request. We should do this change in MoneyRequestDescriptionPage and any other places this issue occurs.

🎀 👀 🎀
C+ Reviewed