@bytebrand/fe-ui-core-autobahn 1.0.131 → 1.0.133

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,216 @@ 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: '#005CFF',
+};
+
+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: 'var(--md-sc-lowest)',
+          borderRadius: 'var(--md-r-md)',
+          border: '1px solid var(--md-outline-variant)',
+        }}
+      >
+        <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: 'var(--md-sc-lowest)',
+          borderRadius: 'var(--md-r-md)',
+          border: '1px solid var(--md-outline-variant)',
+        }}
+      >
+        {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>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Legal footnote text for the "⁵"/"⁶" markers used in VdpCo2CostsSummary/VdpEnergyTaxSummary
+// above — real Pkw-EnVKV/§3d KraftStG disclosure copy (verbatim, not paraphrased), plain
+// text (no card/background). Needs-data: each paragraph only shows when its corresponding
+// card above actually rendered (never an orphaned footnote for a marker nobody saw).
+// ---------------------------------------------------------------------------
+
+export interface VdpCostFootnotesProps {
+  vehicle: VehicleDetail;
+  t: TranslationFunction;
+}
+
+const costFootnoteStyle: React.CSSProperties = {
+  fontFamily: 'Arimo',
+  fontStyle: 'normal',
+  fontWeight: 700,
+  fontSize: 13.5,
+  lineHeight: '16px',
+  color: '#000000',
+};
+
+export const VdpCostFootnotes: React.FunctionComponent<VdpCostFootnotesProps> = ({ vehicle, t }) => {
+  const showCo2Footnote = !!vehicle.co2CostsSummary;
+  const showTaxFootnote = !!vehicle.energyTaxSummary;
+  if (!showCo2Footnote && !showTaxFootnote) return null;
+  return (
+    <div id="vdp-cost-footnotes" style={costFootnoteStyle}>
+      {showCo2Footnote && (
+        <>
+          {t('vehicleProps:value.co2CostsFootnoteTitle')}
+          <br />
+          <br />
+          {t('vehicleProps:value.co2CostsFootnote')}
+        </>
+      )}
+      {showCo2Footnote && showTaxFootnote && (
+        <>
+          <br />
+          <br />
+          <br />
+        </>
+      )}
+      {showTaxFootnote && (
+        <>
+          {t('vehicleProps:value.taxExemptFootnoteTitle')}
+          <br />
+          <br />
+          {t('vehicleProps:value.taxExemptFootnote')}
+        </>
+      )}
+    </div>
+  );
+};
+
 // ---------------------------------------------------------------------------
 // Equipment list (grouped + searchable)
 // ---------------------------------------------------------------------------

package/vdp/index.ts

@@ -29,6 +29,9 @@ export {
   VdpHeaderCondition,
   VdpTrustRow,
   VdpSpecTable,
+  VdpEnergyTaxSummary,
+  VdpCo2CostsSummary,
+  VdpCostFootnotes,
   EquipmentList,
   Co2Label,
   VehicleDescription,
@@ -49,6 +52,9 @@ export type {
   VdpHeaderCardProps,
   VdpTrustRowProps,
   VdpSpecTableProps,
+  VdpEnergyTaxSummaryProps,
+  VdpCo2CostsSummaryProps,
+  VdpCostFootnotesProps,
   EquipmentListProps,
   Co2LabelProps,
   VehicleDescriptionProps,
@@ -76,6 +82,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;

package/vehiclesProps/decoratedLightProps.tsx

@@ -165,7 +165,10 @@ const getDecoratedLightProps = (
         if (hybridPlugin) {
           if (wltpWeightedPowerCombinedContent && wltpWeightedCombinedContent) {
             const dischargedCombined = Number.isFinite(wltpConsumptionCombined) ? wltpConsumptionCombined : 19.9;
-            const dischargedClass = car.environmentEmissions.wltpDischargedEnergyEfficiencyClass || 'selector_energyEfficiencyClass_g';
+            // ADV-187: the discharged class is derived server-side from wltpCo2Discharged; when the
+            // backend could not derive it the field is selector_unknown — hide the segment, never
+            // fall back to a hard-coded class here.
+            const dischargedClass = car.environmentEmissions.wltpDischargedEnergyEfficiencyClass;
             const weightedCombinedLabeled = t('vehicleProps:value.wltpWeightedCombinedLabel', { consumption: wltpWeightedCombined.toLocaleString(language), unit: translatedUnit });
             const dischargedCombinedLabeled = t('vehicleProps:value.wltpDischargedCombinedLabel', { consumption: dischargedCombined.toLocaleString(language), unit: translatedUnit });
             const co2WeightedContent = Number.isFinite(wltpCo2)
@@ -174,14 +177,16 @@ const getDecoratedLightProps = (
             const co2ClassWeighted = isPropDefined(wltpEnergyEfficiencyClass)
               ? t('vehicleProps:value.co2ClassWeighted', { class: t(`cbd:${wltpEnergyEfficiencyClass}`) })
               : null;
-            const co2ClassDischarged = t('vehicleProps:value.co2ClassDischarged', { class: t(`cbd:${dischargedClass}`) });
+            const co2ClassDischarged = isPropDefined(dischargedClass)
+              ? t('vehicleProps:value.co2ClassDischarged', { class: t(`cbd:${dischargedClass}`) })
+              : null;
             return <React.Fragment>
                 {`${wltpWeightedPowerCombinedContent} + `}
                 {`${weightedCombinedLabeled}, `}
                 {`${dischargedCombinedLabeled}`}
                 {co2WeightedContent && <>, {co2WeightedContent}</>}
                 {co2ClassWeighted && <>, {co2ClassWeighted}</>}
-                {<>, {co2ClassDischarged}</>}
+                {co2ClassDischarged && <>, {co2ClassDischarged}</>}
               </React.Fragment>
           }
 
@@ -316,7 +321,10 @@ const getDecoratedLightProps = (
         if (hybridPlugin) {
           if (wltpWeightedPowerCombinedContent && wltpWeightedCombinedContent) {
             const dischargedCombined = Number.isFinite(wltpConsumptionCombined) ? wltpConsumptionCombined : 19.9;
-            const dischargedClass = car.environmentEmissions.wltpDischargedEnergyEfficiencyClass || 'selector_energyEfficiencyClass_g';
+            // ADV-187: the discharged class is derived server-side from wltpCo2Discharged; when the
+            // backend could not derive it the field is selector_unknown — hide the segment, never
+            // fall back to a hard-coded class here.
+            const dischargedClass = car.environmentEmissions.wltpDischargedEnergyEfficiencyClass;
             const weightedCombinedLabeled = t('vehicleProps:value.wltpWeightedCombinedLabel', { consumption: wltpWeightedCombined.toLocaleString(language), unit: translatedUnit });
             const dischargedCombinedLabeled = t('vehicleProps:value.wltpDischargedCombinedLabel', { consumption: dischargedCombined.toLocaleString(language), unit: translatedUnit });
             const co2WeightedContent = Number.isFinite(wltpCo2)
@@ -325,14 +333,16 @@ const getDecoratedLightProps = (
             const co2ClassWeighted = isPropDefined(wltpEnergyEfficiencyClass)
               ? t('vehicleProps:value.co2ClassWeighted', { class: t(`cbd:${wltpEnergyEfficiencyClass}`) })
               : null;
-            const co2ClassDischarged = t('vehicleProps:value.co2ClassDischarged', { class: t(`cbd:${dischargedClass}`) });
+            const co2ClassDischarged = isPropDefined(dischargedClass)
+              ? t('vehicleProps:value.co2ClassDischarged', { class: t(`cbd:${dischargedClass}`) })
+              : null;
             return <React.Fragment>
                 {`${wltpWeightedPowerCombinedContent} + `}
                 {`${weightedCombinedLabeled}, `}
                 {`${dischargedCombinedLabeled}`}
                 {co2WeightedContent && <>, {co2WeightedContent}</>}
                 {co2ClassWeighted && <>, {co2ClassWeighted}</>}
-                {<>, {co2ClassDischarged}</>}
+                {co2ClassDischarged && <>, {co2ClassDischarged}</>}
               </React.Fragment>
           }
 

package/vehiclesProps/decoratedProps.tsx

@@ -880,10 +880,12 @@ const getDecoratedProps = (
         // (entladen, komb) fuel consumption + a discharged CO2 class.
         if (hybridPlugin && wltpConsumptionWeightedPowerCombinedContent && wltpConsumptionWeightedCombinedContent) {
           const ADV88_DEFAULT_DISCHARGED_COMBINED = 19.9;
-          const ADV88_DEFAULT_DISCHARGED_CO2_CLASS = 'selector_energyEfficiencyClass_g';
 
           const dischargedCombined = Number.isFinite(wltpCombined) ? wltpCombined : ADV88_DEFAULT_DISCHARGED_COMBINED;
-          const dischargedClass = car.environmentEmissions.wltpDischargedEnergyEfficiencyClass || ADV88_DEFAULT_DISCHARGED_CO2_CLASS;
+          // ADV-187: the discharged class is derived server-side from wltpCo2Discharged; when the
+          // backend could not derive it the field is selector_unknown — hide the segment, never
+          // fall back to a hard-coded class here.
+          const dischargedClass = car.environmentEmissions.wltpDischargedEnergyEfficiencyClass;
 
           const weightedCombinedLabeled = t('vehicleProps:value.wltpWeightedCombinedLabel', { consumption: wltpWeightedCombined.toLocaleString(language), unit: translatedUnit });
           const dischargedCombinedLabeled = t('vehicleProps:value.wltpDischargedCombinedLabel', { consumption: dischargedCombined.toLocaleString(language), unit: translatedUnit });
@@ -893,7 +895,9 @@ const getDecoratedProps = (
           const co2ClassWeighted = isPropDefined(wltpEnergyEfficiencyClass)
             ? t('vehicleProps:value.co2ClassWeighted', { class: t(`cbd:${wltpEnergyEfficiencyClass}`) })
             : null;
-          const co2ClassDischarged = t('vehicleProps:value.co2ClassDischarged', { class: t(`cbd:${dischargedClass}`) });
+          const co2ClassDischarged = isPropDefined(dischargedClass)
+            ? t('vehicleProps:value.co2ClassDischarged', { class: t(`cbd:${dischargedClass}`) })
+            : null;
 
           return <React.Fragment>
             {wrapValue(wltpConsumptionWeightedPowerCombinedContent)}{' + '}
@@ -901,7 +905,7 @@ const getDecoratedProps = (
             {wrapValue(dischargedCombinedLabeled)}
             {co2WeightedContent && <>{', '}{wrapValue(co2WeightedContent)}</>}
             {co2ClassWeighted && <>{', '}{co2ClassWeighted}</>}
-            {', '}{co2ClassDischarged}
+            {co2ClassDischarged && <>{', '}{co2ClassDischarged}</>}
           </React.Fragment>
         }