Merge pull request #44221 from Krishna2323/krishna2323/issue/43851

fix: QBO - Confirmation page still shows tag field when all subtags are disabled.
Expensify · Jul 4, 2024 · a84f68e · a84f68e
2 parents 58be9ba + 0079d1c
commit a84f68e
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx
@@ -814,6 +814,7 @@ function MoneyRequestConfirmationList({
             isTypeInvoice={isTypeInvoice}
             onToggleBillable={onToggleBillable}
             policy={policy}
+            policyTags={policyTags}
             policyTagLists={policyTagLists}
             rate={rate}
             receiptFilename={receiptFilename}

diff --git a/src/components/MoneyRequestConfirmationListFooter.tsx b/src/components/MoneyRequestConfirmationListFooter.tsx
@@ -117,6 +117,9 @@ type MoneyRequestConfirmationListFooterProps = {
     /** The policy */
     policy: OnyxEntry<OnyxTypes.Policy>;
 
+    /** The policy tag lists */
+    policyTags: OnyxEntry<OnyxTypes.PolicyTagList>;
+
     /** The policy tag lists */
     policyTagLists: Array<ValueOf<OnyxTypes.PolicyTagList>>;
 
@@ -193,6 +196,7 @@ function MoneyRequestConfirmationListFooter({
     isTypeInvoice,
     onToggleBillable,
     policy,
+    policyTags,
     policyTagLists,
     rate,
     receiptFilename,
@@ -226,6 +230,7 @@ function MoneyRequestConfirmationListFooter({
     // A flag for showing the tags field
     // TODO: remove the !isTypeInvoice from this condition after BE supports tags for invoices: https://github.com/Expensify/App/issues/41281
     const shouldShowTags = useMemo(() => isPolicyExpenseChat && OptionsListUtils.hasEnabledTags(policyTagLists) && !isTypeInvoice, [isPolicyExpenseChat, isTypeInvoice, policyTagLists]);
+    const isMultilevelTags = useMemo(() => PolicyUtils.isMultiLevelTags(policyTags), [policyTags]);
 
     const senderWorkspace = useMemo(() => {
         const senderWorkspaceParticipant = selectedParticipants.find((participant) => participant.isSender);
@@ -437,8 +442,9 @@ function MoneyRequestConfirmationListFooter({
             shouldShow: shouldShowCategories,
             isSupplementary: action === CONST.IOU.ACTION.CATEGORIZE ? false : !isCategoryRequired,
         },
-        ...policyTagLists.map(({name, required}, index) => {
+        ...policyTagLists.map(({name, required, tags}, index) => {
             const isTagRequired = required ?? false;
+            const shouldShow = shouldShowTags && (!isMultilevelTags || OptionsListUtils.hasEnabledOptions(tags));
             return {
                 item: (
                     <MenuItemWithTopDescription
@@ -458,7 +464,7 @@ function MoneyRequestConfirmationListFooter({
                         rightLabel={isTagRequired && canUseViolations ? translate('common.required') : ''}
                     />
                 ),
-                shouldShow: shouldShowTags,
+                shouldShow,
                 isSupplementary: !isTagRequired,
             };
         }),