feat(ui): add strikethrough original price display for rebated products
Update Product component to show original price with red strikethrough and reduced opacity above the current price when rebate > 0. Calculate original price by reversing rebate percentage. Adjust layout with relative positioning and z-index for overlay. Ensure rebate prop is passed from ProductList to support this feature.
This commit is contained in:
@@ -353,22 +353,49 @@ class Product extends Component {
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<div style={{padding:'0px',margin:'0px',minHeight:'3.8em'}}>
|
||||
<Typography
|
||||
variant="h6"
|
||||
color="primary"
|
||||
sx={{ mt: 'auto', fontWeight: 'bold', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
|
||||
>
|
||||
<span>{new Intl.NumberFormat('de-DE', {style: 'currency', currency: currency || 'EUR'}).format(price)}</span>
|
||||
<small style={{ color: '#77aa77', fontSize: '0.6em' }}>({this.props.t ? this.props.t('product.inclVatFooter', { vat }) : `incl. ${vat}% USt.,*`})</small>
|
||||
|
||||
|
||||
|
||||
</Typography>
|
||||
<div style={{padding:'0px',margin:'0px'}}>
|
||||
<Typography
|
||||
variant="h6"
|
||||
color="primary"
|
||||
sx={{
|
||||
fontWeight: 'bold',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
position: 'relative'
|
||||
}}
|
||||
>
|
||||
<Box sx={{ position: 'relative', display: 'inline-block' }}>
|
||||
{this.props.rebate && this.props.rebate > 0 && (
|
||||
<span
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: -8,
|
||||
left: -8,
|
||||
fontWeight: 'bold',
|
||||
color: 'red',
|
||||
textDecoration: 'line-through',
|
||||
opacity: 0.4,
|
||||
zIndex: 1,
|
||||
pointerEvents: 'none',
|
||||
fontSize: 'inherit'
|
||||
}}
|
||||
>
|
||||
{(() => {
|
||||
const rebatePct = this.props.rebate / 100;
|
||||
const originalPrice = Math.round((price / (1 - rebatePct)) * 10) / 10;
|
||||
return new Intl.NumberFormat('de-DE', {style: 'currency', currency: currency || 'EUR'}).format(originalPrice);
|
||||
})()}
|
||||
</span>
|
||||
)}
|
||||
<span style={{ position: 'relative', zIndex: 2 }}>{new Intl.NumberFormat('de-DE', {style: 'currency', currency: currency || 'EUR'}).format(price)}</span>
|
||||
</Box>
|
||||
<small style={{ color: '#77aa77', fontSize: '0.6em' }}>({this.props.t ? this.props.t('product.inclVatFooter', { vat }) : `incl. ${vat}% USt.,*`})</small>
|
||||
</Typography>
|
||||
</div>
|
||||
{cGrundEinheit && fGrundPreis && fGrundPreis != price && (<Typography variant="body2" color="text.secondary" sx={{ m: 0,p: 0 }}>
|
||||
({new Intl.NumberFormat('de-DE', {style: 'currency', currency: currency || 'EUR'}).format(fGrundPreis)}/{cGrundEinheit})
|
||||
</Typography> )}
|
||||
</div>
|
||||
{/*incoming*/}
|
||||
</CardContent>
|
||||
</Box>
|
||||
|
||||
@@ -454,7 +454,7 @@ class ProductList extends Component {
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Product
|
||||
<Product
|
||||
id={product.id}
|
||||
name={product.name}
|
||||
seoName={product.seoName}
|
||||
@@ -474,6 +474,7 @@ class ProductList extends Component {
|
||||
pictureList={product.pictureList}
|
||||
availableSupplier={product.availableSupplier}
|
||||
komponenten={product.komponenten}
|
||||
rebate={product.rebate}
|
||||
priority={index < 6 ? 'high' : 'auto'}
|
||||
t={this.props.t}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user