From 3f01ca12b48654716ebfb0b37a1532da96a712cc Mon Sep 17 00:00:00 2001
From: sebseb7 <sebgreenbus@gmail.com>
Date: Thu, 11 Sep 2025 06:47:57 +0200
Subject: [PATCH] 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.
---
 src/components/Product.js     | 53 ++++++++++++++++++++++++++---------
 src/components/ProductList.js |  3 +-
 2 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/src/components/Product.js b/src/components/Product.js
index c0bef23..081d68a 100644
--- a/src/components/Product.js
+++ b/src/components/Product.js
@@ -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>
diff --git a/src/components/ProductList.js b/src/components/ProductList.js
index cbba217..4f7ad7a 100644
--- a/src/components/ProductList.js
+++ b/src/components/ProductList.js
@@ -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}
               />