React Subscription Management System

This challenge asks you to build a simplified subscription management system using React and TypeScript. The system will allow users to view available subscription plans, select a plan, and track their subscription status. This is a common feature in many applications, from SaaS platforms to media services, and understanding how to implement it is a valuable skill.

Problem Description

You are tasked with creating a React component that displays a list of subscription plans and allows a user to select one. The component should maintain the user's selected subscription and display its details. The system should handle initial state, plan selection, and display of subscription details. The component should be well-structured, readable, and follow TypeScript best practices.

Key Requirements:

• Subscription Plans: Define an interface for a subscription plan with properties like id, name, price, and description.
• Plan Display: Display a list of subscription plans, showing their name, price, and a brief description.
• Plan Selection: Allow the user to select a subscription plan.
• Subscription Details: When a plan is selected, display the full details of that plan.
• State Management: Use React's state management to track the selected subscription plan.
• TypeScript: Utilize TypeScript for type safety and improved code maintainability.

Expected Behavior:

1. The component should render a list of subscription plans.
2. Clicking on a plan should update the component's state to reflect the selected plan.
3. After a plan is selected, the component should display the full details of the selected plan below the list of plans.
4. If no plan is selected, a message indicating "No subscription selected" should be displayed.

Edge Cases to Consider:

• What happens if the list of subscription plans is empty? Display a message indicating that no plans are available.
• How will you handle potential errors if the data fetching fails (although data fetching is not explicitly required for this challenge, consider how you would handle it)?
• Consider how the component would scale if you needed to add more features, such as a checkout process or user authentication.

Examples

Example 1:

Input:
const subscriptionPlans = [
  { id: 1, name: "Basic", price: 9.99, description: "Essential features for beginners." },
  { id: 2, name: "Premium", price: 19.99, description: "Advanced features and priority support." },
  { id: 3, name: "Enterprise", price: 49.99, description: "Unlimited access and dedicated account manager." }
];
Initially, no plan is selected.

Output:
A list of the three subscription plans is displayed.  Clicking "Premium" selects it.  Below the list, the details of the "Premium" plan are displayed.

Explanation:
The component renders the list of plans.  When the user clicks "Premium", the state is updated to store the "Premium" plan. The component then re-renders, displaying the details of the selected plan.

Example 2:

Input:
const subscriptionPlans = [];

Output:
A message "No subscription plans available." is displayed.

Explanation:
The component checks if the `subscriptionPlans` array is empty. If it is, it displays a message indicating that no plans are available.

Constraints

• Component Structure: The solution should be a single React component.
• Data: You can hardcode the subscription plan data within the component for simplicity. No external API calls are required.
• Styling: Basic styling is acceptable (e.g., using inline styles or CSS modules). Focus on functionality over elaborate styling.
• Performance: The component should render efficiently for a reasonable number of subscription plans (up to 10).
• TypeScript: All code must be written in TypeScript and adhere to good TypeScript practices.

Notes

• Consider using functional components and hooks (e.g., useState) for managing state.
• Think about how to structure your component to make it reusable and maintainable.
• Focus on creating a clear and concise solution that meets the requirements.
• While error handling isn't explicitly required, consider how you would approach it in a real-world scenario. A simple conditional check for an empty plan list is a good starting point.
• The goal is to demonstrate your understanding of React, TypeScript, and state management.