Merge pull request Expensify#64929 from ZhenjaHorbach/add-multi-tags-for-edit-split

lakchote · web-flow · commit 32cf24b9fd6d · 2025-07-28T16:52:37.000+02:00
Multi tags for Split Expenses
diff --git a/src/components/MoneyRequestConfirmationListFooter.tsx b/src/components/MoneyRequestConfirmationListFooter.tsx
@@ -13,9 +13,8 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import {convertToDisplayString} from '@libs/CurrencyUtils';
 import DistanceRequestUtils from '@libs/DistanceRequestUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import {hasEnabledOptions} from '@libs/OptionsListUtils';
 import {getDestinationForDisplay, getSubratesFields, getSubratesForDisplay, getTimeDifferenceIntervals, getTimeForDisplay} from '@libs/PerDiemRequestUtils';
-import {canSendInvoice, getPerDiemCustomUnit, hasDependentTags as hasDependentTagsPolicyUtils, isMultiLevelTags as isMultiLevelTagsPolicyUtils, isPaidGroupPolicy} from '@libs/PolicyUtils';
+import {canSendInvoice, getPerDiemCustomUnit, isPaidGroupPolicy} from '@libs/PolicyUtils';
 import type {ThumbnailAndImageURI} from '@libs/ReceiptUtils';
 import {getThumbnailAndImageURIs} from '@libs/ReceiptUtils';
 import {
@@ -26,7 +25,7 @@ import {
     isReportOutstanding,
     populateOptimisticReportFormula,
 } from '@libs/ReportUtils';
-import {hasEnabledTags} from '@libs/TagsOptionsListUtils';
+import {getTagVisibility, hasEnabledTags} from '@libs/TagsOptionsListUtils';
 import {
     getTagForDisplay,
     getTaxAmount,
@@ -58,14 +57,6 @@ import ReceiptEmptyState from './ReceiptEmptyState';
 import ReceiptImage from './ReceiptImage';
 import {ShowContextMenuContext} from './ShowContextMenuContext';
 
-type TagVisibility = {
-    /** Flag indicating if the tag is required */
-    isTagRequired: boolean;
-
-    /** Flag indicating if the tag should be shown */
-    shouldShow: boolean;
-};
-
 type MoneyRequestConfirmationListFooterProps = {
     /** The action to perform */
     action: IOUAction;
@@ -267,8 +258,6 @@ function MoneyRequestConfirmationListFooter({
     const [currentUserLogin] = useOnyx(ONYXKEYS.SESSION, {selector: (session) => session?.email, canBeMissing: true});
 
     const shouldShowTags = useMemo(() => isPolicyExpenseChat && hasEnabledTags(policyTagLists), [isPolicyExpenseChat, policyTagLists]);
-    const hasDependentTags = useMemo(() => hasDependentTagsPolicyUtils(policy, policyTags), [policy, policyTags]);
-    const isMultilevelTags = useMemo(() => isMultiLevelTagsPolicyUtils(policyTags), [policyTags]);
     const shouldShowAttendees = useMemo(() => shouldShowAttendeesTransactionUtils(iouType, policy), [iouType, policy]);
 
     const hasPendingWaypoints = transaction && isFetchingWaypointsFromServer(transaction);
@@ -358,28 +347,16 @@ function MoneyRequestConfirmationListFooter({
         [],
     );
 
-    const tagVisibility: TagVisibility[] = policyTagLists.map(({tags, required}, index) => {
-        const isTagRequired = required ?? false;
-        let shouldShow = false;
-
-        if (shouldShowTags) {
-            if (hasDependentTags) {
-                if (index === 0) {
-                    shouldShow = true;
-                } else {
-                    const prevTagValue = getTagForDisplay(transaction, index - 1);
-                    shouldShow = !!prevTagValue;
-                }
-            } else {
-                shouldShow = !isMultilevelTags || hasEnabledOptions(tags);
-            }
-        }
-
-        return {
-            isTagRequired,
-            shouldShow,
-        };
-    });
+    const tagVisibility = useMemo(
+        () =>
+            getTagVisibility({
+                shouldShowTags,
+                policy,
+                policyTags,
+                transaction,
+            }),
+        [shouldShowTags, policy, policyTags, transaction],
+    );
 
     const previousTagsVisibility = usePrevious(tagVisibility.map((v) => v.shouldShow)) ?? [];
 
diff --git a/src/libs/TagsOptionsListUtils.ts b/src/libs/TagsOptionsListUtils.ts
@@ -1,12 +1,14 @@
+import type {OnyxEntry} from 'react-native-onyx';
 import CONST from '@src/CONST';
-import type {PolicyTag, PolicyTagLists, PolicyTags} from '@src/types/onyx';
+import type {Policy, PolicyTag, PolicyTagLists, PolicyTags, Transaction} from '@src/types/onyx';
 import type {PendingAction} from '@src/types/onyx/OnyxCommon';
 import localeCompare from './LocaleCompare';
 import {translateLocal} from './Localize';
 import {hasEnabledOptions} from './OptionsListUtils';
 import type {Option} from './OptionsListUtils';
-import {getCleanedTagName} from './PolicyUtils';
+import {getCleanedTagName, getTagLists, hasDependentTags as hasDependentTagsPolicyUtils, isMultiLevelTags as isMultiLevelTagsPolicyUtils} from './PolicyUtils';
 import tokenizedSearch from './tokenizedSearch';
+import {getTagForDisplay} from './TransactionUtils';
 
 type SelectedTagOption = {
     name: string;
@@ -16,6 +18,14 @@ type SelectedTagOption = {
     pendingAction?: PendingAction;
 };
 
+type TagVisibility = {
+    /** Flag indicating if the tag is required */
+    isTagRequired: boolean;
+
+    /** Flag indicating if the tag should be shown */
+    shouldShow: boolean;
+};
+
 /**
  * Transforms the provided tags into option objects.
  *
@@ -166,5 +176,47 @@ function sortTags(tags: Record<string, PolicyTag | SelectedTagOption> | Array<Po
     return Object.values(tags ?? {}).sort((a, b) => localeCompare(a.name, b.name)) as PolicyTag[];
 }
 
-export {getTagsOptions, getTagListSections, hasEnabledTags, sortTags};
-export type {SelectedTagOption};
+/**
+ * Calculate tag visibility for each tag list
+ */
+function getTagVisibility({
+    shouldShowTags,
+    policy,
+    policyTags,
+    transaction,
+}: {
+    shouldShowTags: boolean;
+    policy: Policy | undefined;
+    policyTags: OnyxEntry<PolicyTagLists>;
+    transaction: Transaction | undefined;
+}): TagVisibility[] {
+    const hasDependentTags = hasDependentTagsPolicyUtils(policy, policyTags);
+    const isMultilevelTags = isMultiLevelTagsPolicyUtils(policyTags);
+    const policyTagLists = getTagLists(policyTags);
+
+    return policyTagLists.map(({tags, required}, index) => {
+        const isTagRequired = required ?? false;
+        let shouldShow = false;
+
+        if (shouldShowTags) {
+            if (hasDependentTags) {
+                if (index === 0) {
+                    shouldShow = true;
+                } else {
+                    const prevTagValue = getTagForDisplay(transaction, index - 1);
+                    shouldShow = !!prevTagValue;
+                }
+            } else {
+                shouldShow = !isMultilevelTags || hasEnabledOptions(tags);
+            }
+        }
+
+        return {
+            isTagRequired,
+            shouldShow,
+        };
+    });
+}
+
+export {getTagsOptions, getTagListSections, hasEnabledTags, sortTags, getTagVisibility};
+export type {SelectedTagOption, TagVisibility};
diff --git a/src/pages/iou/SplitExpenseEditPage.tsx b/src/pages/iou/SplitExpenseEditPage.tsx
@@ -10,6 +10,7 @@ import ScrollView from '@components/ScrollView';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import usePolicy from '@hooks/usePolicy';
+import usePrevious from '@hooks/usePrevious';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {removeSplitExpenseField, updateSplitExpenseField} from '@libs/actions/IOU';
 import {convertToDisplayString} from '@libs/CurrencyUtils';
@@ -22,8 +23,8 @@ import {getTagLists} from '@libs/PolicyUtils';
 import {isSplitAction} from '@libs/ReportSecondaryActionUtils';
 import type {TransactionDetails} from '@libs/ReportUtils';
 import {getParsedComment, getReportOrDraftReport, getTransactionDetails} from '@libs/ReportUtils';
-import {hasEnabledTags} from '@libs/TagsOptionsListUtils';
-import {getTag} from '@libs/TransactionUtils';
+import {getTagVisibility, hasEnabledTags} from '@libs/TagsOptionsListUtils';
+import {getTag, getTagForDisplay} from '@libs/TransactionUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -56,13 +57,29 @@ function SplitExpenseEditPage({route}: SplitExpensePageProps) {
     const currentAmount = transactionDetailsAmount >= 0 ? Math.abs(Number(splitExpenseDraftTransactionDetails?.amount)) : Number(splitExpenseDraftTransactionDetails?.amount);
     const currentDescription = getParsedComment(Parser.htmlToMarkdown(splitExpenseDraftTransactionDetails?.comment ?? ''));
 
+    const shouldShowCategory = !!policy?.areCategoriesEnabled && !!policyCategories;
+
     const transactionTag = getTag(splitExpenseDraftTransaction);
     const policyTagLists = useMemo(() => getTagLists(policyTags), [policyTags]);
 
-    const shouldShowTag = !!policy?.areTagsEnabled && !!(transactionTag || hasEnabledTags(policyTagLists));
-    const shouldShowCategory = !!policy?.areCategoriesEnabled && !!policyCategories;
     const isSplitAvailable = report && transaction && isSplitAction(report, [transaction], policy);
 
+    const isCategoryRequired = !!policy?.requiresCategory;
+
+    const shouldShowTags = !!policy?.areTagsEnabled && !!(transactionTag || hasEnabledTags(policyTagLists));
+    const tagVisibility = useMemo(
+        () =>
+            getTagVisibility({
+                shouldShowTags,
+                policy,
+                policyTags,
+                transaction: splitExpenseDraftTransaction,
+            }),
+        [shouldShowTags, policy, policyTags, splitExpenseDraftTransaction],
+    );
+
+    const previousTagsVisibility = usePrevious(tagVisibility.map((v) => v.shouldShow)) ?? [];
+
     return (
         <ScreenWrapper testID={SplitExpenseEditPage.displayName}>
             <FullPageNotFoundView shouldShow={!reportID || isEmptyObject(splitExpenseDraftTransaction) || !isSplitAvailable}>
@@ -103,6 +120,7 @@ function SplitExpenseEditPage({route}: SplitExpensePageProps) {
                                 description={translate('common.category')}
                                 title={splitExpenseDraftTransactionDetails?.category}
                                 numberOfLinesTitle={2}
+                                rightLabel={isCategoryRequired ? translate('common.required') : ''}
                                 onPress={() => {
                                     Navigation.navigate(
                                         ROUTES.MONEY_REQUEST_STEP_CATEGORY.getRoute(
@@ -118,29 +136,45 @@ function SplitExpenseEditPage({route}: SplitExpensePageProps) {
                                 titleStyle={styles.flex1}
                             />
                         )}
-                        {shouldShowTag && (
-                            <MenuItemWithTopDescription
-                                shouldShowRightIcon
-                                key={translate('workspace.common.tags')}
-                                description={translate('workspace.common.tags')}
-                                title={transactionTag}
-                                numberOfLinesTitle={2}
-                                onPress={() => {
-                                    Navigation.navigate(
-                                        ROUTES.MONEY_REQUEST_STEP_TAG.getRoute(
-                                            CONST.IOU.ACTION.EDIT,
-                                            CONST.IOU.TYPE.SPLIT_EXPENSE,
-                                            0,
-                                            CONST.IOU.OPTIMISTIC_TRANSACTION_ID,
-                                            reportID,
-                                            Navigation.getActiveRoute(),
-                                        ),
-                                    );
-                                }}
-                                style={[styles.moneyRequestMenuItem]}
-                                titleStyle={styles.flex1}
-                            />
-                        )}
+                        {shouldShowTags &&
+                            policyTagLists.map(({name}, index) => {
+                                const tagVisibilityItem = tagVisibility.at(index);
+                                const shouldShow = tagVisibilityItem?.shouldShow ?? false;
+                                const isTagRequired = tagVisibilityItem?.isTagRequired ?? false;
+                                const prevShouldShow = previousTagsVisibility.at(index) ?? false;
+
+                                if (!shouldShow) {
+                                    return null;
+                                }
+
+                                return (
+                                    <MenuItemWithTopDescription
+                                        shouldShowRightIcon
+                                        key={name}
+                                        highlighted={!getTagForDisplay(splitExpenseDraftTransaction, index) && !prevShouldShow}
+                                        title={getTagForDisplay(splitExpenseDraftTransaction, index)}
+                                        description={name}
+                                        shouldShowBasicTitle
+                                        shouldShowDescriptionOnTop
+                                        numberOfLinesTitle={2}
+                                        rightLabel={isTagRequired ? translate('common.required') : ''}
+                                        onPress={() => {
+                                            Navigation.navigate(
+                                                ROUTES.MONEY_REQUEST_STEP_TAG.getRoute(
+                                                    CONST.IOU.ACTION.EDIT,
+                                                    CONST.IOU.TYPE.SPLIT_EXPENSE,
+                                                    index,
+                                                    CONST.IOU.OPTIMISTIC_TRANSACTION_ID,
+                                                    reportID,
+                                                    Navigation.getActiveRoute(),
+                                                ),
+                                            );
+                                        }}
+                                        style={[styles.moneyRequestMenuItem]}
+                                        titleStyle={styles.flex1}
+                                    />
+                                );
+                            })}
                         <MenuItemWithTopDescription
                             shouldShowRightIcon
                             key={translate('common.date')}
diff --git a/tests/unit/TagsOptionsListUtilsTest.ts b/tests/unit/TagsOptionsListUtilsTest.ts
