[Simplified Collect][Taxes] Add validation for custom tax name field

src/CONST.ts

@@ -358,6 +358,7 @@ const CONST = {
         NOT_INSTALLED: 'not-installed',
     },
     TAX_RATES: {
+        CUSTOM_NAME_MAX_LENGTH: 8,
         NAME_MAX_LENGTH: 50,
     },
     PLATFORM: {

src/components/TaxPicker.tsx

@@ -53,10 +53,10 @@ function TaxPicker({selectedTaxRate = '', taxRates, insets, onSubmit}: TaxPicker
         ];
     }, [selectedTaxRate, getTaxName]);
 
-    const sections = useMemo(() => {
-        const taxRatesOptions = OptionsListUtils.getTaxRatesSection(taxRates, selectedOptions as OptionsListUtils.Category[], searchValue, selectedTaxRate);
-        return taxRatesOptions;
-    }, [taxRates, searchValue, selectedOptions, selectedTaxRate]);
+    const sections = useMemo(
+        () => OptionsListUtils.getTaxRatesSection(taxRates, selectedOptions as OptionsListUtils.Category[], searchValue, selectedTaxRate),
+        [taxRates, searchValue, selectedOptions, selectedTaxRate],
+    );
 
     const headerMessage = OptionsListUtils.getHeaderMessageForNonUserList(sections[0].data.length > 0, searchValue);
 

src/languages/en.ts

@@ -1877,6 +1877,7 @@ export default {
                 taxRateAlreadyExists: 'This tax name is already in use.',
                 valuePercentageRange: 'Please enter a valid percentage between 0 and 100.',
                 genericFailureMessage: 'An error occurred while updating the tax rate, please try again.',
+                customNameRequired: 'Custom tax name is required.',
             },
         },
         emptyWorkspace: {

src/languages/es.ts

@@ -1901,6 +1901,7 @@ export default {
                 taxRateAlreadyExists: 'Ya existe un impuesto con este nombre',
                 valuePercentageRange: 'Introduzca un porcentaje válido entre 0 y 100',
                 genericFailureMessage: 'Se produjo un error al actualizar el tipo impositivo, inténtelo nuevamente.',
+                customNameRequired: 'El nombre del impuesto es obligatorio.',
             },
         },
         emptyWorkspace: {

src/pages/workspace/taxes/WorkspaceTaxesSettingsCustomTaxName.tsx

@@ -1,8 +1,9 @@
 import type {StackScreenProps} from '@react-navigation/stack';
-import React from 'react';
+import React, {useCallback} from 'react';
 import {View} from 'react-native';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
+import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import TextInput from '@components/TextInput';
@@ -12,6 +13,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import {setPolicyCustomTaxName} from '@libs/actions/Policy';
 import Navigation from '@libs/Navigation/Navigation';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
+import * as ValidationUtils from '@libs/ValidationUtils';
 import AdminPolicyAccessOrNotFoundWrapper from '@pages/workspace/AdminPolicyAccessOrNotFoundWrapper';
 import FeatureEnabledAccessOrNotFoundWrapper from '@pages/workspace/FeatureEnabledAccessOrNotFoundWrapper';
 import PaidPolicyAccessOrNotFoundWrapper from '@pages/workspace/PaidPolicyAccessOrNotFoundWrapper';
@@ -36,6 +38,17 @@ function WorkspaceTaxesSettingsCustomTaxName({
     const {translate} = useLocalize();
     const {inputCallbackRef} = useAutoFocusInput();
 
+    const validate = useCallback((values: FormOnyxValues<typeof ONYXKEYS.FORMS.WORKSPACE_TAX_CUSTOM_NAME>) => {
+        const errors: FormInputErrors<typeof ONYXKEYS.FORMS.WORKSPACE_TAX_CUSTOM_NAME> = {};
+        const customTaxName = values[INPUT_IDS.NAME];
+
+        if (!ValidationUtils.isRequiredFulfilled(customTaxName)) {
+            errors.name = 'workspace.taxes.errors.customNameRequired';
+        }
+
+        return errors;
+    }, []);
+
     const submit = ({name}: WorkspaceTaxCustomName) => {
         setPolicyCustomTaxName(policyID, name);
         Navigation.goBack(ROUTES.WORKSPACE_TAXES_SETTINGS.getRoute(policyID));
@@ -62,6 +75,7 @@ function WorkspaceTaxesSettingsCustomTaxName({
                             style={[styles.flexGrow1, styles.ph5]}
                             scrollContextEnabled
                             enabledWhenOffline
+                            validate={validate}
                             onSubmit={submit}
                         >
                             <View style={styles.mb4}>
@@ -72,7 +86,7 @@ function WorkspaceTaxesSettingsCustomTaxName({
                                     label={translate('workspace.editor.nameInputLabel')}
                                     accessibilityLabel={translate('workspace.editor.nameInputLabel')}
                                     defaultValue={policy?.taxRates?.name}
-                                    maxLength={CONST.TAX_RATES.NAME_MAX_LENGTH}
+                                    maxLength={CONST.TAX_RATES.CUSTOM_NAME_MAX_LENGTH}
                                     multiline={false}
                                     ref={inputCallbackRef}
                                 />