Package Management

The application manages subscription levels and billing frequencies using a dedicated Redux slice and RTK Query endpoints.

State Management (src/redux/features/package/slice.ts)

The package slice tracks the user’s current subscription tier and billing cycle.

Actions & Selectors

• setPackage: Updates the currentPackage (e.g., Hobby, Pro, Enterprise) and the frequency (Monthly, Yearly, Lifetime).
• selectCurrentPackage: A selector to access the current subscription state.

import { EBillingPeriod, EPackage } from "@/lib/paddle/pricing-types";
 
// State impact
state.currentPackage = EPackage.PRO;
state.frequency = EBillingPeriod.MONTHLY;

Usage in Components

Feature Gating

Components can react to the user’s subscription level to enable or disable features.

const { currentPackage } = useSelector(selectCurrentPackage);
const isPro = currentPackage === EPackage.PRO || currentPackage === EPackage.ENTERPRISE;
 
return (
  <Button disabled={!isPro}>Premium Feature</Button>
);

API Integration (package-api.ts)

The packageApi handles communication with the backend for order history and subscription management.

• getSubscriptions: Fetches the user’s orders and automatically dispatches setPackage based on the active subscription found in the response.
• cancelSubscriptions: Allows users to cancel their current plan.
• getUpdatePaymentMethodTransaction: Facilitates updating payment details through Paddle.