@bytebrand/fe-ui-core-autobahn 1.0.0

package/data/toAutobahnCar.ts

@@ -0,0 +1,442 @@
+// Autobahn (auto.de redesign) — store-car → AutobahnCar mapper (AB-P0-6).
+//
+// PURE adapter: converts the existing fe-main "store car" (the object
+// `SearchResultsStore.getCarsForPage()` returns to the SRP, produced by
+// `transformDataForVehicles` in framework/DataTransformers.ts) into the
+// `AutobahnCar` view-model the new Autobahn cards consume
+// (components/autobahn/cards/types.ts).
+//
+// WHY a pure function with injected deps:
+//   The Autobahn cards are pure/presentational and never touch the store. This
+//   mapper is the single seam that reads the real payload. It is kept pure (no
+//   store singletons imported here) so it is unit-testable and the SRP container
+//   injects the real stores/services (imagesStore.getSupportedImageFormat,
+//   appStore.language). Everything it needs arrives through `deps`.
+//
+// NEEDS-DATA discipline (the point of the ticket):
+//   Fields with NO real source on the search payload are left `undefined` so the
+//   cards render their 'Daten folgt' marker instead of a fabricated number. See
+//   the per-field rationale in ./fieldMapping.ts. We NEVER synthesize:
+//     drop, marketLow, marketAvg, marketHigh, watchers, views.
+//   listPrice / savings are emitted ONLY if a real strike/list price exists.
+//
+// Every field path below was confirmed against the real code (file:line in
+// ./fieldMapping.ts), not guessed.
+
+import { getPriceRating, getPredictablePrice } from '../utils/CommonUtils';
+import { formatTimestamp } from '../utils/DateUtils';
+import { getPowerLabel } from '../utils/power';
+
+import { AutobahnCar, AutobahnPhev } from '../cards/types';
+import { TIER_LABELS, RatingTier, CO2_CLASSES, Co2Class } from '../constants';
+
+/**
+ * Last-resort placeholder shown in the carousel until the real images for a car
+ * are loaded. The SRP container SHOULD inject the app's real no-image asset via
+ * `deps.placeholder` (fe-main exposes PLACEHOLDER_IMAGE_LARGE_URL /
+ * PLACEHOLDER_IMAGE_SMALL_URL in framework/constants/app.ts, both derived from
+ * config.imagesAPI.imgUrlBase). We do NOT import that here to keep the mapper
+ * free of app-config coupling; this empty-data-URI default just guarantees a
+ * non-broken <img> in tests / before the container wires the real one.
+ */
+export const PLACEHOLDER_IMAGE =
+  'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
+
+/**
+ * Dependencies the SRP container injects. Everything here is what the mapper
+ * needs from the outside world — keeping the function itself pure.
+ */
+export interface ToAutobahnCarDeps {
+  /**
+   * Build a ready-to-use image URL for a car image.
+   * Pass `imagesStore.getSupportedImageFormat` straight through (it already
+   * picks webp/jpeg and the cached size). Signature matches ImagesStore:
+   *   (vehicleID, imageIdentifier, size) => url
+   */
+  getImageUrl?: (vehicleID: string, imageIdentifier: string, size: 'small' | 'medium' | 'large') => string;
+  /**
+   * Loaded gallery images for this car from `imagesStore.images.get(id)`
+   * (array of { imageUrlSmall, imageUrlMedium, imageUrlLarge, imageUrl, ... }).
+   * When present we use these real URLs; otherwise we fall back to the single
+   * main image via getImageUrl, then to the placeholder. Never faked.
+   */
+  loadedImages?: Array<{ imageUrlSmall?: string; imageUrlMedium?: string; imageUrlLarge?: string; imageUrl?: string }>;
+  /** image size used when building gallery URLs from the main image id. */
+  imageSize?: 'small' | 'medium' | 'large';
+  /** translator for cbd:* selector codes (fuel/gearbox). Falls back to a built-in de map, then the raw code. */
+  t?: (key: string, options?: object) => string;
+  /** active UI language ('de' | 'en' …). Drives de-DE vs en-IN number grouping for the EnVKV line. */
+  language?: string;
+  /** placeholder image URL override (defaults to PLACEHOLDER_IMAGE). */
+  placeholder?: string;
+}
+
+// ---------------------------------------------------------------------------
+// small pure helpers
+// ---------------------------------------------------------------------------
+
+const DEFAULT_LANG = 'de';
+
+/** locale tag for Number#toLocaleString — de-DE (comma decimals) unless en. */
+function localeTag(language?: string): string {
+  return language === 'en' ? 'en-IN' : 'de-DE';
+}
+
+/** finite-number coercion: accepts number | numeric string, else undefined. */
+function num(v: any): number | undefined {
+  if (v == null) return undefined;
+  const n = typeof v === 'number' ? v : Number.parseFloat(String(v));
+  return Number.isFinite(n) ? n : undefined;
+}
+
+/**
+ * Minimal de-DE fallback for the handful of cbd:* selector codes the cards show
+ * (fuel + gearbox). Used only when no `t` is injected (e.g. in unit tests).
+ * The full set lives in the cbd locale dictionary (@bytebrand/i18n-dictionaries).
+ */
+const CBD_DE_FALLBACK: Record<string, string> = {
+  selector_fuel_petrol: 'Benzin',
+  selector_fuel_diesel: 'Diesel',
+  selector_fuel_electrical: 'Elektro',
+  selector_fuel_ethanol: 'Ethanol',
+  selector_fuel_hybridElectricalDiesel: 'Hybrid (Elektro / Diesel)',
+  selector_fuel_hybridElectricalPetrol: 'Hybrid (Elektro / Benzin)',
+  selector_fuel_hydrogen: 'Wasserstoff',
+  selector_fuel_naturalGas: 'Erdgas',
+  selector_gearbox_automatic: 'Automatik',
+  selector_gearbox_manualShift: 'Manuell',
+  selector_gearbox_semiAutomatic: 'Halbautomatik',
+  // highlight-chip keys (DataTransformers highlights) — used when no `t` is injected
+  multimedia_navigationSystem: 'Navigationssystem',
+  lights_ledHeadlights: 'LED-Scheinwerfer',
+  lights_xenonHeadlights: 'Xenon-Scheinwerfer',
+  window_panoramicGlassRoof: 'Panoramadach',
+  assistants_headUpDisplay: 'Head-up-Display',
+  assistants_adaptiveCruiseControl: 'Abstandstempomat',
+  search_seatHeating: 'Sitzheizung',
+  selector_climatisation_automaticAirCondition: 'Klimaautomatik',
+  selector_climatisation_airCondition: 'Klimaanlage',
+  search_parkingAssistants: 'Einparkhilfe',
+  selector_driveType_allWheelDrive: 'Allradantrieb',
+  search_trailerHitch: 'Anhängerkupplung',
+  assistants_cruiseControl: 'Tempomat',
+  assistants_trafficSignRecognition: 'Verkehrszeichenerkennung',
+  assistants_collisionAvoidance: 'Notbremsassistent',
+  window_sunroof: 'Schiebedach',
+  seats_electricAdjustable: 'Elektr. Sitze',
+  exterior_metallic: 'Metallic-Lackierung',
+  multimedia_handsFreePhoneSystem: 'Freisprecheinrichtung',
+  heatingCooling_auxiliaryHeating: 'Standheizung',
+  multimedia_bluetooth: 'Bluetooth',
+};
+
+/** translate a cbd:* selector code → human label. */
+function cbd(code: any, t?: (key: string, options?: object) => string): string {
+  if (code == null || code === 'N/A') return '';
+  const key = String(code);
+  if (t) {
+    const out = t(`cbd:${key}`);
+    // i18next returns the key back when missing; treat that as "no translation".
+    if (out && out !== `cbd:${key}` && out !== key) return out;
+  }
+  return CBD_DE_FALLBACK[key] || key;
+}
+
+/**
+ * Map the store's energy-efficiency-class selector code (or a bare letter) to a
+ * single CO2_CLASSES letter ('A'…'G'). A+/A++/A+++ collapse to 'A' so the card's
+ * colored InlineCls (which does CO2_CLASSES.indexOf) still resolves a band color.
+ * Returns '' when there is no class (caller decides what to render).
+ */
+function co2ClassLetter(code: any): Co2Class | '' {
+  if (code == null || code === 'N/A') return '';
+  const raw = String(code);
+  // selector_energyEfficiencyClass_appp → 'a', _ap → 'a', _b → 'b', …
+  const m = raw.match(/selector_energyEfficiencyClass_(a|b|c|d|e|f|g)/i);
+  const letter = (m ? m[1] : raw.replace(/\+/g, '').trim().charAt(0)).toUpperCase();
+  return (CO2_CLASSES as readonly string[]).includes(letter) ? (letter as Co2Class) : '';
+}
+
+/**
+ * Real Preisbewertung → AutobahnCar rating tone + German label.
+ *
+ * Source of truth (confirmed against the live SRP card,
+ * VehicleSmallCard/VehicleInfo.tsx:160): the legacy card renders
+ *   getPriceRating(price.currentSalesPrice, price.mlCurrentSalesPricePredicted)
+ * which returns a numeric tier using priceRatings:
+ *   0 noRating · 1 highPrice · 2 increasedPrice · 3 fairPrice · 4 goodPrice · 5 topPrice
+ * (constants/price.ts in this package).
+ *
+ * We map that real number onto the Autobahn 5-tier scale (TIER_LABELS,
+ * components/autobahn/constants.ts), where index 0=Top … 4=Hoch:
+ *   topPrice(5)→0 'Top Preis' · goodPrice(4)→1 'Guter Preis' ·
+ *   fairPrice(3)→2 'Fairer Preis' · increasedPrice(2)→3 'Erhöht' ·
+ *   highPrice(1)→4 'Hoher Preis'.
+ * noRating(0) has no real comparison → neutral 'Fairer Preis' (tier 2) WITHOUT a
+ * flattering label (documented in fieldMapping.ts). The card only special-cases
+ * the 'fair' tone (warn pill); every other tone is the good/green pill.
+ *
+ * AutobahnCar.rating is a free string; CarCard does `rating === 'fair' ? warn : good`.
+ * We emit the autobahn tier key ('top'|'good'|'fair'|'raised'|'high') so the
+ * neutral 'fair' maps to the warn pill exactly like the design intends.
+ */
+const LEGACY_TO_TIER: Record<number, RatingTier> = {
+  5: 0, // topPrice    → Top Preis
+  4: 1, // goodPrice   → Guter Preis
+  3: 2, // fairPrice   → Fairer Preis
+  2: 3, // increasedPrice → Erhöht
+  1: 4, // highPrice   → Hoher Preis
+};
+const TIER_TONE: Record<RatingTier, string> = {
+  0: 'top',
+  1: 'good',
+  2: 'fair',
+  3: 'raised',
+  4: 'high',
+};
+
+function mapRating(currentSalesPrice?: number, predicted?: number): { rating: string; ratingLabel: string } {
+  const legacy = getPriceRating(currentSalesPrice as number, predicted as number); // 0..5
+  // 0 = noRating: keep neutral (tier 2) — never invent a flattering rating.
+  const tier: RatingTier = legacy === 0 ? 2 : LEGACY_TO_TIER[legacy] ?? 2;
+  return { rating: TIER_TONE[tier], ratingLabel: TIER_LABELS[tier] };
+}
+
+/** Is this car a plug-in hybrid? Determined by fuel type, mirroring ADV-88 in VehicleInfo.tsx. */
+function isPluginHybrid(fuel: any): boolean {
+  return fuel === 'selector_fuel_hybridElectricalDiesel' || fuel === 'selector_fuel_hybridElectricalPetrol';
+}
+
+/** Build the gallery URL list from real images, falling back to main image, then placeholder. */
+function buildGallery(storeCar: any, deps: ToAutobahnCarDeps): string[] {
+  const placeholder = deps.placeholder || PLACEHOLDER_IMAGE;
+  // Only 'small' and 'large' variants are pre-generated by image-generator; 'medium' has no cached file.
+  const size = deps.imageSize || 'small';
+
+  // 1) Real loaded images from imagesStore.images.get(id).
+  if (Array.isArray(deps.loadedImages) && deps.loadedImages.length) {
+    const urls = deps.loadedImages
+      .map((img) =>
+        size === 'large'
+          ? img.imageUrlLarge || img.imageUrlMedium || img.imageUrl
+          : size === 'small'
+            ? img.imageUrlSmall || img.imageUrlMedium || img.imageUrl
+            : img.imageUrlMedium || img.imageUrlLarge || img.imageUrl
+      )
+      .filter((u): u is string => !!u);
+    if (urls.length) return urls;
+  }
+
+  // 2) Not loaded yet, but we have a main image id + a URL builder → single real image.
+  const id = storeCar.id;
+  const mainImageId = storeCar.mainImageId;
+  const hasImages = num(storeCar.imagesCount);
+  if (deps.getImageUrl && id && mainImageId && hasImages) {
+    const url = deps.getImageUrl(id, mainImageId, size);
+    if (url) return [url];
+  }
+
+  // 3) Nothing real yet — single placeholder (never a fabricated photo).
+  return [placeholder];
+}
+
+/** Build the optional PHEV EnVKV sub-block when the car is a plug-in hybrid and weighted data exists. */
+function buildPhev(storeCar: any, language?: string): AutobahnPhev | undefined {
+  const c = storeCar.consumption || {};
+  const e = storeCar.environmentEmissions || {};
+  if (!isPluginHybrid(c.fuel)) return undefined;
+
+  const consEl = num(c.wltpWeightedPowerCombined) ?? num(c.consumptionPowerCombined);
+  const consFuel = num(c.wltpWeightedCombined);
+  const consDis = num(c.wltpCombined) ?? num(c.consumptionCombined);
+  const co2w = num(e.wltpCo2) ?? num(e.co2);
+  const clsW = co2ClassLetter(e.wltpEnergyEfficiencyClass);
+  const clsD = co2ClassLetter(e.wltpDischargedEnergyEfficiencyClass);
+
+  // Only emit the dual PHEV line when we actually have the weighted figures the
+  // EcoLine PHEV branch needs; otherwise let the normal single line render.
+  if (consEl == null || consFuel == null || co2w == null) return undefined;
+
+  return {
+    consEl: `${consEl.toLocaleString(localeTag(language))} kWh/100 km`,
+    consFuel: `${consFuel.toLocaleString(localeTag(language))} l/100 km`,
+    consDis: consDis != null ? `${consDis.toLocaleString(localeTag(language))} l/100 km` : '–',
+    co2w: `${co2w.toLocaleString(localeTag(language))} g/km`,
+    co2classW: clsW || '–',
+    co2classD: clsD || clsW || '–',
+  };
+}
+
+// ---------------------------------------------------------------------------
+// main mapper
+// ---------------------------------------------------------------------------
+
+/**
+ * Convert one fe-main store car → AutobahnCar.
+ *
+ * @param storeCar the object from SearchResultsStore.getCarsForPage()
+ *   (shape = transformDataForVehicles output). `any` because the store car is
+ *   itself untyped (`getCarsForPage: (page) => any[]`).
+ * @param deps injected services/locale (see ToAutobahnCarDeps). Optional so the
+ *   mapper still runs in tests with zero wiring (gallery → placeholder, labels →
+ *   built-in de fallback).
+ */
+export function toAutobahnCar(storeCar: any, deps: ToAutobahnCarDeps = {}): AutobahnCar {
+  const language = deps.language || DEFAULT_LANG;
+  const t = deps.t;
+
+  const title = storeCar.title || {};
+  const info = storeCar.info || {};
+  const engineData = storeCar.engineData || {};
+  const consumption = storeCar.consumption || {};
+  const emissions = storeCar.environmentEmissions || {};
+  const price = storeCar.price || {};
+
+  // --- price / monthly (REQUIRED) ---
+  // monthly ← price.financing.monthlyInstallment. This is the financing rate
+  // produced by FinancingStore via getComputedFinancing(config).financing
+  // (getFinancing.ts:82 `monthlyInstallment`), spread into price.financing by
+  // transformDataForVehicles (DataTransformers.ts:345). It is the LEAD price.
+  const monthly = num(price?.financing?.monthlyInstallment) ?? 0;
+  // price ← price.currentSalesPrice (DataTransformers.ts:352).
+  const purchase = num(price?.currentSalesPrice) ?? 0;
+
+  // --- rating (REQUIRED-WHEN-PRICED) ← real Preisbewertung ---
+  // BL-08 (P1, MONEY): getPriceRating(0, 0) mathematically resolves to tier 5
+  // ("Top Preis" — the BEST possible rating). Its internal min/max bands are all
+  // `predicted * (1 ± pct)`, which collapse to 0 when predicted is 0, and the
+  // topPrice branch checks `currentSalesPrice <= min` — 0 <= 0 is true. A
+  // missing/broken price payload must NEVER get dressed up as the best deal on
+  // the lot. Only compute/emit a rating when there is a real, positive sales
+  // price; otherwise rating/ratingLabel stay '' (falsy) — every consumer
+  // (CarCard.tsx, cardParts.tsx, FinanceCalculator.tsx) already treats a falsy
+  // rating as "no badge", so no type change is needed here.
+  const predicted =
+    purchase > 0 ? getPredictablePrice(purchase, num(price?.mlCurrentSalesPricePredicted) as number) : undefined;
+  const { rating, ratingLabel } = purchase > 0 ? mapRating(purchase, predicted) : { rating: '', ratingLabel: '' };
+
+  // --- key specs ---
+  const powerKW = num(engineData.powerKW);
+  const powerPS = num(engineData.powerPS);
+  const power = getPowerLabel(powerKW as number, powerPS as number); // "150 kW (204 PS)"
+
+  const regTs = num(info.regDate);
+  const reg = regTs ? formatTimestamp({ timestamp: regTs, format: 'MM/YYYY' }) : '';
+
+  const ownersN = num(info.numberOfPreviousOwners);
+
+  // --- EnVKV consumption line (REQUIRED on every German car ad) ---
+  // Prefer WLTP figures when present (the legacy cards do too), else NEDC.
+  const consVal = num(consumption.wltpCombined) ?? num(consumption.consumptionCombined);
+  const co2Val = num(emissions.wltpCo2) ?? num(emissions.co2);
+  const cons = consVal != null ? `${consVal.toLocaleString(localeTag(language))} l/100 km` : '';
+  const co2 = co2Val != null ? `${co2Val.toLocaleString(localeTag(language))} g/km` : '';
+  const co2class = co2ClassLetter(emissions.wltpEnergyEfficiencyClass);
+  const phev = buildPhev(storeCar, language);
+
+  // --- media ---
+  const gallery = buildGallery(storeCar, deps);
+  const photos = num(storeCar.imagesCount) ?? 0;
+
+  // --- optional: leasing rate — ONLY when leasing is actually active for this car.
+  // SearchResultsStore.getCarsForPage stamps price.leasing.isActive via getLeasingActive
+  // (car age + mileage within the leasing limits). Legacy SRP shows "Leasing ---" when
+  // inactive; we mirror that by leaving `lease` undefined so PricePaths omits the row
+  // (instead of computing/showing a leasing rate the car isn't eligible for).
+  const leasingActive = !!(price && price.leasing && price.leasing.isActive);
+  const lease = leasingActive ? num(price?.leasing?.monthlyInstallment) : undefined;
+
+  // --- optional: list price / savings — ONLY from a real strike price ---
+  // transformDataForVehicles exposes oldMonthlyInstallment / highestPrice via
+  // the financing spread, and price.historyPriceDifference. There is NO reliable
+  // purchase-price strike on the search payload today, so we leave listPrice /
+  // savings UNDEFINED unless a real highestPrice strike exists above the sale
+  // price. See fieldMapping.ts — flagged for backend confirmation.
+  const isStrikeShown = !!price?.financing?.isStrikeShown;
+  const highest = num(price?.financing?.highestPrice) ?? num(price?.highestPrice);
+  let listPrice: number | undefined;
+  let savings: number | undefined;
+  if (isStrikeShown && highest != null && purchase > 0 && highest > purchase) {
+    listPrice = highest;
+    savings = highest - purchase;
+  }
+
+  // --- price drop (REAL) — mirrors the legacy SRL green "−X €" badge: show the reduction only
+  //     when price.historyPriceDifference is a meaningful amount (≥ 500 €, the legacy threshold).
+  const histDrop = num(price?.historyPriceDifference);
+  const drop = histDrop != null && histDrop >= 500 ? histDrop : undefined;
+  // percent reduction (historyPriceDifferencePerCent) — paired with `drop` for the −X% badge.
+  const histPct = num(price?.historyPriceDifferencePerCent);
+  const dropPct = drop != null && histPct != null && histPct > 0 ? Math.round(histPct) : undefined;
+
+  // --- NEU badge (REAL) — the legacy showNewLabel flag carried on the store car. ---
+  const isNew = !!storeCar.showNewLabel;
+
+  // --- availability (REAL) — offer.availabilityMode. 'always' → immediately available. ---
+  const offer = storeCar.offer && typeof storeCar.offer === 'object' ? storeCar.offer : {};
+  const availability =
+    offer.availabilityMode === 'selector_availabilityMode_always'
+      ? t
+        ? t('autobahn:availability.immediately')
+        : 'Sofort verfügbar'
+      : undefined;
+  // 0 € Anzahlung available — transform sets offer.showDownPayment = (raw showDownPayment && zero first installment).
+  const zeroDown = !!offer.showDownPayment;
+
+  const carView: AutobahnCar = {
+    // identity / headline
+    make: String(title.make ?? ''),
+    model: String(title.model ?? ''),
+    trim: String(title.subModel ?? ''),
+
+    // key specs
+    km: num(info.mileage) ?? 0,
+    reg,
+    power,
+    fuel: cbd(consumption.fuel, t),
+    gear: cbd(info.gearbox, t),
+    owners: ownersN ?? 0,
+
+    // price
+    monthly,
+    price: purchase,
+
+    // media
+    gallery,
+    photos,
+
+    // EnVKV
+    cons,
+    co2,
+    co2class: co2class || '',
+    ...(phev ? { phev } : {}),
+
+    // trust / features — equipment highlight chips (Matrix-LED, Virtual Cockpit, AHK, ACC, …).
+    // transformDataForVehicles extracted the present highlight selector-keys via getActualHighlights
+    // (reading the raw equipment categories); translate them to labels here (cbd → t('cbd:<key>')).
+    // First 4, like the design's card. Empty when the car has no notable equipment.
+    features: (Array.isArray((storeCar as any).highlights) ? (storeCar as any).highlights : [])
+      .map((k: any) => cbd(k, t))
+      .filter((s: string) => !!s)
+      .slice(0, 4),
+    rating,
+    ratingLabel,
+
+    // optional (only when real)
+    ...(listPrice != null ? { listPrice } : {}),
+    ...(savings != null ? { savings } : {}),
+    ...(lease != null ? { lease } : {}),
+    ...(drop != null ? { drop } : {}),
+    ...(dropPct != null ? { dropPct } : {}),
+    ...(zeroDown ? { zeroDown } : {}),
+    ...(isNew ? { isNew } : {}),
+    ...(availability ? { availability } : {}),
+
+    // NEEDS-DATA: deliberately omitted (marketLow, marketAvg, marketHigh, watchers, views).
+    // The cards render 'Daten folgt' for these until a real backend exists.
+  };
+
+  return carView;
+}
+
+export default toAutobahnCar;

package/iconsvg/IconSVG.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import components from './IconSVGConfig';
+
+type TIconSVG = {
+  [key: string]: any;
+  name: string;
+  customDimensions?: boolean;
+};
+
+const IconSVG: React.FC<TIconSVG> = ({ name, isWarrantyActive, customDimensions, ...props }: TIconSVG) => {
+  if (!name) return null;
+
+  const Component: any = components[name.toString()];
+  if (!Component) return null;
+
+  const style = customDimensions ? null : {
+    width: '1.5rem',
+    height: 'auto'
+  };
+
+  return (
+    <Component style={style} {...props} />
+  );
+};
+
+IconSVG.defaultProps = {
+  customDimensions: false
+};
+
+export default IconSVG;