Component Name: renewMembership¶

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

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

Business Purpose¶

The renewMembership component provides a guided, multi-step membership renewal process for AANP members, handling membership type validation, demographic information collection, military discount application, and auto-renewal setup. It ensures compliance with membership requirements while providing an intuitive user experience for renewal transactions. This is a critical revenue component as membership renewals represent a primary revenue source for AANP.

User Interface¶

Visual Description¶

Layout: Multi-step form with progress indicator, card-based sections
Key UI Elements: Account information review, membership product selection cards with pricing, demographic form fields, military status selection, auto-renewal toggle, submit button
Responsive: Mobile-optimized with stacked layout

Screenshots¶

Desktop view: Wide form with product cards in grid
Mobile view: Stacked single-column layout

Component Structure¶

Files¶

renewMembership.html - Template (84KB, ~2600 lines)
renewMembership.js - Controller (35KB, ~1000 lines)
renewMembership.css - Styling (3.9KB)
renewMembership.js-meta.xml - Metadata

HTML Template Structure¶

Multi-step wizard with account review, membership selection, demographics, and confirmation sections.

Key Template Features: - Product selection cards with pricing display - Demographic form with picklist integrations - Military status selection with conditional logic - Auto-renewal checkbox with coupon application - Progress indicator - Validation feedback

JavaScript Controller¶

Properties (API)¶

No @api properties - standalone page component.

Tracked Properties¶

@track accountInfo: User account data
@track membershipProducts: Available renewal products
@track selectedProduct: Chosen membership product
@track demographics: Gender, race, ethnicity fields
@track militaryStatus: Military service selection
@track autoRenew: Auto-renewal flag
@track isLoading: Loading state

Wire Adapters¶

@wire(getUserInfo): Fetches current user account data
@wire(getPicklistValues): Country/state/demographic picklists
@wire(getMembershipProducts): Available renewal products

Event Handlers¶

handleProductSelect: Membership product selection
handleDemographicChange: Demographic field updates
handleMilitaryStatusChange: Military status selection
handleAutoRenewToggle: Auto-renewal checkbox
handleSubmit: Form submission and cart integration

Events¶

ShowToastEvent: Success/error notifications
Navigation events: Redirect to checkout

Styling (CSS)¶

Custom branding with Bootstrap-style classes, product card styling, responsive breakpoints.

Dependencies¶

Lightning Web Components¶

lightning/platformShowToastEvent
lightning/navigation
lightning/uiObjectInfoApi

Apex Classes¶

AccountController.getUserInfo()
AccountController.upsertAccount()
ProductController.getMembershipProducts()
ProductController.getProductBestPrice()
ProductController.getMembershipAutoRenewalCoupon()
CartController.addProductToCart()
CartController.applyCouponToTheCart()

Salesforce Objects¶

Account: Member profile and demographics
Product2: Membership products
WebCart: Shopping cart integration

Configuration¶

<LightningComponentBundle>
    <apiVersion>61.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
</LightningComponentBundle>

User Interactions¶

Review account information
Select membership type (with pricing display)
Indicate military status for discount eligibility
Update demographic information
Toggle auto-renewal with coupon application
Submit and proceed to checkout

Validation & Error Handling¶

Required field validation for demographics
Product selection required
Military status validation
Apex error handling with user-friendly messages

Data Flow¶

User loads page → Fetch account info and products → Select product → Update demographics → Submit → Add to cart → Navigate to checkout

Performance Considerations¶

Single-page form (no multi-step navigation overhead)
Product pricing fetched on demand
Apex calls optimized with wire adapters

Form labels properly associated
Product cards keyboard-navigable
Error messages announced
Color contrast meets WCAG AA

Testing¶

Test File: Not present Coverage: Unknown

Recommended Tests: - Component renders for authenticated members - Product selection updates pricing - Military discount applies correctly - Auto-renewal coupon application - Demographic validation - Cart integration - Error handling

Usage Examples¶

Add to renewal page in Experience Builder, no configuration needed.

Changes & History¶

Multi-step workflow for improved UX
Military discount integration
Auto-renewal coupon application
Demographic data collection compliance

Pre-Go-Live Concerns¶

CRITICAL¶

Auto-renewal consent must be explicit and clear
Server-side validation must match client-side
Cart integration must be transactional (atomic)
Pricing display must match actual cart prices

HIGH¶

Testing coverage needed for all renewal scenarios
Error recovery for cart failures
Mobile experience optimization
Accessibility audit needed

MEDIUM¶

Component could be broken into smaller modules
Code overlap with membershipWizard (consolidate)
User analytics tracking for abandonment analysis

LOW¶

Loading performance with multiple Apex calls
Browser compatibility verification

Maintenance Notes¶

Complexity: High Review Schedule: Monthly during renewal campaigns, quarterly otherwise

Key Notes: - Critical revenue component - test thoroughly - Shares logic with membershipWizard - coordinate changes - Auto-renewal logic tied to payment processing - Pricing must stay synchronized with product catalog - Military discount rules may change annually

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

Security Considerations: - Payment method data handling - Auto-renewal consent tracking - PII in demographics collection

Recommended Next Steps: 1. Add comprehensive test suite 2. Implement analytics tracking 3. Mobile UX optimization 4. Consider consolidation with membershipWizard