Component Name: cashContributionBanner¶

Last Updated: 2025-09-29 Source Code: https://bitbucket.org/i2cinc/i2c.salesforce.metadata/src/STAGING/force-app/main/default/lwc/cashContributionBanner

API Name: c-cashContributionBanner Type: Display Component Target: lightning__AppPage, lightning__RecordPage, lightning__HomePage

Business Purpose¶

This component displays a real-time banner on Order record pages showing the member's daily PAC (Political Action Committee) cash contribution status. It tracks contributions against the $100 daily legal limit, calculates remaining contribution allowance, warns when approaching the limit, and auto-updates the Order.PACTotal__c field. This ensures compliance with FEC regulations for PAC contributions.

User Interface¶

Visual Description¶

Layout: Banner box with icon, title, and contribution amounts
Key UI Elements: Warning icon, contribution amounts, status message, color-coded banner (green/orange/red)
Responsive: Full-width banner adapts to container

Screenshots¶

Green banner: Under $90 daily total
Orange banner: $90-$100 daily total (approaching limit)
Red banner: Over $100 daily total (exceeded limit)

Component Structure¶

Files¶

cashContributionBanner.html - Template/markup
cashContributionBanner.js - JavaScript controller (151 lines)
cashContributionBanner.css - Styling
cashContributionBanner.js-meta.xml - Metadata configuration

HTML Template Structure¶

<template>
    <template if:true={displayPacContributionComponent}>
        <template if:true={isManualOrder}>
            <div class={bannerClass}>
                <div class="banner-content">
                    <lightning-icon icon-name="utility:money" />
                    <h2>Today's Cash Contributions</h2>

                    <!-- Already Contributed -->
                    <lightning-formatted-number value={todayTotalAmount} />

                    <!-- Current Order Amount -->
                    <lightning-formatted-number value={totalAmount} />

                    <!-- Remaining or Exceeded -->
                    <template if:true={isBelowLimit}>
                        <lightning-formatted-number value={remainingAmount} />
                    </template>
                    <template if:true={isOverLimit}>
                        <lightning-formatted-number value={exceededAmount} />
                    </template>

                    <span>{statusMessage}</span>
                </div>
            </div>
        </template>
        <template if:false={isManualOrder}>
            <!-- Message that calculations only shown for manual orders -->
        </template>
    </template>
</template>

Key Template Features: - Conditional rendering based on order type and PAC contribution presence - Color-coded CSS classes based on contribution thresholds - Lightning formatted currency displays - Different messaging for manual vs. non-manual orders

JavaScript Controller¶

Properties (API)¶

@api recordId¶

Type: String
Required: Yes
Default: None
Description: Order record ID from record page context

Example Usage:

<c-cash-contribution-banner record-id={recordId}></c-cash-contribution-banner>

Tracked Properties¶

todayTotalAmount¶

Type: Number
Purpose: Sum of all PAC cash contributions today (excluding current order)
Updated When: After getTodayTotalCashContribution returns

totalAmount¶

Type: Number
Purpose: Total PAC contribution amount from current order
Updated When: After getTotalCashContributionFromOrder returns

remainingAmount¶

Type: Number
Purpose: Amount remaining before hitting $100 daily limit
Updated When: Calculated after finalCalculatedAmount is set

exceededAmount¶

Type: Number
Purpose: Amount over the $100 daily limit
Updated When: Calculated after finalCalculatedAmount is set

finalCalculatedAmount¶

Type: Number
Purpose: Total of today's contributions plus current order
Updated When: After todayTotalAmount loads

Wire Adapters¶

@wire(getRecord, { recordId: "$recordId", fields: FIELDS })¶

@wire(getRecord, { recordId: "$recordId", fields: FIELDS })
wiredOrder({ error, data }) {
    if (data) {
        this.order = data;
        this.accountId = getFieldValue(data, 'Order.AccountId');
        this.isAManualOrder = getFieldValue(data, 'Order.Manual_Order__c');

        if (this.accountId) {
            this.fetchCurrentOrderPacAmmount(this.accountId);
        }
    }
}

Purpose: Loads Order record to get AccountId and Manual_Order__c status Fields Retrieved: OrderNumber, AccountId, TotalAmount, Status, Manual_Order__c, PACTotal__c Error Handling: Logs errors to console

Public Methods¶

None

Event Handlers¶

None - component is display-only

Private Methods¶

fetchCurrentOrderPacAmmount¶

Purpose: Gets PAC contribution total from current order Called By: wiredOrder after accountId is available

fetchTodayTotalAmount¶

Purpose: Gets sum of today's PAC contributions (excluding current order) Called By: fetchCurrentOrderPacAmmount after success

checkAndUpdatePacTotal¶

Purpose: Compares current PACTotal__c field to calculated amount and updates if different Called By: fetchTodayTotalAmount after calculation completes

Events¶

Events Dispatched¶

None

Events Handled¶

None

Styling (CSS)¶

CSS Variables Used¶

Not specified in provided files

Custom CSS Classes¶

.contribution-banner: Base banner styling
.banner-green: Green background (under limit)
.banner-orange: Orange background (approaching limit)
.banner-red: Red background (over limit)
.banner-content, .banner-header, .banner-title, .banner-subtitle, .banner-amounts, .banner-status

SLDS Classes¶

Lightning components use SLDS internally

Responsive Breakpoints¶

Adapts to container width

Dependencies¶

Lightning Web Components (Base)¶

lightning-icon
lightning-formatted-number

Custom LWC Components¶

None

Apex Classes¶

ProductController.getTodayContribution(): Gets today's total PAC contributions for account
ProductController.getCurrentPACContributionFromOrder(): Gets PAC amount from current order
ProductController.getOrderPacTotal(): Gets current PACTotal__c field value
ProductController.updateOrderPacTotal(): Updates PACTotal__c field on Order

Salesforce Objects & Fields¶

Order: OrderNumber, AccountId, TotalAmount, Status, Manual_Order__c, PACTotal__c

Static Resources¶

None

Labels¶

None

Configuration¶

Component Meta XML¶

<targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
</targets>

Available On: - App Page (added manually) - Record Page (Order) - Home Page

Design Properties¶

None

User Interactions¶

Actions Available to Users¶

None - component is read-only display

Validation & Error Handling¶

Client-Side Validation: - None

Error Messages: - All errors logged to console only - No user-facing error messages

Loading States: - None visible (data loads silently)

Data Flow¶

Input Data Flow¶

Order recordId (from page context)
    ↓
@wire(getRecord) loads Order
    ↓
fetchCurrentOrderPacAmmount(accountId)
    ↓
fetchTodayTotalAmount(accountId)
    ↓
Calculate remaining/exceeded
    ↓
checkAndUpdatePacTotal
    ↓
Display banner with color coding

Output Data Flow¶

Calculate finalCalculatedAmount
    ↓
Compare to Order.PACTotal__c
    ↓
If different: updateOrderPacTotal

Performance Considerations¶

Render Optimization: - Uses getters for computed CSS classes and display logic - Conditional rendering minimizes DOM

Data Volume: - Single Order record - Small calculation workload

API Call Optimization: - Sequential Apex calls (necessary for calculation flow) - Auto-updates PACTotal__c field to cache calculation

ARIA Labels: - Lightning icon has alternative-text, variant, title attributes

Keyboard Navigation: - Not applicable (no interactive elements)

Screen Reader Support: - Amount labels ("Already Contributed:", "Current Order Amount:") announced - Status message announced

Color Contrast: - Color coding uses color + text - accessible - Specific contrast ratios need verification

Testing¶

Jest Tests¶

Test File: None Coverage: 0%

Test Scenarios: - ✗ No tests currently exist

Manual Testing Checklist¶

[ ] Order with $0 PAC contribution (banner hidden)
[ ] Order with PAC contribution under $90 (green banner)
[ ] Order with total $90-$100 (orange banner)
[ ] Order with total over $100 (red banner)
[ ] Manual order vs. non-manual order display
[ ] Multiple PAC contributions same day
[ ] PACTotal__c field auto-update logic
[ ] Error scenarios (Apex failures)

Usage Examples¶

In App Builder¶

Navigate to Order record page
Edit page in App Builder
Drag component to desired region
Save and activate

In Record Page¶

<!-- Automatically receives recordId from page context -->
<c-cash-contribution-banner></c-cash-contribution-banner>

Changes & History¶

2025-09-29: Latest version

⚠️ Pre-Go-Live Concerns¶

CRITICAL - Fix Before Go-Live¶

No error handling for user: All Apex failures logged to console only - user sees nothing
PACTotal__c update silently fails: Lines 87-90 update fails silently, user has no indication
Calculation thresholds hardcoded: $100 limit, $80, $90 thresholds should be custom metadata or settings
No timezone handling: "Today" could differ between user timezone and system timezone causing compliance issues

HIGH - Address Soon After Go-Live¶

No loading state: Component shows nothing while loading, could appear broken
typo in method name: "fetchCurrentOrderPacAmmount" has 3 m's (line 38)
No unit tests: Zero coverage for compliance-critical functionality
Console.log in production: Lines 87, 95 have console.log statements
Banner only shows on manual orders: Auto-orders don't show PAC calculation, could miss compliance violations

MEDIUM - Future Enhancement¶

Add refresh button: Allow user to manually refresh calculation
Show transaction history: Link to view all today's PAC contributions
Add export: Allow download of contribution history for compliance records
Make thresholds configurable: Move $80, $90, $100 to custom settings

LOW - Monitor¶

Component always calls updateOrderPacTotal: Even if value hasn't changed, still makes Apex call (optimization opportunity)
No caching: Every page load fetches same day's data repeatedly

Maintenance Notes¶

Complexity: Medium Recommended Review Schedule: Quarterly

Key Maintainer Notes: - CRITICAL FOR COMPLIANCE: Component enforces FEC $100 daily cash contribution limit - Any bugs could result in FEC violations and legal penalties - Timezone handling is critical - "today" must be consistent - $100 limit is federal law - do not change without legal review - Component auto-updates PACTotal__c field - ensure no conflicts with other automations - Only displays on manual orders - be aware of potential compliance gaps for automated orders - "finalCalculatedAmount" includes both today's previous contributions AND current order - Component has no user error messages - fails silently - Used on Order record pages for PAC contribution products

Browser Compatibility: - Chrome: Latest - Firefox: Latest - Safari: Latest - Mobile: Not typically used (internal order management)

Component Name: cashContributionBanner¶

Business Purpose¶

User Interface¶

Visual Description¶

Screenshots¶

Component Structure¶

Files¶

HTML Template Structure¶

JavaScript Controller¶

Properties (API)¶

@api recordId¶

Tracked Properties¶

todayTotalAmount¶

totalAmount¶

remainingAmount¶

exceededAmount¶

finalCalculatedAmount¶

Wire Adapters¶

@wire(getRecord, { recordId: "$recordId", fields: FIELDS })¶

Public Methods¶

Event Handlers¶

Private Methods¶

fetchCurrentOrderPacAmmount¶

fetchTodayTotalAmount¶

checkAndUpdatePacTotal¶

Events¶

Events Dispatched¶

Events Handled¶

Styling (CSS)¶

CSS Variables Used¶

Custom CSS Classes¶

SLDS Classes¶

Responsive Breakpoints¶

Dependencies¶

Lightning Web Components (Base)¶

Custom LWC Components¶

Apex Classes¶

Salesforce Objects & Fields¶

Static Resources¶

Labels¶

Configuration¶

Component Meta XML¶

Design Properties¶

User Interactions¶

Actions Available to Users¶

Validation & Error Handling¶

Data Flow¶

Input Data Flow¶

Output Data Flow¶

Performance Considerations¶

Accessibility (a11y)¶

Testing¶

Jest Tests¶

Manual Testing Checklist¶

Usage Examples¶

In App Builder¶

In Record Page¶

Changes & History¶

⚠️ Pre-Go-Live Concerns¶

CRITICAL - Fix Before Go-Live¶

HIGH - Address Soon After Go-Live¶

MEDIUM - Future Enhancement¶

LOW - Monitor¶

Maintenance Notes¶