[Dashboard] Add crypto payment option for invoices #7270
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe changes extend the billing and checkout flows to support invoice payments with cryptocurrency. This includes refactoring the checkout logic to handle multiple SKU types, adding a utility for generating invoice payment URLs, updating billing history to offer crypto payment options for invoices, and adjusting UI components and types to support these features. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant CheckoutPage
participant BillingUtils
participant Redirect
User->>CheckoutPage: Access /checkout/[team_slug]/[sku]
CheckoutPage->>CheckoutPage: Parse SKU and searchParams
alt SKU is "invoice"
CheckoutPage->>BillingUtils: getInvoicePaymentUrl({ teamSlug, invoiceId })
BillingUtils-->>CheckoutPage: Return payment URL or undefined
alt Payment URL exists
CheckoutPage->>Redirect: Redirect to payment URL
else Payment URL missing/invalid
CheckoutPage->>User: Show error page
end
else SKU is "topup"
CheckoutPage->>BillingUtils: getCryptoTopupUrl({ teamSlug })
BillingUtils-->>CheckoutPage: Return topup URL or undefined
alt Topup URL exists
CheckoutPage->>Redirect: Redirect to topup URL
else Topup URL missing
CheckoutPage->>User: Show error page
end
else Other SKU
CheckoutPage->>BillingUtils: getBillingCheckoutUrl({ teamSlug, sku })
BillingUtils-->>CheckoutPage: Return checkout URL or undefined
alt Checkout URL exists
CheckoutPage->>Redirect: Redirect to checkout URL
else Checkout URL missing
CheckoutPage->>User: Show error page
end
end
Possibly related PRs
Suggested reviewers
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #7270 +/- ##
=======================================
Coverage 55.57% 55.57%
=======================================
Files 909 909
Lines 58681 58681
Branches 4167 4167
=======================================
Hits 32612 32612
Misses 25961 25961
Partials 108 108
🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
apps/dashboard/src/app/(app)/(stripe)/checkout/[team_slug]/[sku]/page.tsx (2)
22-42: Remove unreachable break statement.The
redirect()function throws/exits the execution, making thebreakstatement unreachable. While not harmful, it's dead code that should be removed for cleanliness.redirect(topupUrl); - break;
43-59: Remove unreachable break statement and consider enhanced validation.Similar to the topup case, the
breakstatement is unreachable afterredirect(). Additionally, consider validating the invoice ID format if there are specific requirements.redirect(invoice); - break;For the validation, if invoice IDs have a specific format (e.g., Stripe invoice IDs start with "in_"), you could add:
const invoiceId = (await props.searchParams).invoice_id; - if (!invoiceId) { + if (!invoiceId || typeof invoiceId !== 'string' || invoiceId.trim() === '') { return <StripeRedirectErrorPage errorMessage="Invalid invoice ID" />; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
apps/dashboard/src/app/(app)/(stripe)/checkout/[team_slug]/[sku]/page.tsx(2 hunks)apps/dashboard/src/app/(app)/(stripe)/utils/billing.ts(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/billing/components/credit-balance-section.client.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/billing/page.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/invoices/components/billing-history.tsx(4 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/invoices/page.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
apps/dashboard/src/app/(app)/(stripe)/checkout/[team_slug]/[sku]/page.tsx (3)
apps/dashboard/src/app/(app)/(stripe)/_components/StripeRedirectErrorPage.tsx (1)
StripeRedirectErrorPage(3-16)apps/dashboard/src/app/(app)/(stripe)/utils/billing.ts (3)
getCryptoTopupUrl(124-161)getInvoicePaymentUrl(163-199)getBillingCheckoutUrl(7-42)apps/dashboard/src/@/lib/billing.ts (1)
ProductSKU(2-16)
apps/dashboard/src/app/(app)/(stripe)/utils/billing.ts (2)
apps/dashboard/src/@/constants/public-envs.ts (1)
NEXT_PUBLIC_THIRDWEB_API_HOST(21-22)apps/dashboard/src/app/(app)/api/lib/getAuthToken.ts (1)
getAuthToken(6-14)
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Unit Tests
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Size
- GitHub Check: Lint Packages
- GitHub Check: Build Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (13)
apps/dashboard/src/app/(app)/(stripe)/utils/billing.ts (2)
134-137: LGTM! Improved URL construction consistency.The refactor to use the
URLconstructor instead of string interpolation enhances consistency with the newly addedgetInvoicePaymentUrlfunction and provides better URL validation.
163-199: New invoice payment function follows established patterns correctly.The
getInvoicePaymentUrlfunction implementation is consistent with existing billing utility functions:
- Proper authentication token handling
- Consistent error handling pattern
- Appropriate use of URL constructor
- Matching request/response structure
The function correctly integrates with the new crypto invoice payment workflow.
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/invoices/page.tsx (1)
52-52: LGTM! Prop addition enables crypto payment functionality.Adding the
teamSlugprop to theBillingHistorycomponent is necessary for constructing crypto payment links for invoices, as referenced in the component's updated implementation.apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/billing/page.tsx (1)
73-73: LGTM! Simplified conditional rendering improves UX.Removing the
showCreditBalancesearch parameter dependency makes the credit balance section consistently visible whenstripeCustomerIdexists, which aligns well with the enhanced crypto payment functionality.apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/billing/components/credit-balance-section.client.tsx (2)
19-19: LGTM! Clean import for crypto branding.The
ThirdwebMiniLogoimport is appropriately added to support the crypto payment branding enhancement.
123-124: LGTM! Enhanced button clearly indicates crypto payment option.The addition of the Thirdweb logo and updated text "Top Up With Crypto" provides clear visual indication of the payment method, improving user understanding and brand consistency.
apps/dashboard/src/app/(app)/(stripe)/checkout/[team_slug]/[sku]/page.tsx (2)
7-7: LGTM: Import addition supports new invoice payment functionality.The import of
getInvoicePaymentUrlcorrectly supports the new crypto invoice payment feature.
17-17: LGTM: SearchParams type updated for invoice payments.The addition of the optional
invoice_idparameter properly supports the new invoice payment flow.apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/invoices/components/billing-history.tsx (5)
21-21: LGTM: Imports added for new crypto payment functionality.The imports of
LinkandThirdwebMiniLogoproperly support the new crypto payment button implementation.Also applies to: 25-25
29-29: LGTM: TeamSlug prop enables crypto payment routing.The addition of the
teamSlugprop correctly provides the necessary context for constructing crypto payment URLs.
67-67: Excellent bug fix: Correct timestamp conversion for due date comparison.This fixes a critical bug where Stripe timestamps (seconds) were being compared directly with
Date.now()(milliseconds). The multiplication by 1000 correctly converts the Stripe timestamp to milliseconds for accurate comparison.
128-154: Well-implemented crypto payment option with fallback to card payments.The payment button implementation effectively provides both crypto and card payment options:
- Always shows crypto payment button for open invoices
- Conditionally shows card payment if hosted invoice URL is available
- Good use of appropriate icons and styling
- Proper external link handling with security attributes
The user experience is enhanced by offering multiple payment methods while maintaining consistency with the existing UI patterns.
163-163: Minor styling adjustment.Added spacing in the className for consistency.
apps/dashboard/src/app/(app)/(stripe)/checkout/[team_slug]/[sku]/page.tsx
Show resolved
Hide resolved
size-limit report 📦
|
Add Crypto Payment Option for Invoices
This PR adds the ability to pay invoices with cryptocurrency. It includes:
The implementation follows the same pattern as the existing crypto top-up functionality, creating a new
getInvoicePaymentUrlfunction that communicates with the backend API.Summary by CodeRabbit
New Features
Improvements
Bug Fixes