Courses

import React, { useState, useEffect } from ‘react’;

const ResponseTimeCalculator = () => {
const [inputs, setInputs] = useState({
monthlySales: 10000,
customerQuestions: 200,
responseTime: 12,
averageSaleValue: 50
});

const [results, setResults] = useState({
lostSales: 0,
annualRevenueLoss: 0,
hoursSpent: 0,
timeValue: 0,
totalCost: 0
});

// Calculate results whenever inputs change
useEffect(() => {
// Customer loss rate based on response time
const getLossRate = (hours) => {
if (hours <= 0.5) return 0.03;
if (hours <= 1) return 0.05;
if (hours <= 4) return 0.08;
if (hours <= 12) return 0.12;
if (hours <= 24) return 0.15;
return 0.20;
};

// Time per question based on response time in minutes
const getTimePerQuestion = (hours) => {
  // Assumes more complex responses take longer
  return Math.min(10 + (hours * 0.5), 20);
};

const lossRate = getLossRate(inputs.responseTime);
const lostCustomers = inputs.customerQuestions * lossRate;
const lostSalesAmount = lostCustomers * inputs.averageSaleValue;
const annualLoss = lostSalesAmount * 12;

const timePerQuestion = getTimePerQuestion(inputs.responseTime);
const monthlyHours = (inputs.customerQuestions * timePerQuestion) / 60;
const timeValue = monthlyHours * 50; // Assuming $50/hour value

setResults({
  lostSales: lostSalesAmount.toFixed(0),
  annualRevenueLoss: annualLoss.toFixed(0),
  hoursSpent: monthlyHours.toFixed(1),
  timeValue: timeValue.toFixed(0),
  totalCost: (annualLoss + (timeValue * 12)).toFixed(0)
});

}, [inputs]);

const handleInputChange = (e) => {
const { name, value } = e.target;
setInputs({
…inputs,
[name]: parseFloat(value) || 0
});
};

return (

Response Time Calculator

Fill in your numbers below to see how much slow response times could be costing your business.

  <div className="grid md:grid-cols-2 gap-6 mb-8">
    <div className="bg-blue-50 p-4 rounded-md">
      <h3 className="font-bold text-lg mb-4 text-blue-800">Your Business Info</h3>

      <div className="mb-4">
        <label className="block text-sm font-medium mb-1">Average monthly sales ($)</label>
        <input
          type="number"
          name="monthlySales"
          value={inputs.monthlySales}
          onChange={handleInputChange}
          className="w-full p-2 border rounded"
        />
      </div>

      <div className="mb-4">
        <label className="block text-sm font-medium mb-1">Customer questions per month</label>
        <input
          type="number"
          name="customerQuestions"
          value={inputs.customerQuestions}
          onChange={handleInputChange}
          className="w-full p-2 border rounded"
        />
      </div>

      <div className="mb-4">
        <label className="block text-sm font-medium mb-1">Current average response time (hours)</label>
        <input
          type="number"
          name="responseTime"
          value={inputs.responseTime}
          onChange={handleInputChange}
          className="w-full p-2 border rounded"
        />
      </div>

      <div className="mb-4">
        <label className="block text-sm font-medium mb-1">Average sale value ($)</label>
        <input
          type="number"
          name="averageSaleValue"
          value={inputs.averageSaleValue}
          onChange={handleInputChange}
          className="w-full p-2 border rounded"
        />
      </div>
    </div>

    <div className="bg-green-50 p-4 rounded-md">
      <h3 className="font-bold text-lg mb-4 text-green-800">Your Results</h3>

      <div className="mb-3">
        <label className="block text-sm font-medium mb-1">Estimated lost sales per month</label>
        <div className="p-2 bg-white border rounded font-bold text-lg">
          ${results.lostSales}
        </div>
      </div>

      <div className="mb-3">
        <label className="block text-sm font-medium mb-1">Projected annual revenue loss</label>
        <div className="p-2 bg-white border rounded font-bold text-lg">
          ${results.annualRevenueLoss}
        </div>
      </div>

      <div className="mb-3">
        <label className="block text-sm font-medium mb-1">Hours spent answering questions (monthly)</label>
        <div className="p-2 bg-white border rounded font-bold text-lg">
          {results.hoursSpent} hours
        </div>
      </div>

      <div className="mb-3">
        <label className="block text-sm font-medium mb-1">Value of your time (at $50/hour)</label>
        <div className="p-2 bg-white border rounded font-bold text-lg">
          ${results.timeValue}
        </div>
      </div>

      <div className="mt-6 pt-4 border-t border-green-200">
        <label className="block text-base font-bold mb-1 text-red-700">Total cost of slow responses per year</label>
        <div className="p-3 bg-red-50 border border-red-200 rounded-md font-bold text-xl text-red-700">
          ${results.totalCost}
        </div>
      </div>
    </div>
  </div>

  <div className="bg-yellow-50 p-4 rounded-md mb-6">
    <h3 className="font-bold text-lg mb-2">What This Means For You</h3>
    <p className="mb-2">Based on your numbers, slow customer response times could be costing your business <strong>${results.totalCost}</strong> per year in lost sales and wasted time.</p>
    <p>By implementing AI automation to cut response times by 70%, you could potentially recover most of this lost revenue and free up valuable time to focus on growing your business.</p>
  </div>

  <div className="bg-blue-700 text-white p-4 rounded-md text-center">
    <h3 className="font-bold text-lg mb-2">Ready to stop losing money to slow responses?</h3>
    <p className="mb-4">Our AI customer service automation can help you respond in minutes instead of hours - 24/7/365.</p>
    <button className="bg-white text-blue-700 px-6 py-2 rounded-md font-bold hover:bg-blue-100">
      Learn How We Can Help
    </button>
  </div>
</div>

);
};

export default ResponseTimeCalculator;