BillingChangeBadge.tsx69 lines · main

1	import { AnimatePresence, motion } from 'framer-motion'
2	import { ChevronRight } from 'lucide-react'
3	import { Badge, cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
4
5	import { formatCurrency } from '@/lib/helpers'
6
7	interface BillingChangeBadgeProps {
8	beforePrice?: number
9	afterPrice?: number
10	show: boolean | undefined
11	tooltip?: string
12	className?: string
13	free?: boolean
14	}
15
16	export const BillingChangeBadge = ({
17	beforePrice,
18	afterPrice,
19	show,
20	tooltip,
21	className,
22	free,
23	}: BillingChangeBadgeProps) => {
24	return (
25	<AnimatePresence>
26	{beforePrice !== undefined && afterPrice !== undefined && show && (
27	<motion.div
28	initial={{ opacity: 0, x: -4, height: 0 }}
29	animate={{ opacity: 1, x: 0, height: 'auto' }}
30	exit={{ opacity: 0, x: -4, height: 0 }}
31	transition={{ type: 'spring', stiffness: 800, damping: 40, duration: 0.3 }}
32	>
33	<Badge
34	variant="default"
35	className={cn(
36	free ? `bg-violet-200 border-violet-900` : 'bg-alternative',
37	`text-warning`,
38	className
39	)}
40	>
41	<Tooltip>
42	<TooltipTrigger asChild>
43	<div className="flex items-center gap-1">
44	<span className="text-xs font-mono text-foreground-muted" translate="no">
45	{formatCurrency(beforePrice)}
46	</span>
47	<ChevronRight size={12} strokeWidth={2} className="text-foreground-muted" />
48	<motion.span
49	key={afterPrice} // This key will change whenever any form value changes
50	className={cn(
51	free ? 'text-violet-1100' : 'text-foreground',
52	'text-xs font-mono'
53	)}
54	animate={{ scale: [1, 1.1, 1] }}
55	transition={{ duration: 0.12 }}
56	translate="no"
57	>
58	{`${formatCurrency(afterPrice)}/month`}
59	</motion.span>
60	</div>
61	</TooltipTrigger>
62	{tooltip !== undefined && <TooltipContent side="bottom">{tooltip}</TooltipContent>}
63	</Tooltip>
64	</Badge>
65	</motion.div>
66	)}
67	</AnimatePresence>
68	)
69	}