Skip to content

Component Name: redirectToCheckout

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

API Name: c-redirectToCheckout Type: Service Component Target: lightningCommunity__Page, lightningCommunity__Default

Business Purpose

This component handles the automated process of adding multiple products to the shopping cart and redirecting users to the checkout page. It's specifically designed to support the membership renewal workflow where members select a membership product along with optional community products, and the system automatically applies renewal discount coupons.

User Interface

Visual Description

  • Layout: Single loading message with spinner
  • Key UI Elements: Loading text, animated loading circles (via c-form-loading)
  • Responsive: Full-width centered message

Screenshots

  • Desktop view: Centered loading message
  • Mobile view: Same centered message

Component Structure

Files

  • redirectToCheckout.html - Template/markup
  • redirectToCheckout.js - JavaScript controller (80 lines)
  • redirectToCheckout.js-meta.xml - Metadata configuration

HTML Template Structure

<template>
  <section class="container-fluid">
    <div class="membership">
      <h2>Redirecting to checkout. Please do not close this page</h2>
      <c-form-loading></c-form-loading>
    </div>
  </section>
</template>

Key Template Features: - Minimal UI - just loading message - Uses c-form-loading for animated spinner - Static content (no conditional rendering)

JavaScript Controller

Properties (API)

No public @api properties

Tracked Properties

hasProcessed

  • Type: Boolean
  • Purpose: Prevents duplicate processing of URL parameters
  • Updated When: Set to true after first processing

Wire Adapters

@wire(CurrentPageReference)

@wire(CurrentPageReference)
getStateParameters(currentPageReference) {
   if (!this.hasProcessed && currentPageReference && currentPageReference.state?.communityId) {
        this.hasProcessed = true;
        this.handleAsyncCheckout(currentPageReference);
    }
}

Purpose: Retrieves URL parameters from page reference Fields Retrieved: communityId, productsIds, effectiveAccountId, memebershipProductId Error Handling: Checks for hasProcessed flag to prevent duplicate execution

Public Methods

None - component operates autonomously

Event Handlers

None - component uses async/await pattern

Private Methods

handleAsyncCheckout

Purpose: Main orchestration method that adds products to cart, applies coupon, and redirects Called By: getStateParameters wire adapter

Purpose: Navigates to checkout page after 4-second delay Called By: handleAsyncCheckout after products are added

Events

Events Dispatched

None - uses NavigationMixin instead

Events Handled

None

Styling (CSS)

CSS Variables Used

Not applicable

Custom CSS Classes

  • .membership: Container styling
  • .membership-background: Background styling
  • Bootstrap utility classes

SLDS Classes

None

Responsive Breakpoints

  • Fully responsive via Bootstrap classes

Dependencies

Lightning Web Components (Base)

None

Custom LWC Components

  • c-form-loading: Animated loading spinner

Apex Classes

  • CartController.addMultipleProductsToCart(): Adds array of products to cart
  • CartController.applyCouponToTheCart(): Applies coupon code to cart
  • ProductController.getMembershipAutoRenewalCoupon(): Gets auto-renewal discount coupon

Salesforce Objects & Fields

None directly accessed

Static Resources

None

Labels

None

Configuration

Component Meta XML

<targets>
    <target>lightningCommunity__Page</target>
    <target>lightningCommunity__Default</target>
</targets>

Available On: - Community Page - Community Default

Design Properties

None

User Interactions

Actions Available to Users

None - component runs automatically

Validation & Error Handling

Client-Side Validation: - Checks for required URL parameters (communityId) - Validates hasProcessed flag

Error Messages: - Errors logged to console only - No user-facing error messages (user just sees loading screen indefinitely on error)

Loading States: - Always shows loading state while processing

Data Flow

Input Data Flow

URL Parameters (page state)
    ↓
getStateParameters wire
    ↓
handleAsyncCheckout
    ↓
addMultipleProductsToCart
    ↓
getMembershipAutoRenewalCoupon (if membership)
    ↓
applyCouponToTheCart
    ↓
navigateToCheckout

Output Data Flow

Products added to cart
    ↓
Coupon applied (if membership)
    ↓
Redirect to /checkout

Performance Considerations

Render Optimization: - Minimal DOM - just loading message - No unnecessary re-renders

Data Volume: - Processes variable number of product IDs from URL

API Call Optimization: - Sequential API calls (could potentially be optimized) - Hardcoded 4-second delay before redirect (line 71-78)

Accessibility (a11y)

ARIA Labels: - None

Keyboard Navigation: - Not applicable (no interactive elements)

Screen Reader Support: - Loading message announced - No dynamic updates announced

Color Contrast: - Passes WCAG AA: Likely yes (needs verification)

Testing

Jest Tests

Test File: None Coverage: 0%

Test Scenarios: - ✗ No tests currently exist

Manual Testing Checklist

  • [ ] Desktop browser redirect flow
  • [ ] Mobile browser redirect flow
  • [ ] With membership product and coupon
  • [ ] Without membership product (no coupon)
  • [ ] Multiple community products
  • [ ] Error scenarios (invalid product IDs, etc.)
  • [ ] Network slow conditions

Usage Examples

In App Builder

  1. Create dedicated page for checkout redirect
  2. Add component to page
  3. Configure routing to pass URL parameters

URL Parameters Expected

?communityId=0DB...&productsIds=01t...,01t...&effectiveAccountId=001...&memebershipProductId=01t...

Changes & History

  • 2025-09-29: Latest version

⚠️ Pre-Go-Live Concerns

CRITICAL - Fix Before Go-Live

  • No error handling for user: If Apex calls fail, user stares at loading screen forever with no error message or retry option
  • Hardcoded 4-second delay: Line 71-78 has arbitrary 4-second setTimeout - could be too short for slow connections or too long for fast ones
  • Typo in parameter name: "memebershipProductId" should be "membershipProductId" (line 27) - typo in entire codebase
  • No timeout: User could wait indefinitely if Apex call hangs

HIGH - Address Soon After Go-Live

  • No loading progress indicator: User has no idea how long they'll wait
  • Coupon application failure is silent: Lines 54-56 redirect even if coupon fails, user won't know they didn't get discount
  • Console.log in production: Lines 29-30, 39, 49 have console.log statements
  • No validation of productIds format: Assumes comma-separated string, could break with malformed input

MEDIUM - Future Enhancement

  • Add retry mechanism: Allow user to retry if cart operations fail
  • Add progress steps: Show "Adding products...", "Applying discount...", "Redirecting..."
  • Make delay configurable: Remove hardcoded 4-second delay
  • Add error recovery: Redirect to product page with error message on failure

LOW - Monitor

  • eslint-disable comment: Line 70 disables async-operation lint rule
  • Could parallelize some operations: getMembershipAutoRenewalCoupon could be called before addMultipleProductsToCart completes
  • No analytics tracking: Component doesn't track success/failure rates

Maintenance Notes

Complexity: Low Recommended Review Schedule: Annually

Key Maintainer Notes: - Component is critical path for membership renewals - any bugs block checkout - Typo "memebershipProductId" exists throughout codebase, fix would require coordinated change - 4-second delay is arbitrary - consider making it dynamic based on number of products - Error handling is minimal - consider adding user-facing error messages - Component has no recovery mechanism if Apex calls fail - Used in membership wizard checkout flow - test thoroughly before any changes

Browser Compatibility: - Chrome: Latest - Firefox: Latest - Safari: Latest - Mobile: iOS 12+, Android 8+