diff --git a/src/components/AvatarWithDisplayName.tsx b/src/components/AvatarWithDisplayName.tsx index ddb34c1a10f0..d492b62a3108 100644 --- a/src/components/AvatarWithDisplayName.tsx +++ b/src/components/AvatarWithDisplayName.tsx @@ -17,6 +17,7 @@ import { getDisplayNamesWithTooltips, getParentNavigationSubtitle, getReportName, + getReportStatusTranslation, isChatThread, isExpenseReport, isInvoiceReport, @@ -58,6 +59,9 @@ type AvatarWithDisplayNameProps = { /** Whether we should enable custom title logic designed for search lis */ shouldUseCustomSearchTitleName?: boolean; + /** Whether we should display the status of the report */ + shouldDisplayStatus?: boolean; + /** Transactions inside report */ transactions?: TransactionListItemType[]; @@ -154,6 +158,7 @@ function AvatarWithDisplayName({ transactions = [], openParentReportInCurrentTab = false, avatarBorderColor: avatarBorderColorProp, + shouldDisplayStatus = false, }: AvatarWithDisplayNameProps) { const {localeCompare} = useLocalize(); const [parentReportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report?.parentReportID}`, {canEvict: false, canBeMissing: false}); @@ -177,6 +182,7 @@ function AvatarWithDisplayName({ const ownerPersonalDetails = getPersonalDetailsForAccountIDs(report?.ownerAccountID ? [report.ownerAccountID] : [], personalDetails); const displayNamesWithTooltips = getDisplayNamesWithTooltips(Object.values(ownerPersonalDetails), false, localeCompare); const avatarBorderColor = avatarBorderColorProp ?? (isAnonymous ? theme.highlightBG : theme.componentBG); + const statusText = shouldDisplayStatus ? getReportStatusTranslation(report?.stateNum, report?.statusNum) : undefined; const actorAccountID = useRef(null); useEffect(() => { @@ -272,6 +278,7 @@ function AvatarWithDisplayName({ parentReportActionID={report?.parentReportActionID} pressableStyles={[styles.alignSelfStart, styles.mw100]} openParentReportInCurrentTab={openParentReportInCurrentTab} + statusText={statusText} /> )} {!!subtitle && ( diff --git a/src/components/HeaderWithBackButton/index.tsx b/src/components/HeaderWithBackButton/index.tsx index b3393ecd1030..41e15c1f8b4c 100755 --- a/src/components/HeaderWithBackButton/index.tsx +++ b/src/components/HeaderWithBackButton/index.tsx @@ -37,6 +37,7 @@ function HeaderWithBackButton({ report, policyAvatar, shouldShowReportAvatarWithDisplay = false, + shouldDisplayStatus, shouldShowBackButton = true, shouldShowBorderBottom = false, shouldShowCloseButton = false, @@ -97,6 +98,7 @@ function HeaderWithBackButton({ return ( @@ -131,6 +133,7 @@ function HeaderWithBackButton({ titleColor, translate, openParentReportInCurrentTab, + shouldDisplayStatus, ]); const ThreeDotMenuButton = useMemo(() => { if (shouldShowThreeDotsButton) { diff --git a/src/components/HeaderWithBackButton/types.ts b/src/components/HeaderWithBackButton/types.ts index 1125ece7f7f9..7bc7df03b639 100644 --- a/src/components/HeaderWithBackButton/types.ts +++ b/src/components/HeaderWithBackButton/types.ts @@ -63,6 +63,9 @@ type HeaderWithBackButtonProps = Partial & { /** Whether we should show a border on the bottom of the Header */ shouldShowBorderBottom?: boolean; + /** Whether we should display the status of the report */ + shouldDisplayStatus?: boolean; + /** Whether we should show a download button */ shouldShowDownloadButton?: boolean; diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index 7f18e6500e8f..feddebd7cdda 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -1220,6 +1220,7 @@ function MoneyReportHeader({ + {!!statusText && {`${statusText} ${CONST.DOT_SEPARATOR} `}} {!!reportName && ( <> {`${translate('threads.from')} `} diff --git a/src/components/ReportSearchHeader/index.tsx b/src/components/ReportSearchHeader/index.tsx index fd2896f44ec3..406d9e74c4a2 100755 --- a/src/components/ReportSearchHeader/index.tsx +++ b/src/components/ReportSearchHeader/index.tsx @@ -10,6 +10,7 @@ function ReportSearchHeader({report, style, transactions, avatarBorderColor}: Re const middleContent = useMemo(() => { return (