Package Management

Package Slice State Management

Package Slice Overview

The package slice (src/redux/features/package/package-slice.ts) manages subscription and billing state for the application. It handles the current subscription package type and billing frequency preferences, providing centralized state management for payment-related functionality throughout the application.

Package Actions & Reducers

setPackage - Update subscription package and billing frequency

• Purpose: Set the current subscription package type and optional billing frequency
• How it works: Updates both package type and billing frequency in a single atomic operation
• Use cases:
  • Initial package selection during signup
  • Package upgrades/downgrades
  • Billing frequency changes
  • Payment completion callbacks
• State impact: Updates state.currentPackage and state.frequency simultaneously
• Payload structure:

  {
    currentPackage: PackageType;    // Required package type
    frequency?: BillingPeriod;      // Optional billing frequency
  }

Package State Access Patterns

selectCurrentPackage - Complete package state selector

• Purpose: Provides access to the entire package state object
• Returns: Complete package state with currentPackage and frequency
• Use cases: Components needing subscription information for UI rendering
• Performance: Direct state selector for efficient access

Usage Patterns Throughout Application

Feature Gating

const { currentPackage } = useSelector(selectCurrentPackage);
// Conditional feature access based on package
const canAccessFeature = currentPackage !== PackageType.HOBBY;
const hasAdvancedFeatures = currentPackage === PackageType.ENTERPRISE;

Billing Display

const { currentPackage, frequency } = useSelector(selectCurrentPackage);
 
// Show current subscription details
const displayBilling = `${currentPackage} - ${frequency} billing`;