Skip to content

Commit

Permalink
integrate multiple levels of tags to split bill
Browse files Browse the repository at this point in the history
  • Loading branch information
@rezkiy37
rezkiy37 committed Jan 29, 2024
1 parent bc2689a commit cd77d07
Show file tree
Hide file tree
Showing 5 changed files with 53 additions and 40 deletions.
5 changes: 3 additions & 2 deletions src/ROUTES.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<typeof CONST.EDIT_REQUEST_FIELD>) => `r/${reportID}/split/${reportActionID}/edit/${field}` as const,
route: `r/:reportID/split/:reportActionID/edit/:field/:tagIndex?`,
getRoute: (reportID: string, reportActionID: string, field: ValueOf<typeof CONST.EDIT_REQUEST_FIELD>, 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',
Expand Down
48 changes: 24 additions & 24 deletions src/components/MoneyRequestConfirmationList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -755,25 +753,27 @@ function MoneyRequestConfirmationList(props) {
rightLabel={canUseViolations && Boolean(props.policy.requiresCategory) ? translate('common.required') : ''}
/>
)}
{shouldShowTags && (
<MenuItemWithTopDescription
shouldShowRightIcon={!props.isReadOnly}
title={PolicyUtils.getCleanedTagName(props.iouTag)}

This comment has been minimized.

Sign in to view

Copy link
@mananjadhav

mananjadhav Mar 22, 2024

We replaced the PolicyUtils.getCleanedTagName(props.iouTag) with TransactionUtils.getTag(transaction, index) which caused the issue.
description={policyTagListName}
numberOfLinesTitle={2}
onPress={() => {
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) => (
<MenuItemWithTopDescription
key={name}
shouldShowRightIcon={!props.isReadOnly}
title={TransactionUtils.getTag(transaction, index)}
description={name}
numberOfLinesTitle={2}
onPress={() => {
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 && (
<MenuItemWithTopDescription
Expand Down
14 changes: 10 additions & 4 deletions src/libs/actions/IOU.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3617,14 +3617,20 @@ function resetMoneyRequestCategory() {
}

/*
* @param {String} reportTags
* @param {String} tag
* @param {Number} tagIndex
*/
function setMoneyRequestTag(tag) {
Onyx.merge(ONYXKEYS.IOU, {tag});
function setMoneyRequestTag(reportTags, tag, tagIndex) {
Onyx.merge(ONYXKEYS.IOU, {tag: IOUUtils.insertTagIntoReportTagsSting(reportTags, tag, tagIndex)});
}

function resetMoneyRequestTag() {
Onyx.merge(ONYXKEYS.IOU, {tag: ''});
/*
* @param {String} reportTags
* @param {Number} tagIndex
*/
function resetMoneyRequestTag(reportTags, tagIndex) {
Onyx.merge(ONYXKEYS.IOU, {tag: IOUUtils.insertTagIntoReportTagsSting(reportTags, '', tagIndex)});
}

/**
Expand Down
5 changes: 5 additions & 0 deletions src/pages/EditSplitBillPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,9 @@ const propTypes = {

/** reportActionID of the split action */
reportActionID: PropTypes.string,

/** The index of a tag list */
tagIndex: PropTypes.string,
}),
}).isRequired,

Expand All @@ -54,6 +57,7 @@ function EditSplitBillPage({route, transaction, draftTransaction, report}) {
const fieldToEdit = lodashGet(route, ['params', 'field'], '');
const reportID = lodashGet(route, ['params', 'reportID'], '');
const reportActionID = lodashGet(route, ['params', 'reportActionID'], '');
const tagIndex = Number(lodashGet(route, ['params', 'tagIndex'], undefined));

const {
amount: transactionAmount,
Expand Down Expand Up @@ -148,6 +152,7 @@ function EditSplitBillPage({route, transaction, draftTransaction, report}) {
return (
<EditRequestTagPage
defaultTag={transactionTag}
tagIndex={tagIndex}
policyID={lodashGet(report, 'policyID', '')}
onSubmit={(transactionChanges) => {
setDraftSplitTransaction({tag: transactionChanges.tag.trim()});
Expand Down
21 changes: 11 additions & 10 deletions src/pages/iou/MoneyRequestTagPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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';
Expand Down Expand Up @@ -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();
};
Expand All @@ -87,8 +87,9 @@ function MoneyRequestTagPage({route, report, policyTags, iou}) {
<Text style={[styles.ph5, styles.pv3]}>{translate('iou.tagSelection', {tagName: policyTagListName})}</Text>
<TagPicker
policyID={report.policyID}
tag={tagListKey}
selectedTag={iou.tag}
tag={policyTagListName}
tagIndex={tagIndex}
selectedTag={tag}
insets={insets}
onSubmit={updateTag}
/>
Expand Down

0 comments on commit cd77d07

Please sign in to comment.