[Update] Refine credit display and expiration handling in billing (#4297)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR updates the logic for checking active credits and improves the display of claimed and expiration information in the CreditsItem component.

### Detailed summary
- Improved logic for checking active credits in `useApi.ts`
- Updated display of claimed credits and expiration information in `CreditsItem.tsx`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
This commit is contained in:
jnsdls
2024-08-27 21:39:52 +00:00
parent 2eac899036
commit a716bbbce5
2 changed files with 21 additions and 17 deletions
@@ -338,7 +338,7 @@ export function useAccountCredits() {
const credits = (json.data as BillingCredit[]).filter(
(credit) =>
credit.remainingValueUsdCents > 0 &&
credit.expiresAt > new Date().toISOString() &&
(!credit.expiresAt || credit.expiresAt > new Date().toISOString()) &&
credit.isActive,
);
@@ -97,22 +97,26 @@ export const CreditsItem: React.FC<CreditsItemProps> = ({
{formatToDollars(credit?.remainingValueUsdCents || 0)}
</Text>
</Flex>
<Flex flexDir="column" gap={1}>
<Text>Claimed Credits (All-Time)</Text>
<Text color="bgBlack">
{formatToDollars(credit?.originalGrantUsdCents || 0)}
</Text>
</Flex>
<Flex flexDir="column" gap={1}>
<Text>Expires</Text>
<Text color="bgBlack" textTransform="capitalize">
{credit?.expiresAt
? formatDistance(new Date(credit.expiresAt), Date.now(), {
addSuffix: true,
})
: "N/A"}
</Text>
</Flex>
{!isTwCredit && (
<Flex flexDir="column" gap={1}>
<Text>Claimed Credits (All-Time)</Text>
<Text color="bgBlack">
{formatToDollars(credit?.originalGrantUsdCents || 0)}
</Text>
</Flex>
)}
{credit?.expiresAt && (
<Flex flexDir="column" gap={1}>
<Text>Expires</Text>
<Text color="bgBlack" textTransform="capitalize">
{credit?.expiresAt
? formatDistance(new Date(credit.expiresAt), Date.now(), {
addSuffix: true,
})
: "N/A"}
</Text>
</Flex>
)}
</Flex>
{hasAppliedForOpGrant && !credit && isOpCredit && (
<Alert