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,