Skip to content

Commit

Permalink
[Update] Refine credit display and expiration handling in billing (#4297
Browse files Browse the repository at this point in the history
)

## 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 -->
  • Loading branch information
jnsdls committed Aug 27, 2024
1 parent 2eac899 commit a716bbb
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 17 deletions.
2 changes: 1 addition & 1 deletion apps/dashboard/src/@3rdweb-sdk/react/hooks/useApi.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit a716bbb

Please sign in to comment.