Refactor get physical card flow

Expensify · Dec 20, 2023 · f0f3467 · f0f3467
1 parent 84d6278
commit f0f3467
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 9 deletions.
diff --git a/src/components/CheckboxWithLabel.tsx b/src/components/CheckboxWithLabel.tsx
@@ -40,7 +40,7 @@ type CheckboxWithLabelProps = RequiredLabelProps & {
     /** Error text to display */
     errorText?: string;
 
-    /** Value for checkbox. This prop is intended to be set by Form.js only */
+    /** Value for checkbox. This prop is intended to be set by FormProvider only */
     value?: boolean;
 
     /** The default value for the checkbox */

diff --git a/src/pages/EnablePayments/AdditionalDetailsStep.js b/src/pages/EnablePayments/AdditionalDetailsStep.js
@@ -87,7 +87,7 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP
     const shouldAskForFullSSN = walletAdditionalDetails.errorCode === CONST.WALLET.ERROR.SSN;
 
     /**
-     * @param {Object} values The values object is passed from Form.js and contains info for each form element that has an inputID
+     * @param {Object} values The values object is passed from FormProvider and contains info for each form element that has an inputID
      * @returns {Object}
      */
     const validate = (values) => {
@@ -128,7 +128,7 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP
     };
 
     /**
-     * @param {Object} values The values object is passed from Form.js and contains info for each form element that has an inputID
+     * @param {Object} values The values object is passed from FormProvider and contains info for each form element that has an inputID
      */
     const activateWallet = (values) => {
         const personalDetails = {

diff --git a/src/pages/settings/Wallet/Card/BaseGetPhysicalCard.js b/src/pages/settings/Wallet/Card/BaseGetPhysicalCard.js
@@ -3,7 +3,7 @@ import React, {useCallback, useEffect, useRef} from 'react';
 import {Text} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
-import Form from '@components/Form';
+import FormProvider from '@components/Form/FormProvider';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -114,7 +114,7 @@ const defaultProps = {
     loginList: {},
     isConfirmation: false,
     renderContent: (onSubmit, submitButtonText, styles, children = () => {}, onValidate = () => ({})) => (
-        <Form
+        <FormProvider
             formID={ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM}
             submitButtonText={submitButtonText}
             onSubmit={onSubmit}
@@ -123,7 +123,7 @@ const defaultProps = {
             validate={onValidate}
         >
             {children}
-        </Form>
+        </FormProvider>
     ),
     onValidate: () => ({}),
 };

diff --git a/src/pages/settings/Wallet/Card/GetPhysicalCardName.js b/src/pages/settings/Wallet/Card/GetPhysicalCardName.js
@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
+import InputWrapper from '@components/Form/InputWrapper';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -72,7 +73,8 @@ function GetPhysicalCardName({
             title={translate('getPhysicalCard.header')}
             onValidate={onValidate}
         >
-            <TextInput
+            <InputWrapper
+                InputComponent={TextInput}
                 inputID="legalFirstName"
                 name="legalFirstName"
                 label={translate('getPhysicalCard.legalFirstName')}
@@ -83,7 +85,8 @@ function GetPhysicalCardName({
                 containerStyles={[styles.mh5]}
                 shouldSaveDraft
             />
-            <TextInput
+            <InputWrapper
+                InputComponent={TextInput}
                 inputID="legalLastName"
                 name="legalLastName"
                 label={translate('getPhysicalCard.legalLastName')}

diff --git a/src/pages/settings/Wallet/Card/GetPhysicalCardPhone.js b/src/pages/settings/Wallet/Card/GetPhysicalCardPhone.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
+import InputWrapper from '@components/Form/InputWrapper';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -66,7 +67,8 @@ function GetPhysicalCardPhone({
             title={translate('getPhysicalCard.header')}
             onValidate={onValidate}
         >
-            <TextInput
+            <InputWrapper
+                InputComponent={TextInput}
                 inputID="phoneNumber"
                 name="phoneNumber"
                 label={translate('getPhysicalCard.phoneNumber')}