Migrate AmountSelectorModal to be nav RHP

src/ROUTES.ts

@@ -2673,6 +2673,10 @@ const ROUTES = {
         route: 'workspaces/:policyID/taxes/new',
         getRoute: (policyID: string) => `workspaces/${policyID}/taxes/new` as const,
     },
+    WORKSPACE_TAX_CREATE_VALUE: {
+        route: 'workspaces/:policyID/taxes/new/value',
+        getRoute: (policyID: string) => `workspaces/${policyID}/taxes/new/value` as const,
+    },
     WORKSPACE_TAX_EDIT: {
         route: 'workspaces/:policyID/tax/:taxID',
         getRoute: (policyID: string, taxID: string) => `workspaces/${policyID}/tax/${encodeURIComponent(taxID)}` as const,

src/SCREENS.ts

@@ -786,6 +786,7 @@ const SCREENS = {
         TAXES_SETTINGS_WORKSPACE_CURRENCY_DEFAULT: 'Workspace_Taxes_Settings_WorkspaceCurrency',
         TAXES_SETTINGS_FOREIGN_CURRENCY_DEFAULT: 'Workspace_Taxes_Settings_ForeignCurrency',
         TAX_CREATE: 'Workspace_Tax_Create',
+        TAX_CREATE_VALUE: 'Workspace_Tax_Create_Value',
         TAG_CREATE: 'Tag_Create',
         TAG_SETTINGS: 'Tag_Settings',
         TAG_APPROVER: 'Tag_Approver',

src/components/Form/types.ts

@@ -4,7 +4,6 @@ import type {ValueOf} from 'type-fest';
 import type AddPlaidBankAccount from '@components/AddPlaidBankAccount';
 import type AddressSearch from '@components/AddressSearch';
 import type AmountForm from '@components/AmountForm';
-import type AmountPicker from '@components/AmountPicker';
 import type AmountTextInput from '@components/AmountTextInput';
 import type CheckboxWithLabel from '@components/CheckboxWithLabel';
 import type CountryPicker from '@components/CountryPicker';
@@ -34,6 +33,7 @@ import type DimensionTypeSelector from '@pages/workspace/accounting/intacct/impo
 import type NetSuiteCustomFieldMappingPicker from '@pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteCustomFieldMappingPicker';
 import type NetSuiteCustomListPicker from '@pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteCustomListPicker';
 import type NetSuiteMenuWithTopDescriptionForm from '@pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteMenuWithTopDescriptionForm';
+import type TaxValuePicker from '@pages/workspace/taxes/TaxValuePicker';
 import type {Country} from '@src/CONST';
 import type {OnyxFormKey, OnyxValues} from '@src/ONYXKEYS';
 import type {Form} from '@src/types/form';
@@ -64,7 +64,7 @@ type ValidInputs =
     | typeof ValuePicker
     | typeof DatePicker
     | typeof RadioButtons
-    | typeof AmountPicker
+    | typeof TaxValuePicker
     | typeof TextPicker
     | typeof AddPlaidBankAccount
     | typeof EmojiPickerButtonDropdown

src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx

@@ -846,6 +846,7 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.WORKSPACE.TAX_NAME]: () => require<ReactComponentModule>('../../../../pages/workspace/taxes/NamePage').default,
     [SCREENS.WORKSPACE.TAX_VALUE]: () => require<ReactComponentModule>('../../../../pages/workspace/taxes/ValuePage').default,
     [SCREENS.WORKSPACE.TAX_CREATE]: () => require<ReactComponentModule>('../../../../pages/workspace/taxes/WorkspaceCreateTaxPage').default,
+    [SCREENS.WORKSPACE.TAX_CREATE_VALUE]: () => require<ReactComponentModule>('../../../../pages/workspace/taxes/WorkspaceCreateTaxValuePage').default,
     [SCREENS.WORKSPACE.TAX_CODE]: () => require<ReactComponentModule>('../../../../pages/workspace/taxes/WorkspaceTaxCodePage').default,
     [SCREENS.WORKSPACE.INVOICES_COMPANY_NAME]: () => require<ReactComponentModule>('../../../../pages/workspace/invoices/WorkspaceInvoicingDetailsName').default,
     [SCREENS.WORKSPACE.INVOICES_COMPANY_WEBSITE]: () => require<ReactComponentModule>('../../../../pages/workspace/invoices/WorkspaceInvoicingDetailsWebsite').default,

src/libs/Navigation/linkingConfig/RELATIONS/WORKSPACE_TO_RHP.ts

@@ -178,6 +178,7 @@ const WORKSPACE_TO_RHP: Partial<Record<keyof WorkspaceSplitNavigatorParamList, s
         SCREENS.WORKSPACE.TAXES_SETTINGS_FOREIGN_CURRENCY_DEFAULT,
         SCREENS.WORKSPACE.TAXES_SETTINGS_WORKSPACE_CURRENCY_DEFAULT,
         SCREENS.WORKSPACE.TAX_CREATE,
+        SCREENS.WORKSPACE.TAX_CREATE_VALUE,
         SCREENS.WORKSPACE.TAX_EDIT,
         SCREENS.WORKSPACE.TAX_NAME,
         SCREENS.WORKSPACE.TAX_VALUE,

src/libs/Navigation/linkingConfig/config.ts

@@ -1206,6 +1206,9 @@ const config: LinkingOptions<RootNavigatorParamList>['config'] = {
                         [SCREENS.WORKSPACE.TAX_CREATE]: {
                             path: ROUTES.WORKSPACE_TAX_CREATE.route,
                         },
+                        [SCREENS.WORKSPACE.TAX_CREATE_VALUE]: {
+                            path: ROUTES.WORKSPACE_TAX_CREATE_VALUE.route,
+                        },
                         [SCREENS.WORKSPACE.TAX_EDIT]: {
                             path: ROUTES.WORKSPACE_TAX_EDIT.route,
                         },

src/libs/Navigation/types.ts

@@ -1194,6 +1194,9 @@ type SettingsNavigatorParamList = {
     [SCREENS.WORKSPACE.TAX_CREATE]: {
         policyID: string;
     };
+    [SCREENS.WORKSPACE.TAX_CREATE_VALUE]: {
+        policyID: string;
+    };
     [SCREENS.WORKSPACE.TAX_EDIT]: {
         policyID: string;
         taxID: string;

src/pages/workspace/taxes/TaxValuePicker.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
+import useLocalize from '@hooks/useLocalize';
+import {getTaxValueWithPercentage} from '@libs/actions/TaxRate';
+import Navigation from '@libs/Navigation/Navigation';
+import CONST from '@src/CONST';
+import ROUTES from '@src/ROUTES';
+
+type TaxValuePickerProps = {
+    /** ID of the policy the new tax rate belongs to. */
+    policyID: string;
+
+    /** Current tax rate value (without the percent sign). */
+    value?: string;
+
+    /** Form validation error message. */
+    errorText?: string;
+
+    /** Label displayed on the right side of the menu item (e.g. "required"). */
+    rightLabel?: string;
+};
+
+function TaxValuePicker({policyID, value, errorText, rightLabel}: TaxValuePickerProps) {
+    const {translate} = useLocalize();
+
+    return (
+        <MenuItemWithTopDescription
+            shouldShowRightIcon
+            title={value ? getTaxValueWithPercentage(value) : ''}
+            description={translate('workspace.taxes.value')}
+            onPress={() => Navigation.navigate(ROUTES.WORKSPACE_TAX_CREATE_VALUE.getRoute(policyID))}
+            brickRoadIndicator={errorText ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
+            rightLabel={rightLabel}
+            errorText={errorText}
+        />
+    );
+}
+
+export default TaxValuePicker;

src/pages/workspace/taxes/WorkspaceCreateTaxPage.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import {View} from 'react-native';
-import AmountPicker from '@components/AmountPicker';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
@@ -10,6 +9,7 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import TextPicker from '@components/TextPicker';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {clearDraftValues} from '@libs/actions/FormActions';
 import {createPolicyTax, getNextTaxCode, getTaxValueWithPercentage, validateTaxName, validateTaxValue} from '@libs/actions/TaxRate';
 import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
@@ -19,12 +19,12 @@ import {isExistingTaxName} from '@libs/ValidationUtils';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading';
 import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading';
-import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
 import INPUT_IDS from '@src/types/form/WorkspaceNewTaxForm';
 import type {TaxRate} from '@src/types/onyx';
+import TaxValuePicker from './TaxValuePicker';
 
 type WorkspaceCreateTaxPageProps = WithPolicyAndFullscreenLoadingProps & PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.TAX_CREATE>;
 
@@ -37,6 +37,8 @@ function WorkspaceCreateTaxPage({
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
+    useEffect(() => () => clearDraftValues(ONYXKEYS.FORMS.WORKSPACE_NEW_TAX_FORM), []);
+
     const validateTaxNameCustom = (inputID: string) => {
         return (values: Record<string, string>) => {
             const errors: Record<string, string> = {};
@@ -116,21 +118,10 @@ function WorkspaceCreateTaxPage({
                                     shouldUseStrictHtmlTagValidation
                                 />
                                 <InputWrapper
-                                    InputComponent={AmountPicker}
+                                    InputComponent={TaxValuePicker}
                                     inputID={INPUT_IDS.VALUE}
-                                    title={(v) => (v ? getTaxValueWithPercentage(v) : '')}
-                                    description={translate('workspace.taxes.value')}
+                                    policyID={policyID}
                                     rightLabel={translate('common.required')}
-                                    decimals={CONST.MAX_TAX_RATE_DECIMAL_PLACES}
-                                    maxLength={CONST.MAX_TAX_RATE_INTEGER_PLACES}
-                                    isSymbolPressable={false}
-                                    symbol="%"
-                                    symbolPosition={CONST.TEXT_INPUT_SYMBOL_POSITION.SUFFIX}
-                                    autoGrowExtraSpace={variables.w80}
-                                    autoGrowMarginSide="left"
-                                    style={[styles.iouAmountTextInput, styles.textAlignRight]}
-                                    containerStyle={styles.iouAmountTextInputContainer}
-                                    touchableInputWrapperStyle={styles.heightUndefined}
                                 />
                             </View>
                         </FormProvider>