diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.js
index 14c8c27c67d3..a90d358ca0a3 100644
--- a/src/components/AddPlaidBankAccount.js
+++ b/src/components/AddPlaidBankAccount.js
@@ -16,6 +16,7 @@ import * as BankAccounts from '@userActions/BankAccounts';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import FullPageOfflineBlockingView from './BlockingViews/FullPageOfflineBlockingView';
+import FormHelpMessage from './FormHelpMessage';
import Icon from './Icon';
import getBankIcon from './Icon/BankIcons';
import Picker from './Picker';
@@ -59,6 +60,12 @@ const propTypes = {
/** Is displayed in new VBBA */
isDisplayedInNewVBBA: PropTypes.bool,
+
+ /** Text to display on error message */
+ errorText: PropTypes.string,
+
+ /** Function called whenever radio button value changes */
+ onInputChange: PropTypes.func,
};
const defaultProps = {
@@ -73,6 +80,8 @@ const defaultProps = {
bankAccountID: 0,
isPlaidDisabled: false,
isDisplayedInNewVBBA: false,
+ errorText: '',
+ onInputChange: () => {},
};
function AddPlaidBankAccount({
@@ -88,6 +97,8 @@ function AddPlaidBankAccount({
allowDebit,
isPlaidDisabled,
isDisplayedInNewVBBA,
+ errorText,
+ onInputChange,
}) {
const theme = useTheme();
const styles = useThemeStyles();
@@ -196,6 +207,7 @@ function AddPlaidBankAccount({
const mask = _.find(plaidBankAccounts, (account) => account.plaidAccountID === plaidAccountID).mask;
setSelectedPlaidAccountMask(mask);
onSelect(plaidAccountID);
+ onInputChange(plaidAccountID);
};
if (isPlaidDisabled) {
@@ -288,6 +300,7 @@ function AddPlaidBankAccount({
defaultCheckedValue={defaultSelectedPlaidAccountID}
onPress={handleSelectingPlaidAccount}
/>
+
);
}
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 1f9b1a0d0094..8bb0efce883f 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -1274,6 +1274,7 @@ export default {
hasBeenThrottledError: 'There was an error adding your bank account. Please wait a few minutes and try again.',
hasCurrencyError: 'Oops! It appears that your workspace currency is set to a different currency than USD. To proceed, please set it to USD and try again',
error: {
+ youNeedToSelectAnOption: 'You need to select an option to proceed.',
noBankAccountAvailable: 'Sorry, no bank account is available',
noBankAccountSelected: 'Please choose an account',
taxID: 'Please enter a valid tax ID number',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 740ff9375047..f1df004b4ead 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -1291,6 +1291,7 @@ export default {
hasCurrencyError:
'¡Ups! Parece que la moneda de tu espacio de trabajo está configurada en una moneda diferente a USD. Para continuar, por favor configúrala en USD e inténtalo nuevamente.',
error: {
+ youNeedToSelectAnOption: 'Debes seleccionar una opción para continuar.',
noBankAccountAvailable: 'Lo sentimos, no hay ninguna cuenta bancaria disponible',
noBankAccountSelected: 'Por favor, elige una cuenta bancaria',
taxID: 'Por favor, introduce un número de identificación fiscal válido',
diff --git a/src/pages/ReimbursementAccount/BankInfo/substeps/Plaid.tsx b/src/pages/ReimbursementAccount/BankInfo/substeps/Plaid.tsx
index 6b409ceeff42..a6900d06396c 100644
--- a/src/pages/ReimbursementAccount/BankInfo/substeps/Plaid.tsx
+++ b/src/pages/ReimbursementAccount/BankInfo/substeps/Plaid.tsx
@@ -4,6 +4,7 @@ import {withOnyx} from 'react-native-onyx';
import type {OnyxEntry} from 'react-native-onyx/lib/types';
import AddPlaidBankAccount from '@components/AddPlaidBankAccount';
import FormProvider from '@components/Form/FormProvider';
+import InputWrapper from '@components/Form/InputWrapper';
import useLocalize from '@hooks/useLocalize';
import type {SubStepProps} from '@hooks/useSubStep/types';
import useThemeStyles from '@hooks/useThemeStyles';
@@ -27,8 +28,8 @@ type PlaidOnyxProps = {
type PlaidProps = PlaidOnyxProps & SubStepProps;
-type ValuesToValidate = {
- acceptTerms: boolean;
+type ValuesType = {
+ selectedPlaidAccountID: string;
};
const BANK_INFO_STEP_KEYS = CONST.BANK_ACCOUNT.BANK_INFO_STEP.INPUT_KEY;
@@ -37,11 +38,12 @@ function Plaid({reimbursementAccount, reimbursementAccountDraft, onNext, plaidDa
const {translate} = useLocalize();
const styles = useThemeStyles();
const isFocused = useIsFocused();
+ const selectedPlaidAccountID = reimbursementAccountDraft?.[BANK_INFO_STEP_KEYS.PLAID_ACCOUNT_ID] ?? '';
- const validate = useCallback((values: ValuesToValidate): Errors => {
+ const validate = useCallback((values: ValuesType): Errors => {
const errorFields: Errors = {};
- if (!values.acceptTerms) {
- errorFields.acceptTerms = 'common.error.acceptTerms';
+ if (!values.selectedPlaidAccountID) {
+ errorFields.selectedPlaidAccountID = 'bankAccount.error.youNeedToSelectAnOption';
}
return errorFields;
@@ -75,7 +77,6 @@ function Plaid({reimbursementAccount, reimbursementAccountDraft, onNext, plaidDa
}, [plaidData, reimbursementAccountDraft, onNext]);
const bankAccountID = Number(reimbursementAccount?.achData?.bankAccountID ?? '0');
- const selectedPlaidAccountID = reimbursementAccountDraft?.[BANK_INFO_STEP_KEYS.PLAID_ACCOUNT_ID] ?? '';
return (
// @ts-expect-error TODO: Remove this once FormProvider (https://github.com/Expensify/App/issues/31972) is migrated to TypeScript.
@@ -86,9 +87,10 @@ function Plaid({reimbursementAccount, reimbursementAccountDraft, onNext, plaidDa
scrollContextEnabled
submitButtonText={translate('common.next')}
style={[styles.mh5, styles.flexGrow1]}
- isSubmitButtonVisible={!!selectedPlaidAccountID && (plaidData?.bankAccounts ?? []).length > 0}
>
- {
ReimbursementAccount.updateReimbursementAccountDraft({plaidAccountID});
@@ -99,6 +101,11 @@ function Plaid({reimbursementAccount, reimbursementAccountDraft, onNext, plaidDa
bankAccountID={bankAccountID}
selectedPlaidAccountID={selectedPlaidAccountID}
isDisplayedInNewVBBA
+ inputID="selectedPlaidAccountID"
+ containerStyles={[styles.mb1]}
+ inputMode={CONST.INPUT_MODE.TEXT}
+ style={[styles.mt5]}
+ defaultValue={selectedPlaidAccountID}
/>
);
diff --git a/src/pages/ReimbursementAccount/PersonalInfo/PersonalInfo.tsx b/src/pages/ReimbursementAccount/PersonalInfo/PersonalInfo.tsx
index fbe976537851..f3599979fba5 100644
--- a/src/pages/ReimbursementAccount/PersonalInfo/PersonalInfo.tsx
+++ b/src/pages/ReimbursementAccount/PersonalInfo/PersonalInfo.tsx
@@ -82,7 +82,7 @@ function PersonalInfo({reimbursementAccount, reimbursementAccountDraft, onBackBu
/>
diff --git a/src/styles/index.ts b/src/styles/index.ts
index e86cd25ccb82..d28b473724a8 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -677,11 +677,13 @@ const styles = (theme: ThemeColors) =>
},
loadingVBAAnimation: {
- width: '100%',
+ width: 140,
+ height: 140,
},
loadingVBAAnimationWeb: {
- width: '100%',
+ width: 140,
+ height: 140,
},
pickerSmall: (backgroundColor = theme.highlightBG) =>
@@ -4185,14 +4187,14 @@ const styles = (theme: ThemeColors) =>
height: 40,
borderWidth: 1,
borderRadius: 20,
- borderColor: colors.green400,
+ borderColor: theme.borderFocus,
justifyContent: 'center',
alignItems: 'center',
- color: colors.white,
+ color: theme.white,
},
interactiveStepHeaderLockedStepButton: {
- borderColor: colors.productDark400,
+ borderColor: theme.borderLighter,
},
interactiveStepHeaderStepText: {
@@ -4202,17 +4204,17 @@ const styles = (theme: ThemeColors) =>
},
interactiveStepHeaderCompletedStepButton: {
- backgroundColor: colors.green400,
+ backgroundColor: theme.iconSuccessFill,
},
interactiveStepHeaderStepLine: {
height: 1,
flexGrow: 1,
- backgroundColor: colors.green400,
+ backgroundColor: theme.iconSuccessFill,
},
interactiveStepHeaderLockedStepLine: {
- backgroundColor: colors.productDark400,
+ backgroundColor: theme.activeComponentBG,
},
confirmBankInfoCard: {
backgroundColor: colors.green800,