[$250] In additional details page can't clear the first name/ last name field reported by @thesahindia

[kavimuru]

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. Make sure you have a name set at profile page
2. Visit https://staging.new.expensify.com/enable-payments
3. Try deleting the whole name

Expected Result:

User should be able to clear the name completely .

Actual Result:

You can't clear the name completely.

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.2.28-2
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

Screen.Recording.2022-05-10.at.7.45.53.PM.mov

Recording.954.mp4

Expensify/Expensify Issue URL:
Issue reported by: @thesahindia
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1652192776856909

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~013826c459732f8dcc
• Upwork Job ID: 1593389710349824000

[melvin-bot]

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

[hungvu193]

Proposal
In AdditionalDetailsStep.js the problem came from the way we calculated the value for first name and last name fields.
In this case, when we tried to delete the first name field and when it became empty, the getFirstName() function will return the firstName from PersonalDetails.extractFirstAndLastNameFromAvailableDetails(this.props.currentUserPersonalDetails) and made us couldn't edit the field anymore because the prop this.props.walletAdditionalDetailsDraft.legalFirstName was still empty so it always return firstName.

    getFirstName() {
        const {firstName} = PersonalDetails.extractFirstAndLastNameFromAvailableDetails(this.props.currentUserPersonalDetails);
        return this.props.walletAdditionalDetailsDraft.legalFirstName || firstName;
    }

  <TextInput
      containerStyles={[styles.mt4]}
      label={this.props.translate(this.fieldNameTranslationKeys.legalFirstName)}
      onChangeText={val => this.clearErrorAndSetValue('legalFirstName', val)}
      value={this.getFirstName()}
      errorText={this.getErrorText('legalFirstName')}
  />

Solution
Give the TextInput defaultValue prop and let the value prop to the prop that we updated in Onyx.

                                <TextInput
                                    containerStyles={[styles.mt4]}
                                    label={this.props.translate(this.fieldNameTranslationKeys.legalFirstName)}
                                    onChangeText={val => this.clearErrorAndSetValue('legalFirstName', val)}
-                                 value={this.getFirstName()}
+                                  value={this.props.walletAdditionalDetailsDraft.legalFirstName}
+                                  defaultValue={this.getFirstName()}
                                    errorText={this.getErrorText('legalFirstName')}
                                />



                             <TextInput
                                    containerStyles={[styles.mt4]}
                                    label={this.props.translate(this.fieldNameTranslationKeys.legalLastName)}
                                    onChangeText={val => this.clearErrorAndSetValue('legalLastName', val)}
-                                   value={this.getLastName()}
+                                  value={this.props.walletAdditionalDetailsDraft.legalLastName}
+                                  defaultValue={this.getLastName()}
                                    errorText={this.getErrorText('legalLastName')}
                                />

Result:

Screen.Recording.2022-11-17.at.18.10.15.mov

[melvin-bot]

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

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~013826c459732f8dcc

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @tylerkaraszewski (External), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[Emz27]

Proposal

• use state for textinput values where the api values are the default values, we dont need to listen to api values after that to prevent slow/lag on input change

I have this kind of bug in our project where we used redux form in our textinputs, redux form was slow thats why it keeps repeating the values

[s77rt]

Proposal

diff --git a/src/pages/EnablePayments/AdditionalDetailsStep.js b/src/pages/EnablePayments/AdditionalDetailsStep.js
index 1a90a8a35..808042118 100644
--- a/src/pages/EnablePayments/AdditionalDetailsStep.js
+++ b/src/pages/EnablePayments/AdditionalDetailsStep.js
@@ -73,17 +73,7 @@ const defaultProps = {
         idNumber: '',
         errorCode: '',
     },
-    walletAdditionalDetailsDraft: {
-        legalFirstName: '',
-        legalLastName: '',
-        addressStreet: '',
-        addressCity: '',
-        addressState: '',
-        addressZip: '',
-        phoneNumber: '',
-        dob: '',
-        ssn: '',
-    },
+    walletAdditionalDetailsDraft: {},
     ...withCurrentUserPersonalDetailsDefaultProps,
 };
 
@@ -121,12 +111,12 @@ class AdditionalDetailsStep extends React.Component {
 
     getFirstName() {
         const {firstName} = PersonalDetails.extractFirstAndLastNameFromAvailableDetails(this.props.currentUserPersonalDetails);
-        return this.props.walletAdditionalDetailsDraft.legalFirstName || firstName;
+        return this.props.walletAdditionalDetailsDraft.legalFirstName ?? firstName;
     }
 
     getLastName() {
         const {lastName} = PersonalDetails.extractFirstAndLastNameFromAvailableDetails(this.props.currentUserPersonalDetails);
-        return this.props.walletAdditionalDetailsDraft.legalLastName || lastName;
+        return this.props.walletAdditionalDetailsDraft.legalLastName ?? lastName;
     }
 
     /**

Details

1. walletAdditionalDetailsDraft props are not required and should not be initialised with empty string, keep them undefined.
2. In getFirstName and getLastName use nullish coalescing instead of short-circuting.

Kooha-2022-11-18-09-36-55.mp4

[thesahindia]

I believe it's a good opportunity to refactor this page to use Form and the issue can be solved in that. Let's update the issue description unless someone disagrees.

[hungvu193]

I agree, I remember we already have plan to refactor existing form to use Form component right?

[thesahindia]

Just adding some other ways to reach additional details page (Because the mentioned steps only work when you have a bank account)

Change the code at ModalStackNavigators.js and visit search page

 const SearchModalStackNavigator = createModalStackNavigator([{
     getComponent: () => {
-        const SearchPage = require('../../../pages/SearchPage').default;
-        return SearchPage;
+        const EnablePaymentsPage = require('../../../pages/EnablePayments/EnablePaymentsPage').default;
+        return EnablePaymentsPage;
     },
     name: 'Search_Root',

On web you can just visit http://localhost:8080/enable-payments

[sobitneupane]

I believe it's a good opportunity to refactor this page to use Form and the issue can be solved in that. Let's update the issue description unless someone disagrees.

Waiting for decision on this before reviewing proposal.

cc: @tylerkaraszewski @MitchExpensify

[MitchExpensify]

Asked in #contributor-plus for more eyes

[melvin-bot]

@tylerkaraszewski, @sobitneupane, @MitchExpensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

@tylerkaraszewski, @sobitneupane, @MitchExpensify 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[tylerkaraszewski]

Letting @joelbettner take this one.

[joelbettner]

I've been tackling this. I'm refactoring the page to use our Form functionality.

[joelbettner]

I'm working on the tests for this in the PR.

[joelbettner]

PR has been fully tested and is in review.

[joelbettner]

Test are complete and the PR is ready for review.

[MitchExpensify]

This was handled internally, and @sobitneupane held on any reviews, so I believe the only payment due is the reporting bonus to @thesahindia - Invited you to the Upwork Job here for that payment!

Also reassigning a new CM as this will need the payment completed once the invite is accepted

[thesahindia]

@davidcardoza, I have accepted the offer. Please settle this at upwork so that we can close this issue.

[davidcardoza]

Done

[joelbettner]

This issue still needs to be open because the refactor PR is still in review.

[joelbettner]

This was taken care of by the PR mentioned above.