Merge pull request #94308 from software-mansion-labs/@adamgrzybowski/fix-recently-added-bugs

grgia · web-flow · commit 35d22a65f8d3 · 2026-06-29T10:59:46.000+01:00
diff --git a/src/components/TransactionItemRow/index.tsx b/src/components/TransactionItemRow/index.tsx
@@ -9,41 +9,25 @@ import {getCompanyCardDescription} from '@libs/CardUtils';
 import {getDecodedCategoryName, isCategoryMissing} from '@libs/CategoryUtils';
 import {getIOUActionForTransactionID} from '@libs/ReportActionsUtils';
 import {isExpenseReport, isSettled, shouldShowMarkAsDone} from '@libs/ReportUtils';
-import StringUtils from '@libs/StringUtils';
 import {
     getAmount,
     getDescription,
     getExchangeRate,
-    getMerchant,
+    getMerchantName,
     getCreated as getTransactionCreated,
     hasMissingSmartscanFields,
     isAmountMissing,
     isMerchantMissing,
-    isScanning,
     shouldShowAttendees as shouldShowAttendeesUtils,
 } from '@libs/TransactionUtils';
 import CONST from '@src/CONST';
-import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 import TransactionItemRowNarrow from './TransactionItemRowNarrow';
 import TransactionItemRowWide from './TransactionItemRowWide';
-import type {TransactionItemRowProps, TransactionWithOptionalSearchFields} from './types';
+import type {TransactionItemRowProps} from './types';
 
 const EMPTY_ACTIVE_STYLE: StyleProp<ViewStyle> = [];
 
-function getMerchantName(transactionItem: TransactionWithOptionalSearchFields, translate: (key: TranslationPaths) => string): string {
-    const shouldShowMerchant = transactionItem.shouldShowMerchant ?? true;
-
-    let merchant = transactionItem?.formattedMerchant ?? getMerchant(transactionItem);
-
-    if (isScanning(transactionItem) && shouldShowMerchant) {
-        merchant = translate('iou.receiptStatusTitle');
-    }
-
-    const merchantName = StringUtils.getFirstLine(merchant);
-    return merchantName !== CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT && merchantName !== CONST.TRANSACTION.DEFAULT_MERCHANT ? (merchantName ?? '') : '';
-}
-
 function TransactionItemRow({
     transactionItem,
     report,
diff --git a/src/libs/TransactionUtils/index.ts b/src/libs/TransactionUtils/index.ts
@@ -46,6 +46,7 @@ import {
     isSettled,
     isThread,
 } from '@libs/ReportUtils';
+import StringUtils from '@libs/StringUtils';
 import {isInvalidMerchantValue} from '@libs/ValidationUtils';
 import type {UpdateMoneyRequestDataKeys} from '@userActions/IOU/UpdateMoneyRequest';
 import type {IOURequestType, IOUType} from '@src/CONST';
@@ -1117,6 +1118,24 @@ function getMerchantOrDescription(transaction: OnyxEntry<Transaction>) {
     return !isMerchantMissing(transaction) ? getMerchant(transaction) : getDescription(transaction);
 }
 
+/**
+ * Resolves the merchant string to display for a transaction. Returns the localized scanning label while a receipt is
+ * scanning, and normalizes the `DEFAULT_MERCHANT` ("Expense") and `PARTIAL_TRANSACTION_MERCHANT` ("(none)") placeholder
+ * sentinels to an empty string so they never leak into the UI.
+ */
+function getMerchantName(transaction: TransactionWithOptionalSearchFields, translate: (key: TranslationPaths) => string): string {
+    const shouldShowMerchant = transaction.shouldShowMerchant ?? true;
+
+    let merchant = transaction?.formattedMerchant ?? getMerchant(transaction);
+
+    if (isScanning(transaction) && shouldShowMerchant) {
+        merchant = translate('iou.receiptStatusTitle');
+    }
+
+    const merchantName = StringUtils.getFirstLine(merchant);
+    return merchantName !== CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT && merchantName !== CONST.TRANSACTION.DEFAULT_MERCHANT ? (merchantName ?? '') : '';
+}
+
 function getReportOwnerAsAttendee(creatorDetails: OnyxEntry<PersonalDetails>): Attendee | undefined {
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     const creatorLogin = creatorDetails?.login || creatorDetails?.displayName || '';
@@ -3002,6 +3021,7 @@ export {
     getOriginalAmount,
     getFormattedAttendees,
     getMerchant,
+    getMerchantName,
     hasAnyTransactionWithoutRTERViolation,
     getMerchantOrDescription,
     getMCCGroup,
diff --git a/src/pages/home/RecentlyAddedSection/RecentlyAddedRow.tsx b/src/pages/home/RecentlyAddedSection/RecentlyAddedRow.tsx
@@ -19,6 +19,9 @@ import type {RecentlyAddedExpense} from './useRecentlyAddedData';
 /** Width of the date column, shared with the section's column header so labels line up with the values. */
 const DATE_COLUMN_WIDTH = 72;
 
+/** Wider date column used when a row's date includes the year (e.g. "Jun 7, 2025"), so it isn't truncated. */
+const DATE_COLUMN_WIDTH_WIDE = 102;
+
 type RecentlyAddedRowProps = {
     /** The expense to render */
     expense: RecentlyAddedExpense;
@@ -31,17 +34,23 @@ type RecentlyAddedRowProps = {
 
     /** Whether the hovered receipt preview may be shown. Becomes false once the screen blurs so the preview is dismissed after opening an expense. */
     shouldShowReceiptPreview: boolean;
+
+    /** Width of the date column, widened by the section when any visible expense's date includes the year. */
+    dateColumnWidth: number;
 };
 
-function RecentlyAddedRow({expense, onPress, shouldShowSeparator, shouldShowReceiptPreview}: RecentlyAddedRowProps) {
+function RecentlyAddedRow({expense, onPress, shouldShowSeparator, shouldShowReceiptPreview, dateColumnWidth}: RecentlyAddedRowProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
     const StyleUtils = useStyleUtils();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const {convertToDisplayString} = useCurrencyListActions();
     const icons = useMemoizedLazyExpensifyIcons(['ArrowRight']);
 
-    const formattedDate = DateUtils.formatWithUTCTimeZone(expense.created, CONST.DATE.MONTH_DAY_ABBR_FORMAT);
+    const formattedDate = DateUtils.formatWithUTCTimeZone(
+        expense.created,
+        DateUtils.doesDateBelongToAPastYear(expense.created) ? CONST.DATE.MONTH_DAY_YEAR_ABBR_FORMAT : CONST.DATE.MONTH_DAY_ABBR_FORMAT,
+    );
 
     const formattedAmount = convertToDisplayString(expense.amount, expense.currency);
 
@@ -107,7 +116,7 @@ function RecentlyAddedRow({expense, onPress, shouldShowSeparator, shouldShowRece
                         shouldUseNarrowLayout={false}
                     />
                 </View>
-                <View style={StyleUtils.getWidthStyle(DATE_COLUMN_WIDTH)}>
+                <View style={StyleUtils.getWidthStyle(dateColumnWidth)}>
                     <Text numberOfLines={1}>{formattedDate}</Text>
                 </View>
                 <Text
@@ -137,4 +146,4 @@ function RecentlyAddedRow({expense, onPress, shouldShowSeparator, shouldShowRece
 }
 
 export default RecentlyAddedRow;
-export {DATE_COLUMN_WIDTH};
+export {DATE_COLUMN_WIDTH, DATE_COLUMN_WIDTH_WIDE};
diff --git a/src/pages/home/RecentlyAddedSection/index.tsx b/src/pages/home/RecentlyAddedSection/index.tsx
@@ -8,6 +8,7 @@ import Text from '@components/Text';
 import {useWideRHPActions} from '@components/WideRHPContextProvider';
 import WidgetContainer from '@components/WidgetContainer';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
+import useIsAnonymousUser from '@hooks/useIsAnonymousUser';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
@@ -17,6 +18,7 @@ import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {setActiveTransactionIDs} from '@libs/actions/TransactionThreadNavigation';
+import DateUtils from '@libs/DateUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import {buildQueryStringFromFilterFormValues} from '@libs/SearchQueryUtils';
 import type {TransactionThreadNavigationDescriptor} from '@libs/TransactionThreadNavigationUtils';
@@ -27,7 +29,7 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import EmptyState from './EmptyState';
-import RecentlyAddedRow, {DATE_COLUMN_WIDTH} from './RecentlyAddedRow';
+import RecentlyAddedRow, {DATE_COLUMN_WIDTH, DATE_COLUMN_WIDTH_WIDE} from './RecentlyAddedRow';
 import type {RecentlyAddedExpense} from './useRecentlyAddedData';
 import {useRecentlyAddedData} from './useRecentlyAddedData';
 
@@ -56,6 +58,7 @@ function RecentlyAddedSection() {
     const {calculatePopoverPosition} = usePopoverPosition();
     const {markReportIDAsExpense} = useWideRHPActions();
     const {email: currentUserEmail, accountID: currentUserAccountID} = useCurrentUserPersonalDetails();
+    const isAnonymousUser = useIsAnonymousUser();
     const [betas] = useOnyx(ONYXKEYS.BETAS);
     const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED);
     const [isOverflowMenuVisible, setIsOverflowMenuVisible] = useState(false);
@@ -64,6 +67,11 @@ function RecentlyAddedSection() {
 
     const hasExpenses = transactions.length > 0;
 
+    // Mirror the Spend table: when any visible expense's date includes the year (a past-year date), widen the
+    // shared date column so "Jun 7, 2025" isn't truncated. The header and every row use the same width to stay aligned.
+    const shouldShowYear = transactions.some((expense) => DateUtils.doesDateBelongToAPastYear(expense.created));
+    const dateColumnWidth = shouldShowYear ? DATE_COLUMN_WIDTH_WIDE : DATE_COLUMN_WIDTH;
+
     const openExpense = (expense: RecentlyAddedExpense) => {
         // Resolve only the tapped expense now. getReportIDToOpenForExpense may create a transaction thread, so
         // resolving every sibling up front would create a thread for each multi-expense sibling on a single tap.
@@ -103,6 +111,12 @@ function RecentlyAddedSection() {
         );
     };
 
+    // Guests (anonymous users) viewing a public room have no expenses of their own, so the section is hidden
+    // entirely rather than showing the empty state.
+    if (isAnonymousUser) {
+        return null;
+    }
+
     const overflowMenu = hasExpenses ? (
         <>
             <PressableWithoutFeedback
@@ -161,7 +175,7 @@ function RecentlyAddedSection() {
                             <View style={StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TYPE)}>
                                 <Text style={styles.textMicroSupporting}>{translate('common.type')}</Text>
                             </View>
-                            <View style={StyleUtils.getWidthStyle(DATE_COLUMN_WIDTH)}>
+                            <View style={StyleUtils.getWidthStyle(dateColumnWidth)}>
                                 <Text style={styles.textMicroSupporting}>{translate('common.date')}</Text>
                             </View>
                             <Text style={[styles.flex1, styles.textMicroSupporting]}>{translate('common.merchant')}</Text>
@@ -176,6 +190,7 @@ function RecentlyAddedSection() {
                             onPress={() => openExpense(expense)}
                             shouldShowSeparator={index < transactions.length - 1}
                             shouldShowReceiptPreview={isFocused}
+                            dateColumnWidth={dateColumnWidth}
                         />
                     ))}
                 </View>
diff --git a/src/pages/home/RecentlyAddedSection/useRecentlyAddedData.ts b/src/pages/home/RecentlyAddedSection/useRecentlyAddedData.ts
@@ -1,12 +1,13 @@
 import {useIsFocused} from '@react-navigation/native';
 import {useEffect, useEffectEvent, useMemo} from 'react';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
+import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useOnyx from '@hooks/useOnyx';
 import {search} from '@libs/actions/Search';
 import {getIOUActionForTransactionID} from '@libs/ReportActionsUtils';
 import {buildQueryStringFromFilterFormValues, buildSearchQueryJSON} from '@libs/SearchQueryUtils';
-import {getAmount, getCreated, getCurrency, getMerchant} from '@libs/TransactionUtils';
+import {getAmount, getCreated, getCurrency, getMerchantName} from '@libs/TransactionUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {Report, ReportAction, Transaction} from '@src/types/onyx';
@@ -52,6 +53,7 @@ type RecentlyAddedExpense = {
 function useRecentlyAddedData(): {transactions: RecentlyAddedExpense[]} {
     const {accountID} = useCurrentUserPersonalDetails();
     const {isOffline} = useNetwork();
+    const {translate} = useLocalize();
     const isFocused = useIsFocused();
 
     const query = useMemo(
@@ -114,6 +116,8 @@ function useRecentlyAddedData(): {transactions: RecentlyAddedExpense[]} {
         }
 
         const reportOwnerByReportID = new Map<string, number | undefined>();
+        const reportTypeByReportID = new Map<string, string | undefined>();
+        const reportChatTypeByReportID = new Map<string, string | undefined>();
         const snapshotTransactions: Transaction[] = [];
         const snapshotReportActions: ReportAction[] = [];
         // Snapshot data is a keyed record where the key prefix determines the value type.
@@ -128,6 +132,8 @@ function useRecentlyAddedData(): {transactions: RecentlyAddedExpense[]} {
                 const report = value as Report;
                 if (report?.reportID) {
                     reportOwnerByReportID.set(report.reportID, report.ownerAccountID);
+                    reportTypeByReportID.set(report.reportID, report.type);
+                    reportChatTypeByReportID.set(report.reportID, report.chatType);
                 }
                 continue;
             }
@@ -164,17 +170,28 @@ function useRecentlyAddedData(): {transactions: RecentlyAddedExpense[]} {
                 return firstKey < secondKey ? 1 : -1;
             })
             .slice(0, CONST.HOME.SECTION_VISIBLE_LIMIT)
-            .map((transaction) => ({
-                transactionID: transaction.transactionID,
-                reportID: transaction.reportID,
-                created: getCreated(transaction),
-                merchant: getMerchant(transaction),
-                amount: getAmount(transaction),
-                currency: getCurrency(transaction),
-                threadReportID: getIOUActionForTransactionID(snapshotReportActions, transaction.transactionID)?.childReportID,
-                transaction,
-            }));
-    }, [snapshotData, accountID, insertedByTransactionID]);
+            .map((transaction) => {
+                const reportType = reportTypeByReportID.get(transaction.reportID);
+                const isFromExpenseReport = reportType === CONST.REPORT.TYPE.EXPENSE;
+                // Self-DM and unreported (tracked) expenses support signed amounts like expense reports, so their
+                // sign must be preserved too. Without this, a self-DM credit/refund is collapsed to its absolute
+                // value and loses its negative sign.
+                const isFromTrackedExpense =
+                    transaction.reportID === CONST.REPORT.UNREPORTED_REPORT_ID || reportChatTypeByReportID.get(transaction.reportID) === CONST.REPORT.CHAT_TYPE.SELF_DM;
+                return {
+                    transactionID: transaction.transactionID,
+                    reportID: transaction.reportID,
+                    created: getCreated(transaction),
+                    merchant: getMerchantName(transaction, translate),
+                    // Expense-report, self-DM, and tracked transactions are stored with an inverted sign, so the
+                    // displayed amount must be negated for them (mirrors the Search transaction list).
+                    amount: getAmount(transaction, isFromExpenseReport, isFromTrackedExpense),
+                    currency: getCurrency(transaction),
+                    threadReportID: getIOUActionForTransactionID(snapshotReportActions, transaction.transactionID)?.childReportID,
+                    transaction,
+                };
+            });
+    }, [snapshotData, accountID, insertedByTransactionID, translate]);
 
     return {transactions};
 }
diff --git a/tests/ui/RecentlyAddedSectionTest.tsx b/tests/ui/RecentlyAddedSectionTest.tsx
@@ -230,6 +230,35 @@ describe('RecentlyAddedSection', () => {
         });
     });
 
+    describe('anonymous user', () => {
+        it('hides the entire section (including the empty state) for guests', async () => {
+            mockUseRecentlyAddedData.mockReturnValue({transactions: []});
+            await act(async () => {
+                await Onyx.merge(ONYXKEYS.SESSION, {authTokenType: CONST.AUTH_TOKEN_TYPES.ANONYMOUS});
+            });
+            await waitForBatchedUpdatesWithAct();
+
+            renderRecentlyAddedSection();
+            await waitForBatchedUpdatesWithAct();
+
+            expect(screen.queryByTestId('recentlyAddedEmptyState')).not.toBeOnTheScreen();
+            expect(screen.queryByText('homePage.recentlyAddedSection.title')).not.toBeOnTheScreen();
+        });
+
+        it('still hides the section for guests even when expenses are present', async () => {
+            mockUseRecentlyAddedData.mockReturnValue({transactions: [ROW_1]});
+            await act(async () => {
+                await Onyx.merge(ONYXKEYS.SESSION, {authTokenType: CONST.AUTH_TOKEN_TYPES.ANONYMOUS});
+            });
+            await waitForBatchedUpdatesWithAct();
+
+            renderRecentlyAddedSection();
+            await waitForBatchedUpdatesWithAct();
+
+            expect(screen.queryByTestId('recentlyAddedRow-t1')).not.toBeOnTheScreen();
+        });
+    });
+
     describe('rows', () => {
         it('renders one row per expense with the merchant name', async () => {
             mockUseRecentlyAddedData.mockReturnValue({transactions: [ROW_1, ROW_2]});
diff --git a/tests/unit/HomePage/RecentlyAddedSection/useRecentlyAddedDataTest.ts b/tests/unit/HomePage/RecentlyAddedSection/useRecentlyAddedDataTest.ts
@@ -208,6 +208,49 @@ describe('useRecentlyAddedData — unreported expenses', () => {
     });
 });
 
+describe('useRecentlyAddedData — amount sign', () => {
+    it('preserves the negative sign for self-DM credits/refunds', () => {
+        setupSnapshot(
+            [makeTransaction({transactionID: 'selfDMCredit', reportID: 'selfDM', amount: 1000, inserted: '2026-06-01 10:00:00'})],
+            [makeReport('selfDM', ACCOUNT_ID, {type: CONST.REPORT.TYPE.CHAT, chatType: CONST.REPORT.CHAT_TYPE.SELF_DM})],
+        );
+
+        const {result} = renderHook(() => useRecentlyAddedData());
+
+        expect(result.current.transactions.at(0)?.amount).toBe(-1000);
+    });
+
+    it('preserves the negative sign for unreported (tracked) credits/refunds', () => {
+        setupSnapshot([makeTransaction({transactionID: 'trackedCredit', reportID: CONST.REPORT.UNREPORTED_REPORT_ID, amount: 1000, inserted: '2026-06-01 10:00:00'})], []);
+
+        const {result} = renderHook(() => useRecentlyAddedData());
+
+        expect(result.current.transactions.at(0)?.amount).toBe(-1000);
+    });
+
+    it('negates the inverted sign of expense-report transactions', () => {
+        setupSnapshot(
+            [makeTransaction({transactionID: 'expense', reportID: 'report_owned', amount: 1000, inserted: '2026-06-01 10:00:00'})],
+            [makeReport('report_owned', ACCOUNT_ID, {type: CONST.REPORT.TYPE.EXPENSE})],
+        );
+
+        const {result} = renderHook(() => useRecentlyAddedData());
+
+        expect(result.current.transactions.at(0)?.amount).toBe(-1000);
+    });
+
+    it('returns the absolute amount for non self-DM, non expense-report transactions', () => {
+        setupSnapshot(
+            [makeTransaction({transactionID: 'iou', reportID: 'report_iou', amount: -1000, inserted: '2026-06-01 10:00:00'})],
+            [makeReport('report_iou', ACCOUNT_ID, {type: CONST.REPORT.TYPE.IOU})],
+        );
+
+        const {result} = renderHook(() => useRecentlyAddedData());
+
+        expect(result.current.transactions.at(0)?.amount).toBe(1000);
+    });
+});
+
 describe('useRecentlyAddedData — empty snapshot', () => {
     it('returns no expenses when the snapshot has not loaded yet', () => {
         delete onyxData[`${ONYXKEYS.COLLECTION.SNAPSHOT}${SNAPSHOT_HASH}`];
diff --git a/tests/unit/TransactionUtilsTest.ts b/tests/unit/TransactionUtilsTest.ts
