Show balance and remaining limit for Plaid company card feeds#94096
Show balance and remaining limit for Plaid company card feeds#94096ishpaul777 wants to merge 3 commits into
Conversation
Display a balance block (current balance + remaining limit) above the company cards table for Plaid-connected feeds, mirroring the Expensify Card page. Each stat has an info tooltip with the last-updated timestamp reported by the bank. The block is hidden for non-Plaid feeds and when no balance data is available, and shows "Not available" for a field the bank did not report. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
Hey, I noticed you changed If you want to automatically generate translations for other locales, an Expensify employee will have to:
Alternatively, if you are an external contributor, you can run the translation script locally with your own OpenAI API key. To learn more, try running: npx ts-node ./scripts/generateTranslations.ts --helpTypically, you'd want to translate only what you changed by running |
melvin-bot
Bot
requested review from
trjExpensify
and removed request for
a team
|
draft WIP for now will open soon |
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
|
|
||
| const [isVisible, setVisible] = useState(false); | ||
| const [anchorPosition, setAnchorPosition] = useState({top: 0, left: 0}); | ||
| const anchorRef = useRef(null); |
There was a problem hiding this comment.
❌ CONSISTENCY-3 (docs)
This component is a near-duplicate of the existing src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx. The anchor-positioning useEffect (with the identical BOTTOM_MARGIN_OFFSET = 3 constant), the Icon + PressableWithFeedback header block, and the Popover tooltip block are copied almost verbatim. Duplicating this logic doubles the maintenance surface and bug risk.
Extract the shared label/tooltip UI (anchor positioning + popover + info button) into a reusable component or hook that both the Expensify Card and Company Cards balance labels consume, parameterizing only the differing bits (translation key prefix, value formatting, optional CTA). For example, a shared CardBalanceLabel that takes titleKey, descriptionKey, and displayValue props.
Reviewed at: a0a6c8a | Please rate this suggestion with 👍 or 👎 to help us improve! Reactions are used to monitor reviewer efficiency.
| <Text style={styles.shortTermsHeadline}>{displayValue}</Text> | ||
| <Popover | ||
| onClose={() => setVisible(false)} | ||
| isVisible={isVisible} |
There was a problem hiding this comment.
❌ UI-3 (docs)
innerContainerStyle={!shouldUseNarrowLayout ? {maxWidth: variables.modalContentMaxWidth} : undefined} passes an inline style object literal to a *Style prop. {maxWidth: variables.modalContentMaxWidth} is a fully static value that belongs in the shared style system; the inline literal creates a new object every render and bypasses the styles helpers.
Add a named style (e.g. styles.popoverMaxWidth returning {maxWidth: variables.modalContentMaxWidth}) in the style sheet and reference it: innerContainerStyle={!shouldUseNarrowLayout ? styles.popoverMaxWidth : undefined}.
Reviewed at: a0a6c8a | Please rate this suggestion with 👍 or 👎 to help us improve! Reactions are used to monitor reviewer efficiency.
| left: position.left, | ||
| }); | ||
| }, [isVisible, windowWidth]); | ||
|
|
There was a problem hiding this comment.
❌ CONSISTENCY-8 (docs)
format(new Date(lastUpdated.replace(' ', 'T')), CONST.DATE.FNS_DATE_TIME_FORMAT_STRING) formats a user-visible timestamp (shown in the tooltip) with a hardcoded yyyy-MM-dd HH:mm:ss pattern, bypassing the project's locale-aware date helpers. The displayed date order/separators will not respect the user's locale.
Format the timestamp through the localization layer (e.g. DateUtils.datetimeToCalendarTime / the date helpers exposed by useLocalize) so the last-updated time honors the user's locale.
Reviewed at: a0a6c8a | Please rate this suggestion with 👍 or 👎 to help us improve! Reactions are used to monitor reviewer efficiency.
Codecov Report✅ Changes either increased or maintained existing code coverage, great job!
|
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 3151435db5
ℹ️ About Codex in GitHub
Your team has set up Codex to 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 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| }, [isVisible, windowWidth]); | ||
|
|
||
| const displayValue = value === undefined ? translate('workspace.companyCards.balance.notAvailable') : convertToDisplayString(value, currency); | ||
| const formattedLastUpdated = lastUpdated ? format(new Date(lastUpdated.replace(' ', 'T')), CONST.DATE.FNS_DATE_TIME_FORMAT_STRING) : undefined; |
There was a problem hiding this comment.
When the backend sends balanceTimestamp in the same DB format used elsewhere (yyyy-MM-dd HH:mm:ss, serialized as UTC without a Z), this parses it as a local device time because the replacement does not add a timezone. In non-UTC timezones the tooltip will show a shifted “last updated” time compared with existing company-card timestamps that go through getLocalDateFromDatetime, so admins can see incorrect balance freshness.
Useful? React with 👍 / 👎.
1 participant
Explanation of Change
Displays a balance block (Current balance + Remaining limit) above the company cards table for Plaid-connected (direct) feeds, mirroring the pattern on the Expensify Card page.
currentBalance,remainingLimit, andbalanceTimestamp(all in cents / datetime) to the company card feed type (CustomCardFeedData). These are populated by the backend from Plaid (see backend PR below).WorkspaceCompanyCardsBalanceLabelsrenders the two stats above the table; each stat (WorkspaceCompanyCardsBalanceLabel) has an info tooltip showing the last-updated timestamp reported by the bank.isDirectFeed).Depends on backend PR: https://github.com/Expensify/Web-Expensify/pull/53882 — that PR fetches the balance from Plaid and stores it on the feed (in cents). This PR is display-only and is safe to merge after it.
Note: amounts are displayed in the policy's output currency (fallback USD), consistent with the rest of the company cards page.
Fixed Issues
$ #93198
PROPOSAL: N/A (internal)
Tests
Offline tests
QA Steps
PR Author Checklist
### Fixed Issuessection aboveScreenshots/Videos
Pending — UI screenshots/recordings to be added once running against the backend PR locally.
-- written by claude on Ishpaul's Behalf