diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx index 8bfcbbeb779e..7e6682492eb2 100755 --- 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 index cda43938a18f..8dfff6466ab9 100644 --- a/src/components/MoneyRequestConfirmationListFooter.tsx +++ b/src/components/MoneyRequestConfirmationListFooter.tsx @@ -117,6 +117,9 @@ type MoneyRequestConfirmationListFooterProps = { /** The policy */ policy: OnyxEntry; + /** The policy tag lists */ + policyTags: OnyxEntry; + /** The policy tag lists */ policyTagLists: Array>; @@ -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: ( ), - shouldShow: shouldShowTags, + shouldShow, isSupplementary: !isTagRequired, }; }),