#26793: Edit a tag in a money request

src/CONST.ts

@@ -1359,6 +1359,7 @@ const CONST = {
  MERCHANT: 'merchant',
  CATEGORY: 'category',
  RECEIPT: 'receipt',
+ TAG: 'tag',
  },
  FOOTER: {
  EXPENSE_MANAGEMENT_URL: `${USE_EXPENSIFY_URL}/expense-management`,

src/components/MoneyRequestConfirmationList.js

@@ -38,6 +38,7 @@ import transactionPropTypes from './transactionPropTypes';
 import DistanceRequestUtils from '../libs/DistanceRequestUtils';
 import * as IOU from '../libs/actions/IOU';
 import * as TransactionUtils from '../libs/TransactionUtils';
+import * as PolicyUtils from '../libs/PolicyUtils';
 
 const propTypes = {
  /** Callback to inform parent modal of success */
@@ -142,13 +143,7 @@ const propTypes = {
  policyCategories: PropTypes.objectOf(categoryPropTypes),
 
  /** Collection of tags attached to a policy */
- policyTags: PropTypes.objectOf(
- PropTypes.shape({
- name: PropTypes.string,
- required: PropTypes.bool,
- tags: PropTypes.objectOf(tagPropTypes),
- }),
- ),
+ policyTags: tagPropTypes,
 };
 
 const defaultProps = {
@@ -202,12 +197,12 @@ function MoneyRequestConfirmationList(props) {
  const shouldShowCategories = isPolicyExpenseChat && Permissions.canUseCategories(props.betas) && OptionsListUtils.hasEnabledOptions(_.values(props.policyCategories));
 
  // Fetches the first tag list of the policy
- const tagListKey = _.first(_.keys(props.policyTags));
- const tagList = lodashGet(props.policyTags, [tagListKey, 'tags'], []);
- const tagListName = lodashGet(props.policyTags, [tagListKey, 'name'], '');
+ const policyTag = PolicyUtils.getTag(props.policyTags);
+ const policyTagList = lodashGet(policyTag, 'tags', {});
+ const policyTagListName = lodashGet(policyTag, 'name', translate('common.tag'));
  const canUseTags = Permissions.canUseTags(props.betas);
  // A flag for showing the tags field
- const shouldShowTags = isPolicyExpenseChat && canUseTags && _.any(tagList, (tag) => tag.enabled);
+ const shouldShowTags = isPolicyExpenseChat && canUseTags && OptionsListUtils.hasEnabledOptions(_.values(policyTagList));
 
  // A flag for showing the billable field
  const shouldShowBillable = canUseTags && !lodashGet(props.policy, 'disabledFields.defaultBillable', true);
@@ -541,7 +536,7 @@ function MoneyRequestConfirmationList(props) {
  <MenuItemWithTopDescription
  shouldShowRightIcon={!props.isReadOnly}
  title={props.iouTag}
- description={tagListName || translate('common.tag')}
+ description={policyTagListName}
  onPress={() => Navigation.navigate(ROUTES.MONEY_REQUEST_TAG.getRoute(props.iouType, props.reportID))}
  style={[styles.moneyRequestMenuItem, styles.mb2]}
  disabled={didConfirm || props.isReadOnly}

src/components/ReportActionItem/MoneyRequestView.js

@@ -17,6 +17,7 @@ import * as ReportUtils from '../../libs/ReportUtils';
 import * as OptionsListUtils from '../../libs/OptionsListUtils';
 import * as ReportActionsUtils from '../../libs/ReportActionsUtils';
 import * as StyleUtils from '../../styles/StyleUtils';
+import * as PolicyUtils from '../../libs/PolicyUtils';
 import CONST from '../../CONST';
 import * as Expensicons from '../Icon/Expensicons';
 import iouReportPropTypes from '../../pages/iouReportPropTypes';
@@ -32,6 +33,7 @@ import * as TransactionUtils from '../../libs/TransactionUtils';
 import OfflineWithFeedback from '../OfflineWithFeedback';
 import categoryPropTypes from '../categoryPropTypes';
 import SpacerView from '../SpacerView';
+import tagPropTypes from '../tagPropTypes';
 
 const propTypes = {
  /** The report currently being looked at */
@@ -53,6 +55,9 @@ const propTypes = {
  /** The transaction associated with the transactionThread */
  transaction: transactionPropTypes,
 
+ /** Collection of tags attached to a policy */
+ policyTags: tagPropTypes,
+
  ...withCurrentUserPersonalDetailsPropTypes,
 };
 
@@ -65,9 +70,10 @@ const defaultProps = {
  currency: CONST.CURRENCY.USD,
  comment: {comment: ''},
  },
+ policyTags: {},
 };
 
-function MoneyRequestView({betas, report, parentReport, policyCategories, shouldShowHorizontalRule, transaction}) {
+function MoneyRequestView({report, betas, parentReport, policyCategories, shouldShowHorizontalRule, transaction, policyTags}) {
  const {isSmallScreenWidth} = useWindowDimensions();
  const {translate} = useLocalize();
 
@@ -80,6 +86,7 @@ function MoneyRequestView({betas, report, parentReport, policyCategories, should
  comment: transactionDescription,
  merchant: transactionMerchant,
  category: transactionCategory,
+ tag: transactionTag,
  } = ReportUtils.getTransactionDetails(transaction);
  const isEmptyMerchant =
  transactionMerchant === '' || transactionMerchant === CONST.TRANSACTION.UNKNOWN_MERCHANT || transactionMerchant === CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT;
@@ -89,8 +96,14 @@ function MoneyRequestView({betas, report, parentReport, policyCategories, should
  const canEdit = ReportUtils.canEditMoneyRequest(parentReportAction);
  // 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
+
+ // Fetches only the first tag, for now
+ const policyTag = PolicyUtils.getTag(policyTags);
+ const policyTagsList = lodashGet(policyTag, 'tags', {});
+
+ // 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)));
 
  let description = `${translate('iou.amount')} • ${translate('iou.cash')}`;
  if (isSettled) {
@@ -200,6 +213,18 @@ function MoneyRequestView({betas, report, parentReport, policyCategories, should
  />
  </OfflineWithFeedback>
  )}
+ {shouldShowTag && (
+ <OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.tag') || lodashGet(transaction, 'pendingAction')}>
+ <MenuItemWithTopDescription
+ description={lodashGet(policyTag, 'name', translate('common.tag'))}
+ title={transactionTag}
+ interactive={canEdit}
+ shouldShowRightIcon={canEdit}
+ titleStyle={styles.flex1}
+ onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.TAG))}
+ />
+ </OfflineWithFeedback>
+ )}
  <SpacerView
  shouldShow={shouldShowHorizontalRule}
  style={[shouldShowHorizontalRule ? styles.reportHorizontalRule : {}]}
@@ -237,5 +262,8 @@ export default compose(
  return `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`;
  },
  },
+ policyTags: {
+ key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY_TAGS}${report.policyID}`,
+ },
  }),
 )(MoneyRequestView);

src/components/TagPicker/index.js

@@ -7,6 +7,7 @@ import ONYXKEYS from '../../ONYXKEYS';
 import styles from '../../styles/styles';
 import useLocalize from '../../hooks/useLocalize';
 import * as OptionsListUtils from '../../libs/OptionsListUtils';
+import * as PolicyUtils from '../../libs/PolicyUtils';
 import OptionsSelector from '../OptionsSelector';
 import {propTypes, defaultProps} from './tagPickerPropTypes';
 
@@ -15,7 +16,7 @@ function TagPicker({selectedTag, tag, policyTags, policyRecentlyUsedTags, onSubm
  const [searchValue, setSearchValue] = useState('');
 
  const policyRecentlyUsedTagsList = lodashGet(policyRecentlyUsedTags, tag, []);
- const policyTagList = lodashGet(policyTags, [tag, 'tags'], {});
+ const policyTagList = PolicyUtils.getTagList(policyTags, tag);
  const policyTagsCount = _.size(_.filter(policyTagList, (policyTag) => policyTag.enabled));
  const isTagsCountBelowThreshold = policyTagsCount < CONST.TAG_LIST_THRESHOLD;
 

src/components/TagPicker/tagPickerPropTypes.js

@@ -16,12 +16,7 @@ const propTypes = {
 
  /* Onyx Props */
  /** Collection of tags attached to a policy */
- policyTags: PropTypes.objectOf(
- PropTypes.shape({
- name: PropTypes.string,
- tags: PropTypes.objectOf(tagPropTypes),
- }),
- ),
+ policyTags: tagPropTypes,
 
  /** List of recently used tags */
  policyRecentlyUsedTags: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.string)),

src/components/tagPropTypes.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 
-export default PropTypes.shape({
+const tagListPropTypes = PropTypes.shape({
  /** Name of a tag */
  name: PropTypes.string.isRequired,
 
@@ -10,3 +10,11 @@ export default PropTypes.shape({
  /** "General Ledger code" that corresponds to this tag in an accounting system. Similar to an ID. */
  'GL Code': PropTypes.string,
 });
+
+export default PropTypes.objectOf(
+ PropTypes.shape({
+ name: PropTypes.string,
+ required: PropTypes.bool,
+ tags: PropTypes.objectOf(tagListPropTypes),
+ }),
+);

src/libs/PolicyUtils.js

@@ -203,6 +203,56 @@ function getIneligibleInvitees(policyMembers, personalDetails) {
  return memberEmailsToExclude;
 }
 
+/**
+ * Gets the tag from policy tags, defaults to the first if no key is provided.
+ *
+ * @param {Object} policyTags
+ * @param {String} [tagKey]
+ * @returns {Object}
+ */
+function getTag(policyTags, tagKey) {
+ if (_.isEmpty(policyTags)) {
+ return {};
+ }
+
+ const policyTagKey = tagKey || _.first(_.keys(policyTags));
+
+ return lodashGet(policyTags, policyTagKey, {});
+}
+
+/**
+ * Gets the first tag name from policy tags.
+ *
+ * @param {Object} policyTags
+ * @returns {String}
+ */
+function getTagListName(policyTags) {
+ if (_.isEmpty(policyTags)) {
+ return '';
+ }
+
+ const policyTagKeys = _.keys(policyTags) || [];
+
+ return lodashGet(policyTags, [_.first(policyTagKeys), 'name'], '');
+}
+
+/**
+ * Gets the tags of a policy for a specific key. Defaults to the first tag if no key is provided.
+ *
+ * @param {Object} policyTags
+ * @param {String} [tagKey]
+ * @returns {String}
+ */
+function getTagList(policyTags, tagKey) {
+ if (_.isEmpty(policyTags)) {
+ return {};
+ }
+
+ const policyTagKey = tagKey || _.first(_.keys(policyTags));
+
+ return lodashGet(policyTags, [policyTagKey, 'tags'], {});
+}
+
 /**
  * @param {Object} policy
  * @returns {Boolean}
@@ -226,5 +276,8 @@ export {
  isPolicyAdmin,
  getMemberAccountIDsForWorkspace,
  getIneligibleInvitees,
+ getTag,
+ getTagListName,
+ getTagList,
  isPendingDeletePolicy,
 };

src/libs/ReportUtils.js

@@ -1341,6 +1341,7 @@ function getTransactionDetails(transaction) {
  comment: TransactionUtils.getDescription(transaction),
  merchant: TransactionUtils.getMerchant(transaction),
  category: TransactionUtils.getCategory(transaction),
+ tag: TransactionUtils.getTag(transaction),
  };
 }
 
@@ -1592,6 +1593,11 @@ function getModifiedExpenseMessage(reportAction) {
  if (hasModifiedCategory) {
  return getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.category, reportActionOriginalMessage.oldCategory, Localize.translateLocal('common.category'), true);
  }
+
+ const hasModifiedTag = _.has(reportActionOriginalMessage, 'oldTag') && _.has(reportActionOriginalMessage, 'tag');
+ if (hasModifiedTag) {
+ return getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.tag, reportActionOriginalMessage.oldTag, Localize.translateLocal('common.tag'), true);
+ }
 }
 
 /**
@@ -1637,6 +1643,11 @@ function getModifiedExpenseOriginalMessage(oldTransaction, transactionChanges, i
  originalMessage.category = transactionChanges.category;
  }
 
+ if (_.has(transactionChanges, 'tag')) {
+ originalMessage.oldTag = TransactionUtils.getTag(oldTransaction);
+ originalMessage.tag = transactionChanges.tag;
+ }
+
  return originalMessage;
 }
 

src/libs/TransactionUtils.js

@@ -151,6 +151,10 @@ function getUpdatedTransaction(transaction, transactionChanges, isFromExpenseRep
  updatedTransaction.category = transactionChanges.category;
  }
 
+ if (_.has(transactionChanges, 'tag')) {
+ updatedTransaction.tag = transactionChanges.tag;
+ }
+
  if (shouldStopSmartscan && _.has(transaction, 'receipt') && !_.isEmpty(transaction.receipt) && lodashGet(transaction, 'receipt.state') !== CONST.IOU.RECEIPT_STATE.OPEN) {
  updatedTransaction.receipt.state = CONST.IOU.RECEIPT_STATE.OPEN;
  }
@@ -162,6 +166,7 @@ function getUpdatedTransaction(transaction, transactionChanges, isFromExpenseRep
  ...(_.has(transactionChanges, 'currency') && {currency: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE}),
  ...(_.has(transactionChanges, 'merchant') && {merchant: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE}),
  ...(_.has(transactionChanges, 'category') && {category: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE}),
+ ...(_.has(transactionChanges, 'tag') && {tag: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE}),
  };
 
  return updatedTransaction;
@@ -253,6 +258,16 @@ function getCategory(transaction) {
  return lodashGet(transaction, 'category', '');
 }
 
+/**
+ * Return the tag from the transaction. This "tag" field has no "modified" complement.
+ *
+ * @param {Object} transaction
+ * @return {String}
+ */
+function getTag(transaction) {
+ return lodashGet(transaction, 'tag', '');
+}
+
 /**
  * Return the created field from the transaction, return the modifiedCreated if present.
  *
@@ -399,6 +414,7 @@ export {
  getMerchant,
  getCreated,
  getCategory,
+ getTag,
  getLinkedTransaction,
  getAllReportTransactions,
  hasReceipt,

src/libs/actions/IOU.js

@@ -1136,6 +1136,17 @@ function editMoneyRequest(transactionID, transactionThreadReportID, transactionC
  updatedChatReport.lastMessageHtml = messageText;
  }
 
+ const optimisticPolicyRecentlyUsedTags = {};
+ if (_.has(transactionChanges, 'tag')) {
+ const tagListName = transactionChanges.tagListName;
+ const recentlyUsedPolicyTags = allRecentlyUsedTags[`${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}${iouReport.policyID}`];
+
+ if (recentlyUsedPolicyTags) {
+ const uniquePolicyRecentlyUsedTags = _.filter(recentlyUsedPolicyTags[tagListName], (recentlyUsedPolicyTag) => recentlyUsedPolicyTag !== transactionChanges.tag);
+ optimisticPolicyRecentlyUsedTags[tagListName] = [transactionChanges.tag, ...uniquePolicyRecentlyUsedTags];
+ }
+ }
+
  // STEP 4: Compose the optimistic data
  const currentTime = DateUtils.getDBTime();
  const optimisticData = [
@@ -1171,6 +1182,14 @@ function editMoneyRequest(transactionID, transactionThreadReportID, transactionC
  },
  ];
 
+ if (!_.isEmpty(optimisticPolicyRecentlyUsedTags)) {
+ optimisticData.push({
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}${iouReport.policyID}`,
+ value: optimisticPolicyRecentlyUsedTags,
+ });
+ }
+
  const successData = [
  {
  onyxMethod: Onyx.METHOD.MERGE,
@@ -1190,6 +1209,7 @@ function editMoneyRequest(transactionID, transactionThreadReportID, transactionC
  currency: null,
  merchant: null,
  category: null,
+ tag: null,
  },
  },
  },
@@ -1236,7 +1256,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, tag} = ReportUtils.getTransactionDetails(updatedTransaction);
  API.write(
  'EditMoneyRequest',
  {
@@ -1248,6 +1268,7 @@ function editMoneyRequest(transactionID, transactionThreadReportID, transactionC
  comment,
  merchant,
  category,
+ tag,
  },
  {optimisticData, successData, failureData},
  );