From 95ba920c155ed4096085960b1f27546d16f3a5a4 Mon Sep 17 00:00:00 2001 From: MrMuzyk Date: Thu, 25 Jan 2024 09:37:57 +0100 Subject: [PATCH] fix: Batch of bug fixes (#8) * fix: Plaid radio buttons behaviour * fix: correct header number on personal info screen * fix: interactive step sub header theming * fix: Animation size and props description --- src/components/AddPlaidBankAccount.js | 13 +++++++++++ src/languages/en.ts | 1 + src/languages/es.ts | 1 + .../BankInfo/substeps/Plaid.tsx | 23 ++++++++++++------- .../PersonalInfo/PersonalInfo.tsx | 2 +- src/styles/index.ts | 18 ++++++++------- 6 files changed, 41 insertions(+), 17 deletions(-) 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,