112 lines
2.8 KiB
TypeScript
112 lines
2.8 KiB
TypeScript
import React from "react";
|
|
import { useAppSelector } from "redux/hooks";
|
|
import ProText from "../ProText";
|
|
|
|
interface ArabicPriceProps {
|
|
price: number | string;
|
|
style?: React.CSSProperties;
|
|
strong?: boolean;
|
|
type?: "secondary" | "success" | "warning" | "danger";
|
|
className?: string;
|
|
hideCurrency?: boolean;
|
|
textStyle?: React.CSSProperties;
|
|
}
|
|
|
|
const ArabicPrice: React.FC<ArabicPriceProps> = ({
|
|
price,
|
|
style = {},
|
|
strong = false,
|
|
type,
|
|
className,
|
|
hideCurrency = false,
|
|
textStyle = {},
|
|
}) => {
|
|
const { isRTL } = useAppSelector((state) => state.locale);
|
|
const { restaurant } = useAppSelector((state) => state.order);
|
|
|
|
// Format the price to ensure it has 2 decimal places
|
|
const formattedPrice = typeof price === "number" ? price.toFixed(2) : price;
|
|
const { textDecoration, ...restStyle } = style;
|
|
const decorationStyle = textDecoration
|
|
? ({ textDecoration } as React.CSSProperties)
|
|
: undefined;
|
|
|
|
return (
|
|
<ProText
|
|
strong={strong}
|
|
type={type}
|
|
className={className}
|
|
style={{
|
|
display: "inline-flex",
|
|
alignItems: "baseline",
|
|
lineHeight: 1,
|
|
...restStyle,
|
|
}}
|
|
>
|
|
{isRTL && !hideCurrency ? (
|
|
<>
|
|
<span
|
|
style={{
|
|
verticalAlign: "baseline",
|
|
lineHeight: 1,
|
|
fontSize: "14px",
|
|
...(decorationStyle ?? {}),
|
|
...textStyle,
|
|
}}
|
|
>
|
|
{formattedPrice}
|
|
</span>
|
|
<span style={{ margin: "0 3px" }} />
|
|
<span
|
|
style={{
|
|
fontSize: "14px",
|
|
verticalAlign: "baseline",
|
|
lineHeight: 1,
|
|
position: "relative",
|
|
top: -2,
|
|
...(decorationStyle ?? {}),
|
|
...textStyle,
|
|
}}
|
|
>
|
|
{isRTL ? restaurant.local_currency : restaurant.global_currency}
|
|
</span>
|
|
</>
|
|
) : !hideCurrency ? (
|
|
<>
|
|
<span
|
|
style={{
|
|
verticalAlign: "baseline",
|
|
lineHeight: 1,
|
|
display: "inline-block",
|
|
fontSize: "14px",
|
|
...(decorationStyle ?? {}),
|
|
...textStyle,
|
|
}}
|
|
>
|
|
{formattedPrice}
|
|
</span>
|
|
<span style={{ margin: "0 2px" }} />
|
|
<span
|
|
style={{
|
|
fontSize: "14px",
|
|
verticalAlign: "baseline",
|
|
lineHeight: 1,
|
|
display: "inline-block",
|
|
...(decorationStyle ?? {}),
|
|
...textStyle,
|
|
}}
|
|
>
|
|
{isRTL ? restaurant.local_currency : restaurant.global_currency}
|
|
</span>
|
|
</>
|
|
) : (
|
|
<span style={{ ...decorationStyle, ...textStyle }}>
|
|
{formattedPrice}
|
|
</span>
|
|
)}
|
|
</ProText>
|
|
);
|
|
};
|
|
|
|
export default ArabicPrice;
|