import React, { useState } from 'react';
const RoiCalculator = () => {
const [contactType, setContactType] = useState('b2b');
const [callType, setCallType] = useState('inbound_sales');
const [contacts, setContacts] = useState(600);
const [talkTime, setTalkTime] = useState(3000);
const [conversionRate, setConversionRate] = useState(10);
const [dealRate, setDealRate] = useState(23);
const [dealSize, setDealSize] = useState(12000);
const [supportRate, setSupportRate] = useState(17);
const [salesRate, setSalesRate] = useState(22);
const callTypeLabels = {
cold_sales: "Cold Sales Calls (purchased)",
warm_sales: "Warm Sales Calls (old CRM contacts)",
hot_sales: "Hot Sales Calls (requested outreach)",
inbound_sales: "Inbound Sales",
reschedule_missed: "Reschedule Missed Meetings",
reminder_upcoming: "Reminder for Upcoming Meetings",
inbound_support: "Inbound CS/TS Support"
};
const contactMetrics = {
b2b: {
cold_sales: { pickup_rate: 0.01, talk_time: 1.1, calls: 9 },
warm_sales: { pickup_rate: 0.07, talk_time: 2.3, calls: 9 },
hot_sales: { pickup_rate: 0.12, talk_time: 3.5, calls: 12 },
inbound_sales: { pickup_rate: 1.00, talk_time: 4.1, calls: 1 },
reschedule_missed: { pickup_rate: 0.21, talk_time: 2.6, calls: 6 },
reminder_upcoming: { pickup_rate: 0.27, talk_time: 1.7, calls: 2 },
inbound_support: { pickup_rate: 1.00, talk_time: 4.7, calls: 1 }
},
b2c: {
warm_sales: { pickup_rate: 0.09, talk_time: 2.7, calls: 9 },
hot_sales: { pickup_rate: 0.20, talk_time: 4.1, calls: 12 },
inbound_sales: { pickup_rate: 1.00, talk_time: 5.2, calls: 1 },
reschedule_missed: { pickup_rate: 0.21, talk_time: 2.6, calls: 6 },
reminder_upcoming: { pickup_rate: 0.27, talk_time: 1.7, calls: 2 },
inbound_support: { pickup_rate: 1.00, talk_time: 4.7, calls: 1 }
}
};
const calculateAIInvestment = (minutes) => {
const baseCost = 1750;
if (minutes <= 2000) return baseCost;
const extraMinutes = minutes - 2000;
const tiers = [
{ threshold: 1000, rate: 0.27 },
{ threshold: 5000, rate: 0.25 },
{ threshold: 10000, rate: 0.22 },
{ threshold: 20000, rate: 0.17 },
{ threshold: 50000, rate: 0.15 },
{ threshold: 100000, rate: 0.13 },
{ threshold: Infinity, rate: 0.11 }
];
const tier = tiers.find(t => extraMinutes <= t.threshold);
return baseCost + (extraMinutes * tier.rate);
};
const calculateMetrics = () => {
const pickupRate = contactMetrics[contactType]?.[callType]?.pickup_rate || 0;
const conversations = contacts;
const meetings = conversations * (conversionRate / 100);
const deals = meetings * (dealRate / 100);
const revenue = deals * dealSize;
const salesTimePerDeal = 78 / 14; // From CSV: 78 hours / 14 deals
const salesTimeSaved = deals * salesTimePerDeal;
const csTimeSaved = callType === 'inbound_support' ? contacts * 0.25 : 0;
const humanCostSavings = (csTimeSaved * supportRate) + (salesTimeSaved * salesRate);
const aiInvestment = calculateAIInvestment(talkTime);
const roi = ((revenue + humanCostSavings - aiInvestment) / aiInvestment) * 100;
return {
revenue,
humanCostSavings,
aiInvestment,
timeSaved: salesTimeSaved + csTimeSaved,
roi
};
};
const metrics = calculateMetrics();
return (
{/* Results Section */}
Potential ROI with SalesAI
Revenue
${Math.round(metrics.revenue).toLocaleString()}
Human Cost Savings
${Math.round(metrics.humanCostSavings).toLocaleString()}
AI Agent Investment
${Math.round(metrics.aiInvestment).toLocaleString()}
Time Saved
{Math.round(metrics.timeSaved).toLocaleString()} hours
Return on Investment
{Math.round(metrics.roi)}%
);
};
export default RoiCalculator;
.svg)
