Add payment confirmation dialog for exceeding invoice amount #15251
Conversation
WalkthroughAdds five English localization keys and implements a payment-exceeds-invoice check in PaymentReconciliationSheet that shows a confirmation dialog with invoice total, entered amount, and the difference; submission is paused until user confirms. Changes
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
Pull request overview
This PR adds a confirmation dialog when a payment amount exceeds the invoice total by more than 1 currency unit, helping prevent accidental overpayments while allowing small decimal differences to proceed without interruption.
Changes:
- Added warning dialog that triggers when payment exceeds invoice by >1 unit
- Displays invoice total, payment amount, and difference for user verification
- Added new i18n strings for the warning dialog messages
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/pages/Facility/billing/PaymentReconciliationSheet.tsx | Implements payment validation logic and confirmation dialog with state management for pending form data |
| public/locale/en.json | Adds i18n strings for payment warning dialog text and buttons |
| const [pendingFormData, setPendingFormData] = useState<z.infer< | ||
| typeof formSchema | ||
| > | null>(null); | ||
| useShortcutSubContext(); | ||
|
|
||
| const formSchema = createFormSchema(); |
There was a problem hiding this comment.
The formSchema is defined after these state declarations (at line 187), creating a temporal dead zone issue. The type reference z.infer<typeof formSchema> will fail because formSchema doesn't exist yet at this point in the code. Move the state declarations after the formSchema definition.
| const [pendingFormData, setPendingFormData] = useState<z.infer< | |
| typeof formSchema | |
| > | null>(null); | |
| useShortcutSubContext(); | |
| const formSchema = createFormSchema(); | |
| const formSchema = createFormSchema(); | |
| const [pendingFormData, setPendingFormData] = useState<z.infer< | |
| typeof formSchema | |
| > | null>(null); | |
| useShortcutSubContext(); |
| if ( | ||
| !isCreditNote && | ||
| invoice && | ||
| invoice.total_gross && | ||
| data.amount && | ||
| new Decimal(data.amount) | ||
| .minus(new Decimal(invoice.total_gross)) | ||
| .greaterThan(1) | ||
| ) { |
There was a problem hiding this comment.
The threshold value 1 is a magic number without context. Consider extracting this to a named constant like PAYMENT_EXCESS_THRESHOLD with a comment explaining it represents 1 currency unit, making the business rule explicit and easier to maintain.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@src/pages/Facility/billing/PaymentReconciliationSheet.tsx`:
- Around line 181-184: Extract a named type for the form schema and use it for
pendingFormData to improve readability: define a type alias like
PaymentReconciliationFormData using z.infer<ReturnType<typeof createFormSchema>>
(place this alias near the createFormSchema definition) and then change the
pendingFormData state to use PaymentReconciliationFormData | null instead of
z.infer<typeof formSchema>; update any other references to the anonymous
inferred type to use the new alias (symbols to touch: createFormSchema,
formSchema, pendingFormData).
- Around line 262-274: The overpayment threshold is hardcoded as 1 in the
comparison inside PaymentReconciliationSheet; extract this magic number into a
clearly named constant (e.g., OVERPAYMENT_THRESHOLD) and use that constant in
the Decimal comparison (new Decimal(data.amount).minus(new
Decimal(invoice.total_gross)).greaterThan(new Decimal(OVERPAYMENT_THRESHOLD)) or
initialize the constant as a Decimal) so the business rule is explicit and
easier to change; update any related logic that references this value (the if
that calls setPendingFormData and setShowExceedsWarning) to use the new
constant.
| const [showExceedsWarning, setShowExceedsWarning] = useState(false); | ||
| const [pendingFormData, setPendingFormData] = useState<z.infer< | ||
| typeof formSchema | ||
| > | null>(null); |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider extracting the form schema type for clarity.
The type z.infer<typeof formSchema> references formSchema which is defined below (line 187). While TypeScript resolves this correctly at compile time, it reduces readability. Consider extracting the type near createFormSchema:
type PaymentReconciliationFormData = z.infer<ReturnType<typeof createFormSchema>>;Then use PaymentReconciliationFormData | null for pendingFormData.
🤖 Prompt for AI Agents
In `@src/pages/Facility/billing/PaymentReconciliationSheet.tsx` around lines 181 -
184, Extract a named type for the form schema and use it for pendingFormData to
improve readability: define a type alias like PaymentReconciliationFormData
using z.infer<ReturnType<typeof createFormSchema>> (place this alias near the
createFormSchema definition) and then change the pendingFormData state to use
PaymentReconciliationFormData | null instead of z.infer<typeof formSchema>;
update any other references to the anonymous inferred type to use the new alias
(symbols to touch: createFormSchema, formSchema, pendingFormData).
| if ( | ||
| !isCreditNote && | ||
| invoice && | ||
| invoice.total_gross && | ||
| data.amount && | ||
| new Decimal(data.amount) | ||
| .minus(new Decimal(invoice.total_gross)) | ||
| .greaterThan(1) | ||
| ) { | ||
| setPendingFormData(data); | ||
| setShowExceedsWarning(true); | ||
| return; | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider extracting the threshold as a named constant.
The hardcoded 1 represents the minimum overpayment amount that triggers the warning dialog. Extracting it as a named constant improves readability and makes the business rule explicit:
♻️ Suggested refactor
+const OVERPAYMENT_WARNING_THRESHOLD = 1; // Warn when payment exceeds invoice by more than 1 currency unit
+
// Then in handleSubmit:
- .greaterThan(1)
+ .greaterThan(OVERPAYMENT_WARNING_THRESHOLD)🤖 Prompt for AI Agents
In `@src/pages/Facility/billing/PaymentReconciliationSheet.tsx` around lines 262 -
274, The overpayment threshold is hardcoded as 1 in the comparison inside
PaymentReconciliationSheet; extract this magic number into a clearly named
constant (e.g., OVERPAYMENT_THRESHOLD) and use that constant in the Decimal
comparison (new Decimal(data.amount).minus(new
Decimal(invoice.total_gross)).greaterThan(new Decimal(OVERPAYMENT_THRESHOLD)) or
initialize the constant as a Decimal) so the business rule is explicit and
easier to change; update any related logic that references this value (the if
that calls setPendingFormData and setShowExceedsWarning) to use the new
constant.
🎭 Playwright Test ResultsStatus: ❌ Failed
📊 Detailed results are available in the playwright-final-report artifact. Run: #5331 |
|
Conflicts have been detected against the base branch. Please merge the base branch into your branch.
|
…ation_for_exceeding_payment
Deploying care-preview with
|
| Latest commit: |
e9fe982
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://4df38633.care-preview-a7w.pages.dev |
| Branch Preview URL: | https://manyu-add-confomation-for-ex.care-preview-a7w.pages.dev |
Proposed Changes
Fixes #15255
Now a warning dialog will appear when the payment amount exceeds the invoice amount by more than 1 unit of the currency. This means:
Small decimal differences (like ₹0.50 or ₹0.99) will be ignored and the payment will proceed without warning
Significant overpayments (like ₹2.00 or more) will still trigger the warning dialog
Tagging: @ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
New Features
Localization
✏️ Tip: You can customize this high-level summary in your review settings.