Add 'For personalized design' label to product price

This commit is contained in:
Andymick
2026-07-18 09:56:11 +01:00
parent de06222190
commit a9513e7284
+28 -25
View File
@@ -677,31 +677,34 @@ export default function DesignCanvas({ product }: { product: ProductDTO }) {
<div> <div>
<h1 className="font-display text-4xl">{product.name}</h1> <h1 className="font-display text-4xl">{product.name}</h1>
<p className="mt-2 text-muted">{product.description}</p> <p className="mt-2 text-muted">{product.description}</p>
<p className="mt-4 flex items-baseline gap-2 font-mono text-lg"> <div className="mt-4">
{(() => { <p className="flex items-baseline gap-2 font-mono text-lg">
const { onSale, price, originalPrice } = getEffectivePrice( {(() => {
{ const { onSale, price, originalPrice } = getEffectivePrice(
id: product.id, {
basePrice: product.basePrice, id: product.id,
personalisedPrice: product.personalisedPrice, basePrice: product.basePrice,
salePrice: product.onSale ? product.effectivePrice : null, personalisedPrice: product.personalisedPrice,
saleStartsAt: null, salePrice: product.onSale ? product.effectivePrice : null,
saleEndsAt: null, saleStartsAt: null,
}, saleEndsAt: null,
[], },
new Date(), [],
true, new Date(),
); true,
return ( );
<> return (
{onSale && originalPrice != null && ( <>
<Price cents={originalPrice} className="text-base text-muted line-through" /> {onSale && originalPrice != null && (
)} <Price cents={originalPrice} className="text-base text-muted line-through" />
<Price cents={price} className={onSale ? 'text-splash-pink' : undefined} /> )}
</> <Price cents={price} className={onSale ? 'text-splash-pink' : undefined} />
); </>
})()} );
</p> })()}
</p>
<p className="text-xs text-muted">For personalized design</p>
</div>
</div> </div>
<div> <div>