diff --git a/src/components/ReportSearchHeader/index.tsx b/src/components/ReportSearchHeader/index.tsx
index 1c2969b56ee2f..b6f3d61744066 100755
--- a/src/components/ReportSearchHeader/index.tsx
+++ b/src/components/ReportSearchHeader/index.tsx
@@ -9,6 +9,10 @@ function ReportSearchHeader({report, style, transactions, avatarBorderColor}: Re
const styles = useThemeStyles();
const {isLargeScreenWidth} = useResponsiveLayout();
+ const statusContainerStyle = useMemo(() => {
+ return [isLargeScreenWidth ? styles.mt1 : styles.mt0Half, report?.shouldShowStatusAsPending && styles.offlineFeedbackPending];
+ }, [isLargeScreenWidth, styles.mt1, styles.mt0Half, report?.shouldShowStatusAsPending, styles.offlineFeedbackPending]);
+
const middleContent = useMemo(() => {
return (
);
- }, [report, transactions, avatarBorderColor, styles.fontWeightNormal, styles.textLineHeightNormal, styles.minHeight4, styles.mt1, isLargeScreenWidth, styles.textMicro, styles.mt0Half]);
+ }, [
+ report,
+ transactions,
+ avatarBorderColor,
+ styles.fontWeightNormal,
+ styles.textLineHeightNormal,
+ styles.minHeight4,
+ styles.mt1,
+ isLargeScreenWidth,
+ styles.textMicro,
+ statusContainerStyle,
+ ]);
return (
;
+ report?: ExpenseReportListItemType;
/** Additional styles to add to the component */
style?: StyleProp;
diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
index 2acd2951b5d4f..f6210a27f84fb 100644
--- a/src/components/Search/index.tsx
+++ b/src/components/Search/index.tsx
@@ -429,11 +429,13 @@ function Search({
queryJSON,
isActionLoadingSet,
cardFeeds,
+ isOffline,
allTransactionViolations: violations,
});
return [filteredData1, filteredData1.length, allLength];
}, [
searchKey,
+ isOffline,
exportReportActions,
validGroupBy,
isDataLoaded,
diff --git a/src/components/SelectionListWithSections/Search/ExpenseReportListItemRow.tsx b/src/components/SelectionListWithSections/Search/ExpenseReportListItemRow.tsx
index adac6124d0e4a..7b26ae1f927c1 100644
--- a/src/components/SelectionListWithSections/Search/ExpenseReportListItemRow.tsx
+++ b/src/components/SelectionListWithSections/Search/ExpenseReportListItemRow.tsx
@@ -113,6 +113,7 @@ function ExpenseReportListItemRow({
),
diff --git a/src/components/SelectionListWithSections/Search/StatusCell.tsx b/src/components/SelectionListWithSections/Search/StatusCell.tsx
index 08b419ae9c022..76e4e5227194b 100644
--- a/src/components/SelectionListWithSections/Search/StatusCell.tsx
+++ b/src/components/SelectionListWithSections/Search/StatusCell.tsx
@@ -12,9 +12,12 @@ type StatusCellProps = {
/** The statusNum of the report */
statusNum?: number;
+
+ /** Whether the report's state/status is pending */
+ isPending?: boolean;
};
-function StatusCell({stateNum, statusNum}: StatusCellProps) {
+function StatusCell({stateNum, statusNum, isPending}: StatusCellProps) {
const styles = useThemeStyles();
const theme = useTheme();
const {translate} = useLocalize();
@@ -41,7 +44,7 @@ function StatusCell({stateNum, statusNum}: StatusCellProps) {
}
return (
-
+
{statusText}
diff --git a/src/components/SelectionListWithSections/types.ts b/src/components/SelectionListWithSections/types.ts
index 000a55439b94b..879e1adc444e3 100644
--- a/src/components/SelectionListWithSections/types.ts
+++ b/src/components/SelectionListWithSections/types.ts
@@ -449,6 +449,9 @@ type TransactionReportGroupListItemType = TransactionGroupListItemType & {groupe
/** The date the report was exported */
exported?: string;
+ /** Whether the status field should be shown in a pending state */
+ shouldShowStatusAsPending?: boolean;
+
/**
* Whether we should show the report year.
* This is true if at least one report in the dataset was created in past years
diff --git a/src/libs/SearchUIUtils.ts b/src/libs/SearchUIUtils.ts
index 871e3ebabaed0..7a5afc9897309 100644
--- a/src/libs/SearchUIUtils.ts
+++ b/src/libs/SearchUIUtils.ts
@@ -172,6 +172,7 @@ type GetReportSectionsParams = {
translate: LocalizedTranslate;
formatPhoneNumber: LocaleContextProps['formatPhoneNumber'];
isActionLoadingSet: ReadonlySet | undefined;
+ isOffline: boolean | undefined;
allTransactionViolations: OnyxCollection;
bankAccountList: OnyxEntry;
reportActions?: Record;
@@ -417,6 +418,7 @@ type GetSectionsParams = {
archivedReportsIDList?: ArchivedReportsIDSet;
queryJSON?: SearchQueryJSON;
isActionLoadingSet?: ReadonlySet;
+ isOffline?: boolean;
cardFeeds?: OnyxCollection;
allTransactionViolations?: OnyxCollection;
};
@@ -1863,6 +1865,7 @@ function getReportSections({
currentAccountID,
currentUserEmail,
translate,
+ isOffline,
formatPhoneNumber,
isActionLoadingSet,
allTransactionViolations,
@@ -1954,6 +1957,8 @@ function getReportSections({
const policyFromKey = getPolicyFromKey(data, reportItem);
const policy = policies?.[`${ONYXKEYS.COLLECTION.POLICY}${reportItem?.policyID ?? String(CONST.DEFAULT_NUMBER_ID)}`] ?? policyFromKey;
+ const shouldShowStatusAsPending = !!isOffline && reportItem?.pendingFields?.nextStep === CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE;
+
const hasAnyViolationsForReport = hasAnyViolations(
reportItem.reportID,
allTransactionViolations ?? allViolations,
@@ -1987,6 +1992,7 @@ function getReportSections({
formattedTo,
formattedStatus,
transactions,
+ shouldShowStatusAsPending,
...(reportPendingAction ? {pendingAction: reportPendingAction} : {}),
shouldShowYear: shouldShowYearCreatedReport,
shouldShowYearSubmitted: shouldShowYearSubmittedReport,
@@ -2453,6 +2459,7 @@ function getSections({
archivedReportsIDList,
queryJSON,
isActionLoadingSet,
+ isOffline,
cardFeeds,
allTransactionViolations,
}: GetSectionsParams) {
@@ -2471,6 +2478,7 @@ function getSections({
currentAccountID,
currentUserEmail,
translate,
+ isOffline,
formatPhoneNumber,
isActionLoadingSet,
allTransactionViolations,
diff --git a/tests/unit/Search/SearchUIUtilsTest.ts b/tests/unit/Search/SearchUIUtilsTest.ts
index 823b3e45595d4..fc0f9d14d4682 100644
--- a/tests/unit/Search/SearchUIUtilsTest.ts
+++ b/tests/unit/Search/SearchUIUtilsTest.ts
@@ -1071,6 +1071,7 @@ const transactionReportGroupListItems = [
},
hasVisibleViolations: false,
isOneTransactionReport: true,
+ shouldShowStatusAsPending: false,
isWaitingOnBankAccount: false,
keyForList: '123456789',
managerID: 18439984,
@@ -1172,6 +1173,7 @@ const transactionReportGroupListItems = [
},
hasVisibleViolations: true,
isOneTransactionReport: true,
+ shouldShowStatusAsPending: false,
isWaitingOnBankAccount: false,
keyForList: '11111',
managerID: 18439984,
@@ -1280,6 +1282,7 @@ const transactionReportGroupListItems = [
formattedTo: 'Approver',
hasVisibleViolations: false,
isOneTransactionReport: false,
+ shouldShowStatusAsPending: false,
isOwnPolicyExpenseChat: false,
isWaitingOnBankAccount: false,
managerID: 1111111,
@@ -1460,6 +1463,7 @@ const transactionReportGroupListItems = [
},
hasVisibleViolations: false,
isOneTransactionReport: true,
+ shouldShowStatusAsPending: false,
isWaitingOnBankAccount: false,
keyForList: reportID5,
managerID: 18439984,