Component Name: membershipWizard¶

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

API Name: c-membership-wizard Type: Form / Page Component Target: lightningCommunity__Page, lightningCommunity__Default

Business Purpose¶

The membershipWizard component serves as AANP's primary membership enrollment and renewal interface, providing a comprehensive 7-step wizard that handles account creation, membership selection, demographic data collection, and cart/payment integration. It supports both new member registration and existing member renewals with complex business logic for pricing, discounts, and international memberships. This is the critical conversion point for all AANP membership revenue.

User Interface¶

Visual Description¶

Layout: Multi-step wizard with progress indicator, responsive card-based design
Key UI Elements:
Hero section with membership background image and radial gradient overlay
Progress bar showing current step completion
Step-by-step forms with validation feedback
Product selection cards with pricing displays
Community selection with scrollable list
Checkout summary with cart preview
Responsive: Adapts layout for mobile (stacked), tablet (medium padding), and desktop (wide container with side padding)

Screenshots¶

Desktop view: Full-width wizard with branded header, centered card layout (max-width: col-lg-10 col-xl-8)
Mobile view: Stacked forms with adjusted padding, touch-optimized checkboxes and buttons

Component Structure¶

Files¶

membershipWizard.html - Template/markup (148KB, ~4700 lines)
membershipWizard.js - JavaScript controller (131KB, ~3800 lines)
membershipWizard.css - Styling (5.5KB, custom branding)
membershipWizard.js-meta.xml - Metadata configuration
yearValues.js - Helper module for year dropdown options
__tests__/ - No test file present

HTML Template Structure¶

<template>
    <section class="container-fluid p-0">
        <div class="membership pb-10">
            <!-- Hero background with gradient overlay -->
            <div class="container-fluid membership-background"></div>

            <!-- Progress indicator -->
            <div class="progress-bar" style={progressBarStyle}></div>

            <!-- Step 1: Initial email entry (guest users) -->
            <template if:true={isInitialStep}>
                <!-- Email input and Get Started button -->
            </template>

            <!-- Step 2: Verify account information -->
            <template if:true={isVerifyAccountInformationInitialStep}>
                <!-- Name, address, phone number fields -->
            </template>

            <!-- Step 3: Select membership type -->
            <template if:true={isMembershipTypeStep}>
                <!-- Membership product selection with pricing -->
            </template>

            <!-- Step 4: Military service status -->
            <template if:true={isServingMilitaryStep}>
                <!-- Military/veteran discount eligibility -->
            </template>

            <!-- Step 5: Additional opportunities (communities) -->
            <template if:true={isAdditionalOpportunitiesStep}>
                <!-- Community product selection -->
            </template>

            <!-- Step 6: Demographic information -->
            <template if:true={isVerifyAccountInformationLastStep}>
                <!-- Demographics, NPI, research participation -->
            </template>

            <!-- Step 7: Checkout confirmation -->
            <template if:true={isCheckoutStep}>
                <!-- Cart summary, PAC contribution, proceed to payment -->
            </template>

            <!-- Error state -->
            <template if:true={isErrorStep}>
                <!-- Error message display -->
            </template>
        </div>
    </section>
</template>

Key Template Features: - Conditional rendering with if:true for each wizard step - Lists with for:each for product selection, community selection, cart items - Custom radio/checkbox styling with hidden inputs - Bootstrap grid system integration - Dropdown menus for country/state/year selection - Modal dialogs for confirmations and warnings - Dynamic progress bar width calculation - Real-time validation feedback with error messages

JavaScript Controller¶

Properties (API)¶

This component has no @api properties - it is designed as a standalone page component, not a reusable child component.

Tracked Properties¶

@track accountFields¶

Type: Object (complex nested object with 30+ properties)
Purpose: Stores all user input for account creation/update
Updated When: User types in any form field
Key Properties:
firstName, middleName, lastName
email, confirmEmail
country, state, city, addressLine, postalCode, provinceName
phoneNumber, preferredPhone
occupation, currentEmployer
schoolName, selectedSchoolName
npiNumber, yearOfBirth
selectedGender, selectedRace
veteranStatus
autoRenew, renewalRate
joinNpResearch, joinNpFinder
Various attestation flags (postmastersAttested, undergradAttested)
Communication preferences (excludeFromThirdPartySolicitations, preferredMethodCommunicationText)

@track currentStep¶

Type: String
Purpose: Controls which wizard step is displayed
Updated When: User clicks Next/Previous buttons or form submission
Possible Values:
"initialStep" - Email entry (guest users only)
"errorStep" - Error display
"verifyAccountInformationInitialStep" - Account info collection
"membershipTypeStep" - Membership product selection
"servingMilitaryStep" - Military discount eligibility
"additionalOpportunitiesStep" - Community selection
"verifyAccountInformationLastStep" - Demographics and final info
"checkoutStep" - Cart summary and checkout

@track progressWidth¶

Type: Number
Purpose: Progress bar percentage for visual feedback
Updated When: Step changes
Range: 10-100 (percentage)

@track membershipProducts¶

Type: Array
Purpose: Available membership products fetched from Apex
Updated When: Component initialization, step navigation
Structure: Array of product objects with pricing, descriptions

@track selectedCommunityProducts¶

Type: Array
Purpose: Communities selected by user for addition to cart
Updated When: User checks/unchecks community options

@track cartItems¶

Type: Array
Purpose: Current cart contents for display in checkout step
Updated When: After adding products to cart

@track isPhoneValid¶

Type: Boolean
Purpose: Phone number validation status using intlTelInput library
Updated When: User types in phone field, validation runs

@track isStudentMembershipAvailable¶

Type: Boolean
Purpose: Whether student membership option should be shown
Updated When: Apex check based on account's last membership date

@track errorMessage¶

Type: String
Purpose: Stores error messages for display to user
Updated When: Validation fails or Apex calls return errors

Various UI State Flags¶

Numerous @track boolean properties for checkbox states: - Address type: isHomeAddressChecked, isWorkAddressChecked - Phone type: isPhoneCellChecked, isPhoneWorkChecked, isPhoneHomeChecked - Membership type: isLicensedCertifiedNurseChecked, isCurrentlyStudentChecked, isRetiredNurseChecked, etc. - Military status: isCurrentlyServingMilitaryChecked, isVeteranChecked, isNotServedMilitaryChecked - Research participation: isInterestedInNetworkForResearchChecked - Fellow status: isYesJoinFellowChecked, isNoJoinFellowChecked

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 record type ID Fields Retrieved: Default record type ID Error Handling: Console error logging

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

@wire(getPicklistValues, {
    recordTypeId: "$accountRecordTypeId",
    fieldApiName: COUNTRY_CODE_FIELD
})
handleCountryPicklistValues({ error, data })

Purpose: Fetches country picklist values for address field Parameters: Uses Account object's default record type Error Handling: Console error, graceful degradation Post-Processing: Formats values, stores in localStorage for performance

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

@wire(getPicklistValues, {
    recordTypeId: "$accountRecordTypeId",
    fieldApiName: STATE_CODE_FIELD
})
handleStatePicklistValues({ error, data })

Purpose: Fetches state/region picklist values grouped by country Parameters: Uses Account object's default record type Error Handling: Console error, graceful degradation Post-Processing: Maps states to controlling country values, stores in sessionStorage

Public Methods¶

This component has no @api public methods - it is self-contained.

Event Handlers¶

handleFormSubmit¶

handleFormSubmit(event) {
    // Validates email and checks if account exists
}

Triggered By: "Get Started" button click on initial step Event Type: click Event Detail: None Action: 1. Validates email format 2. Checks if email exists in system (isEmailExisting) 3. Creates/retrieves account 4. Advances to next step or shows error

handleInput¶

handleInput(event) {
    const { name, value, checked, type } = event.target;
    // Updates accountFields object
}

Triggered By: Input field changes (text, email, textarea) Event Type: change Event Detail: Native input event Action: Updates corresponding property in accountFields, saves to sessionStorage

handleCheckboxChange¶

handleCheckboxChange(event) {
    const { name, checked } = event.target;
    // Updates checkbox state and related logic
}

Triggered By: Checkbox clicks throughout wizard Event Type: change Event Detail: Checkbox checked state Action: - Updates tracked boolean properties - Handles mutual exclusivity for radio-style checkboxes - Triggers cascading logic (e.g., membership type selection updates available products) - Updates sessionStorage

handleCountryChange¶

handleCountryChange(event) {
    // Updates country, recalculates state options
}

Triggered By: Country dropdown selection Event Type: click on dropdown item Action: 1. Updates accountFields.country 2. Clears state/province fields 3. Recalculates available state options 4. Determines if international pricing applies 5. Fetches updated membership pricing

handleStateChange¶

handleStateChange(event) {
    // Updates state selection
}

Triggered By: State dropdown selection Event Type: click on dropdown item Action: Updates accountFields.state with selected value

handleInputPhone¶

handleInputPhone(event) {
    // Validates phone with intlTelInput
}

Triggered By: Phone number input changes Event Type: input Action: 1. Updates accountFields.phoneNumber 2. Validates format with intlTelInput library 3. Updates isPhoneValid flag 4. Shows/hides validation errors

handlePreviousStep¶

handlePreviousStep() {
    // Navigates to previous wizard step
}

Triggered By: "Previous" button clicks Event Type: click Action: 1. Saves current step data to sessionStorage 2. Decrements progress bar 3. Updates currentStep to previous step value 4. Scrolls to top of page

handleNextStep (multiple variations)¶

Complex method with step-specific logic: - Validates current step's required fields - Makes necessary Apex calls (save account, fetch products, etc.) - Adds products to cart if on product selection steps - Advances currentStep - Updates progress bar - Shows loading spinners during async operations

Private Methods¶

fetchUserRecord¶

Purpose: Retrieves current user's account information Called By: connectedCallback (on component initialization) Logic: Calls getUserInfo Apex, populates accountFields if authenticated user

fetchMembershipProducts¶

Purpose: Retrieves available membership products based on user's profile Called By: Step navigation, country changes Logic: Calls getMembershipProducts or getInternationalMembershipPrice Apex based on location

fetchCommunitiesProducts¶

Purpose: Retrieves available community products for selection Called By: When reaching additional opportunities step Logic: Calls getProductsByFamily Apex with 'Communities' family parameter

fetchRenewalDiscount¶

Purpose: Checks if user qualifies for auto-renewal discount Called By: When auto-renew checkbox is selected Logic: Calls getMembershipAutoRenewalCoupon Apex

checkStudentMembershipAvailability¶

Purpose: Determines if student membership can be offered Called By: Component initialization for existing members Logic: Calls allowStudentMembershipForAccount Apex, checks last membership date

validatePhoneNumber¶

Purpose: Validates phone number format using intlTelInput library Called By: handleInputPhone, form submission validation Returns: Boolean indicating validity

saveFieldToSessionStorage¶

Purpose: Persists form data to browser sessionStorage Called By: All input handlers Logic: Stores individual field values to prevent data loss during navigation

retrieveOptionsFromLocaleStorage¶

Purpose: Retrieves country/state options from localStorage for performance Called By: connectedCallback Logic: Checks localStorage, uses cached values if available

initializeComponentProperties¶

Purpose: Restores wizard state from sessionStorage Called By: connectedCallback Logic: Retrieves all saved form values, checkbox states, selected products

calculateStateOptions¶

Purpose: Filters state dropdown based on selected country Called By: Country change, component initialization Logic: Maps controlling country value to dependent state picklist values

getPacProductId¶

Purpose: Retrieves PAC contribution product for checkout step Called By: When reaching checkout step Logic: Calls getPacContributionProduct Apex

fetchCurrentCommunityProducts¶

Purpose: Gets user's current active community memberships Called By: When showing additional opportunities step Logic: Calls getCurrentCommunityProducts Apex for renewal scenario

Events¶

Events Dispatched¶

This component does not dispatch custom events. Navigation to checkout is handled via:

window.location.href = `${this.basePath}/checkout`;

Events Handled¶

intlTelInput events¶

Source: International telephone input library (loaded via LWC utility) Purpose: Phone number validation Handler: handleInputPhone method monitors validation state

Styling (CSS)¶

CSS Variables Used¶

None - uses custom CSS classes instead of CSS variables

Custom CSS Classes¶

.membership-background: Hero section background image with overlay effects
.branding-dark-blue-text: Primary brand color (#0c3863) for text
.branding-dark-blue-bg: Primary brand color for backgrounds
.branding-light-blue-text: Accent brand color (#3072d7)
.box-section-heading: Section headers with bottom border
.input-border-color: Consistent border color for inputs (#bebebe)
.option-blue-bg: Selected option background (#3072d7)
.custom-radio-btn, .custom-checkbox-btn: Hidden native inputs
.radio-label, .checkbox-label: Custom styled labels with checkmark pseudo-elements
.error-message: Error text styling (#ae2a19)
.is-invalid: Invalid input styling with red border and background
.scrollable-communities-section: Max-height scrollable container for long lists
.friendly-error: Styled error message box with icon
.auto_renew_styles: Spacing for auto-renewal section

SLDS Classes¶

Component uses Bootstrap classes instead of SLDS: - container-fluid, container-lg - row, col, col-lg-* - card, card-header, card-body - form-control, form-group, form-check - btn, btn-lg - shadow, rounded-pill - text-center, text-white - mb-*, mt-*, p-*, px-*, py-* (spacing utilities)

Responsive Breakpoints¶

Mobile (<768px): Stacked layout, reduced padding, full-width inputs
Tablet (768-1024px): Medium padding adjustments, col-md classes
Desktop (>1024px): Wide container (col-lg-10 col-xl-8), increased side padding (px-lg-20)

Dependencies¶

Lightning Web Components (Base)¶

This component does not use standard Lightning base components. It uses custom HTML/CSS instead.

Custom LWC Components¶

c-intl-tel-input: Phone number validation and formatting (imported implicitly via intlTelInput library)

Apex Classes¶

AccountController.getUserInfo(): Retrieves current user account data
AccountController.upsertAccount(): Creates or updates account record
AccountController.registerUser(): Creates community user for new members
AccountController.getGenderValues(): Fetches gender picklist options
AccountController.getRaceValues(): Fetches race/ethnicity picklist options
AccountController.getUsaSchoolsValues(): Fetches school name picklist for student members
AccountController.isEmailExisting(): Validates email uniqueness
AccountController.getLastMembershipCreatedDate(): Checks membership history
AccountController.allowStudentMembershipForAccount(): Validates student membership eligibility
SelfRegisterController.login(): Authenticates user after registration
ProductController.getMembershipProducts(): Retrieves domestic membership products
ProductController.getAccountCommunityProducts(): Retrieves current community memberships
ProductController.getProductsByFamily(): Retrieves products by family (Communities)
ProductController.getProductBestPrice(): Calculates best price with discounts
ProductController.getInternationalMembershipPrice(): Calculates international pricing
ProductController.getMembershipAutoRenewalCoupon(): Retrieves renewal coupon
ProductController.getPromotionTarget(): Checks for promotional offers
ProductController.getPacContributionProduct(): Retrieves PAC product
ProductController.getTotalAmountPacContributionNew(): Calculates PAC totals
CartController.addMultipleProductsToCart(): Adds multiple products to cart
CartController.applyCouponToTheCart(): Applies promotional coupon
CartController.getCurrentCart(): Retrieves current cart contents
CartController.deleteCart(): Clears cart
CartController.addProductToCart(): Adds single product to cart

Salesforce Objects & Fields¶

Account: All Person Account fields including:
FirstName, MiddleName, LastName
PersonEmail
PersonMailingAddress (Street, City, StateCode, PostalCode, CountryCode)
Phone, MobilePhone
Custom fields: Occupation__c, Current_Employer__c, NPI_Number__c, Gender__c, Race__c, Year_of_Birth__c, Veteran_Status__c, School_Name__c, Join_NP_Research__c, Join_NP_Finder__c, Auto_Renewal__c, Renewal_Rate__c, Exclude_From_Third_Party_Solicitations__c, Preferred_Method_Communication_Text__c, Postmasters_Attested__c, Undergrad_Attested__c
Product2: Membership and community products
Cart: E-commerce cart
CartItem: Individual cart items
Order: Created from cart at checkout
User: Community user record

Static Resources¶

Background image URL: https://membership.aanp.org/images/layout/join.jpg
Checkmark SVG: https://membership.aanp.org/images/icons/checkmark.svg
Inline SVG for icons (check-icon, cross-icon) using data URIs

Labels¶

This component does not use custom labels. All text is hardcoded in the template (potential internationalization issue).

Configuration¶

Component Meta XML¶

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>61.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Membership Wizard</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 in App Builder - designed as full-page component.

User Interactions¶

Actions Available to Users¶

Enter Email (Initial Step - Guest Only)
Trigger: Input email address and click "Get Started"
Result: Validates email, checks for existing account, advances to step 2
Complete Account Information (Step 2)
Trigger: Fill in name, address, phone fields and click "Next"
Result: Validates required fields, saves to Account, advances to membership selection
Select Membership Type (Step 3)
Trigger: Choose membership category (licensed nurse, student, retired, etc.)
Result: Displays appropriate membership products with pricing, updates cart preview
Indicate Military Status (Step 4)
Trigger: Select military service status
Result: Applies military discount if eligible, updates pricing
Select Communities (Step 5)
Trigger: Browse and select community memberships to add
Result: Adds community products to cart, shows pricing
Provide Demographics (Step 6)
Trigger: Fill demographic fields (gender, race, NPI, birth year), opt-in to research/directory
Result: Saves demographic data, advances to checkout
Review and Checkout (Step 7)
Trigger: Review cart, optionally add PAC contribution, click "Proceed to Payment"
Result: Finalizes cart, redirects to checkout page
Enable Auto-Renewal (Multiple Steps)
Trigger: Check auto-renewal checkbox
Result: Applies renewal discount coupon, updates pricing display
Navigate Backward
Trigger: Click "Previous" button
Result: Returns to previous step without losing data (saved in sessionStorage)

Validation & Error Handling¶

Client-Side Validation: - Email: Required, valid email format, uniqueness check via Apex - Confirm Email: Must match email field - Name fields: Required (first, last), character limits - Address: Required fields based on country (address line, city, state/province, postal code) - Phone: Required, valid international format using intlTelInput library - Password (new users): Required, minimum length, must match confirm password - NPI Number: Required for licensed nurses (unless "I don't have an NPI" checked) - Membership selection: Must select one membership type - Demographics: Gender, race, birth year required for research participation

Error Messages: - Email validation: "Please enter a valid email address" - Duplicate email: "An account with this email already exists. Please log in." - Phone validation: "Please enter a valid phone number" - Required field: "[Field name] is required" - Password mismatch: "Passwords do not match" - Generic error: Shows friendly error message box with icon and explanation

Loading States: - Spinner displays during Apex calls (fetching products, saving account, adding to cart) - "Next" button disabled during processing - Progress bar updates smoothly between steps

Data Flow¶

Input Data Flow¶

Component Initialization
    ↓
@wire(getObjectInfo) → Account metadata
    ↓
@wire(getPicklistValues) → Country/State options
    ↓
connectedCallback()
    ↓
Check if authenticated user (isGuest)
    ↓
If authenticated: fetchUserRecord() → getUserInfo Apex
    ↓
Populate accountFields with existing data
    ↓
Retrieve saved wizard state from sessionStorage
    ↓
Display appropriate step

Output Data Flow¶

User fills form fields
    ↓
handleInput() captures changes
    ↓
saveFieldToSessionStorage() persists data
    ↓
User clicks "Next"
    ↓
handleNextStep() validates current step
    ↓
upsertAccount() Apex saves to Account object
    ↓
Product selection triggers addMultipleProductsToCart() Apex
    ↓
Cart populated with membership, communities, discounts
    ↓
Final step: applyCouponToTheCart() for auto-renewal
    ↓
User clicks "Proceed to Payment"
    ↓
Navigate to /checkout page
    ↓
Checkout component reads cart, processes payment

Performance Considerations¶

Render Optimization: - Heavy use of @track may cause unnecessary re-renders (50+ tracked properties) - Conditional rendering (if:true) minimizes DOM size by only rendering current step - sessionStorage reduces need for repeated Apex calls on navigation - localStorage caching of country/state picklists

Data Volume: - Max records displayed: Unlimited for communities list (potential performance issue with many communities) - Pagination: Not implemented - Lazy loading: Not implemented

API Call Optimization: - Caching: sessionStorage for form data, localStorage for picklist values - Debouncing: Not implemented for phone validation (could improve performance) - Multiple Apex calls per step (could be optimized with single composite method)

Known Performance Issues: - 30+ Apex methods called throughout wizard lifecycle - Large JavaScript file (131KB) increases initial load time - Complex DOM manipulation for dropdown menus - Phone validation library (intlTelInput) adds external dependency

ARIA Labels: - Limited ARIA labels present (accessibility gap) - Form labels use for attribute to associate with inputs - No aria-live regions for dynamic content updates - No aria-describedby for error messages

Keyboard Navigation: - Tab order: Natural DOM order (generally correct) - Keyboard shortcuts: None implemented - Focus management: Not actively managed during step transitions - Custom checkbox/radio buttons may have keyboard accessibility issues

Screen Reader Support: - Progress bar lacks aria-valuenow/aria-valuemax attributes - Dynamic step changes not announced - Loading states not announced - Error messages not associated with inputs via aria-describedby

Color Contrast: - Passes WCAG AA: Most elements (needs verification) - Error red (#ae2a19) has good contrast on white - Blue text (#3072d7) on white may be borderline - Gray text (#434343) on white needs verification

Accessibility Gaps: - Custom styled checkboxes/radios hide native inputs (potential screen reader issues) - Dropdown menus use custom JavaScript (may not follow ARIA menu patterns) - Modal confirmations may not trap focus - No skip navigation link for long forms

Testing¶

Jest Tests¶

Test File: No test file exists Coverage: 0%

Recommended Test Scenarios: - ✗ Component renders correctly for guest users - ✗ Component renders correctly for authenticated users - ✗ Email validation works correctly - ✗ Country/state dropdown population works - ✗ Step navigation (next/previous) functions - ✗ Form data persists in sessionStorage - ✗ Product selection updates cart preview - ✗ Auto-renewal applies discount correctly - ✗ International pricing calculates correctly - ✗ Phone validation with intlTelInput works - ✗ Error messages display appropriately - ✗ Checkout redirect functions correctly

Manual Testing Checklist¶

[ ] Desktop browser (Chrome, Firefox, Safari)
[ ] Mobile browser (iOS Safari, Android Chrome)
[ ] Salesforce Mobile App (if accessible)
[ ] Tablet view
[ ] Accessibility (screen reader, keyboard-only)
[ ] Guest user flow (new member registration)
[ ] Authenticated user flow (renewal)
[ ] US address with various states
[ ] International address with various countries
[ ] Student membership eligibility
[ ] Military discount application
[ ] Community selection with many communities
[ ] Auto-renewal with discount coupon
[ ] PAC contribution addition
[ ] Phone number validation for various countries
[ ] Browser back button behavior
[ ] Session timeout handling
[ ] Slow network conditions (3G simulation)
[ ] Cart synchronization across tabs/windows

Usage Examples¶

In App Builder¶

Navigate to Experience Builder
Create or edit a page
Drag "Membership Wizard" component from component list
Component takes full width - no configuration needed
Publish page
Assign page to appropriate URL route (e.g., /join-renew)

In Parent Component¶

Not designed to be embedded in other components. Standalone page component only.

Programmatic Access¶

Not applicable - no public API methods.

Changes & History¶

Major Refactoring Notes: - Component has grown to 3800+ lines over time (architectural debt) - sessionStorage usage added for data persistence during wizard navigation - intlTelInput library integration for international phone validation - PAC contribution integration added to checkout step - Auto-renewal coupon application logic added - Student membership eligibility checks added - International pricing logic added

Known Technical Debt: - Should be broken into smaller child components (step components, form components) - Significant code duplication with registerAccountForm component - Some methods exceed 200 lines (violates clean code principles) - Magic strings used for step names (should be constants) - Inconsistent error handling patterns - Mixed concerns (UI logic, business logic, data persistence)

Pre-Go-Live Concerns¶

CRITICAL - Fix Before Go-Live¶

No automated tests: 3800-line component with zero test coverage creates massive risk
SessionStorage data persistence: Sensitive PII stored in browser storage without encryption
Error handling gaps: Network failures, Apex exceptions not consistently handled
Accessibility violations: WCAG AA compliance not verified, keyboard navigation incomplete
Security audit needed: Email validation, XSS prevention, data exposure risks
Performance at scale: Untested with high concurrent user volumes
Mobile experience: Complex multi-step wizard not thoroughly tested on mobile devices

HIGH - Address Soon After Go-Live¶

Component complexity: 3800 lines violates all maintainability principles (should be <500 lines)
Memory leaks: Complex object references, event listeners, potential memory issues
State synchronization: Race conditions possible with concurrent Apex calls
Browser compatibility: intlTelInput library compatibility across all browsers
Data validation: Server-side validation must duplicate all client-side checks
Loading performance: 131KB JavaScript file impacts page load time
Incomplete error recovery: Users cannot easily recover from mid-wizard failures
No analytics/monitoring: Cannot track conversion funnel, abandonment points

MEDIUM - Future Enhancement¶

Architectural redesign: Break into smaller, testable, reusable components
Code deduplication: Consolidate with registerAccountForm component
Internationalization: Move hardcoded text to custom labels
User experience: A/B test step order, reduce required fields, improve mobile flow
Progress saving: Backend storage of partial progress for resume-later functionality
Smart defaults: Pre-populate fields based on geolocation, browser data
Inline help: Add tooltips, contextual help for complex fields
Real-time pricing: Show pricing updates without page navigation

LOW - Monitor¶

Browser caching: Aggressive caching of component JavaScript may cause update issues
Third-party dependencies: intlTelInput library updates may introduce breaking changes
Picklist maintenance: Country/state picklists must stay synchronized with USPS standards
Image hosting: External image URLs (membership.aanp.org) create dependency
sessionStorage limits: Browser storage limits could be exceeded with large datasets
URL parameters: Consider URL-based step navigation for deep linking
Analytics events: Add Google Analytics or similar for conversion tracking

Maintenance Notes¶

Complexity: Very High (Highest Risk Component in LWC Portfolio) Recommended Review Schedule: - Weekly during membership campaigns and renewal periods - Monthly for code quality and technical debt reduction - Quarterly for comprehensive security and accessibility audits

Key Maintainer Notes: - CRITICAL: This component is the primary revenue driver for AANP. Any bugs directly impact revenue. - Component size: 3800 lines makes this extremely difficult to maintain. Top priority for refactoring. - Code duplication: Shares 40-50% code with registerAccountForm. Refactoring should consolidate shared logic. - SessionStorage dependencies: Changes to data structure require careful migration logic. - Apex dependencies: Changes to any of 20+ Apex methods may break wizard functionality. - Breaking changes impact: This component is not versioned. All changes go live immediately. - Testing requirements: Manual end-to-end testing required for all changes. No automated safety net. - Performance monitoring: Monitor page load time, step completion time, abandonment rates. - Error monitoring: Implement comprehensive error tracking (Splunk, Datadog, etc.). - Multi-step state: Complex state machine logic. Draw state diagram before making changes. - Cart integration: Tightly coupled to cart/checkout system. Test cart synchronization thoroughly.

Deployment Risks: - HIGH: No rollback mechanism for LWC components - HIGH: No canary deployment or gradual rollout capability - HIGH: Production hotfixes require emergency change approval - MEDIUM: Cache invalidation may delay user-visible updates

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)

Performance Benchmarks (needs measurement): - Initial page load: Target <3 seconds - Step navigation: Target <500ms - Apex call response: Target <2 seconds - Checkout redirect: Target <1 second

Security Considerations: - Regular security review of data handling in sessionStorage - Audit for XSS vulnerabilities in dynamic content rendering - Verify SOQL injection prevention in Apex controllers - Check for CSRF protection on form submissions - Validate all user input on server side (never trust client validation) - Ensure PII is transmitted over HTTPS only - Review field-level security and sharing rules

Documentation Debt: - No architectural diagrams exist - State machine transitions not documented - Business logic rules not centrally documented - Integration points not fully mapped - Data model relationships not diagrammed

Recommended Next Steps: 1. Immediate: Implement automated testing (Jest unit tests, E2E tests) 2. Short-term: Add comprehensive error handling and user feedback 3. Medium-term: Break component into smaller, focused child components 4. Long-term: Complete architectural redesign with modern patterns (state management library, separation of concerns)