fix: Add smooth animations to invoice form fields using Framer Motion #186
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Fixes: RequestNetwork#52 - Replaced CSS-based AnimatedSection with Framer Motion animations - Added smooth transitions for Payment Currency field - Added smooth transitions for Wallet Address field - Added smooth transitions for Payment Details section - Added smooth transitions for Mainnet Warning Alert - Improved disabled styling for Crypto-to-fiat checkbox All form fields now have smooth fade and height animations when showing/hiding.
Contributor
WalkthroughPR introduces framer-motion library and integrates it into the invoice form component with AnimatedSection wrappers for collapsible UI sections. Refactors payment method handling with approval workflows, modals, crypto-to-fiat payment controls, and enhanced compliance-based messaging. Changes
Sequence DiagramsequenceDiagram
actor User
participant Form as Invoice Form
participant PaymentValidator as Payment Validator
participant ApprovalSystem as Approval System
participant Modal as Modal/Notification
User->>Form: Submit invoice form
Form->>PaymentValidator: Validate payment method
PaymentValidator-->>Form: Validation result
alt Payment approval required
Form->>ApprovalSystem: Request payment approval
ApprovalSystem-->>Form: Approval pending
Form->>Modal: Show approval-waiting modal
Modal-->>User: Display status + timeout
par Auto-approval Flow
ApprovalSystem->>ApprovalSystem: Process approval (with timeout)
ApprovalSystem-->>Form: Approval granted
Form->>Form: Auto-submit form
and User Interaction
User->>Modal: Wait or dismiss
end
else Payment approved or no approval needed
Form->>Form: Submit immediately
end
Form-->>User: Submission complete
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Organization UI Review profile: CHILL Plan: Pro ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (2)
🧰 Additional context used📓 Path-based instructions (1)**/*⚙️ CodeRabbit configuration file
Files:
🧠 Learnings (2)📓 Common learnings📚 Learning: 2025-05-19T13:00:48.790ZApplied to files:
🧬 Code graph analysis (1)src/components/invoice/invoice-form/invoice-form.tsx (4)
⏰ 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). (3)
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 |
Greptile SummaryThis PR adds smooth animations to the invoice form by integrating Framer Motion library. The implementation introduces an Key Changes:
Implementation Details: Considerations:
Confidence Score: 4/5
Important Files Changed
Sequence DiagramsequenceDiagram
participant User
participant Form
participant AnimatedSection
participant FramerMotion
participant DOM
User->>Form: Toggles checkbox (e.g., isRecurring)
Form->>AnimatedSection: show prop changes to true
AnimatedSection->>FramerMotion: AnimatePresence detects child mount
FramerMotion->>DOM: Apply initial state (height: 0, opacity: 0)
FramerMotion->>DOM: Animate to (height: auto, opacity: 1)
Note over FramerMotion,DOM: 300ms height transition<br/>200ms opacity transition
FramerMotion->>DOM: Inner div animates (opacity: 0 → 1, y: -10 → 0)
Note over FramerMotion,DOM: 200ms with 50ms delay
DOM->>User: Smooth reveal animation visible
User->>Form: Toggles checkbox off
Form->>AnimatedSection: show prop changes to false
AnimatedSection->>FramerMotion: AnimatePresence detects child unmount
FramerMotion->>DOM: Animate to exit state (height: 0, opacity: 0)
Note over FramerMotion,DOM: Content collapses smoothly
FramerMotion->>DOM: Remove element from DOM
DOM->>User: Smooth hide animation visible
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Additional Comments (1)
-
src/components/invoice/invoice-form/invoice-form.tsx, line 1057-1070 (link)logic: the wallet address field is now completely hidden when crypto-to-fiat is enabled, instead of being visible but disabled as before. This is a functional change from the previous behavior where users could still see the field with a disabled state and a message explaining why it wasn't needed.
Consider whether hiding the field completely is the desired UX, or if showing it in a disabled state provides better visual feedback to users about what happens when they toggle crypto-to-fiat.
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
2 files reviewed, 1 comment
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
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)
src/components/invoice/invoice-form/invoice-form.tsx (1)
454-462: Missingreturncauses immediate submission without waiting for approval.When the payer is not found in
paymentDetailsPayers, the code setswaitingForPaymentApprovaland links the payment method, but then falls through to line 467 which immediately callsonSubmit(data). The parallel branches at lines 445 and 452 correctly return early, but this else block does not.Proposed fix
} else { setShowPendingApprovalModal(true); setWaitingForPaymentApproval(true); await handleBankAccountSuccess({ success: true, message: "Payment method linked successfully", paymentDetails: selectedPaymentDetail.paymentDetails, }); + return; }
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (2)
package.json(1 hunks)src/components/invoice/invoice-form/invoice-form.tsx(9 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*
⚙️ CodeRabbit configuration file
**/*: - Only comment on issues that would block merging — ignore minor or stylistic concerns.
- Restrict feedback to errors, security risks, or functionality-breaking problems.
- Do not post comments on code style, formatting, or non-critical improvements.
- Keep reviews short: flag only issues that make the PR unsafe to merge.
- Limit review comments to 3–5 items maximum, unless additional blockers exist.
- Group similar issues into a single comment instead of posting multiple notes.
- Skip repetition — if a pattern repeats, mention it once at a summary level only.
- Do not add general suggestions; focus strictly on merge-blocking concerns.
- If there are no critical problems, respond with minimal approval (e.g., 'Looks good'). Do not add additional review.
- Avoid line-by-line commentary unless it highlights a critical bug or security hole.
- Highlight only issues that could cause runtime errors, data loss, or severe maintainability issues.
- Ignore minor optimization opportunities — focus solely on correctness and safety.
- Provide a top-level summary of critical blockers rather than detailed per-line notes.
- Comment only when the issue must be resolved before merge — otherwise, remain silent.
- When in doubt, err on the side of fewer comments — brevity and blocking issues only.
- Avoid posting any refactoring issues
Files:
src/components/invoice/invoice-form/invoice-form.tsxpackage.json
🧠 Learnings (2)
📓 Common learnings
Learnt from: bassgeta
Repo: RequestNetwork/easy-invoice PR: 168
File: src/components/payment-widget/README.md:29-31
Timestamp: 2025-10-28T12:17:14.899Z
Learning: The payment-widget component in src/components/payment-widget/ is an external component installed via ShadCN from the Request Network registry (https://ui.request.network). Its README and documentation should not be modified as it's maintained externally.
Learnt from: rodrigopavezi
Repo: RequestNetwork/easy-invoice PR: 45
File: src/components/invoice-form.tsx:451-453
Timestamp: 2025-05-20T12:59:44.665Z
Learning: In the Easy Invoice project, setTimeout is required when submitting a form after modal state changes in the crypto-to-fiat payment flow. Directly calling handleFormSubmit without setTimeout after closing modals and updating state causes issues.
Learnt from: bassgeta
Repo: RequestNetwork/easy-invoice PR: 168
File: src/components/payment-widget/context/payment-widget-context/payment-widget-provider.tsx:43-46
Timestamp: 2025-10-28T12:17:03.639Z
Learning: The payment widget components under src/components/payment-widget/ are installed via ShadCN from the Request Network registry and should not be modified locally to maintain compatibility with upstream.
📚 Learning: 2025-05-19T13:00:48.790Z
Learnt from: rodrigopavezi
Repo: RequestNetwork/easy-invoice PR: 45
File: src/components/invoice-form.tsx:316-319
Timestamp: 2025-05-19T13:00:48.790Z
Learning: The handleFormSubmit function in src/components/invoice-form.tsx correctly uses data.clientEmail from the form submission data to find matching payers, which is the proper implementation.
Applied to files:
src/components/invoice/invoice-form/invoice-form.tsx
🧬 Code graph analysis (1)
src/components/invoice/invoice-form/invoice-form.tsx (4)
src/lib/constants/currencies.ts (2)
MAINNET_CURRENCIES(2-18)MainnetCurrency(42-42)src/components/ui/label.tsx (1)
Label(26-26)src/components/ui/button.tsx (1)
Button(56-56)src/components/ui/input.tsx (1)
Input(22-22)
⏰ 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). (3)
- GitHub Check: Lint
- GitHub Check: Build
- GitHub Check: Greptile Review
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
fixes : #52
added smooth animation while creating invoice using framer motion
Summary by CodeRabbit
Release Notes
✏️ Tip: You can customize this high-level summary in your review settings.