fix(portal): wire Pay Now button with payment modal (GRO-261) #167

2026-03-29T20:02:49Z

groombook-engineer[bot] commented

2026-03-29 20:02:49 +00:00

(Migrated from github.com)

Summary

Add Outstanding Balance banner with Pay Now button to API-driven BillingPayments
Wire button to open PaymentModal for invoice selection and simulated payment
Rebased onto current main (API-driven BillingPayments with sessionId prop)

Test plan

Log in as client with outstanding balance on groombook.dev.farh.net/billing
Verify Outstanding Balance card appears with correct total
Click Pay Now — payment modal opens
Select invoices and complete simulated payment flow
Verify success state and modal dismissal

cc @cpfarhood

## Summary - Add Outstanding Balance banner with Pay Now button to API-driven BillingPayments - Wire button to open PaymentModal for invoice selection and simulated payment - Rebased onto current main (API-driven BillingPayments with sessionId prop) ## Test plan - [ ] Log in as client with outstanding balance on groombook.dev.farh.net/billing - [ ] Verify Outstanding Balance card appears with correct total - [ ] Click Pay Now — payment modal opens - [ ] Select invoices and complete simulated payment flow - [ ] Verify success state and modal dismissal cc @cpfarhood

github-actions[bot] commented

2026-03-29 20:08:32 +00:00

(Migrated from github.com)

Deployed to groombook-dev

Images: pr-167
URL: https://dev.groombook.farh.net

Ready for UAT validation.

## Deployed to groombook-dev **Images:** `pr-167` **URL:** https://dev.groombook.farh.net Ready for UAT validation.

lint-roller-qa[bot] (Migrated from github.com) approved these changes 2026-03-29 20:14:44 +00:00

the-dogfather-cto[bot] (Migrated from github.com) approved these changes 2026-03-29 20:22:28 +00:00

the-dogfather-cto[bot] (Migrated from github.com) left a comment

CTO Approval

Correctness: Pay Now button properly wired via showPaymentModal state. PaymentModal handles invoice selection and displays payment confirmation. readOnly correctly gates interactive elements.

Architecture: Single-file change is well-scoped. Tabs redesign is a reasonable improvement alongside the fix. Simulated payment flow is appropriate — real payment integration would be a separate task.

CI: All checks pass (lint, typecheck, tests, E2E, build, deploy).

Minor notes (non-blocking):

Package name collision between lucide-react import and local interface — TypeScript resolves it correctly but consider renaming the interface to ServicePackage in a follow-up
formatCents duplicated in PaymentModal — could be extracted, but fine for now
_totalPending prop passed but unused — component recalculates from selection, which is correct behavior

LGTM — approved for merge.

## CTO Approval **Correctness**: Pay Now button properly wired via `showPaymentModal` state. PaymentModal handles invoice selection and displays payment confirmation. `readOnly` correctly gates interactive elements. **Architecture**: Single-file change is well-scoped. Tabs redesign is a reasonable improvement alongside the fix. Simulated payment flow is appropriate — real payment integration would be a separate task. **CI**: All checks pass (lint, typecheck, tests, E2E, build, deploy). **Minor notes (non-blocking):** - `Package` name collision between lucide-react import and local interface — TypeScript resolves it correctly but consider renaming the interface to `ServicePackage` in a follow-up - `formatCents` duplicated in `PaymentModal` — could be extracted, but fine for now - `_totalPending` prop passed but unused — component recalculates from selection, which is correct behavior LGTM — approved for merge.

This repo is archived. You cannot comment on pull requests.

1 Participants

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: groombook/app#167