Update the policy expensify card table to the new style#94860
Conversation
…o the new style""
Move the frozen card status below the row grid (matching the pre-table layout and Spend table violation pattern) so long admin names no longer wrap into adjacent columns.
|
@Krishna2323 @situchan One of you needs to copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
Codecov Report✅ Changes either increased or maintained existing code coverage, great job!
|
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 23e1171a4c
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| const limitTypeLabel = translate(getTranslationKeyForLimitType(item.limitType)); | ||
| const formattedLimit = convertToShortDisplayString(item.limit, item.currency); | ||
| const formattedFrozenDate = item.frozenDate ? DateUtils.formatWithUTCTimeZone(item.frozenDate, CONST.DATE.MONTH_DAY_YEAR_ABBR_FORMAT) : ''; | ||
| const frozenByAdminPrefix = translate('cardPage.frozenByAdminPrefix', {date: formattedFrozenDate}); |
There was a problem hiding this comment.
❌ PERF-2 (docs)
frozenByAdminPrefix calls translate('cardPage.frozenByAdminPrefix', ...) unconditionally for every rendered card row, but the value is only ever used inside the if (formattedFrozenDate) block below. For the common case (a non-frozen card, where formattedFrozenDate is empty) this performs a wasted translate lookup on every row.
Move the translate call inside the guard so it only runs when the card is actually frozen:
let frozenByText: string | undefined;
if (formattedFrozenDate) {
if (item.frozenByAccountID === session?.accountID) {
frozenByText = translate('cardPage.youFroze', {date: formattedFrozenDate});
} else {
const frozenByAdminPrefix = translate('cardPage.frozenByAdminPrefix', {date: formattedFrozenDate});
frozenByText = `${frozenByAdminPrefix}${item.frozenByDisplayName ?? translate('common.someone')}`;
}
}Reviewed at: 23e1171 | Please rate this suggestion with 👍 or 👎 to help us improve! Reactions are used to monitor reviewer efficiency.
|
How to freeze card? |
|
@situchan you can click on a card row > Freeze card Screen.Recording.2026-06-29.at.9.43.08.AM.mov |
|
Gotcha. Only available on virtual card. Was testing on physical card |
Reviewer Checklist
Screenshots/VideosAndroid: HybridAppandroid.movandroid.movAndroid: mWeb ChromeiOS: HybridAppios.movios.moviOS: mWeb SafariMacOS: Chrome / Safariweb.movweb.mov |
Avoids unnecessary translate lookups on non-frozen card rows.
|
@tylerkaraszewski Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
|
🚧 luacmartins has triggered a test Expensify/App build. You can view the workflow run here. |
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
|
|
🚀 Deployed to staging by https://github.com/luacmartins in version: 9.4.25-0 🚀
|
|
Deploy Blocker #95003 was identified to be related to this PR. |
|
🚀 Deployed to production by https://github.com/cristipaval in version: 9.4.25-2 🚀
Bundle Size Analysis (Sentry): |
Explanation of Change
Migrate the policy Expensify Card list page to the shared
Tablecomponent.Render the frozen card status below the row (matching the Spend table violation pattern) so long admin names no longer wrap into adjacent columns.
Fixed Issues
$ #86212
$ #94750
Tests
Offline tests
N/A
QA Steps
Same as tests