From f0f34676d99f8cb323c8dd67b28aeea4aa24b5d1 Mon Sep 17 00:00:00 2001
From: Kamil Owczarz <kamil.owczarz@swmansion.com>
Date: Wed, 20 Dec 2023 15:03:28 +0100
Subject: [PATCH] Refactor get physical card flow

---
 src/components/CheckboxWithLabel.tsx                   | 2 +-
 src/pages/EnablePayments/AdditionalDetailsStep.js      | 4 ++--
 src/pages/settings/Wallet/Card/BaseGetPhysicalCard.js  | 6 +++---
 src/pages/settings/Wallet/Card/GetPhysicalCardName.js  | 7 +++++--
 src/pages/settings/Wallet/Card/GetPhysicalCardPhone.js | 4 +++-
 5 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/components/CheckboxWithLabel.tsx b/src/components/CheckboxWithLabel.tsx
index 9660c9e1a2e5..1dfe137269e4 100644
--- 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
index d937be615370..faa525a318ab 100644
--- 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
index 1d1ce906189b..cd1f4591a61a 100644
--- 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
index 0040dac8b75f..5b954d432cce 100644
--- 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
index 131e71ccb2d0..5e4feac83d96 100644
--- 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')}