Feat: Editable billable flag

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';
@@ -27,6 +29,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';
@@ -67,10 +71,9 @@ const defaultProps = {
  },
 };
 
-function MoneyRequestView({betas, report, parentReport, policyCategories, shouldShowHorizontalRule, transaction}) {
+function MoneyRequestView({betas, report, parentReport, policyCategories, shouldShowHorizontalRule, transaction, policy}) {
  const {isSmallScreenWidth} = useWindowDimensions();
  const {translate} = useLocalize();
-
  const parentReportAction = ReportActionsUtils.getParentReportAction(report);
  const moneyRequestReport = parentReport;
  const {
@@ -79,6 +82,7 @@ function MoneyRequestView({betas, report, parentReport, policyCategories, should
  currency: transactionCurrency,
  comment: transactionDescription,
  merchant: transactionMerchant,
+ billable: transactionBillable,
  category: transactionCategory,
  } = ReportUtils.getTransactionDetails(transaction);
  const isEmptyMerchant =
@@ -87,6 +91,7 @@ function MoneyRequestView({betas, report, parentReport, policyCategories, should
 
  const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID);
  const canEdit = ReportUtils.canEditMoneyRequest(parentReportAction);
+ const shouldShowBillable = Permissions.canUseTags(betas) && !lodashGet(policy, 'disabledFields.defaultBillable', true);
  // A flag for verifying that the current report is a sub-report of a workspace chat
  const isPolicyExpenseChat = useMemo(() => ReportUtils.isPolicyExpenseChat(ReportUtils.getRootParentReport(report)), [report]);
  // A flag for showing categories
@@ -200,6 +205,16 @@ function MoneyRequestView({betas, report, parentReport, policyCategories, should
  />
  </OfflineWithFeedback>
  )}
+ {shouldShowBillable && (
+ <View style={[styles.flexRow, styles.mb4, styles.justifyContentBetween, styles.alignItemsCenter, styles.ml5, styles.mr8]}>
+ <Text color={!transactionBillable ? themeColors.textSupporting : undefined}>{translate('common.billable')}</Text>
+ <Switch
+ accessibilityLabel={translate('common.billable')}
+ isOn={transactionBillable}
+ onToggle={(value) => IOU.editMoneyRequest(transaction.transactionID, transaction.reportID, {billable: value})}
+ />
+ </View>
+ )}
  <SpacerView
  shouldShow={shouldShowHorizontalRule}
  style={[shouldShowHorizontalRule ? styles.reportHorizontalRule : {}]}

src/libs/ReportUtils.js

@@ -1329,6 +1329,7 @@ function getTransactionDetails(transaction) {
  comment: TransactionUtils.getDescription(transaction),
  merchant: TransactionUtils.getMerchant(transaction),
  category: TransactionUtils.getCategory(transaction),
+ billable: TransactionUtils.getBillable(transaction),
  };
 }
 

src/libs/TransactionUtils.js

@@ -147,6 +147,9 @@ function getUpdatedTransaction(transaction, transactionChanges, isFromExpenseRep
  shouldStopSmartscan = true;
  }
 
+ if (_.has(transactionChanges, 'billable')) {
+ updatedTransaction.billable = transactionChanges.billable;
+ }
  if (_.has(transactionChanges, 'category')) {
  updatedTransaction.category = transactionChanges.category;
  }
@@ -161,6 +164,7 @@ function getUpdatedTransaction(transaction, transactionChanges, isFromExpenseRep
  ...(_.has(transactionChanges, 'amount') && {amount: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE}),
  ...(_.has(transactionChanges, 'currency') && {currency: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE}),
  ...(_.has(transactionChanges, 'merchant') && {merchant: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE}),
+ ...(_.has(transactionChanges, 'billable') && {billable: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE}),
  ...(_.has(transactionChanges, 'category') && {category: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE}),
  };
 
@@ -253,6 +257,16 @@ function getCategory(transaction) {
  return lodashGet(transaction, 'category', '');
 }
 
+/**
+ * Return the billable from the transaction. This "billable" field has no "modified" complement.
+ *
+ * @param {Object} transaction
+ * @return {String}
+ */
+function getBillable(transaction) {
+ return lodashGet(transaction, 'billable', '');
+}
+
 /**
  * Return the created field from the transaction, return the modifiedCreated if present.
  *
@@ -399,6 +413,7 @@ export {
  getMerchant,
  getCreated,
  getCategory,
+ getBillable,
  getLinkedTransaction,
  getAllReportTransactions,
  hasReceipt,

src/libs/actions/IOU.js

@@ -587,8 +587,9 @@ function getMoneyRequestInformation(
  * @param {Number} amount
  * @param {String} currency
  * @param {String} merchant
+ * @param {Boolean} [billable]
  */
-function createDistanceRequest(report, participant, comment, created, transactionID, category, tag, amount, currency, merchant) {
+function createDistanceRequest(report, participant, comment, created, transactionID, category, tag, amount, currency, merchant, billable) {
  const optimisticReceipt = {
  source: ReceiptGeneric,
  state: CONST.IOU.RECEIPT_STATE.OPEN,
@@ -607,6 +608,7 @@ function createDistanceRequest(report, participant, comment, created, transactio
  transactionID,
  category,
  tag,
+ billable,
  );
  API.write(
  'CreateDistanceRequest',
@@ -623,6 +625,7 @@ function createDistanceRequest(report, participant, comment, created, transactio
  created,
  category,
  tag,
+ billable,
  },
  onyxData,
  );
@@ -1191,6 +1194,7 @@ function editMoneyRequest(transactionID, transactionThreadReportID, transactionC
  created: null,
  currency: null,
  merchant: null,
+ billable: null,
  category: null,
  },
  },
@@ -1230,7 +1234,7 @@ function editMoneyRequest(transactionID, transactionThreadReportID, transactionC
  ];
 
  // STEP 6: Call the API endpoint
- const {created, amount, currency, comment, merchant, category} = ReportUtils.getTransactionDetails(updatedTransaction);
+ const {created, amount, currency, comment, merchant, category, billable} = ReportUtils.getTransactionDetails(updatedTransaction);
  API.write(
  'EditMoneyRequest',
  {
@@ -1242,6 +1246,7 @@ function editMoneyRequest(transactionID, transactionThreadReportID, transactionC
  comment,
  merchant,
  category,
+ billable,
  },
  {optimisticData, successData, failureData},
  );

src/pages/iou/steps/MoneyRequestConfirmPage.js

@@ -176,9 +176,10 @@ function MoneyRequestConfirmPage(props) {
  props.iou.amount,
  props.iou.currency,
  props.iou.merchant,
+ props.iou.billable,
  );
  },
- [props.report, props.iou.created, props.iou.transactionID, props.iou.category, props.iou.tag, props.iou.amount, props.iou.currency, props.iou.merchant],
+ [props.report, props.iou.created, props.iou.transactionID, props.iou.category, props.iou.tag, props.iou.amount, props.iou.currency, props.iou.merchant, props.iou.billable],
  );
 
  const createTransaction = useCallback(