@bytebrand/fe-ui-core-autobahn 1.0.34 → 1.0.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.34",
+  "version": "1.0.36",
   "description": "auto.de md3 (Autobahn) design system — UI primitives, cards, chrome, VDP modules, theme CSS and locales. Ships raw TypeScript source (like fe-ui-core before it); each consumer's bundler compiles it.",
   "main": "index.ts",
   "license": "UNLICENSED",

package/theme/md3.css

@@ -1203,6 +1203,11 @@
 /* UVP (struck list price) — cash mode only */
 .md3 .fin-kauf { margin-top: 8px; font-size: 13px; color: var(--md-on-surface-variant); }
 .md3 .fin-kauf s { color: var(--md-error); }
+/* struck old rate / list price next to the hero figure (Figma "329 € 4̶9̶9̶ ̶€̶ / mtl.") —
+   REAL isStrikeShown-gated data; used in the offer card, the Rate-anpassen sheet and the
+   sticky bottom bar, all payment modes. */
+.md3 .fin-rate-old { font-size: 15px; font-weight: 700; color: var(--md-error);
+  text-decoration: line-through; letter-spacing: 0; flex: none; }
 /* condition summary — left cell of row 2 in fin-price-grid */
 .md3 .fin-cond { min-width: 0; font-size: 12.5px; color: var(--md-on-surface-variant); }
 /* Rate-edit (Rate anpassen) sits between the rate and the CTA now */
@@ -1607,6 +1612,8 @@
   .md3 .fin-info { margin-top: 10px; padding-top: 10px; }
   /* mockup hero rate is a notch bigger on phone (inline style says 48 — hence !important) */
   .md3 .fin-rate-main .num { font-size: 52px !important; letter-spacing: -1.5px !important; }
+  /* the struck old figure must NOT inherit the 52px hero size */
+  .md3 .fin-rate-main .fin-rate-old { font-size: 15px !important; letter-spacing: 0 !important; }
   /* narrower rating column (figma bar is 115px) frees room for the bigger rate; let the
      € /mtl. suffix wrap under the number instead of pushing the grid wide on 4-digit rates */
   .md3 .fin-price-grid { grid-template-columns: minmax(0, 1fr) 112px; }

package/vdp/FinanceCalculator.tsx

@@ -126,6 +126,9 @@ export interface FinanceCalculatorProps {
   ratingLabel?: string;
   /** computed monthly rate in EUR for the current mode — supplied, NOT computed here. */
   monthly: number;
+  /** struck old monthly rate (fe-financing oldMonthlyInstallment, isStrikeShown-gated) —
+   *  rendered as the red line-through figure next to the hero rate (fin/leasing only). */
+  oldMonthly?: number;
   /** effective annual rate (%) for the current mode — supplied, NOT computed here. */
   apr: number;
   /** current down payment in EUR (controlled). */
@@ -228,6 +231,7 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
   autoDeId,
   ratingLabel,
   monthly,
+  oldMonthly,
   down,
   term,
   downMin,
@@ -341,6 +345,11 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
             <span className="md-body-sm" style={{ fontWeight: 600 }}>
               {isCash ? '€' : `€ ${t('autobahn:finance.perMonth')}`}
             </span>
+            {/* struck old rate (REAL oldMonthlyInstallment; SRP strikes the same source) —
+                after the unit, else the unit wraps under the hero figure on phones */}
+            {!isCash && oldMonthly != null && (
+              <s className="num fin-rate-old">{eur(Math.round(oldMonthly))} €</s>
+            )}
           </div>
           {isCash && <div className="md-label-sm">{t('autobahn:finance.fixedPrice')}</div>}
           {isCash && showStrike && (

package/vdp/VdpModules.tsx

@@ -968,6 +968,8 @@ export interface VdpBottomBarProps {
   onModeChange?: (mode: FinanceMode) => void;
   /** monthly rate for the CURRENT mode (fin/leasing differ); falls back to vehicle.monthly. */
   monthly?: number;
+  /** struck old rate (oldMonthlyInstallment, isStrikeShown-gated) — Figma sticky footer strike. */
+  oldMonthly?: number;
   /** price-rating label — drives the eval pill + gradient bar (same as the offer card). */
   ratingLabel?: string;
   /** primary CTA click. */
@@ -989,6 +991,7 @@ export const VdpBottomBar: React.FunctionComponent<VdpBottomBarProps> = ({
   mode = 'fin',
   onModeChange,
   monthly,
+  oldMonthly,
   ratingLabel,
   onSecure,
   onCall,
@@ -1028,6 +1031,11 @@ export const VdpBottomBar: React.FunctionComponent<VdpBottomBarProps> = ({
           <span className="num" style={{ fontWeight: 800, fontSize: 30, color: 'var(--md-primary)', letterSpacing: '-1px' }}>
             {isCash ? eur(vehicle.price) : eur(Math.round(rate))} €
           </span>
+          {/* struck old rate / list price (REAL isStrikeShown-gated figures, per Figma sticky footer) */}
+          {!isCash && oldMonthly != null && <s className="num fin-rate-old">{eur(Math.round(oldMonthly))} €</s>}
+          {isCash && vehicle.listPrice != null && vehicle.listPrice > vehicle.price && (
+            <s className="num fin-rate-old">{eur(vehicle.listPrice)} €</s>
+          )}
           <span className="md-label-sm" style={{ fontWeight: 600 }}>
             {isCash ? t('autobahn:finance.fixedPrice') : `${t('autobahn:finance.exampleLabel')} ${t('autobahn:bottom.perMonth')}`}
           </span>
@@ -1146,6 +1154,8 @@ export interface FinanceDetailsModalProps {
   vehicleName?: string;
   price: number;
   monthly: number;
+  /** struck old rate (oldMonthlyInstallment, isStrikeShown-gated) — red line-through next to the rate. */
+  oldMonthly?: number;
   apr: number;
   down: number;
   term: number;
@@ -1211,6 +1221,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
   vehicleName,
   price,
   monthly,
+  oldMonthly,
   apr,
   down,
   term,
@@ -1338,7 +1349,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
           <div className="hide-mobile">
             <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 14 }}>
               <span className="num" style={{ fontSize: 34, fontWeight: 800, color: 'var(--md-primary)', letterSpacing: '-1px' }}>
-                {eur(monthly)} €
+                {eur(monthly)} €{oldMonthly != null && <> <s className="fin-rate-old">{eur(Math.round(oldMonthly))} €</s></>}
               </span>
               <span className="md-label-sm">{t('autobahn:finance.perMonth')}</span>
             </div>
@@ -1428,6 +1439,9 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                   <span className="md-body-sm" style={{ fontWeight: 600 }}>
                     {isCash ? '€' : `€ ${t('autobahn:finance.perMonth')}`}
                   </span>
+                  {!isCash && oldMonthly != null && (
+                    <s className="num fin-rate-old">{eur(Math.round(oldMonthly))} €</s>
+                  )}
                 </div>
               </div>
               <div>