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
Expensify · 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,