[Simplified Collect][Taxes] Creating new taxes

src/ROUTES.ts

@@ -592,7 +592,7 @@ const ROUTES = {
         route: 'settings/workspaces/:policyID/members/:accountID/role-selection',
         getRoute: (policyID: string, accountID: number, backTo?: string) => getUrlWithBackToParam(`settings/workspaces/${policyID}/members/${accountID}/role-selection`, backTo),
     },
-    WORKSPACE_TAXES_NEW: {
+    WORKSPACE_TAX_CREATE: {
         route: 'settings/workspaces/:policyID/taxes/new',
         getRoute: (policyID: string) => `settings/workspaces/${policyID}/taxes/new` as const,
     },

src/components/AmountPicker/AmountSelectorModal.tsx

@@ -30,6 +30,7 @@ function AmountSelectorModal({value, description = '', onValueSelected, isVisibl
                 includePaddingTop={false}
                 includeSafeAreaPaddingBottom={false}
                 testID={AmountSelectorModal.displayName}
+                shouldEnableMaxHeight
             >
                 <HeaderWithBackButton
                     title={description}

src/components/AmountPicker/types.ts

@@ -1,18 +1,7 @@
 import type {AmountFormProps} from '@components/AmountForm';
 import type {MenuItemBaseProps} from '@components/MenuItem';
-import type {ListItem} from '@components/SelectionList/types';
 import type {MaybePhraseKey} from '@libs/Localize';
 
-type AmountPickerListItem = ListItem & {
-    value?: string;
-};
-
-type AmountPickerItem = {
-    label?: string;
-    value?: string;
-    description?: string;
-};
-
 type AmountSelectorModalProps = {
     /** Whether the modal is visible */
     isVisible: boolean;
@@ -48,4 +37,4 @@ type AmountPickerProps = {
 } & Pick<MenuItemBaseProps, 'rightLabel' | 'description'> &
     AmountFormProps;
 
-export type {AmountPickerItem, AmountSelectorModalProps, AmountPickerProps, AmountPickerListItem};
+export type {AmountSelectorModalProps, AmountPickerProps};

src/components/Form/types.ts

@@ -15,6 +15,7 @@ import type RoomNameInput from '@components/RoomNameInput';
 import type SingleChoiceQuestion from '@components/SingleChoiceQuestion';
 import type StatePicker from '@components/StatePicker';
 import type TextInput from '@components/TextInput';
+import type TextPicker from '@components/TextPicker';
 import type ValuePicker from '@components/ValuePicker';
 import type {MaybePhraseKey} from '@libs/Localize';
 import type BusinessTypePicker from '@pages/ReimbursementAccount/BusinessInfo/substeps/TypeBusiness/BusinessTypePicker';
@@ -45,6 +46,7 @@ type ValidInputs =
     | typeof DatePicker
     | typeof RadioButtons
     | typeof AmountPicker
+    | typeof TextPicker
     | typeof AddPlaidBankAccount;
 
 type ValueTypeKey = 'string' | 'boolean' | 'date' | 'country';

src/components/TextInputWithCurrencySymbol/BaseTextInputWithCurrencySymbol.tsx

@@ -31,7 +31,7 @@ function BaseTextInputWithCurrencySymbol(
     const isCurrencySymbolLTR = CurrencyUtils.isCurrencySymbolLTR(selectedCurrencyCode);
     const styles = useThemeStyles();
 
-    const currencySymbolButton = (
+    const currencySymbolButton = !hideCurrencySymbol && (
         <CurrencySymbolButton
             currencySymbol={currencySymbol ?? ''}
             onCurrencyButtonPress={onCurrencyButtonPress}
@@ -69,7 +69,7 @@ function BaseTextInputWithCurrencySymbol(
     if (isCurrencySymbolLTR) {
         return (
             <>
-                {!hideCurrencySymbol && currencySymbolButton}
+                {currencySymbolButton}
                 {amountTextInput}
                 {extraSymbol}
             </>
@@ -79,7 +79,7 @@ function BaseTextInputWithCurrencySymbol(
     return (
         <>
             {amountTextInput}
-            {!hideCurrencySymbol && currencySymbolButton}
+            {currencySymbolButton}
             {extraSymbol}
         </>
     );

src/components/TextPicker/TextSelectorModal.tsx

@@ -30,6 +30,7 @@ function TextSelectorModal({value, description = '', onValueSelected, isVisible,
                 includePaddingTop={false}
                 includeSafeAreaPaddingBottom={false}
                 testID={TextSelectorModal.displayName}
+                shouldEnableMaxHeight
             >
                 <HeaderWithBackButton
                     title={description}

src/components/TextPicker/types.ts

@@ -1,18 +1,7 @@
 import type {MenuItemBaseProps} from '@components/MenuItem';
-import type {ListItem} from '@components/SelectionList/types';
 import type {BaseTextInputProps} from '@components/TextInput/BaseTextInput/types';
 import type {MaybePhraseKey} from '@libs/Localize';
 
-type TextPickerListItem = ListItem & {
-    value?: string;
-};
-
-type TextPickerItem = {
-    label?: string;
-    value?: string;
-    description?: string;
-};
-
 type TextProps = Exclude<BaseTextInputProps, 'value' | 'onInputChange'>;
 
 type TextSelectorModalProps = {
@@ -54,4 +43,4 @@ type TextPickerProps = {
 } & Pick<MenuItemBaseProps, 'rightLabel' | 'description'> &
     TextProps;
 
-export type {TextPickerItem, TextSelectorModalProps, TextPickerProps, TextPickerListItem};
+export type {TextSelectorModalProps, TextPickerProps};

src/components/ValuePicker/ValueSelectorModal.tsx

@@ -29,7 +29,7 @@ function ValueSelectorModal({items = [], selectedItem, label = '', isVisible, on
                 style={styles.pb0}
                 includePaddingTop={false}
                 includeSafeAreaPaddingBottom={false}
-                testID="ValueSelectorModal"
+                testID={ValueSelectorModal.displayName}
             >
                 <HeaderWithBackButton
                     title={label}

src/languages/en.ts

@@ -1858,8 +1858,8 @@ export default {
             foreignDefault: 'Foreign currency default',
             value: 'Value',
             errors: {
-                taxRatealreadyExists: 'A tax with this name already exists',
-                valuePercentageRange: 'Please enter a valid percentage between 0 and 100',
+                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.',
             },
         },

src/languages/es.ts

@@ -1882,7 +1882,7 @@ export default {
             foreignDefault: 'Moneda extranjera por defecto',
             value: 'Valor',
             errors: {
-                taxRatealreadyExists: 'Ya existe un impuesto con este nombre',
+                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.',
             },

src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx

@@ -278,7 +278,7 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.SETTINGS.EXIT_SURVEY.CONFIRM]: () => require('../../../pages/settings/ExitSurvey/ExitSurveyConfirmPage').default as React.ComponentType,
     [SCREENS.WORKSPACE.WORKFLOWS_AUTO_REPORTING_FREQUENCY]: () => require('../../../pages/workspace/workflows/WorkspaceAutoReportingFrequencyPage').default as React.ComponentType,
     [SCREENS.WORKSPACE.WORKFLOWS_AUTO_REPORTING_MONTHLY_OFFSET]: () => require('../../../pages/workspace/workflows/WorkspaceAutoReportingMonthlyOffsetPage').default as React.ComponentType,
-    [SCREENS.WORKSPACE.TAXES_NEW]: () => require('../../../pages/workspace/taxes/WorkspaceNewTaxPage').default as React.ComponentType,
+    [SCREENS.WORKSPACE.TAXES_NEW]: () => require('../../../pages/workspace/taxes/WorkspaceCreateTaxPage').default as React.ComponentType,
 });
 
 const EnablePaymentsStackNavigator = createModalStackNavigator<EnablePaymentsNavigatorParamList>({

src/libs/Navigation/linkingConfig/config.ts

@@ -331,7 +331,7 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                             path: ROUTES.SETTINGS_EXIT_SURVEY_CONFIRM.route,
                         },
                         [SCREENS.WORKSPACE.TAXES_NEW]: {
-                            path: ROUTES.WORKSPACE_TAXES_NEW.route,
+                            path: ROUTES.WORKSPACE_TAX_CREATE.route,
                         },
                     },
                 },

src/libs/actions/TaxRate.ts

@@ -23,25 +23,25 @@ function covertTaxNameToID(name: string) {
 /**
  * Get new tax ID
  */
-function getNextTaxID(name: string, taxRates?: TaxRates): string {
+function getNextTaxCode(name: string, taxRates?: TaxRates): string {
     const newID = covertTaxNameToID(name);
     if (!taxRates?.[newID]) {
         return newID;
     }
 
     // If the tax ID already exists, we need to find a unique ID
     let nextID = 1;
-    while (nextID < 100) {
-        const newNameCandidate = covertTaxNameToID(`${name}_${nextID}`);
-        if (!taxRates?.[newNameCandidate]) {
-            return newNameCandidate;
-        }
+    while (taxRates?.[covertTaxNameToID(`${name}_${nextID}`)]) {
         nextID++;
     }
-    throw new Error('Could not find a unique tax ID');
+    return covertTaxNameToID(`${name}_${nextID}`);
 }
 
-function createWorkspaceTax(policyID: string, taxRate: TaxRate) {
+function createPolicyTax(policyID: string, taxRate: TaxRate) {
+    if (!taxRate.code) {
+        throw new Error('Tax code is required when creating a new tax rate.');
+    }
+
     const onyxData: OnyxData = {
         optimisticData: [
             {
@@ -68,7 +68,6 @@ function createWorkspaceTax(policyID: string, taxRate: TaxRate) {
                     taxRates: {
                         taxes: {
                             [taxRate.code]: {
-                                pendingAction: null,
                                 errors: null,
                             },
                         },
@@ -127,4 +126,4 @@ function clearTaxRateError(policyID: string, taxID: string, pendingAction?: Pend
     });
 }
 
-export {createWorkspaceTax, clearTaxRateError, getNextTaxID, getTaxValueWithPercentage};
+export {createPolicyTax, clearTaxRateError, getNextTaxCode, getTaxValueWithPercentage};

src/pages/workspace/taxes/WorkspaceNewTaxPage.tsx → src/pages/workspace/taxes/WorkspaceCreateTaxPage.tsx

@@ -11,7 +11,7 @@ import Text from '@components/Text';
 import TextPicker from '@components/TextPicker';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import {createWorkspaceTax, getNextTaxID, getTaxValueWithPercentage} from '@libs/actions/TaxRate';
+import {createPolicyTax, getNextTaxCode, getTaxValueWithPercentage} from '@libs/actions/TaxRate';
 import Navigation from '@libs/Navigation/Navigation';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
 import * as ValidationUtils from '@libs/ValidationUtils';
@@ -25,14 +25,14 @@ import type SCREENS from '@src/SCREENS';
 import INPUT_IDS from '@src/types/form/WorkspaceNewTaxForm';
 import type {TaxRate} from '@src/types/onyx';
 
-type WorkspaceNewTaxPageProps = WithPolicyAndFullscreenLoadingProps & StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.TAXES_NEW>;
+type WorkspaceCreateTaxPageProps = WithPolicyAndFullscreenLoadingProps & StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.TAXES_NEW>;
 
-function WorkspaceNewTaxPage({
+function WorkspaceCreateTaxPage({
     policy,
     route: {
         params: {policyID},
     },
-}: WorkspaceNewTaxPageProps) {
+}: WorkspaceCreateTaxPageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
@@ -47,7 +47,7 @@ function WorkspaceNewTaxPage({
 
             const name = values[INPUT_IDS.NAME];
             if (policy?.taxRates?.taxes && ValidationUtils.isExistingTaxName(name, policy.taxRates.taxes)) {
-                errors[INPUT_IDS.NAME] = 'workspace.taxes.errors.taxRatealreadyExists';
+                errors[INPUT_IDS.NAME] = 'workspace.taxes.errors.taxRateAlreadyExists';
             }
 
             return errors;
@@ -60,9 +60,9 @@ function WorkspaceNewTaxPage({
             const taxRate = {
                 ...values,
                 value: getTaxValueWithPercentage(value),
-                code: getNextTaxID(values[INPUT_IDS.NAME], policy?.taxRates?.taxes),
+                code: getNextTaxCode(values[INPUT_IDS.NAME], policy?.taxRates?.taxes),
             } satisfies TaxRate;
-            createWorkspaceTax(policyID, taxRate);
+            createPolicyTax(policyID, taxRate);
             Navigation.goBack();
         },
         [policy?.taxRates?.taxes, policyID],
@@ -72,8 +72,9 @@ function WorkspaceNewTaxPage({
         <AdminPolicyAccessOrNotFoundWrapper policyID={policyID}>
             <PaidPolicyAccessOrNotFoundWrapper policyID={policyID}>
                 <ScreenWrapper
-                    testID={WorkspaceNewTaxPage.displayName}
+                    testID={WorkspaceCreateTaxPage.displayName}
                     includeSafeAreaPaddingBottom={false}
+                    style={[styles.defaultModalContainer]}
                 >
                     <View style={[styles.h100, styles.flex1, styles.justifyContentBetween]}>
                         <HeaderWithBackButton title={translate('workspace.taxes.addRate')} />
@@ -118,6 +119,6 @@ function WorkspaceNewTaxPage({
     );
 }
 
-WorkspaceNewTaxPage.displayName = 'WorkspaceNewTaxPage';
+WorkspaceCreateTaxPage.displayName = 'WorkspaceCreateTaxPage';
 
-export default withPolicyAndFullscreenLoading(WorkspaceNewTaxPage);
+export default withPolicyAndFullscreenLoading(WorkspaceCreateTaxPage);

src/pages/workspace/taxes/WorkspaceTaxesPage.tsx

@@ -134,7 +134,7 @@ function WorkspaceTaxesPage({policy, route}: WorkspaceTaxesPageProps) {
             <Button
                 medium
                 success
-                onPress={() => Navigation.navigate(ROUTES.WORKSPACE_TAXES_NEW.getRoute(route.params.policyID))}
+                onPress={() => Navigation.navigate(ROUTES.WORKSPACE_TAX_CREATE.getRoute(route.params.policyID))}
                 icon={Expensicons.Plus}
                 text={translate('workspace.taxes.addRate')}
                 style={[styles.mr3, isSmallScreenWidth && styles.w50]}

src/types/onyx/Policy.ts

@@ -40,7 +40,7 @@ type TaxRate = OnyxCommon.OnyxValueWithOfflineFeedback<{
     value: string;
 
     /** The code associated with the tax rate. */
-    code: string;
+    code?: string;
 
     /** This contains the tax name and tax value as one name */
     modifiedName?: string;