CostCalculator Component
Relevant source files
The following files were used as context for generating this wiki page:The CostCalculator is an interactive React component designed to quantify and visualize the hidden financial costs associated with supply chain inefficiencies. It provides users with an industry-specific estimation model, allowing them to input their operational data and see the potential annual financial impact of shipment delays. The component serves as a key engagement tool within the application, translating abstract problems like delays into concrete financial figures to demonstrate the value proposition of the OptiFlow platform.
The component is integrated into the main application flow, appearing between the Testimonials and Pricing sections, strategically positioned to convince users of the service's value before presenting them with subscription plans.
Sources: src/components/CostCalculator.jsx, src/App.jsx:19-25
Architecture and Data Flow
The CostCalculator is a self-contained functional component that manages its own state. The data flow is unidirectional: user inputs update the component's internal state, which triggers a re-calculation of costs and a re-render of the UI to display the new results.
The following diagram illustrates the component's internal data flow from user interaction to UI update.
Component State
The component utilizes React's useState hook to manage all user-configurable parameters and derived display values.
| State Variable | Type | Initial Value | Description |
|---|---|---|---|
shipments | Number | 1000 | The user's estimated number of monthly shipments. |
avgValue | Number | 5000 | The average value of a single shipment in USD. |
delayRate | Number | 15 | The user's current percentage of delayed shipments. |
industry | Object | industries[0] (E-commerce) | The selected industry, containing a name, delayMultiplier, and churnRate. |
animatedCost | Number | 0 | The smoothly animated value of the total annual cost for display. |
| Sources: src/components/CostCalculator.jsx:20-24 |
Core Calculation Logic
The financial impact is derived from several key formulas that combine user inputs with pre-defined industry-specific multipliers.
Industry Data
The calculator uses a static array of industries, each with unique multipliers that significantly affect the final calculation.
| Industry Name | delayMultiplier | churnRate | Description |
|---|---|---|---|
| E-commerce | 1.2 | 0.15 | Standard multiplier, high churn. |
| Manufacturing | 1.5 | 0.12 | Higher delay impact due to production line stops. |
| Retail | 1.1 | 0.18 | Lower delay impact (substitutable goods) but highest churn. |
| Logistics | 1.3 | 0.10 | Moderate delay impact and churn. |
| Pharma | 2.0 | 0.08 | Critical impact from delays, but lower churn due to regulation. |
| Sources: src/components/CostCalculator.jsx:5-11, src/components/CostCalculator.jsx:319-325, src/components/CostCalculator.jsx:339-345 |
Cost Formulas
The total annual cost is an aggregation of three distinct types of losses.
| Cost Component | Formula |
|---|---|
delayedShipments | (shipments * 12 * delayRate) / 100 |
lostRevenue | delayedShipments * avgValue * industry.delayMultiplier * 0.3 |
penaltyFees | delayedShipments * 150 |
customerChurn | delayedShipments * avgValue * industry.churnRate |
totalAnnualCost | lostRevenue + penaltyFees + customerChurn |
| Sources: src/components/CostCalculator.jsx:27-31, src/components/CostCalculator.jsx:307-350 |
The calculation logic is implemented directly within the component body.
// src/components/CostCalculator.jsx:27-31
const delayedShipments = (shipments * 12 * delayRate) / 100;
const lostRevenue = delayedShipments * avgValue * industry.delayMultiplier * 0.3; // 30% stockout impact
const penaltyFees = delayedShipments * 150; // Avg $150 per delayed shipment
const customerChurn = delayedShipments * avgValue * industry.churnRate;
const totalAnnualCost = lostRevenue + penaltyFees + customerChurn;
UI and Interaction
The component is divided into two main columns: user inputs on the left and calculated results on the right. It uses framer-motion for animations to enhance user experience, a pattern consistent with other components like ProductNarrative and Integrations.
Sources: src/components/CostCalculator.jsx:119, src/components/ProductNarrative.jsx:4, src/components/Integrations.jsx:5
Input Controls
- Monthly Shipments: A range slider (
<input type="range">) allowing values from 100 to 10,000. - Average Shipment Value: A number input (
<input type="number">). - Current Delay Rate: A range slider for percentages from 5% to 40%.
- Industry: A grid of buttons, where the active button is styled differently to indicate the current selection.
Sources: src/components/CostCalculator.jsx:132-220
Results Display
- Total Annual Impact: The primary result, displayed in a large font. The value is animated using a
useEffecthook that increments a counter from 0 to thetotalAnnualCostover 1 second. - Cost Breakdown: A list showing the individual values for
Stockout Impact,Late Delivery Penalties, andRetention Loss. - Methodology: A collapsible
<details>section that explains the formulas used in the calculation, providing transparency to the user.
The sequence diagram below shows the animation flow when a calculation result changes.
Conclusion
The CostCalculator component is a crucial element of the OptiFlow application's user journey. It effectively translates the platform's core value proposition—reducing supply chain costs—into a tangible, personalized financial estimate. By using interactive controls, clear data visualization, and transparent methodology, it builds user trust and provides a compelling reason to proceed to the "Request Analysis" call-to-action, bridging the gap between demonstrating a problem and selling the solution offered in the Pricing section.
Sources: src/components/CostCalculator.jsx:274-277, src/components/Pricing.jsx