Build a React Subscription Management System

This challenge asks you to build a front-end system for managing user subscriptions. This is a fundamental feature for many SaaS products, allowing users to view, upgrade, downgrade, or cancel their plans. You will be creating a user interface that displays subscription options, allows users to select a plan, and provides feedback on their current subscription status.

Problem Description

Your task is to create a React component-based application that simulates a subscription management system. The system should allow users to:

• View Available Plans: Display a list of different subscription plans with their features, pricing, and benefits.
• Select a Plan: Enable users to choose a plan they wish to subscribe to.
• Manage Current Subscription: Show the user's currently active subscription plan.
• Upgrade/Downgrade: Allow users to switch between available plans.
• Cancel Subscription: Provide an option to cancel their current subscription.

The system should reactively update the UI based on the user's actions and their current subscription status.

Key Requirements:

1. Plan Display: Render a list of distinct subscription plans. Each plan should have a name, description, price, and a list of features.
2. Current Subscription Indicator: Clearly indicate which plan the user is currently subscribed to.
3. Action Buttons: For each available plan, display appropriate action buttons (e.g., "Subscribe", "Upgrade", "Downgrade"). For the currently active plan, display a "Cancel Subscription" button.
4. State Management: Manage the user's subscription state (which plan they are subscribed to, or if they have no subscription) within your React application.
5. User Interaction: Implement event handlers to process user clicks on action buttons. These handlers should update the application's state.
6. Dynamic UI Updates: The UI should dynamically update to reflect the new subscription state after an action is performed. For example, after subscribing to a new plan, the "Current Subscription" should update, and the buttons for other plans should change accordingly.
7. TypeScript: All code should be written in TypeScript.

Expected Behavior:

• When a user is not subscribed, they should see all plans with a "Subscribe" button.
• When a user is subscribed to a plan, that plan should be highlighted as "Current Subscription," and its action button should show "Cancel Subscription." Other plans should show "Upgrade" or "Downgrade" buttons depending on their tier relative to the current plan.
• Clicking "Subscribe" or "Upgrade" should change the user's current subscription to the selected plan.
• Clicking "Downgrade" should change the user's current subscription to the selected plan.
• Clicking "Cancel Subscription" should set the user's subscription status to "none."

Edge Cases:

• What happens if there are no plans available? (Though for this challenge, assume there will always be at least one plan).
• How do you handle the initial state where a user has no subscription?

Examples

Example 1: Initial State (No Subscription)

Input: (Initial state, no user data)
Output:
---
Available Plans:

**Basic Plan**
*   Price: $10/month
*   Features:
    *   10 GB Storage
    *   2 Users
    *   Email Support

[Subscribe Button]

**Pro Plan**
*   Price: $20/month
*   Features:
    *   100 GB Storage
    *   5 Users
    *   Priority Email Support

[Subscribe Button]

**Enterprise Plan**
*   Price: $50/month
*   Features:
    *   Unlimited Storage
    *   Unlimited Users
    *   Dedicated Account Manager

[Subscribe Button]

---
Current Subscription: None

Explanation: The user has no active subscription. All plans are displayed with a "Subscribe" button.

Example 2: User Subscribed to Basic Plan

Input: (User is subscribed to "Basic Plan")
Output:
---
Available Plans:

**Basic Plan** (Current Subscription)
*   Price: $10/month
*   Features:
    *   10 GB Storage
    *   2 Users
    *   Email Support

[Cancel Subscription Button]

**Pro Plan**
*   Price: $20/month
*   Features:
    *   100 GB Storage
    *   5 Users
    *   Priority Email Support

[Upgrade Button]

**Enterprise Plan**
*   Price: $50/month
*   Features:
    *   Unlimited Storage
    *   Unlimited Users
    *   Dedicated Account Manager

[Upgrade Button]

---
Current Subscription: Basic Plan

Explanation: The "Basic Plan" is marked as the current subscription, and the button is "Cancel Subscription." The "Pro Plan" and "Enterprise Plan" have "Upgrade" buttons.

Example 3: User Subscribed to Pro Plan, Clicks Cancel

Input: (User is subscribed to "Pro Plan", then clicks "Cancel Subscription")
Output:
---
Available Plans:

**Basic Plan**
*   Price: $10/month
*   Features:
    *   10 GB Storage
    *   2 Users
    *   Email Support

[Subscribe Button]

**Pro Plan** (Current Subscription)
*   Price: $20/month
*   Features:
    *   100 GB Storage
    *   5 Users
    *   Priority Email Support

[Cancel Subscription Button]

**Enterprise Plan**
*   Price: $50/month
*   Features:
    *   Unlimited Storage
    *   Unlimited Users
    *   Dedicated Account Manager

[Upgrade Button]

---
Current Subscription: Pro Plan

(After clicking Cancel Subscription on Pro Plan)

---
Available Plans: (UI remains the same, but buttons might change if the state updates to 'none')

**Basic Plan**
*   Price: $10/month
*   Features:
    *   10 GB Storage
    *   2 Users
    *   Email Support

[Subscribe Button]

**Pro Plan**
*   Price: $20/month
*   Features:
    *   100 GB Storage
    *   5 Users
    *   Priority Email Support

[Subscribe Button]

**Enterprise Plan**
*   Price: $50/month
*   Features:
    *   Unlimited Storage
    *   Unlimited Users
    *   Dedicated Account Manager

[Subscribe Button]

---
Current Subscription: None

Explanation: After canceling the "Pro Plan," the user's subscription status changes to "None," and all plans revert to showing "Subscribe" buttons.

Constraints

• Number of Plans: Assume there will be between 1 and 5 subscription plans.
• Plan Data Structure: Each plan will have a unique id (string), name (string), description (string), price (number, representing monthly cost), and features (array of strings).
• Subscription State: The user's subscription state can be null (no subscription), or the id of the currently subscribed plan.
• Performance: The application should be responsive for typical browser usage. No complex performance optimizations are required beyond standard React best practices.

Notes

• You will need to define the structure for your subscription plans and the user's subscription state using TypeScript interfaces or types.
• Consider how you will represent the available plans. A simple array of plan objects would be a good starting point.
• Think about the logic for determining whether to display "Upgrade," "Downgrade," or "Subscribe" buttons based on the current subscription and the plan being viewed. You might want to assign a "tier" or "level" to each plan to facilitate this comparison.
• This challenge focuses on the front-end logic and UI. You do not need to implement any actual API calls or backend logic. Simulate state changes directly within your React components.