feat: add new input fields for tax tracking

src/CONST.ts

@@ -2912,6 +2912,7 @@ const CONST = {
     PARENT_CHILD_SEPARATOR: ': ',
     CATEGORY_LIST_THRESHOLD: 8,
     TAG_LIST_THRESHOLD: 8,
+    TAX_RATES_LIST_THRESHOLD: 8,
     DEMO_PAGES: {
         SAASTR: 'SaaStrDemoSetup',
         SBE: 'SbeDemoSetup',

src/ONYXKEYS.ts

@@ -253,6 +253,7 @@ const ONYXKEYS = {
         POLICY_CATEGORIES: 'policyCategories_',
         POLICY_RECENTLY_USED_CATEGORIES: 'policyRecentlyUsedCategories_',
         POLICY_TAGS: 'policyTags_',
+        POLICY_TAX_RATE: 'policyTaxRates_',
         POLICY_RECENTLY_USED_TAGS: 'policyRecentlyUsedTags_',
         WORKSPACE_INVITE_MEMBERS_DRAFT: 'workspaceInviteMembersDraft_',
         WORKSPACE_INVITE_MESSAGE_DRAFT: 'workspaceInviteMessageDraft_',

src/ROUTES.ts

@@ -322,6 +322,16 @@ const ROUTES = {
         getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string, backTo = '') =>
             getUrlWithBackToParam(`create/${iouType}/amount/${transactionID}/${reportID}/`, backTo),
     },
+    MONEY_REQUEST_STEP_TAX_RATE: {
+        route: 'create/:iouType/taxRate/:transactionID/:reportID?',
+        getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string, backTo: string) =>
+            getUrlWithBackToParam(`create/${iouType}/taxRate/${transactionID}/${reportID}`, backTo),
+    },
+    MONEY_REQUEST_STEP_TAX_AMOUNT: {
+        route: 'create/:iouType/taxAmount/:transactionID/:reportID?',
+        getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string, backTo: string) =>
+            getUrlWithBackToParam(`create/${iouType}/taxAmount/${transactionID}/${reportID}`, backTo),
+    },
     MONEY_REQUEST_STEP_CATEGORY: {
         route: 'create/:iouType/category/:transactionID/:reportID/',
         getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string, backTo = '') =>

src/SCREENS.ts

@@ -129,6 +129,8 @@ const SCREENS = {
         STEP_SCAN: 'Money_Request_Step_Scan',
         STEP_TAG: 'Money_Request_Step_Tag',
         STEP_WAYPOINT: 'Money_Request_Step_Waypoint',
+        STEP_TAX_AMOUNT: 'Money_Request_Step_Tax_Amount',
+        STEP_TAX_RATE: 'Money_Request_Step_Tax_Rate',
         ROOT: 'Money_Request',
         AMOUNT: 'Money_Request_Amount',
         PARTICIPANTS: 'Money_Request_Participants',

src/components/MoneyRequestConfirmationList.js

@@ -40,6 +40,7 @@ import SettlementButton from './SettlementButton';
 import ShowMoreButton from './ShowMoreButton';
 import Switch from './Switch';
 import tagPropTypes from './tagPropTypes';
+import taxPropTypes from './taxPropTypes';
 import Text from './Text';
 import transactionPropTypes from './transactionPropTypes';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from './withCurrentUserPersonalDetails';
@@ -164,6 +165,10 @@ const propTypes = {
     /** Collection of tags attached to a policy */
     policyTags: tagPropTypes,
 
+    /* Onyx Props */
+    /** Collection of tax rates attached to a policy */
+    policyTaxRates: taxPropTypes,
+
     /** Holds data related to Money Request view state, rather than the underlying Money Request data. */
     iou: iouPropTypes,
 };
@@ -200,6 +205,7 @@ const defaultProps = {
     shouldShowSmartScanFields: true,
     isPolicyExpenseChat: false,
     iou: iouDefaultProps,
+    policyTaxRates: {},
 };
 
 function MoneyRequestConfirmationList(props) {
@@ -241,6 +247,9 @@ function MoneyRequestConfirmationList(props) {
     // A flag for showing the tags field
     const shouldShowTags = props.isPolicyExpenseChat && (props.iouTag || OptionsListUtils.hasEnabledOptions(_.values(policyTagList)));
 
+    // A flag for showing tax rate
+    const shouldShowTax = props.isPolicyExpenseChat && props.policy.isTaxTrackingEnabled;
+
     // A flag for showing the billable field
     const shouldShowBillable = !lodashGet(props.policy, 'disabledFields.defaultBillable', true);
 
@@ -252,6 +261,7 @@ function MoneyRequestConfirmationList(props) {
               shouldCalculateDistanceAmount ? DistanceRequestUtils.getDistanceRequestAmount(distance, unit, rate) : props.iouAmount,
               props.isDistanceRequest ? currency : props.iouCurrencyCode,
           );
+    const formattedTaxAmount = CurrencyUtils.convertToDisplayString(props.transaction.taxAmount, props.iouCurrencyCode);
 
     const isFocused = useIsFocused();
     const [formError, setFormError] = useState('');
@@ -336,6 +346,8 @@ function MoneyRequestConfirmationList(props) {
     const canModifyParticipants = !props.isReadOnly && props.canModifyParticipants && props.hasMultipleParticipants;
     const shouldDisablePaidBySection = canModifyParticipants;
 
+    const defaultTaxName = `${props.policyTaxRates.name} • ${translate('common.default')}`;
+
     const optionSelectorSections = useMemo(() => {
         const sections = [];
         const unselectedParticipants = _.filter(props.selectedParticipants, (participant) => !participant.selected);
@@ -738,6 +750,40 @@ function MoneyRequestConfirmationList(props) {
                         />
                     )}
 
+                    {shouldShowTax && (
+                        <MenuItemWithTopDescription
+                            shouldShowRightIcon={!props.isReadOnly}
+                            title={(props.transaction.taxRate && props.transaction.taxRate.text) || defaultTaxName}
+                            description={translate('iou.taxRate')}
+                            style={[styles.moneyRequestMenuItem]}
+                            titleStyle={styles.flex1}
+                            onPress={() =>
+                                Navigation.navigate(
+                                    ROUTES.MONEY_REQUEST_STEP_TAX_RATE.getRoute(props.iouType, props.transaction.transactionID, props.reportID, Navigation.getActiveRouteWithoutParams()),
+                                )
+                            }
+                            disabled={didConfirm}
+                            interactive={!props.isReadOnly}
+                        />
+                    )}
+
+                    {shouldShowTax && (
+                        <MenuItemWithTopDescription
+                            shouldShowRightIcon={!props.isReadOnly}
+                            title={formattedTaxAmount}
+                            description={translate('iou.taxAmount')}
+                            style={[styles.moneyRequestMenuItem]}
+                            titleStyle={styles.flex1}
+                            onPress={() =>
+                                Navigation.navigate(
+                                    ROUTES.MONEY_REQUEST_STEP_TAX_AMOUNT.getRoute(props.iouType, props.transaction.transactionID, props.reportID, Navigation.getActiveRouteWithoutParams()),
+                                )
+                            }
+                            disabled={didConfirm}
+                            interactive={!props.isReadOnly}
+                        />
+                    )}
+
                     {shouldShowBillable && (
                         <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.ml5, styles.mr8, styles.optionRow]}>
                             <Text color={!props.iouIsBillable ? theme.textSupporting : undefined}>{translate('common.billable')}</Text>
@@ -774,12 +820,15 @@ export default compose(
             key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
             selector: DistanceRequestUtils.getDefaultMileageRate,
         },
-        draftTransaction: {
+        splitTransactionDraft: {
             key: ({transactionID}) => `${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${transactionID}`,
         },
         policy: {
             key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
         },
+        policyTaxRates: {
+            key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_TAX_RATE}${policyID}`,
+        },
         iou: {
             key: ONYXKEYS.IOU,
         },

src/components/MoneyTemporaryForRefactorRequestConfirmationList.js

@@ -38,6 +38,7 @@ import OptionsSelector from './OptionsSelector';
 import SettlementButton from './SettlementButton';
 import Switch from './Switch';
 import tagPropTypes from './tagPropTypes';
+import taxPropTypes from './taxPropTypes';
 import Text from './Text';
 import transactionPropTypes from './transactionPropTypes';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from './withCurrentUserPersonalDetails';
@@ -159,6 +160,10 @@ const propTypes = {
     /** Collection of tags attached to a policy */
     policyTags: tagPropTypes,
 
+    /* Onyx Props */
+    /** Collection of tax rates attached to a policy */
+    policyTaxRates: taxPropTypes,
+
     /** Transaction that represents the money request */
     transaction: transactionPropTypes,
 };
@@ -194,6 +199,7 @@ const defaultProps = {
     isScanRequest: false,
     shouldShowSmartScanFields: true,
     isPolicyExpenseChat: false,
+    policyTaxRates: {},
 };
 
 function MoneyTemporaryForRefactorRequestConfirmationList({
@@ -235,6 +241,7 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
     session: {accountID},
     shouldShowSmartScanFields,
     transaction,
+    policyTaxRates,
 }) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -271,6 +278,9 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
     // A flag for showing the tags field
     const shouldShowTags = isPolicyExpenseChat && OptionsListUtils.hasEnabledOptions(_.values(policyTagList));
 
+    // A flag for showing tax rate
+    const shouldShowTax = isPolicyExpenseChat && policy.isTaxTrackingEnabled;
+
     // A flag for showing the billable field
     const shouldShowBillable = !lodashGet(policy, 'disabledFields.defaultBillable', true);
 
@@ -282,7 +292,7 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
               shouldCalculateDistanceAmount ? DistanceRequestUtils.getDistanceRequestAmount(distance, unit, rate) : iouAmount,
               isDistanceRequest ? currency : iouCurrencyCode,
           );
-
+    const formattedTaxAmount = CurrencyUtils.convertToDisplayString(transaction.taxAmount, iouCurrencyCode);
     const isFocused = useIsFocused();
     const [formError, setFormError] = useState('');
 
@@ -366,6 +376,8 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
     }, [isReadOnly, canModifyParticipants, hasMultipleParticipants]);
     const shouldDisablePaidBySection = userCanModifyParticipants.current;
 
+    const defaultTaxName = `${policyTaxRates.name} • ${translate('common.default')}`;
+
     const optionSelectorSections = useMemo(() => {
         const sections = [];
         const unselectedParticipants = _.filter(pickedParticipants, (participant) => !participant.selected);
@@ -738,6 +750,35 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
                             interactive={!isReadOnly}
                         />
                     )}
+                    {shouldShowTax && (
+                        <MenuItemWithTopDescription
+                            shouldShowRightIcon={!isReadOnly}
+                            title={(transaction.taxRate && transaction.taxRate.text) || defaultTaxName}
+                            description={translate('iou.taxRate')}
+                            style={[styles.moneyRequestMenuItem]}
+                            titleStyle={styles.flex1}
+                            onPress={() =>
+                                Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_TAX_RATE.getRoute(iouType, transaction.transactionID, reportID, Navigation.getActiveRouteWithoutParams()))
+                            }
+                            disabled={didConfirm}
+                            interactive={!isReadOnly}
+                        />
+                    )}
+
+                    {shouldShowTax && (
+                        <MenuItemWithTopDescription
+                            shouldShowRightIcon={!isReadOnly}
+                            title={formattedTaxAmount}
+                            description={translate('iou.taxAmount')}
+                            style={[styles.moneyRequestMenuItem]}
+                            titleStyle={styles.flex1}
+                            onPress={() =>
+                                Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_TAX_AMOUNT.getRoute(iouType, transaction.transactionID, reportID, Navigation.getActiveRouteWithoutParams()))
+                            }
+                            disabled={didConfirm}
+                            interactive={!isReadOnly}
+                        />
+                    )}
                     {shouldShowBillable && (
                         <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.ml5, styles.mr8, styles.optionRow]}>
                             <Text color={!iouIsBillable ? theme.textSupporting : undefined}>{translate('common.billable')}</Text>
@@ -777,5 +818,8 @@ export default compose(
         policy: {
             key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
         },
+        policyTaxRates: {
+            key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_TAX_RATE}${policyID}`,
+        },
     }),
 )(MoneyTemporaryForRefactorRequestConfirmationList);

src/components/TaxPicker/index.js

@@ -0,0 +1,89 @@
+import lodashGet from 'lodash/get';
+import React, {useMemo, useState} from 'react';
+import _ from 'underscore';
+import OptionsSelector from '@components/OptionsSelector';
+import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as OptionsListUtils from '@libs/OptionsListUtils';
+import CONST from '@src/CONST';
+import {defaultProps, propTypes} from './taxPickerPropTypes';
+
+function TaxPicker({selectedTaxRate, policyTaxRates, insets, onSubmit}) {
+    const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
+    const {translate} = useLocalize();
+    const [searchValue, setSearchValue] = useState('');
+
+    const policyTaxRatesCount = OptionsListUtils.getEnabledTaxRateCount(policyTaxRates.taxes);
+    const isTaxRatesCountBelowThreshold = policyTaxRatesCount < CONST.TAX_RATES_LIST_THRESHOLD;
+
+    const shouldShowTextInput = !isTaxRatesCountBelowThreshold;
+
+    const selectedOptions = useMemo(() => {
+        if (!selectedTaxRate) {
+            return [];
+        }
+
+        return [
+            {
+                name: selectedTaxRate,
+                enabled: true,
+                accountID: null,
+            },
+        ];
+    }, [selectedTaxRate]);
+
+    const sections = useMemo(() => {
+        const {policyTaxRatesOptions} = OptionsListUtils.getFilteredOptions(
+            {},
+            {},
+            [],
+            searchValue,
+            selectedOptions,
+            [],
+            false,
+            false,
+            false,
+            {},
+            [],
+            false,
+            {},
+            [],
+            false,
+            false,
+            true,
+            policyTaxRates,
+        );
+        return policyTaxRatesOptions;
+    }, [policyTaxRates, searchValue, selectedOptions]);
+
+    const selectedOptionKey = lodashGet(_.filter(lodashGet(sections, '[0].data', []), (taxRate) => taxRate.searchText === selectedTaxRate)[0], 'keyForList');
+
+    return (
+        <OptionsSelector
+            contentContainerStyles={[{paddingBottom: StyleUtils.getSafeAreaMargins(insets).marginBottom}]}
+            optionHoveredStyle={styles.hoveredComponentBG}
+            sectionHeaderStyle={styles.mt5}
+            sections={sections}
+            selectedOptions={selectedOptions}
+            value={searchValue}
+            // Focus the first option when searching
+            focusedIndex={0}
+            initiallyFocusedOptionKey={selectedOptionKey}
+            textInputLabel={translate('common.search')}
+            boldStyle
+            highlightSelectedOptions
+            isRowMultilineSupported
+            shouldShowTextInput={shouldShowTextInput}
+            onChangeText={setSearchValue}
+            onSelectRow={onSubmit}
+        />
+    );
+}
+
+TaxPicker.displayName = 'TaxPicker';
+TaxPicker.propTypes = propTypes;
+TaxPicker.defaultProps = defaultProps;
+
+export default TaxPicker;

src/components/TaxPicker/taxPickerPropTypes.js

@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types';
+import taxPropTypes from '@components/taxPropTypes';
+
+const propTypes = {
+    /** The selected tax rate of an expense */
+    selectedTaxRate: PropTypes.string,
+
+    /* Onyx Props */
+    /** Collection of tax rates attached to a policy */
+    policyTaxRates: taxPropTypes,
+
+    /** Callback to fire when a tax is pressed */
+    onSubmit: PropTypes.func.isRequired,
+};
+
+const defaultProps = {
+    selectedTaxRate: '',
+    policyTaxRates: {},
+};
+
+export {propTypes, defaultProps};