diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js
index 0220bbdf520..d0e3703c1e4 100644
--- a/src/components/ReportActionItem/MoneyRequestView.js
+++ b/src/components/ReportActionItem/MoneyRequestView.js
@@ -7,13 +7,15 @@ import PropTypes from 'prop-types';
import reportPropTypes from '../../pages/reportPropTypes';
import ONYXKEYS from '../../ONYXKEYS';
import ROUTES from '../../ROUTES';
+import Permissions from '../../libs/Permissions';
import Navigation from '../../libs/Navigation/Navigation';
import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '../withCurrentUserPersonalDetails';
import compose from '../../libs/compose';
-import Permissions from '../../libs/Permissions';
import MenuItemWithTopDescription from '../MenuItemWithTopDescription';
import styles from '../../styles/styles';
+import themeColors from '../../styles/themes/default';
import * as ReportUtils from '../../libs/ReportUtils';
+import * as IOU from '../../libs/actions/IOU';
import * as OptionsListUtils from '../../libs/OptionsListUtils';
import * as ReportActionsUtils from '../../libs/ReportActionsUtils';
import * as StyleUtils from '../../styles/StyleUtils';
@@ -28,6 +30,8 @@ import * as ReceiptUtils from '../../libs/ReceiptUtils';
import useWindowDimensions from '../../hooks/useWindowDimensions';
import transactionPropTypes from '../transactionPropTypes';
import Image from '../Image';
+import Text from '../Text';
+import Switch from '../Switch';
import ReportActionItemImage from './ReportActionItemImage';
import * as TransactionUtils from '../../libs/TransactionUtils';
import OfflineWithFeedback from '../OfflineWithFeedback';
@@ -73,10 +77,9 @@ const defaultProps = {
policyTags: {},
};
-function MoneyRequestView({report, betas, parentReport, policyCategories, shouldShowHorizontalRule, transaction, policyTags}) {
+function MoneyRequestView({report, betas, parentReport, policyCategories, shouldShowHorizontalRule, transaction, policyTags, policy}) {
const {isSmallScreenWidth} = useWindowDimensions();
const {translate} = useLocalize();
-
const parentReportAction = ReportActionsUtils.getParentReportAction(report);
const moneyRequestReport = parentReport;
const {
@@ -85,6 +88,7 @@ function MoneyRequestView({report, betas, parentReport, policyCategories, should
currency: transactionCurrency,
comment: transactionDescription,
merchant: transactionMerchant,
+ billable: transactionBillable,
category: transactionCategory,
tag: transactionTag,
} = ReportUtils.getTransactionDetails(transaction);
@@ -104,6 +108,7 @@ function MoneyRequestView({report, betas, parentReport, policyCategories, should
// Flags for showing categories and tags
const shouldShowCategory = isPolicyExpenseChat && Permissions.canUseCategories(betas) && (transactionCategory || OptionsListUtils.hasEnabledOptions(lodashValues(policyCategories)));
const shouldShowTag = isPolicyExpenseChat && Permissions.canUseTags(betas) && (transactionTag || OptionsListUtils.hasEnabledOptions(lodashValues(policyTagsList)));
+ const shouldShowBillable = isPolicyExpenseChat && Permissions.canUseTags(betas) && (transactionBillable || !lodashGet(policy, 'disabledFields.defaultBillable', true));
let description = `${translate('iou.amount')} • ${translate('iou.cash')}`;
if (isSettled) {
@@ -225,6 +230,16 @@ function MoneyRequestView({report, betas, parentReport, policyCategories, should
/>
)}
+ {shouldShowBillable && (
+
+ {translate('common.billable')}
+ IOU.editMoneyRequest(transaction.transactionID, report.reportID, {billable: value})}
+ />
+
+ )}