Tags - Violation for unselected dependent tags displays tag name briefly then changes to "tag"

src/components/ReportActionItem/MoneyRequestView.tsx

@@ -171,7 +171,8 @@ function MoneyRequestView({
 
     const {getViolationsForField} = useViolations(transactionViolations ?? []);
     const hasViolations = useCallback(
-        (field: ViolationField, data?: OnyxTypes.TransactionViolation['data']): boolean => !!canUseViolations && getViolationsForField(field, data).length > 0,
+        (field: ViolationField, data?: OnyxTypes.TransactionViolation['data'], policyHasDependentTags = false, tagValue?: string): boolean =>
+            !!canUseViolations && getViolationsForField(field, data, policyHasDependentTags, tagValue).length > 0,
         [canUseViolations, getViolationsForField],
     );
 
@@ -238,7 +239,7 @@ function MoneyRequestView({
     const getPendingFieldAction = (fieldPath: TransactionPendingFieldsKey) => transaction?.pendingFields?.[fieldPath] ?? pendingAction;
 
     const getErrorForField = useCallback(
-        (field: ViolationField, data?: OnyxTypes.TransactionViolation['data']) => {
+        (field: ViolationField, data?: OnyxTypes.TransactionViolation['data'], policyHasDependentTags = false, tagValue?: string) => {
             // Checks applied when creating a new expense
             // NOTE: receipt field can return multiple violations, so we need to handle it separately
             const fieldChecks: Partial<Record<ViolationField, {isError: boolean; translationPath: TranslationPaths}>> = {
@@ -264,14 +265,14 @@ function MoneyRequestView({
             }
 
             // Return violations if there are any
-            if (canUseViolations && hasViolations(field, data)) {
-                const violations = getViolationsForField(field, data);
+            if (hasViolations(field, data, policyHasDependentTags, tagValue)) {
+                const violations = getViolationsForField(field, data, policyHasDependentTags, tagValue);
                 return ViolationsUtils.getViolationTranslation(violations[0], translate);
             }
 
             return '';
         },
-        [transactionAmount, isSettled, isCancelled, isPolicyExpenseChat, isEmptyMerchant, transactionDate, hasErrors, canUseViolations, hasViolations, translate, getViolationsForField],
+        [transactionAmount, isSettled, isCancelled, isPolicyExpenseChat, isEmptyMerchant, transactionDate, hasErrors, hasViolations, translate, getViolationsForField],
     );
 
     const distanceRequestFields = canUseP2PDistanceRequests ? (
@@ -333,6 +334,37 @@ function MoneyRequestView({
         ...parentReportAction?.errors,
     };
 
+    const tagList = policyTagLists.map(({name, orderWeight}, index) => {
+        const tagError = getErrorForField(
+            'tag',
+            {
+                tagListIndex: index,
+                tagListName: name,
+            },
+            PolicyUtils.hasDependentTags(policy, policyTagList),
+            TransactionUtils.getTagForDisplay(transaction, index),
+        );
+        return (
+            <OfflineWithFeedback
+                key={name}
+                pendingAction={getPendingFieldAction('tag')}
+            >
+                <MenuItemWithTopDescription
+                    description={name ?? translate('common.tag')}
+                    title={TransactionUtils.getTagForDisplay(transaction, index)}
+                    interactive={canEdit}
+                    shouldShowRightIcon={canEdit}
+                    titleStyle={styles.flex1}
+                    onPress={() =>
+                        Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_TAG.getRoute(CONST.IOU.ACTION.EDIT, iouType, orderWeight, transaction?.transactionID ?? '', report.reportID))
+                    }
+                    brickRoadIndicator={tagError ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
+                    errorText={tagError}
+                />
+            </OfflineWithFeedback>
+        );
+    });
+
     return (
         <View style={styles.pRelative}>
             {shouldShowAnimatedBackground && <AnimatedEmptyStateBackground />}
@@ -468,35 +500,7 @@ function MoneyRequestView({
                         />
                     </OfflineWithFeedback>
                 )}
-                {shouldShowTag &&
-                    policyTagLists.map(({name, orderWeight}, index) => (
-                        <OfflineWithFeedback
-                            key={name}
-                            pendingAction={getPendingFieldAction('tag')}
-                        >
-                            <MenuItemWithTopDescription
-                                description={name ?? translate('common.tag')}
-                                title={TransactionUtils.getTagForDisplay(transaction, index)}
-                                interactive={canEdit}
-                                shouldShowRightIcon={canEdit}
-                                titleStyle={styles.flex1}
-                                onPress={() =>
-                                    Navigation.navigate(
-                                        ROUTES.MONEY_REQUEST_STEP_TAG.getRoute(CONST.IOU.ACTION.EDIT, iouType, orderWeight, transaction?.transactionID ?? '', report.reportID),
-                                    )
-                                }
-                                brickRoadIndicator={
-                                    getErrorForField('tag', {
-                                        tagListIndex: index,
-                                        tagListName: name,
-                                    })
-                                        ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR
-                                        : undefined
-                                }
-                                errorText={getErrorForField('tag', {tagListIndex: index, tagListName: name})}
-                            />
-                        </OfflineWithFeedback>
-                    ))}
+                {shouldShowTag && tagList}
                 {isCardTransaction && (
                     <OfflineWithFeedback pendingAction={getPendingFieldAction('cardID')}>
                         <MenuItemWithTopDescription

src/hooks/useViolations.ts

@@ -62,12 +62,12 @@ function useViolations(violations: TransactionViolation[]) {
     }, [violations]);
 
     const getViolationsForField = useCallback(
-        (field: ViolationField, data?: TransactionViolation['data']) => {
+        (field: ViolationField, data?: TransactionViolation['data'], policyHasDependentTags = false, tagValue?: string) => {
             const currentViolations = violationsByField.get(field) ?? [];
 
             // someTagLevelsRequired has special logic becase data.errorIndexes is a bit unique in how it denotes the tag list that has the violation
             // tagListIndex can be 0 so we compare with undefined
-            if (currentViolations[0]?.name === 'someTagLevelsRequired' && data?.tagListIndex !== undefined && Array.isArray(currentViolations[0]?.data?.errorIndexes)) {
+            if (currentViolations[0]?.name === CONST.VIOLATIONS.SOME_TAG_LEVELS_REQUIRED && data?.tagListIndex !== undefined && Array.isArray(currentViolations[0]?.data?.errorIndexes)) {
                 return currentViolations
                     .filter((violation) => violation.data?.errorIndexes?.includes(data?.tagListIndex ?? -1))
                     .map((violation) => ({
@@ -79,8 +79,28 @@ function useViolations(violations: TransactionViolation[]) {
                     }));
             }
 
+            // missingTag has special logic for policies with dependent tags, because only one violation is returned for all tags
+            // when no tags are present, so the tag name isn't set in the violation data. That's why we add it here
+            if (policyHasDependentTags && currentViolations[0]?.name === CONST.VIOLATIONS.MISSING_TAG && data?.tagListName) {
+                return [
+                    {
+                        ...currentViolations[0],
+                        data: {
+                            ...currentViolations[0].data,
+                            tagName: data?.tagListName,
+                        },
+                    },
+                ];
+            }
+
             // tagOutOfPolicy has special logic because we have to account for multi-level tags and use tagName to find the right tag to put the violation on
-            if (currentViolations[0]?.name === 'tagOutOfPolicy' && data?.tagListName !== undefined && currentViolations[0]?.data?.tagName) {
+            if (currentViolations[0]?.name === CONST.VIOLATIONS.TAG_OUT_OF_POLICY && data?.tagListName !== undefined && currentViolations[0]?.data?.tagName) {
+                return currentViolations.filter((violation) => violation.data?.tagName === data?.tagListName);
+            }
+
+            // allTagLevelsRequired has special logic because it is returned when one but not all the tags are set,
+            // so we need to return the violation for the tag fields without a tag set
+            if (currentViolations[0]?.name === CONST.VIOLATIONS.ALL_TAG_LEVELS_REQUIRED && tagValue) {
                 return currentViolations.filter((violation) => violation.data?.tagName === data?.tagListName);
             }
 

src/libs/PolicyUtils.ts

@@ -424,6 +424,13 @@ function canSendInvoice(policies: OnyxCollection<Policy>): boolean {
     return getActiveAdminWorkspaces(policies).length > 0;
 }
 
+function hasDependentTags(policy: OnyxEntry<Policy>, policyTagList: OnyxEntry<PolicyTagList>) {
+    if (!policy?.hasMultipleTagLists) {
+        return false;
+    }
+    return Object.values(policyTagList ?? {}).some((tagList) => Object.values(tagList.tags).some((tag) => !!tag.rules?.parentTagsFilter || !!tag.parentTagsFilter));
+}
+
 /** Get the Xero organizations connected to the policy */
 function getXeroTenants(policy: Policy | undefined): Tenant[] {
     // Due to the way optional chain is being handled in this useMemo we are forced to use this approach to properly handle undefined values
@@ -516,6 +523,7 @@ export {
     shouldShowPolicy,
     getActiveAdminWorkspaces,
     canSendInvoice,
+    hasDependentTags,
     getXeroTenants,
     findCurrentXeroOrganization,
     getCurrentXeroOrganizationName,

src/libs/Violations/ViolationsUtils.ts

@@ -7,7 +7,7 @@ import * as TransactionUtils from '@libs/TransactionUtils';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {PolicyCategories, PolicyTagList, Transaction, TransactionViolation} from '@src/types/onyx';
+import type {PolicyCategories, PolicyTagList, Transaction, TransactionViolation, ViolationName} from '@src/types/onyx';
 
 /**
  * Calculates tag out of policy and missing tag violations for the given transaction
@@ -49,17 +49,41 @@ function getTagViolationsForSingleLevelTags(
 }
 
 /**
- * Calculates some tag levels required and missing tag violations for the given transaction
+ * Calculates missing tag violations for policies with dependent tags
  */
-function getTagViolationsForMultiLevelTags(
-    updatedTransaction: Transaction,
-    transactionViolations: TransactionViolation[],
-    policyRequiresTags: boolean,
-    policyTagList: PolicyTagList,
-): TransactionViolation[] {
+function getTagViolationsForDependentTags(policyTagList: PolicyTagList, transactionViolations: TransactionViolation[], tagName: string) {
+    const tagViolations = [...transactionViolations];
+
+    if (!tagName) {
+        Object.values(policyTagList).forEach((tagList) =>
+            tagViolations.push({
+                name: CONST.VIOLATIONS.MISSING_TAG,
+                type: CONST.VIOLATION_TYPES.VIOLATION,
+                data: {tagName: tagList.name},
+            }),
+        );
+    } else {
+        const tags = TransactionUtils.getTagArrayFromName(tagName);
+        if (Object.keys(policyTagList).length !== tags.length || tags.includes('')) {
+            tagViolations.push({
+                name: CONST.VIOLATIONS.ALL_TAG_LEVELS_REQUIRED,
+                type: CONST.VIOLATION_TYPES.VIOLATION,
+                data: {},
+            });
+        }
+    }
+
+    return tagViolations;
+}
+
+/**
+ * Calculates missing tag violations for policies with independent tags
+ */
+function getTagViolationForIndependentTags(policyTagList: PolicyTagList, transactionViolations: TransactionViolation[], transaction: Transaction) {
     const policyTagKeys = getSortedTagKeys(policyTagList);
-    const selectedTags = updatedTransaction.tag?.split(CONST.COLON) ?? [];
+    const selectedTags = transaction.tag?.split(CONST.COLON) ?? [];
     let newTransactionViolations = [...transactionViolations];
+
     newTransactionViolations = newTransactionViolations.filter(
         (violation) => violation.name !== CONST.VIOLATIONS.SOME_TAG_LEVELS_REQUIRED && violation.name !== CONST.VIOLATIONS.TAG_OUT_OF_POLICY,
     );
@@ -109,6 +133,30 @@ function getTagViolationsForMultiLevelTags(
     return newTransactionViolations;
 }
 
+/**
+ * Calculates tag violations for a transaction on a policy with multi level tags
+ */
+function getTagViolationsForMultiLevelTags(
+    updatedTransaction: Transaction,
+    transactionViolations: TransactionViolation[],
+    policyTagList: PolicyTagList,
+    hasDependentTags: boolean,
+): TransactionViolation[] {
+    const tagViolations = [
+        CONST.VIOLATIONS.SOME_TAG_LEVELS_REQUIRED,
+        CONST.VIOLATIONS.TAG_OUT_OF_POLICY,
+        CONST.VIOLATIONS.MISSING_TAG,
+        CONST.VIOLATIONS.ALL_TAG_LEVELS_REQUIRED,
+    ] as ViolationName[];
+    const filteredTransactionViolations = transactionViolations.filter((violation) => !tagViolations.includes(violation.name));
+
+    if (hasDependentTags) {
+        return getTagViolationsForDependentTags(policyTagList, filteredTransactionViolations, updatedTransaction.tag ?? '');
+    }
+
+    return getTagViolationForIndependentTags(policyTagList, filteredTransactionViolations, updatedTransaction);
+}
+
 const ViolationsUtils = {
     /**
      * Checks a transaction for policy violations and returns an object with Onyx method, key and updated transaction
@@ -121,6 +169,7 @@ const ViolationsUtils = {
         policyTagList: PolicyTagList,
         policyRequiresCategories: boolean,
         policyCategories: PolicyCategories,
+        hasDependentTags: boolean,
     ): OnyxUpdate {
         const isPartialTransaction = TransactionUtils.isPartialMerchant(TransactionUtils.getMerchant(updatedTransaction)) && TransactionUtils.isAmountMissing(updatedTransaction);
         if (isPartialTransaction) {
@@ -166,7 +215,7 @@ const ViolationsUtils = {
             newTransactionViolations =
                 Object.keys(policyTagList).length === 1
                     ? getTagViolationsForSingleLevelTags(updatedTransaction, newTransactionViolations, policyRequiresTags, policyTagList)
-                    : getTagViolationsForMultiLevelTags(updatedTransaction, newTransactionViolations, policyRequiresTags, policyTagList);
+                    : getTagViolationsForMultiLevelTags(updatedTransaction, newTransactionViolations, policyTagList, hasDependentTags);
         }
 
         return {

src/libs/actions/IOU.ts

@@ -822,7 +822,15 @@ function buildOnyxDataForMoneyRequest(
         return [optimisticData, successData, failureData];
     }
 
-    const violationsOnyxData = ViolationsUtils.getViolationsOnyxData(transaction, [], !!policy.requiresTag, policyTagList ?? {}, !!policy.requiresCategory, policyCategories ?? {});
+    const violationsOnyxData = ViolationsUtils.getViolationsOnyxData(
+        transaction,
+        [],
+        !!policy.requiresTag,
+        policyTagList ?? {},
+        !!policy.requiresCategory,
+        policyCategories ?? {},
+        PolicyUtils.hasDependentTags(policy, policyTagList ?? {}),
+    );
 
     if (violationsOnyxData) {
         optimisticData.push(violationsOnyxData);
@@ -1136,7 +1144,15 @@ function buildOnyxDataForInvoice(
         return [optimisticData, successData, failureData];
     }
 
-    const violationsOnyxData = ViolationsUtils.getViolationsOnyxData(transaction, [], !!policy.requiresTag, policyTagList ?? {}, !!policy.requiresCategory, policyCategories ?? {});
+    const violationsOnyxData = ViolationsUtils.getViolationsOnyxData(
+        transaction,
+        [],
+        !!policy.requiresTag,
+        policyTagList ?? {},
+        !!policy.requiresCategory,
+        policyCategories ?? {},
+        PolicyUtils.hasDependentTags(policy, policyTagList ?? {}),
+    );
 
     if (violationsOnyxData) {
         optimisticData.push(violationsOnyxData);
@@ -1505,7 +1521,15 @@ function buildOnyxDataForTrackExpense(
         return [optimisticData, successData, failureData];
     }
 
-    const violationsOnyxData = ViolationsUtils.getViolationsOnyxData(transaction, [], !!policy.requiresTag, policyTagList ?? {}, !!policy.requiresCategory, policyCategories ?? {});
+    const violationsOnyxData = ViolationsUtils.getViolationsOnyxData(
+        transaction,
+        [],
+        !!policy.requiresTag,
+        policyTagList ?? {},
+        !!policy.requiresCategory,
+        policyCategories ?? {},
+        PolicyUtils.hasDependentTags(policy, policyTagList ?? {}),
+    );
 
     if (violationsOnyxData) {
         optimisticData.push(violationsOnyxData);
@@ -2675,6 +2699,7 @@ function getUpdateMoneyRequestParams(
                 policyTagList ?? {},
                 !!policy.requiresCategory,
                 policyCategories ?? {},
+                PolicyUtils.hasDependentTags(policy, policyTagList ?? {}),
             ),
         );
         failureData.push({
@@ -5130,6 +5155,7 @@ function editRegularMoneyRequest(
             policyTags,
             !!policy.requiresCategory,
             policyCategories,
+            PolicyUtils.hasDependentTags(policy, policyTags),
         );
         optimisticData.push(updatedViolationsOnyxData);
         failureData.push({

src/types/onyx/PolicyTag.ts

@@ -16,6 +16,20 @@ type PolicyTag = OnyxCommon.OnyxValueWithOfflineFeedback<{
 
     /** A list of errors keyed by microtime */
     errors?: OnyxCommon.Errors | null;
+
+    rules?: {
+        /**
+         * String representation of regex to match against parent tag. Eg, if San Francisco is a child tag of California
+         * its parentTagsFilter will be ^California$
+         */
+        parentTagsFilter?: string;
+    };
+
+    /**
+     * String representation of regex to match against parent tag. Eg, if San Francisco is a child tag of California
+     * its parentTagsFilter will be ^California$
+     */
+    parentTagsFilter?: string;
 }>;
 
 type PolicyTags = Record<string, PolicyTag>;