Component Name: orderPaymentsSummary¶

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

API Name: c-order-payments-summary Type: Display Component Target: lightningCommunity__Page, lightningCommunity__Default

Business Purpose¶

This component provides a detailed view of all payments associated with an order, displaying payment methods, authorization details, amounts, and statuses. It serves as a critical administrative tool for customer service representatives and finance teams to track payment history and troubleshoot payment-related issues. It may also be used in customer-facing contexts to show payment confirmations.

User Interface¶

Visual Description¶

Layout: Table/list display of payment records
Key UI Elements: Payment number, authorization ID, payment method, amount, status, date, action links
Responsive: Mobile-optimized with card view

Screenshots¶

Desktop view: Table with multiple columns
Mobile view: Stacked card layout

Component Structure¶

Files¶

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

HTML Template Structure¶

Table or list displaying payment records with details.

Key Template Features: - Payment list with conditional formatting - Status badges - Navigation links to payment records - Empty state for orders without payments

JavaScript Controller¶

Properties (API)¶

@api recordId¶

Type: String
Required: Yes
Description: Order record ID to display payments for

Example Usage:

<c-order-payments-summary record-id={orderId}></c-order-payments-summary>

Tracked Properties¶

@track payments: Array of payment records
@track isLoading: Loading state
@track hasPayments: Boolean indicating if payments exist

Wire Adapters¶

@wire(getOrderPayments, { orderId: '$recordId' }): Fetches payment records for order

Event Handlers¶

handleNavigateToPayment: Navigate to payment record detail page

Events¶

Navigation events to payment records

Styling (CSS)¶

Custom styling for payment table, status badges, responsive layout.

Dependencies¶

Lightning Web Components¶

lightning/navigation
lightning/datatable (potentially)

Apex Classes¶

OrderService.getOrderPayments()

Salesforce Objects¶

Payment: Payment records
PaymentAuthorization: Authorization details
OrderSummary: Parent order

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 payments for order
Click payment number to view detail
View payment status and authorization info

Validation & Error Handling¶

Handles orders with no payments
Error handling for failed data fetch

Data Flow¶

Component receives recordId → Fetch payments via wire adapter → Display payment list → User clicks payment → Navigate to payment detail

Performance Considerations¶

Wire adapter caches payment data
Typically small dataset (1-10 payments per order)

Table semantics or list with proper ARIA
Status information clearly conveyed
Navigation links keyboard-accessible

Testing¶

Test File: Unknown Coverage: Unknown

Recommended Tests: - Component renders with payments - Component renders empty state (no payments) - Wire adapter integration - Navigation to payment records - Error handling

Usage Examples¶

In App Builder (Record Page)¶

Add to Order record page to show payment summary.

In Parent Component¶

<c-order-payments-summary record-id={currentOrderId}></c-order-payments-summary>

Changes & History¶

Display component for payment tracking
Integration with OrderService

Pre-Go-Live Concerns¶

CRITICAL¶

Payment data must be accurate and real-time
Access control (users should only see authorized payments)

HIGH¶

Error handling for data fetch failures
Performance with orders having many payments
Mobile view optimization

MEDIUM¶

Sorting and filtering capabilities
Export functionality for finance teams

LOW¶

UI polish
Loading states

Maintenance Notes¶

Complexity: Low-Medium Review Schedule: Annually

Key Notes: - Read-only display component (no data modification) - Dependent on OrderService Apex class - May be used by CSRs and customers - Payment data sensitivity - ensure proper access controls

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

Security Considerations: - Payment data access control - PCI-DSS considerations for displayed payment information - Sensitive data masking (card numbers, etc.)

Recommended Next Steps: 1. Verify access control implementation 2. Test with various payment scenarios 3. Mobile UX optimization 4. Consider adding export capability for admin users