Component Name: payInvoices¶

Last Updated: 2025-10-22 Source Code: .temp-staging-flows/force-app/main/default/lwc/payInvoices/

API Name: c-pay-invoices Type: Page / Dashboard Component Target: lightningCommunity__Page, lightningCommunity__Default

Business Purpose¶

This component provides AANP customers with a self-service portal to view, manage, and pay outstanding invoices. It integrates with the payment processing system to allow customers to settle multiple invoices simultaneously, view detailed order information, and send receipts to additional email addresses. This directly supports accounts receivable operations and improves customer payment experience, reducing manual payment processing overhead.

User Interface¶

Visual Description¶

Layout: Dashboard with invoice list table, detail views, payment interface
Key UI Elements: Invoice datatable with checkboxes, total amount display, pay button, order detail modal, receipt email input, payment method selection
Responsive: Mobile-optimized with stacked layout

Screenshots¶

Desktop view: Wide table with multi-column display
Mobile view: Card-based invoice list

Component Structure¶

Files¶

payInvoices.html - Template (~400 lines estimated)
payInvoices.js - Controller (~400 lines estimated)
payInvoices.css - Styling
payInvoices.js-meta.xml - Metadata

HTML Template Structure¶

Dashboard with invoice datatable, bulk selection, payment interface, and order detail views.

Key Template Features: - Datatable with invoice list - Checkbox selection for bulk payment - Total amount calculator - Payment method integration (c-i2c-payment-methods) - Order detail modal - Receipt email input

JavaScript Controller¶

Properties (API)¶

No @api properties - standalone page component.

Tracked Properties¶

@track invoices: List of unpaid invoices
@track selectedInvoices: Selected invoices for payment
@track totalAmount: Sum of selected invoice amounts
@track isLoading: Loading state
@track showOrderDetail: Order detail modal visibility
@track selectedOrder: Order being viewed

Wire Adapters¶

@wire(getUnpaidInvoices): Fetches customer's unpaid invoices

Event Handlers¶

handleInvoiceSelection: Checkbox selection
handleSelectAll: Select all invoices
handleViewOrder: Show order detail modal
handlePayment: Process payment for selected invoices
handleSendReceipt: Email receipt to additional address

Events¶

ShowToastEvent: Success/error notifications
Payment events from c-i2c-payment-methods

Styling (CSS)¶

Custom styling for invoice table, selection controls, payment interface.

Dependencies¶

Lightning Web Components¶

lightning/platformShowToastEvent
lightning/datatable (or custom table)

Custom LWC Components¶

c-i2c-payment-methods: Payment processing integration

Apex Classes¶

OrderService.getUnpaidInvoices()
OrderService.getOrderDetails()
PaymentService.processInvoicePayment()
EmailService.sendReceipt()

Salesforce Objects¶

OrderSummary: Invoice/order data
Payment: Payment records
PaymentAuthorization: Payment processing

Configuration¶

<LightningComponentBundle>
    <apiVersion>61.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
</LightningComponentBundle>

User Interactions¶

View list of unpaid invoices
Select one or multiple invoices for payment
Review total amount
View order details (optional)
Enter payment method via integrated component
Submit payment
Receive confirmation and optional receipt email

Validation & Error Handling¶

At least one invoice must be selected
Payment method required
Payment processing error handling
Email validation for receipt address

Data Flow¶

User loads page → Fetch unpaid invoices → Select invoices → Review total → Enter payment method → Process payment → Update invoice status → Send confirmation

Performance Considerations¶

Invoice list pagination for large datasets
Payment processing may take several seconds
Optimistic UI updates

Table keyboard navigation
Checkbox labels
Payment form accessibility via c-i2c-payment-methods

Testing¶

Test File: Unknown Coverage: Unknown

Recommended Tests: - Invoice list display - Selection logic (single, multiple, all) - Total calculation - Payment processing integration - Order detail display - Receipt email functionality - Error handling

Usage Examples¶

Add to payment/invoices page in Experience Builder for authenticated customers.

Changes & History¶

Bulk payment functionality
Order detail views
Receipt email capability
Payment method integration

Pre-Go-Live Concerns¶

CRITICAL¶

Payment processing must be secure and PCI-compliant
Invoice status updates must be transactional
Payment failures must not partially update invoices
Double-payment prevention required

HIGH¶

Error recovery for failed payments
Receipt generation and email delivery
Mobile payment experience
Testing with various payment methods

MEDIUM¶

Performance with large invoice lists
Sorting and filtering capabilities
Payment history integration

LOW¶

UI/UX refinements
Loading states
Analytics tracking

Maintenance Notes¶

Complexity: Medium-High Review Schedule: Quarterly

Key Notes: - Integrates with payment processing (PCI scope) - Invoice status updates must be atomic - Receipt generation dependent on email service - Payment method component dependency - Accounts receivable impact - monitor payment success rates

Browser Compatibility: - Chrome 90+, Firefox 88+, Safari 14+, Edge 90+

Security Considerations: - PCI-DSS compliance via c-i2c-payment-methods - Payment data never stored in component - Invoice access control (user can only see their invoices) - Receipt email validation

Recommended Next Steps: 1. Comprehensive payment flow testing 2. PCI compliance audit 3. Error handling improvements 4. Mobile UX optimization