feat: add invoices page #1939
feat: add invoices page #1939
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughThis PR introduces a new invoices management feature to the billing section. It adds a new invoices page, backend API endpoint to fetch Stripe invoices, a custom SWR hook for data fetching, and updates navigation components to support the new invoices route alongside the existing subscription management. Changes
Possibly related PRs
Pre-merge checks❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
Tip 📝 Customizable high-level summaries are now available in beta!You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.
Example instruction:
Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
components/billing/upgrade-plan-container.tsx (1)
214-220: Fix inconsistency: Free tier users still use old API-based navigation.Line 216 still calls
manageSubscription({ type: "invoices" })for free tier users, while Line 275 uses the newrouter.push("/settings/billing/invoices")for paid users. This creates inconsistent behavior.Apply this diff to use consistent navigation:
<DropdownMenuContent align="end"> <DropdownMenuItem - onClick={() => manageSubscription({ type: "invoices" })} + onClick={() => router.push("/settings/billing/invoices")} > <ReceiptTextIcon className="h-4 w-4" /> View invoices
🧹 Nitpick comments (3)
pages/settings/billing/invoices.tsx (2)
93-99: Use SWR's mutate instead of router.reload().The retry button uses
router.reload()which reloads the entire page. Consider using SWR's mutate function to re-fetch just the invoices data for a better user experience.Apply this diff:
+import { mutate } from "swr"; +import { useTeam } from "@/context/team-context"; + export default function Invoices() { const router = useRouter(); + const teamInfo = useTeam(); + const teamId = teamInfo?.currentTeam?.id; const { invoices, loading, error } = useInvoices(); // ... rest of code ... <Button variant="outline" size="sm" - onClick={() => router.reload()} + onClick={() => mutate(`/api/teams/${teamId}/billing/invoices`)} > Retry </Button>
126-136: Consider using dynamic description from invoice data.The description is hardcoded to "Papermark Subscription" but the API returns a description field from the invoice. While this works for most cases, it might not accurately reflect all invoice types.
Consider using the invoice description:
<TableCell> <div className="flex flex-col"> <span className="font-medium"> - Papermark Subscription + {invoice.description || "Papermark Subscription"} </span> {invoice.number && (pages/api/teams/[teamId]/billing/invoices.ts (1)
57-61: Consider future pagination for invoices.The current limit of 100 invoices is reasonable for most use cases, but teams with long billing histories might exceed this. Consider adding pagination in a future iteration.
Add a comment to document the limitation:
// Fetch invoices from Stripe + // Note: Limited to 100 most recent invoices. Consider adding pagination for teams with extensive billing history. const stripe = stripeInstance(isOldAccount(team.plan)); const invoices = await stripe.invoices.list({ customer: team.stripeId, limit: 100, });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
components/billing/upgrade-plan-container.tsx(1 hunks)components/layouts/breadcrumb.tsx(3 hunks)lib/swr/use-invoices.ts(1 hunks)pages/api/teams/[teamId]/billing/invoices.ts(1 hunks)pages/settings/billing.tsx(2 hunks)pages/settings/billing/invoices.tsx(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (3)
pages/settings/billing.tsx (1)
components/tab-menu.tsx (1)
TabMenu(23-52)
pages/settings/billing/invoices.tsx (3)
lib/swr/use-invoices.ts (1)
useInvoices(20-38)lib/utils.ts (1)
formatDate(301-312)components/tab-menu.tsx (1)
TabMenu(23-52)
lib/swr/use-invoices.ts (2)
context/team-context.tsx (1)
useTeam(87-87)lib/utils.ts (1)
fetcher(48-62)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (5)
components/layouts/breadcrumb.tsx (1)
222-266: LGTM! Clean breadcrumb implementation for the invoices sub-route.The breadcrumb logic correctly handles the invoices page hierarchy (Settings > Billing > Invoices) and follows the existing patterns in the codebase.
pages/settings/billing.tsx (1)
59-74: LGTM! TabMenu integration looks good.The tab navigation is correctly configured with both Subscription and Invoices tabs. The
currentValue="subscription"for both tabs on this page will properly highlight the Subscription tab since we're on the billing page.lib/swr/use-invoices.ts (1)
1-39: LGTM! Well-structured hook implementation.The Invoice interface is comprehensive, and the useInvoices hook follows best practices with proper SWR configuration. The deduplication interval and revalidation settings are appropriate for invoice data.
pages/settings/billing/invoices.tsx (1)
56-71: LGTM! Proper tab menu configuration for the invoices page.The TabMenu correctly sets
currentValue="invoices"to highlight the Invoices tab when on this page.pages/api/teams/[teamId]/billing/invoices.ts (1)
14-83: LGTM! Solid API endpoint implementation with proper authentication and error handling.The endpoint correctly:
- Enforces GET-only method
- Validates user authentication and team membership
- Handles teams without Stripe customers gracefully
- Transforms Stripe data into a clean format
- Includes proper error handling
Summary by CodeRabbit
New Features
Bug Fixes
✏️ Tip: You can customize this high-level summary in your review settings.