65 lines
1.8 KiB
TypeScript
65 lines
1.8 KiB
TypeScript
import { getPercentageDiff } from "@lib/util/get-precentage-diff"
|
|
import { convertToLocale } from "@lib/util/money"
|
|
import { HttpTypes } from "@medusajs/types"
|
|
import { clx } from "@medusajs/ui"
|
|
|
|
type LineItemPriceProps = {
|
|
item: HttpTypes.StoreCartLineItem | HttpTypes.StoreOrderLineItem
|
|
style?: "default" | "tight"
|
|
currencyCode: string
|
|
}
|
|
|
|
const LineItemPrice = ({
|
|
item,
|
|
style = "default",
|
|
currencyCode,
|
|
}: LineItemPriceProps) => {
|
|
const { total, original_total } = item
|
|
const originalPrice = original_total
|
|
const currentPrice = total
|
|
const hasReducedPrice = currentPrice < originalPrice
|
|
|
|
return (
|
|
<div className="flex flex-col gap-x-2 text-ui-fg-subtle items-end">
|
|
<div className="text-left">
|
|
{hasReducedPrice && (
|
|
<>
|
|
<p>
|
|
{style === "default" && (
|
|
<span className="text-ui-fg-subtle">Original: </span>
|
|
)}
|
|
<span
|
|
className="line-through text-ui-fg-muted"
|
|
data-testid="product-original-price"
|
|
>
|
|
{convertToLocale({
|
|
amount: originalPrice,
|
|
currency_code: currencyCode,
|
|
})}
|
|
</span>
|
|
</p>
|
|
{style === "default" && (
|
|
<span className="text-ui-fg-interactive">
|
|
-{getPercentageDiff(originalPrice, currentPrice || 0)}%
|
|
</span>
|
|
)}
|
|
</>
|
|
)}
|
|
<span
|
|
className={clx("text-base-regular", {
|
|
"text-ui-fg-interactive": hasReducedPrice,
|
|
})}
|
|
data-testid="product-price"
|
|
>
|
|
{convertToLocale({
|
|
amount: currentPrice,
|
|
currency_code: currencyCode,
|
|
})}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default LineItemPrice
|