diff --git a/src/components/AvatarWithDisplayName.tsx b/src/components/AvatarWithDisplayName.tsx index 3ff23c88a985..2b9378247359 100644 --- a/src/components/AvatarWithDisplayName.tsx +++ b/src/components/AvatarWithDisplayName.tsx @@ -180,6 +180,7 @@ function AvatarWithDisplayName({ const theme = useTheme(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); + const {translate} = useLocalize(); const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${report?.parentReportID}`, {canBeMissing: true}); const [invoiceReceiverPolicy] = useOnyx( `${ONYXKEYS.COLLECTION.POLICY}${parentReport?.invoiceReceiver && 'policyID' in parentReport.invoiceReceiver ? parentReport.invoiceReceiver.policyID : undefined}`, @@ -196,7 +197,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 statusText = shouldDisplayStatus ? getReportStatusTranslation({stateNum: report?.stateNum, statusNum: report?.statusNum, translate}) : undefined; const reportStatusColorStyle = shouldDisplayStatus ? getReportStatusColorStyle(theme, report?.stateNum, report?.statusNum) : {}; const actorAccountID = useRef(null); diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx index c6604f43fa9a..a6450fd5fb72 100644 --- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx +++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx @@ -338,8 +338,13 @@ function MoneyRequestReportPreviewContent({ ); const reportStatus = useMemo( - () => getReportStatusTranslation(iouReport?.stateNum ?? action?.childStateNum, iouReport?.statusNum ?? action?.childStatusNum), - [action?.childStateNum, action?.childStatusNum, iouReport?.stateNum, iouReport?.statusNum], + () => + getReportStatusTranslation({ + stateNum: iouReport?.stateNum ?? action?.childStateNum, + statusNum: iouReport?.statusNum ?? action?.childStatusNum, + translate, + }), + [action?.childStateNum, action?.childStatusNum, iouReport?.stateNum, iouReport?.statusNum, translate], ); const reportStatusColorStyle = useMemo( diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 70b128aa59ed..e37a9bf21ee6 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -925,6 +925,12 @@ type GetReportNameParams = { isReportArchived?: boolean; }; +type GetReportStatusParams = { + stateNum?: number; + statusNum?: number; + translate: LocaleContextProps['translate']; +}; + type ReportByPolicyMap = Record>; let currentUserEmail: string | undefined; @@ -12340,34 +12346,29 @@ function buildOptimisticMarkedAsResolvedReportAction(created = DateUtils.getDBTi * ======================================== */ -function getReportStatusTranslation(stateNum?: number, statusNum?: number): string { +function getReportStatusTranslation({stateNum, statusNum, translate}: GetReportStatusParams): string { if (stateNum === undefined || statusNum === undefined) { return ''; } if (stateNum === CONST.REPORT.STATE_NUM.OPEN && statusNum === CONST.REPORT.STATUS_NUM.OPEN) { - // eslint-disable-next-line @typescript-eslint/no-deprecated - return translateLocal('common.draft'); + return translate('common.draft'); } if (stateNum === CONST.REPORT.STATE_NUM.SUBMITTED && statusNum === CONST.REPORT.STATUS_NUM.SUBMITTED) { - // eslint-disable-next-line @typescript-eslint/no-deprecated - return translateLocal('common.outstanding'); + return translate('common.outstanding'); } if (stateNum === CONST.REPORT.STATE_NUM.APPROVED && statusNum === CONST.REPORT.STATUS_NUM.CLOSED) { - // eslint-disable-next-line @typescript-eslint/no-deprecated - return translateLocal('common.done'); + return translate('common.done'); } if (stateNum === CONST.REPORT.STATE_NUM.APPROVED && statusNum === CONST.REPORT.STATUS_NUM.APPROVED) { - // eslint-disable-next-line @typescript-eslint/no-deprecated - return translateLocal('iou.approved'); + return translate('iou.approved'); } if ( (stateNum === CONST.REPORT.STATE_NUM.APPROVED && statusNum === CONST.REPORT.STATUS_NUM.REIMBURSED) || (stateNum === CONST.REPORT.STATE_NUM.BILLING && statusNum === CONST.REPORT.STATUS_NUM.REIMBURSED) || (stateNum === CONST.REPORT.STATE_NUM.AUTOREIMBURSED && statusNum === CONST.REPORT.STATUS_NUM.REIMBURSED) ) { - // eslint-disable-next-line @typescript-eslint/no-deprecated - return translateLocal('iou.settledExpensify'); + return translate('iou.settledExpensify'); } return ''; diff --git a/tests/unit/ReportUtilsTest.ts b/tests/unit/ReportUtilsTest.ts index 29a7d937387e..e6a949858446 100644 --- a/tests/unit/ReportUtilsTest.ts +++ b/tests/unit/ReportUtilsTest.ts @@ -4,6 +4,7 @@ import {renderHook} from '@testing-library/react-native'; import {addDays, format as formatDate} from 'date-fns'; import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; import Onyx from 'react-native-onyx'; +import type {LocaleContextProps} from '@components/LocaleContextProvider'; import useReportIsArchived from '@hooks/useReportIsArchived'; import {putOnHold} from '@libs/actions/IOU'; import type {OnboardingTaskLinks} from '@libs/actions/Welcome/OnboardingFlow'; @@ -7016,38 +7017,47 @@ describe('ReportUtils', () => { }); describe('getReportStatusTranslation', () => { + const mockTranslate: LocaleContextProps['translate'] = (path, ...params) => translate(CONST.LOCALES.EN, path, ...params); + it('should return "Draft" for state 0, status 0', () => { - expect(getReportStatusTranslation(CONST.REPORT.STATE_NUM.OPEN, CONST.REPORT.STATUS_NUM.OPEN)).toBe(translate(CONST.LOCALES.EN, 'common.draft')); + const result = getReportStatusTranslation({stateNum: CONST.REPORT.STATE_NUM.OPEN, statusNum: CONST.REPORT.STATUS_NUM.OPEN, translate: mockTranslate}); + expect(result).toBe(mockTranslate('common.draft')); }); it('should return "Outstanding" for state 1, status 1', () => { - expect(getReportStatusTranslation(CONST.REPORT.STATE_NUM.SUBMITTED, CONST.REPORT.STATUS_NUM.SUBMITTED)).toBe(translate(CONST.LOCALES.EN, 'common.outstanding')); + const result = getReportStatusTranslation({stateNum: CONST.REPORT.STATE_NUM.SUBMITTED, statusNum: CONST.REPORT.STATUS_NUM.SUBMITTED, translate: mockTranslate}); + expect(result).toBe(mockTranslate('common.outstanding')); }); it('should return "Done" for state 2, status 2', () => { - expect(getReportStatusTranslation(CONST.REPORT.STATE_NUM.APPROVED, CONST.REPORT.STATUS_NUM.CLOSED)).toBe(translate(CONST.LOCALES.EN, 'common.done')); + const result = getReportStatusTranslation({stateNum: CONST.REPORT.STATE_NUM.APPROVED, statusNum: CONST.REPORT.STATUS_NUM.CLOSED, translate: mockTranslate}); + expect(result).toBe(mockTranslate('common.done')); }); it('should return "Approved" for state 2, status 3', () => { - expect(getReportStatusTranslation(CONST.REPORT.STATE_NUM.APPROVED, CONST.REPORT.STATUS_NUM.APPROVED)).toBe(translate(CONST.LOCALES.EN, 'iou.approved')); + const result = getReportStatusTranslation({stateNum: CONST.REPORT.STATE_NUM.APPROVED, statusNum: CONST.REPORT.STATUS_NUM.APPROVED, translate: mockTranslate}); + expect(result).toBe(mockTranslate('iou.approved')); }); it('should return "Paid" for state 2, status 4', () => { - expect(getReportStatusTranslation(CONST.REPORT.STATE_NUM.APPROVED, CONST.REPORT.STATUS_NUM.REIMBURSED)).toBe(translate(CONST.LOCALES.EN, 'iou.settledExpensify')); + const result = getReportStatusTranslation({stateNum: CONST.REPORT.STATE_NUM.APPROVED, statusNum: CONST.REPORT.STATUS_NUM.REIMBURSED, translate: mockTranslate}); + expect(result).toBe(mockTranslate('iou.settledExpensify')); }); it('should return "Paid" for state 3, status 4', () => { - expect(getReportStatusTranslation(CONST.REPORT.STATE_NUM.BILLING, CONST.REPORT.STATUS_NUM.REIMBURSED)).toBe(translate(CONST.LOCALES.EN, 'iou.settledExpensify')); + const result = getReportStatusTranslation({stateNum: CONST.REPORT.STATE_NUM.BILLING, statusNum: CONST.REPORT.STATUS_NUM.REIMBURSED, translate: mockTranslate}); + expect(result).toBe(mockTranslate('iou.settledExpensify')); }); it('should return "Paid" for state 6, status 4', () => { - expect(getReportStatusTranslation(CONST.REPORT.STATE_NUM.AUTOREIMBURSED, CONST.REPORT.STATUS_NUM.REIMBURSED)).toBe(translate(CONST.LOCALES.EN, 'iou.settledExpensify')); + const result = getReportStatusTranslation({stateNum: CONST.REPORT.STATE_NUM.AUTOREIMBURSED, statusNum: CONST.REPORT.STATUS_NUM.REIMBURSED, translate: mockTranslate}); + expect(result).toBe(mockTranslate('iou.settledExpensify')); }); it('should return an empty string when stateNum or statusNum is undefined', () => { - expect(getReportStatusTranslation(undefined, undefined)).toBe(''); - expect(getReportStatusTranslation(CONST.REPORT.STATE_NUM.OPEN, undefined)).toBe(''); - expect(getReportStatusTranslation(undefined, CONST.REPORT.STATUS_NUM.OPEN)).toBe(''); + expect(getReportStatusTranslation({stateNum: undefined, statusNum: undefined, translate: mockTranslate})).toBe(''); + expect(getReportStatusTranslation({stateNum: CONST.REPORT.STATE_NUM.OPEN, statusNum: undefined, translate: mockTranslate})).toBe(''); + expect(getReportStatusTranslation({stateNum: undefined, statusNum: CONST.REPORT.STATUS_NUM.OPEN, translate: mockTranslate})).toBe(''); }); }); @@ -8388,6 +8398,7 @@ describe('ReportUtils', () => { describe('getReportOrDraftReport', () => { const mockReportIDIndex = 1; const mockReportID = mockReportIDIndex.toString(); + // eslint-disable-next-line @typescript-eslint/no-deprecated const mockSearchReport: SearchReport = { ...createRandomReport(mockReportIDIndex, undefined), reportName: 'Search Report', @@ -8417,6 +8428,7 @@ describe('ReportUtils', () => { }); test('returns onyx report when search report is not found but onyx report exists', async () => { + // eslint-disable-next-line @typescript-eslint/no-deprecated const searchReports: SearchReport[] = []; await Onyx.set(`${ONYXKEYS.COLLECTION.REPORT}${mockReportID}`, mockOnyxReport); const result = getReportOrDraftReport(mockReportID, searchReports); @@ -8424,6 +8436,7 @@ describe('ReportUtils', () => { }); test('returns draft report when neither search nor onyx report exists but draft exists', async () => { + // eslint-disable-next-line @typescript-eslint/no-deprecated const searchReports: SearchReport[] = []; await Onyx.set(`${ONYXKEYS.COLLECTION.REPORT_DRAFT}${mockReportID}`, mockDraftReport); const result = getReportOrDraftReport(mockReportID, searchReports); @@ -8431,12 +8444,14 @@ describe('ReportUtils', () => { }); test('returns fallback report when no other reports exist', () => { + // eslint-disable-next-line @typescript-eslint/no-deprecated const searchReports: SearchReport[] = []; const result = getReportOrDraftReport('unknownReportID', searchReports, mockFallbackReport); expect(result).toEqual(mockFallbackReport); }); test('returns undefined when no reports exist and no fallback provided', () => { + // eslint-disable-next-line @typescript-eslint/no-deprecated const searchReports: SearchReport[] = []; const result = getReportOrDraftReport(mockReportID, searchReports); expect(result).toBeUndefined(); @@ -8468,6 +8483,7 @@ describe('ReportUtils', () => { }); test('prioritizes onyx report over draft report when both exist', async () => { + // eslint-disable-next-line @typescript-eslint/no-deprecated const searchReports: SearchReport[] = []; await Onyx.set(`${ONYXKEYS.COLLECTION.REPORT}${mockReportID}`, mockOnyxReport); await Onyx.set(`${ONYXKEYS.COLLECTION.REPORT_DRAFT}${mockReportID}`, mockDraftReport); @@ -8477,6 +8493,7 @@ describe('ReportUtils', () => { }); test('prioritizes draft report over fallback when both exist', async () => { + // eslint-disable-next-line @typescript-eslint/no-deprecated const searchReports: SearchReport[] = []; await Onyx.set(`${ONYXKEYS.COLLECTION.REPORT_DRAFT}${mockReportID}`, mockDraftReport); const result = getReportOrDraftReport(mockReportID, searchReports, mockFallbackReport);