Refactor AddDebitCardPage to use Form

src/ONYXKEYS.js

@@ -155,9 +155,6 @@ export default {
     // Set when we are loading payment methods
     IS_LOADING_PAYMENT_METHODS: 'isLoadingPaymentMethods',
 
-    // Stores values for the add debit card form
-    ADD_DEBIT_CARD_FORM: 'addDebitCardForm',
-
     // Stores values for the request call form
     REQUEST_CALL_FORM: 'requestCallForm',
 
@@ -193,4 +190,9 @@ export default {
 
     // Validating Email?
     USER_SIGN_UP: 'userSignUp',
+
+    // List of Form ids
+    FORMS: {
+        ADD_DEBIT_CARD_FORM: 'addDebitCardForm',
+    },
 };

src/components/AddressSearch.js

@@ -3,6 +3,7 @@ import React, {useState} from 'react';
 import PropTypes from 'prop-types';
 import {LogBox, ScrollView, View} from 'react-native';
 import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete';
+import lodashGet from 'lodash/get';
 import CONFIG from '../CONFIG';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import styles from '../styles/styles';
@@ -46,6 +47,14 @@ const propTypes = {
     /** Customize the TextInput container */
     containerStyles: PropTypes.arrayOf(PropTypes.object),
 
+    /** A map of inputID key names */
+    renamedInputKeys: PropTypes.shape({
+        street: PropTypes.string,
+        city: PropTypes.string,
+        state: PropTypes.string,
+        zipCode: PropTypes.string,
+    }),
+
     ...withLocalizePropTypes,
 };
 
@@ -58,6 +67,12 @@ const defaultProps = {
     value: undefined,
     defaultValue: undefined,
     containerStyles: [],
+    renamedInputKeys: {
+        street: 'addressStreet',
+        city: 'addressCity',
+        state: 'addressState',
+        zipCode: 'addressZipCode',
+    },
 };
 
 // Do not convert to class component! It's been tried before and presents more challenges than it's worth.
@@ -107,7 +122,10 @@ const AddressSearch = (props) => {
             return;
         }
         if (props.inputID) {
-            _.each(values, (value, key) => props.onInputChange(value, key));
+            _.each(values, (value, key) => {
+                const inputKey = lodashGet(props.renamedInputKeys, key, key);
+                props.onInputChange(value, inputKey);
+            });
         } else {
             props.onInputChange(values);
         }

src/components/TextInput/BaseTextInput.js

@@ -64,20 +64,21 @@ class BaseTextInput extends Component {
     componentDidUpdate() {
         // Activate or deactivate the label when value is changed programmatically from outside
         // Only update when value prop is provided
-        if (_.isUndefined(this.props.value) || this.state.value === this.props.value) {
+        const inputValue = this.props.value || this.input.value;
+        if (_.isEmpty(inputValue) || this.state.value === inputValue) {
             return;
         }
 
         // eslint-disable-next-line react/no-did-update-set-state
-        this.setState({value: this.props.value});
-        this.input.setNativeProps({text: this.props.value});
+        this.setState({value: inputValue});
+        this.input.setNativeProps({text: inputValue});
 
         // In some cases, When the value prop is empty, it is not properly updated on the TextInput due to its uncontrolled nature, thus manually clearing the TextInput.
-        if (this.props.value === '') {
+        if (inputValue === '') {
             this.input.clear();
         }
 
-        if (this.props.value) {
+        if (inputValue) {
             this.activateLabel();
         } else if (!this.state.isFocused) {
             this.deactivateLabel();

src/libs/actions/PaymentMethods.js

@@ -140,7 +140,6 @@ function addBillingCard(params) {
     const cardMonth = CardUtils.getMonthFromExpirationDateString(params.expirationDate);
     const cardYear = CardUtils.getYearFromExpirationDateString(params.expirationDate);
 
-    Onyx.merge(ONYXKEYS.ADD_DEBIT_CARD_FORM, {submitting: true});
     DeprecatedAPI.AddBillingCard({
         cardNumber: params.cardNumber,
         cardYear,
@@ -152,7 +151,7 @@ function addBillingCard(params) {
         isP2PDebitCard: true,
         password: params.password,
     }).then(((response) => {
-        let errorMessage = '';
+        let serverErrorMessage = '';
         if (response.jsonCode === 200) {
             const cardObject = {
                 additionalData: {
@@ -173,12 +172,12 @@ function addBillingCard(params) {
             Growl.show(Localize.translateLocal('addDebitCardPage.growlMessageOnSave'), CONST.GROWL.SUCCESS, 3000);
             continueSetup();
         } else {
-            errorMessage = response.message ? response.message : Localize.translateLocal('addDebitCardPage.error.genericFailureMessage');
+            serverErrorMessage = response.message ? response.message : Localize.translateLocal('addDebitCardPage.error.genericFailureMessage');
         }
 
-        Onyx.merge(ONYXKEYS.ADD_DEBIT_CARD_FORM, {
-            submitting: false,
-            error: errorMessage,
+        Onyx.merge(ONYXKEYS.FORMS.ADD_DEBIT_CARD_FORM, {
+            isSubmitting: false,
+            serverErrorMessage,
         });
     }));
 }
@@ -187,9 +186,9 @@ function addBillingCard(params) {
  * Resets the values for the add debit card form back to their initial states
  */
 function clearDebitCardFormErrorAndSubmit() {
-    Onyx.set(ONYXKEYS.ADD_DEBIT_CARD_FORM, {
-        submitting: false,
-        error: '',
+    Onyx.set(ONYXKEYS.FORMS.ADD_DEBIT_CARD_FORM, {
+        isSubmitting: false,
+        serverErrorMessage: null,
     });
 }