Usage Based Pricing

1"use client";
2 
3import {
4  useEffect,
5  useLayoutEffect,
6  useMemo,
7  useRef,
8  useState,
9  type ReactNode,
10} from "react";
11import {
12  motion,
13  useSpring,
14  useTransform,
15  useMotionValueEvent,
16} from "motion/react";
17import { cn } from "@/lib/utils";
18import {
19  Card,
20  CardContent,
21  CardDescription,
22  CardHeader,
23  CardTitle,
24} from "@/components/ui/card";
25 
26export type UsageBasedPricingProps = {
27  className?: string;
28  min?: number;
29  max?: number;
30  step?: number;
31  snapTo?: number;
32  value?: number;
33  defaultValue?: number;
34  onChange?: (value: number) => void;
35  onChangeEnd?: (value: number) => void;
36  currency?: string;
37  basePrice?: number;
38  includedCredits?: number;
39  unitPricePerCredit?: number;
40  title?: string;
41  subtitle?: string;
42};
43 
44function clamp(v: number, min: number, max: number) {
45  return Math.min(Math.max(v, min), max);
46}
47function formatNumber(n: number) {
48  return new Intl.NumberFormat(undefined, { maximumFractionDigits: 0 }).format(
49    n,
50  );
51}
52 
53export function UsageBasedPricing({
54  className,
55  min = 4000,
56  max = 25001,
57  step = 1,
58  snapTo,
59  value: valueProp,
60  defaultValue = 4000,
61  onChange,
62  onChangeEnd,
63  currency = "$",
64  basePrice = 39.99,
65  includedCredits = 4000,
66  title = "Pay as you use pricing",
67  subtitle = "Start with a flat monthly rate that includes 4,000 credits.",
68}: UsageBasedPricingProps) {
69  const isControlled = typeof valueProp === "number";
70  const [uncontrolled, setUncontrolled] = useState(
71    clamp(defaultValue, min, max),
72  );
73  const value = isControlled
74    ? clamp(valueProp as number, min, max)
75    : uncontrolled;
76  const trackRef = useRef<HTMLDivElement | null>(null);
77  const [trackWidth, setTrackWidth] = useState(0);
78  const [posPct, setPosPct] = useState(
79    () => ((value - min) / (max - min)) * 100,
80  );
81  const animRef = useRef<number | null>(null);
82  const animStartRef = useRef<number>(0);
83  const animFromPctRef = useRef<number>(0);
84  const animToPctRef = useRef<number>(0);
85  const animDurationMs = 300;
86  const isPointerDownRef = useRef(false);
87  const hasMovedRef = useRef(false);
88  const suppressClickRef = useRef(false);
89 
90  // measure track width for ticks
91  useLayoutEffect(() => {
92    const el = trackRef.current;
93    if (!el) return;
94    const update = () => setTrackWidth(el.clientWidth);
95    update();
96    const ro = new ResizeObserver(update);
97    ro.observe(el);
98    window.addEventListener("resize", update);
99    return () => {
100      ro.disconnect();
101// … truncated