price-format-sale

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { NumericFormat } from "react-number-format";
5 
6interface PriceFormat_SaleProps extends React.HTMLAttributes<HTMLDivElement> {
7  originalPrice: number;
8  salePrice?: number;
9  prefix?: string;
10  thousandSeparator?: string;
11  decimalSeparator?: string;
12  decimalScale?: number;
13  showSavePercentage?: boolean;
14  classNameOriginalPrice?: string;
15  classNameSalePrice?: string;
16  classNameSalePercentage?: string;
17}
18 
19const PriceFormat_Sale: React.FC<PriceFormat_SaleProps> = ({
20  className,
21  classNameOriginalPrice,
22  classNameSalePercentage,
23  classNameSalePrice,
24  decimalScale = 2,
25  decimalSeparator = ",",
26  originalPrice,
27  prefix = "$",
28  salePrice,
29  showSavePercentage = false,
30  thousandSeparator = ".",
31}) => {
32  const isSale = salePrice !== undefined && salePrice < originalPrice;
33  const savePercentage = isSale
34    ? ((originalPrice - salePrice) / originalPrice) * 100
35    : 0;
36 
37  return (
38    <div className={cn("flex flex-wrap items-center gap-2", className)}>
39      {isSale ? (
40        <>
41          <NumericFormat
42            value={originalPrice}
43            thousandSeparator={thousandSeparator}
44            decimalSeparator={decimalSeparator}
45            decimalScale={decimalScale}
46            prefix={prefix}
47            displayType="text"
48            className={cn(
49              "font-medium text-gray-500 line-through",
50              classNameOriginalPrice
51            )}
52          />
53          <NumericFormat
54            value={salePrice}
55            thousandSeparator={thousandSeparator}
56            decimalSeparator={decimalSeparator}
57            decimalScale={decimalScale}
58            prefix={prefix}
59            displayType="text"
60            className={cn(
61              "text-[length:inherit] font-medium",
62              classNameSalePrice
63            )}
64          />
65          {showSavePercentage && (
66            <span
67              className={cn(
68                "rounded-sm bg-green-500/50 p-1 text-sm font-medium",
69                classNameSalePercentage
70              )}
71            >
72              Save {Math.round(savePercentage)}%
73            </span>
74          )}
75        </>
76      ) : (
77        <NumericFormat
78          value={originalPrice}
79          thousandSeparator={thousandSeparator}
80          decimalSeparator={decimalSeparator}
81          decimalScale={decimalScale}
82          prefix={prefix}
83          displayType="text"
84          className={cn(
85            "text-[length:inherit] font-medium",
86// … truncated