From cd77d071dd15ec6adfa78950d9c08e32dc4e9596 Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Mon, 29 Jan 2024 16:25:59 +0100 Subject: [PATCH] integrate multiple levels of tags to split bill --- src/ROUTES.ts | 5 +- .../MoneyRequestConfirmationList.js | 48 +++++++++---------- src/libs/actions/IOU.js | 14 ++++-- src/pages/EditSplitBillPage.js | 5 ++ src/pages/iou/MoneyRequestTagPage.js | 21 ++++---- 5 files changed, 53 insertions(+), 40 deletions(-) diff --git a/src/ROUTES.ts b/src/ROUTES.ts index b21109436ca3..608c2c9a4895 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -218,8 +218,9 @@ const ROUTES = { getRoute: (reportID: string, reportActionID: string) => `r/${reportID}/split/${reportActionID}` as const, }, EDIT_SPLIT_BILL: { - route: `r/:reportID/split/:reportActionID/edit/:field`, - getRoute: (reportID: string, reportActionID: string, field: ValueOf) => `r/${reportID}/split/${reportActionID}/edit/${field}` as const, + route: `r/:reportID/split/:reportActionID/edit/:field/:tagIndex?`, + getRoute: (reportID: string, reportActionID: string, field: ValueOf, tagIndex?: number) => + `r/${reportID}/split/${reportActionID}/edit/${field}${typeof tagIndex === 'number' ? `/${tagIndex}` : ''}` as const, }, EDIT_SPLIT_BILL_CURRENCY: { route: 'r/:reportID/split/:reportActionID/edit/currency', diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index d967d04ab94b..0838561f4833 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -241,12 +241,10 @@ function MoneyRequestConfirmationList(props) { const shouldShowDate = shouldShowAllFields && !isTypeSend && !isSplitWithScan; const shouldShowMerchant = shouldShowAllFields && !isTypeSend && !props.isDistanceRequest && !isSplitWithScan; - // Fetches the first tag list of the policy - const policyTag = PolicyUtils.getTag(props.policyTags); - const policyTagList = lodashGet(policyTag, 'tags', {}); - const policyTagListName = lodashGet(policyTag, 'name', translate('common.tag')); + const policyTagLists = useMemo(() => PolicyUtils.getTagLists(props.policyTags), [props.policyTags]); + // A flag for showing the tags field - const shouldShowTags = props.isPolicyExpenseChat && (props.iouTag || OptionsListUtils.hasEnabledOptions(_.values(policyTagList))); + const shouldShowTags = props.isPolicyExpenseChat && (props.iouTag || OptionsListUtils.hasEnabledTags(policyTagLists)); // A flag for showing tax fields - tax rate and tax amount const shouldShowTax = props.isPolicyExpenseChat && props.policy.isTaxTrackingEnabled; @@ -755,25 +753,27 @@ function MoneyRequestConfirmationList(props) { rightLabel={canUseViolations && Boolean(props.policy.requiresCategory) ? translate('common.required') : ''} /> )} - {shouldShowTags && ( - { - if (props.isEditingSplitBill) { - Navigation.navigate(ROUTES.EDIT_SPLIT_BILL.getRoute(props.reportID, props.reportActionID, CONST.EDIT_REQUEST_FIELD.TAG)); - return; - } - Navigation.navigate(ROUTES.MONEY_REQUEST_TAG.getRoute(props.iouType, props.reportID)); - }} - style={[styles.moneyRequestMenuItem]} - disabled={didConfirm} - interactive={!props.isReadOnly} - rightLabel={canUseViolations && Boolean(props.policy.requiresTag) ? translate('common.required') : ''} - /> - )} + {shouldShowTags && + _.map(policyTagLists, ({name}, index) => ( + { + if (props.isEditingSplitBill) { + Navigation.navigate(ROUTES.EDIT_SPLIT_BILL.getRoute(props.reportID, props.reportActionID, CONST.EDIT_REQUEST_FIELD.TAG, index)); + return; + } + Navigation.navigate(ROUTES.MONEY_REQUEST_TAG.getRoute(props.iouType, index, props.reportID)); + }} + style={[styles.moneyRequestMenuItem]} + disabled={didConfirm} + interactive={!props.isReadOnly} + rightLabel={canUseViolations && Boolean(props.policy.requiresTag) ? translate('common.required') : ''} + /> + ))} {shouldShowTax && ( { setDraftSplitTransaction({tag: transactionChanges.tag.trim()}); diff --git a/src/pages/iou/MoneyRequestTagPage.js b/src/pages/iou/MoneyRequestTagPage.js index 9309c8d788ef..9192b75cec8b 100644 --- a/src/pages/iou/MoneyRequestTagPage.js +++ b/src/pages/iou/MoneyRequestTagPage.js @@ -2,7 +2,6 @@ import lodashGet from 'lodash/get'; import PropTypes from 'prop-types'; import React from 'react'; import {withOnyx} from 'react-native-onyx'; -import _ from 'underscore'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import TagPicker from '@components/TagPicker'; @@ -13,6 +12,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import Navigation from '@libs/Navigation/Navigation'; import * as PolicyUtils from '@libs/PolicyUtils'; +import * as TransactionUtils from '@libs/TransactionUtils'; import reportPropTypes from '@pages/reportPropTypes'; import * as IOU from '@userActions/IOU'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -54,20 +54,20 @@ function MoneyRequestTagPage({route, report, policyTags, iou}) { const {translate} = useLocalize(); const iouType = lodashGet(route, 'params.iouType', ''); - - // Fetches the first tag list of the policy - const tagListKey = _.first(_.keys(policyTags)); - const policyTagListName = PolicyUtils.getTagListName(policyTags, 0) || translate('common.tag'); + const tagIndex = Number(lodashGet(route, 'params.tagIndex', undefined)); + const policyTagListName = PolicyUtils.getTagListName(policyTags, tagIndex); + const transactionTag = TransactionUtils.getTag(iou); + const tag = TransactionUtils.getTag(iou, tagIndex); const navigateBack = () => { Navigation.goBack(ROUTES.MONEY_REQUEST_CONFIRMATION.getRoute(iouType, report.reportID)); }; const updateTag = (selectedTag) => { - if (selectedTag.searchText === iou.tag) { - IOU.resetMoneyRequestTag(); + if (tag === selectedTag.searchText) { + IOU.resetMoneyRequestTag(transactionTag, tagIndex); } else { - IOU.setMoneyRequestTag(selectedTag.searchText); + IOU.setMoneyRequestTag(transactionTag, selectedTag.searchText, tagIndex); } navigateBack(); }; @@ -87,8 +87,9 @@ function MoneyRequestTagPage({route, report, policyTags, iou}) { {translate('iou.tagSelection', {tagName: policyTagListName})}