fix: Batch of bug fixes (Expensify#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
MrMuzyk · Jan 25, 2024 · 95ba920 · 95ba920
1 parent 567b6fc
commit 95ba920
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 17 deletions.
diff --git 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}
  />
+ <FormHelpMessage message={errorText} />
  </FullPageOfflineBlockingView>
  );
  }

diff --git 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
@@ -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
@@ -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}
  >
- <AddPlaidBankAccount
+ <InputWrapper
+ // @ts-expect-error TODO: Remove this once InputWrapper (https://github.com/Expensify/App/issues/31972) is migrated to TypeScript
+ InputComponent={AddPlaidBankAccount}
  text={translate('bankAccount.plaidBodyCopy')}
  onSelect={(plaidAccountID: string) => {
  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}
  />
  </FormProvider>
  );

diff --git a/src/pages/ReimbursementAccount/PersonalInfo/PersonalInfo.tsx b/src/pages/ReimbursementAccount/PersonalInfo/PersonalInfo.tsx
@@ -82,7 +82,7 @@ function PersonalInfo({reimbursementAccount, reimbursementAccountDraft, onBackBu
  />
  <View style={[styles.ph5, styles.mv3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
  <InteractiveStepSubHeader
- startStepIndex={2}
+ startStepIndex={1}
  stepNames={CONST.BANK_ACCOUNT.STEP_NAMES}
  />
  </View>

diff --git 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,