Feat/add payment processing component#350
Feat/add payment processing component#350HarshVz wants to merge 12 commits intododopayments:mainfrom
Conversation
Adds a new payment processing component that displays a full-screen loading state during payment transactions. Features: - Full-screen overlay with animated spinner - Customizable messaging (title, description, warning) - Security indicators with icon support - Responsive design with dark/light mode support Files: - Component: src/registry/billingsdk/payment-processing.tsx - Demo: src/registry/billingsdk/demo/payment-processing-demo.tsx - Demo copy: src/components/payment-processing-demo.tsx - Documentation: content/docs/components/payment-processing/index.mdx - Registry: registry.json (added payment-processing entry) - Docs: content/docs/meta.json (navigation update) - MDX: src/mdx-components.tsx (component registration)
|
@HarshVz is attempting to deploy a commit to the Dodo Payments Team on Vercel. A member of the Team first needs to authorize it. |
|
Warning Rate limit exceeded
⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (8)
📝 WalkthroughWalkthroughAdds a new Payment Processing component, a client demo, MDX documentation page, and registry/public manifest entries to expose the component and demo throughout docs and registries. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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: 5
🤖 Fix all issues with AI Agents
In @public/r/payment-processing.json:
- Around line 15-20: The demo imports setTimeout from the Node "timers" module
and uses it incorrectly with async/await; remove the import line that imports
setTimeout, then fix PaymentProcessingDemo by updating handleProcessing to
either return a Promise that resolves after a browser setTimeout (so await
works) or make handleProcessing synchronous and drop async/await in
onClickHandler; specifically edit the import block to remove the timers import
and update the handleProcessing and onClickHandler functions so setTimeout is
called as the global browser function and state is cleared inside the timeout
(use a Promise wrapper if you want to await completion).
In @src/components/payment-processing-demo.tsx:
- Line 5: The file wrongly imports setTimeout from the Node.js 'timers' module;
remove the line "import { setTimeout } from 'timers';" and rely on the
browser/global setTimeout instead, updating any references that assumed the
imported symbol (e.g., calls in this component) to use the global function
without an import.
- Around line 10-19: handleProcessing currently uses setTimeout without
returning a Promise so awaiting it in onClickHandler does nothing; change
handleProcessing to return a Promise that resolves after the delay (e.g. return
new Promise(resolve => setTimeout(resolve, 8000))) and move setLoading(false) to
after the await in onClickHandler so flow is: setLoading(true); await
handleProcessing(); setLoading(false). Use the existing function names
handleProcessing and onClickHandler and keep setLoading calls as described.
In @src/registry/billingsdk/demo/payment-processing-demo.tsx:
- Line 5: The file contains a Node.js-specific import "import { setTimeout }
from 'timers';" which will break in the browser; remove that import line and
rely on the global setTimeout instead (search for the import of setTimeout in
payment-processing-demo.tsx and delete it).
- Around line 10-19: The handleProcessing function is using setTimeout but is
async and awaited by onClickHandler, which is ineffective because setTimeout
doesn't return a Promise; fix by making handleProcessing return a Promise that
resolves after the timeout (e.g., replace the setTimeout call with a Promise
that resolves after 8000ms) so await handleProcessing() actually waits, or
remove the async/await and directly call setLoading(true) then set a setTimeout
to setLoading(false) inside onClickHandler; update the functions
handleProcessing and onClickHandler accordingly.
🧹 Nitpick comments (2)
src/components/payment-processing-demo.tsx (1)
24-24: Simplify the onClick handler.The async arrow function wrapper is unnecessary here since
onClickHandlercan be called directly.🔎 Proposed fix
<Button - onClick={async () => await onClickHandler()} + onClick={onClickHandler} className={`${loading ? "hidden" : "block"}`} >src/registry/billingsdk/demo/payment-processing-demo.tsx (1)
23-25: Simplify redundant async/await wrapper.The
onClickhandler unnecessarily wrapsonClickHandlerin an async function and awaits it. SinceonClickHandleris already async, you can pass it directly.🔎 Proposed fix
<Button - onClick={async () => await onClickHandler()} + onClick={onClickHandler} className={`${loading ? "hidden" : "block"}`} >
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
content/docs/components/payment-processing/index.mdxcontent/docs/meta.jsonpublic/r/all.jsonpublic/r/payment-processing.jsonpublic/r/registry.jsonregistry.jsonsrc/components/payment-processing-demo.tsxsrc/mdx-components.tsxsrc/registry/billingsdk/demo/payment-processing-demo.tsxsrc/registry/billingsdk/payment-processing.tsx
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: rajdesai17
Repo: dodopayments/billingsdk PR: 278
File: src/registry/billingsdk/demo/limited-offer-dialog-demo.tsx:1-55
Timestamp: 2025-10-03T13:12:09.970Z
Learning: In the dodopayments/billingsdk repository, demo files should be duplicated in both `src/components/` and `src/registry/billingsdk/demo/` directories with identical implementations. Do not suggest re-exporting or consolidating these demo files.
📚 Learning: 2025-10-03T13:12:09.970Z
Learnt from: rajdesai17
Repo: dodopayments/billingsdk PR: 278
File: src/registry/billingsdk/demo/limited-offer-dialog-demo.tsx:1-55
Timestamp: 2025-10-03T13:12:09.970Z
Learning: In the dodopayments/billingsdk repository, demo files should be duplicated in both `src/components/` and `src/registry/billingsdk/demo/` directories with identical implementations. Do not suggest re-exporting or consolidating these demo files.
Applied to files:
src/mdx-components.tsxpublic/r/registry.jsonsrc/registry/billingsdk/demo/payment-processing-demo.tsxpublic/r/payment-processing.jsonsrc/components/payment-processing-demo.tsxregistry.json
🧬 Code graph analysis (3)
src/registry/billingsdk/payment-processing.tsx (1)
src/components/ui/separator.tsx (1)
Separator(28-28)
src/registry/billingsdk/demo/payment-processing-demo.tsx (2)
src/components/payment-processing-demo.tsx (1)
PaymentProcessingDemo(8-32)src/registry/billingsdk/payment-processing.tsx (1)
PaymentProcessing(13-55)
src/components/payment-processing-demo.tsx (2)
src/registry/billingsdk/demo/payment-processing-demo.tsx (1)
PaymentProcessingDemo(8-32)src/registry/billingsdk/payment-processing.tsx (1)
PaymentProcessing(13-55)
🔇 Additional comments (10)
content/docs/meta.json (1)
47-47: LGTM!The documentation page entry is correctly added to the navigation and properly positioned within the Payment Processing section.
public/r/all.json (1)
32-32: LGTM!The registry dependency is correctly added to the All Components collection.
src/registry/billingsdk/payment-processing.tsx (2)
13-20: Verify the defaultstatus = truebehavior.The component defaults to showing the processing overlay (
status = true). This means when instantiated without props, it will immediately display the full-screen loading state. Typically, loading/processing overlays default to hidden (status = false) and are explicitly shown when needed.Please confirm this is the intended behavior for your use case.
21-55: LGTM!The component implementation is clean and well-structured with proper:
- Conditional rendering based on status
- Responsive design classes
- Customizable props for all UI elements
- Proper TypeScript typing
- Dark/light mode support via Tailwind classes
public/r/registry.json (2)
51-51: LGTM!The payment-processing component is correctly added to the All Components registry dependencies.
905-924: LGTM!The registry block entry is properly structured with:
- Correct component and demo file paths
- Appropriate dependencies (lucide-react for icons)
- Correct registryDependencies (card, separator, utils)
- Follows the established pattern of other components in the registry
registry.json (2)
51-51: LGTM! Correct registry integration.The new payment-processing component is properly added to the "all" components aggregation list.
904-924: LGTM! Well-structured registry entry.The payment-processing block follows the established registry pattern with appropriate dependencies and file targets.
src/mdx-components.tsx (1)
52-52: LGTM! Proper MDX component registration.The PaymentProcessingDemo component is correctly imported and exposed in the MDX components registry, following the established pattern for other demo components.
Also applies to: 108-108
content/docs/components/payment-processing/index.mdx (1)
1-171: LGTM! Comprehensive and well-structured documentation.The documentation provides clear installation instructions, usage examples, a complete props table, and helpful best practices. The structure follows the established pattern for other BillingSDK components.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (5)
src/registry/billingsdk/demo/payment-processing-demo.tsx (2)
25-25: Simplify: Remove redundant async wrapper.The
async () => await onClickHandler()wrapper is unnecessary sinceonClickHandleris already async and React'sonClickdoesn't require awaiting the handler.🔎 Proposed fix
- onClick={async () => await onClickHandler()} + onClick={onClickHandler}
26-26: Simplify: Remove unnecessary template literal.The template literal adds no value when the entire className is determined by a ternary expression.
🔎 Proposed fix
- className={`${loading ? "hidden" : "block"}`} + className={loading ? "hidden" : "block"}src/components/payment-processing-demo.tsx (2)
25-25: Simplify: Remove redundant async wrapper.The
async () => await onClickHandler()wrapper is unnecessary sinceonClickHandleris already async and React'sonClickdoesn't require awaiting the handler.🔎 Proposed fix
- onClick={async () => await onClickHandler()} + onClick={onClickHandler}
26-26: Simplify: Remove unnecessary template literal.The template literal adds no value when the entire className is determined by a ternary expression.
🔎 Proposed fix
- className={`${loading ? "hidden" : "block"}`} + className={loading ? "hidden" : "block"}public/r/payment-processing.json (1)
15-20: Optional improvements in embedded demo code.The embedded
PaymentProcessingDemocontains the same optional simplifications noted in the standalone demo files:
- The
onClick={async () => await onClickHandler()}wrapper is redundant- The template literal in
classNameis unnecessaryThese refinements would be applied by updating the source demo files, which will then be reflected in this registry content.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
public/r/payment-processing.jsonsrc/components/payment-processing-demo.tsxsrc/registry/billingsdk/demo/payment-processing-demo.tsx
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: rajdesai17
Repo: dodopayments/billingsdk PR: 278
File: src/registry/billingsdk/demo/limited-offer-dialog-demo.tsx:1-55
Timestamp: 2025-10-03T13:12:09.970Z
Learning: In the dodopayments/billingsdk repository, demo files should be duplicated in both `src/components/` and `src/registry/billingsdk/demo/` directories with identical implementations. Do not suggest re-exporting or consolidating these demo files.
📚 Learning: 2025-10-03T13:12:09.970Z
Learnt from: rajdesai17
Repo: dodopayments/billingsdk PR: 278
File: src/registry/billingsdk/demo/limited-offer-dialog-demo.tsx:1-55
Timestamp: 2025-10-03T13:12:09.970Z
Learning: In the dodopayments/billingsdk repository, demo files should be duplicated in both `src/components/` and `src/registry/billingsdk/demo/` directories with identical implementations. Do not suggest re-exporting or consolidating these demo files.
Applied to files:
src/components/payment-processing-demo.tsxsrc/registry/billingsdk/demo/payment-processing-demo.tsxpublic/r/payment-processing.json
🧬 Code graph analysis (2)
src/components/payment-processing-demo.tsx (1)
src/registry/billingsdk/payment-processing.tsx (1)
PaymentProcessing(13-55)
src/registry/billingsdk/demo/payment-processing-demo.tsx (1)
src/registry/billingsdk/payment-processing.tsx (1)
PaymentProcessing(13-55)
🔇 Additional comments (3)
src/registry/billingsdk/demo/payment-processing-demo.tsx (1)
9-20: LGTM! Async logic correctly implemented.The Promise-wrapped
setTimeoutand proper async/await flow correctly address the issues from previous reviews. The 8-second processing simulation works as intended.src/components/payment-processing-demo.tsx (1)
9-20: LGTM! Async logic correctly implemented.The Promise-wrapped
setTimeoutand proper async/await flow correctly address the issues from previous reviews. The processing simulation works as intended.public/r/payment-processing.json (1)
1-14: LGTM! Registry metadata correctly configured.The schema, dependencies, and component content are properly structured. The
lucide-reactdependency and registry dependencies (card,separator,utils) align with the component's imports.
|
@tsahil01 can you please review this PR! |
registry.json
Outdated
| } | ||
| ], | ||
| "dependencies": ["lucide-react"], | ||
| "registryDependencies": ["card", "separator", "utils"] |
There was a problem hiding this comment.
this component is not using card, can you remove it from registryDependencies?
| "use client"; | ||
|
|
||
| import { useState } from "react"; | ||
| import PaymentProcessing from "@/registry/billingsdk/payment-processing"; |
There was a problem hiding this comment.
We generally create the same component in the registry and simply export it from that file.
Please refer to the other demo files in /components and see how the main component is being imported.
There was a problem hiding this comment.
alright, sorry i didnt check it. i have fixed it now, can you review it again?
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@public/r/payment-processing.json`:
- Around line 11-17: The PaymentProcessing component is only a named export but
PaymentProcessingDemo imports it as a default, causing a runtime import error;
fix by making the exports consistent—either add a default export for the
component (e.g., export default PaymentProcessing or change the function to
export default function PaymentProcessing) in the PaymentProcessing component,
or change the import in PaymentProcessingDemo to a named import (import {
PaymentProcessing } from "...") so PaymentProcessing and PaymentProcessingDemo
use the same export style.
ℹ️ Review info
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
public/r/payment-processing.jsonpublic/r/pricing-table-five.jsonpublic/r/registry.jsonregistry.jsonsrc/components/billingsdk/payment-processing.tsxsrc/components/payment-processing-demo.tsxsrc/registry/billingsdk/payment-processing.tsx
✅ Files skipped from review due to trivial changes (1)
- public/r/pricing-table-five.json
🚧 Files skipped from review as they are similar to previous changes (3)
- src/registry/billingsdk/payment-processing.tsx
- registry.json
- src/components/payment-processing-demo.tsx
HarshVz
force-pushed
the
feat/add-payment-processing-component
branch
from
9790ecb to
02f2227
Compare
|
@tsahil01 sir can you please review this again? |
3 participants
Add Payment Processing Component
Summary
Adds a new Payment Processing component that displays a full-screen loading state during payment transactions with customizable messaging and security indicators.
Changes
Files Added:
src/registry/billingsdk/payment-processing.tsxsrc/registry/billingsdk/demo/payment-processing-demo.tsxcontent/docs/components/payment-processing/index.mdxpublic/r/payment-processing.jsonFiles Modified:
registry.json- Added component entrycontent/docs/meta.json- Updated navigationsrc/mdx-components.tsx- Registered demo componentGeneric.PnP.Monitor.2026-01-07.00.21.34.mp4
Installation
Usage
How to Test
npm cinpm run typechecknpm run buildnpm run dev→ Navigate to/docs/components/payment-processingChecklist
Suggestion #246
Suggestion #335
Summary by CodeRabbit
New Features
Documentation