Work with Form.js wrapper and refactor address form by mollfpr · Pull Request #11611 · Expensify/App

mollfpr · 2022-10-05T17:01:35Z

Details

Updating Form.js to be able drill down the inputs inside another component file
Refactor AddressForm
- Remove withLocalize HOC and use the passed translate props from the parent component
- Adding new props inputKeys and shouldSaveDraft for Form.js usage
- Updating the inputs passing inputKeys according to the key name and shouldSaveDraft for Form.js usage
Updating the component that uses AddressForm to pass translate props

Fixed Issues

$ #10738

Tests

Open a form that uses AddressForm for example CompanyStep form
Go to Workspace > Connect bank account > Connect Manually > Connect Bank Account > Company Information Form
Verified that the UI is not changed on Company Address, City, State, and Zip Code inputs.
Verified that the validation is working for the above inputs
Verified that the form successfully submit and the value of the above input is saved

Verify that no errors appear in the JS console

PR Review Checklist

PR Author Checklist

PR Reviewer Checklist

The reviewer will copy/paste it into a new comment and complete it after the author checklist is completed

QA Steps

Open a form that uses AddressForm for example CompanyStep form
Go to Workspace > Connect bank account > Connect Manually > Connect Bank Account > Company Information Form
Verified that the UI is not changed on Company Address, City, State, and Zip Code inputs.
Verified that the validation is working for the above inputs
Verified that the form successfully submit and the value of the above input is saved

Verify that no errors appear in the JS console

Screenshots

Web

Refactor.AddressForm.-.Web.mov

Mobile Web - Chrome

5BRefactor.20AddressForm.5D.20-.20mWeb-Chrome.mov

Mobile Web - Safari

5BRefactor.20AddressForm.5D.20-.20mWeb-Safari.mov

Desktop

Refactor.AddressForm.-.Desktop.mov

iOS

Refactor.AddressForm.-.iOS.mov

Android

5BRefactor.20AddressForm.5D.20-.20Android.mov

melvin-bot · 2022-10-05T17:01:39Z

Hey! I see that you made changes to our Form component. Make sure to update the docs in FORMS.md accordingly. Cheers!

…orm-js-and-address-form

mananjadhav

Few comments and questions, @mollfpr. Can you help address them?

mananjadhav · 2022-10-11T01:12:04Z


 const defaultProps = {
    values: {
+        street: undefined,


Any specific reason we're setting them as undefined and not '' ?

App/src/components/TextInput/BaseTextInput.js

Lines 73 to 81 in 2f7f5ea

componentDidUpdate(prevProps) {

// Activate or deactivate the label when value is changed programmatically from outside

const inputValue = _.isUndefined(this.props.value) ? this.input.value : this.props.value;

if ((_.isUndefined(inputValue) || this.state.value === inputValue) && _.isEqual(prevProps.selection, this.props.selection)) {

return;

}

// eslint-disable-next-line react/no-did-update-set-state

this.setState({value: inputValue, selection: this.props.selection});

We need to pass undefined to value if we use inputID, the value will be controlled on Form.js.

mananjadhav · 2022-10-11T01:12:20Z


    /** Callback fired when a field changes. Passes args as {[fieldName]: val} */
-    onFieldChange: PropTypes.func.isRequired,
+    onFieldChange: PropTypes.func,


We're removing isRequired because?

Since the goal of these refactors is to make AddressForm usable with Form.js we don't need onFieldChange but it's kept to accommodate forms that do not use Form.js.

mananjadhav · 2022-10-11T01:13:15Z

+            if (_.isFunction(child.type)) {
+                const nestedChildren = new child.type(child.props);
+
+                if (!React.isValidElement(nestedChildren) || !nestedChildren.props.children) {


Are we always sure we'll have nestedChildren.props? I am wondering if this needs to be replaced with lodash.get ?

Good thinking! I'm not really sure but let's use lodash.get instead.

mananjadhav · 2022-10-11T01:18:33Z

+                onInputChange={props.onFieldChange}
+                errorText={props.errors.street ? props.translate('bankAccount.error.addressStreet') : ''}
+                hint={props.translate('common.noPO')}
+                renamedInputKeys={props.inputKeys}


We're setting these empty because?

Which one do you mean?

mollfpr · 2022-10-11T15:22:11Z

For testing the AddressForm works with Form.js I'm using CompanyStep and doing a small refactor.

diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js
index ac911276f..a8e6ae620 100644
--- a/src/pages/ReimbursementAccount/CompanyStep.js
+++ b/src/pages/ReimbursementAccount/CompanyStep.js
@@ -27,6 +27,7 @@ import ReimbursementAccountForm from './ReimbursementAccountForm';
 import * as ReimbursementAccount from '../../libs/actions/ReimbursementAccount';
 import * as ReimbursementAccountUtils from '../../libs/ReimbursementAccountUtils';
 import * as FormActions from '../../libs/actions/FormActions';
+import Form from '../../components/Form';

 const propTypes = {
     ...withLocalizePropTypes,
@@ -188,7 +189,32 @@ class CompanyStep extends React.Component {
                     onCloseButtonPress={Navigation.dismissModal}
                 />

-                <ReimbursementAccountForm onSubmit={this.submit}>
+                <Form
+                    formID="testForm"
+                    submitButtonText="Submit"
+                    validate={(values) => {
+                        const errors = {};
+
+                        if (!ValidationUtils.isRequiredFulfilled(values.addressStreet)) {
+                            errors.addressStreet = this.props.translate('bankAccount.error.addressStreet');
+                        }
+
+                        if (!ValidationUtils.isRequiredFulfilled(values.addressCity)) {
+                            errors.addressCity = this.props.translate('bankAccount.error.addressCity');
+                        }
+
+                        if (!ValidationUtils.isRequiredFulfilled(values.addressState)) {
+                            errors.addressState = this.props.translate('bankAccount.error.addressState');
+                        }
+
+                        if (!ValidationUtils.isRequiredFulfilled(values.addressZipCode)) {
+                            errors.addressZipCode = this.props.translate('bankAccount.error.zipCode');
+                        }
+
+                        return errors;
+                    }}
+                    onSubmit={this.submit}
+                >
                     <Text>{this.props.translate('companyStep.subtitle')}</Text>
                     <TextInput
                         label={this.props.translate('companyStep.legalBusinessName')}
@@ -199,31 +225,14 @@ class CompanyStep extends React.Component {
                         errorText={this.getErrorText('companyName')}
                     />
                     <AddressForm
+                        shouldSaveDraft
                         translate={this.props.translate}
                         streetTranslationKey="common.companyAddress"
-                        values={{
-                            street: this.state.addressStreet,
-                            city: this.state.addressCity,
-                            zipCode: this.state.addressZipCode,
-                            state: this.state.addressState,
-                        }}
-                        errors={{
-                            street: this.getErrors().addressStreet,
-                            city: this.getErrors().addressCity,
-                            zipCode: this.getErrors().addressZipCode,
-                            state: this.getErrors().addressState,
-                        }}
-                        onFieldChange={(values) => {
-                            const renamedFields = {
-                                street: 'addressStreet',
-                                state: 'addressState',
-                                city: 'addressCity',
-                                zipCode: 'addressZipCode',
-                            };
-                            _.each(values, (value, inputKey) => {
-                                const renamedInputKey = lodashGet(renamedFields, inputKey, inputKey);
-                                this.clearErrorAndSetValue(renamedInputKey, value);
-                            });
+                        inputKeys={{
+                            street: 'addressStreet',
+                            city: 'addressCity',
+                            state: 'addressState',
+                            zipCode: 'addressZipCode',
                         }}
                     />
                     <TextInput
@@ -297,7 +306,7 @@ class CompanyStep extends React.Component {
                         style={[styles.mt4]}
                         errorText={this.getErrorText('hasNoConnectionToCannabis')}
                     />
-                </ReimbursementAccountForm>
+                </Form>
             </>
         );
     }

Screen.Recording.2022-10-11.at.22.21.15.mov

mananjadhav · 2022-10-13T17:13:54Z

Thanks for the comment @mollfpr. Code looks fine now, I'll test and update my feedback here by tomorrow!

mananjadhav

Thanks for the PR @mollfpr. Apologies it took a bit longer, as needed to ensure that current flow doesn't break as well as it should work with new Form.js.

Just to keep everyone updated, we are only refactoring the AddressForm to make it compatible with Form.js. It should be backward compatible, and the other forms will be using this refactored component such as #9580

@puneetlath All yours. Can we also tag @luacmartins as he was involved in the solutioning and would be great to have another pair of eyes for the review.

🎀 👀 🎀
C+ reviewed

mananjadhav · 2022-10-16T07:20:55Z

@mollfpr The check list is failing. Can you confirm if it is inline with the latest template?

@puneetlath I guess the checklist action isn't working fine.

…orm-js-and-address-form

mollfpr · 2022-10-16T08:57:54Z

@mananjadhav Thank you for the review!

I just pulled the main branch and updated the author checklist. The checklist running well now.

mananjadhav · 2022-10-17T03:54:17Z

Thanks @mollfpr.

@puneetlath @luacmartins I am wondering if we need to update any documents regarding Form with a note about HOC

luacmartins · 2022-10-17T18:41:52Z

I am wondering if we need to update any documents regarding Form with a note about HOC

@mananjadhav @mollfpr yes, let's update FORMS.md to mention that children component's can't be wrapped in HOC

mollfpr · 2022-10-18T04:51:07Z

@mananjadhav @luacmartins Updated FORMS.md

mananjadhav · 2022-10-18T18:16:01Z

 </Form>
 ```

+`Form.js` also works with inputs component that's nested on a component that doesn't wrap with any HOC.


Can we simplify this statement? Even break it into two lines if required.

Form.js also works with inputs from a nested component. The only exception is that the nested component shouldn't be wrapped around any HoC.

@luacmartins can also share thoughts on this one.

Form.js also works with inputs from a nested component. The only exception is that the nested component shouldn't be wrapped around any HoC.

I'm onboard with your suggestion.

I'd suggest:

Form.js also works with inputs nested in custom components, e.g. AddressForm. However, the custom component cannot be wrapped in any HOC.

luacmartins · 2022-10-19T16:54:00Z

@mananjadhav could you please update your checklist to the latest version (found here) and make sure that you upload videos for all platforms?

luacmartins

Looks good. Just a couple of comments.

luacmartins · 2022-10-19T16:59:19Z

 </Form>
 ```

+`Form.js` also works with inputs component that's nested on a component that doesn't wrap with any HOC.


I'd suggest:

Form.js also works with inputs nested in custom components, e.g. AddressForm. However, the custom component cannot be wrapped in any HOC.

Co-authored-by: Carlos Martins <luacmartins@gmail.com>

luacmartins

LGTM and tests well. @puneetlath all yours.

luacmartins · 2022-10-20T17:03:41Z

@mananjadhav can you please update your reviewer checklist to the latest version and make sure that you add videos for all platforms please?

puneetlath · 2022-10-20T20:09:14Z

Approved on my end. @mananjadhav bump me for a merge once you've updated the PR reviewer checklist as requested here.

mananjadhav · 2022-10-20T20:09:51Z

Yes I am on it. This one's on my todo today.

mananjadhav · 2022-10-20T21:54:43Z

@luacmartins @puneetlath Here's the updated checklist with the screenshots.

@luacmartins The github action still shows it is incomplete.I a not sure why.

Screenshots

Web

web-address-form.mov

Mobile Web - Chrome

mweb-android-address-form.mov

Mobile Web - Safari

mweb-safari-address-form.mov

Desktop

desktop-address-form.mov

iOS

ios-address-form.mov

Android

android-address-form.mov

luacmartins · 2022-10-20T22:10:42Z

It's passing now. Just had to re-trigger it.

melvin-bot · 2022-10-20T22:10:54Z

@luacmartins looks like this was merged without the checklist test passing. Please add a note explaining why this was done and remove the Emergency label if this is not an emergency.

luacmartins · 2022-10-20T22:11:06Z

Tests passed. Removing Emergency label.

OSBotify · 2022-10-20T22:15:03Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

OSBotify · 2022-10-25T00:13:41Z

🚀 Deployed to staging by @luacmartins in version: 1.2.19-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

OSBotify · 2022-10-26T22:33:05Z

🚀 Deployed to production by @chiragsalian in version: 1.2.19-2 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

mollfpr added 3 commits October 5, 2022 23:59

able to drill down the form wrapper component

baab00d

refactoring the address form to support Form.js and regular form

5a50bde

passing localize value to AddressForm

c4b10b5

mollfpr changed the title ~~Refactor form js and address form~~ Work with Form.js wrapper and refactor address form Oct 7, 2022

mollfpr added 4 commits October 9, 2022 11:25

Merge branch 'main' of https://github.com/mollfpr/App into refactor-f…

354e452

…orm-js-and-address-form

Merge branch 'main' of https://github.com/mollfpr/App into refactor-f…

1e5e4d5

…orm-js-and-address-form

unnecessary creating new propTypes

b9cab31

reverting

59003a2

mollfpr marked this pull request as ready for review October 10, 2022 15:33

mollfpr requested a review from a team as a code owner October 10, 2022 15:33

melvin-bot Bot requested review from mananjadhav and puneetlath and removed request for a team October 10, 2022 15:33

mananjadhav reviewed Oct 11, 2022

View reviewed changes

using lodash.get

9aab17a

mananjadhav previously approved these changes Oct 16, 2022

View reviewed changes

Merge branch 'main' of https://github.com/mollfpr/App into refactor-f…

4e44ca8

…orm-js-and-address-form

updating FORMS.md

8657922

mollfpr dismissed mananjadhav’s stale review via 8657922 October 18, 2022 04:50

mananjadhav reviewed Oct 18, 2022

View reviewed changes

luacmartins self-requested a review October 19, 2022 14:50

updated doc

d03ff89

luacmartins reviewed Oct 19, 2022

View reviewed changes

mollfpr and others added 2 commits October 20, 2022 06:41

Update contributingGuides/FORMS.md

a69bc06

Co-authored-by: Carlos Martins <luacmartins@gmail.com>

Update src/components/Form.js

450ff4a

Co-authored-by: Carlos Martins <luacmartins@gmail.com>

luacmartins approved these changes Oct 20, 2022

View reviewed changes

puneetlath approved these changes Oct 20, 2022

View reviewed changes

luacmartins merged commit 0328b49 into Expensify:main Oct 20, 2022

melvin-bot Bot added the Emergency label Oct 20, 2022

luacmartins removed the Emergency label Oct 20, 2022

OSBotify mentioned this pull request Oct 24, 2022

Deploy Checklist: New Expensify 2022-10-24 #12108

Closed

45 tasks

kavimuru mentioned this pull request Oct 25, 2022

[HOLD for payment 2022-11-08] [$250] VBA - Error message not dismissed after selecting address from autofill option #12122

Closed

melvin-bot Bot mentioned this pull request Oct 26, 2022

[HOLD for payment 2022-11-02] [$1000] [Form Refactor] AddressForm #10738

Closed

8 tasks

	componentDidUpdate(prevProps) {
	// Activate or deactivate the label when value is changed programmatically from outside
	const inputValue = _.isUndefined(this.props.value) ? this.input.value : this.props.value;
	if ((_.isUndefined(inputValue) \|\| this.state.value === inputValue) && _.isEqual(prevProps.selection, this.props.selection)) {
	return;
	}

	// eslint-disable-next-line react/no-did-update-set-state
	this.setState({value: inputValue, selection: this.props.selection});

Uh oh!

Conversation

mollfpr commented Oct 5, 2022 • edited by luacmartins Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Details

Fixed Issues

Tests

PR Review Checklist

PR Author Checklist

PR Reviewer Checklist

QA Steps

Screenshots

Web

Mobile Web - Chrome

Mobile Web - Safari

Desktop

iOS

Android

Uh oh!

melvin-bot Bot commented Oct 5, 2022

Uh oh!

mananjadhav left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mollfpr commented Oct 11, 2022

Uh oh!

mananjadhav commented Oct 13, 2022

Uh oh!

mananjadhav left a comment • edited by luacmartins Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mananjadhav commented Oct 16, 2022

Uh oh!

mollfpr commented Oct 16, 2022

Uh oh!

mananjadhav commented Oct 17, 2022

Uh oh!

luacmartins commented Oct 17, 2022

Uh oh!

mollfpr commented Oct 18, 2022

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

luacmartins commented Oct 19, 2022

Uh oh!

luacmartins left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

luacmartins left a comment

Choose a reason for hiding this comment

Uh oh!

luacmartins commented Oct 20, 2022

Uh oh!

puneetlath commented Oct 20, 2022

Uh oh!

mollfpr commented Oct 5, 2022 •

edited by luacmartins

Loading

mananjadhav left a comment •

edited by luacmartins

Loading

mananjadhav commented Oct 20, 2022 •

edited

Loading