Enhance payment successful page #3131
Conversation
WalkthroughA new API route for generating downloadable HTML invoices for workspace subscriptions was introduced. The billing success page was updated to fetch subscription pricing more precisely, implement a 24-hour expiration for the receipt download link, and enhance UI interactivity with animations and improved feedback for expired links. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant SuccessPage
participant API_Route
participant Supabase
User->>SuccessPage: Visits billing success page
SuccessPage->>Supabase: Fetch subscription & price data
SuccessPage->>User: Displays subscription info, download receipt button
User->>SuccessPage: Clicks "Download Receipt"
alt Link not expired
SuccessPage->>API_Route: GET /api/billing/[wsId]/invoice
API_Route->>Supabase: Query subscription & product price
Supabase-->>API_Route: Return subscription data
API_Route->>API_Route: Generate HTML invoice
API_Route-->>SuccessPage: Return HTML invoice as attachment
SuccessPage-->>User: Prompts invoice download
else Link expired
SuccessPage-->>User: Disables button, shows expiration notice
end
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
apps/web/src/app/api/billing/[wsId]/invoice/route.tsOops! Something went wrong! :( ESLint: 9.29.0 Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@typescript-eslint/parser' imported from /eslint.config.mjs 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (9)
✨ Finishing Touches
🧪 Generate Unit Tests
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. 🪧 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. |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @phatgg221, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
This pull request significantly enhances the post-payment experience by revamping the billing success page with modern UI/UX elements and introducing a robust system for managing and generating payment receipts. Users will now benefit from a more interactive success confirmation and the ability to download a detailed, time-sensitive HTML invoice directly from the application.
Highlights
- Enhanced Billing Success Page UI/UX: I've updated the billing success page (
page.tsx) with new animations and interactive hover effects for various elements, including the header, payment summary, and 'What's Next' sections, to provide a more dynamic and engaging user experience. - Receipt Download Link Expiration: The success page now includes logic to calculate and display whether the payment receipt download link has expired (24 hours after payment). The 'Download Receipt' button is dynamically enabled or disabled based on this expiration status, with a clear notice to the user.
- Dynamic HTML Invoice Generation API: A new API endpoint (
invoice/route.ts) has been introduced to generate and serve a styled HTML invoice/receipt. This endpoint fetches subscription details and constructs a comprehensive, downloadable HTML document, ensuring users can easily obtain their payment records. - Improved Subscription Data Handling: Both the success page and the new invoice API now fetch more granular subscription data, specifically including the
pricefromworkspace_subscription_products, to ensure accurate display of payment amounts.
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
There was a problem hiding this comment.
Code Review
This pull request introduces enhancements to the billing success page, including UI animations and a new feature to download an HTML invoice. The changes aim to improve user experience and provide essential billing documentation.
Key feedback points include:
- Critical: There are significant inconsistencies in how product prices are handled and displayed between the success page and the new invoice generation logic. This needs immediate attention to ensure financial accuracy.
- High: The
subscriptionobject in the invoice generation API route lacks strong typing (any), which can hide bugs and make maintenance harder. - Medium: Several areas could be improved for robustness and clarity, such as the handling of API route parameters, fallback logic for missing data, placeholder links, and hardcoded values in the invoice.
Addressing these points, especially the critical ones related to price consistency, will greatly improve the quality and reliability of this feature.
apps/web/src/app/[locale]/(dashboard)/[wsId]/billing/success/page.tsx
Outdated
Show resolved
Hide resolved
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (1)
apps/web/src/app/api/billing/[wsId]/invoice/route.ts (1)
58-58: Consider extracting CSS to external file for maintainability.The embedded CSS spans over 300 lines, making the function difficult to read and maintain. Consider extracting it to a separate template file or CSS file.
This would improve:
- Code readability and maintainability
- Separation of concerns
- Potential for CSS reuse across other invoice templates
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/web/src/app/[locale]/(dashboard)/[wsId]/billing/success/page.tsx(7 hunks)apps/web/src/app/api/billing/[wsId]/invoice/route.ts(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (8)
apps/web/src/app/api/billing/[wsId]/invoice/route.ts (2)
16-16: Verify the database query structure for consistency.The query selects from
workspace_subscription_products(price)which should match the data structure used in the success page for consistency.Let me verify the database schema to ensure this join is correct:
#!/bin/bash # Search for similar database queries in the codebase rg -A 5 -B 5 "workspace_subscription_products.*price" ast-grep --pattern 'workspace_subscription_products($_)'
32-32: Consider security implications of dynamic filename.Using the subscription ID directly in the filename could potentially expose sensitive information or lead to path traversal issues if not properly sanitized.
Let me verify if there are any filename sanitization utilities in the codebase:
#!/bin/bash # Search for filename sanitization patterns rg -A 3 -B 3 "filename.*sanitiz|sanitiz.*filename" rg -A 3 -B 3 "Content-Disposition.*attachment"apps/web/src/app/[locale]/(dashboard)/[wsId]/billing/success/page.tsx (6)
21-21: LGTM! Query structure matches the API route for consistency.The database query has been properly updated to include the nested product pricing data, ensuring consistency with the invoice generation API.
47-52: LGTM! Well-implemented expiration logic.The 24-hour expiration calculation is correctly implemented using
date-fnsfunctions. The logic properly handles edge cases with fallback to current date.
213-233: LGTM! Excellent implementation of conditional button states.The conditional rendering properly handles both expired and active states with appropriate styling and user feedback. The disabled state provides clear visual indication.
139-158: LGTM! Well-designed expiration notice with clear user communication.The expiration notice provides excellent user experience with:
- Clear visual indication using Clock icon and amber styling
- Conditional messaging based on expiration status
- Formatted expiration date for transparency
75-247: LGTM! Excellent UI animation implementation.The progressive animation delays create a smooth, professional user experience. The hover effects and transitions are well-implemented and enhance interactivity without being overwhelming.
228-228: Verify API route path consistency.Ensure the API route path matches the actual file structure and routing configuration.
#!/bin/bash # Verify the API route exists at the expected path fd -t f "route.ts" apps/web/src/app/api/billing # Check for any route configuration files fd -t f "route.*" apps/web/src/app/api/billing
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #3131 +/- ##
==========================================
- Coverage 0.80% 0.80% -0.01%
==========================================
Files 2539 2540 +1
Lines 323861 324382 +521
Branches 3041 3042 +1
==========================================
Hits 2622 2622
- Misses 319072 319592 +520
- Partials 2167 2168 +1 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (4)
apps/web/src/app/[locale]/(dashboard)/[wsId]/billing/success/page.tsx (4)
47-52: Address the fallback date handling issue.The fallback to
new Date()whensubscription?.created_atis unavailable creates misleading expiration information for users. Consider displaying an error message or specific notice when subscription data is incomplete.- const createdAt = subscription?.created_at - ? new Date(subscription.created_at) - : new Date(); + const createdAt = subscription?.created_at + ? new Date(subscription.created_at) + : null; + + if (!createdAt) { + // Handle missing creation date appropriately + return <div>Unable to determine receipt availability</div>; + }
161-161: Fix conflicting duration classes.There are conflicting
durationclasses (duration-300andduration-700) in the same className string. The latter will override the former.- <div className="mb-8 rounded-lg border border-border bg-card p-8 shadow-sm transition-all delay-1000 duration-300 duration-700 animate-in slide-in-from-bottom-6 hover:scale-[1.02] hover:shadow-lg dark:bg-card/80"> + <div className="mb-8 rounded-lg border border-border bg-card p-8 shadow-sm transition-all delay-1000 duration-700 animate-in slide-in-from-bottom-6 hover:scale-[1.02] hover:shadow-lg dark:bg-card/80">
57-58: Critical: Verify pricing calculation consistency.This change from
subscription.price / 100tosubscription.workspace_subscription_products.pricerepresents a significant shift in how pricing is calculated. The new approach assumes:
workspace_subscription_products.priceis stored in dollars (not cents)- The relationship is properly structured (not an array)
Additionally, null safety is still missing:
- amount: subscription.workspace_subscription_products.price + amount: subscription.workspace_subscription_products?.price
251-252: Update placeholder support links.The support team and help center links still use placeholder
/#hrefs, which don't provide functional navigation.- href="/#" + href="/support"- href="/#" + href="/help"Consider adding functional URLs or removing the links if the pages aren't ready.
Also applies to: 258-259
🧹 Nitpick comments (1)
apps/web/src/app/[locale]/(dashboard)/[wsId]/billing/success/page.tsx (1)
75-90: Enhance animation implementation.The animations look good, but there are some optimization opportunities:
- Multiple
durationclasses on line 90 may conflict- Consider using CSS custom properties for consistent timing
- <div className="mb-8 rounded-lg border border-border bg-card p-8 shadow-sm transition-all delay-700 duration-700 animate-in slide-in-from-bottom-6 hover:scale-[1.02] hover:shadow-lg dark:bg-card/80"> + <div className="mb-8 rounded-lg border border-border bg-card p-8 shadow-sm transition-all delay-700 duration-500 animate-in slide-in-from-bottom-6 hover:scale-[1.02] hover:shadow-lg dark:bg-card/80">
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/web/src/app/[locale]/(dashboard)/[wsId]/billing/success/page.tsx(7 hunks)
🧰 Additional context used
🪛 GitHub Check: codecov/patch
apps/web/src/app/[locale]/(dashboard)/[wsId]/billing/success/page.tsx
[warning] 6-6: apps/web/src/app/[locale]/(dashboard)/[wsId]/billing/success/page.tsx#L6
Added line #L6 was not covered by tests
[warning] 10-10: apps/web/src/app/[locale]/(dashboard)/[wsId]/billing/success/page.tsx#L10
Added line #L10 was not covered by tests
[warning] 21-21: apps/web/src/app/[locale]/(dashboard)/[wsId]/billing/success/page.tsx#L21
Added line #L21 was not covered by tests
[warning] 47-53: apps/web/src/app/[locale]/(dashboard)/[wsId]/billing/success/page.tsx#L47-L53
Added lines #L47 - L53 were not covered by tests
[warning] 57-58: apps/web/src/app/[locale]/(dashboard)/[wsId]/billing/success/page.tsx#L57-L58
Added lines #L57 - L58 were not covered by tests
[warning] 75-77: apps/web/src/app/[locale]/(dashboard)/[wsId]/billing/success/page.tsx#L75-L77
Added lines #L75 - L77 were not covered by tests
[warning] 80-80: apps/web/src/app/[locale]/(dashboard)/[wsId]/billing/success/page.tsx#L80
Added line #L80 was not covered by tests
[warning] 83-83: apps/web/src/app/[locale]/(dashboard)/[wsId]/billing/success/page.tsx#L83
Added line #L83 was not covered by tests
[warning] 90-90: apps/web/src/app/[locale]/(dashboard)/[wsId]/billing/success/page.tsx#L90
Added line #L90 was not covered by tests
[warning] 96-96: apps/web/src/app/[locale]/(dashboard)/[wsId]/billing/success/page.tsx#L96
Added line #L96 was not covered by tests
[warning] 102-102: apps/web/src/app/[locale]/(dashboard)/[wsId]/billing/success/page.tsx#L102
Added line #L102 was not covered by tests
[warning] 108-108: apps/web/src/app/[locale]/(dashboard)/[wsId]/billing/success/page.tsx#L108
Added line #L108 was not covered by tests
[warning] 116-116: apps/web/src/app/[locale]/(dashboard)/[wsId]/billing/success/page.tsx#L116
Added line #L116 was not covered by tests
[warning] 122-122: apps/web/src/app/[locale]/(dashboard)/[wsId]/billing/success/page.tsx#L122
Added line #L122 was not covered by tests
[warning] 128-128: apps/web/src/app/[locale]/(dashboard)/[wsId]/billing/success/page.tsx#L128
Added line #L128 was not covered by tests
[warning] 130-130: apps/web/src/app/[locale]/(dashboard)/[wsId]/billing/success/page.tsx#L130
Added line #L130 was not covered by tests
[warning] 138-159: apps/web/src/app/[locale]/(dashboard)/[wsId]/billing/success/page.tsx#L138-L159
Added lines #L138 - L159 were not covered by tests
[warning] 161-161: apps/web/src/app/[locale]/(dashboard)/[wsId]/billing/success/page.tsx#L161
Added line #L161 was not covered by tests
[warning] 166-167: apps/web/src/app/[locale]/(dashboard)/[wsId]/billing/success/page.tsx#L166-L167
Added lines #L166 - L167 were not covered by tests
[warning] 177-178: apps/web/src/app/[locale]/(dashboard)/[wsId]/billing/success/page.tsx#L177-L178
Added lines #L177 - L178 were not covered by tests
[warning] 188-189: apps/web/src/app/[locale]/(dashboard)/[wsId]/billing/success/page.tsx#L188-L189
Added lines #L188 - L189 were not covered by tests
[warning] 203-207: apps/web/src/app/[locale]/(dashboard)/[wsId]/billing/success/page.tsx#L203-L207
Added lines #L203 - L207 were not covered by tests
[warning] 209-209: apps/web/src/app/[locale]/(dashboard)/[wsId]/billing/success/page.tsx#L209
Added line #L209 was not covered by tests
[warning] 213-238: apps/web/src/app/[locale]/(dashboard)/[wsId]/billing/success/page.tsx#L213-L238
Added lines #L213 - L238 were not covered by tests
[warning] 240-240: apps/web/src/app/[locale]/(dashboard)/[wsId]/billing/success/page.tsx#L240
Added line #L240 was not covered by tests
[warning] 247-247: apps/web/src/app/[locale]/(dashboard)/[wsId]/billing/success/page.tsx#L247
Added line #L247 was not covered by tests
[warning] 251-252: apps/web/src/app/[locale]/(dashboard)/[wsId]/billing/success/page.tsx#L251-L252
Added lines #L251 - L252 were not covered by tests
[warning] 258-259: apps/web/src/app/[locale]/(dashboard)/[wsId]/billing/success/page.tsx#L258-L259
Added lines #L258 - L259 were not covered by tests
⏰ Context from checks skipped due to timeout of 90000ms (7)
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: Deploy-Preview
- GitHub Check: Deploy-Preview
- GitHub Check: Verify generated types
- GitHub Check: Deploy-Preview
- GitHub Check: Deploy-Preview
- GitHub Check: Deploy-Preview
🔇 Additional comments (4)
apps/web/src/app/[locale]/(dashboard)/[wsId]/billing/success/page.tsx (4)
6-6: LGTM - New imports for enhanced functionality.The
Clockicon anddate-fnsutilities are properly imported to support the new download link expiration feature.Also applies to: 10-10
138-158: Well-implemented expiration notice feature.The download link expiration notice provides clear user feedback with appropriate conditional messaging and styling. The 24-hour expiration window is clearly communicated.
213-233: Excellent conditional download functionality.The implementation properly handles expired download links by:
- Disabling the button when expired
- Providing clear visual feedback
- Using appropriate ARIA attributes for accessibility
The download link points to the correct API endpoint when active.
21-21: Verify the subscription products data structure.The query now selects
workspace_subscription_products(price)which suggests a related table. This change aligns with the pricing calculation update but needs verification.Please verify the data structure returned by this query:
#!/bin/bash # Description: Search for workspace_subscription_products table definition and usage # Expected: Confirm if it's a one-to-one or one-to-many relationship # Search for table schema or type definitions rg -A 10 "workspace_subscription_products" --type ts # Search for other usages of this relationship ast-grep --pattern 'workspace_subscription_products'
vhpx
changed the title
Summary by CodeRabbit
New Features
UI Enhancements