@bytebrand/fe-ui-core-autobahn 1.0.132 → 1.0.134

package/chrome/Footer.tsx

@@ -79,6 +79,13 @@ export interface FooterProps {
    * strings as the legacy footer so /search stays compliant where prices/rates are shown.
    */
   t: TranslationFunction;
+  /**
+   * Adds footnotes ⁵ (Pkw-EnVKV possible CO₂ costs) and ⁶ (§3d KraftStG EV tax exemption) to the
+   * disclaimer block, right after ⁴ (price evaluation) and before the WLTP consumption note. Real
+   * legal copy tied to the "Laufende Kosten pro Jahr" cards on the CDP — only pass true there
+   * (VehicleDetailedNextPage), never site-wide, since every other page shows only footnotes 1-4.
+   */
+  showCostFootnotes?: boolean;
 }
 
 /**
@@ -86,7 +93,7 @@ export interface FooterProps {
  * disclaimer block, and a copyright + "Nach Oben" bar. Pure/presentational MD3 chrome — renders
  * correctly only inside a `<div className="md3">` subtree (scoped theme at source/theme/autobahn).
  */
-const Footer: React.FunctionComponent<FooterProps> = ({ t }) => {
+const Footer: React.FunctionComponent<FooterProps> = ({ t, showCostFootnotes }) => {
   const scrollTop = (): void => window.scroll({ top: 0, left: 0, behavior: 'smooth' });
   const now = new Date();
   const year = now.getFullYear();
@@ -179,6 +186,7 @@ const Footer: React.FunctionComponent<FooterProps> = ({ t }) => {
                 t('footer:manufacturerUvp'),
                 t('footer:uvpComparisonRate'),
                 t('footer:priceEvaluation', { date: today }),
+                ...(showCostFootnotes ? [t('footer:co2CostsInfo'), t('footer:evTaxExemption')] : []),
                 t('footer:consumptionInfo'),
                 t('footer:vehicleImages'),
               ].join('<br />'),

package/package.json

@@ -1,30 +1,30 @@
-{
-  "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.132",
-  "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",
-  "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
-  },
-  "dependencies": {
-    "@bytebrand/car-schema-selectors": "^2.0.7",
-    "@bytebrand/fe-financing": "^5.14.20",
-    "classnames": "2.2.6",
-    "clsx": "^2.1.1",
-    "d3-format": "1.4.5",
-    "js-cookie": "^2.2.0",
-    "lodash": "^4.17.21",
-    "lucide-react": "^0.288.0",
-    "mobx-react": "^7.6.0",
-    "moment": "^2.29.1",
-    "qs": "^6.6.0",
-    "react-device-detect": "^2.1.2",
-    "react-grid-system": "^5.0.2",
-    "react-lazyload": "^3.2.0",
-    "react-scroll": "^1.9.3",
-    "react-slick": "^0.29.0",
-    "slick-carousel": "1.8.1"
-  }
-}
+{
+  "name": "@bytebrand/fe-ui-core-autobahn",
+  "version": "1.0.134",
+  "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",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "@bytebrand/car-schema-selectors": "^2.0.7",
+    "@bytebrand/fe-financing": "^5.14.20",
+    "classnames": "2.2.6",
+    "clsx": "^2.1.1",
+    "d3-format": "1.4.5",
+    "js-cookie": "^2.2.0",
+    "lodash": "^4.17.21",
+    "lucide-react": "^0.288.0",
+    "mobx-react": "^7.6.0",
+    "moment": "^2.29.1",
+    "qs": "^6.6.0",
+    "react-device-detect": "^2.1.2",
+    "react-grid-system": "^5.0.2",
+    "react-lazyload": "^3.2.0",
+    "react-scroll": "^1.9.3",
+    "react-slick": "^0.29.0",
+    "slick-carousel": "1.8.1"
+  }
+}

package/theme/md3.css

@@ -7581,6 +7581,7 @@ line-height: 31px;
   display: flex;
   gap: 5px;
   align-items: flex-end;
+  margin-bottom: 20px;
 }
 .md3 .co2-col {
   flex: 1;
@@ -11276,3 +11277,49 @@ color: #005CFF;
     border-bottom-right-radius: 2px;
   }
 }
+
+/* VdpEnergyTaxSummary ("Energiekosten und Kraftfahrzeugsteuer pro Jahr" card, VdpModules.tsx)
+   — desktop layout (row, padding: 15px, border-right divider between the 2 columns) is
+   inline JS styles on the component, untouched. padding + the divider are the only two
+   properties that change on mobile, so THOSE (only) live here instead of inline, letting
+   this media query override them without !important. */
+.md3 .vdp-ets-col {
+  padding: 15px;
+}
+.md3 .vdp-ets-col--first {
+  border-right: 1px solid var(--md-outline-variant);
+}
+@media (max-width: 600px) {
+  .md3 .vdp-ets-row {
+    flex-direction: column;
+  }
+  .md3 .vdp-ets-col {
+    padding: 14px 16px;
+  }
+  .md3 .vdp-ets-col--first {
+    border-right: none;
+    border-bottom: 1px solid var(--md-outline-variant);
+  }
+}
+
+/* VdpCo2CostsSummary ("Mögliche CO₂-Kosten..." card, VdpModules.tsx) — same treatment as
+   .vdp-ets-* above, just 3 columns (low/middle/high) instead of 2; the first two carry the
+   divider, the last one never does (nothing to its right/below). */
+.md3 .vdp-ccs-col {
+  padding: 15px;
+}
+.md3 .vdp-ccs-col--divider {
+  border-right: 1px solid var(--md-outline-variant);
+}
+@media (max-width: 600px) {
+  .md3 .vdp-ccs-row {
+    flex-direction: column;
+  }
+  .md3 .vdp-ccs-col {
+    padding: 14px 16px;
+  }
+  .md3 .vdp-ccs-col--divider {
+    border-right: none;
+    border-bottom: 1px solid var(--md-outline-variant);
+  }
+}

package/vdp/VdpModules.tsx

@@ -26,7 +26,7 @@ import { TranslationFunction } from '../types';
 
 import { Button, Dropdown, DropdownOption, Icon, Spec, StatChip, Stars } from '../ui';
 import { CO2_CLASSES, CO2_COLORS, TIER_LABELS, TIER_KEYS, TIER_COLORS, TIER_BACKGROUNDS } from '../constants';
-import { defaultVdpSpecs, EquipmentGroups, PriceRatingBands, VehicleDetail, VdpSpec, VdpReview } from './types';
+import { defaultVdpSpecs, EquipmentGroups, PriceRatingBands, VehicleDetail, VdpSpec, VdpReview, RunningCostRow, EnergyTaxSummary } from './types';
 import { AddServicesTooltipBody, CalcRow, DocCheckIcon, EvalBar, expanderBtnStyle, FinanceMode, Slider, TermChips, ToggleRow } from './FinanceCalculator';
 import { formatEur as eur, formatEurCents as eurCents, formatPct as pct } from '../utils/financeFormat';
 
@@ -364,6 +364,160 @@ export const VdpSpecTable: React.FunctionComponent<VdpSpecTableProps> = ({ vehic
   );
 };
 
+// ---------------------------------------------------------------------------
+// "Energiekosten und Kraftfahrzeugsteuer pro Jahr" summary card — new Figma design.
+// Deliberately its OWN literal inline styles straight from the Figma spec (hex colors,
+// 'Arimo', exact px) rather than the shared mcard/Spec/md-headline-sm grammar — this frame
+// is a one-off design, not part of the .md3 token system. Covers petrol/diesel, BEV, and
+// PHEV (fuel-type-branching data built by toVehicleDetail.ts) — this replaced the legacy-
+// parity "Laufende Kosten pro Jahr" card (formerly VdpRunningCosts here), which showed the
+// SAME figures via the old accordion.tableCostsPerYear layout/wording and has been removed
+// now that this card covers every fuel type; keeping both would show the same numbers
+// twice with inconsistent wording (e.g. old block's "0,00 EUR/Jahr" Kfz-Steuer vs. this
+// card's real "befristet steuerbefreit" text for a BEV).
+// ---------------------------------------------------------------------------
+
+export interface VdpEnergyTaxSummaryProps {
+  vehicle: VehicleDetail;
+  t: TranslationFunction;
+}
+
+const energyTaxLabelStyle: React.CSSProperties = {
+  fontFamily: 'Arimo',
+  fontStyle: 'normal',
+  fontWeight: 400,
+  fontSize: 13,
+  lineHeight: '18px',
+  color: '#5B6B7F',
+};
+
+const energyTaxValueStyle: React.CSSProperties = {
+  fontFamily: 'Arimo',
+  fontStyle: 'normal',
+  fontWeight: 700,
+  fontSize: 18,
+  lineHeight: '24px',
+  color: '#0E2238',
+};
+
+const energyTaxNoteStyle: React.CSSProperties = {
+  fontFamily: 'Arimo',
+  fontStyle: 'normal',
+  fontWeight: 400,
+  fontSize: 11,
+  lineHeight: '15px',
+  color: '#5B6B7F',
+};
+
+// Shared by both new-Figma-design cards below (VdpEnergyTaxSummary + VdpCo2CostsSummary) —
+// the "⁵"/"⁶" superscript footnote markers, and the h2 title.
+const footnoteStyle: React.CSSProperties = {
+  fontFamily: 'Arimo',
+  fontStyle: 'normal',
+  fontWeight: 700,
+  fontSize: 18,
+  lineHeight: '24px',
+  color: '#0E2238',
+};
+
+const summaryCardTitleStyle: React.CSSProperties = {
+  // <h2> carries a UA-stylesheet default margin (top + bottom) unless reset — zero it
+  // explicitly so ONLY marginBottom: 10 (the spec'd value) applies, no stray top padding/gap.
+  margin: 0,
+  marginBottom: 10,
+  fontFamily: 'Arimo',
+  fontStyle: 'normal',
+  fontWeight: 700,
+  fontSize: 15,
+  lineHeight: '20px',
+  color: '#0E2238',
+};
+
+export const VdpEnergyTaxSummary: React.FunctionComponent<VdpEnergyTaxSummaryProps> = ({ vehicle, t }) => {
+  const s: EnergyTaxSummary | undefined = vehicle.energyTaxSummary;
+  if (!s) return null;
+  return (
+    <div id="vdp-energy-tax">
+      <h2 style={summaryCardTitleStyle}>{t('vehicleProps:title.energyTaxSummaryTitle')}</h2>
+      <div
+        className="vdp-ets-row"
+        style={{
+          display: 'flex',
+          width: '100%',
+          gap: 4,
+          background: '#F5F7FA',
+          borderRadius: 12,
+        }}
+      >
+        <div className="vdp-ets-col vdp-ets-col--first" style={{ flex: 1 }}>
+          <div style={energyTaxLabelStyle}>{t('vehicleProps:title.energyCostsYearLabel')}</div>
+          <div style={energyTaxValueStyle}>{s.energyCost}</div>
+          {/* PHEV: both a Kraftstoffpreis AND a Strompreis line (getBaseFuelPrice returns
+              both when hybridPlugin===true) — ICE/BEV each only ever populate one. */}
+          {s.fuelPriceNote && s.fuelPriceNote.map((note, i) => (
+            <div key={i} style={energyTaxNoteStyle}>
+              {note}
+            </div>
+          ))}
+        </div>
+        <div className="vdp-ets-col" style={{ flex: 1 }}>
+          <div style={energyTaxLabelStyle}>{t('vehicleProps:title.vehicleTaxYearLabel')}</div>
+          <div style={{ height: 24, ...energyTaxValueStyle }}>
+            {s.tax}
+            <span style={footnoteStyle}>⁶</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// "Mögliche CO₂-Kosten über die nächsten 10 Jahre (15.000 km/Jahr)⁵" — new Figma design,
+// same card grammar as VdpEnergyTaxSummary above (own literal inline styles), 3 equal
+// columns (low/middle/high reference CO2 price) instead of 2.
+// ---------------------------------------------------------------------------
+
+export interface VdpCo2CostsSummaryProps {
+  vehicle: VehicleDetail;
+  t: TranslationFunction;
+}
+
+export const VdpCo2CostsSummary: React.FunctionComponent<VdpCo2CostsSummaryProps> = ({ vehicle, t }) => {
+  const s = vehicle.co2CostsSummary;
+  const rows: RunningCostRow[] = s ? ([s.low, s.middle, s.high].filter(Boolean) as RunningCostRow[]) : [];
+  if (!rows.length) return null;
+  return (
+    <div id="vdp-co2-costs">
+      <h2 style={summaryCardTitleStyle}>
+        {t('vehicleProps:title.co2CostsSummaryTitle')}
+        <span style={{ ...footnoteStyle, fontSize: 19 }}>⁵</span>
+      </h2>
+      <div
+        className="vdp-ccs-row"
+        style={{
+          display: 'flex',
+          width: '100%',
+          gap: 4,
+          background: '#F5F7FA',
+          borderRadius: 12,
+        }}
+      >
+        {rows.map((row, i) => (
+          <div
+            key={i}
+            className={`vdp-ccs-col${i < rows.length - 1 ? ' vdp-ccs-col--divider' : ''}`}
+            style={{ flex: 1 }}
+          >
+            <div style={energyTaxLabelStyle}>{row.label}</div>
+            <div style={energyTaxValueStyle}>{row.value}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
 // ---------------------------------------------------------------------------
 // Equipment list (grouped + searchable)
 // ---------------------------------------------------------------------------
@@ -524,6 +678,19 @@ export const Co2Label: React.FunctionComponent<Co2LabelProps> = ({ vehicle, t })
       </div>
       {/* no EnVKV footer line — Figma drops it (the * on the heading refers to the page-footer
           disclaimer instead); the scale caption above carries the WLTP-kombiniert wording */}
+
+      {/* Pkw-EnVKV mandatory cost disclosure — moved to the bottom of this same card (Figma) rather
+          than standing as its own top-level block; each still gates on its own vehicle data. */}
+      {vehicle.energyTaxSummary && (
+        <div style={{ paddingTop: 20, borderTop: '1px solid #C5C6D2' }}>
+          <VdpEnergyTaxSummary vehicle={vehicle} t={t} />
+        </div>
+      )}
+      {vehicle.co2CostsSummary && (
+        <div style={{ marginTop: 22 }}>
+          <VdpCo2CostsSummary vehicle={vehicle} t={t} />
+        </div>
+      )}
     </div>
   );
 };

package/vdp/index.ts

@@ -29,6 +29,8 @@ export {
   VdpHeaderCondition,
   VdpTrustRow,
   VdpSpecTable,
+  VdpEnergyTaxSummary,
+  VdpCo2CostsSummary,
   EquipmentList,
   Co2Label,
   VehicleDescription,
@@ -49,6 +51,8 @@ export type {
   VdpHeaderCardProps,
   VdpTrustRowProps,
   VdpSpecTableProps,
+  VdpEnergyTaxSummaryProps,
+  VdpCo2CostsSummaryProps,
   EquipmentListProps,
   Co2LabelProps,
   VehicleDescriptionProps,
@@ -76,6 +80,9 @@ export type {
   VehicleDetail,
   VehicleCondition,
   VdpSpec,
+  RunningCostRow,
+  EnergyTaxSummary,
+  Co2CostsSummary,
   EquipmentGroups,
   PriceHistoryPoint,
   PriceRatingBand,

package/vdp/types.ts

@@ -60,6 +60,53 @@ export function isZeroSpecValue(formatted: string): boolean {
  */
 export type EquipmentGroups = Record<string, string[]>;
 
+/**
+ * One "Laufende Kosten pro Jahr" row (ADV-123/ADV-242 — Pkw-EnVKV mandatory cost
+ * disclosure). `label` and `value` are already the fully-formatted, translated strings
+ * the legacy VDP showed (e.g. label "bei niedrigem Ø CO2-Preis von 50 EUR/t", value
+ * "312,50 EUR/Jahr"); `description`, when present, is the required explanatory/
+ * uncertainty note for the CO2-cost-scenario rows and must always render visibly —
+ * never hide it behind a tooltip-only interaction (ticket requirement).
+ */
+export interface RunningCostRow {
+  label: string;
+  value: string;
+  description?: string;
+}
+
+/**
+ * "Energiekosten und Kraftfahrzeugsteuer pro Jahr" summary card — new Figma design.
+ * Covers petrol/diesel, BEV, and PHEV (fuel-type-branching data). Needs-data: undefined
+ * when energyCost/tax can't be computed — fuelPriceNote is separately optional (omitted
+ * for BEVs, which have no per-liter fuel price).
+ */
+export interface EnergyTaxSummary {
+  /** e.g. "1.508,40 €" — for a BEV, the electricity-cost equivalent (getFuelPrice already
+   *  branches on fuel type internally). */
+  energyCost: string;
+  /** e.g. "314,00 €" — OR, for a BEV, the real §3d KraftStG time-limited exemption text
+   *  ("befristet steuerbefreit"), never a fabricated "0,00 €". */
+  tax: string;
+  /** 1 line for ICE ("Kraftstoffpreis: 1,95 EUR/l (Jahresdurchschnitt 2023)") or BEV
+   *  ("Strompreis: 41,60 ct/kWh (Jahresdurchschnitt 2023)"); BOTH lines for a plug-in
+   *  hybrid (getBaseFuelPrice returns fuelPrice AND powerPrice when hybridPlugin===true) —
+   *  each rendered on its own line, same style. Omitted entirely (never a guessed value)
+   *  when the car has no computable per-liter fuel price NOR ct/kWh electricity price. */
+  fuelPriceNote?: string[];
+}
+
+/**
+ * "Mögliche CO₂-Kosten über die nächsten 10 Jahre (15.000 km/Jahr)" summary card — new
+ * Figma design, 3-column sibling of EnergyTaxSummary. The label already carries the
+ * reference €/t price, so `RunningCostRow.description` is unused here. Needs-data: a
+ * scenario missing its value is simply omitted.
+ */
+export interface Co2CostsSummary {
+  low?: RunningCostRow;
+  middle?: RunningCostRow;
+  high?: RunningCostRow;
+}
+
 /** Vehicle condition block rendered as the header card's zustand tiles. */
 export interface VehicleCondition {
   /** TÜV/HU validity, e.g. '03/2027' — or 'Neu' for a new HU. */
@@ -163,6 +210,12 @@ export interface VehicleDetail {
    */
   specs?: VdpSpec[];
 
+  // --- Pkw-EnVKV mandatory cost disclosure (ADV-123/ADV-242) ---
+  /** Needs-data: undefined when energyCost/tax can't be computed. */
+  energyTaxSummary?: EnergyTaxSummary;
+  /** Needs-data: undefined when no CO2-cost scenario can be computed. */
+  co2CostsSummary?: Co2CostsSummary;
+
   // --- price (always real) ---
   /** financing monthly rate in EUR — the lead price shown in sticky/bottom bars. */
   monthly: number;