index.tsx

Overview

This file defines a React functional component named Plan that presents a subscription pricing interface for users. It displays the user's current balance, benefits of upgrading the plan, and a selection of pricing tiers with toggles for monthly or yearly billing cycles. The component integrates UI elements such as cards, segmented controls, and buttons to create an interactive and visually organized pricing page section.

The main purpose of this file is to provide users with clear information about subscription plans, their features, and allow them to view and potentially upgrade their plan. It leverages reusable UI components and icons from libraries, ensuring consistency with the application's design system.

Detailed Explanation

Constants and Data Structures

`pricingData`

Type: Array<Object>
Purpose: Stores the details of the available subscription plans.
Structure: Each plan object contains:
- title: The name of the plan (e.g., 'Free', 'Pro', 'Enterprise').
- price: The cost of the plan as a string.
- description: A short description of the plan.
- features: An array of feature objects, each with a name and value.
- buttonText: Text displayed on the action button for the plan.
- buttonVariant: Visual style variant of the button ('outline' | 'default' | 'secondary').
- Optional flags like isPro and isEnterprise to indicate plan types.

Example:

{
  title: 'Pro',
  price: '$16.00',
  description: 'For professional use.',
  features: [
    { name: 'Project', value: 'Unlimited projects' },
    { name: 'Storage', value: '100 Gb' },
    { name: 'Team', value: 'Unlimited members' },
    { name: 'Features', value: 'Basic features All advanced features' },
  ],
  buttonText: 'Upgrade',
  buttonVariant: 'default',
  isPro: true,
}

React Component: `Plan`

Purpose

Renders the subscription plan page section including:

Current user balance.
List of upgrade benefits.
Segmented control for toggling billing period (monthly/yearly).
Pricing cards for each available plan.

Internal State

val: string — Stores the current selected billing period ('monthly' or 'yearly'). Initialized to 'monthly'.

Hooks Used

useState — For managing the billing period selection.
useMemo — To memoize the options for the segmented control, improving performance by preventing unnecessary recalculations.

Variables inside the component

options: An array of objects representing the billing period toggle options:

[
  { label: 'Monthly', value: 'monthly' },
  { label: 'Yearly', value: 'yearly' },
]

list: Array of strings describing the extra benefits users get when upgrading.

Methods and Handlers

`handleChange(path: SegmentedValue): void`

Purpose: Updates the billing period state when the user selects a different toggle option.
Parameters:
- path: The newly selected segmented value (expected 'monthly' or 'yearly').
Returns: None (void).
Usage: Passed as the onChange handler to the Segmented UI component.

JSX Structure and UI Layout

Main section with padding.
Title: "Plan & balance" in large bold font.
Balance Card:
- Displays current balance (hardcoded $ 100.00).
- Shows equivalent tokens and storage info.
- Includes a small "Recharge" button with a LogOut icon (likely intended as a "Recharge" or "Top-up" action).
Upgrade Access Card:
- Section title "Upgrade to access".
- List of upgrade benefits rendered with CircleCheckBig icons.
- Segmented control to toggle between monthly and yearly billing.
- Grid of PricingCard components rendered from pricingData, passing each plan's details as props.

Imported Components and Dependencies

Import Source	Imported Entities	Purpose
`@/components/ui/button`	`Button`	Reusable button component
`@/components/ui/card`	`Card`, `CardContent`	Card container components for layout and content
`@/components/ui/segmented`	`Segmented`, `SegmentedValue`	UI segmented toggle component for billing cycle
`lucide-react`	`CircleCheckBig`, `LogOut`	SVG icon components for UI
`react`	`useMemo`, `useState`	React hooks for state and memoization
`./pricing-card`	`PricingCard`	Custom component rendering individual pricing details

Usage Example

import Plan from './index';

function App() {
  return (
    <div>
      <Plan />
    </div>
  );
}

Rendering <Plan /> will display the pricing page section with balance, upgrade benefits, billing toggle, and pricing cards.

Important Implementation Details

Billing Period Toggle:
The billing period toggle (Segmented component) controls the val state but the pricing data does not dynamically change based on selection. This suggests that either the pricing does not depend on billing cycle yet, or further integration is expected.
Pricing Cards:
The PricingCard component (imported from ./pricing-card) is responsible for rendering each plan's detailed view. This file delegates detailed rendering and action handling to that component, focusing here on the overall layout.
Static Balance:
The balance displayed is currently hardcoded as $ 100.00, with static equivalents for tokens and storage. Integration with user account data would be necessary to make this dynamic.
Icons Usage:
The file uses icons from lucide-react to visually enhance the UI elements such as check marks for features and the recharge button.

Interaction with Other Parts of the System

PricingCard component:
- This file depends on PricingCard to render individual plans.
- The props passed to PricingCard come directly from the pricingData array, allowing separation of concerns.
UI Library Components:
- Uses shared UI components (Button, Card, Segmented) from the app's internal UI library (@/components/ui), ensuring consistent styling and behavior across the app.
Icons from lucide-react:
- Provides scalable vector icons consistent with app UI.
No explicit external data fetching:
- Pricing and balance data are currently static, indicating that integration with APIs or global state management is handled elsewhere or is pending.

Mermaid Diagram

componentDiagram
    Plan -- uses --> Button
    Plan -- uses --> Card
    Plan -- uses --> CardContent
    Plan -- uses --> Segmented
    Plan -- uses --> PricingCard
    Plan -- uses --> CircleCheckBig
    Plan -- uses --> LogOut

    Plan {
        +state val: string
        +options: Array<{label, value}>
        +handleChange(path: SegmentedValue): void
        +render(): JSX.Element
    }

    PricingCard <.. Plan : "maps pricingData to props"

Summary

The index.tsx file is a React component responsible for rendering the subscription plan overview and upgrade interface. It displays user balance, upgrade benefits, billing period toggle, and pricing options using reusable UI components and icons, with data statically defined inside the file. The component is designed for clear presentation and interaction for users considering plan upgrades, delegating detailed plan rendering to the PricingCard component.