Pricing Component
Relevant source files
The following files were used as context for generating this wiki page:The Pricing component is a key user-facing element responsible for displaying the available subscription plans for the OptiFlow application. It is designed to present pricing information in a clear and transparent manner, allowing users to compare different tiers and toggle between monthly and annual billing options. The component is self-contained, managing its own state for the billing cycle and dynamically rendering the plan details from a predefined data structure.
This component is integrated into the main application view, appearing after the CostCalculator and before the final call-to-action. It is also directly navigable via the main Navbar.
Sources: src/components/Pricing.jsx, src/App.jsx:19, src/components/Navbar.jsx:17
Component Architecture
The Pricing component is a functional React component that uses the useState hook for state management and framer-motion for animations. Its structure is centered around a hardcoded array of plan objects, which it maps over to generate the UI.
Sources: src/components/Pricing.jsx:5, 41
State Management
The component utilizes a single state variable, annual, to control the billing cycle display.
annual: A boolean state initialized totrue. Whentrue, it displays annual pricing; whenfalse, it shows monthly pricing. It is toggled by a button.
// src/components/Pricing.jsx:41
const [annual, setAnnual] = useState(true);
Sources: src/components/Pricing.jsx:41
Dependencies
The component relies on several external libraries for its functionality and appearance.
| Library | Usage |
|---|---|
react | Core library for building the component. |
framer-motion | For animations on the toggle and plan cards. |
lucide-react | Renders the <Check> icon for feature lists. |
Sources: package.json:14-16, src/components/Pricing.jsx:2-3
Data Structure: Pricing Plans
The pricing information is defined in a constant array named plans. Each object in the array represents a distinct pricing tier and contains all necessary data for rendering a plan card.
Sources: src/components/Pricing.jsx:5-39
Plan Object Schema
The diagram below illustrates the structure of a single plan object.
This diagram shows the fields within each plan object and its nested price structure.
Sources: src/components/Pricing.jsx:6-38
Plan Data Breakdown
| Field | Type | Description | Example (Growth plan) |
|---|---|---|---|
name | String | The name of the plan. | "Growth" |
price | Object | An object containing monthly and annual prices. Can be a number or the string "Custom". | { monthly: 499, annual: 399 } |
description | String | A short description of the plan's target audience. | "For scaling operations." |
features | String[] | An array of strings, where each string is a feature included in the plan. | ["Unlimited tracking", "Advanced predictive AI", ...] |
cta | String | The text for the call-to-action button. | "Start Trial" |
popular | Boolean | A flag to indicate if the plan is the "Most Popular". This controls conditional styling and a badge. | true |
Sources: src/components/Pricing.jsx:5-39
UI and Rendering Logic
The component renders a section with a header, a billing cycle toggle, and a grid of pricing cards. The rendering logic is primarily driven by the annual state and the plans data array.
Billing Cycle Toggle
A toggle switch allows users to switch between "Monthly" and "Annual" pricing. The onClick event on the button updates the annual state, which in turn triggers a re-render of the prices. The toggle's handle is animated using framer-motion.
The following diagram shows the user interaction flow with the toggle.
This sequence diagram illustrates how a user click on the toggle updates the component's state and UI.
Sources: src/components/Pricing.jsx:51-58
Plan Card Rendering
The component iterates over the plans array and renders a motion.div for each plan.
This flowchart details the logic for rendering each individual pricing card.
Sources: src/components/Pricing.jsx:63-122
Key conditional rendering aspects include:
- Popular Badge: A "Most Popular" badge is displayed if
plan.popularistrue. - Price Display: The component checks if the price is a
number. If so, it displays either theannualormonthlyprice based on the state. Otherwise, it displays the "Custom" string. - Styling: The "Growth" plan, marked as popular, receives distinct styling (e.g., a blue border and different background color).
Sources: src/components/Pricing.jsx:71-75, 85-95, 117-121
Conclusion
The Pricing.jsx component serves as a crucial marketing and sales tool within the application. It effectively communicates the value proposition of different service tiers through a clean, interactive, and responsive interface. By leveraging a simple state management model, a well-defined data structure, and subtle animations, it provides a user-friendly experience that guides potential customers toward a purchasing decision. Its placement within the overall page structure in App.jsx ensures it is a prominent part of the user journey.
Sources: src/components/Pricing.jsx, src/App.jsx:19