Skip to content

Component Name: nonPortalCustomerBanner

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

API Name: c-nonPortalCustomerBanner Type: Display Component (Warning Banner) Target: lightning__RecordPage (Account only)

Business Purpose

This administrative warning banner displays on Person Account record pages when the account is NOT enabled as a customer portal user. It alerts admins that the account must be enabled before it can be assigned to Buyer Groups, preventing configuration errors in the commerce system.

User Interface

Visual Description

  • Layout: Full-width warning banner box
  • Key UI Elements: Warning icon, warning message
  • Responsive: Full-width adapts to page layout

Component Structure

Files

  • nonPortalCustomerBanner.html - Template (8 lines)
  • nonPortalCustomerBanner.js - Controller (17 lines)
  • nonPortalCustomerBanner.js-meta.xml - Metadata

HTML Template Structure

<template>
    <template if:true={showBanner}>
        <div class="slds-box slds-theme_default banner-container">
            <lightning-icon icon-name='utility:warning' variant='warning' size='small' />
            <h2 class="warning-message">
                This Person Account is not enabled as a customer user.
                Please enable it before assigning to a Buyer Group.
            </h2>
        </div>
    </template>
</template>

Key Template Features: - Conditional rendering based on IsCustomerPortal field - SLDS styling for consistent warning appearance - Lightning icon for visual indicator

JavaScript Controller

Properties (API)

@api recordId

  • Type: String
  • Required: Yes (from record page context)
  • Description: Account record ID

Tracked Properties

showBanner

  • Type: Boolean
  • Purpose: Controls banner visibility
  • Updated When: After wire adapter loads account data

Wire Adapters

@wire(getRecord, { recordId: '$recordId', fields: [IS_CUSTOMER_PORTAL_FIELD] })

@wire(getRecord, { recordId: '$recordId', fields: [IS_CUSTOMER_PORTAL_FIELD] })
wiredAccount(response) {
    if (response.data) {
        this.showBanner = !getFieldValue(response.data, IS_CUSTOMER_PORTAL_FIELD);
    }
}

Purpose: Loads Account.IsCustomerPortal field Fields Retrieved: IsCustomerPortal Error Handling: Logs to console

Events

None

Styling (CSS)

CSS Variables Used

None

Custom CSS Classes

  • .banner-container: Custom banner styling
  • .warning-message: Warning text styling

SLDS Classes

  • slds-box: Card styling
  • slds-theme_default: Default theme

Dependencies

Lightning Web Components (Base)

  • lightning-icon

Apex Classes

None (uses wire UI API)

Salesforce Objects & Fields

  • Account.IsCustomerPortal

Configuration

Component Meta XML

<targets>
    <target>lightning__RecordPage</target>
</targets>
<targetConfigs>
    <targetConfig targets="lightning__RecordPage">
        <objects>
            <object>Account</object>
        </objects>
    </targetConfig>
</targetConfigs>

Available On: - Account Record Page only

User Interactions

None - display only

Data Flow

Input Data Flow

Account recordId (from page context)
    ↓
@wire getRecord → IsCustomerPortal field
    ↓
showBanner = !IsCustomerPortal
    ↓
Conditional display

Performance Considerations

  • Single field wire adapter (minimal data)
  • Conditional rendering reduces DOM when not needed

Accessibility (a11y)

ARIA Labels: - Lightning icon has implicit accessibility - Warning message in h2 for proper hierarchy

Keyboard Navigation: - Not applicable (no interactive elements)

Screen Reader Support: - Icon variant='warning' provides context - H2 announced to screen readers

Color Contrast: - SLDS warning styling meets WCAG AA

Testing

Jest Tests

None

Manual Testing Checklist

  • [ ] Account with IsCustomerPortal=false shows banner
  • [ ] Account with IsCustomerPortal=true hides banner
  • [ ] Banner styling matches SLDS warning theme
  • [ ] Screen reader announces warning

Usage Examples

In App Builder (Account Record Page)

  1. Edit Account record page
  2. Drag component to top of page
  3. Save and activate
  4. Banner shows only for non-portal accounts

Changes & History

  • 2025-09-29: Latest version

⚠️ Pre-Go-Live Concerns

CRITICAL - Fix Before Go-Live

None

HIGH - Address Soon After Go-Live

  • No unit tests: Simple component but should have basic test
  • Error handling silent: Line 14 logs error but shows nothing to user

MEDIUM - Future Enhancement

  • Add enable button: Link directly to enable portal user action
  • Add documentation link: Link to help docs on enabling portal users
  • Make message configurable: Custom label for i18n

LOW - Monitor

  • Console.log in production: Line 14 has console.log
  • Hard-coded message: Should use custom label

Maintenance Notes

Complexity: Low Recommended Review Schedule: Annually

Key Maintainer Notes: - Simple warning banner for admins - Prevents common configuration mistake (assigning non-portal accounts to Buyer Groups) - Should be placed prominently on Account record pages - IsCustomerPortal field must exist and be readable by admins - Component shows nothing if field load fails (silent error) - Consider adding quick action button to enable portal user

Browser Compatibility: - Chrome: Latest - Firefox: Latest - Safari: Latest - Mobile: Not typically used (admin tool)