Component Name: myAccountCustom¶

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

API Name: c-my-account-custom Type: Page / Dashboard Component Target: lightningCommunity__Page, lightningCommunity__Default

Business Purpose¶

The myAccountCustom component serves as AANP's primary member account management interface, providing a comprehensive dashboard where authenticated members can manage their profiles, view membership information, handle PAC contributions, access continuing education resources, and update communication preferences. It acts as the central hub for all member self-service functionality, enabling members to maintain their professional profiles, manage recurring political contributions, and access member-exclusive resources.

User Interface¶

Visual Description¶

Layout: Accordion-style dashboard with collapsible sections, centered max-width container (1050px)
Key UI Elements:
Profile header with avatar/initials, member name, membership status
Collapsible accordion sections for different account areas
Profile editing forms with comprehensive validation
PAC contribution management interface with recurring payment options
Committee information display for board members and state liaisons
Navigation links to external CE systems and resources
Email update modal with confirmation workflow
Data sharing agreement opt-in/opt-out interface
Responsive: Mobile-optimized with adjusted padding, stacked layouts for small screens

Screenshots¶

Desktop view: Wide dashboard with side-by-side sections, visible accordion controls
Mobile view: Full-width stacked sections, touch-optimized controls

Component Structure¶

Files¶

myAccountCustom.html - Template/markup (151KB, ~4500 lines)
myAccountCustom.js - JavaScript controller (95KB, ~2800 lines)
myAccountCustom.css - Styling (6KB, custom dashboard styling)
myAccountCustom.js-meta.xml - Metadata configuration
utils.js - Helper utilities for region mapping
stateCodesUtils.js - State code to name conversion utilities
phoneCountryCodes.js - International phone country code data
fellowImagePlaceholder.js - Default avatar image data
allRegionDataFiles/ - Directory containing region-specific data files (US, CA, AU, BR, CN, IE, IN, IT, MX)
__tests__/ - Test directory (has test file)

HTML Template Structure¶

<template>
    <div class="my-account-container">
        <!-- Profile Header Section -->
        <div class="profile-header">
            <div class="avatar">
                <!-- Avatar image or initials -->
            </div>
            <div class="fullname">{accountInfo.fullName}</div>
            <div class="membership-status">{memberType}</div>
            <div class="membership-expiration">{membershipEndDate}</div>
        </div>

        <!-- Account Body with Accordion Sections -->
        <div class="account-body">
            <!-- Profile Information Accordion -->
            <div class="accordion-item" onclick={toggleProfileSection}>
                <h2>Profile Information</h2>
                <div class="description" if:true={showProfileSection}>
                    <!-- Profile editing form fields -->
                </div>
            </div>

            <!-- Email Address Management -->
            <div class="accordion-item" onclick={toggleEmailSection}>
                <h2>Email Address</h2>
                <div class="description" if:true={showEmailSection}>
                    <!-- Email update interface -->
                </div>
            </div>

            <!-- PAC Contribution Management -->
            <div class="accordion-item" onclick={togglePACSection}>
                <h2>PAC Contribution</h2>
                <div class="description" if:true={showPACSection}>
                    <!-- PAC contribution form and history -->
                </div>
            </div>

            <!-- Membership Information -->
            <div class="accordion-item" onclick={toggleMembershipSection}>
                <h2>Membership Information</h2>
                <div class="description" if:true={showMembershipSection}>
                    <!-- Membership details, auto-renewal, communities -->
                </div>
            </div>

            <!-- CE Resources -->
            <div class="accordion-item" onclick={toggleCESection}>
                <h2>Continuing Education Resources</h2>
                <div class="description" if:true={showCESection}>
                    <!-- Links to external CE systems -->
                </div>
            </div>

            <!-- State Committee Information (conditional) -->
            <template if:true={canViewStateInformation}>
                <div class="accordion-item">
                    <!-- Regional director and state liaison info -->
                </div>
            </template>

            <!-- NPO Section (conditional) -->
            <template if:true={canViewNPOSection}>
                <div class="accordion-item">
                    <!-- Non-Profit Organization resources -->
                </div>
            </template>

            <!-- Email Marketing Preferences -->
            <div class="accordion-item">
                <!-- Link to external marketing preference center -->
            </div>
        </div>

        <!-- Email Update Modal -->
        <template if:true={showEmailModal}>
            <div class="modal">
                <!-- Email update form with confirmation -->
            </div>
        </template>
    </div>
</template>

Key Template Features: - Accordion pattern with dynamic expand/collapse using max-height CSS transitions - Conditional rendering for role-based sections (committee, NPO) - Modal dialogs for email updates and confirmations - Avatar image upload with preview - Custom radio/checkbox styling for forms - Dropdown menus for country/state/suffix selection - Real-time validation feedback - Loading spinners for async operations - Success/error message displays with styled alerts

JavaScript Controller¶

Properties (API)¶

@api userInfo¶

Type: Object
Required: No
Default: undefined
Description: User information object passed from parent (rarely used, component fetches own data)

Example Usage:

<c-my-account-custom user-info={userInfoObject}></c-my-account-custom>

@api accountType¶

Type: String
Required: No
Default: 'Person'
Description: Account record type (Person Account vs Business Account)

Tracked Properties¶

@track accountInfo¶

Type: Object (complex nested object with 20+ properties)
Purpose: Stores all account/profile data for display and editing
Updated When: User edits profile fields, on component initialization
Key Properties:
Id, firstName, middleName, lastName, suffix, credentials
phoneNumber, countryCode
city, stateCode, stateName, address, postalCode, provinceName, companyName
occupation, currentEmployer
preferredAddress (Home/Work)
dataSharingAgreement, dataSharingAgreementVersion, dataSharingAgreementDate
Computed property: nameInitials (derived from first/last name)

@track email, @track newEmail, @track emailConfirm¶

Type: String
Purpose: Current email, new email input, confirmation email input
Updated When: User types in email fields
Validation: Email format, uniqueness check, match validation

@track memberType, @track membershipEndDate, @track continuousMemberSince¶

Type: String
Purpose: Displays membership status, expiration date, tenure
Updated When: Fetched from Apex on component load

@track communities¶

Type: Array
Purpose: List of active community memberships
Updated When: Fetched from Apex (getActiveCommunitiesNames)

@track showJoinRenewButton, @track joinRenewButtonLabel¶

Type: Boolean, String
Purpose: Controls display of join/renew CTA button and its label
Updated When: Based on membership status

@track fileData¶

Type: Object
Purpose: Stores uploaded avatar image data (base64, filename, size)
Updated When: User uploads profile photo

@track isLoading¶

Type: Boolean
Purpose: Global loading state for async operations
Updated When: Before/after Apex calls

@track regionalDirector, @track stateLiaison¶

Type: Object
Purpose: Committee member contact information
Updated When: Fetched for users with committee roles

@track canViewNPOSection, @track canViewStateLiaison, @track canViewStateInformation, @track isBoardMember¶

Type: Boolean
Purpose: Role-based access control flags
Updated When: Evaluated based on user's committee roles and permissions

@track allRegionOptions, @track stateOptions¶

Type: Array
Purpose: Country and state picklist options for address form
Updated When: Component initialization, country selection changes

@track pacContributions, pacContributionTypes, selectedPacType, pacAmount
@track recurringPacOrders, scheduledOrders
@track showPacSuccess, pacErrorMessage
Purpose: Manages PAC contribution workflow and recurring payment display

UI State Flags¶

@track showProfileSection, showEmailSection, showPACSection, showMembershipSection, showCESection
@track showEmailModal, showConfirmDialog
@track isHomeAddressChecked, isWorkAddressChecked
Purpose: Controls accordion section expansion and modal visibility

Wire Adapters¶

@wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })¶

@wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
handleObjectInfo({ error, data }) {
    if (data) {
        this.accountRecordTypeId = data.defaultRecordTypeId;
    }
}

Purpose: Retrieves Account object metadata for picklist queries Fields Retrieved: Default record type ID Error Handling: Console error logging

@wire(getPicklistValues, { recordTypeId, fieldApiName: COUNTRY_CODE_FIELD })¶

Purpose: Fetches country picklist values for address form Post-Processing: Maps to allRegionOptions using imported region data files

@wire(getPicklistValues, { recordTypeId, fieldApiName: STATE_CODE_FIELD })¶

Purpose: Fetches state/region picklist values grouped by country Post-Processing: Uses utils.mapRegionCodes to create country-to-states mapping

Public Methods¶

This component has @api userInfo and @api accountType but no @api methods.

Event Handlers¶

toggleProfileSection, toggleEmailSection, togglePACSection, etc.¶

toggleProfileSection() {
    this.showProfileSection = !this.showProfileSection;
}

Triggered By: Click on accordion section header Event Type: click Action: Toggles section expansion, collapses other sections (single-expand behavior)

handleInputChange¶

handleInputChange(event) {
    const { name, value } = event.target;
    this.accountInfo[name] = value;
}

Triggered By: Input field changes in profile form Event Type: change Action: Updates accountInfo object with new value

handleCountryChange¶

handleCountryChange(event) {
    this.accountInfo.countryCode = event.detail;
    this.accountInfo.stateCode = '';
    this.updateStateOptions();
}

Triggered By: Country dropdown selection Event Type: custom event from dropdown component Action: 1. Updates country code 2. Clears state field 3. Populates state dropdown with country-specific options 4. Determines if province name field should display

handleStateChange¶

Triggered By: State dropdown selection Action: Updates accountInfo.stateCode and accountInfo.stateName

handleFileUpload¶

handleFileUpload(event) {
    const file = event.target.files[0];
    // Validates file size and type
    // Converts to base64
    // Stores in fileData object
}

Triggered By: File input change (avatar upload) Event Type: change Action: 1. Validates file type (image only) 2. Validates file size (<2MB) 3. Reads file as base64 data URL 4. Updates fileData object 5. Shows preview

handleSaveProfile¶

async handleSaveProfile() {
    // Validates all profile fields
    // Calls upsertAccount Apex
    // Uploads avatar image if changed
    // Shows success/error message
}

Triggered By: "Save Profile" button click Event Type: click Action: 1. Validates required fields (name, phone, address) 2. Calls upsertAccount() Apex with accountInfo 3. If avatar changed, calls uploadImage() Apex 4. Refreshes user data 5. Shows success toast or error message 6. Collapses accordion section

handleEmailUpdate¶

async handleEmailUpdate() {
    // Validates new email
    // Checks email uniqueness
    // Calls updateUserEmail Apex
    // Synchronizes portal and Salesforce user email
}

Triggered By: "Update Email" button click in modal Event Type: click Action: 1. Validates email format and match 2. Checks if email already exists (isEmailExisting) 3. Calls updateUserEmail() Apex 4. Updates User.Username and Account.PersonEmail 5. Shows confirmation dialog 6. May log user out for re-authentication

handlePACContribution¶

async handlePACContribution() {
    // Validates PAC amount
    // Adds PAC product to cart
    // Redirects to checkout
}

Triggered By: "Contribute Now" button in PAC section Event Type: click Action: 1. Validates contribution amount (federal limits) 2. Validates PAC type selection 3. Calls addProductToCart() Apex with PAC product 4. Navigates to checkout page

handleAutoRenewToggle¶

handleAutoRenewToggle(event) {
    const autoRenew = event.target.checked;
    // Updates Account.Auto_Renew__c field
}

Triggered By: Auto-renewal checkbox change Event Type: change Action: 1. Updates local state 2. Calls updateRecord() to save Account.Auto_Renew__c 3. May fetch/update recurring orders 4. Shows confirmation message

handleDataSharingOptIn / handleDataSharingOptOut¶

Triggered By: Data sharing agreement checkbox Action: 1. Updates accountInfo.dataSharingAgreement 2. Sets dataSharingAgreementDate to current date 3. Calls upsertAccount() to save 4. Shows success banner

Private Methods¶

connectedCallback¶

Purpose: Component initialization lifecycle method Called By: LWC framework on component load Logic: 1. Checks if guest user (redirects if true) 2. Sets basePath for navigation 3. Calls fetchUserInfo() 4. Initializes region data 5. Fetches B2B site URL 6. Loads committee roles and permissions

fetchUserInfo¶

Purpose: Retrieves current user's account information Called By: connectedCallback Logic: 1. Calls getUserInfo() Apex 2. Populates accountInfo object 3. Determines memberType and membership dates 4. Loads avatar image URL 5. Checks for committee roles 6. Fetches communities list

updateStateOptions¶

Purpose: Filters state dropdown based on selected country Called By: Country change handler Logic: Uses imported region data to map country to states

checkCommitteeRoles¶

Purpose: Determines user's committee access levels Called By: After user info loads Logic: 1. Calls isPartOfCommittee() Apex 2. Calls getCommitteeByStateCodeAndRole() for regional director and state liaison 3. Sets access flags (canViewNPOSection, canViewStateLiaison, etc.)

fetchPACContributions¶

Purpose: Loads PAC contribution history and recurring orders Called By: When PAC section expands Logic: 1. Calls getTotalAmountPacContribution() for current year total 2. Calls getRecurringChargentOrders() for active recurring payments 3. Calls getScheduledOrdersForPacContribution() for upcoming charges 4. Displays contribution summary

validateEmail¶

Purpose: Client-side email validation Returns: Boolean indicating validity Logic: Regex pattern matching for email format

validateProfileForm¶

Purpose: Validates all profile form fields before save Returns: Boolean indicating validity Logic: Checks required fields, format validation, shows error messages

Events¶

Events Dispatched¶

ShowToastEvent¶

this.dispatchEvent(new ShowToastEvent({
    title: 'Success',
    message: 'Profile updated successfully',
    variant: 'success'
}));

Purpose: Standard Salesforce toast notifications When Fired: After successful save operations, on errors Event Detail: title, message, variant (success/error/warning/info)

Events Handled¶

No custom events from child components (component doesn't use child LWC components).

Styling (CSS)¶

CSS Variables Used¶

--bs-form-invalid-color: Bootstrap invalid form color

Custom CSS Classes¶

.my-account-container: Max-width container (1050px) centered on page
.branding-dark-blue-bg, .branding-dark-blue-text: Primary brand color (#0c3863)
.branding-blue-bg, .branding-blue-text: Secondary brand color (#3072d7)
.avatar: Profile avatar positioning (margin-top: -50px for overlap effect)
.avatar-icon: Default avatar styling with SVG background
.account-body: Light gray background for dashboard body
.accordion-item: Clickable accordion section with padding and shadow
.description: Collapsible content area with max-height transition
.box, .box-shadow: Card-style containers with shadow
.data_sharing_message: Green success banner for data sharing opt-in
.friendly-error: Styled error message box (red background)
.info-message-pac: Styled info message box (blue background)
.auto-renewal-warning: Yellow warning banner for auto-renewal
.thumbnail: Avatar image thumbnail styling

SLDS Classes¶

Component uses Bootstrap classes instead of SLDS: - container, row, col - form-control, form-group, btn - modal, modal-dialog, modal-content - text-center, text-danger, text-success - Spacing utilities: mt-*, mb-*, p-*

Responsive Breakpoints¶

Mobile (<768px): .mobile-padding-top class adds top padding, stacked layout
Tablet/Desktop: Full width accordion items with side padding

Dependencies¶

Lightning Web Components (Base)¶

lightning/platformShowToastEvent: Toast notifications
lightning/navigation: NavigationMixin for page navigation
lightning/uiObjectInfoApi: getObjectInfo, getPicklistValues
lightning/uiRecordApi: updateRecord for auto-renewal toggle

Custom LWC Components¶

No child LWC components used (all UI is self-contained).

Apex Classes¶

AccountController.getUserInfo(): Retrieves user account data
AccountController.upsertAccount(): Saves profile updates
AccountController.uploadImage(): Uploads avatar image to file server
AccountController.updateUserEmail(): Updates user email (portal and Salesforce)
AccountController.isEmailExisting(): Validates email uniqueness in Accounts
AccountController.isEmailExistingPortal(): Validates email uniqueness in Users
AccountController.getActiveCommunitiesNames(): Fetches community memberships
AccountController.getCommitteeByStateCodeAndRole(): Retrieves committee members
AccountController.isPartOfCommittee(): Checks committee membership
AccountController.checkNPOAccess(): Validates NPO section access
AccountController.getAccountContactRelationshipRecords(): Retrieves NPO account relationships
AccountController.getB2BSiteUrl(): Gets e-commerce site base URL
AccountController.getFileServerUrl(): Gets file server URL for avatars
CategoryController.getProductCategoryIdByName(): Retrieves category ID
ProductController.getPACContributionTypeValues(): Fetches PAC type picklist
ProductController.getRecurringChargentOrders(): Retrieves recurring PAC orders
ProductController.updateChargentOrders(): Updates recurring order status
ProductController.getTotalAmountPacContributionNew(): Calculates PAC totals
ProductController.updateAccountRecurringFlag(): Updates recurring contribution flag
ProductController.getScheduledOrders(): Fetches scheduled PAC charges
ProductController.getPacContributionProducts(): Retrieves PAC products
CartController.addProductToCart(): Adds PAC contribution to cart

Salesforce Objects & Fields¶

Account: Person Account fields
FirstName, MiddleName, LastName, Suffix__c, Credentials__c
PersonEmail
PersonMailingAddress (Street, City, StateCode, PostalCode, CountryCode)
Phone, Country_Code__c
Occupation__c, Current_Employer__c
Company_Name__c, Province_Name__c
Preferred_Address__c (Home/Work)
Auto_Renew__c
Data_Sharing_Agreement__c, Data_Sharing_Agreement_Version__c, Data_Sharing_Agreement_Date__c
Continuous_Member_Since_at_Least__c, Membership_Expiration_Date__c
User: Username (email synchronization)
ChargentOrders__ChargentOrder__c: Recurring PAC payment orders
Product2: PAC contribution products
Community: Active community memberships

Static Resources¶

Avatar placeholder image (inline data URI in fellowImagePlaceholder.js)
Checkmark SVG: https://membership.aanp.org/images/icons/checkmark.svg
Avatar icon: https://account.aanp.org/assets/images/icons/avatar.svg

Labels¶

c.AANP_CE_ACTIVITY_URL: CE activity catalog URL
c.AANP_CE_CENTER_URL: CE center URL
c.AANP_CE_TRACKER_URL: CE tracker URL
c.AANP_CE_OPPORTUNITIES_URL: CE opportunities URL
c.AANP_CE_EVAL_URL: CE evaluation form URL
c.AANP_CE_MEMBERSHIP_CERTIFICATE_URL: Membership certificate download
c.AANP_CE_MEMBERSHIP_CARD_URL: Membership card download
c.AANP_CE_COMPLETE_CONFERENCE_EVALUATIONS_URL: Conference evaluation URL
c.MK_Email_Preferences_Link: Marketing email preference center URL
c.NPO_Resources_Link: Non-Profit Organization resources URL

External Libraries/Modules¶

utils.js: mapRegionCodes helper function
stateCodesUtils.js: stateCodeToName conversion
phoneCountryCodes.js: International phone codes array
fellowImagePlaceholder.js: Base64 placeholder image
Region data modules: US_regionData, CA_regionData, AU_regionData, BR_regionData, CN_regionData, IE_regionData, IN_regionData, IT_regionData, MX_regionData

Configuration¶

Component Meta XML¶

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>62.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>My Account Custom</masterLabel>
    <targets>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
</LightningComponentBundle>

Available On: - Experience Cloud pages (lightningCommunity__Page) - Experience Cloud default pages (lightningCommunity__Default)

Design Properties¶

No configurable properties - designed as full-page dashboard component.

User Interactions¶

Actions Available to Users¶

Expand/Collapse Dashboard Sections
Trigger: Click on accordion section headers
Result: Section expands with smooth CSS transition, other sections collapse
Edit Profile Information
Trigger: Modify fields in Profile section, click "Save Profile"
Result: Validates data, saves to Account, shows success/error toast
Upload Profile Photo
Trigger: Click "Upload Photo" or file input, select image
Result: Previews image, saves to file server on profile save
Update Email Address
Trigger: Click "Update Email", enter new email and confirmation, click "Save"
Result: Validates uniqueness, updates User.Username and Account.PersonEmail, may log out user
Make PAC Contribution
Trigger: Select PAC type, enter amount, click "Contribute Now"
Result: Adds PAC product to cart, redirects to checkout
Manage Auto-Renewal
Trigger: Toggle "Enable Auto-Renewal" checkbox
Result: Updates Account.Auto_Renew__c, may affect recurring orders
Opt In/Out of Data Sharing
Trigger: Check/uncheck "Data Sharing Agreement"
Result: Updates agreement fields, shows success banner
View Committee Information
Trigger: Automatic display if user has committee roles
Result: Shows regional director and state liaison contact info
Access CE Resources
Trigger: Click links in CE section
Result: Navigates to external CE systems (new tab/window)
View Communities
- Trigger: Expand Membership Information section
- Result: Displays list of active community memberships

Validation & Error Handling¶

Client-Side Validation: - Profile fields: First name, last name, phone (required) - Address: Country, city, postal code (required); state if applicable - Email: Valid format, match confirmation, uniqueness - File upload: Image type only, max 2MB size - PAC contribution: Amount within federal limits, type selection required

Error Messages: - Email uniqueness: "This email address is already in use. Please use a different email." - File size: "File size must be less than 2MB" - File type: "Please upload an image file (JPG, PNG, GIF)" - Required field: "This field is required" - Email mismatch: "Email addresses do not match" - PAC limit: "Contribution amount exceeds federal limit" - Generic error: "An error occurred. Please try again later."

Loading States: - Spinner overlay during profile save, email update, PAC operations - Button disabled during async operations - Skeleton loaders for initial data fetch (if implemented)

Data Flow¶

Input Data Flow¶

Component Initialization
    ↓
connectedCallback()
    ↓
Check isGuest (redirect if true)
    ↓
@wire(getObjectInfo, getPicklistValues) → Metadata
    ↓
fetchUserInfo() → getUserInfo Apex
    ↓
Populate accountInfo, memberType, dates
    ↓
Load avatar image from file server
    ↓
checkCommitteeRoles() → isPartOfCommittee Apex
    ↓
Fetch communities, PAC data (lazy loaded on section expand)
    ↓
Display dashboard

Output Data Flow¶

User edits profile fields
    ↓
handleInputChange() updates accountInfo
    ↓
User clicks "Save Profile"
    ↓
validateProfileForm() checks required fields
    ↓
upsertAccount() Apex → Updates Account record
    ↓
If avatar changed: uploadImage() Apex → File server
    ↓
Refresh getUserInfo() → Updated data
    ↓
Show success toast, collapse section

User updates email
    ↓
handleEmailUpdate() validates and checks uniqueness
    ↓
updateUserEmail() Apex → Updates User.Username and Account.PersonEmail
    ↓
Show confirmation modal
    ↓
May log out user for re-authentication

User makes PAC contribution
    ↓
validatePACAmount() checks federal limits
    ↓
addProductToCart() Apex → Adds PAC product to cart
    ↓
Navigate to /checkout
    ↓
Checkout component processes payment

Performance Considerations¶

Render Optimization: - Accordion pattern reduces initial DOM size (only expanded section rendered with content) - Lazy loading of PAC data and committee info on section expand - Conditional rendering for role-based sections

Data Volume: - Single user account record (no pagination needed) - Communities list typically small (<20 items) - PAC orders history limited to current year - Recurring orders typically 0-5 items

API Call Optimization: - Initial data fetched in connectedCallback (single getUserInfo call) - Additional data lazy-loaded on section expand (PAC, committee) - File server URL cached in component state - Region data imported as static modules (no server calls)

Known Performance Issues: - Large JavaScript file (95KB) increases initial load - Multiple imported region data modules add to bundle size - File upload may be slow for large images without progress indicator - No debouncing on search/filter inputs (if any)

ARIA Labels: - Accordion buttons should have aria-expanded and aria-controls - Form inputs have associated <label> elements with for attribute - Modal should have aria-modal="true" and aria-labelledby - File input should have descriptive aria-label

Keyboard Navigation: - Tab order: Natural DOM order through accordion sections - Accordion sections should be keyboard-activatable (Enter/Space) - Focus management: Should return to trigger on modal close - Custom dropdowns may need keyboard support

Screen Reader Support: - Profile header announces user name and membership status - Form field labels properly associated - Error messages should be announced (needs aria-live or aria-describedby) - Success toasts announced by Salesforce ShowToastEvent

Color Contrast: - Passes WCAG AA: Most text elements (needs verification) - Primary blue (#0c3863) has good contrast on white - Secondary blue (#3072d7) may be borderline on some backgrounds - Error red and success green meet contrast requirements

Accessibility Gaps: - Accordion implementation may not follow ARIA Accordion pattern - Custom styled checkboxes/radios (hidden native inputs) - File upload button may not be screen-reader friendly - Modal focus trap not verified - No skip navigation for long dashboard

Testing¶

Jest Tests¶

Test File: __tests__/myAccountCustom.test.js exists Coverage: Unknown (needs verification)

Recommended Test Scenarios: - ✓ Component renders for authenticated user - ✓ Redirects guest users - ? Profile form validation works correctly - ? Email update validates uniqueness - ? File upload validates size and type - ? PAC contribution validates amount limits - ? Auto-renewal toggle updates Account record - ? Accordion sections expand/collapse correctly - ? Committee sections display for appropriate roles - ? Region/state dropdowns populate correctly - ? Error handling for failed Apex calls - ? Success toasts display after saves

Manual Testing Checklist¶

[ ] Desktop browser (Chrome, Firefox, Safari)
[ ] Mobile browser (iOS Safari, Android Chrome)
[ ] Tablet view
[ ] Accessibility (screen reader, keyboard-only)
[ ] Profile save with various field combinations
[ ] Email update with existing email (should error)
[ ] Avatar upload with various file types and sizes
[ ] PAC contribution with various amounts
[ ] Auto-renewal toggle on/off
[ ] Data sharing opt-in/opt-out
[ ] Committee section display for board members
[ ] CE resource links navigation
[ ] Cross-browser compatibility
[ ] Slow network conditions

Usage Examples¶

In App Builder¶

Navigate to Experience Builder
Create or edit "My Account" page
Drag "My Account Custom" component to page
No configuration needed
Publish page
Assign to /my-account URL route

In Parent Component¶

Not designed for embedding. Standalone page component only.

Programmatic Access¶

Not applicable - no public API methods.

Changes & History¶

Major Features Added: - Avatar/profile photo upload functionality - PAC contribution management with recurring payments - Data sharing agreement opt-in/opt-out - Committee member information display - NPO section for non-profit organization members - Auto-renewal toggle integration - Email update with portal synchronization - International address support with region-specific validation

Known Technical Debt: - Component has grown to 2800+ lines (should be <500) - Multiple region data modules could be lazy-loaded - Email update should use email verification workflow (send confirmation link) - File upload should stream to server instead of base64 encoding - Should be broken into child components (ProfileEditor, PACContribution, etc.)

Pre-Go-Live Concerns¶

CRITICAL - Fix Before Go-Live¶

Email update security: Email changes should require verification (send confirmation link to new email)
File upload validation: Server-side must validate file type and size (client validation is bypassable)
PAC federal limits: Must be enforced server-side, not just client-side
Session security: Sensitive account data in component state accessible via browser dev tools
XSS vulnerabilities: Dynamic content rendering must be properly escaped
Email enumeration: isEmailExisting check may enable account enumeration attacks

HIGH - Address Soon After Go-Live¶

Component complexity: 2800 lines violates maintainability principles
Error recovery: Limited options for users to recover from partial failures
Data synchronization: Email update may cause sync issues between User and Account
File server dependency: External file server creates single point of failure
No email verification: Users can change email without confirming access to new email
Testing coverage: Needs comprehensive test suite for critical operations
Performance monitoring: No tracking of operation success rates or load times

MEDIUM - Future Enhancement¶

Component architecture: Break into smaller, focused child components
Progressive enhancement: Optimize mobile experience with progressive disclosure
Inline editing: Allow in-place editing without accordion expansion
Image optimization: Client-side image resizing before upload
Email verification workflow: Implement proper email change verification
Audit logging: Track profile changes for security and compliance
Undo functionality: Allow users to revert recent changes

LOW - Monitor¶

External dependencies: CE links, file server, email preference center availability
Region data maintenance: Must update region files when countries/states change
Browser compatibility: Advanced file upload features
Label maintenance: Multiple custom labels for CE URLs must stay current
Accordion UX: Some users may not understand accordion pattern
Mobile performance: Large component may have performance issues on older devices

Maintenance Notes¶

Complexity: Very High (Second Highest Risk Component After membershipWizard) Recommended Review Schedule: - Bi-weekly during major releases - Monthly for security and data integrity audits - Quarterly for comprehensive code quality review

Key Maintainer Notes: - CRITICAL: Email updates directly affect user authentication. Test thoroughly. - Component size: 2800 lines makes maintenance difficult. Priority candidate for refactoring. - File server integration: External dependency. Monitor uptime and implement fallback. - PAC compliance: Federal contribution limits must be current. Review annually. - Region data: Country/state data in static modules must be updated when standards change. - Apex dependencies: Changes to 20+ Apex methods may break functionality. - Email synchronization: Changes to User.Username or Account.PersonEmail must stay synchronized. - Committee roles: Role-based access logic is complex. Document thoroughly before changes. - CE URLs: Custom labels for CE resources must be updated when external systems change. - Avatar storage: File server URLs must remain accessible. Monitor for broken images.

Deployment Risks: - HIGH: Email update changes could lock users out of accounts - HIGH: File upload changes could corrupt existing avatars - MEDIUM: Region data changes could break address validation - MEDIUM: PAC limit changes could violate federal compliance - LOW: UI changes typically low risk (CSS/layout)

Browser Compatibility: - Chrome: 90+ (tested) - Firefox: 88+ (tested) - Safari: 14+ (needs verification) - Edge: 90+ (tested) - Mobile Safari iOS: 14+ (needs verification) - Chrome Android: 90+ (needs verification) - File API and FileReader required (IE11 not supported)

Performance Benchmarks (needs measurement): - Initial page load: Target <2 seconds - Profile save: Target <1 second - Email update: Target <2 seconds - File upload: Target <3 seconds for 2MB image - Accordion expand: Target <300ms

Security Considerations: - Email verification: Implement proper email change verification workflow - File upload: Server-side validation of file type, size, and content - XSS prevention: Sanitize all user input, especially in dynamic rendering - SOQL injection: Verify Apex controllers use bind variables - Field-level security: Ensure profile updates respect FLS and sharing rules - Session management: Consider implementing CSRF tokens for sensitive operations - Audit trail: Log email changes, profile updates for security review - Rate limiting: Implement rate limits on email update attempts

Documentation Debt: - No data flow diagrams exist - Email synchronization logic not fully documented - Committee role access rules not centrally documented - File server integration architecture not documented - PAC contribution workflow needs sequence diagram

Recommended Next Steps: 1. Immediate: Implement email verification workflow for email updates 2. Short-term: Add comprehensive Jest tests for critical operations 3. Medium-term: Break component into smaller child components (ProfileEditor, PACManager, CommitteeInfo) 4. Long-term: Redesign with proper state management and separation of concerns