Refactor to share HOURLY_RATES between components

Exported HOURLY_RATES from PricingRates and updated BillingCalculator to import and use it instead of a local RATES object. This ensures consistent usage pricing across components.

Author: kylemclaren

src/components/react/BillingCalculator.tsx

@@ -18,6 +18,7 @@ import {
 } from '@/components/ui/select';
 import { Switch } from '@/components/ui/switch';
 import { cn } from '@/lib/utils';
+import { HOURLY_RATES } from './PricingRates';
 
 // Fixed Sprite resources per active hour
 const VCPUS = 8;
@@ -43,13 +44,6 @@ const PAYG = {
   storageGB: 0,
 };
 
-// Usage pricing (same for overage and PAYG)
-const RATES = {
-  cpuHour: 0.07,
-  ramGBHour: 0.04375,
-  storageGB: 0.5,
-};
-
 type BillingMode = 'plan' | 'payg';
 
 export function BillingCalculator() {
@@ -90,11 +84,11 @@ export function BillingCalculator() {
 
   // Calculate usage costs (overage for plan, full cost for PAYG)
   const cpuCost =
-    Math.max(0, cpuHoursUsed - currentPlan.cpuHours) * RATES.cpuHour;
+    Math.max(0, cpuHoursUsed - currentPlan.cpuHours) * HOURLY_RATES.cpu;
   const ramCost =
-    Math.max(0, ramGBHoursUsed - currentPlan.ramGBHours) * RATES.ramGBHour;
+    Math.max(0, ramGBHoursUsed - currentPlan.ramGBHours) * HOURLY_RATES.ram;
   const storageCost =
-    Math.max(0, storageGBUsed - currentPlan.storageGB) * RATES.storageGB;
+    Math.max(0, storageGBUsed - currentPlan.storageGB) * HOURLY_RATES.storage;
   const usageCost = cpuCost + ramCost + storageCost;
 
   const totalCost = currentPlan.price + usageCost;

src/components/react/PricingRates.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { Switch } from '@/components/ui/switch';
 
-const HOURLY_RATES = {
+export const HOURLY_RATES = {
   cpu: 0.07,
   ram: 0.04375,
   storage: 0.5,