'use client'; import { AnimatePresence, motion } from 'framer-motion'; import { type KeyboardEvent, useEffect, useMemo, useState } from 'react'; import { cn } from '@/lib/utils'; interface CustomerLoyalty01Props { name?: string; status?: string; totalSpent?: string; orders?: string; firstOrder?: string; progress?: number; className?: string; onClick?: () => void; } const TOTAL_TICKS = 46; const TOAST_LABEL = 'Toggle loyalty toast'; const easeInOutCubic = (value: number) => value < 0.5 ? 4 * value * value * value : 1 - Math.pow(-2 * value + 2, 3) / 2; export default function CustomerLoyalty01({ name = 'Taylor Platten', status = 'Loyal customer', totalSpent = '£2,896.08', orders = '83', firstOrder = '3 years ago', progress = 0.87, className, onClick }: CustomerLoyalty01Props) { const isInteractive = Boolean(onClick); const [isToastOpen, setIsToastOpen] = useState(false); const [animatedTicks, setAnimatedTicks] = useState(0); const [animatedTotal, setAnimatedTotal] = useState(0); const [animatedOrders, setAnimatedOrders] = useState(0); const [animatedFirstOrder, setAnimatedFirstOrder] = useState(0); const clampedProgress = Math.min(1, Math.max(0, progress)); const filledTicks = Math.min(TOTAL_TICKS, Math.round(TOTAL_TICKS * clampedProgress)); const parsedTotal = Number(totalSpent.replace(/[^0-9.]/g, '')); const parsedOrders = Number(orders.replace(/[^0-9]/g, '')); const firstOrderMatch = firstOrder.match(/^(\d+)(.*)$/); const firstOrderValue = firstOrderMatch ? Number(firstOrderMatch[1]) : 0; const firstOrderSuffix = firstOrderMatch ? firstOrderMatch[2] : ''; const currencyFormatter = useMemo( () => new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'GBP' }), [] ); const handleKeyDown = (event: KeyboardEvent) => { if (!isInteractive) return; if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); onClick?.(); } }; const handleToastToggle = () => { setIsToastOpen((prev) => !prev); }; useEffect(() => { if (!isToastOpen) { setAnimatedTicks(0); setAnimatedTotal(0); setAnimatedOrders(0); setAnimatedFirstOrder(0); return; } let rafId = 0; const startTime = performance.now(); const tickDuration = 850; const numberDelay = 220; const numberDuration = 900; const animateFrame = (timestamp: number) => { const elapsed = timestamp - startTime; const tickProgress = Math.min(1, elapsed / tickDuration); const easedTicks = easeInOutCubic(tickProgress); setAnimatedTicks(Math.round(filledTicks * easedTicks)); const numberElapsed = Math.max(0, elapsed - numberDelay); const numberProgress = Math.min(1, numberElapsed / numberDuration); const easedNumbers = easeInOutCubic(numberProgress); if (Number.isFinite(parsedTotal)) { setAnimatedTotal(parsedTotal * easedNumbers); } if (Number.isFinite(parsedOrders)) { setAnimatedOrders(Math.round(parsedOrders * easedNumbers)); } if (Number.isFinite(firstOrderValue)) { setAnimatedFirstOrder(Math.round(firstOrderValue * easedNumbers)); } if (tickProgress < 1 || numberProgress < 1) { rafId = window.requestAnimationFrame(animateFrame); } }; rafId = window.requestAnimationFrame(animateFrame); return () => { window.cancelAnimationFrame(rafId); }; }, [filledTicks, firstOrderValue, isToastOpen, parsedOrders, parsedTotal]); const totalDisplay = Number.isFinite(parsedTotal) ? currencyFormatter.format(animatedTotal) : totalSpent; const ordersDisplay = Number.isFinite(parsedOrders) ? animatedOrders.toString() : orders; const firstOrderDisplay = firstOrderMatch ? `${animatedFirstOrder}${firstOrderSuffix}` : firstOrder; return (

{isToastOpen && (

{name}

{status}

{Array.from({ length: TOTAL_TICKS }).map((_, index) => (

))}

Total spent

{totalDisplay}

Orders

{ordersDisplay}

First order

{firstOrderDisplay}

)} {isToastOpen ? 'Close badge' : 'Show badge'}

); }

Customer Loyalty 01

Tech

Category