Merge pull request #6752 from Expensify/marcaaron-additionalDetailsFormFix

Update "Additional details" form in KYC wallet upgrade flow

Author: Nicholas Murray

src/ONYXKEYS.js

@@ -118,6 +118,9 @@ export default {
     // Stores information about additional details form entry
     WALLET_ADDITIONAL_DETAILS: 'walletAdditionalDetails',
 
+    // Stores values put into the additional details step of the wallet KYC flow
+    WALLET_ADDITIONAL_DETAILS_DRAFT: 'walletAdditionalDetailsDraft',
+
     // Object containing Wallet terms step state
     WALLET_TERMS: 'walletTerms',
 

src/components/AddressSearch.js

@@ -30,9 +30,10 @@ const propTypes = {
 
     ...withLocalizePropTypes,
 };
+
 const defaultProps = {
     value: '',
-    containerStyles: null,
+    containerStyles: [],
 };
 
 // Do not convert to class component! It's been tried before and presents more challenges than it's worth.

src/components/FormScrollView.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {ScrollView} from 'react-native';
+import styles from '../styles/styles';
+
+const propTypes = {
+    /** Form elements */
+    children: PropTypes.node.isRequired,
+};
+
+const FormScrollView = React.forwardRef((props, ref) => (
+    <ScrollView
+        style={[styles.w100, styles.flex1]}
+        ref={ref}
+        contentContainerStyle={styles.flexGrow1}
+        keyboardShouldPersistTaps="handled"
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+    >
+        {props.children}
+    </ScrollView>
+));
+
+FormScrollView.propTypes = propTypes;
+export default FormScrollView;

src/libs/ValidationUtils.js

@@ -316,4 +316,5 @@ export {
     isValidLengthForFirstOrLastName,
     isValidPaypalUsername,
     isValidRoutingNumber,
+    isValidSSNLastFour,
 };

src/libs/actions/Wallet.js

@@ -28,15 +28,26 @@ function fetchOnfidoToken() {
 }
 
 /**
- * Privately used to update the additionalDetails object in Onyx (which will have various effects on the UI)
- *
  * @param {Boolean} loading whether we are making the API call to validate the user's provided personal details
- * @param {String[]} [errorFields] an array of field names that should display errors in the UI
- * @param {String} [additionalErrorMessage] an additional error message to display in the UI
  * @private
  */
-function setAdditionalDetailsStep(loading, errorFields = null, additionalErrorMessage = '') {
-    Onyx.merge(ONYXKEYS.WALLET_ADDITIONAL_DETAILS, {loading, errorFields, additionalErrorMessage});
+function setAdditionalDetailsLoading(loading) {
+    Onyx.merge(ONYXKEYS.WALLET_ADDITIONAL_DETAILS, {loading});
+}
+
+/**
+ * @param {Object} errorFields
+ */
+function setAdditionalDetailsErrors(errorFields) {
+    Onyx.merge(ONYXKEYS.WALLET_ADDITIONAL_DETAILS, {errorFields: null});
+    Onyx.merge(ONYXKEYS.WALLET_ADDITIONAL_DETAILS, {errorFields});
+}
+
+/**
+ * @param {String} additionalErrorMessage
+ */
+function setAdditionalDetailsErrorMessage(additionalErrorMessage) {
+    Onyx.merge(ONYXKEYS.WALLET_ADDITIONAL_DETAILS, {additionalErrorMessage});
 }
 
 /**
@@ -70,19 +81,9 @@ function activateWallet(currentStep, parameters) {
         onfidoData = parameters.onfidoData;
         Onyx.merge(ONYXKEYS.WALLET_ONFIDO, {error: '', loading: true});
     } else if (currentStep === CONST.WALLET.STEP.ADDITIONAL_DETAILS) {
-        setAdditionalDetailsStep(true);
-
-        // Personal details are heavily validated on the API side. We will only do a quick check to ensure the values
-        // exist in some capacity and then stringify them.
-        const errorFields = _.reduce(CONST.WALLET.REQUIRED_ADDITIONAL_DETAILS_FIELDS, (missingFields, fieldName) => (
-            !personalDetails[fieldName] ? [...missingFields, fieldName] : missingFields
-        ), []);
-
-        if (!_.isEmpty(errorFields)) {
-            setAdditionalDetailsStep(false, errorFields);
-            return;
-        }
-
+        setAdditionalDetailsLoading(true);
+        setAdditionalDetailsErrors(null);
+        setAdditionalDetailsErrorMessage('');
         personalDetails = JSON.stringify(parameters.personalDetails);
     } else if (currentStep === CONST.WALLET.STEP.TERMS) {
         hasAcceptedTerms = parameters.hasAcceptedTerms;
@@ -104,7 +105,15 @@ function activateWallet(currentStep, parameters) {
 
                 if (currentStep === CONST.WALLET.STEP.ADDITIONAL_DETAILS) {
                     if (response.title === CONST.WALLET.ERROR.MISSING_FIELD) {
-                        setAdditionalDetailsStep(false, response.data.fieldNames);
+                        // Errors for missing fields are returned from the API as an array of strings so we are converting this to an
+                        // object with field names as keys and boolean for values
+                        const errorFields = _.reduce(response.data.fieldNames, (errors, fieldName) => ({
+                            ...errors,
+                            [fieldName]: true,
+                        }), {});
+                        setAdditionalDetailsLoading(false);
+                        setAdditionalDetailsErrors(errorFields);
+                        setAdditionalDetailsErrorMessage('');
                         return;
                     }
 
@@ -116,11 +125,15 @@ function activateWallet(currentStep, parameters) {
                     ];
 
                     if (_.contains(errorTitles, response.title)) {
-                        setAdditionalDetailsStep(false, null, response.message);
+                        setAdditionalDetailsLoading(false);
+                        setAdditionalDetailsErrorMessage(response.message);
+                        setAdditionalDetailsErrors(null);
                         return;
                     }
 
-                    setAdditionalDetailsStep(false);
+                    setAdditionalDetailsLoading(false);
+                    setAdditionalDetailsErrors(null);
+                    setAdditionalDetailsErrorMessage('');
                     return;
                 }
 
@@ -132,7 +145,9 @@ function activateWallet(currentStep, parameters) {
             if (currentStep === CONST.WALLET.STEP.ONFIDO) {
                 Onyx.merge(ONYXKEYS.WALLET_ONFIDO, {error: '', loading: true});
             } else if (currentStep === CONST.WALLET.STEP.ADDITIONAL_DETAILS) {
-                setAdditionalDetailsStep(false);
+                setAdditionalDetailsLoading(false);
+                setAdditionalDetailsErrors(null);
+                setAdditionalDetailsErrorMessage('');
             } else if (currentStep === CONST.WALLET.STEP.TERMS) {
                 Onyx.merge(ONYXKEYS.WALLET_TERMS, {loading: false});
             }
@@ -159,9 +174,18 @@ function fetchUserWallet() {
         });
 }
 
+/**
+ * @param {Object} keyValuePair
+ */
+function updateAdditionalDetailsDraft(keyValuePair) {
+    Onyx.merge(ONYXKEYS.WALLET_ADDITIONAL_DETAILS_DRAFT, keyValuePair);
+}
+
 export {
     fetchOnfidoToken,
-    setAdditionalDetailsStep,
     activateWallet,
     fetchUserWallet,
+    setAdditionalDetailsErrors,
+    updateAdditionalDetailsDraft,
+    setAdditionalDetailsErrorMessage,
 };