[Simplified Collect][Taxes] Creating new taxes

src/CONST.ts

@@ -4065,6 +4065,10 @@ const CONST = {
     SESSION_STORAGE_KEYS: {
         INITIAL_URL: 'INITIAL_URL',
     },
+
+    TAX_RATES: {
+        NAME_MAX_LENGTH: 50,
+    },
 } as const;
 
 type Country = keyof typeof CONST.ALL_COUNTRIES;

src/ONYXKEYS.ts

@@ -411,6 +411,8 @@ const ONYXKEYS = {
         EXIT_SURVEY_RESPONSE_FORM_DRAFT: 'exitSurveyResponseFormDraft',
         POLICY_TAG_NAME_FORM: 'policyTagNameForm',
         POLICY_TAG_NAME_FORM_DRAFT: 'policyTagNameFormDraft',
+        WORKSPACE_NEW_TAX_FORM: 'workspaceNewTaxForm',
+        WORKSPACE_NEW_TAX_FORM_DRAFT: 'workspaceNewTaxFormDraft',
     },
 } as const;
 
@@ -458,6 +460,7 @@ type OnyxFormValuesMapping = {
     [ONYXKEYS.FORMS.PERSONAL_BANK_ACCOUNT]: FormTypes.PersonalBankAccountForm;
     [ONYXKEYS.FORMS.WORKSPACE_DESCRIPTION_FORM]: FormTypes.WorkspaceDescriptionForm;
     [ONYXKEYS.FORMS.POLICY_TAG_NAME_FORM]: FormTypes.PolicyTagNameForm;
+    [ONYXKEYS.FORMS.WORKSPACE_NEW_TAX_FORM]: FormTypes.WorkspaceNewTaxForm;
     [ONYXKEYS.FORMS.POLICY_CREATE_DISTANCE_RATE_FORM]: FormTypes.PolicyCreateDistanceRateForm;
 };
 

src/ROUTES.ts

@@ -592,6 +592,10 @@ 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_TAX_CREATE: {
+        route: 'settings/workspaces/:policyID/taxes/new',
+        getRoute: (policyID: string) => `settings/workspaces/${policyID}/taxes/new` as const,
+    },
     WORKSPACE_DISTANCE_RATES: {
         route: 'settings/workspaces/:policyID/distance-rates',
         getRoute: (policyID: string) => `settings/workspaces/${policyID}/distance-rates` as const,

src/SCREENS.ts

@@ -216,6 +216,7 @@ const SCREENS = {
         TAGS_SETTINGS: 'Tags_Settings',
         TAGS_EDIT: 'Tags_Edit',
         TAXES: 'Workspace_Taxes',
+        TAX_CREATE: 'Workspace_Tax_Create',
         TAG_CREATE: 'Tag_Create',
         TAG_SETTINGS: 'Tag_Settings',
         CURRENCY: 'Workspace_Profile_Currency',

src/components/AmountForm.tsx

@@ -12,8 +12,9 @@ import * as MoneyRequestUtils from '@libs/MoneyRequestUtils';
 import CONST from '@src/CONST';
 import BigNumberPad from './BigNumberPad';
 import FormHelpMessage from './FormHelpMessage';
-import type {BaseTextInputRef} from './TextInput/BaseTextInput/types';
+import type {BaseTextInputProps, BaseTextInputRef} from './TextInput/BaseTextInput/types';
 import TextInputWithCurrencySymbol from './TextInputWithCurrencySymbol';
+import type TextInputWithCurrencySymbolProps from './TextInputWithCurrencySymbol/types';
 
 type AmountFormProps = {
     /** Amount supplied by the FormProvider */
@@ -36,7 +37,8 @@ type AmountFormProps = {
 
     /** Whether the currency symbol is pressable */
     isCurrencyPressable?: boolean;
-};
+} & Pick<TextInputWithCurrencySymbolProps, 'hideCurrencySymbol' | 'extraSymbol'> &
+    Pick<BaseTextInputProps, 'autoFocus'>;
 
 /**
  * Returns the new selection object based on the updated amount's length
@@ -51,7 +53,7 @@ const NUM_PAD_CONTAINER_VIEW_ID = 'numPadContainerView';
 const NUM_PAD_VIEW_ID = 'numPadView';
 
 function AmountForm(
-    {value: amount, currency = CONST.CURRENCY.USD, extraDecimals = 0, errorText, onInputChange, onCurrencyButtonPress, isCurrencyPressable = true}: AmountFormProps,
+    {value: amount, currency = CONST.CURRENCY.USD, extraDecimals = 0, errorText, onInputChange, onCurrencyButtonPress, isCurrencyPressable = true, ...rest}: AmountFormProps,
     forwardedRef: ForwardedRef<BaseTextInputRef>,
 ) {
     const styles = useThemeStyles();
@@ -214,6 +216,8 @@ function AmountForm(
                     }}
                     onKeyPress={textInputKeyPress}
                     isCurrencyPressable={isCurrencyPressable}
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...rest}
                 />
                 {!!errorText && (
                     <FormHelpMessage
@@ -243,3 +247,4 @@ function AmountForm(
 AmountForm.displayName = 'AmountForm';
 
 export default forwardRef(AmountForm);
+export type {AmountFormProps};

src/components/AmountPicker/AmountSelectorModal.tsx

@@ -0,0 +1,64 @@
+import React, {useState} from 'react';
+import {View} from 'react-native';
+import AmountForm from '@components/AmountForm';
+import Button from '@components/Button';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import Modal from '@components/Modal';
+import ScreenWrapper from '@components/ScreenWrapper';
+import ScrollView from '@components/ScrollView';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
+import type {AmountSelectorModalProps} from './types';
+
+function AmountSelectorModal({value, description = '', onValueSelected, isVisible, onClose, ...rest}: AmountSelectorModalProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+
+    const [currentValue, setValue] = useState(value);
+
+    return (
+        <Modal
+            type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
+            isVisible={isVisible}
+            onClose={onClose}
+            onModalHide={onClose}
+            hideModalContentWhileAnimating
+            useNativeDriver
+        >
+            <ScreenWrapper
+                includePaddingTop={false}
+                includeSafeAreaPaddingBottom={false}
+                testID={AmountSelectorModal.displayName}
+                shouldEnableMaxHeight
+            >
+                <HeaderWithBackButton
+                    title={description}
+                    onBackButtonPress={onClose}
+                />
+                <ScrollView contentContainerStyle={[styles.flex1, styles.mh5, styles.mb5]}>
+                    <View style={styles.flex1}>
+                        <AmountForm
+                            // eslint-disable-next-line react/jsx-props-no-spreading
+                            {...rest}
+                            autoFocus
+                            value={currentValue}
+                            onInputChange={setValue}
+                        />
+                    </View>
+                    <Button
+                        success
+                        large
+                        pressOnEnter
+                        text={translate('common.save')}
+                        onPress={() => onValueSelected?.(currentValue ?? '')}
+                    />
+                </ScrollView>
+            </ScreenWrapper>
+        </Modal>
+    );
+}
+
+AmountSelectorModal.displayName = 'AmountSelectorModal';
+
+export default AmountSelectorModal;

src/components/AmountPicker/index.tsx

@@ -0,0 +1,65 @@
+import React, {forwardRef, useState} from 'react';
+import type {ForwardedRef} from 'react';
+import {View} from 'react-native';
+import FormHelpMessage from '@components/FormHelpMessage';
+import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
+import variables from '@styles/variables';
+import callOrReturn from '@src/types/utils/callOrReturn';
+import AmountSelectorModal from './AmountSelectorModal';
+import type {AmountPickerProps} from './types';
+
+function AmountPicker({value, description, title, errorText = '', onInputChange, furtherDetails, rightLabel, ...rest}: AmountPickerProps, forwardedRef: ForwardedRef<View>) {
+    const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
+    const [isPickerVisible, setIsPickerVisible] = useState(false);
+
+    const showPickerModal = () => {
+        setIsPickerVisible(true);
+    };
+
+    const hidePickerModal = () => {
+        setIsPickerVisible(false);
+    };
+
+    const updateInput = (updatedValue: string) => {
+        if (updatedValue !== value) {
+            onInputChange?.(updatedValue);
+        }
+        hidePickerModal();
+    };
+
+    const descStyle = !value || value.length === 0 ? StyleUtils.getFontSizeStyle(variables.fontSizeLabel) : null;
+
+    return (
+        <View>
+            <MenuItemWithTopDescription
+                ref={forwardedRef}
+                shouldShowRightIcon
+                title={callOrReturn(title, value)}
+                descriptionTextStyle={descStyle}
+                description={description}
+                onPress={showPickerModal}
+                furtherDetails={furtherDetails}
+                rightLabel={rightLabel}
+            />
+            <View style={styles.ml5}>
+                <FormHelpMessage message={errorText} />
+            </View>
+            <AmountSelectorModal
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...rest}
+                value={value}
+                isVisible={isPickerVisible}
+                description={description}
+                onClose={hidePickerModal}
+                onValueSelected={updateInput}
+            />
+        </View>
+    );
+}
+
+AmountPicker.displayName = 'AmountPicker';
+
+export default forwardRef(AmountPicker);

src/components/AmountPicker/types.ts

@@ -0,0 +1,40 @@
+import type {AmountFormProps} from '@components/AmountForm';
+import type {MenuItemBaseProps} from '@components/MenuItem';
+import type {MaybePhraseKey} from '@libs/Localize';
+
+type AmountSelectorModalProps = {
+    /** Whether the modal is visible */
+    isVisible: boolean;
+
+    /** Current value */
+    value?: string;
+
+    /** Function to call when the user selects a item */
+    onValueSelected?: (value: string) => void;
+
+    /** Function to call when the user closes the modal */
+    onClose: () => void;
+} & Pick<MenuItemBaseProps, 'description'>;
+
+type AmountPickerProps = {
+    /** Item to display */
+    value?: string;
+
+    /** A placeholder value to display */
+    title?: string | ((value?: string) => string);
+
+    /** Form Error description */
+    errorText?: MaybePhraseKey;
+
+    /** Callback to call when the input changes */
+    onInputChange?: (value: string | undefined) => void;
+
+    /** Text to display under the main menu item */
+    furtherDetails?: string;
+
+    /** Whether to show the tooltip text */
+    shouldShowTooltips?: boolean;
+} & Pick<MenuItemBaseProps, 'rightLabel' | 'description'> &
+    AmountFormProps;
+
+export type {AmountSelectorModalProps, AmountPickerProps};

src/components/AmountTextInput.tsx

@@ -5,7 +5,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import type {TextSelection} from './Composer/types';
 import TextInput from './TextInput';
-import type {BaseTextInputRef} from './TextInput/BaseTextInput/types';
+import type {BaseTextInputProps, BaseTextInputRef} from './TextInput/BaseTextInput/types';
 
 type AmountTextInputProps = {
     /** Formatted amount in local currency  */
@@ -31,10 +31,10 @@ type AmountTextInputProps = {
 
     /** Function to call to handle key presses in the text input */
     onKeyPress?: (event: NativeSyntheticEvent<KeyboardEvent>) => void;
-};
+} & Pick<BaseTextInputProps, 'autoFocus'>;
 
 function AmountTextInput(
-    {formattedAmount, onChangeAmount, placeholder, selection, onSelectionChange, style, touchableInputWrapperStyle, onKeyPress}: AmountTextInputProps,
+    {formattedAmount, onChangeAmount, placeholder, selection, onSelectionChange, style, touchableInputWrapperStyle, onKeyPress, ...rest}: AmountTextInputProps,
     ref: ForwardedRef<BaseTextInputRef>,
 ) {
     const styles = useThemeStyles();
@@ -57,6 +57,8 @@ function AmountTextInput(
             role={CONST.ROLE.PRESENTATION}
             onKeyPress={onKeyPress as (event: NativeSyntheticEvent<TextInputKeyPressEventData>) => void}
             touchableInputWrapperStyle={touchableInputWrapperStyle}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...rest}
         />
     );
 }

src/components/Form/types.ts

@@ -4,6 +4,7 @@ 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 CountrySelector from '@components/CountrySelector';
@@ -14,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';
@@ -43,6 +45,8 @@ type ValidInputs =
     | typeof ValuePicker
     | typeof DatePicker
     | typeof RadioButtons
+    | typeof AmountPicker
+    | typeof TextPicker
     | typeof AddPlaidBankAccount;
 
 type ValueTypeKey = 'string' | 'boolean' | 'date' | 'country';

src/components/MultipleAvatars.tsx

@@ -46,7 +46,7 @@ type MultipleAvatarsProps = {
     /** Whether avatars are displayed within a reportAction */
     isInReportAction?: boolean;
 
-    /** Whether to show the toolip text */
+    /** Whether to show the tooltip text */
     shouldShowTooltip?: boolean;
 
     /** Whether avatars are displayed with the highlighted background color instead of the app background color. This is primarily the case for IOU previews. */

src/components/SelectionList/selectionListPropTypes.js

@@ -190,7 +190,7 @@ const propTypes = {
     /** Custom content to display in the footer */
     footerContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
 
-    /** Whether to show the toolip text */
+    /** Whether to show the tooltip text */
     shouldShowTooltips: PropTypes.bool,
 
     /** Whether to use dynamic maxToRenderPerBatch depending on the visible number of elements */

src/components/TextInputWithCurrencySymbol/BaseTextInputWithCurrencySymbol.tsx

@@ -20,6 +20,9 @@ function BaseTextInputWithCurrencySymbol(
         onSelectionChange = () => {},
         onKeyPress = () => {},
         isCurrencyPressable = true,
+        hideCurrencySymbol = false,
+        extraSymbol,
+        ...rest
     }: TextInputWithCurrencySymbolProps,
     ref: React.ForwardedRef<BaseTextInputRef>,
 ) {
@@ -28,7 +31,7 @@ function BaseTextInputWithCurrencySymbol(
     const isCurrencySymbolLTR = CurrencyUtils.isCurrencySymbolLTR(selectedCurrencyCode);
     const styles = useThemeStyles();
 
-    const currencySymbolButton = (
+    const currencySymbolButton = !hideCurrencySymbol && (
         <CurrencySymbolButton
             currencySymbol={currencySymbol ?? ''}
             onCurrencyButtonPress={onCurrencyButtonPress}
@@ -58,6 +61,8 @@ function BaseTextInputWithCurrencySymbol(
             }}
             onKeyPress={onKeyPress}
             style={styles.pr1}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...rest}
         />
     );
 
@@ -66,6 +71,7 @@ function BaseTextInputWithCurrencySymbol(
             <>
                 {currencySymbolButton}
                 {amountTextInput}
+                {extraSymbol}
             </>
         );
     }
@@ -74,6 +80,7 @@ function BaseTextInputWithCurrencySymbol(
         <>
             {amountTextInput}
             {currencySymbolButton}
+            {extraSymbol}
         </>
     );
 }